/* ==========================================================================
   Psychotherapeutische Praxis Pruckner-Feichtner – Stylesheet (v5, Phase 2 in Arbeit)
   Handgeschrieben, mobile-first. Alle Werte kommen aus den Tokens in :root.
   Die Werte bilden in Phase 1 das Divi-Original 1:1 nach (gemessen am
   Live-Stand 10/2026). Phase 2 (Impeccable) kann die Skalen verdichten.

   Breakpoints (CSS-Variablen sind in @media nicht erlaubt, daher hier notiert):
     --bp-sm   481px   Überschriften 18 -> 20px
     --bp-md   768px   Handy -> Tablet (Bildwechsel, Footer)
     --bp-lg   981px   Tablet -> Desktop (Spalten, Desktop-Menü, fixierter Kopf)
     --bp-xl  1000px   Sektionsabstand 20px (Regel aus dem Original-Child-Theme)
     --bp-2xl 1350px   Zeilenabstand 27px
   ========================================================================== */

/* ---------- 1. Design-Tokens ------------------------------------------- */
:root {
  /* Farben */
  /* FARB-ROLLEN (v5, Schritt 4): Türkis in zwei Rollen, damit Text lesbar ist (WCAG AA)
     und die Markenfarbe als Fläche/Linie erhalten bleibt. */
  --color-accent: #00beb3;            /* Markenfarbe: Linien, Logo, Dekor (2,3:1 – nicht für Text) */
  --color-accent-text: var(--color-accent); /* Türkis für Text/Links/Knöpfe: vorerst = Originaltürkis (Nassi 15.10.; Kontrast 2,3:1) */
  --color-banner-bg: var(--color-accent);         /* Banner-Fläche: Originaltürkis (weiße Schrift 2,3:1) */
  --color-banner-text: var(--color-on-accent);
  --color-selection: rgb(0 190 179 / 0.25);      /* markierter Text */
  --color-text: #333333;              /* Fließtext (Variante C, abgenommen 30.10.2026; vorher #666) */
  --color-heading: #333;              /* Überschriften */
  --color-nav: #666666;               /* Menüpunkte (= 60 % Schwarz auf Weiß, als Farbe einstellbar) */
  --color-zitat: #343434;                    /* Zitatblock: drei Aussagen (Variante C) */
  --color-zitat-schluss: var(--color-heading); /* Zitatblock: Schlusszeile */
  --color-zitat-markierung: #def2f0;         /* Textmarker hinter den Zitatzeilen (Variante C: an; transparent = aus) */
  --color-footer-text: #0a0a0a;
  --color-bg: #fff;
  --color-on-accent: #fff;
  --color-surface: #f7f7f7;           /* Footer, graue Sektionen */
  --color-surface-dim: rgb(0 0 0 / 0.06);   /* Footer-Unterleiste */
  --color-tint: rgb(0 0 0 / 0.05);    /* Menüleiste mobil */
  --color-tint-soft: rgb(0 0 0 / 0.03); /* Hover, Menü-Gruppen mobil */
  --color-line: rgb(0 0 0 / 0.1);
  --color-focus: #00857d;             /* Fokusring wie v3/v4 (muss sichtbar bleiben) */

  /* Schrift */
  --font-base: "Corpo Sans", "Open Sans", Arial, sans-serif;
  /* SCHNITT-STUFEN (v5): alle Gewichte hängen an der Fließtext-Stufe.
     Fließtext Medium (500): halbfett = SemiBold 600, fett = Bold 700.
     Fließtext Regular (400): halbfett = Medium 500, fett = SemiBold 600 (Panel-Option). */
  --weight-regular: 400;              /* Fließtext-Stufe: 400 Regular (Variante C) oder 500 Medium */
  --weight-semibold: calc(var(--weight-regular) + 100);   /* Menü, Menüknopf */
  --weight-bold: calc(var(--weight-regular) + 200);       /* <strong>, Footer-Links, Menü-Gruppen */

  /* SCHRIFT-ROLLEN (v5, Schritt 2): eine Rolle = ein Regler, seitenweit.
     Gleitend zwischen 375px und 1280px Fensterbreite (Handy-Wert -> Desktop-Wert). */
  --text-fliesstext: clamp(1.0625rem, 1.0366rem + 0.1105vw, 1.125rem); /* 17 -> 18px */
  --text-klein: 0.9375rem;                                             /* 15px Bildtext, Footer */
  --text-h3: clamp(1.1875rem, 1.1357rem + 0.221vw, 1.3125rem);         /* 19 -> 21px */
  --text-h2: clamp(1.375rem, 1.2455rem + 0.5525vw, 1.6875rem);         /* 22 -> 27px */
  --text-h1: clamp(1.625rem, 1.4178rem + 0.884vw, 2.125rem);           /* 26 -> 34px */
  --text-knopf: 1.25rem;                                               /* 20px Download-Knopf, Banner */
  --measure-text: 36em;   /* max. Zeilenlänge Fließtext: gemessen ca. 70 Zeichen (ch wäre bei Corpo Sans zu breit) */

  /* Kopfbereich/Menü: Werte des Originals (bestimmen die Höhe des fixierten Kopfes) */
  --text-xs: 0.75rem;     /* 12px  Menü im verkleinerten Kopf */
  --text-sm: 0.875rem;    /* 14px  Menü-Grundgröße (Kopfhöhe) */
  --text-md: 1rem;        /* 16px  Menü */

  /* Zeilenhöhen */
  --leading-tight: 1;
  --leading-snug: 1.25;   /* Untermenü */
  /* Überschriften: Zeilenhöhe = Schriftgröße + fester Zuschlag -> je größer, desto enger
     (H1 34px -> 40px = 1,18 · H2 27 -> 33 = 1,22 · H3 21 -> 27 = 1,29; Fließtext 18 -> 28,8 = 1,6) */
  --leading-heading-plus: 0.375rem;
  --leading-heading: calc(1em + var(--leading-heading-plus));
  --tracking-text: 0em;       /* Laufweite Fließtext (Panel), 0 = wie die Schrift gebaut ist */
  --tracking-heading: 0em;    /* Laufweite Überschriften (Panel) */
  --weight-heading-plus: 200;                 /* Überschriften: 2 Stufen fetter (Variante C); 0 = wie Fließtext, 100 = 1 Stufe */
  --weight-heading: calc(var(--weight-regular) + var(--weight-heading-plus));
  --leading-body: 1.6;    /* Fließtext, Listen */
  --leading-klein: 1.5;   /* Bildtext, Texte unter Partner-Logos (15px -> 22,5px) */
  --leading-list: var(--leading-body);
  --leading-knopf: 1.2;

  --tracking-nav: -0.0625em;   /* = -1px bei 16px Menüschrift */
  --nav-groesse: 1rem;          /* Menüschrift (Desktop-Leiste und Handy-Menü) */
  --weight-nav: 500;                   /* Menü-Schnitt Desktop: Medium wie im Panel bei Variante C (dort fest 500, unabhängig vom Fließtext 400); Handy-Menü 1 Stufe fetter */

  /* Abstands-Skala (Werte des Originals, in rem) */
  --space-5: 0.3125rem;   /*  5px */
  --space-10: 0.625rem;   /* 10px */
  --space-12: 0.75rem;    /* 12px */
  --space-15: 0.9375rem;  /* 15px */
  --space-16: 1rem;       /* 16px */
  --space-18: 1.125rem;   /* 18px */
  --space-20: 1.25rem;    /* 20px */
  --space-23: 1.4375rem;  /* 23px */
  --space-25: 1.5625rem;  /* 25px */
  --space-27: 1.6875rem;  /* 27px */
  --space-29: 1.8125rem;  /* 29px */
  --space-30: 1.875rem;   /* 30px */
  --space-31: 1.9375rem;  /* 31px */
  --space-40: 2.5rem;     /* 40px */
  --space-44: 2.75rem;    /* 44px */
  --space-45: 2.8125rem;  /* 45px */
  --space-50: 3.125rem;   /* 50px */
  --space-60: 3.75rem;    /* 60px */
  --space-70: 4.375rem;   /* 70px */
  --space-para: 1em;      /* Absatzabstand */

  /* ABSTANDS-SYSTEM (v6, 16.10.2026): Abstand = Zugehörigkeit. Seite = Sektion > Block > Element.
     Was zusammengehört, steht im HTML in EINEM Block (Regeln: INHALT-REGELN.md).
     Nur 4 Stufen sind Regler; alle Einzelabstände leiten sich davon ab.
     Handy-Werte hier, Desktop-Werte (ab 981px) im :root-Block weiter unten. */
  --abstand-stufe-1: 0.75rem;   /* 12  verbunden: Bild -> Bildtext; Listenpunkt, Zitatzeile (2/3) */
  --abstand-stufe-2: 1.25rem;   /* 20  (Variante C) im Block: Überschrift -> Text, Bild/Bildtext -> Text, Text -> Knopf */
  --abstand-stufe-3: 3.75rem;   /* 60  (Variante C) Block -> Block (auch Trennbild, Karte -> Karte) */
  --abstand-stufe-4: 5rem;      /* 80  Sektion: Flächenwechsel (weiß/grau, Banner, Footer) */
  --abstand-seitenrand: 1.25rem; /* 20 Inhalt -> Bildschirmrand */
  /* abgeleitet (nicht einzeln einstellen) */
  --abstand-listenpunkt: calc(var(--abstand-stufe-1) * 2 / 3);
  --abstand-bild-bildtext: var(--abstand-stufe-1);
  --abstand-titel-text: var(--abstand-stufe-2);
  --abstand-im-block: var(--abstand-stufe-2);
  --abstand-bild-titel: calc(var(--abstand-stufe-2) * 2);    /* Kopfbild/Kartenbild -> Überschrift */
  --abstand-zwischentitel: calc(var(--abstand-stufe-2) * 2); /* Zwischentitel/H3 innerhalb eines Blocks */
  --abstand-absatz: 1em;                                     /* eine Zeile: Absatz -> Absatz, Text <-> Liste */
  --abstand-block: var(--abstand-stufe-3);
  --abstand-sektion: var(--abstand-stufe-4);
  /* SPALTEN (Abstand zwischen Spalten nebeneinander, nur ab 981px; Nassi 18.10.2026):
     in EINEM Block 48 · Block neben Block 80 (= Stufe 3, wie Block unter Block) */
  --abstand-spalte-im-block: var(--abstand-bild-titel);              /* 48  Porträt | Titel, Download-Bild | Text */
  --abstand-spalte: var(--abstand-stufe-3);                          /* 80  Karte | Karte, Liste | Liste, Text | Text */
  --abstand-banner-titel: var(--abstand-stufe-1);                    /* 12  Kontaktbalken: Titel -> Kontaktzeilen (Beschriftung) */

  /* KONTAKTBALKEN (türkis) und LAYOUT-OPTIONEN (Panel) */
  /* Kontaktbalken (Nassi 02.11.2026): alle drei Zeilen in EINER Größe (19 -> 21px, wie die Zitatzeilen),
     Titel Bold, Kontaktzeilen Medium und eng gesetzt (gehören zusammen), Titel -> Zeilen Stufe 1 */
  --text-banner: clamp(1.1875rem, 1.1357rem + 0.221vw, 1.3125rem);  /* 19 -> 21px Kontaktzeilen */
  --text-banner-titel: var(--text-banner);                           /* Titel gleich groß, nur fetter */
  --weight-banner: 500;                      /* Kontaktzeilen Medium (vorher 600) */
  --weight-banner-titel: 700;                /* Titel Bold (vorher 600) */
  --layout-trennbild: 100%;                  /* Trennbilder: ganze Inhaltsbreite (Variante C) oder var(--measure-text) */
  --layout-karte-einzeln: 100%;              /* Karte allein in einer Zeile (Startseite: Paar-Bild): 100% = ganze Inhaltsbreite (Nassi 18.10.2026) oder var(--measure-text) */
  --layout-adresse-therapeut: none;          /* graue Adressleiste auf den 6 Seiten mit Kontaktbalken (Therapeut:innen + Geschichten): block = zeigen, none = aus (Nassi 02.11.2026: aus, sonst doppelt) */

  /* Raster (Divi "Gutter 3") */
  --container-width: calc(100% - 2 * var(--abstand-seitenrand));
  --container-max: 67.5rem;     /* 1080px */
  --container-narrow: 50rem;    /* 800px  Banner-Text */
  --measure-intro: 40.625rem;   /* 650px  Einleitungstexte */
  --measure-caption: 28.125rem; /* 450px  Bildunterschrift Geschichte */
  --media-narrow: 37.5rem;      /* 600px  Titelbild Themenseiten */
  --gutter: 5.5%;
  --col-1-2: 47.25%;
  --col-1-3: 29.6667%;
  --col-2-3: 64.833%;
  --col-1-4: 20.875%;
  --col-3-4: 73.625%;
  --fullwidth-pad: 0px;

  /* Kopfbereich */
  --header-logo-h: 3.75rem;        /* 60px mobil */
  --header-logo-area: 10.375rem;   /* 166px Desktop */
  --header-logo-scale: 60%;        /* Logo = 60 % der Logo-Zone */
  --header-logo-area-fixed: 4.375rem; /* 70px beim Scrollen */
  --nav-link-pad: var(--space-30);
  --nav-item-gap: var(--space-16);
  --nav-word-gap: 0.2em;           /* Leerzeichen zwischen Menüpunkten im Original (inline-block) */
  --nav-arrow-space: var(--space-20);
  --dropdown-width: 15rem;         /* 240px */
  --dropdown-link-width: 12.5rem;  /* 200px */
  --menu-icon: 2rem;               /* 32px */
  --nav-schrift: var(--nav-groesse); /* Menü-Schriftgröße oben (Desktop); schmalere Desktops: höchstens kleiner, siehe Menü-Stufen */
  /* Startseite oben: Luft über dem Menü so, dass die Großbuchstaben genau mittig im Kopfbalken sitzen
     (gemessen: unten 32 px frei; bei kleinerer Menüschrift liegt die Versalhöhe tiefer -> etwas weniger Luft) */
  --kopf-luft: calc(2rem - (var(--text-md) - var(--nav-schrift)) * 0.75);
  --icon-pin: url("symbol-ort.svg");   /* Ortssymbol (Kartenplatzhalter) */
  --header-overlap: 2px;           /* mobil überlappt der Kopf den Inhalt um 2px (wie im Original) */

  /* Formen */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --border-accent: 3px solid var(--color-accent);
  --shadow-header: 0 1px 0 var(--color-line);
  --shadow-header-fixed: 0 0 7px var(--color-line);
  --shadow-dropdown: 0 2px 5px var(--color-line);

  /* Bewegung */
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --ease: ease-in-out;

  --logo-card-max: 34.375rem;    /* 550px */
  --map-height: 21.875rem;        /* 350px wie die Original-Einbettung */

  /* Hero (Startseite, Angebot & Kosten): Höhe wie im Original 80 % des Fensters */
  --hero-height: 80vh;
  --hero-mobile-shift: 10vh;
}

@media (min-width: 981px) {
  :root {
    --abstand-stufe-1: 0.75rem;      /* 12 */
    --abstand-stufe-2: 1.75rem;      /* 28 (Variante C) */
    --abstand-stufe-3: 5rem;         /* 80 */
    --abstand-stufe-4: 7.5rem;       /* 120 */
    --abstand-seitenrand: 2.5rem;    /* 40 (darüber begrenzt --container-max die Breite) */
  }
}
@media (min-width: 1000px) {
  :root { --fullwidth-pad: var(--space-20); }
}

/* ---------- 2. Schrift ------------------------------------------------- */
/* Corpo Sans: echte Schnitte (v5, 15.10.2026; Dateien aus dem Webfont-Paket von Nassi).
   Medium = unveränderte Datei wie bisher (Fließtext identisch). Neu: SemiBold, Bold und Kursiv,
   damit <strong>, <em> und fettere Überschriften nicht mehr vom Browser errechnet werden.
   Der Browser lädt einen Schnitt nur, wenn er auf der Seite wirklich vorkommt. */
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-semibold-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Corpo Sans"; src: url("fonts/corpo-sans-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* Figtree (SIL Open Font License, Datei fonts/Figtree-OFL.txt): Schrift-Logos der Partnerseite.
   Ersetzt die SVG-Bilder (Avenir Next), Freigabe Nassi 15.10.2026. */
@font-face { font-family: "Figtree"; src: url("fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- 3. Grundlagen ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; } /* Gewicht 0: die Abstands-Regler gewinnen immer */

body {
  font-family: var(--font-base);
  font-size: var(--text-fliesstext);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-text);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3, h4, h5, h6 { font-size: var(--text-h3); }
/* Corpo Sans gibt es nur als "Medium"; ein <strong> in Überschriften würde vom Browser
   künstlich fett gerechnet. Die Rangordnung tragen Größe und Abstand (PLAN-v5.md 2.1). */
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
h1, h2, h3 { text-wrap: balance; }


strong, b { font-weight: var(--weight-bold); }

a { color: var(--color-accent-text); text-decoration: none; }
/* Links im Fließtext: Farbe allein reicht nicht (WCAG 1.4.1) -> dezent unterstrichen */
:is(.prose, .download__text, .contact-note, .logo-card__text, .site-footer) a:not(.button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease);
}
:is(.prose, .download__text, .contact-note, .logo-card__text, .site-footer) a:not(.button):hover { text-decoration-color: currentColor; }
::selection { background: var(--color-selection); }

img { max-width: 100%; height: auto; border: 0; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: var(--space-10);
  top: var(--space-10);
  z-index: 100000;
  padding: var(--space-10) var(--space-15);
  background: var(--color-bg);
  color: var(--color-heading);
  box-shadow: var(--shadow-dropdown);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 4. Kopfbereich + Hauptmenü --------------------------------- */
.site-header {
  position: relative;
  z-index: 1000;
  background: var(--color-bg);
  box-shadow: var(--shadow-header);
  padding-block: var(--space-20);
  line-height: 23px;
}
.site-header { margin-bottom: calc(-1 * var(--header-overlap)); }
.site-header__inner {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}
.site-header__logo { display: inline-block; vertical-align: middle; }
.site-header__logo img { display: block; width: auto; height: var(--header-logo-h); }

/* Menü-Schalter (mobil) */
.nav-toggle {
  position: relative;
  display: block;
  width: 100%;
  margin-top: var(--space-20);
  padding: var(--space-5) var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 23px;
  text-align: left;
  cursor: pointer;
}
.nav-toggle__icon {
  position: absolute;
  right: var(--space-5);
  top: 2px;
  width: var(--menu-icon);
  height: var(--menu-icon);
  color: var(--color-accent-text);
}

/* Menüliste mobil (aufgeklappt) */
.main-nav { position: relative; }
.main-nav__list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + var(--space-20));   /* klappt an der Unterkante des Kopfbereichs auf */
  width: 100%;
  padding: 5%;
  list-style: none;
  text-align: left;
  background: var(--color-bg);
  border-top: var(--border-accent);
  box-shadow: var(--shadow-dropdown);
  font-weight: min(calc(var(--weight-nav) + 100), 700);
}
.main-nav.is-open .main-nav__list { display: block; }
.main-nav__list a {
  display: block;
  padding: var(--space-10) 5%;
  border-bottom: 1px solid var(--color-tint-soft);
  color: var(--color-nav);
  font-size: var(--nav-groesse);
}
.main-nav__item--parent > a { font-weight: min(calc(var(--weight-nav) + 200), 700); background: var(--color-tint-soft); }
.main-nav__sub { list-style: none; padding-left: var(--space-10); }
.main-nav__sub li { padding-left: 5%; }
.main-nav__list a:hover { background: var(--color-tint-soft); opacity: 0.7; }
.main-nav__arrow { display: none; }

@media (max-width: 767px) {
  .main-nav__item--highlight { background: rgb(0 0 0 / 0.03); }
}

@media (min-width: 981px) {
  :root { --header-overlap: 1px; }
  body { padding-top: calc(var(--header-logo-area) + var(--space-5) + var(--nav-link-pad) + var(--text-sm) - var(--header-overlap)); }
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    margin-bottom: 0;
    padding: 0;
    transition: box-shadow var(--duration-base) var(--ease);
  }
  .site-header__inner { width: auto; max-width: none; padding-inline: var(--space-30); }
  .site-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-logo-area);
    transition: height var(--duration-base) var(--ease);
  }
  .site-header__logo img { height: var(--header-logo-scale); }
  .nav-toggle { display: none; }

  .main-nav { display: flex; justify-content: center; padding-top: var(--space-5); }
  .main-nav__list {
    display: flex;
    position: static;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    column-gap: var(--nav-word-gap);
  }
  .main-nav__list > li { position: relative; padding-right: var(--nav-item-gap); font-size: var(--text-sm); line-height: 1em; }
  .main-nav__list a {
    position: relative;
    padding: 0;
    border: 0;
    color: var(--color-nav);
    font-size: var(--text-md);
    font-weight: var(--weight-nav);   /* Panel: Menü-Schnitt (Standard = Fließtext-Stufe) */
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    transition: opacity var(--duration-base) var(--ease);
  }
  .main-nav__list > li > a { padding-bottom: var(--nav-link-pad); line-height: inherit; white-space: nowrap; }
  .main-nav__list > li > a:hover { opacity: 0.7; background: none; }
  .main-nav__item--parent > a { background: none; font-weight: var(--weight-nav); padding-right: var(--nav-arrow-space); }
  /* Pfeil wie im Divi-Original: Zeichen „3“ der Divi-Symbolschrift ETmodules als Umriss (assets/pfeil-unten.svg),
     16 × 16 px, 1 px über der Oberkante (Zeilenhöhe 14 px), Farbe wie die Menüschrift. Die Symbolschrift selbst wird nicht geladen. */
  .main-nav__item--parent > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: -1px;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("pfeil-unten.svg") center / 100% 100% no-repeat;
    mask: url("pfeil-unten.svg") center / 100% 100% no-repeat;
  }
  .main-nav__list a[aria-current="page"],
  .main-nav__list .is-current-parent > a { color: var(--color-accent-text); }

  /* Dropdown */
  .main-nav__sub {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;
    width: var(--dropdown-width);
    padding: var(--space-20) 0;
    background: var(--color-bg);
    border-top: var(--border-accent);
    box-shadow: var(--shadow-dropdown);
    text-align: left;
    line-height: var(--leading-snug);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease), visibility var(--duration-fast);
  }
  .main-nav__sub li { padding: 0 var(--space-20); line-height: 1.25em; }
  .main-nav__sub a {
    width: var(--dropdown-link-width);
    padding: 6px var(--space-20);
    line-height: inherit;
  }
  .main-nav__sub a:hover { background: var(--color-tint-soft); opacity: 0.7; }
  .main-nav__item--parent:hover > .main-nav__sub,
  .main-nav__item--parent:focus-within > .main-nav__sub,
  .main-nav__item--parent.is-open > .main-nav__sub { visibility: visible; opacity: 1; }
  .main-nav__item--parent.is-closed > .main-nav__sub { visibility: hidden; opacity: 0; }
  .main-nav__item--highlight { background: none; }
  /* letztes Untermenü („Unsere Praxis“) rechtsbündig, sonst ragt es bei schmalen Desktops über den Rand (16.10.) */
  .main-nav__list > li:last-child > .main-nav__sub { left: auto; right: 0; }

  /* verkleinerter Kopf beim Scrollen (wie Divi "fixierte Navigation") */
  .site-header.is-scrolled { box-shadow: var(--shadow-header-fixed); }
  .site-header.is-scrolled .site-header__logo { height: var(--header-logo-area-fixed); }
  /* Menüschrift bleibt beim Scrollen gleich (wie im Divi-Original gemessen: 16 px, Abstand 30 px) */
}

/* Menü einzeilig halten (v5): 16px passt erst ab ca. 1210px; darunter kleiner und enger (gemessen) */
@media (min-width: 981px) and (max-width: 1209px) {
  :root { --nav-item-gap: 0.625rem; --nav-schrift: min(var(--nav-groesse), var(--text-sm)); }
}
@media (min-width: 981px) and (max-width: 1034px) {
  :root { --nav-schrift: min(var(--nav-groesse), 0.8125rem); }
}
@media (min-width: 981px) { .main-nav__list > li > a { font-size: var(--nav-schrift); } }

/* ---------- 5. Layout: Sektion, Zeile, Spalte -------------------------- */
.section { padding-block: var(--abstand-block) var(--abstand-sektion); }
.section--surface { background: var(--color-surface); padding-block: var(--abstand-sektion); }
/* weiße Fläche vor grauer: Abstand liefert die graue Fläche */
.section:not(.section--surface):has(+ .section--surface) { padding-bottom: var(--abstand-block); }
.section--surface + .section:not(.section--surface) { padding-top: var(--abstand-block); }
/* mehrere graue Flächen hintereinander wirken als eine; dazwischen Kartenabstand */
.section--surface:has(+ .section--surface) { padding-bottom: var(--abstand-block); } /* Karte -> Karte */
.section--surface + .section--surface { padding-top: 0; }

.row {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- 6. ABSTANDS-FLUSS (v6) ------------------------------------
   Der Abstand entsteht oben am folgenden Element. Er hängt NICHT vom Nachbarn ab, sondern davon,
   ob beide im selben Block stehen (Zugehörigkeit steht im HTML):
     - Alles, was direkt in einer Sektion oder Zeile steht, ist ein eigener Block  -> Stufe 3.
     - .block--kopf (Kopfbild + Titel + Text) und .karte (Bild + Bildtext + Text) sind EIN Block.
     - Innerhalb eines Textbausteins: Absatz 1 Zeile, Überschrift -> Text Stufe 2.
   Allgemeine Regeln mit :where (Gewicht 0), damit die Block-Regeln immer gewinnen. */

/* a) Block -> Block */
:where(.section, .row, .col) > * + * { margin-top: var(--abstand-block); }
/* Fortsetzung desselben Textes in einem zweiten Baustein (ohne eigene Überschrift) */
:where(.row, .col, .karte) > .prose:not(.caption) + .prose:not(:has(> :is(h1, h2, h3, h4):first-child)) { margin-top: var(--abstand-absatz); }

/* b) Bild -> Bildtext: immer verbunden */
figure + .caption { margin-top: var(--abstand-bild-bildtext); }
figure + .caption--intro { margin-top: var(--abstand-im-block); }   /* Einleitungstext unter dem Bild ist Text, kein Bildtext */

/* c) Kopf: Kopfbild + Titel + Text = ein Block */
.block--kopf > * + * { margin-top: var(--abstand-bild-titel); }

/* d) Karte: Bild + Bildtext + Text = ein Block */
.karte > * + * { margin-top: var(--abstand-im-block); }
.karte > figure + .caption { margin-top: var(--abstand-bild-bildtext); }
.karte > figure + .caption--intro { margin-top: var(--abstand-im-block); }
.karte > :is(figure, .caption) + :is(.download, .prose:has(> :is(h1, h2, h3):first-child)) { margin-top: var(--abstand-bild-titel); }

/* e) Spalten, die am Handy untereinander stehen */
@media (max-width: 980px) {
  .row.block--kopf > .col + .col { margin-top: var(--abstand-bild-titel); }   /* Porträt -> Titel */
  .row.karte > .col + .col { margin-top: var(--abstand-bild-titel); }         /* Download-Bild -> Titel */
}

/* f) Text: Absätze, Zwischentitel, Listen (in jedem Textbaustein) */
:where(.prose, .download, .download__text, .download__text > div, .caption, .banner__inner, .logo-card__text) > * + * { margin-top: var(--abstand-absatz); }
:where(.prose, .download, .download__text, .download__text > div, .caption, .banner__inner, .logo-card__text) > * + :is(h1, h2, h3, h4, h5, h6, .zwischentitel) { margin-top: var(--abstand-zwischentitel); }
:where(.prose, .download, .download__text, .download__text > div, .caption, .banner__inner, .logo-card__text) > :is(h1, h2, h3, h4, h5, h6, .zwischentitel) + * { margin-top: var(--abstand-titel-text); }
.download > * + .download__action { margin-top: var(--abstand-im-block); }
.prose li + li { margin-top: var(--abstand-listenpunkt); }

@media (min-width: 981px) {
  .row--halves, .row--thirds, .row--wide-narrow, .row--narrow-wide, .row--quarter {
    display: grid;
    align-items: start;
  }
  .row > .col + .col { margin-top: 0; }
  /* SPALTENABSTAND (v6, 16.10.2026; vereinfacht 18.10.2026): nach Zugehörigkeit wie die senkrechten Abstände.
     Spalten innerhalb EINES Blocks (Kopf: Porträt | Titel; Karte: Bild | Text) -> 48 (Stufe 2 × 2).
     Eigenständige Blöcke nebeneinander (Karte | Karte, Liste | Liste, Text | Text) -> 80 (Stufe 3),
     genau wie Block -> Block untereinander. (Bis 17.10.: 60 = Stufe 3 × ¾ und eine ungenutzte Stufe 80 für
     »wirklich getrennt«; 56 vs. 60 war mit Variante C nicht unterscheidbar, Nassi 18.10.)
     Spaltenbreiten teilen den Platz nach dem Abstand auf (Verhältnisse wie bisher). */
  .row--halves, .row--thirds, .row--wide-narrow, .row--narrow-wide, .row--quarter { column-gap: var(--abstand-spalte); }
  .row:is(.block--kopf, .karte) { column-gap: var(--abstand-spalte-im-block); }
  .row--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row--wide-narrow { grid-template-columns: minmax(0, 64.833fr) minmax(0, 29.6667fr); }
  .row--narrow-wide { grid-template-columns: minmax(0, 29.6667fr) minmax(0, 64.833fr); }
  .row--quarter { grid-template-columns: minmax(0, 20.875fr) minmax(0, 73.625fr); }
  /* Galerie: Divi-Raster unverändert (Prozent-Spalten, 5,5 % Zwischenraum; Wunsch Nassi) */
  .galerie > .row { column-gap: var(--gutter); }
  .galerie > .row--wide-narrow { grid-template-columns: var(--col-2-3) var(--col-1-3); }
  .galerie > .row--narrow-wide { grid-template-columns: var(--col-1-3) var(--col-2-3); }
}

/* ---------- 7. Textbaustein -------------------------------------------- */
.prose { overflow-wrap: break-word; max-width: var(--measure-text); }
.prose--center, .row > .prose { margin-inline: auto; } /* einspaltiger Text mittig unter dem Bild */
.prose--right { margin-left: auto; }
.prose ul {
  list-style: disc;
  padding: 0 0 0 1em;
  line-height: var(--leading-list);
}
.prose ul ul { padding: 2px 0 2px var(--space-20); }
.prose--center { text-align: center; }
.prose--right { text-align: right; }
/* Handy: Divi zeigte hier eine eigene Handy-Fassung (gleicher Text, linksbündig) */
@media (max-width: 767px) { .prose--right { text-align: left; } }
.text-center { text-align: center; }

/* ---------- 7b. Bild --------------------------------------------------- */
.media { line-height: 0; }
.media--narrow { max-width: var(--media-narrow); margin-inline: auto; }
.media--center { text-align: center; }
.media--full img { width: 100%; }
.media a { display: inline-block; max-width: 100%; }

/* ---------- 8. Hero (Vollbild oben) ----------------------------------- */
.hero {
  box-sizing: content-box;
  height: var(--hero-height);
  padding-block: var(--fullwidth-pad);
  line-height: 0;
}
.hero img { display: block; width: 100%; }
.hero--mobile { position: relative; top: var(--hero-mobile-shift); }
@media (max-width: 767px) { .hero--desktop { display: none; } }
@media (min-width: 768px) { .hero--mobile { display: none; } }

/* ---------- 9. Banner (Terminvereinbarung) ----------------------------- */
.banner {
  padding-block: var(--fullwidth-pad);
  background: var(--color-banner-bg);
  background-clip: content-box;
  color: var(--color-banner-text);
  font-size: var(--text-knopf);
  text-align: center;
}
.banner__inner {
  width: calc(var(--container-width) * 0.8);
  max-width: calc(var(--container-max) * 0.8);
  margin-inline: auto;
  padding: calc(var(--space-50) + var(--space-20) + var(--space-10)) var(--space-10);
}
.banner--narrow .banner__inner { max-width: var(--container-narrow); }
.banner h1, .banner h2, .banner h3 { color: var(--color-banner-text); }
.banner a { color: var(--color-banner-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.banner :focus-visible { outline-color: var(--color-banner-text); }
.banner p { padding-bottom: 0; }
/* Banner direkt vor dem Footer: kein weißer Spalt zur grauen Kontaktleiste (16.10.) */
main > .banner:last-child { padding-bottom: 0; }
/* Kontaktbalken: eigene Schrift (Panel) und Titel als Beschriftung der Kontaktzeilen -> verbunden (Stufe 1) */
.banner { font-size: var(--text-banner); font-weight: var(--weight-banner); }
.banner p { line-height: var(--leading-heading); }                 /* Telefon + E-Mail eng: eine Einheit */
.banner :is(h1, h2, h3) { font-size: var(--text-banner-titel); font-weight: var(--weight-banner-titel); }
.banner a { text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }  /* Unterstrich zurückhaltend */
.banner a:hover { text-decoration-color: currentColor; }
.banner__inner > :is(h1, h2, h3) + * { margin-top: var(--abstand-banner-titel); }
/* Panel-Optionen (Standard = wie bisher) */
.row > .media.bild--trenn:not(.media--full) { max-width: var(--layout-trennbild); } /* stärker als die allgemeine Bildbreiten-Regel */
/* Adressleiste entfällt, wo der Kontaktbalken direkt darüber steht (HTML bleibt gleich, nur ausgeblendet) */
:is(.page-therapist, .page-story) .site-footer__info { display: var(--layout-adresse-therapeut); }

/* ---------- 10. Footer ------------------------------------------------- */
.site-footer { background: var(--color-surface); font-size: var(--text-klein); }
/* Abstände in % beziehen sich (wie im Original) auf die Inhaltsbreite (80 %, max. 1080px) */
.site-footer__info {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
  color: var(--color-footer-text);
  text-align: center;
}
.site-footer__info p { max-width: var(--measure-text); margin-inline: auto; padding-block: var(--abstand-block); } /* v5: mittig, Regler statt Divi-Prozentwerte */
.site-footer__bottom {
  padding: var(--space-15) 0 var(--space-5);
  background: var(--color-surface-dim);
}
.site-footer__bottom p {
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-bottom: var(--space-10);
  text-align: center;
}
.site-footer__bottom a { color: var(--color-text); font-weight: var(--weight-bold); transition: opacity var(--duration-base) var(--ease); }
.site-footer__bottom a:hover { opacity: 0.7; }
/* Trennstriche im Footer: je Seite zwei Leerzeichen breit (Wunsch Nassi 16.10.) */
.site-footer .trenner { margin-inline: 0.25em; }

/* ---------- 11. Bewegung ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Bildunterschrift unter Porträts (Name + Berufsbezeichnung) */
.caption { font-size: var(--text-klein); line-height: var(--leading-klein); }
.caption--narrow { max-width: var(--measure-caption); margin-inline: auto; }
.caption--intro { font-size: inherit; max-width: var(--measure-intro); margin-inline: auto; } /* Einleitungstext unter dem Bild, kein Bildtext */
.intro { max-width: var(--measure-intro); margin-inline: auto; }

/* Sichtbarkeit je Bildschirmgröße (wie Original: eigenes Bild fürs Handy) */
@media (max-width: 767px) { .only-tablet-up { display: none; } }
@media (min-width: 768px) { .only-mobile { display: none; } }

/* Schaltfläche (Download, Karte laden) */
.button {
  display: inline-block;
  padding: 0.3em 1em;
  border: 2px solid currentColor;
  border-radius: var(--radius-xs);
  color: var(--color-accent-text);
  font-size: var(--text-knopf);
  line-height: var(--leading-knopf);
  transition: background-color var(--duration-fast) var(--ease);
}
.button:hover { background-color: var(--color-tint); }
/* Knopf-Text senkrecht exakt mittig (16.10.): Zeile auf Versalhöhe bis Grundlinie zuschneiden, dann
   gleiches Polster oben und unten. Knopfhöhe bleibt gleich (Polster = (Zeilenhöhe 1,2 − Versalhöhe 0,674) / 2 + 0,3).
   Ältere Browser ohne text-box behalten die bisherige Darstellung. */
@supports (text-box: trim-both cap alphabetic) {
  .button { text-box: trim-both cap alphabetic; padding-block: calc((var(--leading-knopf) - 0.674) * 0.5em + 0.3em); }
}

/* Karte (lädt erst nach Klick) */
.map__placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-15);
  min-height: var(--map-height);
  padding: var(--space-30);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  text-align: center;
}
/* Ortssymbol als Hinweis auf die Karte (Dekor, kein Text) */
.map__placeholder::before {
  content: "";
  justify-self: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-accent);
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
  mask: var(--icon-pin) center / contain no-repeat;
}
.map__placeholder p { padding-bottom: 0; max-width: var(--measure-text); margin-inline: auto; }
.map__placeholder p a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.map iframe { display: block; width: 100%; height: var(--map-height); border: 0; }

/* Bildvergrößerung */
.lightbox-dialog {
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox-dialog::backdrop { background: rgb(0 0 0 / 0.8); }
.lightbox-dialog img { display: block; max-width: 95vw; max-height: 90vh; width: auto; height: auto; }
.lightbox-dialog__close {
  position: absolute;
  top: calc(-1 * var(--space-40));
  right: 0;
  border: 0;
  background: none;
  color: var(--color-on-accent);
  font-size: var(--space-30);
  line-height: 1;
  cursor: pointer;
}

/* ---------- 13. Seitenvorlagen ----------------------------------------- */
/* Themenseiten: Titelbild max. 600px, zentriert */
.row > .media:not(.media--full) { max-width: var(--measure-text); margin-inline: auto; } /* einspaltig: Bild so breit wie der Text */
.row > .media:not(.media--full) :is(a, img) { display: block; width: 100%; }
/* einspaltige Karte (Startseite: Paar-Karte): Breite per Layout-Option, Standard ganze Inhaltsbreite (18.10.2026);
   Bildtext und Text bleiben so breit wie die Textspalte, mittig. In Spaltenzeilen begrenzt die Spalte selbst. */
.row > .karte { max-width: var(--layout-karte-einzeln); margin-inline: auto; }
.row > .karte > .media :is(a, img) { display: block; width: 100%; }
.row > .karte > .prose { margin-inline: auto; }

/* Therapeut:innen-Seiten */
.quote { max-width: none; text-wrap: balance; }   /* Zitatblock: volle Breite, damit jede Aussage einzeilig bleibt */
.quote > p { font-size: var(--text-h3); }
/* Zeile = Größe + 12 px (statt + 6 px): Platz für die höhere Markierung, auch wenn eine Aussage am Handy umbricht */
.quote > :is(p, h2, h3) { line-height: calc(1em + 0.75rem); }
.quote > p + p { margin-top: var(--abstand-listenpunkt); }      /* drei Aussagen eng zusammen */
.quote > :is(h2, h3) { font-size: var(--text-h2); margin-top: var(--abstand-absatz); } /* Schlusszeile größer, eine Zeile Abstand */
.quote > p { color: var(--color-zitat); }
.quote > :is(h2, h3) { color: var(--color-zitat-schluss); }
/* Textmarker (Panel, standardmäßig aus): Fläche liegt hinter jeder Textzeile, auch wenn eine Aussage am Handy
   umbricht (box-decoration-break). Die Fläche ist genau so hoch wie die Schrift (Ober- bis Unterlänge, 1,224 em)
   und damit niedriger als die Zeile (Größe + 6 px): zwischen zwei Aussagen bleibt so immer mindestens der
   Zeilenabstand Stufe 1 · ⅔ (8 px) frei. Seitlich 0,3 em Luft, damit die Schrift nicht am Rand klebt.
   Nachjustiert (Nassi 02.11.2026): Fläche gut 4 px höher, oben 0,15 em / unten 0,05 em -> Großbuchstaben stehen
   optisch mittig (Corpo Sans hat unter der Grundlinie mehr Raum als über den Versalien). Seitlich 0,4 em. */
.zitat-zeile { background: var(--color-zitat-markierung); padding: 0.15em 0.4em 0.05em; border-radius: 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Geschichte-Seiten */
.media--center { text-align: center; }

/* Galerie (Praxisräume, Unsere Praxis): EIN Block (.galerie), System wie v4/Original (Wunsch Nassi 15.10.).
   Spalten 64,8 % / 29,7 % mit 5,5 % Zwischenraum -> Quer- und Hochformat-Fotos gleich hoch.
   Bildabstände bewusst FEST (Desktop 70 px, Handy/Tablet 30 px), nicht im Panel. */
.page-gallery .media img { width: 100%; }
.galerie > .row + .row { margin-top: 1.875rem; }
@media (max-width: 980px) {
  .galerie .row > .col + .col { margin-top: 1.875rem; }
  .page-gallery .media { text-align: center; }
}
@media (min-width: 981px) {
  .galerie > .row + .row { margin-top: 4.375rem; }
}

/* Partner (15.10.2026, Wunsch Nassi): ein durchgehendes, unsichtbares Raster.
   Jede Karte = Logo + (optional) Text als Einheit, immer gleicher Abstand Logo -> Text.
   Desktop: 3 Spalten, ALLE Zellen gleich hoch (so hoch wie die höchste Karte); jede Karte sitzt
   in ihrer Zelle waagrecht und senkrecht mittig. Handy: eine Spalte, Karten mit festem Abstand. */
.partner-raster { display: flex; flex-direction: column; gap: var(--abstand-block); }
.partner-raster > .logo-card { margin: 0; }
.logo-card { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-bild-bildtext);
  max-width: var(--logo-card-max); margin-inline: auto; text-align: center; }
.logo-card__logo { display: block; max-width: 100%; line-height: 0; transition: opacity var(--duration-base) var(--ease); }
.logo-card__logo:hover { opacity: 0.7; }
.logo-card__logo img { max-width: 100%; height: auto; }
.logo-card--compact { line-height: 1em; }
/* Text unter den Logos in Bildtext-Größe (wie "verheiratet, Mama …" auf den Geschichte-Seiten) */
.logo-card__text { font-size: var(--text-klein); line-height: var(--leading-klein); }
/* Schrift-Logos als Text (Optik wie die bisherigen SVGs: Grau #999, Titel normal, Name fett) */
.textlogo { display: block; font-family: "Figtree", var(--font-base); font-size: 1.25rem; line-height: 1.25;
  color: #999; letter-spacing: 0.01em; text-wrap: balance; }
.textlogo__titel { font-weight: 400; }
.textlogo__name { font-weight: 700; }
.logo-card__logo--text { line-height: inherit; }
@media (min-width: 981px) {
  .partner-raster { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
    column-gap: var(--abstand-spalte); row-gap: var(--abstand-block); align-items: center; justify-items: center; } /* Spalten 80, Reihen 80 */
  .logo-card { gap: var(--abstand-bild-bildtext); }
}

/* Downloads (Publikationen, Seminare): Rahmen um die Vorschaubilder (16.10.: 2 px statt 1 px).
   Hover: das ganze Bild samt Rahmen hebt sich leicht an (vorher wurde nur das Bild im Rahmen
   vergrößert und der Rahmen dabei abgeschnitten). */
.page-downloads .media img { border: 2px solid rgb(0 0 0 / 0.15); }
.page-downloads a.lightbox { overflow: visible; transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); }
.page-downloads a.lightbox:hover { transform: scale(1.02); opacity: 0.92; }
.page-downloads a.lightbox:hover img { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-downloads a.lightbox:hover { transform: none; } }
@media (max-width: 980px) { .page-downloads .media { text-align: center; } }

/* Kontakt */
.contact-note__text { text-align: left; }
@media (min-width: 981px) { .contact-note__text { text-align: center; } }

/* Neue H1 (v5): vorhandene Titelzeile, Text unverändert */
.caption__name { text-align: center; }

/* Kopf beim Scrollen (Wunsch Nassi, 15.10.2026), nachgebaut nach dem gemessenen Divi-Original:
   - Alle Seiten: der kleine Kopf kommt erst nach 230 px Scrollweg (Divi-Schwelle), Übergang 0,4 s
     ease-in-out, Logo skaliert stufenlos mit der Logo-Fläche (166 -> 70 px), Menüschrift bleibt gleich
     (Divi: 215 -> 119 px Kopfhöhe).
   - Startseite: oben nur das Menü (keine Logo-Fläche, das große Logo steht im Titelbild). Schon beim
     Losscrollen gestaffelt: Menü gleitet nach unten, Logo blendet mit kurzer Verzögerung ein und
     wächst dabei sanft auf; zurück: Logo verschwindet zuerst, dann schließt sich die Fläche.
   Schwellen setzt menue.js (Klasse is-scrolled). Logo bleibt im HTML (Link + Alt-Text unverändert). */
@media (min-width: 981px) {
  .page-home { padding-top: calc(var(--kopf-luft) + var(--nav-link-pad) + var(--text-sm) - var(--header-overlap)); }
  .page-home .site-header__logo { overflow: hidden; transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
  .page-home .site-header:not(.is-scrolled) .site-header__logo { height: 0; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.12s; }
  .page-home .site-header__logo img { opacity: 1; transform: none; transform-origin: 50% 100%;
    transition: opacity 0.35s ease-out 0.2s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  .page-home .site-header:not(.is-scrolled) .site-header__logo img { opacity: 0; transform: scale(0.85);
    transition: opacity 0.18s ease-in 0s, transform 0.25s ease-in 0s; }
  .page-home .main-nav { transition: padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
  .page-home .site-header:not(.is-scrolled) .main-nav { padding-top: var(--kopf-luft); transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.12s; }
  .site-header { transition: box-shadow var(--duration-base) var(--ease); }
}
/* Handy/Tablet: Kopf scrollt mit weg, das Logo käme nie zurück -> Fläche auf der Startseite ganz einsparen */
@media (max-width: 980px) { .page-home .site-header__logo { display: none; } .page-home .nav-toggle { margin-top: 0; } }

/* Hochgestelltes a bei Mag.a (ohne die Zeilenhöhe zu verändern) */
sup { position: relative; top: -0.5em; font-size: 0.62em; line-height: 0; vertical-align: baseline; }

/* Hover-Zustände (v5, Wunsch Nassi 15.10.): alles Klickbare reagiert, ruhig und einheitlich */
.site-header__logo { transition: height var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); } /* Höhe: Divi-Übergang 0,4 s beibehalten */
.site-header__logo:hover { opacity: 0.75; }
.nav-toggle { transition: background-color var(--duration-fast) var(--ease); }
.nav-toggle:hover { background: rgb(0 0 0 / 0.09); }
a.lightbox { overflow: hidden; cursor: zoom-in; }
a.lightbox img { transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); }
a.lightbox:hover img { transform: scale(1.02); opacity: 0.92; }
.banner a { transition: text-decoration-thickness var(--duration-fast) var(--ease); }
.banner a:hover { text-decoration-thickness: 2px; }
.main-nav__sub a { transition: opacity var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) { a.lightbox:hover img { transform: none; } }

/* Bild neben Text (v5, Wunsch Nassi): erste Textzeile oben bündig mit dem Bild.
   Abgezogen wird der Raum über den Großbuchstaben: halber Zeilenzuschlag + (Oberlänge − Versalhöhe).
   Corpo Sans: Oberlänge 0,905 em, Unterlänge 0,319 em (zusammen 1,224 em), Versalhöhe 0,674 em.
   Rechnet mit den Reglern mit (Zeilenhöhe Überschriften / Fließtext). */
@media (min-width: 981px) {
  .row:has(> .col > figure:first-child) > .col > :is(.prose, .download):first-child > :is(h1, h2, h3):first-child {
    margin-top: calc(-1 * (var(--leading-heading-plus) / 2 + 0.119em));
  }
  .row:has(> .col > figure:first-child) > .col > .prose:first-child > p:first-child {
    margin-top: calc(-1 * ((var(--leading-body) - 1.224) / 2 * 1em + 0.231em));
  }
}

/* Startseite: Titelbild füllt den ersten Bildschirm (Wunsch Nassi 16.10.2026, v4 + v5).
   Bühne = sichtbare Fensterhöhe minus Kopf; darunter ist beim Öffnen noch nichts zu sehen.
   Das Bild hat weißen Grund und wird unverzerrt mittig gezeigt (nichts beschnitten).
   Kopfhöhe oben: Handy/Tablet = Polster 2 × 20 + Menüknopf (23 + 2 × 5) − Überlappung;
   Desktop = dieselbe Rechnung wie das padding-top von .page-home (Kopf ist dort fixiert). */
.page-home { --kopf-start: calc(2 * var(--space-20) + 23px + 2 * var(--space-5) - var(--header-overlap)); }
@media (min-width: 981px) {
  .page-home { --kopf-start: calc(var(--kopf-luft) + var(--nav-link-pad) + var(--text-sm) - var(--header-overlap)); }
}
.buehne { position: relative; height: calc(100vh - var(--kopf-start)); height: calc(100svh - var(--kopf-start)); min-height: 20rem; background: var(--color-bg); }
.buehne .hero { box-sizing: border-box; height: 100%; padding: 0; top: 0; }
.buehne .hero img { height: 100%; object-fit: contain; }
@media (max-width: 767px) { .buehne { background: #fefefe; } } /* Handy-Bild hat Grund 254 statt 255: Fläche angleichen, damit keine Kante entsteht */
/* Pfeil unten: zeigt, dass es weitergeht, und springt zum Text */
.buehne__weiter {
  position: absolute;
  left: 50%;
  bottom: var(--space-20);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--color-accent);
  transition: opacity var(--duration-base) var(--ease);
}
.buehne__weiter:hover { opacity: 0.7; }
.buehne__weiter svg { width: 2rem; height: 2rem; animation: buehne-wippen 2.4s ease-in-out infinite; }
@keyframes buehne-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
#willkommen { scroll-margin-top: 0; }
@media (min-width: 981px) {
  /* Ziel landet direkt unter dem (dann verkleinerten) fixierten Kopf */
  #willkommen { scroll-margin-top: calc(var(--header-logo-area-fixed) + var(--space-5) + var(--nav-link-pad) + var(--text-sm) - var(--header-overlap)); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .buehne__weiter svg { animation: none; } }

/* Handy/Tablet: smarte Kopfleiste (v6, Wunsch Nassi 17.10.2026).
   Oben steht der normale Kopf. Ist er weggescrollt, erscheint beim Hochscrollen eine schlanke Leiste
   (kleines Logo links, Menü rechts); beim Runterscrollen gleitet sie wieder weg. Steuerung: menue.js
   (Klassen is-kompakt / is-sichtbar). Ohne JavaScript bleibt alles wie bisher. */
@media (max-width: 980px) {
  body.kopf-kompakt { padding-top: var(--kopf-platz, 0px); }   /* Platzhalter: Inhalt springt nicht */
  .site-header.is-kompakt {
    position: fixed;
    inset: 0 0 auto;
    margin: 0;
    padding-block: var(--space-10);
    box-shadow: var(--shadow-header-fixed);
    transform: translateY(-110%);
    transition: transform 0.3s var(--ease);
  }
  .site-header.is-kompakt.is-sichtbar { transform: none; }
  .site-header.is-kompakt .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); }
  .site-header.is-kompakt .site-header__logo { display: block; }
  .site-header.is-kompakt .site-header__logo img { height: 2.25rem; }
  .site-header.is-kompakt .main-nav { position: static; }
  .site-header.is-kompakt .nav-toggle { width: auto; margin-top: 0; padding-right: calc(var(--menu-icon) + var(--space-10)); }
  .site-header.is-kompakt .main-nav__list { top: 100%; max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); overflow-y: auto; overscroll-behavior: contain; } /* lange Liste in der Leiste scrollbar */
}

/* ---------- 14. Zustimmung zur Statistik (Banner, 02.11.2026) ---------- */
/* GA4 + Clarity laden erst nach „Zustimmen“ (assets/zustimmung.js). Footer-Knopf „Cookie-Einstellungen“ öffnet den Banner wieder. */
/* Kein Modal: die Seite bleibt bedienbar. Beide Knöpfe gleich gewichtet (Ablehnen so leicht wie Zustimmen).
   Bewusst kompakt und ruhig: Schrift 14px (--text-sm), kein Titel (Nassi 02.11.2026: keine Aufmerksamkeit ziehen). */
.zustimmung {
  position: fixed;
  z-index: 1001;                                   /* über dem fixierten Kopf */
  inset: auto var(--space-10) var(--space-10);
  max-height: calc(100svh - 2 * var(--space-10));
  overflow-y: auto;
  padding: var(--space-16) var(--space-18) var(--space-18);
  background: var(--color-bg);
  border-top: var(--border-accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.14), 0 0.125rem 0.375rem rgb(0 0 0 / 0.08);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-klein);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-base) cubic-bezier(0.16, 1, 0.3, 1), transform var(--duration-base) cubic-bezier(0.16, 1, 0.3, 1);
}
.zustimmung.ist-sichtbar { opacity: 1; transform: none; }
.zustimmung p { padding-bottom: 0; }
.zustimmung__text:focus { outline: none; }                /* Fokusziel beim Wieder-Öffnen über den Footer */
.zustimmung__details { margin-top: var(--space-5); }
.zustimmung__details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.zustimmung__details summary::-webkit-details-marker { display: none; }
.zustimmung__details summary::after {               /* Winkel, dreht sich beim Öffnen */
  content: "";
  width: 0.4em;
  height: 0.4em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease);
}
.zustimmung__details[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.zustimmung__details ul { margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.zustimmung__details li + li { margin-top: var(--space-5); }
.zustimmung__details strong { color: var(--color-heading); font-weight: var(--weight-semibold); }
.zustimmung__details ul + p { margin-top: var(--space-5); }
.zustimmung__details a, .zustimmung-link button {             /* unterstrichen wie Footer-Links */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.zustimmung__details a { color: inherit; }
.zustimmung__details a:hover { text-decoration-color: currentColor; }
.zustimmung__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-15);
}
.zustimmung__knoepfe .button { background: none; font: inherit; font-size: var(--text-md); cursor: pointer; }
.zustimmung__knoepfe .button:hover { background-color: var(--color-tint); }
@media (min-width: 768px) {
  .zustimmung {
    inset: auto auto var(--abstand-seitenrand) var(--abstand-seitenrand);
    width: min(25rem, 100% - 2 * var(--abstand-seitenrand));
    padding: var(--space-18) var(--space-20) var(--space-20);
  }
}
@media (prefers-reduced-motion: reduce) { .zustimmung { transition: none; transform: none; } }

/* Footer: „Cookie-Einstellungen“ sieht aus wie die Footer-Links, ist aber ein Knopf (öffnet den Banner). */
.zustimmung-link button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease);
}
.zustimmung-link button:hover { opacity: 0.7; }

/* Cookie-Symbol unten links (Wunsch Nassi 02.11.2026): öffnet den Banner wieder. Erscheint erst nach einer Wahl.
   Bewusst leise: klein, weiß, graues Symbol, kräftiger erst bei Hover/Fokus. */
.zustimmung-symbol {
  position: fixed;
  z-index: 1000;
  left: var(--space-10);
  bottom: var(--space-10);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.08);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.zustimmung-symbol[hidden] { display: none; }
.zustimmung-symbol svg { width: 1.25rem; height: 1.25rem; }
.zustimmung-symbol:hover, .zustimmung-symbol:focus-visible { opacity: 1; color: var(--color-heading); }
@media (min-width: 768px) {
  .zustimmung-symbol { left: var(--abstand-seitenrand); bottom: var(--abstand-seitenrand); }
}