/* ================================================================
   FAKTURYX WEBSITE — STYLESHEET
   ================================================================ */

:root {
  --blau: #4c6e97;
  --blau-dunkel: #375273;
  --orange: #c4783b;
  --text: #1c1f24;
  --text-hell: #5a6270;
  --grau-bg: #f4f5f7;
  --rand: #e2e5ea;
  --weiss: #ffffff;
  --erfolg: #3f8f5f;
  --radius: 10px;
  --max-breite: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--weiss);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blau);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  background: var(--weiss);
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-link img {
  height: 34px;
  width: auto;
}

.logo-link:hover {
  text-decoration: none;
}

.hauptnav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hauptnav a {
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
}

.hauptnav a:hover {
  color: var(--blau);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text);
}

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--blau);
  color: var(--weiss);
}

.btn-primary:hover {
  background: var(--blau-dunkel);
}

.btn-outline {
  background: transparent;
  border-color: var(--blau);
  color: var(--blau);
}

.btn-outline:hover {
  background: var(--blau);
  color: var(--weiss);
}

.btn-orange {
  background: var(--orange);
  color: var(--weiss);
}

.btn-orange:hover {
  background: #a8632c;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.btn[disabled],
.btn.btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--grau-bg) 0%, var(--weiss) 100%);
  padding: 72px 0 56px;
}

.hero .container {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 18px;
}

.hero h1 span {
  color: var(--blau);
}

.hero p.lead {
  font-size: 18px;
  color: var(--text-hell);
  margin: 0 0 28px;
  max-width: 46ch;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.vertrauens-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rand);
}

.vertrauens-leiste span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hell);
}

.vertrauens-leiste span::before {
  content: "✓";
  color: var(--erfolg);
  font-weight: 700;
}

.hero-bild {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 45px -25px rgba(28, 31, 36, 0.35);
}

.hero-bild img {
  border-radius: 8px;
}

/* ---------- Hero-Illustration ---------- */

.hero-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Hero: echtes Programmfenster ---------- */

.hero-produkt {
  position: relative;
  padding: 18px 0 26px 18px;
}

.hero-fenster {
  border-radius: 14px;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid rgba(28, 31, 36, 0.12);
  box-shadow:
    0 40px 70px -35px rgba(28, 31, 36, 0.55),
    0 10px 24px -14px rgba(28, 31, 36, 0.25);
}

.hero-fensterleiste {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #eceef2;
  border-bottom: 1px solid var(--rand);
}

.hero-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9ced6;
}

.hero-fenstertitel {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-hell);
}

.hero-fenster img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-karte {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-hell);
  box-shadow: 0 18px 34px -18px rgba(28, 31, 36, 0.5);
  animation: hero-schweben 6s ease-in-out infinite;
}

.hero-karte strong {
  color: var(--text);
  font-size: 14px;
}

.hero-karte-oben {
  top: 0;
  left: -6px;
}

.hero-karte-unten {
  bottom: 0;
  right: -6px;
  animation-delay: -3s;
}

.hero-karte-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--weiss);
  font-weight: 700;
  font-size: 17px;
}

.hero-karte-gruen {
  background: var(--erfolg);
}

.hero-karte-blau {
  background: var(--blau);
}

@keyframes hero-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 880px) {
  .hero-produkt {
    padding: 0 0 4px;
  }

  .hero-karte {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-karte {
    animation: none;
  }
}

/* ---------- Sektionen ---------- */

section {
  padding: 64px 0;
}

section.alt-bg {
  background: var(--grau-bg);
}

.section-kopf {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.section-kopf h2 {
  font-size: 30px;
  margin: 0 0 12px;
}

.section-kopf p {
  color: var(--text-hell);
  font-size: 17px;
  margin: 0;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 10px;
}

/* ---------- Feature-Grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 26px;
}

.feature-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(76, 110, 151, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.feature-card p {
  margin: 0;
  color: var(--text-hell);
  font-size: 15px;
}

/* ---------- Status-Quo-Check ---------- */

.statuscheck-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.statuscheck-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
}

.statuscheck-zeile + .statuscheck-zeile {
  border-top: 1px solid var(--rand);
}

.statuscheck-zeile span:first-child {
  font-weight: 600;
}

/* ---------- Vergleichstabelle (lokal vs. Cloud) ---------- */

.vergleich-tabelle {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-collapse: collapse;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.vergleich-tabelle th,
.vergleich-tabelle td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rand);
  font-size: 15px;
  vertical-align: top;
}

.vergleich-tabelle th {
  background: var(--grau-bg);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-hell);
}

.vergleich-tabelle tr:last-child td {
  border-bottom: none;
}

.vergleich-tabelle td:first-child {
  font-weight: 600;
  width: 34%;
}

.vergleich-gut {
  color: var(--erfolg);
}

.vergleich-neutral {
  color: var(--text-hell);
}

.statuscheck-badge {
  flex-shrink: 0;
  background: rgba(196, 120, 59, 0.12);
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Schritte ---------- */

.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: schritt;
}

.schritt {
  position: relative;
  padding-top: 8px;
}

.schritt .nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 700;
  margin-bottom: 14px;
}

.schritt h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.schritt p {
  color: var(--text-hell);
  font-size: 14.5px;
  margin: 0;
}

/* ---------- Preise ---------- */

.preis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}

.preis-karte {
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 32px;
  background: var(--weiss);
  display: flex;
  flex-direction: column;
}

.preis-karte.hervorgehoben {
  border-color: var(--blau);
  box-shadow: 0 20px 45px -30px rgba(76, 110, 151, 0.6);
}

.preis-karte h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.preis-karte .preis {
  font-size: 36px;
  font-weight: 700;
  margin: 12px 0 4px;
}

.preis-karte .preis small {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-hell);
}

.preis-hinweis {
  font-size: 13px;
  color: var(--text-hell);
  margin: 0 0 20px;
}

.preis-karte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex-grow: 1;
}

.preis-karte li {
  padding: 7px 0;
  font-size: 15px;
  border-top: 1px solid var(--rand);
}

.preis-karte li:first-child {
  border-top: none;
}

.preis-karte li::before {
  content: "✓";
  color: var(--erfolg);
  font-weight: 700;
  margin-right: 8px;
}

.preis-highlight-zeile {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--blau-dunkel);
  margin: -10px auto 28px;
}

.abo-umschalter {
  display: inline-flex;
  align-self: flex-start;
  background: #f1f3f6;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}

.abo-umschalter-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hell);
  cursor: pointer;
}

.abo-umschalter-btn.ist-aktiv {
  background: var(--weiss);
  color: var(--blau-dunkel);
  box-shadow: 0 2px 8px -2px rgba(76, 110, 151, 0.5);
}

.hinweis-box {
  max-width: 820px;
  margin: 28px auto 0;
  background: #fdf3e9;
  border: 1px solid #eecfa8;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 14.5px;
  color: #6b4a1f;
}

/* ---------- FAQ ---------- */

.faq-liste {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--rand);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 32px 18px 0;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-size: 22px;
  font-weight: 400;
  color: var(--blau);
}

.faq-item[open] summary::after {
  content: "\2013";
}

.faq-item p {
  margin: 0 0 20px;
  color: var(--text-hell);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Download ---------- */

.download-box {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 36px;
  text-align: center;
  background: var(--weiss);
}

.download-box .version {
  color: var(--text-hell);
  font-size: 14px;
  margin: 8px 0 24px;
}

.download-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-hell);
  margin-top: 16px;
}

.punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9ccd2;
  display: inline-block;
}

.punkt.gruen {
  background: var(--erfolg);
}

.system-info {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rand);
  font-size: 13.5px;
  color: var(--text-hell);
  text-align: left;
}

.system-info dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 10px;
}

.system-info dt:first-child {
  margin-top: 0;
}

.system-info dd {
  margin: 2px 0 0;
}

/* ---------- Screenshot-Galerie ---------- */

.galerie {
  /* Breiter als der Textbereich, damit die Programmoberfläche gut lesbar ist. */
  width: min(1320px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 36px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(76, 110, 151, 0.22), transparent 55%),
    radial-gradient(ellipse at 10% 95%, rgba(196, 120, 59, 0.14), transparent 50%),
    var(--grau-bg);
  border: 1px solid var(--rand);
}

.galerie-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.galerie-tab {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px 16px;
  font: inherit;
  color: var(--text-hell);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.galerie-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}

.galerie-tab.aktiv {
  background: var(--weiss);
  border-color: var(--rand);
  box-shadow: 0 14px 30px -20px rgba(28, 31, 36, 0.4);
  color: var(--text);
}

.galerie-nr {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--rand);
  color: var(--text-hell);
  transition: background 0.2s ease, color 0.2s ease;
}

.galerie-tab.aktiv .galerie-nr {
  background: var(--blau);
  color: var(--weiss);
}

.galerie-tab-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.galerie-tab-text span {
  display: none;
  font-size: 14px;
  line-height: 1.5;
}

.galerie-tab.aktiv .galerie-tab-text span {
  display: block;
}

.galerie-fortschritt {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

.galerie-tab.aktiv .galerie-fortschritt {
  display: block;
  animation: galerie-fortschritt 4.5s linear forwards;
}

@keyframes galerie-fortschritt {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.galerie-fenster {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(28, 31, 36, 0.12);
  background: var(--weiss);
  box-shadow:
    0 40px 70px -35px rgba(28, 31, 36, 0.55),
    0 10px 24px -14px rgba(28, 31, 36, 0.25);
}

.galerie-fensterleiste {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #eceef2;
  border-bottom: 1px solid var(--rand);
}

.galerie-punkt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c9ced6;
}

.galerie-fenstertitel {
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--text-hell);
}

.galerie-bild-wrapper {
  position: relative;
  aspect-ratio: 1150 / 830;
  background: var(--weiss);
}

.galerie-bild-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.galerie-bild-wrapper img.aktiv {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 900px) {
  .galerie {
    width: auto;
    margin-left: 0;
    transform: none;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
  }

  .galerie-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }

  .galerie-tab {
    flex: none;
    width: auto;
    padding: 10px 14px 12px;
    background: rgba(255, 255, 255, 0.6);
  }

  .galerie-tab-text span,
  .galerie-tab.aktiv .galerie-tab-text span {
    display: none;
  }

  .galerie-tab-text strong {
    font-size: 14.5px;
    margin: 0;
    white-space: nowrap;
  }

  .galerie-nr {
    width: 24px;
    height: 24px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galerie-tab.aktiv .galerie-fortschritt {
    animation: none;
    transform: scaleX(1);
  }

  .galerie-bild-wrapper img {
    transition: none;
    transform: none;
  }
}

.galerie-bildunterschrift {
  text-align: center;
  color: var(--text-hell);
  font-size: 14.5px;
  margin: 16px 0 0;
}

/* ---------- CTA-Streifen ---------- */

.cta-streifen {
  background: var(--blau-dunkel);
  color: var(--weiss);
  text-align: center;
  padding: 56px 0;
}

.cta-streifen h2 {
  margin: 0 0 12px;
  font-size: 28px;
}

.cta-streifen p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.85);
}

.cta-streifen .btn-outline {
  border-color: var(--weiss);
  color: var(--weiss);
}

.cta-streifen .btn-outline:hover {
  background: var(--weiss);
  color: var(--blau-dunkel);
}

/* ---------- Formular (Kontakt) ---------- */

.formular {
  max-width: 560px;
  margin: 0 auto;
}

.feld {
  margin-bottom: 18px;
}

.feld label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 6px;
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  background: var(--weiss);
  color: var(--text);
}

.feld textarea {
  resize: vertical;
  min-height: 130px;
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  border-color: var(--blau);
}

.kontakt-alt {
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
  color: var(--text-hell);
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  max-width: 760px;
  margin: 0 auto;
}

.rechtstext h1 {
  font-size: 30px;
  margin-bottom: 8px;
}

.rechtstext h2 {
  font-size: 20px;
  margin-top: 36px;
}

.rechtstext p,
.rechtstext li {
  color: var(--text-hell);
  font-size: 15.5px;
}

.platzhalter {
  background: #fdf3e9;
  border: 1px solid #eecfa8;
  border-radius: 8px;
  padding: 14px 18px;
  color: #6b4a1f;
  font-size: 14px;
  margin: 8px 0 20px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rand);
  background: var(--grau-bg);
  padding: 44px 0 28px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

.footer-grid img {
  height: 26px;
  margin-bottom: 12px;
}

.footer-grid p {
  color: var(--text-hell);
  font-size: 14px;
  max-width: 34ch;
}

.footer-grid h4 {
  font-size: 14px;
  margin: 0 0 14px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 9px;
}

.footer-grid a {
  color: var(--text-hell);
  font-size: 14.5px;
}

.footer-unten {
  border-top: 1px solid var(--rand);
  padding-top: 20px;
  font-size: 13.5px;
  color: var(--text-hell);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-bild {
    order: -1;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .schritte {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .nav-toggle {
    display: block;
  }

  .hauptnav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--rand);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 16px;
    display: none;
  }

  .hauptnav.offen {
    display: flex;
  }

  .hero h1 {
    font-size: 30px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .schritte {
    grid-template-columns: 1fr;
  }

  .preis-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Video "So läuft eine Rechnung durch Fakturyx" auf der Startseite */
.video-fenster {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(28, 31, 36, 0.12);
  background: var(--weiss);
  box-shadow:
    0 40px 70px -35px rgba(28, 31, 36, 0.55),
    0 10px 24px -14px rgba(28, 31, 36, 0.25);
}

.video-fenster video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--weiss);
}

/* ================================================================
   DESIGN-POLITUR (STUFE A)
   Nur Überschreibungen am Ende; zum Zurückdrehen diesen Block löschen.
   ================================================================ */

:root {
  --radius: 8px;
}

/* Schrift: IBM Plex (selbst gehostet, SIL Open Font License) mit
   Systemschriften als Rückfall */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas,
    monospace;
}

body {
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h2 {
  line-height: 1.18;
}

/* Hero: größere Überschrift, keine einzelne Farbbetonung, größeres Programmfenster */
.hero {
  padding: 64px 0 52px;
}

.hero .container {
  max-width: 1280px;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 40px;
}

.hero h1 {
  font-size: clamp(34px, 4.3vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.hero h1 span {
  color: inherit;
}

.hero p.lead {
  font-size: 19px;
  line-height: 1.5;
}

/* Vertrauenszeile: statt Haken die Quadrate aus dem Logo */
.vertrauens-leiste span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--blau);
}

/* Beschriftungen in Großbuchstaben über den Überschriften entfallen */
.eyebrow {
  display: none;
}

/* Rhythmus: etwas dichter, Überschriften näher am Inhalt */
section {
  padding: 56px 0;
}

.section-kopf {
  margin-bottom: 34px;
}

.section-kopf h2 {
  font-size: clamp(26px, 3vw, 34px);
}

/* Funktionen: vier Spalten, kompaktere Karten */
#funktionen .container {
  max-width: 1240px;
}

#funktionen .feature-card {
  padding: 20px;
}

#funktionen .feature-card .icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 19px;
  margin-bottom: 12px;
}

#funktionen .feature-card h3 {
  font-size: 16.5px;
  line-height: 1.25;
}

#funktionen .feature-card p {
  font-size: 14.5px;
  line-height: 1.5;
}

@media (min-width: 1101px) {
  #funktionen .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Kopfzeile: leicht durchscheinend */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
}

/* Bedienbarkeit: sichtbarer Tastaturfokus, ruhige Bewegung */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(76, 110, 151, 0.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 880px) {
  section {
    padding: 44px 0;
  }

  .hero .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .hero h1 {
    font-size: 32px;
  }

  .hero-cta .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Zahlen und technische Angaben in der Festbreitenschrift */
.schritt .nr,
.galerie-nr,
code,
kbd,
pre {
  font-family: var(--schrift-mono);
}

/* Formularfelder und Knöpfe übernehmen die Seitenschrift */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Karten dürfen schmaler als ihr längstes Wort werden (kein seitliches Scrollen auf dem Handy) */
.feature-card {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ================================================================
   STUFE B: Hero-Animation und Zeitleiste
   Zum Zurückdrehen diesen Block löschen (und in index.php die
   gesicherte Fassung einspielen).
   ================================================================ */

.hero-videolink {
  align-self: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--blau-dunkel);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(55, 82, 115, 0.35);
}

.hero-videolink:hover {
  text-decoration-color: currentColor;
}

/* Rechnung -> Daten */
.hero-demo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  column-gap: 38px;
  align-items: stretch;
  padding: 6px 0;
  --marker: rgba(196, 120, 59, 0.2);
  --marker-kante: #c4783b;
}

.rechnung-papier {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 22px 22px 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2a2f36;
  box-shadow: 0 30px 50px -30px rgba(28, 31, 36, 0.45), 0 4px 10px -6px rgba(28, 31, 36, 0.2);
  transform: rotate(-1.2deg);
}

.rp-kopf {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text-hell);
}

.rp-kopf strong {
  font-size: 15px;
  color: var(--text);
}

.rp-titel {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 15px;
  margin: 6px 0 10px;
}

.rp-zeile,
.rp-positionen div,
.rp-summen div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.rp-zeile {
  padding: 2px 0;
}

.rp-positionen {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  font-size: 12.5px;
  color: var(--text-hell);
}

.rp-summen div {
  padding: 1px 0;
}

.rp-gesamt {
  font-weight: 700;
  margin-top: 3px;
  padding-top: 4px !important;
  border-top: 1px solid var(--text);
}

.rp-feld {
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 -3px;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.rp-feld.an {
  background: var(--marker);
  box-shadow: 0 0 0 1.5px var(--marker-kante);
}

/* Pfeil zwischen Rechnung und Daten */
.hero-demo::after {
  content: "→";
  position: absolute;
  left: 52%;
  top: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rand);
  color: var(--blau-dunkel);
  font-size: 18px;
  box-shadow: 0 6px 14px -6px rgba(28, 31, 36, 0.35);
}

.daten-karte {
  position: relative;
  z-index: 2;
  align-self: center;
  background: #1f2f46;
  color: #e8edf4;
  border-radius: 10px;
  padding: 18px 20px 14px;
  box-shadow: 0 30px 55px -28px rgba(10, 20, 36, 0.7);
}

.dk-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}

.dk-format {
  font-family: var(--schrift-mono);
  font-weight: 400;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 244, 0.28);
  color: #b9c6d8;
  opacity: 0.35;
  transition: opacity 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.hero-demo.fertig .dk-format {
  opacity: 1;
  color: #fff;
  border-color: #c4783b;
}

.dk-liste {
  margin: 0;
}

.dk-liste > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0 7px 10px;
  border-left: 2px solid rgba(232, 237, 244, 0.14);
  opacity: 0.28;
  transition: opacity 0.4s ease, border-color 0.4s ease;
}

.dk-liste > div.an {
  opacity: 1;
  border-left-color: #c4783b;
}

.dk-liste dt {
  font-size: 12px;
  color: #aab8cc;
}

.dk-liste dd {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 13px;
  white-space: nowrap;
}

.dk-fuss {
  margin-top: 10px;
  font-size: 11.5px;
  color: #8fa0b8;
}

@media (max-width: 880px) {
  .hero-demo {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 460px;
    margin: 0 auto;
  }

  .hero-demo::after {
    left: 50%;
    top: auto;
    bottom: auto;
    display: none;
  }

  .rechnung-papier {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-feld,
  .dk-format,
  .dk-liste > div {
    transition: none;
  }
}

/* Zeitleiste der Pflichttermine */
.zeitleiste {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.zeitleiste::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 11px;
  height: 2px;
  background: linear-gradient(90deg, var(--blau) 0 var(--zl-anteil, 25%), var(--rand) var(--zl-anteil, 25%) 100%);
}

.zeitleiste li {
  position: relative;
  padding: 30px 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14.5px;
  color: var(--text-hell);
}

.zeitleiste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--weiss);
  border: 2px solid var(--rand);
}

.zeitleiste li.zl-jetzt::before {
  background: var(--blau);
  border-color: var(--blau);
}

.zl-datum {
  font-family: var(--schrift-mono);
  font-size: 13px;
  color: var(--blau-dunkel);
}

.zeitleiste strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
}

.alt-bg .statuscheck-box {
  max-width: 760px;
}

@media (max-width: 880px) {
  .zeitleiste {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 30px;
  }

  .zeitleiste::before {
    left: 11px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--blau) 0 var(--zl-anteil, 18%), var(--rand) var(--zl-anteil, 18%) 100%);
  }

  .zeitleiste li {
    padding: 0 0 0 4px;
  }

  .zeitleiste li::before {
    left: -27px;
    top: 3px;
  }
}

/* ================================================================
   STUFE C: Funktionen in drei Gruppen
   Zum Zurückdrehen diesen Block löschen (und in index.php die
   gesicherte Fassung einspielen).
   ================================================================ */

.funktionsgruppen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.funktionsgruppe {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 26px 24px 12px;
}

.funktionsgruppe h3 {
  margin: 0 0 4px;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.funktionsgruppe h3::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--blau);
  flex: none;
}

.fg-einleitung {
  margin: 0 0 12px;
  color: var(--text-hell);
  font-size: 14.5px;
}

.funktionsliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.funktionsliste li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rand);
}

.fl-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(76, 110, 151, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.funktionsliste strong {
  display: block;
  font-size: 15.5px;
  line-height: 1.3;
  margin-bottom: 3px;
}

.funktionsliste p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-hell);
}

/* Mittlere Gruppe dunkel: hier steckt das Besondere (eigene XRechnung, Prüfung) */
.funktionsgruppe-dunkel {
  background: #1f2f46;
  border-color: #1f2f46;
  color: #e8edf4;
}

.funktionsgruppe-dunkel h3::before {
  background: #c4783b;
}

.funktionsgruppe-dunkel .fg-einleitung,
.funktionsgruppe-dunkel .funktionsliste p {
  color: #b4c2d6;
}

.funktionsgruppe-dunkel .funktionsliste li {
  border-top-color: rgba(232, 237, 244, 0.16);
}

.funktionsgruppe-dunkel .fl-icon {
  background: rgba(232, 237, 244, 0.12);
}

@media (max-width: 1000px) {
  .funktionsgruppen {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* ================================================================
   STUFE D: Unterseiten angleichen (nur Stylesheet, keine Textänderung)
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

/* Seitenkopf der Unterseiten: gleiches Band wie auf der Startseite,
   linksbündig, mit dem Logo-Quadrat */
.site-header ~ section:first-of-type:not(.hero) {
  background: linear-gradient(180deg, var(--grau-bg) 0%, var(--weiss) 100%);
  padding-top: 52px;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child {
  text-align: left;
  max-width: 820px;
  margin: 0 0 34px;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child h2 {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.026em;
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child h2::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--blau);
  flex: none;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child p {
  font-size: 18px;
  max-width: 62ch;
}

/* Preise: Einzellizenz als dunkle Karte, passend zu den Funktionsgruppen */
.preis-highlight-zeile {
  text-align: left;
  max-width: none;
  margin: -6px 0 24px;
}

.preis-grid {
  max-width: none;
  margin: 0;
  gap: 22px;
}

.preis-grid + .preis-hinweis {
  text-align: left !important;
  max-width: none;
  margin-top: 18px !important;
}

.preis-karte {
  border-radius: 12px;
}

.preis-karte.hervorgehoben {
  background: #1f2f46;
  border-color: #1f2f46;
  color: #e8edf4;
  box-shadow: 0 30px 55px -30px rgba(10, 20, 36, 0.75);
}

.preis-karte.hervorgehoben h3,
.preis-karte.hervorgehoben .preis {
  color: #fff;
}

.preis-karte.hervorgehoben .preis small,
.preis-karte.hervorgehoben .preis-hinweis {
  color: #b4c2d6;
}

.preis-karte.hervorgehoben .preis-hinweis strong {
  color: #fff;
}

.preis-karte.hervorgehoben li {
  border-top-color: rgba(232, 237, 244, 0.16);
}

.preis-karte.hervorgehoben li::before {
  color: #e9a470;
}

.preis-karte.hervorgehoben .abo-umschalter {
  background: rgba(232, 237, 244, 0.12);
}

.preis-karte.hervorgehoben .abo-umschalter-btn {
  color: #b4c2d6;
}

.preis-karte.hervorgehoben .abo-umschalter-btn.ist-aktiv {
  background: #fff;
  color: #1f2f46;
  box-shadow: none;
}

.preis-karte.hervorgehoben .btn-primary {
  background: #fff;
  border-color: #fff;
  color: #1f2f46;
}

.preis-karte.hervorgehoben .btn-primary:hover {
  background: #e8edf4;
  text-decoration: none;
}

/* Download: Kopf mit Knopf, darunter die Angaben als Tabelle */
.download-box {
  max-width: 820px;
  margin: 0;
  border-radius: 12px;
  text-align: left;
  padding: 32px 36px;
}

.download-box .btn-block {
  max-width: 420px;
  font-size: 17px;
  padding: 14px 24px;
}

.system-info {
  display: grid;
  grid-template-columns: 210px 1fr;
  column-gap: 24px;
  font-size: 14.5px;
}

.system-info dt,
.system-info dt:first-child {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--rand);
}

.system-info dd {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--rand);
  line-height: 1.55;
}

@media (max-width: 680px) {
  .system-info {
    grid-template-columns: 1fr;
  }

  .system-info dt {
    border-top: 1px solid var(--rand);
    padding-bottom: 2px;
  }

  .system-info dd {
    border-top: none;
    padding-top: 0;
  }

  .download-box {
    padding: 24px 20px;
  }
}

/* FAQ: breiter, offene Frage hervorgehoben */
.faq-liste {
  max-width: 820px;
  margin: 0;
}

.faq-item summary {
  font-size: 17px;
  padding: 20px 36px 20px 0;
}

.faq-item[open] {
  border-left: 3px solid var(--blau);
  padding-left: 18px;
  margin-left: -21px;
}

.faq-item[open] summary {
  color: var(--blau-dunkel);
}

.faq-item p {
  font-size: 15.5px;
  max-width: 68ch;
}

/* Tabellen (Vergleich, Pflichttermine): ruhiger Kopf, Zebra */
.vergleich-tabelle th {
  background: #1f2f46;
  color: #fff;
}

.vergleich-tabelle tbody tr:nth-child(even) td {
  background: #f7f8fa;
}

/* Formulare */
.formular input,
.formular textarea,
.formular select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border-radius: 8px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(76, 110, 151, 0.4);
  outline-offset: 1px;
}

/* Lange Fließtext-Seiten: angenehme Zeilenlänge */
.container > p,
.container > ul,
.container > ol {
  max-width: 78ch;
}

/* Tabellen füllen die Breite des Inhaltsbereichs und stehen bündig mit der Überschrift */
.vergleich-tabelle {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Fußnoten unter den Inhalten der Unterseiten: linksbündig wie die Überschrift */
.site-header ~ section:first-of-type:not(.hero) .galerie-bildunterschrift {
  text-align: left;
  max-width: none;
  margin-left: 0;
}

/* ================================================================
   STUFE E: Bündigkeit auf den Unterseiten
   Alles beginnt an derselben linken Kante wie die Überschrift.
   Die Startseite (mit .hero) bleibt zentriert, wie gestaltet.
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

.formular {
  margin-left: 0;
  margin-right: auto;
}

.kontakt-alt {
  text-align: left;
}

.rechtstext {
  margin-left: 0;
  margin-right: auto;
}

/* Hinweiskästen mit eingebautem "margin: 0 auto" */
.container > .platzhalter,
.container > .hinweis-box {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Weitere Abschnittsköpfe der Unterseiten ebenfalls linksbündig */
body:not(:has(.hero)) .section-kopf {
  text-align: left;
  max-width: 820px;
  margin-left: 0;
  margin-right: 0;
}

body:not(:has(.hero)) .section-kopf p {
  max-width: 62ch;
}

body:not(:has(.hero)) .galerie-bildunterschrift {
  text-align: left;
  max-width: none;
  margin-left: 0;
}

/* Elemente mit eingebautem "zentriert" (Inline-Stil) auf den Unterseiten ebenfalls bündig */
body:not(:has(.hero)) section:not(.cta-streifen) .container > [style*="text-align:center"],
body:not(:has(.hero)) section:not(.cta-streifen) .container > p.kontakt-alt[style] {
  text-align: left !important;
}

body:not(:has(.hero)) .feature-grid[style*="margin:0 auto"] {
  margin-left: 0 !important;
}

/* ================================================================
   STUFE F: Funktionen, Schritte und Transparenz – weniger Text,
   mehr Struktur. Zum Zurückdrehen diesen Block löschen (und in
   index.php die gesicherte Fassung einspielen).
   ================================================================ */

/* Kennzahlen-Band */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 40px;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}

.fakt {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fakt + .fakt {
  border-left: 1px solid var(--rand);
}

.fakt-zahl {
  font-family: var(--schrift-mono);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--blau-dunkel);
}

.fakt-text {
  font-size: 14.5px;
  color: var(--text-hell);
  max-width: 24ch;
}

@media (max-width: 880px) {
  .fakten {
    grid-template-columns: 1fr 1fr;
  }

  .fakt:nth-child(3) {
    border-left: none;
  }

  .fakt:nth-child(n + 3) {
    border-top: 1px solid var(--rand);
  }
}

/* Funktionsgruppen: ohne Kacheln, nur Spalten mit Kopflinie */
.funktionsgruppe {
  background: none;
  border: none;
  border-top: 3px solid var(--blau);
  border-radius: 0;
  padding: 18px 0 0;
}

.funktionsgruppe-dunkel {
  background: #1f2f46;
  border: none;
  border-top: 3px solid #c4783b;
  border-radius: 0 0 12px 12px;
  padding: 18px 22px 8px;
}

.funktionsgruppe h3::before {
  display: none;
}

.funktionsliste li {
  display: block;
  padding: 0;
  border-top: 1px solid var(--rand);
}

.funktionsgruppe-dunkel .funktionsliste li {
  border-top-color: rgba(232, 237, 244, 0.16);
}

details.fl summary,
details.tp summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
}

details.fl summary::-webkit-details-marker,
details.tp summary::-webkit-details-marker {
  display: none;
}

.fl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fl-text strong {
  font-size: 15.5px;
  line-height: 1.3;
}

.fl-kurz {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-hell);
}

.funktionsgruppe-dunkel .fl-kurz {
  color: #b4c2d6;
}

.fl-plus {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 6px;
}

.fl-plus::before,
.fl-plus::after {
  content: "";
  position: absolute;
  background: var(--blau);
  border-radius: 1px;
  transition: transform 0.2s ease;
}

.fl-plus::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
}

.fl-plus::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.funktionsgruppe-dunkel .fl-plus::before,
.funktionsgruppe-dunkel .fl-plus::after {
  background: #e9a470;
}

details[open] > summary .fl-plus::after {
  transform: scaleY(0);
}

.fl-lang {
  margin: 0 0 14px 46px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-hell);
}

.funktionsgruppe-dunkel .fl-lang {
  color: #c9d4e3;
}

details.fl summary:hover .fl-text strong {
  color: var(--blau);
}

.funktionsgruppe-dunkel details.fl summary:hover .fl-text strong {
  color: #fff;
}

/* Schritte: durchlaufende Linie, Nummern leuchten nacheinander auf */
.schritte {
  position: relative;
  gap: 28px;
}

.schritte::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 26px;
  height: 2px;
  background: var(--rand);
}

.schritte::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 26px;
  height: 2px;
  width: 0;
  background: var(--blau);
  transition: width 2.4s ease;
}

.schritte.laeuft::after {
  width: calc(100% - 36px);
}

.schritte:not(.wartet):not(.laeuft)::after {
  width: calc(100% - 36px);
}

.schritt {
  padding-top: 8px;
}

.schritt .nr {
  position: relative;
  z-index: 1;
  background: var(--weiss);
  color: var(--blau-dunkel);
  border: 2px solid var(--rand);
  font-family: var(--schrift-mono);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.schritt.an .nr {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.schritte.wartet .schritt .nr {
  background: var(--weiss);
}

@media (max-width: 880px) {
  .schritte::before,
  .schritte::after {
    display: none;
  }
}

/* Transparenz: drei ruhige Zeilen */
.transparenz-liste {
  max-width: 900px;
  border-top: 1px solid var(--rand);
}

details.tp {
  border-bottom: 1px solid var(--rand);
}

details.tp summary {
  padding: 18px 0;
}

details.tp .fl-text strong {
  font-size: 17px;
}

details.tp .fl-lang {
  font-size: 15px;
  max-width: 70ch;
  margin-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .schritte::after,
  .schritt .nr,
  .fl-plus::before,
  .fl-plus::after {
    transition: none;
  }
}

/* ================================================================
   STUFE G: Zentrierte Blöcke wirklich mittig (Banner am Seitenende)
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

.cta-streifen .container > h2,
.cta-streifen .container > p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ================================================================
   STUFE H: Angemeldete Seiten (Konto, Tickets, Admin) bündig
   Inline gesetzte Mittenausrichtungen werden auf die gemeinsame
   linke Kante gezogen. Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

body:not(:has(.hero)) .container[style*="max-width"] {
  max-width: var(--max-breite) !important;
}

body:not(:has(.hero)) .container [style*="margin:0 auto"] {
  margin-left: 0 !important;
}

/* ================================================================
   STUFE I: Ticket-Nachrichten heben sich vom Seitenkopf-Band ab
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

body:not(:has(.hero)) .container div[style*="border-radius:8px"][style*="background:#f7f7f8"],
body:not(:has(.hero)) .container div[style*="border-radius:8px"][style*="background:#eef2f7"] {
  background: #fff !important;
  border: 1px solid var(--rand);
}

body:not(:has(.hero)) .container div[style*="border-radius:8px"][style*="background:#eef2f7"] {
  border-left: 3px solid var(--blau);
}

/* ================================================================
   STUFE J: Hauptüberschriften der Unterseiten sind jetzt <h1>
   (Suchmaschinen erwarten genau eine; Optik wie bisher als h2).
   Zum Zurückdrehen diesen Block löschen und in den Seiten wieder
   <h2> verwenden.
   ================================================================ */

.section-kopf h1 {
  font-size: 30px;
  margin: 0 0 12px;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.026em;
  display: flex;
  align-items: center;
  gap: 14px;
  text-wrap: balance;
}

.site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child h1::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--blau);
  flex: none;
}

@media (max-width: 680px) {
  .site-header ~ section:first-of-type:not(.hero) > .container > .section-kopf:first-child h1 {
    font-size: 28px;
  }
}

/* ================================================================
   STUFE K: Tabellen auf dem Handy als Karten
   Unter 640 px steht jede Zeile als kleine Karte: oben das Kriterium,
   darunter die Werte mit ihrem Spaltennamen (data-label).
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

@media (max-width: 640px) {
  .vergleich-tabelle,
  .vergleich-tabelle tbody,
  .vergleich-tabelle tr,
  .vergleich-tabelle td {
    display: block;
    width: 100%;
  }

  .vergleich-tabelle {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .vergleich-tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .vergleich-tabelle tbody tr {
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 4px 16px 10px;
    margin-bottom: 12px;
  }

  .vergleich-tabelle td,
  .vergleich-tabelle tbody tr:nth-child(even) td {
    background: transparent;
    border: 0;
    padding: 6px 0 0;
  }

  .vergleich-tabelle td:first-child {
    width: 100%;
    font-size: 16px;
    padding: 12px 0 6px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 4px;
  }

  .vergleich-tabelle td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-hell);
    margin-bottom: 1px;
  }
}

/* ================================================================
   STUFE K2: Hamburger-Menü schon bis 800 px
   Die ausgeschriebene Navigation braucht etwa 745 px; zwischen 680
   und 745 px lief die Kopfzeile über und die Seite wackelte seitlich.
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

@media (max-width: 800px) {
  .nav-toggle {
    display: block;
  }

  .hauptnav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--rand);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 16px;
    display: none;
  }

  .hauptnav.offen {
    display: flex;
  }
}

/* ================================================================
   STUFE K3: Hero-Demo bis 1000 px untereinander
   Zwischen 880 und 990 px war die rechte Spalte schmaler als die
   nebeneinanderstehende Demo; die Seite wackelte um bis zu 20 px.
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

.hero-demo {
  min-width: 0;
}

@media (min-width: 881px) and (max-width: 1000px) {
  .hero-demo {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 460px;
    margin: 0 auto;
  }

  .hero-demo::after {
    display: none;
  }

  .rechnung-papier {
    transform: none;
  }
}

/* ================================================================
   STUFE K4: Überschrift der Rechtstexte auf sehr schmalen Handys
   "Allgemeine Geschäftsbedingungen" war bei 320 px breiter als die
   Spalte. Ab 417 px Breite bleibt es bei 30 px wie bisher.
   Zum Zurückdrehen diesen Block löschen.
   ================================================================ */

.rechtstext h1 {
  font-size: clamp(21px, 7.2vw, 30px);
  overflow-wrap: break-word;
}


/* ================================================================
   STUFE L: Handwerk-Bühne und Einblend-Animationen (Startseite)
   Zum Zurückdrehen diesen Block löschen (und die Sektion "handwerk"
   in index.php sowie den Block "STUFE L" in main.js).
   ================================================================ */

.handwerk {
  background: var(--grau-bg);
}

.hw-buehne {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.hw-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hw-gew {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.hw-gew:hover {
  transform: translateX(6px);
  border-color: #c9d6e6;
}

.hw-gew:focus-visible {
  outline: 3px solid #9db8d8;
  outline-offset: 2px;
}

.hw-gsym {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e9eff6;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: none;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s;
}

.hw-gtext b {
  display: block;
  font-size: 18px;
  letter-spacing: -.005em;
  color: var(--text);
}

.hw-gtext small {
  color: var(--text-hell);
  font-size: 14px;
}

.hw-gew.aktiv {
  background: #1f2f46;
  border-color: #1f2f46;
  transform: translateX(12px);
  box-shadow: 0 16px 34px rgba(31, 47, 70, .28);
}

.hw-gew.aktiv b {
  color: #fff;
}

.hw-gew.aktiv small {
  color: #b7c6da;
}

.hw-gew.aktiv .hw-gsym {
  background: rgba(255, 255, 255, .14);
  transform: scale(1.12) rotate(-6deg);
}

.hw-fuell {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
}

.hw-gew.aktiv .hw-fuell {
  width: 100%;
  transition: width 5s linear;
}

.hw-beleg {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 30px 60px rgba(31, 47, 70, .12);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hw-beleg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blau), var(--orange));
}

.hw-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.hw-label {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

.hw-name {
  font-size: 24px;
  letter-spacing: -.01em;
}

.hw-chip {
  background: #efe9fb;
  color: #5b4aa0;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
  animation: hw-einblenden .5s ease both;
}

.hw-chip[hidden] {
  display: none;
}

.hw-tabelle {
  flex: 1;
}

.hw-th,
.hw-zeile {
  display: grid;
  grid-template-columns: 1fr 90px 110px 110px;
  gap: 10px;
  align-items: center;
}

.hw-th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-hell);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rand);
}

.hw-th span:nth-child(n+2),
.hw-zeile span:nth-child(n+2) {
  text-align: right;
}

.hw-zeile {
  padding: 13px 0;
  border-bottom: 1px dashed var(--rand);
  opacity: 0;
  transform: translateY(14px);
  animation: hw-hinein .55s cubic-bezier(.2, .8, .3, 1) forwards;
}

.hw-zeile .hw-pos {
  font-weight: 600;
}

.hw-zeile .hw-pos small {
  display: block;
  font-weight: 400;
  color: var(--text-hell);
  font-size: 13px;
}

.hw-summen {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: end;
  gap: 6px 34px;
  margin-top: 16px;
  text-align: right;
}

.hw-summen span {
  display: block;
  font-size: 13px;
  color: var(--text-hell);
}

.hw-summen b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.hw-summen .hw-gesamt b {
  font-size: 26px;
  color: var(--blau-dunkel);
}

.hw-fuss {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rand);
  font-size: 14px;
  color: var(--text-hell);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hw-haken {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--erfolg);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
  animation: hw-pop .6s .9s cubic-bezier(.3, 1.8, .5, 1) both;
}

@keyframes hw-hinein {
  to { opacity: 1; transform: none; }
}

@keyframes hw-einblenden {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}

@keyframes hw-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.hw-beleg.wechsel {
  animation: hw-wechsel .4s ease;
}

@keyframes hw-wechsel {
  from { opacity: 0; transform: translateX(26px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.hw-hinweis {
  text-align: center;
  color: var(--text-hell);
  font-size: 14px;
  margin: 26px auto 0;
  max-width: 640px;
}

/* Einblenden beim Scrollen (nur Startseite, per JS) */
.ein-start {
  opacity: 0;
  transform: translateY(28px);
}

.ein-start.ein-links { transform: translateX(-48px); }
.ein-start.ein-rechts { transform: translateX(48px); }
.ein-start.ein-gross { transform: translateY(22px) scale(.95); }

.ein-lauf {
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--ein-d, 0s);
}

.ein-start.ein-da {
  opacity: 1;
  transform: none;
}

.site-header {
  transition: box-shadow .3s;
}

.site-header.schatten {
  box-shadow: 0 8px 24px rgba(31, 47, 70, .1);
}

@media (max-width: 1000px) {
  .hw-buehne {
    grid-template-columns: 1fr;
  }

  .hw-liste {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .hw-gew {
    flex: none;
  }

  .hw-gew.aktiv,
  .hw-gew:hover {
    transform: none;
  }
}

@media (max-width: 680px) {
  .hw-beleg {
    padding: 20px 16px;
  }

  .hw-th,
  .hw-zeile {
    grid-template-columns: 1fr 58px 78px 86px;
    gap: 6px;
    font-size: 14px;
  }

  .hw-name {
    font-size: 20px;
  }

  .hw-summen {
    gap: 6px 16px;
  }

  .hw-summen .hw-gesamt b {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ein-start,
  .ein-start.ein-links,
  .ein-start.ein-rechts,
  .ein-start.ein-gross {
    opacity: 1;
    transform: none;
  }

  .ein-lauf,
  .hw-gew,
  .hw-gsym {
    transition: none;
  }

  .hw-zeile,
  .hw-chip,
  .hw-haken,
  .hw-beleg.wechsel {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hw-gew.aktiv .hw-fuell {
    transition: none;
  }
}


/* ================================================================
   STUFE M: neue Kopfzeile mit Aufklappmenü, neuer Einstieg, Kennzahlen,
   Eingang/Ausgang-Zeilen (Startseite) und dunkler Schlussaufruf.
   Zum Zurückdrehen diesen Block löschen und die Sicherungen von
   header.php / index.php zurückspielen.
   ================================================================ */

.kopfband {
  background: var(--orange);
  color: #fff;
  font-size: 14px;
}

.kopfband .container {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
}

.kopfband a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}

.kopfband a:hover {
  text-decoration: none;
  border-bottom-color: #fff;
}

.hauptnav {
  gap: 6px;
}

.hauptnav > a:not(.btn),
.nav-punkt > a.nav-haupt {
  padding: 8px 12px;
  border-radius: 8px;
  transition: background .2s, color .2s;
}

.hauptnav > a.btn {
  margin-left: 10px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}

.hauptnav > a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31, 47, 70, .22);
}

.nav-punkt {
  position: relative;
  display: flex;
  align-items: center;
  height: 72px;
}

.nav-punkt > a.nav-haupt::after {
  content: "▾";
  font-size: 11px;
  margin-left: 6px;
  color: var(--text-hell);
}

.nav-punkt:hover > a.nav-haupt,
.nav-punkt:focus-within > a.nav-haupt {
  background: var(--grau-bg);
  color: var(--blau);
}

.nav-menue {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(31, 47, 70, .14);
  padding: 10px;
  z-index: 200;
}

.nav-punkt:hover .nav-menue,
.nav-punkt:focus-within .nav-menue {
  display: block;
  animation: nav-auf .18s ease both;
}

@keyframes nav-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nav-menue a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
}

.nav-menue a:hover {
  background: var(--grau-bg);
  text-decoration: none;
}

.nav-menue b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.nav-menue small {
  color: var(--text-hell);
  font-size: 13px;
}

/* Einstieg */
.btn-hell {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.btn-hell:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.hero.hero2 {
  background: linear-gradient(135deg, #1f2f46 0%, #2c4466 100%);
  color: #fff;
  overflow: hidden;
  padding: 72px 0;
}

.hero.hero2 .container {
  max-width: 1240px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 36px;
  align-items: center;
}

.hero.hero2 h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  color: #fff;
}

.hero.hero2 h1 span {
  color: #f0b27a;
}

.hero.hero2 p.lead {
  font-size: 19px;
  color: #d5deea;
  max-width: 520px;
  margin: 0 0 30px;
}

.hero.hero2 .hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero2-klein {
  margin: 22px 0 0;
  font-size: 14px;
  color: #a9b8cc;
}

.hero2-fenster {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  animation: hero2-ein 1.1s .35s cubic-bezier(.2, .7, .2, 1) both, hero2-schweben 7s 1.5s ease-in-out infinite;
  min-width: 0;
}

.hero2-leiste {
  height: 30px;
  background: #eef0f3;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}

.hero2-leiste i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9ced6;
  display: block;
}

.hero2-fenster img {
  display: block;
  width: 100%;
  border-radius: 0 0 12px 12px;
}

@keyframes hero2-ein {
  from { opacity: 0; transform: perspective(1400px) rotateY(-22deg) rotateX(6deg) translateX(80px) scale(.92); }
  to { opacity: 1; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
}

@keyframes hero2-schweben {
  0%, 100% { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-12px); }
}

/* Erkennungs-Animation im dunklen Einstieg: die dunkle Datenkarte bekommt einen hellen Rand */
.hero2-demo {
  min-width: 0;
}

.hero2-demo .hero-demo .daten-karte {
  border: 1px solid rgba(255, 255, 255, .22);
}

/* Kennzahlen */
.zahlen2 {
  border-bottom: 1px solid var(--rand);
}

.zahlen2 .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}

.zahlen2 b {
  display: block;
  font-size: 28px;
  color: var(--blau-dunkel);
  transition: color .3s;
}

.zahlen2 span {
  color: var(--text-hell);
  font-size: 14px;
}

.zahlen2 .container > div:hover b {
  color: var(--orange);
}

/* Eingang/Ausgang */
.zeilen2 {
  padding: 70px 0 30px;
}

.zeile2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin: 0 auto 64px;
  max-width: 1120px;
}

.zeile2.um .zeile2-text {
  order: 2;
}

.zeile2-text h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 6px 0 14px;
}

.kicker2 {
  margin: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zeile2-lead {
  color: var(--text-hell);
  font-size: 18px;
  margin: 0;
}

.haken-liste {
  list-style: none;
  padding: 0;
  margin: 18px 0 26px;
}

.haken-liste li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 11px;
}

.haken-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--erfolg);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
}

.zeile2-bild {
  min-width: 0;
}

.bild2 {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(31, 47, 70, .1);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
}

.bild2:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 28px 56px rgba(31, 47, 70, .18);
}

.bild2 img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

/* Schlussaufruf dunkel mit sanftem Verlauf */
.cta-streifen {
  background: linear-gradient(120deg, #1f2f46, #2c4466, #1f2f46);
  background-size: 220% 220%;
  animation: m-verlauf 14s ease-in-out infinite;
  color: #fff;
}

.cta-streifen h2 {
  color: #fff;
}

.cta-streifen p {
  color: #c5d0e0;
}

.cta-streifen .btn {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  animation: m-puls 2.6s 1.2s ease-in-out infinite;
}

.cta-streifen .btn:hover {
  background: #a8632c;
}

@keyframes m-verlauf {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes m-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 120, 59, .55); }
  60% { box-shadow: 0 0 0 16px rgba(196, 120, 59, 0); }
}

@media (max-width: 1000px) {
  .hero.hero2 .container,
  .zeile2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .zeile2.um .zeile2-text {
    order: 0;
  }

  .hero2-fenster {
    animation: none;
  }

  .zahlen2 .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Handy-Menü: Untermenüs stehen als eingerückte Liste unter dem Punkt */
@media (max-width: 800px) {
  .hauptnav {
    gap: 4px;
  }

  .nav-punkt {
    display: block;
    height: auto;
  }

  .nav-punkt > a.nav-haupt::after {
    display: none;
  }

  .nav-menue {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 4px 14px;
    animation: none;
  }

  .nav-menue a {
    padding: 6px 12px;
  }

  .nav-menue small {
    display: none;
  }

  .hauptnav > a.btn {
    margin: 10px 0 0;
    text-align: center;
  }

  .zeilen2 {
    padding-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero2-fenster,
  .cta-streifen,
  .cta-streifen .btn,
  .nav-punkt:hover .nav-menue {
    animation: none;
  }
}

/* Auf schmaleren Fenstern gleiten die Elemente nur von unten herein: seitliche
   Bewegung würde kurz einen waagerechten Rand erzeugen. */
@media (max-width: 1200px) {
  .ein-start.ein-links,
  .ein-start.ein-rechts {
    transform: translateY(28px);
  }
}


/* ================================================================
   STUFE N: eigene Linien-Symbole auf Farbverlauf-Kacheln statt Emojis
   (Handwerk-Bühne). Zum Zurückdrehen diesen Block löschen und die
   Sicherung von index.php zurückspielen.
   ================================================================ */

.hw-liste .hw-gew:nth-child(1) { --hw-a: #f7b733; --hw-b: #ee7a1d; }
.hw-liste .hw-gew:nth-child(2) { --hw-a: #5c86b8; --hw-b: #34557f; }
.hw-liste .hw-gew:nth-child(3) { --hw-a: #a58be0; --hw-b: #6a4fbf; }
.hw-liste .hw-gew:nth-child(4) { --hw-a: #3fb8ae; --hw-b: #1f8480; }
.hw-liste .hw-gew:nth-child(5) { --hw-a: #5cc37f; --hw-b: #2e8d56; }

.hw-gsym {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--hw-a), var(--hw-b));
  color: #fff;
  box-shadow: 0 8px 18px -6px var(--hw-b), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 0;
}

.hw-gsym svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

.hw-gsym svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.hw-gew.aktiv .hw-gsym {
  background: linear-gradient(145deg, var(--hw-a), var(--hw-b));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 10px 22px -6px var(--hw-a);
  transform: scale(1.1) rotate(-5deg);
}

.hw-gew.aktiv .hw-gsym svg path {
  animation: hw-zeichnen .9s cubic-bezier(.4, .1, .2, 1) both;
}

.hw-gew:not(.aktiv):hover .hw-gsym {
  transform: scale(1.06) rotate(-4deg);
}

@keyframes hw-zeichnen {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-gew.aktiv .hw-gsym svg path {
    animation: none;
  }
}


/* ================================================================
   STUFE O: Funktionen als Reiter mit Karten (Startseite)
   Drei Reiter (Erfassen / Erstellen & prüfen / Ordnen & absichern),
   darunter kompakte Karten mit eigenen Symbolen; der lange Text
   klappt erst beim Anklicken auf. Ohne JavaScript bleiben alle drei
   Gruppen sichtbar. Zum Zurückdrehen diesen Block löschen und die
   Sicherungen von index.php / main.js zurückspielen.
   ================================================================ */

.fg-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 30px;
}

.fg-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s, border-color .25s;
}

.fg-tab:hover {
  transform: translateY(-2px);
  border-color: #c9d6e6;
}

.fg-tab:focus-visible {
  outline: 3px solid #9db8d8;
  outline-offset: 2px;
}

.fg-tab-sym {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9eff6;
  color: var(--blau-dunkel);
  display: grid;
  place-items: center;
  transition: background .25s, color .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}

.fg-tab-sym svg {
  width: 22px;
  height: 22px;
}

.fg-tab-text b {
  display: block;
  font-size: 16px;
  color: var(--text);
}

.fg-tab-text small {
  color: var(--text-hell);
  font-size: 13px;
}

.fg-tab.aktiv {
  background: #1f2f46;
  border-color: #1f2f46;
  box-shadow: 0 14px 30px -10px rgba(31, 47, 70, .55);
}

.fg-tab.aktiv .fg-tab-text b {
  color: #fff;
}

.fg-tab.aktiv .fg-tab-text small {
  color: #b7c6da;
}

.fg-tab.aktiv .fg-tab-sym {
  background: linear-gradient(145deg, #e9a470, #c4783b);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}

#funktionen .funktionsgruppen {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
}

#funktionen .funktionsgruppe,
#funktionen .funktionsgruppe-dunkel {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: inherit;
}

#funktionen .funktionsgruppe h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#funktionen .fg-einleitung,
#funktionen .funktionsgruppe-dunkel .fg-einleitung {
  text-align: center;
  color: var(--text-hell);
  font-size: 16px;
  margin: 0 0 22px;
}

#funktionen .funktionsgruppen.fg-js .funktionsgruppe {
  display: none;
}

#funktionen .funktionsgruppen.fg-js .funktionsgruppe.aktiv {
  display: block;
}

#funktionen .funktionsgruppe:nth-child(1) { --fg-a: #6d97c9; --fg-b: #34557f; }
#funktionen .funktionsgruppe:nth-child(2) { --fg-a: #f2b36f; --fg-b: #cf7a30; }
#funktionen .funktionsgruppe:nth-child(3) { --fg-a: #4fc3b3; --fg-b: #1f8480; }

#funktionen .funktionsliste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

#funktionen .funktionsliste li,
#funktionen .funktionsgruppe-dunkel .funktionsliste li {
  position: relative;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#funktionen .funktionsliste li:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 16px 34px -12px rgba(31, 47, 70, .22);
}

#funktionen details.fl summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 18px;
  position: relative;
}

#funktionen .fl-icon,
#funktionen .funktionsgruppe-dunkel .fl-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--fg-a), var(--fg-b));
  color: #fff;
  box-shadow: 0 10px 20px -8px var(--fg-b), inset 0 1px 0 rgba(255, 255, 255, .35);
  display: grid;
  place-items: center;
  font-size: 0;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}

#funktionen .fl-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

#funktionen .fl-icon svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

#funktionen .funktionsliste li:hover .fl-icon {
  transform: rotate(-6deg) scale(1.08);
}

#funktionen .fl-text strong,
#funktionen .funktionsgruppe-dunkel .fl-text strong {
  font-size: 17px;
  line-height: 1.25;
  color: var(--text);
}

#funktionen .fl-kurz,
#funktionen .funktionsgruppe-dunkel .fl-kurz {
  font-size: 14.5px;
  color: var(--text-hell);
}

#funktionen .fl-plus {
  position: absolute;
  top: 22px;
  right: 20px;
  margin: 0;
}

#funktionen .fl-plus::before,
#funktionen .fl-plus::after,
#funktionen .funktionsgruppe-dunkel .fl-plus::before,
#funktionen .funktionsgruppe-dunkel .fl-plus::after {
  background: var(--fg-b);
}

#funktionen .fl-lang,
#funktionen .funktionsgruppe-dunkel .fl-lang {
  margin: 0;
  padding: 14px 20px 20px;
  border-top: 1px dashed var(--rand);
  color: var(--text-hell);
  font-size: 14.5px;
  animation: fg-auf .35s ease both;
}

@keyframes fg-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Karten laufen beim Umschalten nacheinander ein, die Symbole zeichnen sich */
#funktionen .funktionsgruppe.aktiv.fg-neu .funktionsliste li {
  animation: fg-karte .55s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

#funktionen .funktionsgruppe.aktiv.fg-neu .fl-icon svg path {
  animation: fg-zeichnen .9s cubic-bezier(.4, .1, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 150ms);
}

@keyframes fg-karte {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes fg-zeichnen {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1000px) {
  #funktionen .funktionsliste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #funktionen .funktionsliste {
    grid-template-columns: 1fr;
  }

  .fg-tabs {
    gap: 8px;
  }

  .fg-tab {
    padding: 10px 14px 10px 10px;
  }

  .fg-tab-text small {
    display: none;
  }

  #funktionen details.fl summary {
    flex-direction: row;
    align-items: center;
    padding: 16px;
  }

  #funktionen .fl-icon {
    flex: none;
    width: 46px;
    height: 46px;
  }

  #funktionen .fl-plus {
    top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #funktionen .funktionsgruppe.aktiv.fg-neu .funktionsliste li,
  #funktionen .funktionsgruppe.aktiv.fg-neu .fl-icon svg path,
  #funktionen .fl-lang {
    animation: none;
  }
}


/* ================================================================
   STUFE P: "Was Fakturyx prüft - und was nicht" als Karten mit Symbolen
   (gleicher Stil wie die Funktionskarten). Zum Zurückdrehen diesen
   Block löschen und die Sicherung von index.php zurückspielen.
   ================================================================ */

.transparenz-liste {
  max-width: 880px;
  margin: 0 auto;
  border-top: none;
  display: grid;
  gap: 14px;
}

.transparenz-liste details.tp {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.transparenz-liste details.tp:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 16px 34px -12px rgba(31, 47, 70, .22);
}

.transparenz-liste details.tp summary {
  padding: 18px 20px;
  grid-template-columns: 52px 1fr 18px;
  align-items: center;
  gap: 16px;
}

.transparenz-liste details.tp:nth-child(1) { --tp-a: #f2b36f; --tp-b: #cf7a30; }
.transparenz-liste details.tp:nth-child(2) { --tp-a: #6d97c9; --tp-b: #34557f; }
.transparenz-liste details.tp:nth-child(3) { --tp-a: #a58be0; --tp-b: #6a4fbf; }

.transparenz-liste details.tp .fl-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--tp-a), var(--tp-b));
  color: #fff;
  box-shadow: 0 10px 20px -8px var(--tp-b), inset 0 1px 0 rgba(255, 255, 255, .35);
  display: grid;
  place-items: center;
  font-size: 0;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}

.transparenz-liste details.tp .fl-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

.transparenz-liste details.tp .fl-icon svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.transparenz-liste details.tp:hover .fl-icon,
.transparenz-liste details.tp[open] .fl-icon {
  transform: rotate(-6deg) scale(1.08);
}

.transparenz-liste details.tp[open] .fl-icon svg path {
  animation: fg-zeichnen .9s cubic-bezier(.4, .1, .2, 1) both;
}

.transparenz-liste details.tp .fl-plus {
  margin-top: 0;
}

.transparenz-liste details.tp .fl-plus::before,
.transparenz-liste details.tp .fl-plus::after {
  background: var(--tp-b);
}

.transparenz-liste details.tp .fl-lang {
  margin: 0;
  padding: 14px 20px 20px 88px;
  border-top: 1px dashed var(--rand);
  animation: fg-auf .35s ease both;
}

@media (max-width: 640px) {
  .transparenz-liste details.tp summary {
    grid-template-columns: 44px 1fr 18px;
    gap: 12px;
    padding: 14px;
  }

  .transparenz-liste details.tp .fl-icon {
    width: 44px;
    height: 44px;
  }

  .transparenz-liste details.tp .fl-lang {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transparenz-liste details.tp[open] .fl-icon svg path,
  .transparenz-liste details.tp .fl-lang {
    animation: none;
  }
}