@charset "UTF-8";
:root {
  /* Grundwerte (Mail-Palette) */
  --brand-primary:       #173E67;   /* Navy, HSL 211/64/25 */
  --brand-primary-dark:  #0F2A47;   /* Navy-tief, HSL 211/65/17 */
  --brand-accent:        #D4A22E;   /* Gold, HSL 42/66/51; nie als Text auf hellem Grund */
  --text-primary:        #27364A;   /* Text, HSL 214/31/22 */
  --border:              #DCE5EE;   /* Linie und Unterzeile, HSL 210/35/90 */
  /* Abgeleitet aus --brand-primary: Sättigung -3, Helligkeit +10 wie im Bestand */
  --brand-primary-light: #22558C;   /* HSL 211/61/34 */
  /* Abgeleitet aus --brand-accent: Sättigung +4, Helligkeit +6 (hell) bzw. -4, -13 (dunkel) wie im Bestand */
  --brand-accent-light:  #DEB045;   /* HSL 42/70/57; nur auf Navy-Flächen */
  --brand-accent-dark:   #997624;   /* HSL 42/62/37; nur als große Schrift (ab 1,5 rem fett) oder Linie */
  --brand-accent-glow:   rgba(212, 162, 46, 0.45);   /* Gold mit Alpha 0,45 wie im Bestand */
  /* Abgeleitet aus --text-primary: Sättigung -1 bzw. -5 wie im Bestand; die Helligkeit
     ist so gesetzt, dass --text-muted auf --surface-2 mindestens 4,5:1 erreicht (der
     Bestand verfehlte dort 4,5) und der Abstand zwischen beiden (13 Punkte) bleibt */
  --text-secondary:      #394E6A;   /* HSL 214/30/32 */
  --text-muted:          #556F91;   /* HSL 214/26/45 */
  /* Flächen unverändert */
  --surface-0:           #FFFFFF;
  --surface-1:           #F7F9FC;
  --surface-2:           #EEF2F7;
  --max-width:           1120px;
  /* Semantische Token für Gold als Schrift (Tor 13) */
  --brand-accent-text:          #87671C;   /* HSL 42/66/32, mindestens 4,5:1 auf surface-0/1/2 */
  --brand-accent-on-dark:       var(--brand-accent);         /* nur auf brand-primary und brand-primary-dark */
  --brand-accent-light-on-dark: var(--brand-accent-light);   /* Hover-Variante, nur auf Navy-Flächen */
  /* RGB-Tripel für rgba(var(--…), Alpha) in Verläufen, Schatten und Rahmen */
  --brand-primary-rgb:      23, 62, 103;
  --brand-primary-dark-rgb: 15, 42, 71;
  --brand-accent-rgb:       212, 162, 46;
  --surface-0-rgb:          255, 255, 255;
  /* Statusfarben (Portal und Rechtsseiten), unverändert; --warning ist Fläche/Rahmen, keine Schrift */
  --error:               #C03030;
  --success:             #2F7A2F;
  --warning:             #B8894A;
}
:root {
  /* Radien der Marketing-Seiten, bewusst weicher als die Portal-Seiten */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       12px;
}
/* SF Tankstellen Analytics -- Landingpage
 *
 * Stand: 2026-04-25 (Session 43); Token-Quelle und Rahmen aus einer Quelle seit E2 (2026-09-06)
 * Quelle: aus website/index.html ausgelagerter Inline-Styleblock
 *         plus Utility-Klassen, die ehemalige inline style="..."-Attribute ersetzen.
 * Farben: ausschliesslich Token aus website-src/tokens.css (Mail-Palette, Bau setzt den
 *         Block an der Markerzeile @tokens ein); Rahmenregeln aus website-src/rahmen.css
 *         an der Markerzeile @rahmen.
 *   Fonts Source Serif Pro (Display) + Inter (Text), kein Grafik-Logo,
 *   Wortmarke "SF Tankstellen Analytics".
 * Ziel der Auslagerung: CSP-Header `style-src 'self'` ohne `'unsafe-inline'`. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--surface-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}

h1, h2, h3 { font-family: 'Source Serif Pro', Georgia, serif; color: var(--brand-primary); letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin-bottom: 0.5rem; }
p  { color: var(--text-secondary); font-size: 1rem; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* Rahmenblock (website-src/rahmen.css) erst NACH .container: .nav-inner ist selbst .container, und
   dessen padding: 0 1.5rem wuerde bei umgekehrter Reihenfolge den senkrechten Abstand der Kopfzeile
   (padding-top/-bottom 1rem) loeschen. Reihenfolge wie im Bestand (Nachbau 06.09.2026). */
/* Rahmenregeln aus einer Quelle (E2, 06.09.2026): Skip-Link, Navigation mit
   Burger, Rückruf-Knopf, Fußzeile und mobiler Kontakt-Balken. Der Bau setzt
   diesen Block an der Markerzeile "@rahmen" in landingpage.css ein und liefert
   ihn zusätzlich als assets/rahmen.css für die Rechtsseiten aus, die sfta.css
   laden. Ausschließlich Token aus tokens.css. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  transform: translateY(-200%);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--surface-0);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* NAVIGATION */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--surface-0-rgb), 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* Mobile-Fix 2026-05-08: padding shorthand vermieden, damit das horizontale
   Padding aus .container (0 1.5rem) erhalten bleibt. flex-direction, flex-wrap
   und gap stehen ausdrücklich, damit die Portal-Regeln aus sfta.css auf den
   Rechtsseiten nicht durchschlagen. */
.nav-inner { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
/* min-width: 0 lässt die Markenzeile im Flex-Layout umbrechen statt die Navigation zu verdrängen (E2). */
.wordmark-link { text-decoration: none; min-width: 0; }
.wordmark { font-family: 'Source Serif Pro', serif; font-weight: 700; font-size: 1.15rem; color: var(--brand-primary); letter-spacing: 0.01em; }
.wordmark-sub { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 0.1rem; }
/* Header-Siegel (Logo-Roll-out 2026-06-04) */
.wordmark-link, a.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-seal { height: 46px; width: 46px; flex: none; display: block; }
.wordmark-textwrap { display: flex; flex-direction: column; }
/* Abstand 1,5 rem statt 2 rem (E2): sechs Ziele plus Rückruf-Knopf plus Markenzeile brauchen den Platz.
   Unterzeile der Wortmarke ist die Kurzform FAKTEN.md marke_kopf (Sven, 06.09.2026); mit dem vollen Wortlaut
   brach sie dreizeilig um. Der Abstand der Ziele steht seit dem Kachel-Umbau (08.09.2026) weiter unten;
   die Burger-Schwelle liegt seitdem bei 1240 px statt 1100 px. */
.nav-links { display: flex; flex-wrap: nowrap; gap: 1.5rem; align-items: center; }
/* white-space: nowrap (E2, Fremdprüfung): sonst drückt der Flex-Algorithmus den Rückruf-Knopf statt der
   Markenzeile zusammen und der Knopf bricht auf dem Desktop zweizeilig um. */
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover { color: var(--brand-primary); }
.nav-links a[aria-current] { color: var(--brand-primary); font-weight: 600; }

/* NAVIGATIONSKACHELN (Sven, 08.09.2026)
   Aus den schlichten Textlinks werden eigenstaendige Flaechen. Gilt nur fuer
   Navigationen MIT Menueschalter (`.nav-toggle ~ .nav-links`); die
   Portalnavigation ohne Schalter bleibt unberuehrt. Labels, Ziele und
   aria-current sind unveraendert.

   Spezifitaet mit Absicht: `.nav` davor und `:not(.btn-cta)` heben die Regeln
   ueber die aelteren seitenbezogenen Navigations-Overrides der Softwareseite in
   landingpage.css, die im Blatt spaeter stehen. Der Rueckruf-Knopf bleibt die
   einzige hervorgehobene Aktion und wird hier nur im Abstand angefasst.

   Reihenfolge wie in der Interaktions-Karte: Normalzustand, Hover nur mit
   feinem Zeiger, Druck, Tastatur, reduzierte Bewegung. */

/* Die Kopfzeile darf breiter sein als der Textcontainer; --max-width bleibt
   global bei 1120 px. Gemessen mit der echten Inter-Datei: Markenzeile, die sechs
   Kacheln der Fachseiten und der Rueckruf-Knopf brauchen zusammen rund 1144 px,
   hier stehen 1192 px bereit.
   `:has(.nav-toggle)` begrenzt das auf Koepfe MIT Menueschalter; die
   Portalkopfzeile ohne Schalter behaelt ihre Bestandsgeometrie. */
.nav .nav-inner:has(.nav-toggle) {
  max-width: 1240px;
  column-gap: 1.25rem;
}

/* Der aeltere Seiten-Override der Softwareseite setzte hier einen eigenen
   Rand; den Abstand traegt jetzt die Kopfzeile fuer alle Seiten gleich. */
.nav .nav-inner:has(.nav-toggle) .wordmark-link { margin-right: 0; }

/* Oberhalb der Burger-Schwelle traegt der Schalter kein Menue mehr. Ohne diese
   Regel bliebe er ein unsichtbarer Tabstopp -- bisher nahm ihn nur der lokale
   Override der Softwareseite heraus. */
@media (min-width: 1240.02px) {
  .nav .nav-inner .nav-toggle { display: none; }
}

.nav .nav-toggle ~ .nav-links { gap: 10px; }

.nav .nav-toggle ~ .nav-links a:not(.btn-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease,
              transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Aktives Ziel: Navy-Flaeche, weisse Schrift (12,9:1), Gewicht 700 und eine
   goldene Unterkante als zusaetzliche Markierung. */
.nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta) {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--surface-0);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brand-accent);
}

/* Abstand zur hervorgehobenen Aktion, damit sie nicht als sechste Kachel liest. */
.nav .nav-toggle ~ .nav-links a.btn-cta { margin-left: 0.6rem; }

/* Ohne feinen Zeiger bleibt kein Zustand haengen: der geerbte Farbwechsel aus
   `.nav-links a:hover` wird fuer die Kacheln zurueckgenommen. */
.nav .nav-toggle ~ .nav-links a:not(.btn-cta):hover {
  background: var(--surface-2);
  border-color: var(--brand-primary);
  color: var(--text-primary);
}
.nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta):hover {
  background: var(--brand-primary);
  color: var(--surface-0);
}

@media (hover: hover) and (pointer: fine) {
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta):hover {
    background: rgba(var(--brand-primary-rgb), 0.10);
    border-color: var(--brand-primary-dark);
    color: var(--brand-primary);
  }
  .nav .nav-toggle ~ .nav-links a[aria-current]:not(.btn-cta):hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--surface-0);
  }
}

.nav .nav-toggle ~ .nav-links a:not(.btn-cta):active { transform: scale(0.97); }

.nav .nav-toggle ~ .nav-links a:not(.btn-cta):focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Keine Bewegung bei Tastaturbedienung. */
.nav .nav-toggle ~ .nav-links a:not(.btn-cta):focus-visible:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta) { transition: none; }
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta):active { transform: none; }
}
/* MOBILE-BURGER-NAV (P9, 2026-06-16) — CSS-only Checkbox-Hack (CSP erlaubt kein JS).
   Ersetzt das alte "Anker-Links ausblenden" (Stand 2026-05-02): statt die Links auf
   Mobile zu verstecken, oeffnet ein Burger ein Dropdown-Panel mit ALLEN Links.
   E2 (06.09.2026): Schwelle 1100 px statt 720 px, weil sechs Ziele plus Rückruf-Knopf
   allein rund 740 px brauchen und daneben zwischen 721 und 1100 px die Wortmarke
   mit Siegel (mindestens rund 270 px) keinen Platz mehr hat; unabhängig vom Wortlaut
   der Unterzeile (Kurzform, siehe oben).
   08.09.2026: Schwelle 1240 px. Als Kacheln brauchen die sechs Ziele mit Polster,
   Rand und Lücken rund 1165 px Inhaltsbreite (mit der echten Inter-Datei gemessen);
   zusammen mit dem Containerrand passt das erst ab 1240 px. Darunter übernimmt das
   Menü, damit nichts zusammengedrückt wird. */
.nav-toggle {              /* verstecktes Checkbox, bleibt fokussierbar (nicht display:none) */
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.nav-burger { display: none; }   /* Desktop: kein Burger */
/* Sichtbarer Fokusring am Burger (E3, Merker aus der E2-Diff-Prüfung P3-4): die Checkbox ist
   optisch versteckt, ihr Tastaturfokus muss deshalb am Burger-Symbol erscheinen (WCAG 2.4.7). */
.nav-toggle:focus-visible ~ .nav-burger {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 1240px) {
  /* Der Seiten-Override der Softwareseite nimmt den Schalter oberhalb von
     1100 px aus der Tastaturreihenfolge. Zwischen 1100 und 1240 px traegt er
     jetzt wieder das Menue und muss deshalb erreichbar bleiben. */
  .nav .nav-inner .nav-toggle { display: inline-block; }

  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px 10px;
    flex: none;                   /* Trefffläche bleibt 44 px, auch wenn die Wortmarke drückt (Nachprüfung 06.09.2026) */
    margin-right: -10px;          /* optisch buendig zum rechten Container-Rand */
    cursor: pointer; box-sizing: border-box;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--brand-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Burger -> X im offenen Zustand */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dropdown-Panel: geschlossen versteckt, ankert an der sticky .nav. Nur fuer Seiten mit
     Burger-Schalter (.nav-toggle ~): die Portal-Seiten ohne Schalter behalten ihre Kopf-Links
     bis 720 px wie im Bestand (Fremdprüfung E2). */
  .nav-toggle ~ .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px -16px rgba(var(--brand-primary-dark-rgb), 0.3);
    padding: 0.25rem 1.5rem 1rem;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle ~ .nav-links a {
    display: block; width: 100%;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    white-space: normal;
  }
  .nav-toggle ~ .nav-links a:first-of-type { border-top: none; }

  /* Kacheln im geoeffneten Menue: volle Breite, linksbuendig, klar getrennt.
     Die Trennlinien des Bestands entfallen, den Abstand traegt die Luecke. */
  .nav .nav-toggle ~ .nav-links a:not(.btn-cta) {
    width: 100%;
    justify-content: flex-start;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    white-space: normal;
  }
  /* Den Abstand der Kacheln traegt allein die Luecke des Rasters. Der aeltere
     Seiten-Override der Softwareseite legte 9 px Rand obendrauf; das ergab dort
     19 statt 10 px. Der Rueckruf-Knopf behaelt seinen eigenen groesseren
     Abstand. */
  .nav .nav-toggle ~ .nav-links a + a:not(.btn-cta) { margin-top: 0; }
  .nav .nav-toggle ~ .nav-links a.btn-cta {
    margin-left: 0;
    margin-top: 0.85rem;
    /* Das Menue setzt alle Verweise auf display:block; damit greift die
       Zentrierung des Knopfes nicht und die Beschriftung klebt links. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  /* Kurze Fensterhoehen: das Menue bleibt erreichbar, statt unten abzuschneiden. */
  .nav .nav-toggle ~ .nav-links {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* CTA-Buttons im Menue voll sichtbar + zentriert (egal ob btn-cta oder btn-primary) */
  .nav-toggle ~ .nav-links a.btn-cta,
  .nav-toggle ~ .nav-links a.btn-primary {
    margin-top: 0.85rem;
    justify-content: center;
    border-top: none;
  }
}
/* Seiten ohne Burger-Schalter (Portal): Kopf-Links unter 720 px ausblenden wie im Bestand;
   Datenschutz, AVV und Impressum bleiben im Fuß erreichbar. */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
}

/* CTA-Button (Nav oben rechts): BLAUER Hintergrund, GOLDGELBE Schrift.
   Sven-Wunsch 2026-05-04: Markenblau als Hintergrund mit Akzent-Gold im Text.
   Hinweis: Selector als a.btn-cta, damit die Spezifitaet ueber .nav-links a liegt. */
a.btn-cta,
.btn-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--brand-accent);
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(var(--brand-primary-rgb), 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
a.btn-cta::after,
.btn-cta::after {
  content: "\2192";
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-accent-on-dark);
  transition: transform 0.18s ease;
}
a.btn-cta:hover,
.btn-cta:hover {
  transform: translateY(-1px);
  background: var(--brand-primary-dark);
  color: var(--brand-accent-light-on-dark);
  box-shadow: 0 8px 22px -6px rgba(var(--brand-primary-rgb), 0.45);
}
a.btn-cta:hover::after,
.btn-cta:hover::after { transform: translateX(3px); color: var(--brand-accent-light-on-dark); }
a.btn-cta:active,
.btn-cta:active { transform: translateY(0); }

/* FOOTER */
footer { background: var(--brand-primary-dark); color: rgba(var(--surface-0-rgb), 0.85); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media(max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: 'Source Serif Pro', serif; font-weight: 700; font-size: 1.15rem; color: var(--surface-0); margin-bottom: 0.8rem; }
.footer-desc { font-size: 0.92rem; line-height: 1.7; color: rgba(var(--surface-0-rgb), 0.7); max-width: 380px; }
.footer-heading { font-size: 0.78rem; font-weight: 600; color: rgba(var(--surface-0-rgb), 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
/* Die Listenfarbe steht ausdrücklich, weil sfta.css auf den Rechtsseiten ul/ol in --text-secondary
   färbt; ohne diese Zeile wären Adresszeilen im Fuß dort unlesbar (Lighthouse-Befund E2). */
.footer-links { list-style: none; padding: 0; margin: 0; color: rgba(var(--surface-0-rgb), 0.8); font-size: 0.92rem; }
.footer-links li { padding: 0.3rem 0; }
.footer-links a { color: rgba(var(--surface-0-rgb), 0.8); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--surface-0); text-decoration: underline; }
.footer-bar { padding-top: 2rem; border-top: 1px solid rgba(var(--surface-0-rgb), 0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(var(--surface-0-rgb), 0.6); }
/* Impressum/Datenschutz/AGB/AVV-Linkleiste in der unteren Footer-Bar; flex-wrap: wrap ist neu (E2), damit vier
   Verweise auf schmalen Breiten umbrechen statt zu überlaufen. */
.footer-meta-links { display: inline-flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-meta-links a {
  color: rgba(var(--surface-0-rgb), 0.7);
  text-decoration: none;
}
.footer-meta-links a:hover { color: var(--surface-0); text-decoration: underline; }

@media (max-width: 720px) {
  .footer-links a,
  .footer-meta-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
  }
}

/* MOBILER KONTAKT-BALKEN (E2): unter 768 px fest am unteren Rand; der Fuß
   bekommt darunter zusätzlichen Abstand, damit der Balken nichts verdeckt. */
.kontakt-mobil { display: none; }
@media (max-width: 767.98px) {
  .kontakt-mobil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 0.6rem;
    padding: 0.55rem 1rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--surface-0-rgb), 0.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -16px rgba(var(--brand-primary-dark-rgb), 0.35);
  }
  .kontakt-mobil a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  /* Der kurze E-Mail-Weg nimmt nur seine Breite, der Hauptknopf den Rest
     (Fremdprüfung E2: sonst bricht die längere Beschriftung bei 360 bis 393 px
     zweizeilig um). Seit 09.09.2026 führt der erste Weg zur E-Mail; öffentliche
     Telefonoptionen gibt es nicht mehr. */
  .kontakt-mobil a.kontakt-mobil__mail {
    flex: 0 1 auto;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    background: var(--surface-0);
  }
  .kontakt-mobil a.btn-cta { flex: 1 1 auto; margin: 0; }
  footer { padding-bottom: calc(2rem + 4.25rem + env(safe-area-inset-bottom, 0px)); }
  /* Fokus nicht verdeckt (WCAG 2.2, 2.4.11): Scroll-Reserve in Höhe des Balkens. */
  html { scroll-padding-bottom: 6rem; }
}

/* =================================================================
   LESEFADEN UND AKTIVE THEMENKACHEL (Sven, 09.09.2026)
   Zentral im Rahmen, weil der Faden auf allen verwalteten Seiten
   erscheint -- also auch auf den Rechtsseiten mit sfta.css. Der
   frühere Einzelblock in landingpage.css ist dafür entfallen.

   Faden und Kachel sind Dekoration: aria-hidden, kein Tabstopp, keine
   Zeiger-Ereignisse. Ohne JavaScript bleibt beides unsichtbar, damit
   keine leere Linie stehen bleibt.
   ================================================================= */

.scroll-thread {
  /* Startwerte; oben und unten setzt das Skript aus der gemessenen Höhe von
     Kopfzeile und mobilem Kontaktbalken. Bewusst keine eigenen Token: die
     Token-Quelle bleibt unverändert. */
  position: fixed;
  top: 7rem;
  bottom: 3rem;
  left: 24px;
  width: 3px;
  z-index: 30;
  pointer-events: none;
  display: none;
}

.scroll-thread.ist-bereit { display: block; }

.scroll-thread::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--brand-accent-rgb), 0.22) 8%,
    rgba(var(--brand-accent-rgb), 0.22) 92%,
    transparent 100%);
  border-radius: 2px;
}

.scroll-thread__fill {
  /* Fortschritt ausschliesslich ueber transform: scaleY von oben. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--brand-accent-light), var(--brand-accent));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
}

.scroll-thread__head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--brand-accent);
  border: 2px solid var(--brand-primary-dark);
  box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.22);
  transform: translateY(0);
}

/* Schmale Fassung im freien Seitenrand. */
@media (max-width: 980px) {
  .scroll-thread { left: 8px; width: 2px; }
  .scroll-thread__head {
    width: 10px; height: 10px;
    margin-left: -5px; margin-top: -5px;
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.20);
  }
}

/* Traeger der Kachel: nur das aktive Thema bekommt die Klasse. Die
   Kachel liegt als negativ gestapeltes Kind HINTER dem Inhalt, aber
   ueber der eigenen Flaeche des Traegers; `isolation` haelt sie darin. */
.lesefaden-traeger {
  position: relative;
  isolation: isolate;
}

.lesefaden-rahmen {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  opacity: 0;
  /* Flaeche und Schrift wechseln GEMEINSAM und ohne Uebergang: ein Ueberblenden
     zeigte sonst kurz weisse Schrift auf hellem Grund. Weich laufen nur Rand
     und Schatten, die keinen Kontrast tragen. */
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Deckendes Marken-Navy statt des frueheren Goldschleiers (Sven, 09.09.2026). */
.lesefaden-rahmen.ist-aktiv {
  opacity: 1;
  background: var(--brand-primary);
  border-color: rgba(var(--brand-accent-rgb), 0.75);
  box-shadow: 0 10px 30px -16px rgba(var(--brand-primary-dark-rgb), 0.65);
}

/* Auf ohnehin dunklen Flaechen bleibt die Kachel deckend, aber unterscheidbar:
   Navy-tief aus derselben Palette. Das Skript setzt die Fassung anhand der
   gemessenen Flaeche. */
.lesefaden-rahmen.auf-dunkel.ist-aktiv {
  background: var(--brand-primary-dark);
  border-color: rgba(var(--brand-accent-rgb), 0.6);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Lesefarben des aktiven Themas (Fassung B, 09.09.2026).

   Weil die Kachel deckend fuellt, muss die Schrift des aktiven Themas
   mitziehen. Entschieden wird das NICHT ueber Nachfahrenregeln, sondern je
   Element im Skript: Es misst die tatsaechliche Schriftfarbe gegen den
   tatsaechlichen Grund und markiert nur die Elemente, deren Kontrast auf der
   Kachel unter 4,5:1 faellt. Elemente mit eigener deckender Flaeche bleiben
   samt Inhalt vollstaendig unberuehrt -- auch verschachtelte dunkle Flaechen
   darin behalten so ihren Kontrast.

   Der Wert steht mit `!important`, weil die Klasse auf dem markierten Element
   SELBST sitzt und dort gegen spaetere, spezifischere Bestandsregeln bestehen
   muss (`.article-body p`, `.legal-doc h3`, `.article-eyebrow`). Er ist rein
   temporaer: mit der Klasse verschwindet er restlos, es bleibt kein Inline-Stil
   und keine eigene Custom Property zurueck.

   Alle Vordergrundregeln stehen in `@media screen`: der Druck blendet die
   Kachel aus, dort darf keine helle Schrift zurueckbleiben. Ohne JavaScript
   entsteht keine dieser Klassen.
   --------------------------------------------------------------------- */
@media screen {
  .lesefaden-auf-navy { color: var(--surface-0) !important; }

  /* Gold statt Weiss, wo der Bestand einen warmen Akzent traegt, und fuer
     Verweise -- sonst waeren sie auf Navy nicht mehr als Verweis erkennbar. */
  .lesefaden-auf-navy-gold { color: var(--brand-accent-light-on-dark) !important; }
  a.lesefaden-auf-navy-gold {
    text-decoration-color: rgba(var(--brand-accent-rgb), 0.7);
  }

  /* Bricht die Vererbung an einer eigenen Flaeche unter einem gefaerbten
     Texttraeger: sonst erbte ihr Inhalt das Weiss von oben (weiss auf weiss in
     den hellen Statuskarten, Browserbefund 09.09.2026). Welche der beiden
     Bestandsfarben gilt, misst das Skript am Grund DIESER Flaeche -- nicht
     pauschal fuer alle Nachfahren. Nachfahren mit eigener Farbregel bleiben
     davon unberuehrt, sie erben gar nicht erst. */
  .lesefaden-flaeche-hell { color: var(--text-primary) !important; }
  .lesefaden-flaeche-dunkel { color: var(--surface-0) !important; }

  /* Artikelkopf als aktives Thema (Browserbefund Sven, 11.09.2026): Der helle
     Vollbreiten-Streifen des Kopfs (`.article-header::before`, landingpage.css)
     liegt ueber der Kachel, weil der Kopf mit `z-index: 0` einen eigenen Stapel
     bildet -- die Schrift stand weiss auf hellem Grund. Traegt die Kachel den
     Kopf, tritt der Streifen zurueck; die Goldlinie (`::after`) bleibt. Mit der
     Themenklasse verschwindet die Regel wieder restlos. */
  .article-header.lesefaden-thema::before { opacity: 0; }

  /* Waehrend des weichen Wechsels (Sven, 09.09.2026) zeichnet der Text denselben
     Umschlag wie die Flaeche: Das Skript legt je Element einen zweifarbigen
     Verlauf aus Ausgangs- und Zielfarbe an, dessen Kante an derselben
     Bildschirmposition steht wie der Zuschnitt der Kachel. Ein unabhaengiges
     Ueberblenden von Flaeche und Farbe waere kontrastarm.
     Nur der Verlauf steht inline und wird am Ende restlos entfernt; die
     durchsichtige Schrift kommt aus dieser Klasse und gilt deshalb NUR am
     Bildschirm -- im Druck bleibt die Bestandsfarbe stehen.
     Den Verlauf tragen nur Traeger mit EINEM durchgehenden Kasten. Ein ueber
     mehrere Zeilen laufender Inline-Text zerfaellt in Fragmente, die CSS nicht
     in einem gemeinsamen senkrechten System malt; solche Traeger werden
     stattdessen durchsichtig gestellt und vom umgebenden Block mitgemalt
     (`lesefaden-wisch-erbt`) oder schlagen an der Kante um.
     Bewusst OHNE `-webkit-text-fill-color`: die Eigenschaft schlaegt `color`
     und wuerde vererbt auch die erhaltenen hellen Innenflaechen unsichtbar
     machen. */
  .lesefaden-wisch {
    background-origin: border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }

  .lesefaden-wisch-erbt { color: transparent !important; }

  /* Dunkler Knopf auf Navy: Kante statt Rahmen, damit nichts verrutscht. */
  .lesefaden-knopf-dunkel {
    outline: 1px solid rgba(var(--brand-accent-rgb), 0.55);
    outline-offset: -1px;
  }

  /* Tastaturfokus auf der Kachel erkennbar halten. Erhaltene Eigenflaechen
     tragen keine dieser Klassen und behalten ihren Bestandsfokus. */
  .lesefaden-auf-navy:focus-visible,
  .lesefaden-auf-navy-gold:focus-visible,
  .lesefaden-knopf-dunkel:focus-visible {
    outline: 2px solid var(--brand-accent-light);
    outline-offset: 2px;
  }
}

/* Der dekorative Rahmen haengt als LETZTES Kind im Traeger und nimmt damit dem
   bisherigen letzten Absatz seinen :last-child-Status. Auf den Rechtsseiten
   setzt sfta.css dort `p:last-child { margin-bottom: 0 }`; ohne diese Regel
   wuchsen Dokument und Main um 16 px, waehrend alle Ueberschriften an ihrer
   Stelle blieben (Browserbefund 09.09.2026, Impressum). Eng auf den Traeger der
   Rechtstexte begrenzt: Ohne aktive Kachel gibt es die Klasse nicht, und der
   vorhandene p:last-child-Fall der uebrigen Seiten bleibt unberuehrt. */
.legal-doc.lesefaden-traeger > p:nth-last-child(2) {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-thread__fill { display: none; }
  .lesefaden-rahmen { transition: none; }
}

@media print {
  .scroll-thread, .lesefaden-rahmen { display: none !important; }
}


.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand-primary); color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.btn-primary:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; color: var(--brand-primary);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--brand-primary);
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary.btn-on-dark {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-secondary.btn-on-dark:hover { background: rgba(255,255,255,0.08); }

/* HERO – Variante A (Stand 2026-05-02): klar fokussiert, eine Akzentfarbe,
   subtiler Hintergrund, drei Vertrauens-Anker statt Trust-Bar.
   Alte Klassen (.hero-badge, .hero-sub, .hero-trust, .trust-item, .trust-value,
   .hero-bg-decor) bleiben weiter unten erhalten, weil upload.html, danke.html
   und link-ungueltig.html sie noch nutzen. */
/* HERO: Sven-Wunsch 2026-05-04: blauer Hintergrund, weisse Schrift,
   Goldgelb-Akzent fuer "Handelsvertreterausgleich". */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(var(--brand-accent-rgb), 0.18) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(var(--brand-accent-rgb), 0.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: #fff;
  padding: 6rem 0 5rem;
  border-bottom: 1px solid var(--brand-primary-dark);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; max-width: 820px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-accent-on-dark);
  margin-bottom: 1.6rem;
}
.hero-eyebrow::before {
  content: ""; display: inline-block;
  width: 28px; height: 2px;
  background: var(--brand-accent);
}

.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.5rem);
  line-height: 1.1; font-weight: 700;
  color: #fff;
  margin-bottom: 1.4rem;
  hyphens: auto;
}
@media (max-width: 480px) {
  /* "Handelsvertreterausgleich" ist 25 Zeichen und sprengt 375px-Viewports.
     Schriftgroesse anpassen + Silbentrennung erlauben (lang="de" ist im
     html-Tag gesetzt). */
  .hero h1 { font-size: 1.95rem; }
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-accent-on-dark);
}

.hero-lead {
  font-family: 'Source Serif Pro', serif;
  font-size: 1.2rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin-bottom: 2.2rem;
  font-weight: 400;
}

.hero-cta-row {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-cta-note {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Im Hero: Primary-Button bekommt Goldgelb (sticht aus blauem Hintergrund),
   Secondary-Text bleibt weiss. */
.hero .btn-primary {
  background: var(--brand-accent);
  color: var(--brand-primary-dark);
  border: none;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
}
.hero .btn-primary:hover {
  background: var(--brand-accent-light);
  color: var(--brand-primary-dark);
}

.btn-text {
  color: rgba(255, 255, 255, 0.95); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.btn-text:hover {
  color: var(--brand-accent-on-dark);
  border-color: var(--brand-accent);
}

.hero-anchors {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; max-width: 720px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 2rem;
}
@media (max-width: 720px) {
  .hero-anchors { grid-template-columns: 1fr; gap: 1.5rem; }
}
.hero-anchor {
  display: flex; gap: 0.9rem;
  padding-right: 1.5rem;
}
.hero-anchor-num {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700; font-size: 1.7rem;
  color: var(--brand-accent-on-dark);
  line-height: 1;
  flex-shrink: 0;
}
.hero-anchor-text {
  font-size: 0.88rem; line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.hero-anchor-text strong {
  display: block; color: #fff;
  font-weight: 600; margin-bottom: 0.15rem;
}

/* === Legacy-Hero-Klassen (genutzt von upload.html, danke.html,
       link-ungueltig.html). Pulse-Animation hier entfernt fuer ruhigeren Look. === */
.hero-bg-decor {
  position: absolute;
  top: 0; right: 0;
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, var(--brand-accent-glow) 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(var(--brand-primary-rgb), 0.08);
  color: var(--brand-primary);
  border-radius: 100px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
  position: relative;
}
.hero-badge::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  margin-right: 0.1rem;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 var(--brand-accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--brand-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-accent-rgb), 0); }
}
.hero-sub {
  font-family: 'Source Serif Pro', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
  max-width: 680px;
}
.hero-trust {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem;
}
.trust-item { font-size: 0.88rem; color: var(--text-secondary); }
.trust-value { display: block; font-family: 'Source Serif Pro', serif; font-weight: 700; color: var(--brand-primary); font-size: 1.35rem; margin-bottom: 0.15rem; }

/* SECTION */
section { padding: 4.5rem 0; scroll-margin-top: 5.5rem; }
section.alt { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* DATENSOUVERAENITAET-BAND — Negativ-Flaeche fuer Mittelteil-Taktwechsel (P6, Stand 2026-06-16).
   Vokabular aus Hero + .cta-block (Navy-Gradient, Gold-Glow, Dots-Pattern, Gold-Akzent). */
.trust-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--brand-accent-rgb), 0.16) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(var(--brand-accent-rgb), 0.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: #fff;
  border-top: 1px solid var(--brand-primary-dark);
  border-bottom: 1px solid var(--brand-primary-dark);
}
.trust-band::before {
  /* dezente Punkte-Textur, gleicher Stil wie Hero/.cta-block */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(var(--brand-accent-rgb), 0.12) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
  opacity: 0.8;
  z-index: -1;
}
.trust-band__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.trust-band__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-accent-on-dark);
  margin-bottom: 1.1rem;
}
.trust-band__eyebrow::before,
.trust-band__eyebrow::after {
  content: ""; display: inline-block;
  width: 28px; height: 2px;
  background: var(--brand-accent);
}
.trust-band__title {
  color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 0.9rem;
}
.trust-band__lead {
  font-family: 'Source Serif Pro', serif;
  font-size: 1.12rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 620px;
  margin: 0 auto 2rem;
}
.trust-band__facts {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2.4rem; justify-content: center;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}
.trust-band__facts span { display: inline-flex; align-items: center; gap: 0.55rem; }
.trust-band__facts span::before {
  content: "\2713"; /* Haken */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: rgba(var(--brand-accent-rgb), 0.18);
  color: var(--brand-accent-on-dark);
  border-radius: 50%;
  font-size: 0.78rem; font-weight: 700;
}
.section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
/* Eyebrow auf Blau geaendert (Stand 2026-05-02): Gold auf Weiss
   schafft bei 0.8rem keinen AA-Kontrast fuer normalen Text.
   Brand-primary erreicht >12:1. Kanzlei-seriose Anmutung profitiert
   ebenfalls. */
.section-eyebrow { font-size: 0.8rem; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.6rem; }
.section-eyebrow::before {
  content: ""; display: inline-block;
  width: 24px; height: 2px;
  background: var(--brand-accent);
  margin-right: 0.7rem;
  vertical-align: middle;
}
.section-lead { font-size: 1.08rem; color: var(--text-secondary); max-width: 640px; margin: 0.8rem auto 0; }
/* Modifier fuer den Modular-Hinweis unter der Preisliste (ersetzt ehemaliges
   inline style="margin-top:2rem; font-size:0.95rem" in index.html, CSP-konform). */
.section-lead--note { margin-top: 2rem; font-size: 0.95rem; }

/* PROBLEM/SOLUTION GRID */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media(max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 2rem; } }
.col-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.col-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -14px rgba(var(--brand-primary-rgb), 0.20);
  border-color: var(--brand-accent);
}
.col-card h3 { color: var(--brand-primary); margin-bottom: 1rem; }
.col-card ul { list-style: none; padding: 0; }
.col-card li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-secondary); font-size: 0.97rem; }
.col-card li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent); }

/* PROCESS STEPS - mit "rotem Faden" als horizontalem Goldgelb-Strang */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-top: 2.6rem;     /* Platz fuer den Faden ueber den Karten */
}
.steps::before {
  content: "";
  position: absolute;
  top: 1.05rem; /* Mittelhoehe des Step-Punktes */
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-accent) 8%,
    var(--brand-accent) 92%,
    transparent 100%);
  opacity: 0.55;
  z-index: 0;
}
@media(max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
}
@media(max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 2.5rem 1.5rem 1.5rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  z-index: 1;
}
.step::before {
  /* Knoten am Faden ueber jeder Karte. Pulse-Animation entfernt
     (Stand 2026-05-02): vier gleichzeitig pulsierende Punkte erzeugten
     Unruhe und passten nicht zum kanzleihaften Gesamtanspruch. */
  content: "";
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-accent);
  border: 3px solid var(--surface-0);
  box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.18);
  z-index: 2;
}
@media(max-width: 900px) { .step::before { display: none; } }
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px -12px rgba(var(--brand-primary-rgb), 0.22), 0 4px 10px -4px rgba(var(--brand-accent-rgb), 0.18);
  border-color: var(--brand-accent);
}
.step:hover::before {
  background: var(--brand-accent-light);
  box-shadow: 0 0 0 6px rgba(var(--brand-accent-rgb), 0.25), 0 2px 8px rgba(var(--brand-accent-rgb), 0.45);
  animation: none;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--brand-primary); color: #fff;
  font-family: 'Source Serif Pro', serif; font-weight: 700; font-size: 1rem;
  border-radius: 50%;
  margin-bottom: 0.85rem;
  transition: background 0.18s ease, transform 0.18s ease;
}
.step:hover .step-num {
  background: var(--brand-primary-dark);
  transform: scale(1.06);
}
.step h3 { font-size: 1.05rem; color: var(--brand-primary); margin-bottom: 0.5rem; }
.step p { font-size: 0.92rem; }

/* METHODIK / LEGAL CITATIONS */
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.legal-card {
  position: relative;
  padding: 1.8rem 1.8rem 1.8rem 3.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--brand-primary);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s ease;
}
.legal-card::before {
  /* Dezente "§"-Marke als juristischer Anker (Stand 2026-05-02).
     Source Serif Pro im Brand-Akzent, halbtransparent — wirkt als
     nuechternes Iconographie-Element ohne Emoji-Cliche. */
  content: "§";
  position: absolute;
  top: 1.5rem; left: 1.4rem;
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--brand-accent-dark);
  line-height: 1;
}
.legal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px -14px rgba(var(--brand-primary-rgb), 0.22);
  border-top-color: var(--brand-accent);
}
.legal-card:hover::before { color: var(--brand-accent-text); }
.legal-card .az { font-family: 'Source Serif Pro', serif; font-weight: 700; color: var(--brand-primary); font-size: 1.05rem; margin-bottom: 0.4rem; }
/* Verlinkte Kartentitel (Ratgeber-Sektion): Markenfarbe statt Browser-Blau */
.legal-card .az a { color: inherit; text-decoration: none; }
.legal-card .az a:hover, .legal-card .az a:focus-visible { color: var(--brand-accent-text); text-decoration: underline; }
.legal-card .date { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.legal-card p { font-size: 0.93rem; }

/* Hinweistext unter Methodik-Karten (BGH-/OLG-Tendenz) */
.methodik-footnote {
  text-align: center;
  margin: 2.5rem auto 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 720px;
}

/* 5-SCHRITT-VERFAHREN – kompakte Schemagrafik (Stand 2026-06-15).
   Greift das Gold-Faden-/Knoten-Vokabular der .steps-Sektion auf, aber
   kompakter als Methodik-Diagramm. Reines HTML/CSS (CSP-konform, kein Script,
   kein Inline-Style), Farben ausschliesslich aus den Brand-Tokens. */
.verfahren-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  margin: 2.5rem 0 0.5rem;
}
.verfahren-flow::before {
  content: "";
  position: absolute;
  top: 19px;            /* Mittelhoehe der 38px-Knoten */
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-accent) 8%,
    var(--brand-accent) 92%,
    transparent 100%);
  opacity: 0.55;
  z-index: 0;
}
.verfahren-step {
  position: relative;
  text-align: center;
  z-index: 1;
}
.verfahren-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  margin: 0 auto 0.9rem;
  background: var(--brand-primary);
  color: #fff;
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 50%;
  border: 3px solid var(--surface-0);
  box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.18);
}
.verfahren-step__title {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 0.98rem;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}
.verfahren-step__desc {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .verfahren-flow { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .verfahren-flow::before { display: none; }
}
@media (max-width: 520px) {
  .verfahren-flow { grid-template-columns: 1fr; }
}

/* QUALIFIKATION
   Sven-Wunsch 2026-05-04: Foto kleiner. 280px -> 180px, Caption proportional. */
.qualifikation {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media(max-width: 1040px) {
  .qualifikation { grid-template-columns: 160px 1fr; gap: 2rem; }
  .qualifikation-facts { grid-column: 1 / -1; }
}
@media(max-width: 720px) {
  .qualifikation { grid-template-columns: 1fr; }
  .qualifikation-portrait { max-width: 180px; margin: 0 auto; }
  /* Mobile-Overflow-Fix 2026-06-16: Grid-Items duerfen schrumpfen, lange Komposita
     umbrechen, Fakten-Zeilen stapeln (statt fixe 140px-Label-Spalte neben langem Wert). */
  .qualifikation, .qualifikation-text, .qualifikation-facts { min-width: 0; }
  .qualifikation-text p, .qualifikation-text h2 { overflow-wrap: break-word; }
  .fact { flex-direction: column; gap: 0.25rem; }
  .fact-label { min-width: 0; }
  .fact-value { overflow-wrap: break-word; }
}

.qualifikation-portrait {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px -10px rgba(var(--brand-primary-rgb), 0.18);
}
.qualifikation-portrait::before {
  /* Goldgelber Akzentstreifen oben links als Branding-Element */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36%;
  height: 4px;
  background: var(--brand-accent);
  z-index: 2;
}
.qualifikation-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.qualifikation-portrait-caption {
  padding: 0.9rem 1.1rem 1rem;
  background: var(--surface-0);
  border-top: 1px solid var(--border);
}
.qualifikation-portrait-name {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.05rem;
}
.qualifikation-portrait-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}

.qualifikation-text h2 { text-align: left; }
.qualifikation-text p { margin-bottom: 1rem; font-size: 1.02rem; }
.qualifikation-facts { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; }
.fact { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.fact:last-child { border-bottom: none; }
.fact-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; min-width: 140px; padding-top: 0.12rem; }
.fact-value { font-size: 0.98rem; color: var(--text-primary); font-weight: 500; }

/* CTA BLOCK – Stand 2026-05-04: modernisiert auf Hero-Vokabular
   (Goldgelb-Glow, Dots-Pattern, Goldgelb-Akzentstreifen oben, Trust-Anker unten). */
.cta-block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--brand-accent-rgb), 0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  padding: 4.5rem 2.5rem 3.5rem;
  border-radius: var(--radius-lg);
  text-align: center;
  margin: 4rem auto;
  box-shadow: 0 30px 60px -28px rgba(var(--brand-primary-dark-rgb), 0.45);
}
.cta-block::before {
  /* dezente Punkte-Textur, gleicher Stil wie Hero */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(var(--brand-accent-rgb), 0.12) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
  opacity: 0.85;
  z-index: -1;
}
.cta-block::after {
  /* Akzentstreifen oben (Goldgelb), parallel zum Eyebrow-Strich aus dem Hero */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 4px;
  background: var(--brand-accent);
  border-radius: 0 0 4px 4px;
}
.cta-block .cta-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-accent-on-dark);
  margin-bottom: 1.1rem;
}
.cta-block h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: 0.6rem;
}
.cta-block p {
  color: rgba(255,255,255,0.85);
  font-size: 1.08rem;
  max-width: 580px;
  margin: 1rem auto 2rem;
}
/* Innerhalb des CTA-Blocks bekommt der Goldgelb-CTA einen Glow gegen Dunkelblau */
.cta-block .btn-cta {
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 26px -6px rgba(var(--brand-accent-rgb), 0.55);
}
.cta-block .btn-cta:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px -6px rgba(var(--brand-accent-rgb), 0.7);
}
.cta-buttons-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-trust-row {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.4rem;
  justify-content: center;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}
.cta-trust-row span {
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.cta-trust-row span::before {
  content: "\2713"; /* Haken */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: rgba(var(--brand-accent-rgb), 0.18);
  color: var(--brand-accent-on-dark);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
}

/* PREISE */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media(max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -14px rgba(var(--brand-primary-rgb), 0.22), 0 6px 14px -6px rgba(var(--brand-accent-rgb), 0.16);
  border-color: var(--brand-accent);
}
.price-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
}
.price-card-title {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}
.price-card-amount {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.price-card-amount .currency {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 0.3rem;
  vertical-align: top;
}
.price-card-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.price-card-save {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 0.6rem;
}
.price-card-save .price-card-old {
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
  margin-right: 0.35rem;
}
.pricing-table-wrap {
  margin: 2rem 0;
  overflow-x: auto;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-0);
  font-size: 0.92rem;
}
.pricing-table caption {
  padding-bottom: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
}
.pricing-table th,
.pricing-table td {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.pricing-table thead th {
  background: var(--brand-primary);
  color: #fff;
}
.pricing-table tbody th {
  color: var(--brand-primary);
}
.price-card-features { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.price-card-features li {
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  font-size: 0.92rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.price-card-features li:first-child { border-top: 0; }
.price-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 8px;
  height: 2px;
  background: var(--brand-accent);
}
.price-card.premium {
  /* Stand 2026-05-02: entkitscht – Gradient-Hintergrund weg, dezenter Top-Border
     in Brand-Primary, Badge-Text "Empfohlen" statt "Meistgewaehlt" (weniger
     SaaS-Konvertierungston, passender zu Privatgutachten). */
  border-top: 3px solid var(--brand-primary);
  position: relative;
  padding-top: 2.6rem;
}
.price-card.premium::after {
  content: "Empfohlen";
  position: absolute;
  top: 0.85rem;
  right: 1.4rem;
  padding: 0.25rem 0.7rem;
  background: transparent;
  color: var(--brand-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--brand-primary);
  border-radius: 100px;
  z-index: 3;
}
.price-card.premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -14px rgba(var(--brand-primary-rgb), 0.22);
}
.price-premium-box {
  margin-top: 1.5rem;
  padding: 2.5rem;
  background: var(--brand-primary);
  color: #fff;
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media(max-width: 900px) { .price-premium-box { grid-template-columns: 1fr; gap: 1.5rem; } }
.price-premium-box h3 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.price-premium-box p { color: rgba(255,255,255,0.85); margin-bottom: 1rem; }
.price-premium-box ul { list-style: none; padding: 0; }
.price-premium-box ul li {
  padding: 0.35rem 0 0.35rem 1.4rem;
  position: relative;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.9);
}
.price-premium-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 8px;
  height: 2px;
  background: var(--brand-accent);
}
/* Im Premium-Box (dunkler Hintergrund): Akzent-Label und Inline-strong fuer "zwei Stationen" */
.price-premium-box .price-card-label { color: var(--brand-accent-on-dark); }
.price-premium-box strong { color: #fff; }
/* Fussnote unter Premium-Stichpunkten ("Fuer jede weitere Station ...") */
.price-premium-box .price-premium-footnote {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.78);
}

.price-premium-price {
  text-align: right;
  padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,0.15);
}
@media(max-width: 900px) { .price-premium-price { text-align: left; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.5rem; } }
.price-premium-price .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent-on-dark);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.price-premium-price .amount {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
}
.price-premium-price .amount .currency {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.75);
  margin-left: 0.3rem;
  vertical-align: top;
}
/* "netto, zzgl. USt"-Zeile innerhalb der dunklen Premium-Preis-Box */
.price-premium-price .price-card-note {
  color: rgba(255,255,255,0.65);
  margin-top: 0.4rem;
}

.price-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
@media(max-width: 720px) { .price-meta-grid { grid-template-columns: 1fr; } }
.price-meta {
  padding: 1.2rem 1.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
}
.price-meta h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
.price-meta p { font-size: 0.88rem; margin: 0; }
.price-footnote {
  margin-top: 2.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.price-footnote strong { color: var(--brand-primary); }
.price-footnote ul { margin: 0.5rem 0 0 1.2rem; padding: 0; }
.price-footnote li { margin-bottom: 0.25rem; }

/* Zentrierter Block (CTA-Button-Wrapper unter Preisliste) */
.center-block {
  text-align: center;
  margin-top: 2.5rem;
}

/* SCROLL-PROGRESS / Lese-Indikator
   Der frühere Einzelblock stand nur in diesem Stylesheet und damit nur auf den
   Marketing-Seiten. Seit dem Lesefaden-Umbau (09.09.2026) liegen Faden und
   aktive Themenkachel gemeinsam in website-src/rahmen.css, weil sie auch auf den
   Rechtsseiten mit sfta.css erscheinen. */

/* Fuß- und Menü-Verweise unter 720 px stehen in rahmen.css; hier nur die Brotkrumen. */
@media (max-width: 720px) {
  .breadcrumb-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
  }
}

/* =====================================================================
 * ARTICLE / PILLAR-PAGE LAYOUT
 * Stand: 2026-05-01 (SEO/AEO Block 4)
 * Verwendet auf /handelsvertreterausgleich-tankstelle.html und kuenftigen
 * Pillar-Pages. Lesedichte erhoeht (Textspalte ~720 px), Inhaltsverzeichnis,
 * FAQ-Toggle, Callout-Box, Quellenliste.
 * ===================================================================== */

.article-page {
  background: var(--surface-0);
  padding: 3rem 0 4.5rem;
}

/* Mobile-Overflow-Fix 2026-06-16: breite Tabellen scrollen INNERHALB ihres Wrappers,
   statt die Seite horizontal zu sprengen (.table-wrap war bisher ungestylt = visible). */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-container {
  max-width: 760px;
  padding: 0 1.5rem;
}

.breadcrumb-nav {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb-nav a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

.article-header {
  position: relative;
  z-index: 0;                /* Stacking-Context fuer die Streifen-Flaechen */
  margin-bottom: 3rem;
  padding-top: 2.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
/* PILLAR-HEADER-STREIFEN (P7, 2026-06-16): voll-breiter heller Kopfbereich
   (surface-1) mit Gold-Akzentlinie oben. Full-bleed ueber box-shadow + clip-path
   (KEIN 100vw -> kein Horizontal-Scroll, Artikel-Body/Tabellen unberuehrt).
   Parent hat KEIN clip-path -> Text-Kinder werden nicht beschnitten. */
.article-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-1);
  box-shadow: 0 0 0 100vmax var(--surface-1);
  clip-path: inset(0 -100vmax 0 -100vmax);
  z-index: -1;
}
.article-header::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-accent);
  box-shadow: 0 0 0 100vmax var(--brand-accent);
  clip-path: inset(0 -100vmax 0 -100vmax);
  z-index: -1;
}
.article-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
}
.article-header h1 {
  color: var(--text-primary);
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.18;
  margin-bottom: 1.4rem;
}
.article-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.article-meta-sep {
  color: var(--border);
}

.article-toc {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem 1.4rem 1.6rem;
  margin-top: 1rem;
}
.article-toc-heading {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.article-toc ol {
  margin: 0;
  padding-left: 1.4rem;
  color: var(--text-secondary);
}
.article-toc li {
  margin: 0.35rem 0;
  font-size: 0.95rem;
}
.article-toc a {
  color: var(--text-secondary);
  text-decoration: none;
}
.article-toc a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.article-body h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  margin: 2.8rem 0 1rem;
  scroll-margin-top: 4.5rem;
  line-height: 1.3;
}
.article-body h3 {
  font-size: 1.1rem;
  color: var(--brand-primary);
  margin: 1.8rem 0 0.6rem;
}
.article-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
}
.article-body p strong {
  color: var(--brand-primary);
  font-weight: 600;
}
.article-body a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: var(--brand-primary-dark);
}

/* Knöpfe im Artikeltext behalten Schrift und Unterstreichung ihrer eigenen Regel (07.10.2026):
   .article-body a färbte sonst die Schrift von .btn-primary navy auf navy. */
.article-body a.btn-primary,
.article-body a.btn-primary:hover {
  color: var(--surface-0);
  text-decoration: none;
}

/* Bilder im Artikeltext (07.10.2026): Abstand zum folgenden Absatz wie zwischen Absätzen. */
.article-body .software-bild { margin: 0 0 1.5rem; }

.article-callout {
  background: rgba(var(--brand-primary-rgb), 0.05);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0 1.8rem;
  font-size: 1rem;
}
.article-callout strong {
  color: var(--brand-primary);
}

.faq-block {
  margin: 1.5rem 0 2rem;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.7rem;
  background: var(--surface-0);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item[open] {
  border-color: var(--brand-primary-light);
  box-shadow: 0 2px 10px rgba(var(--brand-primary-rgb), 0.06);
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 1.3rem;
  font-family: 'Source Serif Pro', serif;
  font-weight: 600;
  color: var(--brand-primary);
  font-size: 1.02rem;
  list-style: none;
  position: relative;
  padding-right: 2.4rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand-primary);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item[open] summary {
  border-bottom: 1px solid var(--border);
}
.faq-item summary:hover {
  color: var(--brand-primary-dark);
}
.faq-item p {
  padding: 0 1.3rem 1.1rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.article-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 2.4rem;
}

.article-sources {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}
.article-sources li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.article-sources li:first-child { border-top: 0; }
.article-sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 8px;
  height: 2px;
  background: var(--brand-accent);
}

.article-disclaimer {
  margin-top: 2.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.article-author {
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-md);
}
.article-author__eyebrow {
  color: var(--brand-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-body .article-author h2 {
  margin: 0.35rem 0 0.75rem;
}
.article-body .article-author p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   ERSTANFRAGE-FORMULAR + MODAL (Stand 2026-05-04)
   --------------------------------------------------------------- */

.anfrage-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(var(--brand-primary-dark-rgb), 0.55);
  backdrop-filter: blur(2px);
  z-index: 9000;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.anfrage-modal.is-open {
  display: flex;
}

.anfrage-modal__panel {
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  margin: auto;
  box-shadow: 0 20px 60px rgba(var(--brand-primary-dark-rgb), 0.3);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.anfrage-modal__header {
  background: var(--brand-primary);
  color: #fff;
  padding: 1.6rem 2rem 1.4rem;
}

.anfrage-modal__eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-accent-light-on-dark);
  margin-bottom: 0.5rem;
}

.anfrage-modal__title {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.anfrage-modal__note {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.anfrage-modal__note strong { color: #fff; }
.anfrage-modal__note a { color: var(--brand-accent-light-on-dark); }

.anfrage-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.anfrage-modal__close:hover { background: rgba(255, 255, 255, 0.22); }

.anfrage-form {
  padding: 1.8rem 2rem 2rem;
  display: grid;
  gap: 1.4rem;
}

.anfrage-form__section {
  display: grid;
  gap: 0.8rem;
}

fieldset.anfrage-form__section {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.anfrage-form__legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

legend.anfrage-form__legend {
  width: 100%;
  padding: 0 0 0.8rem;
}

.anfrage-form__required-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-align: right;
}

.anfrage-form__required {
  color: #A3273F;
  font-weight: 700;
}

.anfrage-form__row {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .anfrage-form__row { grid-template-columns: 1fr; }
  .anfrage-form { padding: 1.4rem 1.2rem 1.6rem; }
  .anfrage-modal__header { padding: 1.3rem 1.4rem 1.1rem; }
}

.anfrage-form__field {
  display: grid;
  gap: 0.35rem;
}

.anfrage-form__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.anfrage-form__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.anfrage-form__input,
.anfrage-form__select,
.anfrage-form__textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-primary);
  width: 100%;
}

.anfrage-form__input:focus,
.anfrage-form__select:focus,
.anfrage-form__textarea:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

.anfrage-form__textarea {
  min-height: 90px;
  resize: vertical;
}

.anfrage-form__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.anfrage-form__pill {
  position: relative;
}

.anfrage-form__pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.anfrage-form__pill-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
  background: var(--surface-1);
  color: var(--text-primary);
  transition: all 0.12s ease;
}

.anfrage-form__pill input:checked + .anfrage-form__pill-label {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.anfrage-form__pill input:focus-visible + .anfrage-form__pill-label {
  box-shadow: 0 0 0 3px var(--brand-accent-glow);
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  .anfrage-form__input:focus,
  .anfrage-form__select:focus,
  .anfrage-form__textarea:focus,
  .anfrage-form__pill input:focus-visible + .anfrage-form__pill-label {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.anfrage-form__checkboxes {
  display: grid;
  gap: 0.5rem;
}

.anfrage-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.4rem 0;
}

.anfrage-form__check input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--brand-primary);
}

.anfrage-form__check a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.anfrage-standorte {
  display: grid;
  gap: 0.6rem;
}

.anfrage-standort {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 100px 1fr 1fr auto;
  align-items: end;
  padding: 0.6rem;
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

@media (max-width: 560px) {
  .anfrage-standort {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "plz ort"
      "marke entfernen";
  }
  .anfrage-standort .anfrage-standort__plz { grid-area: plz; }
  .anfrage-standort .anfrage-standort__ort { grid-area: ort; }
  .anfrage-standort .anfrage-standort__marke { grid-area: marke; }
  .anfrage-standort .anfrage-standort__entfernen { grid-area: entfernen; }
}

.anfrage-standort__entfernen {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.anfrage-standort__entfernen:hover {
  border-color: #C0394B;
  color: #C0394B;
}

.anfrage-standort__entfernen[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.anfrage-standorte__add {
  background: transparent;
  border: 1px dashed var(--brand-primary);
  color: var(--brand-primary);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  justify-self: start;
}

.anfrage-standorte__add:hover {
  background: rgba(var(--brand-primary-rgb), 0.06);
}

/* Honeypot: visuell + per a11y verstecken, aber im Tab-Stop bleiben
   ist hier NICHT gewuenscht -- echte Nutzer sollen das Feld nicht sehen. */
.anfrage-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.anfrage-form__submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.anfrage-form__submit {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--brand-accent);
  color: var(--brand-primary-dark);
  border: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.anfrage-form__submit:hover {
  background: var(--brand-accent-light);
  transform: translateY(-1px);
}

.anfrage-form__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.anfrage-form__status {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.anfrage-form__status.is-error { color: #C0394B; font-weight: 500; }
.anfrage-form__status.is-success { color: #1F7A3A; font-weight: 500; }

.anfrage-success {
  background: var(--surface-1);
  border: 1px solid var(--brand-accent);
  border-left-width: 4px;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-sm);
  margin: 1.5rem 0;
  display: none;
}

.anfrage-success.is-open { display: block; }

.anfrage-success__title {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 0.5rem;
}

.anfrage-success__ref {
  font-family: 'Inter', monospace;
  background: var(--brand-primary);
  color: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.anfrage-success__text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 0.6rem;
}

/* Standalone-Seite /anfrage.html */
.anfrage-page {
  background: var(--surface-1);
  padding: 4rem 1rem;
  min-height: 70vh;
}

.anfrage-page__panel {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(var(--brand-primary-dark-rgb), 0.08);
}

/* ── Geführtes Anfrageformular (20.10.2026, Sven 1a/2a/3b/4a) ───────────────
   Führung Frage für Frage über dem vollständigen Formular. Ohne JavaScript
   bleiben alle Schritte sichtbar (kein Schritt trägt dann `hidden`). Nur
   Zustandswechsel 150 bis 200 ms, keine Bewegung im Inhalt; reduzierte
   Bewegung erbt den globalen Block oben. Ausschließlich Token aus tokens.css. */
.anfrage-layout { display: grid; }
/* Nach dem Senden verbirgt das Skript das Formular; display: grid der Klasse darf das
   hidden-Attribut nicht aushebeln (Befund der Handprobe 20.10.2026). */
.anfrage-form[hidden] { display: none; }

.anfrage-schritt {
  display: grid;
  gap: 0.6rem;
}
fieldset.anfrage-schritt {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.anfrage-schritt[hidden] { display: none; }

.anfrage-schritt__frage {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-primary);
  margin: 0;
}
legend.anfrage-schritt__frage { padding: 0; margin-bottom: 0.4rem; }
h2.anfrage-schritt__frage[hidden] { display: none; }
h2.anfrage-schritt__frage:focus { outline: none; }
h2.anfrage-schritt__frage:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 4px; }

.anfrage-form__input--kurz { max-width: 12rem; }

.anfrage-schritt__fehler {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--error);
}
.anfrage-schritt__fehler[hidden] { display: none; }

.anfrage-fuehrung {
  display: grid;
  gap: 0.45rem;
}
.anfrage-fuehrung[hidden] { display: none; }
.anfrage-fuehrung__stand {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.anfrage-fuehrung__balken {
  display: block;
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.anfrage-fuehrung__balken::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.anfrage-fuehrung__balken::-webkit-progress-value { background: var(--brand-accent); border-radius: 999px; transition: width 0.2s ease; }
.anfrage-fuehrung__balken::-moz-progress-bar { background: var(--brand-accent); border-radius: 999px; }
.anfrage-fuehrung__hinweis {
  margin: 0.3rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--surface-1);
  border-left: 4px solid var(--brand-accent);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.anfrage-fuehrung__hinweis[hidden] { display: none; }

.anfrage-fuehrung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.anfrage-fuehrung__knoepfe[hidden] { display: none; }
.anfrage-fuehrung__knoepfe button[hidden] { display: none; }
.anfrage-fuehrung__weiter {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--brand-primary);
  color: var(--surface-0);
  border: 1px solid var(--brand-primary);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.anfrage-fuehrung__weiter:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }
.anfrage-fuehrung__zurueck,
.anfrage-fuehrung__ueberspringen,
.anfrage-fuehrung__spaeter {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--border);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.anfrage-fuehrung__zurueck:hover,
.anfrage-fuehrung__ueberspringen:hover,
.anfrage-fuehrung__spaeter:hover {
  border-color: var(--brand-primary);
  background: rgba(var(--brand-primary-rgb), 0.06);
}
.anfrage-fuehrung__zurueck[disabled] { opacity: 0.45; cursor: not-allowed; }
.anfrage-fuehrung__zurueck[disabled]:hover { border-color: var(--border); background: transparent; }
.anfrage-fuehrung__knoepfe button:focus-visible,
.anfrage-form__submit:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

.anfrage-form__speicherhinweis {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.anfrage-form__speicherhinweis[hidden] { display: none; }

.anfrage-zusammenfassung {
  margin: 0;
  display: grid;
  gap: 0;
}
.anfrage-zusammenfassung[hidden] { display: none; }
.anfrage-zusammenfassung__zeile {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  align-items: start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.anfrage-zusammenfassung dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-top: 0.2rem;
}
.anfrage-zusammenfassung dd {
  margin: 0;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.98rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.anfrage-zusammenfassung__aendern {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.anfrage-zusammenfassung__aendern:hover { border-color: var(--brand-primary); }
.anfrage-zusammenfassung__aendern:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 560px) {
  .anfrage-zusammenfassung__zeile { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* QR-Feld: nur auf großen Bildschirmen mit feinem Zeiger (Maus); auf dem Handy
   ist das Weiterführen aufs Handy gegenstandslos. */
.anfrage-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .anfrage-page__panel { max-width: 1000px; }
  .anfrage-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: stretch;
  }
  .anfrage-qr {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: 1.8rem 1.4rem;
    border-left: 1px solid var(--border);
    background: var(--surface-1);
  }
  .anfrage-qr[hidden] { display: none; }
}
.anfrage-qr__titel {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin: 0;
}
.anfrage-qr__bild { width: 100%; max-width: 300px; }
.anfrage-qr__bild svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: var(--surface-0);
}
.anfrage-qr__bild svg path { fill: var(--brand-primary-dark); }
.anfrage-qr__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── Daten-/Faktentabellen (z. B. BGH-Urteilsübersicht) ──────────────────
   Additiv ergänzt 2026-06-05 für Pillar-Pages mit Tabellen. Neue Klassen,
   wirken nicht auf bestehende Seiten. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
  background: var(--surface-0);
}
.data-table thead th {
  background: var(--brand-primary);
  color: #ffffff;
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-bottom: 2px solid var(--brand-accent);
}
.data-table tbody td {
  padding: 0.7rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.data-table tbody td:first-child {
  white-space: nowrap;
  color: var(--text-primary);
}
.data-table tbody tr:nth-child(even) {
  background: var(--surface-1);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* FAQ-Sektion */
.faq-list { max-width: 860px; margin-top: 2rem; }

/* Skip-Link-Ziel: programmatischer Fokus ohne stoerendes Dauer-Outline */
main:focus{outline:none;}

/* Screenreader-only Utility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* =================================================================
   Kostenlose Datenpruefung (#datenpruefung) -- Charge 2, 2026-07-18
   Drei-Schritte-Prozess + Rueckruf-Karte + Dringlichkeits-Hinweis
   ================================================================= */
.pruef-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1rem;
}
@media (max-width: 860px) { .pruef-grid { grid-template-columns: 1fr; gap: 2rem; } }

.pruef-liste { list-style: none; margin: 0; padding: 0; counter-reset: pruefschritt; }
.pruef-liste li {
  position: relative;
  padding: 0 0 1.7rem 3.4rem;
  counter-increment: pruefschritt;
  color: var(--text-secondary);
  font-size: 1rem;
}
.pruef-liste li strong { display: block; color: var(--text-primary); font-size: 1.06rem; margin-bottom: 0.25rem; }
.pruef-liste li::before {
  content: counter(pruefschritt);
  position: absolute;
  left: 0; top: 0.05rem;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.pruef-liste li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.1rem; top: 2.6rem; bottom: 0.25rem;
  width: 2px;
  background: var(--border);
}

.rueckruf-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: 0 10px 30px rgba(var(--brand-primary-dark-rgb), 0.07);
}
.rueckruf-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}
.rueckruf-card h3 { color: var(--brand-primary); margin-bottom: 0.5rem; }
.rueckruf-card__lead { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.2rem; }
.rueckruf-form { display: flex; flex-direction: column; gap: 0.9rem; }
.rueckruf-form.is-hidden { display: none; }
.rueckruf-form__check { font-size: 0.85rem; }
.rueckruf-form__submit-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
.rueckruf-form__submit { width: 100%; text-align: center; cursor: pointer; border: none; font-size: 1rem; }
.rueckruf-card__alt { margin-top: 1.2rem; font-size: 0.92rem; color: var(--text-secondary); }
.rueckruf-card__alt a { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.rueckruf-card__alt a:hover { text-decoration: underline; }

.rueckruf-success {
  display: none;
  background: #F0F7F0;
  border: 1px solid #BFDDBF;
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  color: #1E4620;
  font-size: 0.95rem;
}
.rueckruf-success.is-open { display: block; }
.rueckruf-success__title { font-weight: 700; margin-bottom: 0.3rem; }

.urgent-box {
  margin-top: 2.8rem;
  background: #FDF6E7;
  border: 1px solid #E8D5A8;
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
}
.urgent-box__title {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  color: var(--brand-primary-dark);
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}
.urgent-box p { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }
.urgent-box a { color: var(--brand-primary); font-weight: 600; }

/* Preis-Sektion: "Woran Sie unser Gutachten messen koennen" */
.value-box {
  max-width: 860px;
  margin: 2.5rem auto 0;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.8rem 2rem;
}
.value-box h3 { color: var(--brand-primary); margin-bottom: 1rem; }
.value-box ul { list-style: none; margin: 0; padding: 0; }
.value-box li { position: relative; padding: 0.5rem 0 0.5rem 1.7rem; color: var(--text-secondary); font-size: 0.97rem; }
.value-box li::before { content: "\2713"; position: absolute; left: 0; top: 0.5rem; color: var(--brand-accent-text); font-weight: 700; }
.value-box li strong { color: var(--text-primary); }
.value-box li a { color: var(--brand-primary); font-weight: 600; }

/* ===== Ausgleichsanspruch-Rechner (pages/ausgleichsanspruch-tankstelle-rechner.html) ===== */
.rechner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  margin: 2rem 0 2.4rem;
}
@media (max-width: 860px) {
  .rechner-grid { grid-template-columns: 1fr; }
}

.rechner-panel {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem 1.7rem;
}

.rechner-panel h3 {
  color: var(--brand-primary);
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.rechner-privacy {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.rechner-privacy::before {
  content: "\1F512";
  font-size: 0.9rem;
  line-height: 1.3;
}

.rechner-leer {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 1rem 0;
}

.rechner-zeilen { display: grid; gap: 0.45rem; margin: 0 0 1.2rem; }
.rechner-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--border);
}
.rechner-zeile dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.rechner-zeile dt { margin: 0; }

.rechner-ergebnis {
  background: var(--brand-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 0 0 0.9rem;
}
.rechner-ergebnis .label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}
.rechner-ergebnis .wert {
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.rechner-ergebnis .zusatz { font-size: 0.8rem; opacity: 0.85; margin-top: 0.3rem; }

.rechner-kappung-hinweis {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface-1);
  border-left: 3px solid var(--brand-accent);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  margin: 0 0 1rem;
}

.rechner-sens { margin-top: 1.4rem; }
.rechner-sens h4 { font-size: 0.92rem; color: var(--text-primary); margin: 0 0 0.6rem; }
.rechner-sens-reihe {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
}
.rechner-sens-reihe .pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rechner-sens-reihe .euro { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.rechner-sens-balken {
  height: 0.85rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.rechner-sens-balken span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-accent);
  transition: width 0.25s ease;
}
.rechner-sens-reihe.ist .rechner-sens-balken span { background: var(--brand-primary); }
.rechner-sens-fazit { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.7rem; }
.rechner-sens-fazit strong { color: var(--text-primary); }

/* ===== Musterschreiben (pages/ausgleichsanspruch-handelsvertreter-muster.html) ===== */
.muster-brief {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem 2.2rem;
  margin: 1.6rem 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .muster-brief { padding: 1.3rem 1.1rem; }
}
.muster-brief p { margin: 0 0 1.05rem; }
.muster-brief p:last-child { margin-bottom: 0; }
.muster-brief .muster-datum { text-align: right; }
.muster-brief .muster-betreff { margin-top: 1.3rem; }

.muster-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.muster-actions button.btn-primary {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.muster-copy-status {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0;
  min-height: 1.2em;
}

/* ============================================================
   Übergabe-Fahrplan + Checkliste + Übergabepaket
   (pages/tankstelle-abgeben-leitfaden.html)
   ============================================================ */

.fahrplan-panel { margin: 1.2rem 0 0.6rem; }

.fahrplan-eingabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}

.fahrplan-eingabe input[type="date"] {
  font: inherit;
  font-size: 1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text-primary);
}

.fp-hinweis {
  margin: 0.6rem 0 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.fp-hinweis-warnung {
  background: #FBEAEA;
  border: 1px solid #E3B4B4;
}

.fahrplan-liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.fp-punkt {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  font-size: 0.92rem;
  line-height: 1.5;
}

.fp-punkt .fp-datum {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--brand-primary);
  white-space: nowrap;
}

.fp-punkt.fp-frist { border-left: 4px solid var(--brand-primary); }

.fp-punkt.fp-vorbei { opacity: 0.62; }
.fp-punkt.fp-vorbei .fp-datum::after { content: " ✓"; color: var(--text-muted); }

.fp-punkt.fp-naechster {
  border-color: var(--brand-primary);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--brand-primary) inset;
}

.fp-rest {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}

.fp-rest:empty { display: none; }

.fahrplan-fussnote {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.7rem;
}

@media (max-width: 560px) {
  .fp-punkt { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* --- Checkliste --- */

.checkliste-actions { margin: 0.8rem 0 1rem; }

.checkliste-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem 1.2rem;
  background: var(--surface-0);
}

.checkliste-block h3 {
  font-size: 1rem;
  margin: 1.1rem 0 0.45rem;
  color: var(--text-primary);
}

.checkliste-block h3:first-of-type { margin-top: 0.2rem; }

.checkliste-druckkopf { display: none; }

ul.checkliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

ul.checkliste li { margin: 0; }

ul.checkliste label {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
}

ul.checkliste input[type="checkbox"] {
  margin-top: 0.28rem;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--brand-primary);
}

ul.checkliste input[type="checkbox"]:checked + * { text-decoration: none; }

/* --- Übergabepaket-Kacheln --- */

.paket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
  margin: 1.1rem 0 1.4rem;
}

.paket-karte {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.paket-karte:hover {
  border-color: var(--brand-primary);
  background: var(--surface-0);
}

.paket-karte strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--brand-primary);
}

.paket-karte span {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- PDF-per-E-Mail-Formular --- */

.pp-mailbox {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 10px;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--surface-1);
  margin: 1.4rem 0;
}

.pp-mailbox h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--brand-primary);
}

.pp-mailbox > p { font-size: 0.92rem; }

#pp-form .anfrage-form__field { max-width: 420px; }

.pp-success {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: #EAF5EC;
  border: 1px solid #BBDDC2;
  font-size: 0.92rem;
}

/* --- Druck: nur die Checkliste --- */

@media print {
  /* Sichtbarkeits-Trick: alles unsichtbar, nur der Checklisten-Block
     (samt Nachfahren) wieder sichtbar — funktioniert unabhängig von der
     Verschachtelung, weil visibility (anders als display) pro Element
     zurückgeschaltet werden kann. */
  body.print-checkliste * { visibility: hidden; }
  body.print-checkliste #ck-block,
  body.print-checkliste #ck-block * { visibility: visible; }
  body.print-checkliste #ck-block {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    padding: 0;
    background: #fff;
  }
  body.print-checkliste .checkliste-druckkopf {
    display: block;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #999;
    font-size: 0.85rem;
  }
  body.print-checkliste ul.checkliste { gap: 0.15rem; }
  body.print-checkliste ul.checkliste label { font-size: 0.85rem; }
  body.print-checkliste .checkliste-block h3 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }
  body.print-checkliste ul.checkliste li { break-inside: avoid; }
  body.print-checkliste ul.checkliste input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid #333;
    border-radius: 2px;
    background: #fff;
  }
}

.anfrage-form--ohne-innenabstand { padding: 0; }

/* ===========================================================================
   E3: Landestellen — Stand-Zeile und Muster-Komponenten.
   Nur Token aus website-src/tokens.css (Tor 8); Gold als Schrift ausschliesslich
   ueber --brand-accent-text (Tor 13). Muster tragen das Wort "Muster" sichtbar
   in Ueberschrift UND Unterschrift; die Ampel benennt ihren Zustand zusaetzlich
   im Text, damit Farbe nicht das einzige Mittel ist (WCAG 1.4.1).
   =========================================================================== */
.stand-zeile {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.stand-zeile p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Vier feste Zeilen je KI-Leistung (Wo die KI arbeitet, Wo Sie freigeben,
   Datenweg, KI-Verordnung; beim Assistenten zusaetzlich Mitbestimmung). */
.leistung-zeilen {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.leistung-zeilen dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-top: 0.8rem;
}
.leistung-zeilen dt:first-child { margin-top: 0; }
.leistung-zeilen dd {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Sprungziel des Beschäftigten-Hinweises auf der KI-Seite. Die Kopfzeile ist fest und reicht
   auf schmalen Breiten bis rund 99 px (gemessen 07.09.2026 bei 375 px); der Block ist ein
   .value-box und erbt deshalb nicht die scroll-margin-top der Sektionen. Ohne eigenen
   Abstand liegt die Überschrift nach dem Sprung unter der Navigation. 7 rem lässt bei allen
   drei geprüften Breiten Luft. Gilt nur für diesen Anker, nicht global. */
#beschaeftigtenbezug {
  scroll-margin-top: 7rem;
}

/* Abgrenzung zum Gutachten im Hero der KI-Seite: einmal, direkt unter dem Einleitungstext
   und vor der ersten Handlung (Rechtskorrektur K1.2/S1, 07.09.2026). Ruhiger als der Lead,
   auf dem Navy-Grund weiterhin gut lesbar. */
.hero-abgrenzung {
  max-width: 640px;
  margin-top: -1.4rem;
  margin-bottom: 2.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--brand-accent);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* Preisplatz-Überschriften der Landestellen: semantisch H3, damit auf die H2 des
   Abschnitts keine Ebene übersprungen wird (Kundensicht 07.09.2026, B2). Die Optik
   bleibt exakt die der bisherigen H4-Zeile: Inter statt Serifenschrift, gleiche Größe,
   gleiche Laufweite, gleiche Zeilenhöhe, gleicher Abstand. */
.price-meta h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}

/* Karten des Startseiten-Abschnitts „Vier Geschäftsfelder“ (erzeugt aus FAKTEN.md). */
.feld-karte__zusatz {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: middle;
}
.feld-karte a,
.leistung-zeilen a,
.muster-box a,
.muster-dialog a {
  color: var(--brand-primary);
  font-weight: 600;
}

/* Verfasser-Block ohne Fakten-Spalte (Landestellen): zwei statt drei Spalten. */
.qualifikation--zwei { grid-template-columns: 180px 1fr; }
@media (max-width: 720px) {
  .qualifikation--zwei { grid-template-columns: 1fr; }
}

/* Figur um ein Muster: traegt die Unterschrift. */
.muster-figur {
  margin: 2rem 0 0;
}
.muster-figur img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.muster-figur figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Muster-Kasten: gerenderte Komponente mit erfundenen Werten. */
.muster-box {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem 1.7rem;
  box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), 0.08);
}
.muster-box h3 {
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
.muster-box__stempel {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent-text);
}
.muster-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.muster-tabelle th,
.muster-tabelle td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.muster-tabelle thead th {
  background: var(--surface-2);
  color: var(--brand-primary);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.muster-tabelle tbody th {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.muster-tabelle td {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.muster-ampel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.muster-ampel::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--text-muted);
}
.muster-ampel--gruen::before { background: var(--success); }
.muster-ampel--gelb::before  { background: var(--warning); }
.muster-ampel--rot::before   { background: var(--error); }
.muster-box__fazit {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

/* Muster-Ablauf: drei Bloecke einer Meldung (Meldung, Vorschlag, Freigabe). */
.muster-dialog {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem 1.7rem;
  box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), 0.08);
}
.muster-dialog h3 {
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
.muster-dialog__block {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface-1);
  border-left: 3px solid var(--brand-primary-light);
  border-radius: var(--radius-sm);
}
.muster-dialog__rolle {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.4rem;
}
.muster-dialog__block p {
  margin: 0 0 0.5rem;
  font-size: 0.94rem;
  color: var(--text-secondary);
}
.muster-dialog__block p:last-child { margin-bottom: 0; }
.muster-dialog__block ul {
  margin: 0.2rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.94rem;
  color: var(--text-secondary);
}
.muster-dialog__block li { margin-bottom: 0.25rem; }

@media (max-width: 620px) {
  .muster-box,
  .muster-dialog { padding: 1.2rem 1.1rem 1.3rem; }
  .muster-tabelle { font-size: 0.84rem; }
  .muster-tabelle th,
  .muster-tabelle td { padding: 0.5rem 0.45rem; }
}

/* ==========================================================================
   Dach-Entwurf 08.09.2026 (nur mit --startseite dach gebaut)
   Additiv. Keine Bestandsregel wird geaendert, keine neue Farbe eingefuehrt.
   ========================================================================== */

/* Kompakter Firmen-Hero: derselbe Grund wie der Bestands-Hero, nur flacher. */
.hero--dach {
  padding-top: 3.25rem;
  padding-bottom: 3rem;
}

.hero--dach h1 {
  max-width: 20ch;
  /* Keine automatische Worttrennung: im Browser wurde bei 768 und 1280 px
     sichtbar „Stati-on" getrennt. Ganze Woerter brechen um. Die HVA-Regel
     fuer .hero h1 mit hyphens: auto bleibt unveraendert. */
  hyphens: manual;
  -webkit-hyphens: manual;
}

.hero--dach .hero-lead {
  max-width: 58ch;
}

/* Fuenf gleichwertige Einstiege. Die letzte Reihe bleibt mittig. */
.angebot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  align-items: stretch;
}

.angebot-karte {
  display: flex;
  flex: 0 0 calc((100% - 2.5rem) / 3);
  min-width: 0;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(var(--brand-primary-rgb), 0.08);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

@media (max-width: 52rem) {
  .angebot-karte { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 35.25rem) {
  .angebot-karte { flex-basis: 100%; }
}

.angebot-karte:hover,
.angebot-karte:focus-visible {
  box-shadow: 0 8px 20px rgba(var(--brand-primary-rgb), 0.12);
  transform: translateY(-2px);
}

/* Ziffer statt Paragraphenzeichen: dieselbe Figur wie .step-num im Bestand. */
.angebot-karte__num {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.angebot-karte__titel {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--brand-primary);
}

.angebot-karte__stand {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.angebot-karte__satz {
  margin: 0;
  flex: 1 1 auto;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.angebot-karte__weiter {
  margin-top: 0.2rem;
  color: var(--brand-accent-text);
  font-weight: 600;
  font-size: 0.93rem;
}

.angebot-karte__weiter::after {
  content: " \2192";
}

/* Kurzer Personenabschnitt: Bild links, Text rechts, ohne Faktenraster. */
.dach-person {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.dach-person__bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.dach-person__text h2 {
  margin-top: 0.35rem;
}

/* Kontakt: direkter Weg und Weg je Angebot nebeneinander. */
.dach-kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.dach-kontakt__direkt,
.dach-kontakt__wege {
  padding: 1.5rem 1.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.dach-kontakt__direkt h3,
.dach-kontakt__wege h3 {
  margin-top: 0;
  color: var(--brand-primary);
}

.dach-kontakt__zeile {
  margin: 0.35rem 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.dach-kontakt__hinweis {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dach-kontakt__liste {
  margin: 0;
  padding-left: 1.1rem;
}

.dach-kontakt__liste li {
  margin: 0.4rem 0;
}

@media (max-width: 720px) {
  .dach-person {
    grid-template-columns: minmax(0, 1fr);
  }

  .dach-person__bild {
    max-width: 13rem;
  }
}

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

  .angebot-karte:hover,
  .angebot-karte:focus-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Gemeinsame Variante der fuenf Angebots-/Startseiten im Dach-Entwurf.
   Greift nur ueber .variante-dach am <main>, das der Bau nur mit
   --startseite dach setzt. Der HVA-Stand bleibt unberuehrt.
   -------------------------------------------------------------------------- */

/* Kompakte Koepfe: alle fuenf Seiten steigen gleich hoch ein. */
.variante-dach .hero {
  padding-top: 3.25rem;
  padding-bottom: 3rem;
}

.variante-dach .hero h1 {
  max-width: 24ch;
}


.variante-dach .hero-lead {
  max-width: 62ch;
}

/* Gleiche Sektionsdichte auf allen fuenf Seiten. */
.variante-dach section {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.variante-dach .section-head {
  margin-bottom: 1.75rem;
}

/* Fachliche Sprungnavigation: gleiche Figur auf jeder der fuenf Seiten. */
.sprungnav {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm);
}

.sprungnav__titel {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sprungnav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sprungnav__liste a {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.93rem;
}

/* Sichtbare Brotkrume der Fachseite im Dach-Entwurf. */
.variante-dach .breadcrumb-nav {
  margin-bottom: 1.25rem;
}

/* Anfrageweg am Ende jeder Angebotsseite, einheitlich. */
.angebot-anfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
}

.angebot-anfrage__text {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--text-secondary);
}

/* Alte Wurzelanker im Dach-Entwurf: unsichtbar, bis die Adresse das Fragment
   traegt. Externe Lesezeichen wie /#preise finden so ein echtes Ziel und
   bekommen einen kurzen Hinweis auf die Fachstelle -- ohne JavaScript und
   ohne dauerhaft sichtbaren technischen Abschnitt. */
.altanker {
  display: none;
}

.altanker:target {
  display: block;
  scroll-margin-top: 7rem;
  padding: 1.25rem 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.altanker__text {
  margin: 0;
  color: var(--text-secondary);
}

/* Der Alias fuer #felder haengt am Angebotsabschnitt und ist selbst leer. */
.altanker-alias {
  display: block;
  height: 0;
  scroll-margin-top: 7rem;
}

/* ==========================================================================
   Internetauftritte: Gestaltungsbeispiele, Bereiche, Coupon (08.09.2026)
   Additiv und auf diese Seite begrenzt. Keine Bestandsregel wird geaendert,
   keine neue Farbe eingefuehrt, variables.css und rahmen.css bleiben ausser
   Reichweite.
   ========================================================================== */

/* Bildauswahl ohne JavaScript: drei Radios steuern per :checked, welche Figur
   und welche Erklaerung sichtbar ist. Tastaturbedienung und der ausgewaehlte
   Zustand kommen dabei vom Browser selbst. */
.internet-galerie {
  margin: 0;
  padding: 0;
  border: 0;
}

.internet-galerie__legende {
  padding: 0;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Die Radios bleiben bedienbar und fokussierbar, sind aber optisch durch die
   Label ersetzt. Kein display:none -- sonst waeren sie fuer die Tastatur weg. */
.internet-galerie__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Drei gleiche Spalten: die Motive gehoeren zusammen und sollen am Handy
   nicht 2+1 umbrechen -- sonst rutscht das Bild unter die Falzkante. */
.internet-galerie__knoepfe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.internet-galerie__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 0.5rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  /* Nur transform und opacity animieren -- keine Farb- oder Randanimation. */
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}

/* Hover nur, wo es einen echten Zeiger gibt. Auf Touch bleibt der Zustand
   sonst nach dem Tippen haengen.
   Kein Deckkraft-Wechsel: 0.88 blendet den ausgewaehlten Knopf gegen das weisse
   Papier auf und senkt den tatsaechlichen Kontrast der Gold-auf-Navy-
   Beschriftung von 4,6879:1 auf 3,6875:1 (Browserbefund 08.09.2026). Die
   Rueckmeldung traegt der Rahmen; er wird nicht animiert. */
@media (hover: hover) and (pointer: fine) {
  .internet-galerie__knopf:hover {
    border-color: var(--brand-primary);
  }
}

/* Druckzustand: kurz und nur ueber transform. */
.internet-galerie__knopf:active {
  transform: scale(0.97);
}

/* Ausgewaehlter Zustand: Farbe UND Gewicht, nicht nur Farbe. */
#beispiel-aussen:checked ~ .internet-galerie__knoepfe [for="beispiel-aussen"],
#beispiel-backshop:checked ~ .internet-galerie__knoepfe [for="beispiel-backshop"],
#beispiel-waschpark:checked ~ .internet-galerie__knoepfe [for="beispiel-waschpark"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-accent-on-dark);
}

/* Sichtbarer Fokus wandert vom versteckten Radio auf sein Label. */
.internet-galerie__wahl:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-aussen"],
.internet-galerie__wahl:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-backshop"],
.internet-galerie__wahl:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-waschpark"] {
  /* Navy statt Gold: Gold auf Weiss erreicht die 3:1 nicht. */
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

#beispiel-aussen:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-backshop"],
#beispiel-aussen:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-waschpark"],
#beispiel-backshop:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-aussen"],
#beispiel-backshop:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-waschpark"],
#beispiel-waschpark:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-aussen"],
#beispiel-waschpark:focus-visible ~ .internet-galerie__knoepfe [for="beispiel-backshop"] {
  outline: none;
}

.internet-galerie__figur,
.internet-galerie__erklaerung {
  display: none;
}

#beispiel-aussen:checked ~ [data-beispiel="aussen"],
#beispiel-backshop:checked ~ [data-beispiel="backshop"],
#beispiel-waschpark:checked ~ [data-beispiel="waschpark"] {
  display: block;
}

.internet-galerie__figur {
  margin: 0;
}

.internet-galerie__figur img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.internet-galerie__unterschrift {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Eigenstaendige Aktion, kein Fliesstextlink: volle Tipphoehe. */
.internet-galerie__gross {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  font-weight: 600;
}

.internet-galerie__erklaerung {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface-2);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm);
}

.internet-galerie__erklaerung h3 {
  margin-top: 0;
  color: var(--brand-primary);
}

.internet-galerie__erklaerung p {
  margin-bottom: 0;
}

/* Vier Bereiche als gleichmaessiges Raster: vier in einer Reihe, bei mittlerer
   Breite 2x2, am Handy einspaltig. Bewusst NICHT .legal-grid mit auto-fit --
   das ergab bei 1280 px drei plus eins. Und bewusst nicht .legal-card: deren
   ::before setzt ein Paragraphenzeichen, das hier sachfremd waere. */
.internet-bereiche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.internet-bereich {
  padding: 1.8rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--brand-primary);
}

.internet-bereich h3 {
  margin-top: 0;
  color: var(--brand-primary);
}

@media (max-width: 1080px) {
  .internet-bereiche { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .internet-bereiche { grid-template-columns: 1fr; }
}

/* Der Coupon-Ablauf hat drei Schritte; die Bestandsklasse .steps stellt vier
   Spalten und liesse sonst eine leere Spalte stehen. */
.internet-schritte {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .internet-schritte { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .internet-schritte { grid-template-columns: 1fr; }
}

/* Werbliche Beispiele sind als solche gekennzeichnet. */
.internet-bereich__beispiel {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.internet-bereich__marke {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.internet-hinweis {
  margin-top: 1.5rem;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Coupon und QR nebeneinander, am Handy untereinander. */
.internet-coupon {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem 1.4rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
}

.internet-coupon__text h3 {
  margin-top: 0;
  color: var(--brand-primary);
}

.internet-coupon__qr {
  text-align: center;
}

.internet-coupon__qr img {
  width: 180px;
  height: 180px;
  display: block;
  margin: 0 auto;
}

.internet-coupon__qrtext {
  margin-top: 0.75rem;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .internet-coupon {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .internet-galerie__knopf {
    transition: none;
  }

  .internet-galerie__knopf:active {
    transform: none;
  }
}

/* =================================================================
   SOFTWARESEITE /stationssoftware.html -- Bauschritt B, 08.09.2026
   Rein additiv und seitenbezogen. Zwei Anker:
   1. Eigene Bausteine tragen die Vorsilbe .software- und sind von
      keiner anderen Seite erreichbar.
   2. Geerbte Bedienelemente: der Rueckrufblock steht als Geschwister
      hinter dem Seiteninhalt im selben <main>, deshalb
      `.software-seite ~ #rueckruf`. Kopf, Fuss, Brotkrume und
      Kontaktbalken liegen ausserhalb von <main>; sie erreicht nur
      `body:has(.software-seite)`. Ohne :has() bleibt dort der Bestand
      stehen -- es geht nichts verloren.
   Bewegungswerte: website-src/INTERAKTIONS-KARTE.md.
   ================================================================= */

/* --- Hero: Text und Bild ----------------------------------------
   .hero .container ist im Bestand auf 820 px begrenzt. Das passt zu
   einer einspaltigen Fachseite, nicht zu zwei Spalten: bei 1280 px
   blieben fuer die Textspalte 220 px, die H1 lief siebenzeilig und
   431 px hoch, Bild und Kontaktweg rutschten weit nach unten
   (Codex-Browserbefund 08.09.2026). Diese Seite nimmt deshalb die
   normale Containerbreite. */
.hero .container.software-hero {
  max-width: var(--max-width);
}

.software-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .software-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  }
}

.software-hero__text { min-width: 0; }

.software-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

.software-hero__bild { margin: 0; min-width: 0; }

.software-hero__bild img,
.software-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.software-bild { margin: 0; min-width: 0; }

.software-bild__unterschrift {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Im Hero steht die Unterschrift auf Navy. */
.software-hero .software-bild__unterschrift {
  color: rgba(255, 255, 255, 0.9);
}

/* Hero-Aktionen: der Hauptknopf traegt Fuellung, der zweite bleibt leise. */
.software-aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  text-decoration: none;
}

.software-aktion--leise {
  color: #fff;
  border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.7);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.2rem 0;
}

/* --- Wofuer: drei gleich breite Karten, kein Paragraphenzeichen -- */
.software-nutzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 60rem) {
  .software-nutzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.software-nutzen__karte {
  padding: 1.8rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
}

.software-nutzen__karte h3 { margin-top: 0; }
.software-nutzen__karte p { font-size: 0.93rem; margin-bottom: 0; }

/* Die drei Karten beschreiben den angestrebten Nutzen. Nur das Anlegen
   und Verwalten von Aufgaben ist heute gebaut; das sagt der Abschnitt
   im Vorspann und jede Karte fuer sich. */
.software-nutzen__marke {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--brand-accent-rgb), 0.18);
  color: var(--brand-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Ruhige Statusnotiz statt Warnkasten: derselbe Inhalt, ohne
   Haftungston und ohne Wiederholung der Ausschlussliste darueber. */
.software-status {
  margin: 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--brand-primary);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* --- Ablauf: eine Demonstration, drei Schritte, ohne JavaScript --- */
.software-ablauf {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.software-ablauf__legende {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

/* Optisch ersetzt, aber nicht entfernt: display:none nimmt der Tastatur
   die Auswahl. Das echte Tippziel ist das Label. */
.software-ablauf__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.software-ablauf__knoepfe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 1.75rem;
}

@media (min-width: 35rem) {
  .software-ablauf__knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.software-ablauf__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 45px;
  padding: 0.6rem 0.7rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
}

.software-ablauf__ziffer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Ausgewaehlter Zustand: Flaeche UND Gewicht, nicht nur Farbe. */
#ablauf-sehen:checked ~ .software-ablauf__knoepfe [for="ablauf-sehen"],
#ablauf-dokumentieren:checked ~ .software-ablauf__knoepfe [for="ablauf-dokumentieren"],
#ablauf-uebergeben:checked ~ .software-ablauf__knoepfe [for="ablauf-uebergeben"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  font-weight: 700;
}

#ablauf-sehen:checked ~ .software-ablauf__knoepfe [for="ablauf-sehen"] .software-ablauf__ziffer,
#ablauf-dokumentieren:checked ~ .software-ablauf__knoepfe [for="ablauf-dokumentieren"] .software-ablauf__ziffer,
#ablauf-uebergeben:checked ~ .software-ablauf__knoepfe [for="ablauf-uebergeben"] .software-ablauf__ziffer {
  background: var(--brand-accent);
  color: var(--brand-primary);
}

/* Der Fokus des versteckten Radios wird am zugehoerigen Label sichtbar. */
.software-ablauf__wahl:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-sehen"],
.software-ablauf__wahl:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-dokumentieren"],
.software-ablauf__wahl:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-uebergeben"] {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

#ablauf-sehen:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-dokumentieren"],
#ablauf-sehen:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-uebergeben"],
#ablauf-dokumentieren:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-sehen"],
#ablauf-dokumentieren:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-uebergeben"],
#ablauf-uebergeben:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-sehen"],
#ablauf-uebergeben:focus-visible ~ .software-ablauf__knoepfe [for="ablauf-dokumentieren"] {
  outline: none;
}

.software-ablauf__tafel { display: none; }

#ablauf-sehen:checked ~ [data-schritt="sehen"],
#ablauf-dokumentieren:checked ~ [data-schritt="dokumentieren"],
#ablauf-uebergeben:checked ~ [data-schritt="uebergeben"] {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 62rem) {
  #ablauf-sehen:checked ~ [data-schritt="sehen"],
  #ablauf-dokumentieren:checked ~ [data-schritt="dokumentieren"],
  #ablauf-uebergeben:checked ~ [data-schritt="uebergeben"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  }
}

.software-ablauf__erklaerung { min-width: 0; }
.software-ablauf__erklaerung h3 { margin: 0.4rem 0 0.8rem; }
.software-ablauf__erklaerung p { font-size: 0.98rem; }
.software-ablauf__medium { min-width: 0; }

.software-ablauf__marke {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.software-ablauf__marke--teils {
  background: rgba(var(--brand-primary-rgb), 0.09);
  color: var(--brand-primary);
}

/* Navy statt Goldtext: --brand-accent-text haelt 4,5:1 auf weissem Grund,
   auf der goldgetoenten Flaeche im .alt-Abschnitt sinkt es darunter.
   Die Flaeche unterscheidet die Marke, der Text sagt es zusaetzlich. */
.software-ablauf__marke--ziel {
  background: rgba(var(--brand-accent-rgb), 0.18);
  color: var(--brand-primary);
}

.software-ablauf__beispiel {
  padding: 0.9rem 1.1rem;
  background: var(--surface-2);
  border-left: 3px solid var(--brand-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.software-ablauf__grenze {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Beispiel-Aufgabenliste als echtes HTML, ohne Bedienelemente. Sie ist
   ein Gestaltungsbeispiel, keine fertige Produktansicht -- das steht in
   der Kopfzeile der Liste und in der Bildunterschrift darunter. */
.software-liste-rahmen { margin: 0; min-width: 0; }

.software-liste {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.software-liste__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--brand-primary);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.software-liste__marke {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--brand-accent);
  color: var(--brand-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.software-liste__zeilen {
  list-style: none;
  margin: 0;
  padding: 0.4rem 1.1rem;
}

.software-liste__zeilen li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.software-liste__zeilen li:first-child { border-top: 0; }

.software-liste__takt {
  flex: none;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.software-liste-rahmen .software-bild__unterschrift {
  margin-top: 0.7rem;
}

/* --- Stand: drei gleich breite Stufen ---------------------------- */
.software-stufen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 60rem) {
  .software-stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.software-stufe {
  padding: 1.6rem 1.8rem;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.software-stufe ul { margin: 0; padding-left: 1.1rem; }
.software-stufe li { font-size: 0.93rem; margin-bottom: 0.5rem; }

.software-stufe__marke {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.software-stufe--steht .software-stufe__marke {
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
}

.software-stufe--bau .software-stufe__marke {
  background: rgba(var(--brand-primary-rgb), 0.09);
  color: var(--brand-primary);
}

.software-stufe--ziel .software-stufe__marke {
  background: rgba(var(--brand-accent-rgb), 0.18);
  color: var(--brand-primary);
}

.software-stufe__hinweis {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* --- Geerbte Bedienelemente: Rueckrufblock dieser Seite ----------
   45 statt 44 px: Der Browser rundet Kanten auf ganze Geraetepunkte.
   Bei 90 % Zoom (Geraeteverhaeltnis 1,8) misst eine 44-px-Flaeche
   43,993 px und faellt in jeder Messung als Verstoss auf. Ein Pixel
   Puffer haelt die Hausregel auf jedem Zoomstand ein. */
.software-seite ~ #rueckruf .anfrage-form__input {
  min-height: 45px;
  /* Der Bestandsrand #DCE5EE erreicht auf Weiss rund 1,3:1. Bedienelemente
     brauchen 3:1. --text-muted ist der dunkelste vorhandene Nebenton und
     liegt bei rund 5:1. Nur die Kontur, kein anderes Formularverhalten. */
  border-color: var(--text-muted);
}

/* Eigener Druckzustand statt Browser-Blitz, keine Tipp-Verzoegerung.
   Der Ablauf des Formulars bleibt unberuehrt. */
.software-seite ~ #rueckruf .anfrage-form__input,
.software-seite ~ #rueckruf .anfrage-form__check input[type="checkbox"],
.software-seite ~ #rueckruf .rueckruf-form__submit {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.software-seite ~ #rueckruf .rueckruf-form__submit {
  min-height: 45px;
}

/* Das Kontrollkaestchen selbst bleibt klein; das umschliessende Label
   ist die Trefferflaeche und wird auf 45 px gebracht. */
.software-seite ~ #rueckruf .anfrage-form__check {
  min-height: 45px;
}

.software-seite ~ #rueckruf .anfrage-form__check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
}

/* Telefon und E-Mail stehen in einer Textzeile und brechen unter 400 px
   untereinander. Der senkrechte Abstand haelt die beiden Flaechen dann
   auseinander (gemessen bei 375 px: vorher 0 px). */
.software-seite ~ #rueckruf .rueckruf-card__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  margin-inline: 0.2rem;
  margin-block: 0.3rem;
}

/* --- Geerbte Bedienelemente ausserhalb von <main> ---------------- */
body:has(.software-seite) .skip-link,
body:has(.software-seite) .breadcrumb-nav a,
body:has(.software-seite) .footer-links a,
body:has(.software-seite) .footer-meta-links a {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  /* Kurze Beschriftungen wie „Preise", „AGB" und „AVV" blieben sonst
     unter 44 px breit. Die Fussliste ist linksbuendig; die Flaeche
     waechst nach rechts und veraendert das Bild nicht. */
  min-width: 45px;
}

/* „AGB" und „AVV" sind nur rund 28 px breit. Die Trefferflaeche waechst
   auf 45 px, der Zeilenabstand waechst mit, damit zwischen zwei Zielen
   mehr als 8 px bleiben. */
body:has(.software-seite) .footer-meta-links {
  column-gap: 1.75rem;
}

body:has(.software-seite) .footer-meta-links a {
  min-width: 45px;
  justify-content: center;
}

@media (min-width: 1100.02px) {
  body:has(.software-seite) .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 45px;
  }

  /* Bei 1280 px fuellen Markenzeile und Navigation die Kopfzeile exakt
     aus; zwischen Wortmarke und erstem Ziel blieben 0 px. Der Abstand
     der Navigationsziele sinkt hier von 1,5 auf 1,25 rem. Die frei
     werdende Breite verteilt space-between vor das erste Ziel; die
     Wortmarke behaelt ihre Breite und bricht nicht um. */
  body:has(.software-seite) .nav-links {
    column-gap: 1.25rem;
  }

  /* Die Markenzeile nimmt jede frei werdende Breite auf, weil ihre
     Unterzeile umbricht. Ohne festen Abstand bleibt die Luecke deshalb
     0 px. Gemessen bei 1280 px: 16 px Luecke, Unterzeile weiter
     zweizeilig, Kopfzeilenhoehe unveraendert 97,8 px, kein Ueberlauf. */
  body:has(.software-seite) .wordmark-link {
    margin-right: 1rem;
  }

  /* Oberhalb der Burger-Schwelle ist der Menueschalter ausgeblendet. Sein
     verstecktes Kontrollkaestchen blieb trotzdem in der Tab-Reihenfolge und
     nahm den Fokus ohne sichtbare Wirkung auf. display:none nimmt es dort
     heraus; die Geschwister-Regeln der Vorlage bleiben unberuehrt. */
  body:has(.software-seite) .nav-toggle {
    display: none;
  }
}

/* Im geoeffneten Menue standen die Zeilen ohne Abstand aneinander. Neun
   Pixel zwischen den Zielen, damit die Acht auch nach der Rundung auf
   Geraetepunkte sicher gehalten wird. Trennlinie bleibt. */
@media (max-width: 1100px) {
  body:has(.software-seite) .nav-toggle ~ .nav-links a + a {
    margin-top: 9px;
  }
}

/* =================================================================
   ZUSTANDSBLOCK der Softwareseite -- eine Kette, feste Reihenfolge:
   1. Normalzustand  2. Hover nur mit feinem Zeiger  3. Druck
   4. Tastatur ohne Bewegung  5. reduzierte Bewegung.

   Warum in dieser Reihenfolge und mit diesen Selektoren: Bei gleicher
   Spezifitaet gewinnt die spaetere Regel. In der Fassung C stand der
   Druckblock VOR dem Hover-Block, deshalb schlug beim Druecken der
   Hover mit `translateY(-1px)` die Druckskalierung -- am Kopfzeilen-
   knopf und am Absendeknopf. Codex hat das am ruhenden Mauszeiger
   gemessen: Der Auswahlknopf erreichte `matrix(0.97, 0, 0, 0.97, 0, 0)`,
   der Kopfzeilenknopf blieb in 168 Active-Proben unskaliert bei
   `matrix(1, 0, 0, 1, 0, -1)`.

   Zwei Konsequenzen:
   - Der Hover bewegt auf dieser Nutzflaeche gar nichts mehr. Er wechselt
     nur Farbe und Schatten. Damit gibt es keinen zweiten Anwaerter auf
     `transform`, und bei reduzierter Bewegung bleibt auch keine
     Verschiebung stehen (der globale 0,01-ms-Satz nimmt nur die Dauer).
   - Druck, Tastaturausnahme und reduzierte Bewegung tragen je Element
     mindestens die Spezifitaet ihrer Hover-Regel -- einschliesslich der
     Hero-Klassen (`.hero .software-aktion.btn-primary`) und der ID
     `#rueckruf` -- und stehen dahinter.
   ================================================================= */

/* --- 1. Normalzustand -------------------------------------------- */
.software-aktion,
.software-ablauf__knopf,
body:has(.software-seite) .skip-link,
body:has(.software-seite) .wordmark-link,
body:has(.software-seite) .nav-burger,
body:has(.software-seite) .breadcrumb-nav a,
body:has(.software-seite) .footer-links a,
body:has(.software-seite) .footer-meta-links a,
body:has(.software-seite) .kontakt-mobil a,
.software-seite ~ #rueckruf .rueckruf-card__alt a,
.software-seite ~ #rueckruf .anfrage-form__check {
  transition: transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Elemente mit vorhandenem Uebergang behalten ihn; die Zeit sinkt auf
   das Budget der Karte (unter 300 ms). */
body:has(.software-seite) .nav-links a {
  transition: color 150ms ease, transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body:has(.software-seite) a.btn-cta {
  transition: transform 120ms ease-out, background 150ms ease,
              color 150ms ease, box-shadow 150ms ease;
}

.software-seite ~ #rueckruf .btn-primary {
  transition: background 150ms ease, transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Geerbte Zeigerzustaende gelten hier zuerst nicht -- weder Farbe noch
   Bewegung. Ein grober Zeiger mit Hover-Faehigkeit bekommt damit gar
   keinen Effekt. */
body:has(.software-seite) .nav-links a:hover { color: var(--text-secondary); }
body:has(.software-seite) .breadcrumb-nav a:hover {
  color: var(--text-secondary);
  text-decoration: none;
}
body:has(.software-seite) .footer-links a:hover,
body:has(.software-seite) .footer-meta-links a:hover {
  color: rgba(var(--surface-0-rgb), 0.8);
  text-decoration: none;
}
body:has(.software-seite) a.btn-cta:hover {
  transform: none;
  background: var(--brand-primary);
  color: var(--brand-accent-on-dark);
  box-shadow: 0 4px 14px -4px rgba(var(--brand-primary-rgb), 0.35);
}
body:has(.software-seite) a.btn-cta:hover::after {
  transform: none;
  color: var(--brand-accent-on-dark);
}
.software-seite ~ #rueckruf .btn-primary:hover {
  transform: none;
  background: var(--brand-primary);
}
.software-seite ~ #rueckruf .rueckruf-card__alt a:hover {
  text-decoration: none;
}
/* Der Hero-Knopf erbt zwei Hover-Regeln (.btn-primary und
   .hero .btn-primary). Beide gelten hier zuerst nicht. */
.hero .software-aktion.btn-primary:hover {
  background: var(--brand-accent);
  color: var(--brand-primary-dark);
  transform: none;
}

/* --- 2. Hover nur mit feinem Zeiger: Farbe und Schatten ----------
   Keine Verschiebung. Auf einer Nutzflaeche traegt der Farbwechsel die
   Rueckmeldung; die Bewegung gehoert dem Druck. */
@media (hover: hover) and (pointer: fine) {
  .software-ablauf__knopf:hover { border-color: var(--brand-primary); }
  .software-aktion--leise:hover { border-bottom-color: var(--brand-accent); }
  body:has(.software-seite) .nav-links a:hover { color: var(--brand-primary); }
  body:has(.software-seite) .breadcrumb-nav a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
  }
  body:has(.software-seite) .footer-links a:hover,
  body:has(.software-seite) .footer-meta-links a:hover {
    color: var(--surface-0);
    text-decoration: underline;
  }
  body:has(.software-seite) a.btn-cta:hover {
    background: var(--brand-primary-dark);
    color: var(--brand-accent-light-on-dark);
    box-shadow: 0 8px 22px -6px rgba(var(--brand-primary-rgb), 0.45);
  }
  body:has(.software-seite) a.btn-cta:hover::after {
    color: var(--brand-accent-light-on-dark);
  }
  .software-seite ~ #rueckruf .btn-primary:hover {
    background: var(--brand-primary-dark);
  }
  .software-seite ~ #rueckruf .rueckruf-card__alt a:hover {
    text-decoration: underline;
  }
  .hero .software-aktion.btn-primary:hover {
    background: var(--brand-accent-light);
  }
}

/* --- 3. Druck: die einzige Bewegung der Seite --------------------- */
.software-aktion:active,
.software-ablauf__knopf:active,
body:has(.software-seite) .skip-link:active,
body:has(.software-seite) .wordmark-link:active,
body:has(.software-seite) .nav-links a:active,
body:has(.software-seite) a.btn-cta:active,
body:has(.software-seite) .nav-burger:active,
body:has(.software-seite) .breadcrumb-nav a:active,
body:has(.software-seite) .footer-links a:active,
body:has(.software-seite) .footer-meta-links a:active,
body:has(.software-seite) .kontakt-mobil a:active,
.software-seite ~ #rueckruf .btn-primary:active,
.software-seite ~ #rueckruf .rueckruf-card__alt a:active,
.software-seite ~ #rueckruf .anfrage-form__check:active,
/* gleiche Spezifitaet wie die Hero-Hover-Regel, aber dahinter */
.hero .software-aktion.btn-primary:active {
  transform: scale(0.97);
}

/* Der Pfeil im Kopfzeilenknopf gehoert zum Knopf und darf beim Druecken
   nicht getrennt stehen bleiben. */
body:has(.software-seite) a.btn-cta:active::after {
  transform: none;
}

/* --- 4. Tastatur: kein Verschieben, kein Skalieren ----------------
   Enter und Leertaste loesen ebenfalls :active aus. Jede Regel liegt
   eine Pseudoklasse ueber ihrer Druckregel und gewinnt damit auch
   gegen die Hero-Klassen und gegen #rueckruf. */
body:has(.software-seite) a:focus-visible:active,
body:has(.software-seite) label:focus-visible:active,
body:has(.software-seite) button:focus-visible:active,
body:has(.software-seite) input:focus-visible:active,
body:has(.software-seite) a.btn-cta:focus-visible:active,
.hero .software-aktion.btn-primary:focus-visible:active,
.software-seite ~ #rueckruf .btn-primary:focus-visible:active,
.software-seite ~ #rueckruf .rueckruf-card__alt a:focus-visible:active,
.software-seite ~ #rueckruf .anfrage-form__check:focus-visible:active {
  transform: none;
}

/* --- Fokus: sichtbar auf jedem Bedienelement dieser Seite --------- */
body:has(.software-seite) .breadcrumb-nav a:focus-visible,
body:has(.software-seite) .nav-links a:focus-visible,
body:has(.software-seite) .wordmark-link:focus-visible,
.software-seite ~ #rueckruf .rueckruf-card__alt a:focus-visible,
.software-seite ~ #rueckruf .btn-primary:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Auf Navy traegt Gold den Ring (Gold auf Navy 4,7:1). */
.software-hero .software-aktion:focus-visible,
body:has(.software-seite) footer a:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- 5. Reduzierte Bewegung: weder Verschiebung noch Skalierung ---
   Steht am Ende der Kette und traegt je Element mindestens die
   Spezifitaet der Druck- und Hover-Regeln. */
@media (prefers-reduced-motion: reduce) {
  .software-aktion,
  .software-ablauf__knopf,
  body:has(.software-seite) .skip-link,
  body:has(.software-seite) .wordmark-link,
  body:has(.software-seite) .nav-links a,
  body:has(.software-seite) a.btn-cta,
  body:has(.software-seite) .nav-burger,
  body:has(.software-seite) .breadcrumb-nav a,
  body:has(.software-seite) .footer-links a,
  body:has(.software-seite) .footer-meta-links a,
  body:has(.software-seite) .kontakt-mobil a,
  .software-seite ~ #rueckruf .btn-primary,
  .software-seite ~ #rueckruf .rueckruf-card__alt a,
  .software-seite ~ #rueckruf .anfrage-form__check {
    transition: none;
  }

  .software-aktion:active,
  .software-aktion:hover,
  .software-ablauf__knopf:active,
  body:has(.software-seite) .skip-link:active,
  body:has(.software-seite) .wordmark-link:active,
  body:has(.software-seite) .nav-links a:active,
  body:has(.software-seite) a.btn-cta:active,
  body:has(.software-seite) a.btn-cta:hover,
  body:has(.software-seite) a.btn-cta:hover::after,
  body:has(.software-seite) a.btn-cta:active::after,
  body:has(.software-seite) .nav-burger:active,
  body:has(.software-seite) .breadcrumb-nav a:active,
  body:has(.software-seite) .footer-links a:active,
  body:has(.software-seite) .footer-meta-links a:active,
  body:has(.software-seite) .kontakt-mobil a:active,
  .software-seite ~ #rueckruf .btn-primary:active,
  .software-seite ~ #rueckruf .btn-primary:hover,
  .software-seite ~ #rueckruf .rueckruf-card__alt a:active,
  .software-seite ~ #rueckruf .anfrage-form__check:active,
  .hero .software-aktion.btn-primary:active,
  .hero .software-aktion.btn-primary:hover {
    transform: none;
  }
}

/* ENDE SOFTWARESEITE /stationssoftware.html */

/* =================================================================
   STANDBILD IM HERO DER DACH-STARTSEITE -- 08.09.2026
   Rein additiv und nur fuer den oberen Hero von / im Dach-Entwurf.
   Kein Bedienelement, keine Animation, kein Uebergang: das Bild ist
   eine statische figure ohne Verweis. Deshalb auch keine Regeln fuer
   Hover, Druck, Fokus oder reduzierte Bewegung.
   ================================================================= */

/* .hero .container ist im Bestand auf 820 px begrenzt. Fuer zwei Spalten
   bliebe die Textspalte zu schmal; nur dieser Hero nimmt die normale
   Containerbreite. Gleiche Loesung wie auf der Softwareseite. */
.hero .container.dach-hero {
  max-width: var(--max-width);
}

.dach-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .dach-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  }
}

.dach-hero__text { min-width: 0; }

/* Massvoll kleiner als die Hero-Standardgroesse, weil die Ueberschrift
   jetzt in einer Spalte steht. Wortlaut und Schriftfamilie unveraendert;
   die Begrenzung auf 20 ch entfaellt hier, die Spaltenbreite fuehrt. */
.hero--dach .dach-hero__text h1 {
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  max-width: none;
}

.hero--dach .dach-hero__text .hero-lead {
  margin-bottom: 0;
}

.dach-hero__bild {
  margin: 0;
  min-width: 0;
}

.dach-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.dach-hero__hinweis {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* ENDE STANDBILD DACH-STARTSEITE */

/* =================================================================
   GUTACHTEN-HERO /stammkundenanalyse.html -- 08.09.2026
   Rein additiv und nur fuer den Einstieg der Gutachtenseite (Quelle
   website-src/inhalte/index.md). Statische, unverlinkte figure: kein
   Bedienelement, keine Animation, kein Uebergang -- deshalb auch keine
   Regeln fuer Hover, Druck, Fokus oder reduzierte Bewegung.
   Aufbau: Text und Bild nebeneinander, die Aktionen bleiben oben links
   neben dem Bild, die drei Faktenanker laufen darunter ueber die volle
   Breite. Am Handy zuerst Text, dann die Kontaktaktion, danach das Bild.
   ================================================================= */

/* .hero .container ist im Bestand auf 820 px begrenzt; fuer zwei Spalten
   bliebe die Textspalte zu schmal. Nur dieser Hero nimmt die normale
   Containerbreite -- dieselbe Loesung wie auf Software- und Dachseite. */
.hero .container.gutachten-hero {
  max-width: var(--max-width);
}

.gutachten-hero {
  display: grid;
  gap: 2rem 2.5rem;
}

/* Am Handy steht die Kontaktaktion vor dem Bild, damit sie nicht hinter
   eine halbe Bildschirmhoehe rutscht. */
.gutachten-hero__text { order: 1; min-width: 0; }
.gutachten-hero__aktionen { order: 2; min-width: 0; }
.gutachten-hero__bild { order: 3; margin: 0; min-width: 0; }
.gutachten-hero .hero-anchors { order: 4; }

@media (min-width: 62rem) {
  .gutachten-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    grid-template-areas:
      "text bild"
      "aktionen bild"
      "anker anker";
    align-items: start;
  }

  .gutachten-hero__text { grid-area: text; }
  .gutachten-hero__aktionen { grid-area: aktionen; }
  .gutachten-hero__bild { grid-area: bild; align-self: center; }
  .gutachten-hero .hero-anchors { grid-area: anker; }
}

/* Massvoll kleiner als die Hero-Standardgroesse, weil die Ueberschrift
   jetzt in einer Spalte steht. Wortlaut und Schriftfamilie unveraendert. */
.hero .gutachten-hero__text h1 {
  font-size: clamp(2rem, 3vw, 2.6rem);
}

/* Der Abstand unter den Aktionen steckt im Bestand in .hero-cta-row; im
   Raster traegt ihn die Zeilenluecke. */
.gutachten-hero__aktionen .hero-cta-row {
  margin-bottom: 0;
}

.gutachten-hero .hero-anchors {
  max-width: none;
}

.gutachten-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.gutachten-hero__hinweis {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* ENDE GUTACHTEN-HERO /stammkundenanalyse.html */

/* =================================================================
   INTERNET-HERO /internetauftritte.html -- 09.09.2026
   Rein additiv und nur fuer den Einstieg der Internetauftritte-Seite
   (Quelle website-src/inhalte/internetauftritte.md). Begrenztes
   Schaufenster: die einmalige Bewegung gilt AUSSCHLIESSLICH hier.

   Aufbau der Buehne: ruhiges Navy, darauf unten der vollstaendig
   proportional sichtbare Hintergrund mit den Kunden, darueber der
   Browser als eigenes rechteckiges Bild. Menschen und Hintergrund
   bewegen sich nicht. Alle Bewegung laeuft ueber transform und
   opacity; Geometrie und Fluss bleiben unberuehrt.

   Reihenfolge wie in der Interaktions-Karte: Normalzustand, Bewegung,
   Hover nur mit feinem Zeiger, Druck, Tastatur, reduzierte Bewegung,
   Druckausgabe.
   ================================================================= */

/* .hero .container ist im Bestand auf 820 px begrenzt; fuer zwei Spalten
   waere die Textspalte zu schmal. Gleiche Loesung wie Dach und Software. */
.hero .container.internet-hero {
  max-width: var(--max-width);
}

.internet-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .internet-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  }
}

.internet-hero__text { min-width: 0; }

.hero .internet-hero__text h1 {
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  max-width: none;
}

.hero .internet-hero__text .hero-lead { margin-bottom: 1.5rem; }

.internet-hero__medien {
  margin: 0;
  min-width: 0;
}

/* Die Buehne reserviert ihre Geometrie ueber das Seitenverhaeltnis --
   nichts springt nach, wenn die Bilder eintreffen. Handy 4:5, ab der
   Zweispaltigkeit 8:7: oben bleibt Navy, damit der Browser gross
   wirkt, ohne die Koepfe der Kundengruppe zu verdecken. */
.internet-hero__buehne {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--brand-primary-dark);
  box-shadow: 0 18px 48px -28px rgba(var(--brand-primary-dark-rgb), 0.9);
}

@media (min-width: 48rem) {
  .internet-hero__buehne { aspect-ratio: 8 / 7; }
}

/* Voll sichtbar, unten buendig, keine Verzerrung und kein Zuschnitt. */
.internet-hero__grund {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.internet-hero__grund img {
  display: block;
  width: 100%;
  height: auto;
}

.internet-hero__browser {
  position: absolute;
  left: 50%;
  top: 3%;
  width: 92%;
  transform: translateX(-50%);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(var(--brand-primary-dark-rgb), 0.95),
              0 0 0 1px rgba(var(--brand-accent-rgb), 0.35);
}

@media (min-width: 48rem) {
  .internet-hero__browser { width: 86%; top: 4%; }
}

.internet-hero__browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die beiden Angebotskacheln des Browserbildes liegen unten links und
   unten rechts; die Akzente sitzen genau darauf. */
.internet-hero__akzent {
  position: absolute;
  top: 66%;
  height: 30%;
  width: 44%;
  border-radius: var(--radius-sm);
  background: rgba(var(--brand-accent-rgb), 0.10);
  box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb), 0.85);
  opacity: 0.32;
}

.internet-hero__akzent--backshop { left: 4%; }
.internet-hero__akzent--waschpark { right: 4%; }

.internet-hero__weg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.internet-hero__weg path {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.75;
}

.internet-hero__hinweis {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Bewegung: einmalig, rund fuenf Sekunden ---------------------
   Ohne JavaScript bleibt der Ruhezustand oben stehen -- er ist bereits
   der verstaendliche Schlusszustand. Erst die Klasse `laeuft` spielt
   die Bewegung einmal ab; `backwards` sorgt dafuer, dass wartende
   Ebenen vor ihrem Einsatz unsichtbar sind. */
.internet-hero__buehne.laeuft .internet-hero__browser {
  animation: internet-hero-browser 1000ms ease-out both;
}

.internet-hero__buehne.laeuft .internet-hero__akzent {
  animation: internet-hero-akzent 1000ms ease-out backwards;
}

.internet-hero__buehne.laeuft .internet-hero__akzent--backshop { animation-delay: 1000ms; }
.internet-hero__buehne.laeuft .internet-hero__akzent--waschpark { animation-delay: 2000ms; }

.internet-hero__buehne.laeuft .internet-hero__weg {
  animation: internet-hero-weg 2000ms 3000ms ease-out backwards;
}

.internet-hero__buehne.ist-pausiert .internet-hero__browser,
.internet-hero__buehne.ist-pausiert .internet-hero__akzent,
.internet-hero__buehne.ist-pausiert .internet-hero__weg {
  animation-play-state: paused;
}

@keyframes internet-hero-browser {
  from { transform: translateX(-50%) scale(1.03); }
  to   { transform: translateX(-50%) scale(1); }
}

@keyframes internet-hero-akzent {
  0%   { opacity: 0; transform: scale(0.985); }
  45%  { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0.32; transform: scale(1); }
}

@keyframes internet-hero-weg {
  0%   { opacity: 0; transform: translateY(8px); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Schaltflaeche ausserhalb der Bildflaeche --------------------- */
.internet-hero__schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 14.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--surface-0);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 120ms ease-out, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.internet-hero__schalter[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .internet-hero__schalter:hover { border-color: var(--brand-accent-light); }
}

.internet-hero__schalter:active { transform: scale(0.97); }

.internet-hero__schalter:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Keine Bewegung bei Tastaturbedienung. */
.internet-hero__schalter:focus-visible:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .internet-hero__buehne.laeuft .internet-hero__browser,
  .internet-hero__buehne.laeuft .internet-hero__akzent,
  .internet-hero__buehne.laeuft .internet-hero__weg {
    animation: none;
  }
  .internet-hero__schalter { transition: none; }
  .internet-hero__schalter:active { transform: none; }
}

@media print {
  .internet-hero__buehne.laeuft .internet-hero__browser,
  .internet-hero__buehne.laeuft .internet-hero__akzent,
  .internet-hero__buehne.laeuft .internet-hero__weg {
    animation: none;
  }
  .internet-hero__schalter { display: none !important; }
}

/* ---- Abstaende und Tippziel im neuen Hero ------------------------
   `.hero-cta-row` traegt im Bestand `margin-bottom: 3rem`. Zusammen mit
   dem Rasterabstand von 2,5 rem standen zwischen Aktionen und Bild
   88 px (Browsermessung 09.09.2026, Handy 856,15 -> 944,15). Nur hier
   traegt der Rasterabstand allein; die Bestandsregel bleibt unberuehrt. */
.internet-hero .hero-cta-row { margin-bottom: 0; }

/* Der zweite Weg war im neuen Aufbau nur 26,98 px hoch. Er bekommt hier
   ein volles Tippziel; Wortlaut und Ziel bleiben. Die Unterkante wandert
   von `border-bottom` (die bei 44 px Hoehe unten klebte) auf eine
   Unterstreichung mit Abstand -- gleiche Anmutung, richtige Hoehe. */
.internet-hero .hero-cta-row .btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.internet-hero .hero-cta-row .btn-text:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Der Platz der Schaltflaeche bleibt reserviert, auch wenn sie bei
   reduzierter Bewegung verschwindet -- sonst springt die Bildunterschrift. */
.internet-hero__bedienung {
  display: flex;
  min-height: 44px;
  margin-top: 0.9rem;
}

/* ENDE INTERNET-HERO /internetauftritte.html */

/* --- KI-Loesungen: Abschnittskopf mit Bild rechts (P12, 12.09.2026) ------
   .section-head ist auf 760 px zentriert. Neben einem Bild steht der Text
   linksbuendig in seiner Spalte; der Abstand zum Leistungsraster bleibt
   3 rem, Text und Bild sind vertikal mittig. Unter 860 px stapelt .two-col. */
.leistungen-kopf { margin-bottom: 3rem; align-items: center; }
.leistungen-kopf .section-head { max-width: none; margin: 0; text-align: left; }
.leistungen-kopf .section-lead { margin-left: 0; }

/* --- KI-Loesungen: breiteres Hero-Bild mit Erlaeuterung (P12, 12.09.2026) ---
   Auf schmalen Bildschirmen stehen Abgrenzung und Handlung vor dem Bild. Am
   Desktop bleibt das 42-rem-Bild rechts neben dem Text; darunter folgen
   Abgrenzung und Handlung ueber beide Spalten. */
.software-hero--bild-breit > .hero-abgrenzung { grid-column: 1 / -1; margin: 0; }
.software-hero--bild-breit > .hero-cta-row { grid-column: 1 / -1; margin: 0; }
.hero--ki h1 { hyphens: manual; }
@media (max-width: 61.99rem) {
  .software-hero--bild-breit { gap: 1.5rem; }
}
@media (max-width: 480px) {
  .hero--ki { padding-top: 3.5rem; }
}
@media (min-width: 62rem) {
  .software-hero.software-hero--bild-breit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem);
  }
  .software-hero--bild-breit > .software-hero__text { grid-column: 1; grid-row: 1; }
  .software-hero--bild-breit > .software-hero__bild { grid-column: 2; grid-row: 1; }
}
/* Der Handlungsknopf folgt der Abgrenzung (Regel K1.2: Abgrenzung vor der ersten Handlung). */
.software-hero--bild-breit > .hero-cta-row { margin-top: 0.5rem; }

/* --- Potenzialanalyse: hochkantes Titelbild im Hero (26.09.2026) ---
   Die Titelseite des Musters ist 1600 x 2264 px. Mit der 42-rem-Spalte der KI-Seite
   wurde der Hero 1.353 px hoch, die Textspalte 360 px schmal (Ueberschrift mit
   Trennstrichen) und der Knopf lag unter dem Falz. Jetzt 24 rem Bildspalte, der Knopf
   steht in der Textspalte, unterhalb der Desktop-Breite ist das Bild auf 24 rem
   gedeckelt und zentriert (Tablet zeigte 720 x 1.019 px). Keine neue Farbe, kein Token. */
@media (min-width: 62rem) {
  .software-hero.software-hero--bild-hoch {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: start;
  }
  /* 56 px trennte in der 648-px-Textspalte „Ih-ren“; mit 52 px stehen ab 1120 px Fensterbreite
     zwei saubere Zeilen („Potenzialanalyse für Ihren“ / „Belieferungsvertrag“). Zwischen 992 und
     1119 px ist die Spalte schmaler (520 bis 608 px): ohne Silbentrennung drei Zeilen ohne
     Trennstrich statt „Ih-ren“. Im Browser gemessen (26.09.2026). */
  .software-hero--bild-hoch .software-hero__text h1 { font-size: 3.25rem; hyphens: manual; }
}
.software-hero--bild-hoch .software-hero__bild { max-width: 24rem; margin-inline: auto; }
/* Der obere Abstand der Knopfzeile kommt aus dem Unterabstand des Leads (2.2rem); der Bestandswert
   margin-bottom 3rem entfaellt, weil unter der Knopfzeile das Bild folgt. */
.software-hero--bild-hoch .hero-cta-row { margin-bottom: 0.7rem; }
.software-bild__unterschrift p { margin: 0; }
.software-bild__unterschrift p + p { margin-top: 0.6rem; }
.software-hero__erlaeuterung {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #fff;
}


/* --- Dach: Bildband mit Zielbildern (Sven, 12.09.2026) ------------------
   Ausnahme von der Gestaltungskarte („knapper Hero, danach sofort die vier
   Angebote“ und „keine Bewegung im Inhalt“), von Sven am 12.09.2026 fuer diesen
   einen Abschnitt entschieden. Reine CSS-Bewegung ueber eine verdoppelte Spur
   (translateX -50 %); Anhalten per Knopf (bildband.js), beim Zeigen und bei
   Tastaturfokus. Bei reduzierter Bewegung steht der Streifen, die Kopie
   entfaellt und der Streifen ist waagerecht scrollbar. */
.bildband { padding: 3rem 0 3.5rem; background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bildband__kopf { margin-bottom: 1.5rem; }
.bildband__titel { margin: 0; font-size: 1.5rem; }
.bildband__buehne {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.bildband__spur { display: flex; width: max-content; animation: bildband-lauf 70s linear infinite; }
.bildband__gruppe { display: flex; margin: 0; padding: 0 0.5rem; list-style: none; }
.bildband__karte { flex: 0 0 auto; width: 20rem; margin: 0 0.5rem; }
.bildband__karte a { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.bildband__karte a:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.bildband__karte img {
  display: block; width: 100%; height: 12.5rem; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-0);
}
.bildband__karte--potenzialanalyse img { object-position: center 12%; }
.bildband__label { display: block; margin-top: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--brand-primary); }
.bildband__buehne:hover .bildband__spur,
.bildband__buehne:focus-within .bildband__spur,
.bildband--pausiert .bildband__spur { animation-play-state: paused; }
.bildband__fuss { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.bildband__text { margin: 0; max-width: 720px; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); }
.bildband__schalter {
  min-height: 45px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--brand-primary); border-radius: var(--radius-md);
  background: var(--surface-0); color: var(--brand-primary);
  font: inherit; font-weight: 600; cursor: pointer;
}
.bildband__schalter:hover { background: var(--brand-primary); color: #fff; }
.bildband__schalter:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
@keyframes bildband-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 40rem) {
  .bildband__karte { width: 14rem; }
  .bildband__karte img { height: 8.75rem; }
  .bildband__spur { animation-duration: 55s; }
}
@media (prefers-reduced-motion: reduce) {
  .bildband__spur { animation: none; width: auto; }
  .bildband__gruppe--kopie { display: none; }
  .bildband__buehne { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .bildband__schalter { display: none; }
}