/* ==========================================================================
   Brandherd.net · Stylesheet
   --------------------------------------------------------------------------
   Aufbau
   1.  EINSTELLUNGEN (Design-Tokens)  ← hier wird fast alles angepasst
   2.  Fonts
   3.  Reset & Basis
   4.  Grid
   5.  Typografie
   6.  Komponenten (Button, Chip, Linienliste)
   7.  Navigation
   8.  Sektionen (#1 bis #6, Footer)
   9.  Info-Overlay
   10. Animationen (Reveal, Akkordeon)
   11. Reduzierte Bewegung
   ========================================================================== */


/* ==========================================================================
   1. EINSTELLUNGEN
   Referenz: Figma-Frame "Brandherd.net", 1728 × 1117 px.
   Fluide Werte: clamp(MIN, BEVORZUGT, MAX)
     MIN        = Untergrenze (kleine Desktops)
     BEVORZUGT  = skaliert mit der Fensterbreite (vw). 1vw = 17.28px bei 1728px
     MAX        = Obergrenze (große Monitore)
   ========================================================================== */
:root {

  /* ---------- Farben ---------- */
  /* Hintergrund: --bg-base und die Vignette (--bg-vignette, --bg-vignette-blend) setzt
     assets/js/background-settings.js (Hintergrund-Labor, labor/). Die Werte hier gelten
     nur, falls diese Datei fehlt. Hell-Modus: eigene Werte weiter unten. */
  --bg-base:         #6d1d03;             /* Basisfarbe Hintergrund #00517c #2f481c #007a4f #154b33*/
  --bg-edge:         color-mix(in srgb, var(--bg-base) 38%, #000);   /* Mobil: Farbe, mit der Safari Statusleiste oben und den Bereich unter seiner Leiste unten füllt.
                                          Entspricht dem Shader am Bildrand (mit Vignette). Dunkler = kleinerer Prozentwert. */
  --bg-edge-fade:    160px;                 /* Mobil: Höhe des Übergangs unten in die Randfarbe (0px = aus) */
  --c-bg:            #2f481c;             /* Seitenfarbe, bis der Verlauf geladen ist */
  --bg-vignette:     #2A24384D;           /* Vignette am Rand (Farbe + Deckkraft 30 %) … */
  --bg-vignette-blend: hard-light;          /* Füllmethode wie in Figma */
  --c-head:          #FEF5EB;             /* Headlines */
  --c-copy:          rgb(186, 198, 182);             /* Fließtext */
  --c-accent:        #E7F98C;             /* CTA-Button E7F98C*/
  --c-btn-hover:     #FEF5EB;             /* CTA-Button beim Rollover */
  --c-dark:          #37322A;             /* Text auf hellen Flächen */
  --c-blue:          #F9765B;             /* Angebotskarten */
  --c-chip:          #fef5eb2d;           /* Themen-Buttons (#6) */
  --c-chip-hover:    rgba(212, 227, 164, 0.7);   /* Themen-Buttons (#6) beim Rollover */
  --chip-active-outline: 1px;               /* Themen-Button ausgewählt: keine Fläche, nur Kontur in Schriftfarbe (Stärke) */
  --c-line:          var(--c-copy);         /* Linien im Akkordeon */
  --c-panel:         #FEF5EB;             /* Info-Overlay: heller Hintergrund */
  --c-panel-text:    var(--c-dark);         /* Info-Overlay: Text und Linien */
  --c-card:          #FEF5EB;             /* Angebotskarten: Fläche */
  --c-card-text:     var(--c-dark);         /* Angebotskarten: Text und Linie */
  /* Einzelfarben für Navigation, Footer und Kundenlogos */
  --c-nav-logo:      var(--c-head);       /* Navigation: Wortmarke "Brandherd" */
  --c-nav-link:      var(--c-head);       /* Navigation: "Info" und "EN" */
  --c-nav-link-open: var(--c-panel-text); /* Navigation über dem Overlay (Info, Impressum, Datenschutz) */
  --c-footer:        #FFFFFF;             /* Footer-Text, Schrift der Themen-Buttons */
  --c-client-logo:   color-mix(in srgb, var(--c-head) 50%, transparent);  /* Kundenlogos (#5): Headline-Farbe mit 50 % Deckkraft */
  /* Zone hinter der Navigation beim Scrollen: zeigt eine Live-Kopie des Hintergrunds
     (inkl. Korn und Vignette). Inhalte scrollen darunter weg und laufen weich aus. */
  --nav-fade:        0px;                 /* weicher Auslauf am unteren Rand der Zone */
  --nav-fade-duration: 450ms;             /* Einblenden der Zone, sobald die Navigation fixiert ist */

  /* ---------- Schriftfamilien ---------- */
  --f-display: "ABC Arizona Mix", Georgia, serif;   /* H1, H2, H3, Navigation */
  --f-serif:   var(--f-display);                    /* Ursachen im Akkordeon */
  --f-sans:    "FT Regola Neue", system-ui, sans-serif; /* Copy, Buttons */
  --f-footer:  "ABC Arizona Mix", Georgia, serif;   /* Footer */

  /* ---------- Schriftgrößen (fluide, je Rolle eigene Grenzen) ----------
     Figma-Wert bei 1728 px steht jeweils im Kommentar. */
  --fs-h1:     clamp(44px, 3.704vw, 64px);   /* 64px */
  --fs-h2:     clamp(30px, 2.315vw, 40px);   /* 40px */
  --fs-h3:     clamp(20px, 1.389vw, 24px);   /* 24px */
  --fs-copy:   clamp(16px, 1.042vw, 18px);   /* 18px – darf kaum größer werden */
  --fs-cause:  clamp(17px, 1.100vw, 19px);   /* 19px – Ursachen im Akkordeon (ABC Arizona), optisch gleich groß wie die Copy darüber */
  --fs-small:  clamp(14px, 0.926vw, 16px);   /* 16px */
  --fs-footer: var(--fs-nav);                /* Footer = Navigation (Info, EN), immer identisch */
  --fs-cta:    clamp(22px, 1.389vw, 24px);   /* 24px – CTA-Textzeile unter den Themen (#6), immer sichtbar größer als Footer/Nav (max. 20px) */
  --fs-nav:    clamp(18px, 1.157vw, 20px);   /* 20px */
  --fs-logo:   clamp(20px, 1.389vw, 24px);   /* 24px */

  /* ---------- Schriftschnitte & Zeilenabstände ---------- */
  /* ABC Arizona Mix liegt nur als Thin (250) vor. Weitere Schnitte
     (Light, Regular) hier eintragen, sobald die Dateien im Fontordner sind. */
  --fw-h1: 250;
  --fw-h2: 250;
  --fw-h3: 250;
  --fw-nav: 250;
  --fw-footer: 250;   /* ABC Arizona Mix Thin */
  --fw-cause: 250;    /* Ursachen im Akkordeon */
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.3;
  --lh-footer: 1.3;
  --lh-copy: 1.6;
  --lh-nav: 1.1;
  --ls-copy: 0.01em;

  /* ---------- Grid (skaliert mit der Fensterbreite) ---------- */
  --grid-cols:   7;
  --grid-max:    1920px;                      /* ab hier wächst das Grid nicht weiter (Navigation schon) */
  --grid-shift:  0;                           /* Lage des Grids über --grid-max: 0 = linksbündig, 1 = zentriert */
  --grid-margin: clamp(20px, 2.778vw, 96px);  /* 48px Seitenrand */
  --grid-gutter: clamp(16px, 1.389vw, 40px);  /* 24px Spaltenabstand */

  /* ---------- Abstände ---------- */
  --space-s:  16px;
  --space-m:  24px;
  --space-l:  32px;   /* Figma-Variable "l" */
  --space-xl: 40px;   /* Figma-Variable "xl": H2 → Copy → Button */
  --nav-top-hero: clamp(48px, 4.282vw, 90px); /* 74px: Position auf dem Hero (Figma) */
  --nav-top-bar:  clamp(20px, 2.083vw, 40px); /* 36px: Position im Balken beim Scrollen */
  --nav-bar-pad-bottom: clamp(16px, 1.389vw, 28px); /* Luft unter der Navigation im Balken */
  --nav-bar-duration: 450ms;                  /* Dauer des Slide-downs */
  --nav-hide-duration: 300ms;                 /* mobil: Dauer, mit der die Navigation beim Runterscrollen weg-/beim Hochscrollen zurückfährt */
  --nav-top: var(--nav-top-hero);             /* aktuelle Position (JS schaltet um) */
  --section-min-h: 100svh;                    /* jede Sektion = ein Viewport */
  --section-pad-y: clamp(96px, 10vh, 160px);  /* Luft oben/unten, damit nichts unter die Navigation rutscht */
  --symptoms-top: 26vh;
  --info-top-gap: clamp(64px, 13.8vh, 200px);   /* Info: Abstand Navigation → Inhalt (Figma: Text bei 254 px) */                       /* #2: Oberkante von H2 und Akkordeon (Figma: ca. 290 von 1117 px) */

  /* ---------- Komponenten ---------- */
  --btn-h:        40px;
  --btn-pad-x:    20px;
  --chip-pad-x:   25px;
  --chip-gap:     15px;
  --radius-pill:  30px;
  --radius-card:  5px;
  --card-h:       clamp(360px, min(28.7vw, 44.4vh), 560px); /* 496px, auch an Fensterhöhe gekoppelt */
  --card-pad:     40px;
  --card-rule-w:  59px;
  --logo-gap:     96px;                       /* Abstand zwischen zwei Logos */
  --logo-scale:   1;                          /* Logogröße (1 = Figma-Maße) */
  --logo-speed:   40;                         /* Tempo der Logo-Leiste in Pixel pro Sekunde */
  --logo-fade:    8%;                         /* weiche Kanten links und rechts */
  --references-min-h: 5svh;                  /* Höhe der Referenzen-Sektion */

  /* ---------- Animation (JS liest diese Werte ebenfalls aus) ---------- */
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 900ms;   /* Dauer eines Fade-ins */
  --reveal-shift:    24px;    /* Weg des Slide-ups */
  --seq-stagger:     160ms;   /* Abstand zwischen zwei Elementen einer Sequenz */
  --seq-stagger-slow: 480ms;  /* langsamer Abstand (3 × --seq-stagger), z. B. Angebotskarten */
  --cta-button-delay: 500ms;  /* #6: Pause zwischen getippter Zeile und Button */
  --seq-pause:       500ms;   /* Extra-Pause, wo data-seq-pause ohne Wert gesetzt ist */
  --accordion-duration: 700ms;
  --accordion-type-delay: 350ms;  /* #2b: Tippen beginnt, während das Item noch aufgeht */
  /* #2 Desktop: "+" / "−" rechts in jeder Akkordeon-Zeile (erscheint mit 2b, nacheinander im Abstand --accordion-stagger) */
  --acc-icon-size:     14px;      /* Kantenlänge des Plus-Zeichens */
  --acc-icon-stroke:   1px;       /* Linienstärke des Plus-/Minus-Zeichens */
  --acc-icon-shift:    16px;      /* Weg des Slide-ins (von rechts) */
  --acc-icon-duration: 600ms;     /* Dauer von Slide-in und Fade-in */
  --acc-icon-turn:     450ms;     /* Dauer der Drehung + → × beim Öffnen/Schließen (gilt auch im Info-Akkordeon) */
  --acc-hover-color:   var(--c-accent);   /* Rollover: Text und Zeichen der Zeile in Buttonfarbe */
  --acc-autoopen-delay: 500ms;    /* Pause nach dem letzten "+", bevor sich die erste Zeile von selbst öffnet */
  --accordion-symptom-dim: 0.5;   /* #2b Desktop: Deckkraft der Symptome, sobald die Ursachen aufgehen (1 = gar nicht abgetönt) */
  /* #2 mobil, Symptom-Slider: Geschwindigkeiten stehen in main.js → CONFIG.symptomSlider */
  --slider-symptom-dim: 0.6;      /* #2 mobil: Deckkraft des Symptoms, sobald die Ursache dazukommt (1 = gar nicht abgetönt) */
  --slider-gap:      24px;        /* #2 mobil: Abstand zwischen zwei Einträgen beim Schieben (Linien laufen mit dem Eintrag) */
  --slider-gap-top:  32px;        /* #2 mobil: Abstand über der oberen Linie des Sliders (dort verschwindet der Text) */
  --slider-gap-bottom: 24px;      /* #2 mobil: Abstand unter den Punkten zum unteren Fensterrand */
  /* #2 mobil, Karten-Slider (CONFIG.symptomMobile = 'cards'). Das Wischen selbst läuft nativ wie bei den Angebotskarten. */
  --cards-gap:       12px;        /* Abstand zwischen zwei Karten (beim Wischen im Seitenrand sichtbar) */
  --cards-gap-top:   16px;        /* deckende Fläche über der oberen Linie (dort verschwindet der 2b-Text) */
  --cards-text-gap:  var(--space-xl);   /* Abstand 2a-Copy → Karten (= H2 → Copy) */
  --cards-pad:       20px;        /* Innenabstand einer Karte */
  /* Kartenfarben (bei Bedarf hier anpassen): Fläche = Themen-Button (#6) im abgedimmten Zustand */
  --c-cards-bg:      color-mix(in srgb, var(--c-chip) calc(var(--chips-dimmed) * 100%), transparent);
  --c-cards-symptom: var(--c-copy);   /* 1. Zeile: Symptom */
  --c-cards-cause:   var(--c-head);   /* 2. Zeile: Ursache */
  --accordion-stagger: 220ms;     /* Abstand der Punkte bei Akkordeons ohne Tippen (z. B. Info) */
  --seq-type-gap:  320ms;         /* Pause nach einer getippten Zeile, bevor die nächste startet */
  /* Info-Overlay: Ablauf beim Öffnen
     1. Navigation wird dunkel      (--info-nav-duration)
     2. heller Hintergrund blendet ein (--info-bg-duration)
     3. Text, sobald der Hintergrund weitgehend deckend ist (--info-content-delay)
     4. Foto etwas später und langsamer (--info-photo-delay, --info-photo-duration)
     5. Akkordeon baut sich nach dem Text auf (wie #2)
     Schließen: alles blendet gemeinsam aus (--info-close-duration) */
  --info-nav-duration:     200ms;
  --info-bg-duration:      1500ms;
  --info-content-delay:    900ms;
  --info-text-duration:    700ms;
  --info-photo-delay:      1250ms;
  --info-photo-duration:   1200ms;
  --info-bar-duration:     300ms;   /* Fläche hinter der Navigation: Einblenden (startet nach --info-bg-duration) */
  --info-close-duration:   750ms;
  --btn-hover-duration: 450ms;   /* Button: Farbe fährt beim Rollover von links herein */
  --chip-fade:          250ms;   /* #6: Dauer für Rollover, Auswahl und Ausblenden der Themen-Buttons */
  --chips-dimmed:       0.5;     /* #6: Deckkraft der Themen-Buttons nach einer Auswahl */
}

/* ---------- Hell-Modus (Test) ----------
   Der Schalter "Hell/Dunkel" in der Navigation setzt data-theme="light" am <html>
   (main.js → initTheme, Wahl wird gemerkt). Hier werden nur Farb-Tokens neu belegt;
   alle Regeln oben und unten nutzen dieselben Variablen, es gibt keine Sonderregeln.
   Später auch für einzelne Bereiche denkbar (data-theme="light" an einer Section). Dann gilt:
   - Tokens, die in :root aus anderen abgeleitet sind (z. B. --c-nav-logo, --c-line), müssen hier
     zusätzlich stehen, weil sie sonst schon am <html> ausgerechnet werden.
   - Shader-Hintergrund und Safari-Randfarbe gelten für die ganze Seite (hängen am <html>). */
[data-theme="light"] {
  /* Hintergrund (Shader-Verlauf wird aus --bg-base neu berechnet) */
  --bg-base:         #c7d3c0;             /* helle Basisfarbe */
  --bg-edge:         color-mix(in srgb, var(--bg-base) 88%, #000);   /* Safari-Ränder mobil, etwas dunkler als die Basis wie der Shader am Rand */
  --c-bg:            var(--bg-base);
  --bg-vignette:     #2A24381F;           /* Vignette schwächer (12 %) */
  /* Schrift: dunkel auf hell */
  --c-head:          #2b2722;
  --c-copy:          #4b5546;
  --c-footer:        var(--c-head);
  --c-line:          var(--c-copy);
  --c-nav-logo:      var(--c-head);
  --c-nav-link:      var(--c-head);
  --c-client-logo:   color-mix(in srgb, var(--c-head) 50%, transparent);
  /* Themen-Buttons (#6) */
  --c-chip:          #2b27221f;
  --c-chip-hover:    #2b272240;
  /* Bisher helle Flächen werden dunkel: Overlays und Angebotskarten */
  --c-panel:         #2b2722;
  --c-panel-text:    #FEF5EB;
  --c-nav-link-open: var(--c-panel-text);
  --c-card:          #2b2722;
  --c-card-text:     #FEF5EB;
  /* CTA-Button (Akzentfläche, dunkle Schrift) bleibt; Rollover dunkel mit heller Schrift wäre unlesbar → hell lassen */
}


/* ==========================================================================
   2. Fonts
   ========================================================================== */
@font-face {
  font-family: "ABC Arizona Mix";
  src: url("../fonts/ABCArizonaMix-Thin.woff2") format("woff2");
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FT Regola Neue";
  src: url("../fonts/FTRegolaNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   3. Reset & Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Kontaktdaten (Mail/Telefon): erst nach Klick sichtbar (Spamschutz, siehe main.js → initContactReveal) */
.contact-reveal {
  text-align: inherit;
  transition: opacity 250ms var(--ease);
}
.contact-reveal:hover { opacity: 0.7; }
.contact-revealed { animation: contact-in 400ms var(--ease) both; }   /* aufgelöste Daten blenden weich ein */
@keyframes contact-in { from { opacity: 0; } }

/* Untergrund hinter dem Shader (dunkelster Verlaufston aus background.js). Mobil zeigt Safari darunter
   sonst den helleren Rückfall-Verlauf, z. B. hinter der schwebenden Leiste am unteren Rand. */
html { background-color: var(--bg-edge); }
/* Offene Overlays (Info, Impressum, Datenschutz): Safari-Bereiche oben/unten in der hellen Flächenfarbe */
html.is-info-open { background-color: var(--c-panel); }
html, body { overflow-x: clip; }   /* verhindert seitliches Scrollen durch 100vw-Elemente */
body {
  /* Silbentrennung für Headlines und Copy (Sprache kommt aus <html lang="de">) */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;   /* erst ab 6 Zeichen, mind. 3 vor/nach dem Trennstrich */
  /* kein eigener Hintergrund: sonst läge er über dem Shader (siehe body::before) */
  color: var(--c-copy);
  font-family: var(--f-sans);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  letter-spacing: var(--ls-copy);
  font-feature-settings: "salt" 1;      /* Stilalternativen wie in Figma */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }   /* Info-Overlay offen */
html:has(body.is-locked) { overflow: hidden; }   /* Seiten-Scrollbalken weg, sonst gibt es neben dem Balken des Overlays einen zweiten */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
/* Kein Rahmen um das Overlay (wird per Skript fokussiert) und um den Link, der nach Esc den Fokus zurückbekommt */
.info__scroll:focus, .info__scroll:focus-visible, [data-quiet-focus]:focus-visible { outline: none; }


/* ---------- Hintergrund ----------
   Unterste Ebene: CSS-Verlauf aus denselben Farben (setzt background.js als
   --bg-fallback; bleibt stehen, falls WebGL fehlt). Darüber das Shader-Canvas,
   darüber die Vignette. Alles fixiert, unter allen Inhalten. */
.bg-shader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100lvh;             /* größte Fensterhöhe: kein Springen, wenn mobil die Adressleiste ein-/ausfährt */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.bg-shader.is-ready { opacity: 1; }
/* Rückfall-Verlauf (falls WebGL fehlt): eigene Ebene unter dem Shader.
   Nicht als body-Hintergrund, denn der würde wegen html { background-color } über dem Shader liegen. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100lvh;
  z-index: -2;
  background: var(--bg-fallback, var(--c-bg));
  pointer-events: none;
}
/* Läuft der Shader, wird der Rückfall-Verlauf nicht gebraucht. Mobil würde Safari ihn sonst
   als Farbe für den Bereich hinter seiner unteren Leiste übernehmen (heller Balken). */
.has-shader body::before { display: none; }
/* Mobil: unten weicher Übergang in die Randfarbe (--bg-edge), damit der Bereich hinter der
   Safari-Leiste nahtlos anschließt. Liegt über dem Shader, unter der Vignette. */
@media (max-width: 1023px) {
  .bg-shader { z-index: -2; }
  .has-shader body::before {
    display: block;
    top: auto;
    bottom: 0;
    height: var(--bg-edge-fade);
    z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--bg-edge));
  }
}
/* Vignette (Figma: radialer Verlauf, innen 62 % transparent, außen 30 %) */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  background: radial-gradient(ellipse 61% 61% at 50% 50%,
    transparent 0%, transparent 62%, var(--bg-vignette) 100%);
  mix-blend-mode: var(--bg-vignette-blend);
  pointer-events: none;
}


/* ==========================================================================
   4. Grid
   7 Spalten. Elemente werden über Spalten-Klassen platziert:
   .col-A-B  → von Spalte A bis einschließlich Spalte B
   ========================================================================== */
.grid {
  display: grid;
  width: 100%;
  max-width: var(--grid-max);
  margin-left: calc((100% - min(100%, var(--grid-max))) / 2 * var(--grid-shift));
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
}
.col-1-2 { grid-column: 1 / span 2; }
.col-1-3 { grid-column: 1 / span 3; }
.col-1-6 { grid-column: 1 / span 6; }
.col-3-4 { grid-column: 3 / span 2; }
.col-3-6 { grid-column: 3 / span 4; }
.col-3-7 { grid-column: 3 / span 5; }
.col-4-6 { grid-column: 4 / span 3; }
.col-5-6 { grid-column: 5 / span 2; }
.col-6-7 { grid-column: 6 / span 2; }


/* ==========================================================================
   5. Typografie
   ========================================================================== */
.h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0;
  color: var(--c-head);
}
.h2 {
  font-family: var(--f-serif);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  color: var(--c-head);
}
.h3 {
  font-family: var(--f-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  color: var(--c-head);
}
/* Keine Silbentrennung in Headlines (Copy und Rest der Seite trennen weiter automatisch) */
.h1, .h2, .h3, .info__label { -webkit-hyphens: manual; hyphens: manual; }
.site-footer a[target]:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }   /* externe Links im Footer */
.copy p + p { margin-top: calc(var(--lh-copy) * 1em); }   /* Leerzeile wie in Figma */
.line { display: block; }   /* Zeilenumbruch ohne Leerzeile */


/* ==========================================================================
   6. Komponenten
   ========================================================================== */

/* ---------- CTA-Button ---------- */
.btn, .chip, .site-nav, .site-footer { -webkit-hyphens: manual; hyphens: manual; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-dark);
  font-size: var(--fs-copy);
  white-space: nowrap;
  position: relative;
  isolation: isolate;          /* hält die Rollover-Fläche hinter dem Text */
  overflow: hidden;
}
/* Rollover wie ein Ladebalken: neue Farbe fährt von links herein, beim Verlassen zurück */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-btn-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-hover-duration) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

/* ---------- Themen-Button (#6) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 5px var(--chip-pad-x) 6px;
  border-radius: var(--radius-pill);
  background: var(--c-chip);
  color: var(--c-footer);
  white-space: nowrap;
  will-change: opacity;   /* eigene Ebene von Anfang an: verhindert kurzes Flackern des Textes beim Ein-/Ausblenden */
}
.chip:hover { background: var(--c-chip-hover); }
/* nach einer Auswahl treten alle Themen zurück, der Termin-Button dominiert */
.chip { transition: background-color var(--chip-fade) var(--ease), color var(--chip-fade) var(--ease), opacity var(--chip-fade) var(--ease), box-shadow var(--chip-fade) var(--ease); }   /* alle drei gleich lang, sonst blitzt der vorherige Button beim Wechsel */
.topics.has-choice .chip { opacity: var(--chips-dimmed); }
.topics.has-choice .chip:hover { opacity: 1; }
/* Ausgewählt: Schrift wie im Ruhezustand, statt Fläche eine Kontur in Schriftfarbe
   (innen gezeichnet, damit der Button nicht wächst). Bleibt als einziger voll sichtbar.
   So konkurriert er nicht mit dem Termin-Button. */
.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
  background: transparent;
  box-shadow: inset 0 0 0 var(--chip-active-outline) currentColor;
}
.topics.has-choice .chip[aria-pressed="true"] { opacity: 1; }

/* ---------- Linienliste (Basis für beide Akkordeons) ---------- */
.rule-list { border-top: 1px solid var(--c-line); }
.rule-list > li { border-bottom: 1px solid var(--c-line); }


/* ==========================================================================
   7. Navigation
   ========================================================================== */
.site-nav {
  /* Auf dem Hero: scrollt mit dem Inhalt mit (Figma-Position) */
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--nav-top-hero) var(--grid-margin) 0;
  pointer-events: none;               /* Klicks gehen durch, außer auf Links */
}
/* Sobald die Navigation aus dem Bild gescrollt ist: Balken fährt von oben herein */
.is-nav-pinned { --nav-top: var(--nav-top-bar); }
.is-nav-pinned .site-nav {
  position: fixed;
  padding: var(--nav-top-bar) var(--grid-margin) var(--nav-bar-pad-bottom);
  animation: nav-slide-down var(--nav-bar-duration) var(--ease) backwards;   /* nicht 'both': sonst überschreibt der Endwert das Wegfahren (is-nav-hidden) */
  transition: transform var(--nav-hide-duration) var(--ease);
}
/* Zone hinter der Navigation. Aufbau (von unten nach oben):
   1. CSS-Verlauf (nur als Rückfallebene ohne WebGL)
   2. Canvas mit Live-Kopie des Hintergrund-Ausschnitts (background.js → addMirror)
   3. dieselbe Vignette wie auf der Seite
   Unten läuft die Zone per Maske weich aus. Sie steht immer am oberen Rand und
   wird nur ein-/ausgeblendet, damit die Kopie deckungsgleich mit dem Hintergrund bleibt. */
.site-nav-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 49;
  height: calc(var(--nav-top-bar) + var(--fs-logo) * var(--lh-nav) + var(--nav-bar-pad-bottom) + var(--nav-fade));
  overflow: hidden;
  isolation: isolate;                 /* Vignette verrechnet sich nur mit der Kopie */
  background: var(--bg-fallback, var(--c-bg)) fixed;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent);
  opacity: 0;
  transition: opacity var(--nav-fade-duration) var(--ease), transform var(--nav-hide-duration) var(--ease);
  pointer-events: none;
}
.site-nav-bar__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;                          /* sichtbar, sobald der Shader läuft */
}
.site-nav-bar__bg.is-ready { opacity: 1; }
.site-nav-bar::after {                 /* Vignette: gleiche Größe und Lage wie body::after */
  content: "";
  position: absolute;
  top: var(--mirror-y, 0); left: 0;
  width: 100%;
  height: 100lvh;
  background: radial-gradient(ellipse 61% 61% at 50% 50%,
    transparent 0%, transparent 62%, var(--bg-vignette) 100%);
  mix-blend-mode: var(--bg-vignette-blend);
}
.is-nav-pinned .site-nav-bar { opacity: 1; }
/* Mobil: Navigation und Balken fahren beim Runterscrollen nach oben weg (JS setzt is-nav-hidden).
   Bei offenem Overlay bleiben sie immer sichtbar, sonst fehlt der Schließen-Button. */
.is-nav-hidden .site-nav,
.is-nav-hidden .site-nav-bar { transform: translateY(-120%); }
.is-nav-hidden.is-info-open .site-nav,
.is-nav-hidden.is-info-open .site-nav-bar,
.is-nav-hidden.is-info-closing .site-nav,
.is-nav-hidden.is-info-closing .site-nav-bar { transform: none; }
/* Overlays (Info, Impressum, Datenschutz): Balken in Flächenfarbe hinter der Navigation, damit der Text
   darunter wegscrollt. Die helle Fläche ist eine eigene Ebene (::before):
   - Öffnen: sie blendet erst ein, wenn der Overlay-Hintergrund deckt (Verzögerung = --info-bg-duration)
   - Schließen: sie blendet gemeinsam mit dem Overlay aus (--info-close-duration)
   Höhe folgt der aktuellen Position der Navigation (Hero oder gescrollt). */
.site-nav-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--c-panel);
  opacity: 0;
  transition: opacity var(--info-close-duration) var(--ease);
}
.is-info-open .site-nav-bar,
.is-info-closing .site-nav-bar {
  right: var(--info-scrollbar, 0px);   /* Scrollbalken des Overlays bleibt frei (Breite setzt main.js) */
  height: calc(var(--nav-top) + var(--fs-logo) * var(--lh-nav) + var(--nav-bar-pad-bottom) + var(--nav-fade));
}
.is-info-open .site-nav-bar {
  visibility: visible;
  opacity: 1;
  background: transparent;
}
.is-info-open .site-nav-bar::before {
  opacity: 1;
  transition: opacity var(--info-bar-duration) var(--ease) var(--info-bg-duration);
}
.is-info-open .site-nav-bar::after,
.is-info-open .site-nav-bar__bg { display: none; }   /* keine Hintergrund-Kopie, solange ein Overlay offen ist */
/* Schließen ohne gescrollte Seite: Balken bleibt sichtbar, bis die helle Fläche ausgeblendet ist */
.is-info-closing:not(.is-nav-pinned) .site-nav-bar { visibility: visible; opacity: 1; background: transparent; transition: none; }
.is-info-closing:not(.is-nav-pinned) .site-nav-bar::after,
.is-info-closing:not(.is-nav-pinned) .site-nav-bar__bg { display: none; }
@keyframes nav-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}
.site-nav a, .site-nav button { pointer-events: auto; }

.site-nav__logo {                       /* Wortmarke als SVG (assets/img/logo-brandherd.svg, FT Regola Neue Medium in Pfaden) */
  font-size: var(--fs-logo);              /* bestimmt die Größe des SVG */
  line-height: var(--lh-nav);
  letter-spacing: 0;
  color: var(--c-nav-logo);
}
.site-nav__logo svg {
  display: inline-block;
  height: 0.73em;                         /* Oberlänge (0.72) + Rundungen unter der Grundlinie (0.01) */
  width: auto;
  vertical-align: -0.01em;                /* Grundlinie des Logos = Grundlinie der Navigation */
}
.site-nav__meta {
  display: flex;
  gap: 24px;
  font-family: var(--f-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  letter-spacing: 0;
  color: var(--c-nav-link);
}
.site-nav__meta a[aria-disabled="true"] { cursor: default; }

/* Info ↔ × Umschalter */
.info-toggle { position: relative; min-width: 2.2em; text-align: right; }
/* Hell/Dunkel (Test): halb gefüllter Kreis in Schriftfarbe; dreht sich beim Wechsel um 180° */
.theme-toggle { display: inline-flex; align-items: center; align-self: center; }
.theme-toggle__icon {
  width: 0.7em; height: 0.7em;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: transform 500ms var(--ease);
}
[data-theme="light"] .theme-toggle__icon { transform: rotate(180deg); }
.info-toggle__label, .info-toggle__close { display: inline-block; transition: opacity 300ms var(--ease); }
.info-toggle__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; font-size: 1.3em; line-height: 1; }
.is-info-open .info-toggle__label { opacity: 0; }
.is-info-open .info-toggle__close { opacity: 1; }
/* Navigation: heller Modus (Standard) ↔ dunkler Modus (über dem Info-Overlay) */
.site-nav__logo, .site-nav__meta { transition: color var(--info-close-duration) var(--ease); }
.is-info-open .site-nav__logo,
.is-info-open .site-nav__meta { color: var(--c-nav-link-open); transition-duration: var(--info-nav-duration); }
.is-info-closing .site-nav__logo,
.is-info-closing .site-nav__meta { transition-duration: var(--info-close-duration); }


/* ==========================================================================
   8. Sektionen
   ========================================================================== */
.section {
  position: relative;
  min-height: var(--section-min-h);
  padding-block: var(--section-pad-y);
  align-content: center;              /* Inhalt vertikal mittig */
  row-gap: var(--space-xl);
}

/* Stack: H2 → Copy → Button mit Figma-Abstand "xl" */
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xl); }

/* ---------- #1 Hero ---------- */
.hero__title { position: relative; align-self: stretch; }   /* volle Breite, damit der Cursor Platz hat */
.hero__ghost { visibility: hidden; }              /* reserviert die Höhe des fertigen Satzes */
.hero__typed { position: absolute; inset: 0; }
.hero__text { max-width: calc((100% - var(--grid-gutter)) / 2); }   /* 3 von 6 Spalten */
.hero .typed-cursor {
  font-family: var(--f-display);
  font-weight: var(--fw-h1);
  color: var(--c-head);
  margin-left: 0.02em;
}

/* ---------- #2 Symptome & Ursachen ----------
   Zwei Viewports hoch. Links scrollen 2a und 2b, rechts bleibt das
   Akkordeon "sticky" stehen, bis die Sektion endet. */
.symptoms {
  position: relative;
  padding-block: 0;
  align-items: start;
}
.symptoms__step {                      /* 2a bzw. 2b: je ein Viewport */
  min-height: var(--section-min-h);
  padding-top: var(--symptoms-top);
  padding-bottom: var(--section-pad-y);
}
.symptoms__rail { align-self: stretch; }   /* volle Sektionshöhe, damit sticky wirken kann */
.symptoms__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: var(--symptoms-top);     /* Oberkante bündig mit der H2 */
}
.symptoms__sticky .accordion { width: 100%; }
.symptoms .h2 { max-width: calc((2 * 100% - var(--grid-gutter)) / 3); } /* H2 = 2 von 3 Spalten */

/* ---------- #3 Ansatz ---------- */
.approach .h2 { grid-row: 1; }
.approach .copy { grid-row: 2; }

/* ---------- #4 Angebote ---------- */
.offers .h2 { grid-row: 1; }
.offers__cards { grid-row: 2; display: contents; }
.card {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: var(--card-h);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--c-card);
  color: var(--c-card-text);
}
.card__title { color: var(--c-card-text); }
.card__rule { width: var(--card-rule-w); height: 0; border: 0; border-top: 1px solid var(--c-card-text); margin: 0; }
.offers__note { grid-row: 3; color: var(--c-copy); position: relative; }   /* wie die Copy */
.hang { position: absolute; transform: translateX(-100%); }   /* hängendes Zeichen vor dem Absatz */
.offers__cta  { grid-row: 3; justify-self: end; align-self: start; }

/* ---------- #5 Referenzen: Headline über einer Logo-Leiste (Endlos-Slider) ---------- */
.references {
  min-height: var(--references-min-h);  /* halbe Sektionshöhe */
  align-content: center;
}
.references .h2 { grid-row: 1; }
.logo-marquee {
  grid-row: 2;
  grid-column: 1 / -1;
  overflow: hidden;
  margin-inline: calc(var(--grid-margin) * -1);   /* läuft bis an den Rand des Grids */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
}
.logo-grid {
  display: flex;
  align-items: center;
  width: max-content;
  zoom: var(--logo-scale);
  /* Dauer und Laufweite setzt JS aus --logo-speed (px pro Sekunde) */
  animation: logo-run var(--logo-duration, 40s) linear infinite;
}
.logo-marquee:hover .logo-grid { animation-play-state: paused; }
.logo-grid li { flex: none; margin-right: calc(var(--logo-gap) / var(--logo-scale)); }
@keyframes logo-run { to { transform: translateX(calc(var(--logo-set-w, 50%) * -1)); } }
.client-logo { display: block; height: auto; color: var(--c-client-logo); }   /* Breite/Höhe = Figma-Maße */

/* ---------- #6 CTA ---------- */
.contact__line { font-size: var(--fs-cta); }   /* eigene Größe, damit sie nie auf Footer-Niveau fällt */
.contact .h2 { grid-row: 1; }
.topics {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--chip-gap);
}
.topics__track { display: contents; }   /* Desktop: Buttons fließen direkt in der Wolke */
.contact__answer { grid-row: 2; position: relative; }
.contact__answer.is-empty { visibility: hidden; }   /* Platz bleibt reserviert → kein Springen */
/* min-height setzt JS auf die Höhe der längsten Zeile */

/* ---------- Footer ---------- */
.site-footer {
  /* wächst wie die Navigation über 1920 px hinaus: volle Fensterbreite,
     auch wenn die Sektion selbst auf --grid-max begrenzt ist */
  position: absolute;
  bottom: 0;
  left: calc((100% - 100vw) / 2 * var(--grid-shift));   /* bündig mit dem Fensterrand */
  width: 100vw;
  max-width: none;
  padding-bottom: clamp(24px, 3vh, 48px);
  font-family: var(--f-footer);
  font-weight: var(--fw-footer);
  font-size: var(--fs-footer);
  line-height: var(--lh-footer);
  letter-spacing: 0;
  color: var(--c-footer);
}
.contact { padding-bottom: calc(var(--section-pad-y) + 80px); }
.site-footer .col-7 { grid-column: 7; text-align: right; }
.site-footer .col-1 { grid-column: 1; }
.site-footer .col-2 { grid-column: 2; }
.site-footer .col-3 { grid-column: 3; }


/* ==========================================================================
   9. Info-Overlay
   Heller Hintergrund über der ganzen Seite, Foto links (Spalten 1–2),
   Text und Akkordeon ab Spalte 4. Ablauf und Zeiten siehe :root.
   ========================================================================== */
.info {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  color: var(--c-panel-text);
}
.info.is-open { visibility: visible; }
.info.is-closing {                                 /* Schließen: alles gemeinsam ausblenden */
  opacity: 0;
  transition: opacity var(--info-close-duration) var(--ease);
}

.info__bg {
  position: absolute;
  inset: 0;
  background: var(--c-panel);
  opacity: 0;
}
.info__scroll { position: absolute; inset: 0; overflow-y: auto; }
.info__inner {
  grid-template-rows: auto auto;
  align-content: start;
  padding-top: var(--nav-top);
  padding-bottom: var(--section-pad-y);
  min-height: 100%;
}
.info__label {                                     /* auf der Höhe der Navigation, über dem Text */
  grid-row: 1;
  grid-column: 4 / span 3;
  font-family: var(--f-display);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  letter-spacing: 0;
  padding-top: calc(var(--fs-logo) * var(--lh-nav) - var(--fs-nav) * var(--lh-nav)); /* Grundlinie wie Navigation */
  margin-bottom: var(--info-top-gap);
}
.info__photo {                                      /* Figma: 449 × 505, Ausschnitt vergrößert */
  grid-row: 2;
  grid-column: 1 / span 2;
  position: relative;
  aspect-ratio: 449 / 505;
  overflow: hidden;
  margin: 10px 0 0;                                 /* Figma: Foto 10 px tiefer als der Text */
}
.info__photo img {
  position: absolute;
  width: 139.87%;
  height: 124.36%;
  max-width: none;
  left: -7.35%;
  top: -7.52%;
  object-fit: cover;
}
.info__content {
  grid-row: 2;
  grid-column: 4 / span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Einblenden: Hintergrund → Text → Foto (Akkordeon startet per JS) */
.info__label, .info__text, .info__photo, .info__meta { opacity: 0; }
.info.is-open .info__bg    { opacity: 1; transition: opacity var(--info-bg-duration) var(--ease); }
.info.is-open .info__label,
.info.is-open .info__text  { opacity: 1; transition: opacity var(--info-text-duration) var(--ease) var(--info-content-delay); }
.info.is-open .info__photo,
.info.is-open .info__meta  { opacity: 1; transition: opacity var(--info-photo-duration) var(--ease) var(--info-photo-delay); }

/* Impressum: Angaben als Tabelle in Spalte 1–2 (statt Foto), Fließtext in Spalte 4–6 */
.info__meta {
  grid-row: 2;
  grid-column: 1 / span 2;
  margin: 10px 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-copy);
  color: var(--c-panel-text);
}
.info__meta > div { display: grid; gap: 0.15em; padding: var(--space-s) 0; }
.info__meta > div:first-child { padding-top: 0; }
.info__meta dt { opacity: 0.6; }
.info__meta dd { margin: 0; }
.info__meta a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.legal h3 {
  font-family: var(--f-display);
  font-weight: var(--fw-h3);
  font-size: var(--fs-cause);
  line-height: var(--lh-nav);
  margin: var(--space-xl) 0 0.4em;
}
.legal h3:first-child { margin-top: 0; }
.legal p + p { margin-top: 0.8em; }
.info.is-closing * { transition-delay: 0s !important; }

/* Info-Akkordeon (Klick) */
.info .rule-list { --c-line: var(--c-panel-text); }
.facts__head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-s) 10px;
  text-align: left;
}
/* Plus-Zeichen: wie im Akkordeon #2 aus zwei Linien gezeichnet (das "+" im HTML bleibt nur als Text-Rückfall) */
.facts__icon {
  position: relative;
  flex: none;
  align-self: center;
  width: var(--acc-icon-size);
  height: var(--acc-icon-size);
  font-size: 0;
  transition: transform var(--acc-icon-turn) var(--ease);
}
.facts__head[aria-expanded="true"] .facts__icon { transform: rotate(45deg); }
.facts__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease);
}
.facts__head[aria-expanded="true"] + .facts__body { grid-template-rows: 1fr; }
.facts__body > div { overflow: hidden; }
.facts__body ul { padding: 0 10px var(--space-s); }
.facts__list { list-style: disc; padding-left: calc(10px + 1.1em) !important; }   /* Stationen, Zertifikate */
.facts__list li + li { margin-top: 0.3em; }


/* ==========================================================================
   10. Animationen
   ========================================================================== */

/* ---------- Reveal: Fade-in + Slide-up ----------
   Elemente mit .reveal starten unsichtbar. JS setzt .is-visible,
   sobald ihre Sequenz (data-seq) an der Reihe ist. Ohne JS bleibt alles sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-duration) var(--ease),
    transform var(--reveal-duration) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Ursache-Wirkungs-Akkordeon (#2) ----------
   geschlossen: nur Symptom · offen: Symptom 30 % + Ursache darunter */
.accordion__item { padding: var(--space-s) 10px; }
.accordion__symptom { transition: opacity var(--accordion-duration) var(--ease); }
/* Getippte Zeilen: unsichtbarer Volltext hält die endgültige Höhe,
   der getippte Text liegt darüber → nichts springt, Höhen animieren weich */
[data-typed-text] { position: relative; }
.typed-ghost { visibility: hidden; }
.typed-layer { position: absolute; inset: 0; }
/* Cursor ohne Breite: sonst bricht das letzte Wort in die nächste Zeile, solange der Cursor steht, und springt danach zurück */
.typed-layer .typed-cursor { display: inline-block; width: 0; overflow: visible; }

/* Linie oben erst mit dem ersten Eintrag zeigen, nicht vorher */
.accordion.rule-list { border-top: 0; }
.accordion__item:first-child { border-top: 1px solid var(--c-line); }

.typed-layer .typed-cursor { font-family: var(--f-sans); font-weight: 400; }
.accordion__cause-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--accordion-duration) var(--ease);
}
.accordion__cause {
  overflow: hidden;
  font-family: var(--f-serif);
  font-weight: var(--fw-cause);
  font-size: var(--fs-cause);
  letter-spacing: var(--ls-copy);   /* wie die Copy (FT Regola) */
  color: var(--c-head);              /* 2. Zeile (Ursache) in Headline-Farbe */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--accordion-duration) var(--ease),
    transform var(--accordion-duration) var(--ease);
}
.accordion__item.is-open .accordion__symptom    { opacity: var(--accordion-symptom-dim); }
.accordion__item.is-open .accordion__cause-wrap { grid-template-rows: 1fr; }
.accordion__item.is-open .accordion__cause      { opacity: 1; transform: none; }
.accordion__cause .typed-layer .typed-cursor { font-family: var(--f-serif); font-weight: var(--fw-cause); }

/* Plus/Minus-Schalter (Desktop): wird per JS in jede Zeile gesetzt (initSymptomToggles).
   Unsichtbar und nicht klickbar, bis die Zeile .is-ready ist (Sequenz s2b-open).
   Der Button liegt über der ganzen Zeile, das Zeichen sitzt rechts auf Höhe der ersten Zeile. */
.accordion__item { position: relative; padding-right: calc(10px + var(--acc-icon-size) + var(--space-s)); }
.accordion__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
  visibility: hidden;                 /* vor 2b: weder sichtbar noch per Tastatur erreichbar */
  transition: visibility 0s linear var(--acc-icon-duration);
}
.accordion__item.is-ready .accordion__toggle { visibility: visible; transition-delay: 0s; }
.accordion__icon {
  position: absolute;
  right: 10px;
  top: calc(var(--space-s) + (var(--fs-copy) * var(--lh-copy) - var(--acc-icon-size)) / 2);   /* mittig zur ersten Textzeile */
  width: var(--acc-icon-size);
  height: var(--acc-icon-size);
  color: var(--c-head);
  opacity: 0;
  transform: translateX(var(--acc-icon-shift));
  transition:
    opacity var(--acc-icon-duration) var(--ease),
    transform var(--acc-icon-duration) var(--ease),
    color var(--chip-fade) var(--ease);
}
.accordion__item.is-ready .accordion__icon { opacity: 1; transform: none; }
/* Innenteil dreht sich (getrennt vom Slide-in): + wird um die eigene Mitte zum × */
.accordion__cross { position: absolute; inset: 0; transition: transform var(--acc-icon-turn) var(--ease); }
.accordion__item.is-open .accordion__cross { transform: rotate(45deg); }

/* Plus-Zeichen aus zwei Linien (gemeinsam für #2 und das Info-Akkordeon).
   Die Linien sind exakt mittig gesetzt (ohne Verschiebung), damit die Drehung nicht eiert. */
.accordion__cross::before, .facts__icon::before,      /* waagerechter Strich */
.accordion__cross::after,  .facts__icon::after {      /* senkrechter Strich */
  content: "";
  position: absolute;
  background: currentColor;
}
.accordion__cross::before, .facts__icon::before { left: 0; right: 0; top: calc(50% - var(--acc-icon-stroke) / 2); height: var(--acc-icon-stroke); }
.accordion__cross::after,  .facts__icon::after  { top: 0; bottom: 0; left: calc(50% - var(--acc-icon-stroke) / 2); width: var(--acc-icon-stroke); }

/* Rollover: ganze Zeile in Buttonfarbe */
.accordion__symptom, .accordion__cause {
  transition-property: opacity, transform, color;
  transition-duration: var(--accordion-duration), var(--accordion-duration), var(--chip-fade);
  transition-timing-function: var(--ease);
}
@media (hover: hover) {   /* nur mit Maus: auf Touch-Geräten bliebe die Farbe nach dem Tippen sonst hängen */
  .accordion__item:has(.accordion__toggle:hover) :is(.accordion__symptom, .accordion__cause, .accordion__icon) { color: var(--acc-hover-color); }
}
.symptoms__rail-bg { display: none; }   /* nur mobil (Abschnitt 14b) */
.accordion__toggle:focus-visible { outline-offset: -2px; }


/* ==========================================================================
   11. Reduzierte Bewegung (Systemeinstellung des Besuchers)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .logo-grid { animation: none !important; }
  .logo-marquee { overflow-x: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
.contact__line .typed-layer .typed-cursor { font-family: var(--f-display); font-weight: var(--fw-h3); }


/* ==========================================================================
   12. MOBIL & TABLET  (bis 1023 px)
   --------------------------------------------------------------------------
   Prinzip: gleiche Gestaltung, eine Spalte. Elemente stehen untereinander
   statt nebeneinander, die Reihenfolge folgt dem Lesefluss.
   Der Breakpoint steht auch in main.js (MOBILE_QUERY) – bitte beide gleich halten.
   ========================================================================== */
@media (max-width: 1023px) {

  /* ---------- Einstellungen mobil ---------- */
  :root {
    --grid-margin: clamp(20px, 5vw, 48px);
    --grid-gutter: 16px;

    --fs-h1:     clamp(34px, 8.6vw, 52px);
    --fs-h2:     clamp(28px, 7vw, 40px);
    --fs-h3:     clamp(20px, 5.2vw, 24px);
    --fs-copy:   16px;
    --fs-cause:  17px;
    --fs-nav:    18px;
    --fs-logo:   20px;
    --fs-cta:    clamp(22px, 5.2vw, 24px);   /* mobil: mindestens 22px, Nav/Footer 18px */

    --space-xl:  28px;                /* H2 → Copy → Button */
    --section-pad-y: 96px;
    --section-min-h: auto;            /* Sektionen so hoch wie ihr Inhalt … */

    --nav-top-hero: 28px;
    --nav-top-bar:  16px;
    --nav-bar-pad-bottom: 14px;

    --card-pad:  28px;
    --card-h:    380px;
    --card-w:    92%;                 /* Kartenbreite im Slider (Rest: nächste Karte blitzt an) */

    --logo-scale: 0.72;               /* Logos verkleinert */
    --logo-speed: 30;                 /* Pixel pro Sekunde */
    --logo-gap:   56px;               /* Abstand zwischen zwei Logos */
    --logo-fade:  12%;
    --references-min-h: auto;
    --topics-rows: 3;                 /* Zeilen im Themen-Slider (#6) */

    --chip-pad-x: 16px;
    --chip-gap:   10px;
  }

  /* ---------- Grid: eine Spalte ---------- */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > [class*="col-"] { grid-column: 1 / -1; }

  /* ---------- Navigation ---------- */
  .site-nav__meta { gap: 18px; }

  /* ---------- #1 Hero: bleibt ein voller Viewport ---------- */
  .hero { min-height: 100svh; }
  .hero__text { max-width: none; }

  /* ---------- #2 Symptome & Ursachen ----------
     Reihenfolge: 2a → 2b, darunter der Symptom-Slider (Abschnitt 14). */
  .symptoms { padding-block: 0; row-gap: 0; }
  .symptoms > .col-1-3 { display: contents; }
  .symptoms__step {                        /* 2a und 2b: je ein Viewport; unten bleibt Platz für Akkordeon bzw. Slider */
    min-height: 100svh;
    padding: var(--section-pad-y) 0 calc(var(--slider-h, 0px) + var(--mobile-acc-h, 0px) + var(--cards-h, 0px) + var(--section-pad-y) / 2);
  }
  /* Karten-Slider: 2a ist nur so hoch wie sein Text, die Karten folgen direkt darunter */
  .symptoms--cards .symptoms__step:first-child {
    min-height: 0;
    padding-bottom: max(0px, calc(var(--cards-text-gap) - var(--cards-gap-top)));
  }
  /* 2b: Karten scrollen mit hinaus, sobald die 2b-Headline oben aus dem Fenster ist,
     aber nie bevor der ganze 2b-Text einmal über den Karten lesbar war (kleine Handys).
     --s2b-rest = Abstand Unterkante Headline → Unterkante Text (setzt main.js) */
  .symptoms--cards .symptoms__step:last-child {
    padding-bottom: max(calc(100svh - var(--s2b-rest, 0px)), var(--cards-h, 0px));
  }
  .symptoms__step:first-child { order: 1; }
  .symptoms:not(.symptoms--accordion) .symptoms__rail { display: none; }   /* Akkordeon mobil nur in der Fassung 'accordion' (14b) */
  .symptoms__step:last-child  { order: 3; }
  .symptoms .h2 { max-width: none; }
  .accordion__item { padding-inline: 0; }

  /* ---------- #3 Ansatz: Copy untereinander ---------- */
  .approach .copy + .copy { grid-row: 3; }
  .approach { row-gap: 24px; }
  .approach .h2 { margin-bottom: calc(var(--space-xl) - 24px); }

  /* ---------- #4 Angebote: Karten als Slider ---------- */
  .offers { row-gap: var(--space-xl); }
  .offers__cards {
    grid-row: 2;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--grid-margin);
    margin-inline: calc(var(--grid-margin) * -1);   /* Slider läuft bis an den Rand */
    padding-inline: var(--grid-margin);
    scrollbar-width: none;
  }
  .offers__cards::-webkit-scrollbar { display: none; }
  .offers__cards .card {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
    min-height: var(--card-h);
  }
  .offers__note { grid-row: 3; padding-left: 0.6em; }   /* Platz für das hängende * */
  .offers__cta  { grid-row: 4; justify-self: start; }

  /* ---------- #6 CTA + Footer ---------- */
  .contact { padding-bottom: 0; row-gap: var(--space-xl); }
  /* Themen: mehrzeiliger Slider (Breite der Reihen setzt JS nach --topics-rows) */
  .topics {
    grid-row: 2;
    display: block;
    overflow-x: auto;
    margin-inline: calc(var(--grid-margin) * -1);
    padding: 4px var(--grid-margin);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .topics::-webkit-scrollbar { display: none; }
  .topics__track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chip-gap);
    width: var(--topics-track-w, 900px);
  }
  .contact__answer { grid-row: 3; }
  .chip { height: 36px; font-size: 15px; }

  .site-footer {                        /* Footer folgt dem Inhalt statt am Boden zu kleben */
    position: static;
    grid-row: 4;
    width: auto;
    margin-top: 64px;
    padding: 32px 0 max(32px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
    column-gap: 16px;
  }
  .site-footer > * { grid-column: auto !important; text-align: left !important; }
  .site-footer .col-5-6 { grid-column: 1 / -1 !important; }

  /* ---------- Info-Overlay: Foto, Text, Akkordeon untereinander ---------- */
  :root { --info-top-gap: 32px; }
  .info__label  { display: none; }            /* mobil: kein Platz neben dem Logo */
  .info__inner  { padding-top: calc(var(--nav-top) + 64px); }
  .info__photo  { grid-row: 2; grid-column: 1 / -1; width: min(100%, 420px); margin: 0 0 var(--space-xl); }
  .info__meta   { grid-row: 2; grid-column: 1 / -1; margin: 0 0 var(--space-xl); }
  .info__content { grid-row: 3; grid-column: 1 / -1; }
}

/* Tablet (640–1023 px): zwei Karten sichtbar, Zeilenlänge der Copy begrenzt */
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --card-w: 46%; }
  .copy, .offers__note { max-width: 36em; }
}

/* Info-Akkordeon: obere Linie erst mit dem ersten Eintrag zeigen (Aufbau wie #2) */
.info__facts.rule-list { border-top: 0; }
.info__facts > li:first-child { border-top: 1px solid var(--c-line); }


/* ==========================================================================
   13. MOBIL: Navigation (bis 1023 px)
   Steht immer fest am oberen Rand, an derselben Stelle wie auf dem Hero.
   Runterscrollen: fährt weg (is-nav-hidden) · Hochscrollen: kommt zurück.
   Kein Wechsel der Position beim Scrollen, damit nichts springt oder flackert.
   ========================================================================== */
@media (max-width: 1023px) {
  .is-nav-pinned { --nav-top: var(--nav-top-hero); }
  .site-nav,
  .is-nav-pinned .site-nav {
    position: fixed;
    padding: var(--nav-top-hero) var(--grid-margin) var(--nav-bar-pad-bottom);
    animation: none;
    transition: transform var(--nav-hide-duration) var(--ease);
  }
  .site-nav-bar {
    height: calc(var(--nav-top-hero) + var(--fs-logo) * var(--lh-nav) + var(--nav-bar-pad-bottom) + var(--nav-fade));
  }
}


/* ==========================================================================
   14c. MOBIL: Karten-Slider #2 (CONFIG.symptomMobile = 'cards', bis 1023 px)
   Liegt direkt unter dem 2a-Text, scrollt mit ihm herein und bleibt dann am
   unteren Fensterrand stehen (sticky), bis 2b hinausscrollt. Wischen nativ mit
   Einrasten (wie Angebotskarten), Karten laufen bis an den Bildschirmrand.
   Karten nutzen die Akkordeon-Klassen (Schrift, "+", Rollover identisch).
   Höhe: Track-Höhe setzt main.js (geschlossen → einmalig geöffnet), --cards-h ebenso.
   ========================================================================== */
.symptom-cards { display: none; }
@media (max-width: 1023px) {
  .symptoms--cards > .symptom-cards {
    display: block;
    order: 2;                                             /* zwischen 2a und 2b */
    grid-column: 1 / -1;
    position: sticky;
    top: calc(100dvh - var(--cards-h, 0px));              /* scrollt mit 2a herein, bleibt dann unten stehen */
    align-self: start;
    z-index: 5;
    margin-inline: calc(var(--grid-margin) * -1);         /* Fläche über die volle Breite */
    padding: var(--cards-gap-top) 0 var(--slider-gap-bottom);
    overflow: hidden;
    isolation: isolate;
  }
  .symptom-cards__bg {                                     /* Live-Kopie des Hintergrunds (background.js → addMirror) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  .symptoms--cards > .symptom-cards::after {              /* Vignette, deckungsgleich mit body::after */
    content: "";
    position: absolute;
    top: var(--mirror-y, 0); left: 0;
    width: 100%;
    height: 100lvh;
    z-index: -1;
    background: radial-gradient(ellipse 61% 61% at 50% 50%,
      transparent 0%, transparent 62%, var(--bg-vignette) 100%);
    mix-blend-mode: var(--bg-vignette-blend);
    pointer-events: none;
  }
  .symptom-cards__track {
    display: flex;
    align-items: stretch;                                 /* alle Karten gleich hoch → Linien unten auf einer Höhe */
    gap: var(--cards-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--grid-margin);
    padding-inline: var(--grid-margin);
    scrollbar-width: none;
    transition: height var(--accordion-duration) var(--ease);   /* wächst beim ersten Öffnen */
  }
  .symptom-cards__track::-webkit-scrollbar { display: none; }
  /* Karte wie die Angebotskarten: Fläche statt Linien, linksbündig eingerastet,
     die nächste Karte blitzt rechts an (Breite --card-w, wie bei den Angeboten) */
  .symptom-cards .symptom-card {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
    padding: var(--cards-pad);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--c-cards-bg);
  }
  .symptom-cards .accordion__symptom { color: var(--c-cards-symptom); }
  .symptom-cards .accordion__cause   { color: var(--c-cards-cause); }
  .symptom-cards .accordion__icon    { display: none; }   /* kein "+" auf den Karten */
  /* Messung (kurz von main.js gesetzt): natürliche Höhe geschlossen bzw. mit Ursache */
  .symptom-cards__track.is-measuring { height: auto !important; align-items: flex-start; transition: none; }
  .symptom-cards__track.is-measuring .accordion__cause-wrap { transition: none; }
  .symptom-cards__track.is-measuring-open .accordion__cause-wrap { grid-template-rows: 1fr; transition: none; }
}


/* ==========================================================================
   14b. MOBIL: Akkordeon #2 am unteren Rand (CONFIG.symptomMobile = 'accordion', bis 1023 px)
   Gleiches Prinzip wie am Desktop (Symptome getippt, mit 2b erscheinen die "+",
   Zeilen per Tippen öffnen). Die Fläche liegt im unteren Teil von 2a, scrollt mit
   2a ein, bleibt dann unten stehen (sticky), während 2b dahinter hochscrollt, und
   scrollt am Ende von 2b mit ihm hinaus. Hintergrund: Live-Kopie des Shaders + Vignette.
   Höhe --mobile-acc-h setzt main.js (wächst mit, wenn eine Zeile aufgeht).
   Abstände oben/unten: --slider-gap-top / --slider-gap-bottom.
   ========================================================================== */
@media (max-width: 1023px) {
  .symptoms--accordion > .symptoms__rail {
    display: block;
    order: 2;                                             /* zwischen 2a und 2b */
    grid-column: 1 / -1;
    position: sticky;
    top: calc(100dvh - var(--mobile-acc-h, 0px));        /* bleibt am unteren Fensterrand stehen … */
    margin-top: calc(var(--mobile-acc-h, 0px) * -1);      /* … und liegt im Ablauf im unteren Teil von 2a */
    align-self: start;
    z-index: 5;
    margin-inline: calc(var(--grid-margin) * -1);         /* Fläche über die volle Breite … */
    padding: var(--slider-gap-top) var(--grid-margin) var(--slider-gap-bottom);   /* … Inhalt im Raster */
    overflow: hidden;
    isolation: isolate;
  }
  .symptoms--accordion .symptoms__sticky { position: static; height: auto; padding-top: 0; }
  /* Fläche erscheint mit dem ersten Symptom (vorher kein leerer Kasten) */
  .symptoms__rail-bg,
  .symptoms--accordion > .symptoms__rail::after { display: block; opacity: 0; transition: opacity var(--reveal-duration) var(--ease); }
  .symptoms__rail:has(.accordion__item.is-visible) .symptoms__rail-bg,
  .symptoms--accordion > .symptoms__rail:has(.accordion__item.is-visible)::after { opacity: 1; }
  .symptoms__rail-bg {                                     /* Live-Kopie des Hintergrunds (background.js → addMirror) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  .symptoms--accordion > .symptoms__rail::after {   /* Vignette, deckungsgleich mit body::after */
    content: "";
    position: absolute;
    top: var(--mirror-y, 0); left: 0;
    width: 100%;
    height: 100lvh;
    z-index: -1;
    background: radial-gradient(ellipse 61% 61% at 50% 50%,
      transparent 0%, transparent 62%, var(--bg-vignette) 100%);
    mix-blend-mode: var(--bg-vignette-blend);
    pointer-events: none;
  }
  .accordion__icon { right: 0; }                          /* mobil ohne Innenabstand rechts */
  .accordion__item { padding-right: calc(var(--acc-icon-size) + var(--space-s)); }
}


/* ==========================================================================
   14. MOBIL: Symptom-Slider (#2, bis 1023 px)
   Nur aktiv bei CONFIG.symptomMobile = 'slider' (erste Fassung, bleibt zum Vergleich erhalten).
   Ersetzt mobil das Akkordeon. 2a und 2b sind je ein Viewport hoch. Der Slider liegt
   im unteren Teil von 2a, scrollt mit 2a ein, bleibt dann unten stehen (sticky),
   während 2b dahinter hochscrollt, und scrollt am Ende von 2b mit ihm hinaus.
   Höhe --slider-h setzt main.js.
   Hintergrund: Live-Kopie des Shaders wie hinter der Navigation, darüber dieselbe Vignette.
   Geschwindigkeiten, Pausen und Aufteilung (untereinander / nebeneinander): CONFIG.symptomSlider (main.js).
   main.js setzt daraus --slider-duration und --slider-split.
   ========================================================================== */
.symptom-slider { display: none; }
.symptom-slider[hidden] { display: none !important; }
@media (max-width: 1023px) {
  .symptoms > .symptom-slider {
    display: block;
    order: 2;                                             /* zwischen 2a und 2b */
    grid-column: 1 / -1;
    position: sticky;
    top: calc(100dvh - var(--slider-h, 0px));             /* bleibt am unteren Fensterrand stehen … */
    margin-top: calc(var(--slider-h, 0px) * -1);          /* … und liegt im Ablauf im unteren Teil von 2a */
    align-self: start;
    z-index: 5;
    margin-inline: calc(var(--grid-margin) * -1);        /* Fläche über die volle Breite … */
    padding: var(--slider-gap-top) var(--grid-margin) var(--slider-gap-bottom);   /* … Inhalt im Raster */
    overflow: hidden;
    isolation: isolate;
  }
  /* Alles erscheint erst, wenn die Slider-Zone ganz im Bild steht (is-visible). Kein leerer Slider. */
  .symptom-slider__bg,
  .symptom-slider::after,
  .symptom-slide,
  .symptom-slider__dots { opacity: 0; }
  .symptom-slider.is-visible .symptom-slider__bg,
  .symptom-slider.is-visible::after,
  .symptom-slider.is-visible .symptom-slide,
  .symptom-slider.is-visible .symptom-slider__dots { opacity: 1; transition: opacity var(--reveal-duration) var(--ease); }
  .symptom-slider__bg {                                    /* Live-Kopie des Hintergrunds (background.js → addMirror) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  .symptom-slider::after {                                 /* Vignette, deckungsgleich mit body::after */
    content: "";
    position: absolute;
    top: var(--mirror-y, 0); left: 0;
    width: 100%;
    height: 100lvh;
    z-index: -1;
    background: radial-gradient(ellipse 61% 61% at 50% 50%,
      transparent 0%, transparent 62%, var(--bg-vignette) 100%);
    mix-blend-mode: var(--bg-vignette-blend);
    pointer-events: none;
  }
  /* Zone: Höhe = längster Eintrag im Endzustand (setzt main.js), damit nichts springt. */
  .symptom-slider__zone {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;                                   /* senkrecht scrollt die Seite, waagerecht wischt der Slider */
    user-select: none;
    -webkit-user-select: none;
  }
  /* Ein Eintrag: Linie oben und unten gehören zum Eintrag und schieben mit */
  .symptom-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: var(--space-s) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    transform: translateX(calc(var(--pos, 0) * (100% + var(--slider-gap)) + var(--drag, 0px)));
    transition:
      transform var(--slider-duration, 900ms) var(--ease),
      opacity var(--reveal-duration) var(--ease),
      grid-template-columns var(--slider-split, 700ms) var(--ease),
      column-gap var(--slider-split, 700ms) var(--ease);
  }
  .symptom-slide.no-anim,
  .symptom-slider.is-dragging .symptom-slide { transition: none; }
  .symptom-slide__symptom {
    min-width: 0;
    transition: opacity var(--accordion-duration) var(--ease);
  }
  .symptom-slide__cause {                                   /* wie .accordion__cause */
    min-width: 0;
    -webkit-hyphens: manual; hyphens: manual;             /* keine Trennung in den kurzen Sätzen */
    margin-top: 0.3em;
    font-family: var(--f-serif);
    font-weight: var(--fw-cause);
    font-size: var(--fs-cause);
    letter-spacing: var(--ls-copy);
    color: var(--c-copy);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--accordion-duration) var(--ease), visibility 0s linear var(--accordion-duration);
  }
  .symptom-slide.has-cause .symptom-slide__symptom { opacity: var(--slider-symptom-dim); }
  .symptom-slide.has-cause .symptom-slide__cause   { opacity: 1; visibility: visible; transition: opacity var(--accordion-duration) var(--ease); }
  .symptom-slide__cause .typed-layer .typed-cursor { font-family: var(--f-serif); font-weight: var(--fw-cause); }

  /* Aufteilung "nebeneinander" (CONFIG.symptomSlider.layout = 'columns'):
     Das Symptom nimmt erst die volle Breite ein, mit der Ursache halbiert es sich
     (Text bricht neu um) und die Ursache erscheint rechts daneben, ohne Trennlinie. */
  .symptom-slider[data-layout="columns"] .symptom-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; }
  .symptom-slider[data-layout="columns"] .symptom-slide.has-cause,
  .symptom-slider[data-layout="columns"].is-measuring .symptom-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--grid-gutter); }
  .symptom-slider[data-layout="columns"] .symptom-slide__cause { margin-top: 0; }

  /* Messung der Zonenhöhe im Endzustand (kurz von main.js gesetzt) */
  .symptom-slider.is-measuring .symptom-slide { position: static; inset: auto; transition: none !important; }

  /* Punkte: Position im Band, antippbar */
  .symptom-slider__dots {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    margin-left: -8px;
  }
  .symptom-slider__dot {
    width: 20px; height: 20px;                            /* große Tippfläche … */
    display: grid;
    place-items: center;
  }
  .symptom-slider__dot::before {                          /* … kleiner Punkt */
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-head);
    opacity: 0.3;
    transition: opacity 300ms var(--ease);
  }
  .symptom-slider__dot[aria-current="true"]::before { opacity: 1; }
}