/* ==========================================================================
   weissundweiss.at — globals: Layer-Reihenfolge, Fonts, Design-Tokens
   Quelle der Werte: Figma „INTERN | Dr. Weiss & Weiss" → Screendesign V02 (1920px-Frames),
   Census 2026-09-16. Alle fluiden Tokens = Zwei-Punkt-Clamps 390 ↔ 1920 px.
   KWER-Doktrin v2026-09: Typo NUR in typography.css, Farbe NUR über c-*,
   Abstände NUR über die Tokens hier (Spacing v2).
   ========================================================================== */

@layer reset, base, typography, layout, components, utilities;

/* PP Neue Montreal (Pangram Pangram — kommerzielle Lizenz, Datei-Lieferung vom Kunden) */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../../files/theme/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../../files/theme/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../../files/theme/fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    /* --- Farben (Figma-Variablen) --- */
    --blue: #4170b7;            /* Chirurgie (Dr. Helmut Weiss) */
    --green: #59967f;           /* Lasermedizin (Dr. Birgit Weiss) */
    --anthracite: #373733;      /* Vorschaltseite / Dachmarke */
    --light-grey: #f8f8f8;
    --white: #ffffff;
    --black: #000000;
    --scrim-soft: color-mix(in srgb, var(--black) 20%, transparent);   /* Hero-Overlay oben: Logo + Nav auf dem Foto */
    --scrim: color-mix(in srgb, var(--black) 45%, transparent);        /* Hero-Overlay unten: Headline/Intro auf dem Foto (User 2026-09-23) */
    --accent: var(--blue);      /* Silo-Akzent — per Layout-body-Klasse theme-<slug> umgeschaltet */
    --error: #b23a3a;           /* Formular-Fehlertext (kein Figma-Token, Systemfarbe) */
    --shadow-bar: 0 1px 7px rgba(0, 0, 0, 0.25);   /* Kontaktleiste (Figma) */

    --font: "PP Neue Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* --- Schriftgrößen (nur typography.css konsumiert sie) --- */
    --fs-headline-xl: clamp(34px, calc(23.55px + 2.680vw), 75px);   /* Hero 75 */
    --fs-headline-lg: clamp(28px, calc(19.84px + 2.092vw), 60px);   /* Sektions-Headline 60, Einleitung/Zitat 60/65, Footer-Kontakt 60/63 */
    --fs-contact-lg:  clamp(24px, 3.125vw, 60px);                    /* Footer-Kontakt 60 @1920, proportional darunter — die E-Mail darf nie umbrechen (User 2026-09-16) */
    --fs-number-xl:   clamp(56px, calc(42.24px + 3.529vw), 110px);  /* Zahlen 110 Bold */
    --fs-intro-sm:    clamp(24px, calc(18.65px + 1.373vw), 32px);   /* Einleitung am Handy (User 2026-11-04: 28 zu lang, 22 zu klein → 24 bei 390) */
    --fs-headline-md: clamp(22px, calc(17.41px + 1.176vw), 40px);   /* Karten-/Zahlen-Titel, Hinweis-h3 40 */
    --fs-headline-sm: clamp(19px, calc(16.20px + 0.719vw), 30px);   /* Label/Eyebrow, Namenszeile, Footer-Spaltentitel, Akkordeon-Titel 30 */
    --fs-text-md:     clamp(16px, calc(13.71px + 0.588vw), 25px);   /* Fließtext 25/35, Buttons, Nav */
    --fs-text-sm:     clamp(15px, calc(12.96px + 0.523vw), 23px);   /* Footer-Rechtliches 23/33 */
    --fs-label-sm:    clamp(14px, calc(11.96px + 0.523vw), 22px);   /* Uppercase-Labels im Zitat 22 */
    --fs-text-xs:     clamp(13px, calc(11.22px + 0.458vw), 20px);   /* Breadcrumb/Topline 20 */
    --fs-text-2xs:    clamp(11px, calc(9.22px + 0.458vw), 18px);    /* Footer-Credit 18 */
    --fs-badge-lg:    clamp(16px, calc(13.20px + 0.719vw), 27px);    /* Hero-Badge Titel 27 (Figma 221:147) */
    --fs-badge-md:    clamp(12px, calc(9.96px + 0.523vw), 20px);     /* Hero-Badge Zeile 1: 20/22 */
    --fs-badge-sm:    clamp(11px, calc(9.22px + 0.458vw), 18px);     /* Hero-Badge Zeile 2: 18/20 */

    /* --- Spacing v2 — Detail (fix) --- */
    --space-2xs: 6px;   /* Weiche-Buttons übereinander am Handy (User 2026-11-04) */
    --space-xs: 10px;   /* Button-Paar, Icon↔Text in der Kontaktleiste */
    --space-sm: 15px;   /* Icon↔Label (Hinweis, Liste, Kalender) */
    --space-md: 20px;   /* Akkordeon-Innenabstand, Listen-Einzug */
    --space-lg: 35px;   /* Nav-Abstand */

    /* --- Spacing v2 — Rhythmus (Größenskala; ab sm mit EINMAL eingebackener
       Leading-Kompensation, weil Figma cap-getrimmte Textboxen misst;
       PP Neue Montreal: Ascent 0.96 / Descent 0.24 / Cap 0.715 → Leading je Seite
       25/35 ≈ 8,5 · 30/30 ≈ 4,3 · 40/40 ≈ 5,7 · 60/60 ≈ 8,5 · 110/110 ≈ 15,7) --- */
    --gap-3xs: clamp(7px, calc(5.47px + 0.392vw), 13px);     /* Figma 30, −17 Leading (Absatz → Absatz) — User 2026-09-16: Figma-Parität, kleine Stufen ebenfalls kompensiert */
    --gap-2xs: clamp(11px, calc(8.45px + 0.654vw), 21px);    /* Figma 35, −14 Leading (Titel → Text) */
    --gap-xs:  clamp(20px, calc(14.90px + 1.307vw), 40px);   /* Figma 40 (exakt) */
    --gap-sm:  clamp(19px, calc(14.16px + 1.242vw), 38px);   /* Figma 50, −12 Leading */
    --gap-md:  clamp(22px, calc(16.65px + 1.373vw), 43px);   /* Figma 60, −17 Leading */
    --gap-lg:  clamp(30px, calc(22.35px + 1.961vw), 60px);   /* Figma 70, −10 Leading */
    --gap-xl:  clamp(46px, calc(34.27px + 3.007vw), 92px);   /* Figma 100, −8 Leading */
    --gap-2xl: clamp(50px, calc(37.25px + 3.268vw), 100px);  /* Figma 120, −20 Leading */
    --gap-3xl: clamp(66px, calc(48.92px + 4.379vw), 133px);  /* Figma 150, −17 Leading */
    --gap-grid: clamp(50px, calc(37.25px + 3.268vw), 100px); /* Figma 100, Box-zu-Box (Kartenreihen), unkompensiert */
    --gap-sm-box: clamp(25px, calc(18.63px + 1.634vw), 50px);  /* Figma 50, Box-zu-Box (Signet ↔ Text), unkompensiert */

    /* --- Spacing v2 — Sektionen (unkompensiert) --- */
    --pad-sm:  clamp(32px, calc(24.86px + 1.830vw), 60px);    /* Footer oben/unten 60 */
    --pad-std: clamp(64px, calc(42.08px + 5.621vw), 150px);   /* jedes Band 150 */
    --pad-lg:  clamp(85px, calc(56.11px + 7.495vw), 200px);   /* Einleitung nur Großtext (Figma 239:540): 200 */
    --pad-xs:  var(--container-gutter);                        /* Bild-Kante 40 (Werdegang/Leitbild) */

    /* --- Layout --- */
    --container-gutter: clamp(20px, calc(14.90px + 1.307vw), 40px);  /* Außenkante Logo/Buttons/Bilder */
    --inset:       clamp(24px, calc(-17.04px + 10.523vw), 185px);    /* Textspalte der Bild-Text-Sektionen: 185 beidseitig in der 1030er-Spalte = Figma-Textbreite 660 (x 185 bzw. 1075) */
    --inset-sm:    clamp(24px, calc(-8.12px + 8.235vw), 150px);      /* Einleitung, Hinweis */
    --grid-3-gap:  clamp(24px, calc(1.83px + 5.686vw), 111px);       /* 3er-Textgrid (Zahlen, Spezialisierungen): Spaltenabstand */
    --inset-grid:  max(24px, calc(-21.88px + 11.765vw));              /* 3er-Textgrid: Einzug ab Außenkante, Figma 204 @1920, wächst auf großen Screens proportional weiter (User 2026-09-16) */
    --breadcrumb-clearance: clamp(24px, calc(19.92px + 1.046vw), 40px);     /* Topline-Zeile über Einleitung/Zahlen: Figma 40 + 14 Cap − Leading des Folgetexts */
    --header-clearance: 240px;                                       /* Kurzseiten unter dem absoluten Header (mobil zweizeilig) */
    --contactbar-clearance: 70px;                                    /* Lasermedizin: fixe Kontaktleiste (Footer +70, Figma 795 vs 725) */

    /* --- Komponenten-Geometrie (Figma-Maße, keine Rhythmus-Werte) --- */
    --btn-h: clamp(52px, calc(48.18px + 0.980vw), 67px);
    --btn-pad-x: clamp(26px, calc(21.67px + 1.111vw), 43px);
    --btn-gap: clamp(14px, calc(10.69px + 0.850vw), 27px);
    --btn-r: 60px;
    --btn-border: 1.5px;
    --icon-xs: 16px;   /* Button-Pfeil am Handy (User 2026-11-04) */
    --icon-sm: 20px;   /* Telefon/Kalender (Kontaktleiste), Zitat-Sterne */
    --icon-md: 30px;   /* Button-Pfeil */
    --icon-lg: 35px;   /* Info (Hinweis), Uhr (Badge) */
    --avatar: clamp(96px, calc(84.82px + 2.866vw), 140px);
  }

  /* Silo-Themes: body-Klasse kommt aus tl_layout.cssClass (Layout je Silo) */
  .theme-lasermedizin { --accent: var(--green); }
  .theme-vorschalt    { --accent: var(--anthracite); }

  /* Sektionsweise Akzentfarbe (Teaser auf der Vorschaltseite) — color neu auflösen, sonst erbt die Sektion den Body-Wert */
  .accent-blue  { --accent: var(--blue); color: var(--accent); }
  .accent-green { --accent: var(--green); color: var(--accent); }
  .accent-anthracite { --accent: var(--anthracite); color: var(--accent); }   /* Dachmarke-Schema für gemeinsame Sektionen (Querverweis „Eine Adresse, zwei Fachwelten“, User 2026-09-23) */

  /* Handy: Buttons mit 1px-Rahmen und minimal weniger Innenabstand (User 2026-11-04; je −4px gegenüber Desktop-Kurve) */
  @media (max-width: 1023px) {
    :root {
      --btn-border: 1px;
      --btn-h: clamp(48px, calc(44.18px + 0.980vw), 63px);
      --btn-pad-x: clamp(22px, calc(17.67px + 1.111vw), 39px);
    }
  }
}

/* ==========================================================================
   RHYTHMUS-REGELN (Figma V02, cap-getrimmt gemessen) — jedes Paar EIN Token:
   Label/Eyebrow → Headline ........ 50  gap-sm
   Headline → Text ................. 60  gap-md
   Headline → Button (ohne Text) ... 50  gap-sm
   Text → Button ................... 50  gap-sm      (in Karten/Textgrid: 40 gap-xs)
   Text → Liste / Liste → Button ... 50  gap-sm
   Text → Akkordeon ................ 70  gap-lg
   Absatz → Absatz ................. 30  gap-3xs
   Zahl → Titel .................... 50  gap-sm
   Titel (40) → Text ............... 35  gap-2xs     (Karten, Zahlen, Footer-Spalten)
   Bild → Titel (Karten) ........... 40  gap-xs
   Headline → Karten/Textgrid ...... 100 gap-xl
   Kartenreihen .................... 100 gap-grid
   Headline → Logos (Marquee) ...... 70  gap-lg
   Zitat-Labels → Zitat ............ 150 gap-3xl
   Zitat → Portrait ................ 70  gap-lg
   Portrait → Name ................. 30  gap-3xs
   Einleitung Großtext → Signet .... 150 gap-3xl
   Hero Headline → Namenszeile ..... 50  gap-sm
   Footer Kontakt → Spalten ........ 120 gap-2xl
   Footer Spalten → Rechtliches .... 120 gap-2xl
   Band oben/unten ................. 150 pad-std · Einleitung nur Großtext 200 pad-lg · Footer 60 pad-sm · Bildkante 40 pad-xs
   ========================================================================== */

/* Reset — Tags tragen keine Gestalt; alles Sichtbare kommt aus Klassen.
   Ein h2→p-Tausch ändert NICHTS. */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

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

  body {
    min-height: 100vh;
    min-height: 100svh;
  }

  h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, address, pre {
    font: inherit;
    font-style: normal;
  }

  ul, ol, menu {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  strong, b {
    font-weight: 500;
  }

  em, i, address, cite {
    font-style: inherit;
  }

  small, sub, sup {
    font-size: inherit;
  }

  sub, sup {
    vertical-align: baseline;
  }

  hr {
    border: 0;
    height: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  img, picture, video, svg, iframe, canvas {
    display: block;
    max-width: 100%;
  }

  /* width/height-Attribute (Contao-Figure) dürfen CSS-verkleinerte Bilder nicht strecken */
  img, video {
    height: auto;
    block-size: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  button, [role="button"], summary {
    cursor: pointer;
  }

  textarea {
    resize: vertical;
  }

  fieldset {
    border: 0;
    min-width: 0;
  }

  legend {
    display: block;
  }

  blockquote, q {
    quotes: none;
  }

  [hidden] {
    display: none;
  }
}

/* Basis: Body, Scroll-Verhalten, Fokus, A11y-Helfer (keine Typo außer Familie) */

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font);
    color: var(--accent);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  :is(h1, h2, h3, [id]) {
    scroll-margin-top: var(--header-clearance);
  }

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

  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-md);
    background: var(--white);
    color: var(--accent);
    border-radius: var(--btn-r);
  }

  .skip-link:focus {
    top: var(--space-xs);
  }

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

    *, *::before, *::after {
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }
}

/* Typographie — die EINZIGE Datei mit font-size / font-weight / line-height.
   Klassen = Figma-Textstile (Größe/Zeile/Schnitt), im Markup komponiert.
   Zeilenhöhen-Boden: PP Neue Montreal Ink-Höhe (Versal + Unterlänge) ≈ 0,93 em → 1.0 ist sicher. */

@layer typography {
  /* Display */
  .headline-xl   { font-size: var(--fs-headline-xl); font-weight: 500; line-height: 1; }        /* Hero 75/75 */
  .headline-lg   { font-size: var(--fs-headline-lg); font-weight: 500; line-height: 1; }        /* Sektions-Headline 60/60 */
  .display-lg    { font-size: var(--fs-headline-lg); font-weight: 500; line-height: 1.083; }    /* Zitat 60/65 */
  .display-lg-loose { font-size: var(--fs-headline-lg); font-weight: 500; line-height: 1.25; } /* Einleitung 60/75 — luftiger, Dr. Weiss 2026-10-12 „zu geringer Zeilenabstand“ */
  .contact-lg    { font-size: var(--fs-contact-lg);  font-weight: 500; line-height: 1.05; }     /* Footer-Kontakt 60/63, eigener Token: skaliert proportional, E-Mail bricht nie */
  .number-xl     { font-size: var(--fs-number-xl);   font-weight: 700; line-height: 1; }        /* Zahlen 110 Bold */
  .headline-md   { font-size: var(--fs-headline-md); font-weight: 500; line-height: 1; }        /* Karten-/Zahlen-Titel 40/40 */
  .headline-sm   { font-size: var(--fs-headline-sm); font-weight: 500; line-height: 1; }        /* Label/Eyebrow, Namenszeile 30/30 */
  .subline-md    { font-size: var(--fs-headline-sm); font-weight: 500; line-height: 1.167; }    /* Footer-Spaltentitel 30/35 */
  .text-lg       { font-size: var(--fs-headline-sm); font-weight: 400; line-height: 1; }        /* Akkordeon-Titel 30/30 Regular */

  /* Design-Zeilenumbrüche (nl2br) gelten ab 1500 (Figma-Frame-Nähe); darunter bricht der Browser ausgeglichen (User 2026-09-16: keine Einwort-Zeilen am 13"-Laptop) */
  .headline-xl, .headline-lg, .headline-md, .headline-sm, .display-lg, .display-lg-loose, .badge-md, .badge-sm {
    text-wrap: balance;
  }

  /* Fließtext */
  .text-md        { font-size: var(--fs-text-md);  font-weight: 400; line-height: 1.4; }        /* 25/35 */
  .text-md-medium { font-size: var(--fs-text-md);  font-weight: 500; line-height: 1.4; }        /* 25/35 Medium (Kontaktleiste, Footer-Arztzeile) */
  .text-md-tight  { font-size: var(--fs-text-md);  font-weight: 400; line-height: 1.2; }        /* 25/30 Zitat-Namenszeile */
  .text-sm        { font-size: var(--fs-text-sm);  font-weight: 400; line-height: 1.435; }      /* 23/33 Footer-Rechtliches */
  .text-xs        { font-size: var(--fs-text-xs);  font-weight: 400; line-height: 1; }          /* 20/20 Breadcrumb/Topline */
  /* Overlay-Menü (Burger offen): Menüpunkte in Karten-Titel-Größe 40, Zeile 1.1 (kein Figma-Frame, 2026-09-22) */
  .site-header--open .site-nav__label { font-size: var(--fs-headline-md); font-weight: 500; line-height: 1.1; }
  .site-header--open .site-nav__label--sub { font-size: var(--fs-headline-sm); }   /* Schwerpunkt-Unterpunkte unter dem Gruppenlabel (User 2026-09-23) */
  .text-xs-loose  { font-size: var(--fs-text-xs);  font-weight: 400; line-height: 1.25; }       /* 20/25 Breadcrumb zweizeilig auf Unterseiten (Figma 239:501) */
  .text-2xs       { font-size: var(--fs-text-2xs); font-weight: 400; line-height: 1; }          /* 18/18 Footer-Credit „created by“ (User 2026-10-05) */
  .label-sm       { font-size: var(--fs-label-sm); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; } /* 22 Zitat-Labels */

  /* Hero-Badge (Figma 221:162): drei eigene Stile im runden Sticker */
  .badge-lg       { font-size: var(--fs-badge-lg); font-weight: 500; line-height: 1; text-transform: uppercase; }   /* 27/27 Medium */
  .badge-md       { font-size: var(--fs-badge-md); font-weight: 500; line-height: 1.1; }                            /* 20/22 Medium */
  .badge-sm       { font-size: var(--fs-badge-sm); font-weight: 500; line-height: 1.11; }                           /* 18/20 Medium */

  @media (max-width: 1499px) {
    .headline-xl br, .headline-lg br, .display-lg br, .display-lg-loose br {
      display: none;
    }
  }

  /* Namenszeilen/Labels (headline-sm/md) behalten ihren Design-Umbruch bis zum Phone */
  @media (max-width: 1023px) {
    .headline-md br, .headline-sm br {
      display: none;
    }

    /* Einleitung am Handy kleiner, damit der Großtext nicht so lang wird (User 2026-11-04: 28 → 24 bei 390) */
    .display-lg-loose {
      font-size: var(--fs-intro-sm);
    }
  }

  /* Prosa-Scope (RTE-Ausgabe): Absatzrhythmus, Links */
  .rte > * + * {
    margin-top: var(--gap-3xs);
  }

  .rte a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .rte h3 {
    font-size: var(--fs-headline-sm);
    font-weight: 500;
    line-height: 1;
  }

  /* Lange Rechtstexte (Impressum/Datenschutz) — sanktionierte Tag-Styling-Zone */
  .legal {
    padding: var(--header-clearance) var(--inset-sm) var(--pad-std);
    max-width: 1322px;
    font-size: var(--fs-text-md);
    line-height: 1.4;
  }

  .legal h1 {
    font-size: var(--fs-headline-lg);
    font-weight: 500;
    line-height: 1.083;
  }

  .legal h2 {
    margin-top: var(--gap-lg);
    font-size: var(--fs-headline-sm);
    font-weight: 500;
    line-height: 1.167;
  }

  .legal p, .legal ul, .legal ol {
    margin-top: var(--gap-3xs);
  }

  .legal a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Fachinformation (RTE-Inhalt ohne Klassen, Tag-Scope wie .legal): h3 = Organ, h4 = Krankheitsbild */
@layer typography {
  .fachinfo__body h3 {
    font-size: var(--fs-headline-sm);
    font-weight: 500;
    line-height: 1.167;
  }

  .fachinfo__body h4 {
    font-size: var(--fs-text-md);
    font-weight: 500;
    line-height: 1.4;
  }
}

/* Schritt-Ziffer im Kreis (Karten-Grid „Nummerierte Schritte“, CSS-Zähler ohne eigenes Element) = headline-sm */
@layer typography {
  .cards--steps .card::before {
    font-size: var(--fs-headline-sm);
    font-weight: 500;
    line-height: 1;
  }
}

/* Zitat im Textband (RTE-Blockquote ohne Klasse, Tag-Scope wie .legal) = 30 Regular */
@layer typography {
  .faq__text blockquote {
    font-size: var(--fs-headline-sm);
    font-weight: 400;
    line-height: 1.25;
  }
}

/* Cookiebar-Überschrift (h3 aus tl_cookiebar.description, keine Klassen im Inhalt) = headline-sm (Sead 2026-11-09 „bisschen größer“) */
@layer typography {
  .contao-cookiebar .cc-head h3 {
    font-size: var(--fs-headline-sm);
    font-weight: 500;
    line-height: 1.167;
  }
}

/* Seitengerüst: fe_page-Sektionen neutralisieren, volle Breite, Sticky-Footer.
   Einzige Datei mit id-Selektoren (Contao-Skelett). */

@layer layout {
  #wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  #container {
    flex: 1 0 auto;
  }

  /* Contao-Sektions-Wrapper sollen kein eigenes Layout erzeugen */
  #header, #footer, #main,
  #header > .inside, #footer > .inside, #main > .inside,
  .mod_article {
    display: contents;
  }

  /* Fehler-/Kurzseiten: einziger Block erbt die Resthöhe (kein Body-Band überm Footer) */
  #main .mod_article > .content-text:only-child {
    display: block;
  }
}

/* Sektion mit Hintergrundbild (Backend-Checkbox „Bild als Hintergrund“ an Zitat + FAQ-Band, Mail Dr. Weiss 18.10.).
   Foto deckt die Sektion, Inhalt liegt darüber. Standard = Header-Optik (Bild 85 % auf Schwarz + Verlauf wie .hero__media),
   --accent = Akzent-Overlay 70 % (Zitat). Fokuspunkt wie im Hero (--focal-x/-y aus dem Template). */
@layer layout {
  .has-bg-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .bg-media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .bg-media figure,
  .bg-media picture,
  .bg-media img {
    width: 100%;
    height: 100%;
  }

  .bg-media img {
    object-fit: cover;
    object-position: var(--focal-x, 50%) var(--focal-y, 50%);
    opacity: 0.85;
  }

  .bg-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--scrim-soft), var(--scrim));
  }

  .bg-media--accent img {
    object-position: var(--focal-x, 50%) var(--focal-y, 30%);
    opacity: 1;
  }

  .bg-media--accent::after {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

/* Utilities: Textfarben (c-*), Sektions-Abstände (pad-*), A11y */

@layer utilities {
  /* Textfarbe NUR hierüber (Figma-Farbtoken) */
  .c-accent     { color: var(--accent); }
  .c-white      { color: var(--white); }
  .c-blue       { color: var(--blue); }
  .c-green      { color: var(--green); }
  .c-anthracite { color: var(--anthracite); }

  /* Sektions-Abstände: Backend-Select spacingTop/spacingBottom → Klassen am Band */
  .pad-top-none { padding-top: 0; }
  .pad-top-xs   { padding-top: var(--pad-xs); }
  .pad-top-sm   { padding-top: var(--pad-sm); }
  .pad-top-std  { padding-top: var(--pad-std); }
  .pad-top-lg   { padding-top: var(--pad-lg); }
  .pad-bot-none { padding-bottom: 0; }
  .pad-bot-xs   { padding-bottom: var(--pad-xs); }
  .pad-bot-sm   { padding-bottom: var(--pad-sm); }
  .pad-bot-std  { padding-bottom: var(--pad-std); }
  .pad-bot-lg   { padding-bottom: var(--pad-lg); }

  /* Breadcrumb/Topline liegt oben links ÜBER dem Folgeband → das Band gibt der Zeile Platz */
  .mod_breadcrumb + [class*="pad-top-"],
  .has-topline[class*="pad-top-"] {
    padding-top: calc(var(--pad-std) + var(--breadcrumb-clearance));
  }

  /* Bild-Text-Sektion direkt nach dem Breadcrumb (Über mich, Figma Über uns 237:439): der Breadcrumb liegt
     im oberen Bild-Abstand, Bild 150 unter der Bandkante → Band-Padding ohne Extra-Clearance.
     Nur ab Desktop — am Laptop bestimmt die Textspalte die Höhe und startet an der Bandkante, sie braucht die Clearance
     wie jedes andere Band (User 2026-09-23: Text lief dem Breadcrumb zu nah). */
  @media (min-width: 1500px) {
    .mod_breadcrumb + .split.pad-top-std {
      padding-top: var(--pad-std);
    }
  }

  /* Einleitung nur Großtext (pad-lg, Figma 239:540): eigenes Band-Padding + Clearance für den zweizeiligen
     Breadcrumb (eine Zeile 20/25 mehr als die einzeilige Topline) → Großtext-Box 265 unter der Bandkante (Figma Cap 279) */
  .mod_breadcrumb + .pad-top-lg,
  .has-topline.pad-top-lg {
    padding-top: calc(var(--pad-lg) + var(--breadcrumb-clearance) + var(--fs-text-xs) * 1.25);
  }

  /* Lasermedizin: die fixe Kontaktleiste braucht Platz unter dem Footer und über dem Hero-Text */
  .theme-lasermedizin .footer[class*="pad-bot-"] {
    padding-bottom: calc(var(--pad-sm) + var(--contactbar-clearance));
  }

  /* Telefonnummern und E-Mail-Adressen brechen nie um (User 2026-09-16) — Attribut-Selektor bewusst,
     weil tel:/mailto:-Links auch aus RTE-Inhalten und Insert-Tags kommen (keine Klasse setzbar) */
  a[href^="tel:"],
  a[href^="mailto:"] {
    white-space: nowrap;
  }

  /* .invisible = Contaos Screenreader-Klasse (Framework-CSS ist deaktiviert) */
  .visually-hidden,
  .invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Pfeil-Button (Basis + Varianten solid/white/blue/green). Typo: btn text-md im Markup. */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border: var(--btn-border) solid var(--accent);
    border-radius: var(--btn-r);
    color: var(--accent);
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
  }

  /* Pfeil = Design-SVG als Maske in currentColor → folgt Akzentfarbe und Hover automatisch */
  .btn__arrow {
    width: var(--icon-md);
    height: var(--icon-md);
    background: currentColor;
    -webkit-mask: url("../../files/theme/img/arrow.svg") center / contain no-repeat;
    mask: url("../../files/theme/img/arrow.svg") center / contain no-repeat;
    transform: rotate(45deg); /* Pfeil ↑ → ↗ */
    flex-shrink: 0;
  }

  /* Variante: gefüllt (Header-CTA) */
  .btn--solid {
    background: var(--accent);
    color: var(--white);
  }

  /* Variante: weiß umrandet (Akzent-Flächen, Hero) */
  .btn--white {
    border-color: var(--white);
    color: var(--white);
  }

  /* Varianten: feste Silo-Farbe (Weichen-Buttons im Header der Vorschaltseite) */
  .btn--blue,
  .btn--green {
    color: var(--white);
  }

  .btn--blue {
    background: var(--blue);
    border-color: var(--blue);
  }

  .btn--green {
    background: var(--green);
    border-color: var(--green);
  }

  @media (hover: hover) {
    .btn:hover {
      background: var(--accent);
      color: var(--white);
    }

    .btn--solid:hover {
      background: transparent;
      color: var(--white);
    }

    .btn--white:hover {
      background: var(--white);
      color: var(--accent);
    }

    /* Hover: Fläche weg, Schrift + Pfeil in der jeweiligen Arztfarbe (Rand bleibt) */
    .btn--blue:hover {
      background: transparent;
      color: var(--blue);
    }

    .btn--green:hover {
      background: transparent;
      color: var(--green);
    }
  }

  @media (max-width: 1023px) {
    .btn__arrow {
      width: var(--icon-xs);
      height: var(--icon-xs);
    }
  }
}

/* Site-Header — fixiert über dem ersten Block (Hero); dunkle Variante für Seiten ohne Hero.
   Sticky (User 2026-09-22): ab 60 px Scroll weiße Leiste mit Schatten, Logo auf Leistenhöhe, dunkle Variante (Klasse per JS im Template).
   Plus: fixe Kontaktleiste (Lasermedizin-Silo) unten rechts. */

@layer components {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--container-gutter);
    padding: var(--container-gutter) var(--container-gutter) 0;
    /* Fläche/Schatten verschwinden beim Zurückscrollen sofort (sonst blitzt die Leiste in Logo-Höhe weiß auf, User 2026-09-22); eingeblendet wird weich, s. --scrolled */
    transition: background-color 0s, box-shadow 0s, padding 0.2s ease;
  }

  /* Leiste nach dem Scrollen: weiß, Schatten, Logo verkleinert auf Leistenhöhe (Button 67 + 2 × 15) */
  .site-header--scrolled {
    align-items: center;
    padding: var(--space-sm) var(--container-gutter);
    background: var(--white);
    box-shadow: var(--shadow-bar);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
  }

  /* offenes Overlay: Leiste verschmilzt mit der Akzentfläche */
  .site-header--open {
    background: transparent;
    box-shadow: none;
  }

  /* Logo in beiden Farben im Markup; die dunkle Variante zeigt das dunkle */
  .site-header__logo-img--dark,
  .site-header--dark .site-header__logo-img--white {
    display: none;
  }

  .site-header--dark .site-header__logo-img--dark {
    display: block;
  }

  .site-header--open .site-header__logo-img--dark {
    display: none;
  }

  .site-header--open .site-header__logo-img--white {
    display: block;
  }

  .site-header__logo img {
    width: min(331px, 17.24vw);   /* Design-Geometrie: Logo-Lockup 331 @1920 */
    height: auto;
    transition: width 0.2s ease, height 0.2s ease;
  }

  .site-header--scrolled .site-header__logo img {
    width: auto;
    height: var(--btn-h);   /* Logo auf Leistenhöhe = Button-Höhe (67 / 52 am Phone); gilt für Lockup und Signet */
  }

  .site-header--scrolled .site-header__logo--signet img {
    height: calc(var(--btn-h) * 0.7);   /* Signet in der Leiste kleiner als das Lockup */
  }

  /* Vorschaltseite: Signet statt Volllogo */
  .site-header__logo--signet img {
    width: min(80px, 4.17vw);   /* Signet verkleinert (User 2026-09-24, 2×) */
  }

  /* Nav + CTA teilen sich eine Zeile, vertikal auf der Button-Mitte */
  .site-header__right {
    display: flex;
    align-items: center;
    gap: var(--container-gutter);
  }

  /* Vorschaltseite: Weiche-Buttons (grün/blau) enger zusammen (User 2026-11-04) */
  .site-header__right--switch {
    gap: var(--space-md);
  }

  .site-nav,
  .site-nav__links {
    display: flex;
    gap: var(--space-lg);
  }

  /* Gruppen sind inline unsichtbare Hüllen; Gruppenlabel + Kontaktblock gibt es nur im Overlay */
  .site-nav__group {
    display: contents;
  }

  .site-nav__group-label,
  .site-nav__meta {
    display: none;
  }

  .site-nav a {
    color: var(--white);
    white-space: nowrap;   /* Menüpunkte brechen nie intern um — das Script misst, ob die Zeile trägt, sonst Burger */
  }

  /* aktive Seite (Contao: active + aria-current): Unterstreichung wie im Design (Figma header, Linie unter dem aktiven Punkt) */
  .site-nav a.active .site-nav__label {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Seiten ohne Hero: Nav in Akzentfarbe, Outline-CTA */
  .site-header--dark .site-nav a {
    color: var(--accent);
  }

  .site-header--dark .btn--solid {
    background: transparent;
    color: var(--accent);
  }

  @media (hover: hover) {
    /* Link-Hover sitewide = Unterstreichung (User 2026-09-16: keine Opacity, grau + nicht barrierefrei) */
    .site-nav a:hover,
    .contactbar__item[href]:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .site-header--dark .btn--solid:hover {
      background: var(--accent);
      color: var(--white);
    }
  }

  /* Burger (kein Figma-Frame: Standard-Chrome) — nur unter 1500 sichtbar */
  .site-header__burger {
    display: none;
    position: relative;
    width: var(--btn-h);
    height: var(--btn-h);
    flex-shrink: 0;
    border: var(--btn-border) solid currentColor;
    border-radius: 50%;
    color: var(--white);
    --burger-contrast: var(--accent);   /* Balkenfarbe, wenn der Kreis beim Hover mit currentColor gefüllt ist */
    transition: background 0.25s ease, color 0.25s ease;
  }

  .site-header--dark .site-header__burger {
    color: var(--accent);
    --burger-contrast: var(--white);
  }

  .site-header__burger-bar,
  .site-header__burger-bar::before,
  .site-header__burger-bar::after {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
  }

  .site-header__burger-bar {
    top: 50%;
    margin-top: -1px;
  }

  .site-header__burger-bar::before,
  .site-header__burger-bar::after {
    content: "";
    top: -7px;
  }

  .site-header__burger-bar::after {
    top: 7px;
  }

  .site-header--open .site-header__burger-bar {
    background: transparent;
  }

  .site-header--open .site-header__burger-bar::before {
    transform: translateX(-50%) translateY(7px) rotate(45deg);
  }

  .site-header--open .site-header__burger-bar::after {
    transform: translateX(-50%) translateY(-7px) rotate(-45deg);
  }

  /* Burger-Hover = Flächenwechsel wie .btn (User 2026-09-22): Kreis füllt sich mit der Randfarbe, Balken kippen in die
     Kontrastfarbe; gilt offen (X) wie geschlossen. Nur bei echtem Hover (kein Kleben am Touch) + Tastaturfokus. */
  @media (hover: hover) {
    .site-header__burger:hover {
      background: currentColor;
    }

    .site-header__burger:hover .site-header__burger-bar,
    .site-header__burger:hover .site-header__burger-bar::before,
    .site-header__burger:hover .site-header__burger-bar::after {
      background: var(--burger-contrast);
    }

    .site-header--open .site-header__burger:hover .site-header__burger-bar {
      background: transparent;
    }
  }

  .site-header__burger:focus-visible {
    background: currentColor;
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .site-header__burger:focus-visible .site-header__burger-bar,
  .site-header__burger:focus-visible .site-header__burger-bar::before,
  .site-header__burger:focus-visible .site-header__burger-bar::after {
    background: var(--burger-contrast);
  }

  .site-header--open .site-header__burger:focus-visible .site-header__burger-bar {
    background: transparent;
  }

  .site-nav__cta {
    display: none;
  }

  /* Fixe Kontaktleiste (Figma „contact fixed": 838×67, unten rechts, Radius 60, Schatten) */
  .contactbar {
    position: fixed;
    right: var(--container-gutter);
    bottom: var(--container-gutter);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x) 0 clamp(26px, calc(17.86px + 2.092vw), 58px); /* Figma links 58 / rechts 57 */
    border-radius: var(--btn-r);
    background: var(--white);
    box-shadow: var(--shadow-bar);
    white-space: nowrap;
  }

  .contactbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .contactbar__item--hours {
    gap: var(--space-sm);
  }

  /* Icons = Figma-SVGs als Maske in currentColor (Akzentfarbe) */
  .contactbar__icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex-shrink: 0;
    translate: 0 2px;   /* optische Mitte: Icon auf Cap-/x-Höhen-Mitte des Textes (User 2026-09-16) */
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }

  .contactbar__icon--phone { --icon: url("../../files/theme/img/icon-phone.svg"); }
  .contactbar__icon--calendar { --icon: url("../../files/theme/img/icon-calendar.svg"); }

  /* Burger + Overlay auch oberhalb 1500, wenn die Zeile die Navigation nicht trägt: Klasse kommt aus dem
     Header-Template (Server: > 6 Punkte = Start-/No-JS-Fallback; Script misst die tatsächliche Breite, User 2026-09-22). */
  .site-header--dense .site-header__burger {
    display: inline-flex;
  }

  .site-header--dense .site-nav {
    display: none;
  }

  /* Nur CTA + Burger in der Zeile → enger zusammen (User 2026-11-04, vorher container-gutter 28–40) */
  .site-header--dense .site-header__right {
    gap: var(--space-md);
  }

  /* ---- Overlay-Menü (Burger offen; gilt unter 1500 und bei --dense auf jeder Breite) ----
     Ohne Figma-Frame, aus dem System gebaut (User 2026-09-22 „make the menu look better“): große nummerierte
     Punkte mit gestaffeltem Einlauf, Kontakt + CTA unten, Logo wieder in voller Größe, Seite gesperrt. */
  .nav-open {
    overflow: hidden;
  }

  .site-header--open {
    align-items: flex-start;
    padding: var(--container-gutter) var(--container-gutter) 0;
  }

  .site-header--open .site-header__logo img {
    width: min(331px, 17.24vw);
    height: auto;
  }

  .site-header--open .site-header__logo--signet img {
    width: min(80px, 4.17vw);
  }

  .site-header--open .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--gap-lg);
    padding: var(--header-clearance) var(--container-gutter) var(--pad-sm);
    color: var(--white);   /* alles im Overlay weiß (Label, Kontakt) */
    background: var(--accent);
    overflow-y: auto;
  }

  .site-header--open .site-nav__links {
    display: grid;
    align-self: center;
    gap: var(--gap-lg) var(--gap-3xl);
  }

  /* zwei Gruppen (Schwerpunkte | übrige Seiten): Spalten ab Laptop, gestapelt am Phone */
  .site-header--open .site-nav__links--grouped {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
  }

  .site-header--open .site-nav__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
  }

  .site-header--open .site-nav__group-label {
    display: block;
    opacity: 0.6;
  }

  /* Gruppenlabel „Schwerpunkte“ ist so groß wie die Hauptpunkte der zweiten Gruppe → beide Spalten beginnen auf derselben Zeile;
     die Schwerpunkt-Unterpunkte darunter sind eine Stufe kleiner (User 2026-09-23) */

  .site-header--open .site-nav__link {
    display: block;
    max-width: 100%;
    color: var(--white);
    white-space: normal;   /* im Overlay dürfen lange Punkte umbrechen (Phone) */
    animation: nav-in 0.35s ease both;
  }

  .site-header--open .site-nav__label {
    min-width: 0;
    text-wrap: balance;
  }

  .site-header--open .site-nav__link:nth-child(1) { animation-delay: 0.05s; }
  .site-header--open .site-nav__link:nth-child(2) { animation-delay: 0.09s; }
  .site-header--open .site-nav__link:nth-child(3) { animation-delay: 0.13s; }
  .site-header--open .site-nav__link:nth-child(4) { animation-delay: 0.17s; }
  .site-header--open .site-nav__link:nth-child(5) { animation-delay: 0.21s; }
  .site-header--open .site-nav__link:nth-child(6) { animation-delay: 0.25s; }
  .site-header--open .site-nav__link:nth-child(7) { animation-delay: 0.29s; }
  .site-header--open .site-nav__link:nth-child(8) { animation-delay: 0.33s; }
  .site-header--open .site-nav__link:nth-child(n+9) { animation-delay: 0.37s; }

  .site-header--open .site-nav__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    padding-top: var(--gap-sm);
    border-top: 1.5px solid color-mix(in srgb, var(--white) 35%, transparent);
    animation: nav-in 0.35s 0.4s ease both;
  }

  .site-header--open .site-nav__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
  }

  /* im Overlay immer weiß — auch in der dunklen Variante (Leiste/kein Hero), deren Regel sonst gleich stark ist */
  .site-header--open .site-nav a,
  .site-header--open.site-header--dark .site-nav a {
    color: var(--white);
  }

  .site-header--open .site-nav__contact a {
    white-space: nowrap;
  }

  /* CTA im Overlay nur am Phone, wo die Leiste keinen CTA trägt — ab Laptop bleibt der Leisten-CTA der einzige (User 2026-09-23) */
  @media (max-width: 1023px) {
    .site-header--open .site-nav__cta {
      display: inline-flex;
    }
  }

  /* Kopfzeile über dem Overlay: Burger und CTA weiß, unabhängig von Hero-/Leisten-Zustand */
  .site-header--open .site-header__burger,
  .site-header--open.site-header--dark .site-header__burger {
    color: var(--white);
    --burger-contrast: var(--accent);
  }

  .site-header--open .site-header__cta {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
  }

  /* … und sein Hover im Overlay: Flächenwechsel wie .btn--white (weiß gefüllt, Akzentschrift) */
  @media (hover: hover) {
    .site-header--open .site-header__cta:hover {
      background: var(--white);
      color: var(--accent);
    }
  }

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

  @media (prefers-reduced-motion: reduce) {
    .site-header--open .site-nav__link,
    .site-header--open .site-nav__meta {
      animation: none;
    }
  }

  /* Unter 1500 trägt die Zeile die Silo-Navigation nicht mehr (Lasermedizin 6 Punkte + CTA):
     Nav wird zum Overlay in Akzentfarbe, Burger übernimmt (User 2026-09-16) */
  @media (max-width: 1499px) {
    .site-header__burger {
      display: inline-flex;
    }

    .site-nav {
      display: none;
    }

    .site-header__right {
      gap: var(--space-md);   /* nur CTA + Burger in der Zeile (User 2026-11-04) */
    }

  }

  @media (max-width: 1023px) {
    .site-header {
      flex-wrap: wrap;
      gap: var(--space-sm);
    }

    /* Phone: CTA wandert ins Overlay, in der Leiste nur Logo + Burger */
    .site-header__cta {
      display: none;
    }

    .site-header__logo img {
      width: 180px;
    }

    .site-header__logo--signet img {
      width: 54px;   /* Signet am Handy etwas größer (User 2026-11-04, vorher 44) */
    }

    .site-header--open .site-header__logo img {
      width: 180px;
      height: auto;
    }

    .site-header--open .site-header__logo--signet img {
      width: 54px;
    }

    .site-header--open .site-nav__links--grouped {
      grid-template-columns: 1fr;
    }

    .site-header__right {
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    /* Vorschaltseite: Weiche-Buttons untereinander, oben rechts neben dem Signet (User 2026-11-04) */
    .site-header__right--switch {
      flex-direction: column;
      align-items: flex-end;
      gap: var(--space-2xs);   /* etwas enger (User 2026-11-04) */
    }

    .contactbar {
      left: var(--container-gutter);
      height: auto;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-xs) var(--space-md);
      padding: var(--space-sm) var(--space-md);
    }
  }
}

/* Trennlinie vor „Operationstechniken“ im Overlay-Menü (tl_page.cssClass „nav-separator“, v3 02.3) */
@layer components {
  .site-header--open .site-nav__link--separated {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1.5px solid color-mix(in srgb, var(--white) 35%, transparent);
  }
}

/* Hero: Vollbild-Bühne mit Headline + Namenszeile; optional CTA unten links und Badge */

@layer components {
  .hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    background: var(--black);
    overflow: hidden;
  }

  .hero__media {
    position: absolute;
    inset: 0;
  }

  /* picture ist im Reset display:block → braucht die Höhe, sonst löst img height:100 % gegen auto auf */
  .hero__media figure,
  .hero__media picture,
  .hero__media img {
    width: 100%;
    height: 100%;
  }

  /* Lesbarkeit: Verlauf-Overlay über dem Foto, oben leicht (Logo/Nav), unten stärker (Text sitzt rechts unten) */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--scrim-soft), var(--scrim));
    pointer-events: none;
  }

  .hero__media img {
    object-fit: cover;
    object-position: var(--focal-x, 50%) var(--focal-y, 0%);   /* Fokuspunkt aus dem wichtigen Bildausschnitt (Template), sonst center top */
    opacity: 0.85;   /* Figma: Bild 85 % auf Schwarz */
  }

  /* Bild seitenverkehrt (Checkbox „Bild spiegeln“), Verlauf-Overlay bleibt */
  .hero--mirror .hero__media img {
    transform: scaleX(-1);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
  }

  /* Textblock: Figma x 973, Unterkante 126 (Namenszeile) */
  .hero__text {
    position: absolute;
    left: min(50.7%, calc(100% - 760px - var(--container-gutter)));   /* Figma x 973 @1920; auf Laptops mind. 760 breit, damit die 3 Design-Zeilen halten (User 2026-09-16) */
    right: var(--container-gutter);
    --hero-text-bottom: clamp(48px, calc(28.12px + 5.098vw), 126px);
    bottom: var(--hero-text-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  /* Lasermedizin: die fixe Kontaktleiste sitzt unter dem Text → Block höher (Figma 200) */
  .theme-lasermedizin .hero__text {
    bottom: clamp(120px, calc(99.61px + 5.229vw), 200px);
  }

  /* Buttons unten links (ein oder zwei, Abstand wie die Hinweis-Buttons) */
  .hero__actions {
    position: absolute;
    left: var(--container-gutter);
    bottom: var(--container-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Badge (Figma 221:146): runder Sticker 278 px, leicht gedreht, unten links */
  .hero__badge {
    position: absolute;
    left: clamp(24px, calc(0.44px + 5.784vw), 111px);
    bottom: clamp(24px, calc(12.53px + 2.941vw), 69px);
    width: clamp(160px, calc(129.92px + 7.712vw), 278px);
    height: clamp(160px, calc(129.92px + 7.712vw), 278px);   /* Kreis: Höhe = Breite, Inhalt muss hineinpassen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);   /* Figma: Uhr → Titel → Zeile 1 → Zeile 2 knapp gesetzt */
    padding: clamp(20px, calc(14.65px + 1.373vw), 41px);   /* Figma: Textgruppe 196 in 278 → 41 Rand */
    border-radius: 50%;
    background: var(--accent);
    text-align: center;
    transform: rotate(-8deg);
  }

  .hero__badge-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    background: currentColor;
    -webkit-mask: url("../../files/theme/img/icon-clock.svg") center / contain no-repeat;
    mask: url("../../files/theme/img/icon-clock.svg") center / contain no-repeat;
  }

  /* Kompakt-Variante für Unterseiten (Figma 233:2 „header"): 700 statt Vollhöhe, Bild 80 %,
     Text ab x 1042 (54,3 %), Unterkante 100 */
  .hero--compact {
    height: clamp(420px, 36.458vw, 700px);
    min-height: 0;
  }

  .hero--compact .hero__media img {
    opacity: 0.8;
  }

  .hero--compact .hero__text {
    left: min(54.3%, calc(100% - 760px - var(--container-gutter)));
    bottom: clamp(48px, calc(34.71px + 3.399vw), 100px);
  }

  /* Text links (Checkbox „Text links“): linke Hälfte, über der Button-Zeile — z. B. wenn rechts ein Gesicht im Bild ist */
  .hero--text-left .hero__text {
    left: var(--container-gutter);
    right: auto;
    width: calc(50% - var(--container-gutter));
    bottom: var(--hero-text-bottom);   /* gleiche Höhe wie Heros ohne Button (z. B. /chirurgie), nur links (User 2026-11-04) */
  }

  /* Text links → Button(s) rechts unten (User 2026-11-04) */
  .hero--text-left .hero__actions {
    left: auto;
    right: var(--container-gutter);
  }

  /* Laptop: der Textblock rückt nach links (min 760 breit) und teilt sich die Spalten mit den Buttons → über die Button-Zeile heben */
  @media (max-width: 1499px) {
    .hero--has-cta .hero__text {
      bottom: calc(var(--container-gutter) + var(--btn-h) + var(--gap-xs));
    }

    .hero--text-left .hero__text {
      bottom: var(--hero-text-bottom);
    }
  }

  @media (max-width: 1023px) {
    .hero__text {
      left: var(--container-gutter);
      bottom: 48px;
    }

    .hero--has-cta .hero__text {
      bottom: calc(var(--container-gutter) + var(--btn-h) + var(--gap-xs));
    }

    /* Text links: am Handy volle Breite und Abstand wie alle Heros (Bildfläche ist dort knapp) */
    .hero--text-left .hero__text {
      right: var(--container-gutter);
      width: auto;
      bottom: calc(var(--container-gutter) + var(--btn-h) + var(--gap-xs));
    }

    /* Text links: Querformat-Foto am Handy niedriger, damit beide Köpfe vollständig im Bild sind (User 2026-11-04: 390 → 565 hoch) */
    .hero--text-left {
      height: min(100svh, 145vw);
    }

    /* Button am Handy wieder links unter dem Text (User 2026-11-04) */
    .hero--text-left .hero__actions {
      left: var(--container-gutter);
      right: auto;
    }

    /* zwei Buttons stapeln am Phone */
    .hero--has-cta2 .hero__actions {
      flex-direction: column;
      align-items: flex-start;
    }

    .hero--has-cta2 .hero__text {
      bottom: calc(var(--container-gutter) + var(--btn-h) * 2 + var(--space-xs) + var(--gap-xs));
    }

    .hero__badge {
      display: none;
    }

    .hero--compact {
      min-height: 560px;   /* wie der Voll-Hero; Höhe bleibt definit (clamp), sonst kollabiert hero__inner (100 %) */
    }

    /* nur die Desktop-Position (left) zurücknehmen — bottom kommt aus den Regeln oben (ein/zwei Buttons) */
    .hero--compact .hero__text {
      left: var(--container-gutter);
    }
  }
}

/* Zahlen-Grid: 3 Spalten à 430 mit 111 Zwischenraum (1513 zentriert) + CTA.
   Stack: Zahl → Titel (sm) → Text (2xs); Grid → Button (sm). */

@layer components {
  .facts {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-inline: var(--inset-grid);   /* Figma 204 ab Außenkante */
    background: var(--white);
  }

  .facts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-3-gap);
    row-gap: var(--gap-grid);
    width: 100%;
    text-align: center;
  }

  .fact {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fact__number {
    white-space: nowrap;   /* „+ 23.456" ist breiter als die 430er-Spalte (Figma 453) */
  }

  .fact__title {
    margin-top: var(--gap-sm);
  }

  .fact__text {
    margin-top: var(--gap-2xs);
    max-width: 430px;
  }

  @media (max-width: 1023px) {
    .facts {
      padding-inline: var(--container-gutter);
    }

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

/* Einleitung: Großtext + Signet + Textspalte auf Verlauf (oder Weiß).
   Stack: Großtext → Seite (3xl); Text → Button (sm). Topline oben links = Breadcrumb-Slot. */

@layer components {
  .intro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
    background: url("../../files/theme/img/bg-verlauf.jpg") center / cover no-repeat;
    overflow: hidden;   /* Kind-Marquee läuft randlos */
  }

  .theme-lasermedizin .intro {
    background-image: url("../../files/theme/img/bg-verlauf-lasermedizin.jpg");
  }

  .intro--white {
    background: var(--white);
  }

  .intro__topline {
    position: absolute;
    top: var(--container-gutter);
    left: var(--container-gutter);
    right: var(--container-gutter);
    text-wrap: balance;   /* wie der Breadcrumb: eine Zeile oder gleichmäßig zweizeilig */
  }

  /* Einzug 150 sitzt an den Textblöcken, nicht am Band — ein Kind-Marquee (Über mich) läuft so randlos */
  .intro__big {
    max-width: calc(1322px + 2 * var(--inset-sm));
    padding-inline: var(--inset-sm);
  }

  /* Variante nur Großtext (Figma 239:540): Box 1322 mittig (x 299 @1920), Button darunter linksbündig, Großtext → Button 60 (gap-md) */
  /* Absätze im Großtext (Leerzeile im Backend) — eigene Blöcke, weil <br> unter 1500 px ausgeblendet wird
     und die Absätze sonst ineinanderlaufen; Abstand = die frühere Leerzeile */
  .intro__para {
    display: block;
  }

  .intro__para + .intro__para {
    margin-top: 1lh;
  }

  .intro--lead {
    align-items: center;
  }

  .intro__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
    width: 100%;
    max-width: calc(1322px + 2 * var(--inset-sm));
    padding-inline: var(--inset-sm);
  }

  .intro--lead .intro__big {
    max-width: none;
    padding-inline: 0;
  }

  .intro__side {
    padding-inline: var(--inset-sm);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--gap-sm-box);
  }

  .intro__signet {
    width: clamp(34px, calc(27.37px + 1.699vw), 60px);   /* verkleinert, 2× (User 2026-09-24) */
    height: auto;
    flex-shrink: 0;
    margin-top: var(--space-xs);   /* Signet-Oberkante = Cap-Höhe der ersten Textzeile */
  }

  .intro__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    max-width: 661px;
  }

  @media (max-width: 1023px) {
    /* Signet am Handy so groß wie im Header (User 2026-11-04) */
    .intro__signet {
      width: 54px;
    }

    .intro__big,
    .intro__side,
    .intro__lead {
      padding-inline: var(--container-gutter);
    }

    .intro--lead .intro__big {
      padding-inline: 0;
    }

    .intro__side {
      flex-direction: column;
      gap: var(--gap-xs);
    }

    .intro__col {
      max-width: none;
    }
  }
}

/* Logo-Marquee (Ehrenmitgliedschaften): Label → Headline (sm) → laufende Logo-Reihe (lg).
   Track = Logos + aria-hidden-Klon, Abstand 90 (Figma), Lauf per CSS, Pause nur bei Reduced Motion (Logos sind keine Links). */

@layer components {
  .memberships {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    background: var(--white);
    text-align: center;
    overflow: hidden;
  }

  .memberships__title {
    padding-inline: var(--container-gutter);
  }

  /* Marquee als Kind einer Einleitung (Über mich, Publikationsleistung): nur der Lauf, volle Breite, kein eigenes Band */
  .intro > .memberships {
    width: 100%;
    background: transparent;
  }

  /* „Weißer Hintergrund“ in der Einleitung (Über mich): eigenes weißes Band, Abstände über die Spacing-Selects */
  .intro > .memberships--white {
    background: var(--white);
  }

  .intro > .memberships .memberships__marquee {
    margin-top: 0;
  }

  /* Unterzeile unter der Headline (Textierung Startseite 04): Breite wie Banner-Text, Headline → Text 60 */
  .memberships__text {
    max-width: 850px;
    padding-inline: var(--container-gutter);
    margin-top: calc(var(--gap-md) - var(--gap-sm));
  }

  .memberships__marquee {
    width: 100%;
    margin-top: calc(var(--gap-lg) - var(--gap-sm));   /* Headline → Logos 70 statt Stack-Gap 50 */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }

  .memberships__track {
    display: flex;
    width: max-content;
    animation: memberships-run 40s linear infinite;
  }

  .memberships__group {
    display: flex;
    align-items: center;
    gap: clamp(40px, calc(27.25px + 3.268vw), 90px);   /* Figma 90 zwischen den Logos */
    padding-right: clamp(40px, calc(27.25px + 3.268vw), 90px);
  }

  .m-logo {
    flex-shrink: 0;
    width: 180px;   /* unbekannte Logos: neutrale Breite */
  }

  .m-logo img {
    width: 100%;
    height: auto;
  }

  /* Design-Breiten je Logo (Slug = Dateiname) */
  .m-logo--logo-oegch { width: 114px; }
  .m-logo--logo-dgch  { width: 379px; }
  .m-logo--logo-boec  { width: 97px; }
  .m-logo--logo-oegcf { width: 114px; }
  .m-logo--logo-acs   { width: 205px; }
  .m-logo--logo-ifso  { width: 181px; }
  .m-logo--logo-aco-asso { width: 290px; }   /* 397 × 119 → Höhe 87 wie DGCH */
  .m-logo--logo-eaes     { width: 114px; }   /* rund, wie ÖGCH/ÖGCF */
  .m-logo--logo-svv      { width: 114px; }   /* rund */
  .m-logo--logo-gerichts-sv      { width: 114px; }   /* rund, wie ÖGCH/ÖGCF */
  .m-logo--logo-krebshilfe-tirol { width: 488px; }   /* 600 × 107 → Höhe 87 wie DGCH */
  .m-logo--logo-gsae             { width: 391px; }   /* 2248 × 500 → Höhe 87 wie DGCH */
  .m-logo--logo-amic             { width: 143px; }   /* 180 × 144 → Höhe ~114 wie die runden Logos (Icon, ohne Figma-Vorgabe) */

  @keyframes memberships-run {
    to { transform: translateX(-50%); }
  }

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

  @media (max-width: 1023px) {
    .m-logo,
    .m-logo--logo-oegch, .m-logo--logo-dgch, .m-logo--logo-boec,
    .m-logo--logo-oegcf, .m-logo--logo-acs, .m-logo--logo-ifso,
    .m-logo--logo-aco-asso, .m-logo--logo-eaes, .m-logo--logo-svv,
    .m-logo--logo-gerichts-sv, .m-logo--logo-krebshilfe-tirol, .m-logo--logo-gsae,
    .m-logo--logo-amic {
      width: auto;
      height: 56px;
    }

    /* Höhe direkt am Bild: 100 % griff ins Leere (picture/a/figure ohne Höhe) → Chrome 0 px, Safari Originalgröße */
    .m-logo img {
      width: auto;
      height: 56px;
    }
  }
}

/* Video: Poster + Play + Namenszeile; Embed lädt erst nach Klick */

@layer components {
  .video {
    position: relative;
    height: min(1080px, 56.25vw);   /* Design-Geometrie 16:9 Vollbreite */
    background: var(--black);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-3xl);
  }

  .video[data-video-embed]:not([data-video-embed=""]) {
    cursor: pointer;
  }

  .video__poster {
    position: absolute;
    inset: 0;
  }

  .video__poster figure,
  .video__poster picture,
  .video__poster img {
    width: 100%;
    height: 100%;
  }

  .video__poster img {
    object-fit: cover;
    opacity: 0.65;
  }

  .video__play {
    position: relative;
    z-index: 2;
    width: clamp(64px, calc(52.28px + 3.007vw), 110px);
    height: clamp(64px, calc(52.28px + 3.007vw), 110px);
    transition: transform 0.25s ease;
  }

  .video__play img {
    width: 100%;
    height: 100%;
  }

  .video__name {
    position: relative;
    z-index: 2;
    text-align: center;
  }

  .video__frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .video.is-playing .video__play,
  .video.is-playing .video__name {
    visibility: hidden;
  }

  @media (hover: hover) {
    .video:hover .video__play {
      transform: scale(1.08);
    }
  }

  @media (max-width: 1023px) {
    .video {
      height: 70vw;
      min-height: 320px;
    }
  }
}

/* Zitat auf Akzent-Fläche: Labels (oben, Gutter-Höhe) → Zitat (3xl) → Portrait (lg) → Name (3xs).
   Variante --plain ohne Labels; optionales Sparkle-Dekor. Textfarbe: c-white im Markup. */

@layer components {
  .quote {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--accent);
    padding-inline: var(--container-gutter);
  }

  .quote__labels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    width: 100%;
    margin-bottom: var(--gap-3xl);
  }

  .quote__labels span:nth-child(2) { text-align: center; }
  .quote__labels span:nth-child(3) { text-align: right; }

  .quote__text {
    max-width: 1139px;
    text-align: center;
  }

  .quote__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);   /* Figma 30 Portrait → Name (Box zu Cap: 30 − 6 Leading ≈ 24) */
    margin-top: var(--gap-lg);
    text-align: center;
  }

  .quote__avatar,
  .quote__avatar img {
    width: var(--avatar);
    height: var(--avatar);
  }

  .quote__avatar img {
    border-radius: 50%;
    object-fit: cover;
  }

  .quote__star {
    position: absolute;
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  .quote__star--tl { top: var(--container-gutter); left: var(--container-gutter); }
  .quote__star--tc { top: var(--container-gutter); left: 50%; transform: translateX(-50%); }
  .quote__star--tr { top: var(--container-gutter); right: var(--container-gutter); }
  .quote__star--bl { bottom: var(--container-gutter); left: var(--container-gutter); }
  .quote__star--bc { bottom: var(--container-gutter); left: 50%; transform: translateX(-50%); }
  .quote__star--br { bottom: var(--container-gutter); right: var(--container-gutter); }

  @media (max-width: 1023px) {
    .quote__labels {
      grid-template-columns: 1fr;
      gap: var(--space-xs);
      justify-items: center;
    }

    .quote__labels span:nth-child(2),
    .quote__labels span:nth-child(3) {
      text-align: center;
    }
  }
}

/* Bild-Text-Sektionen: Grid 1030/890 (Figma: Bild 850 + Gutter, Text ab x 175 bzw. 1075),
   Text vertikal zentriert. Stack: Label → Headline (sm) → Text (md) → Liste/Akkordeon/Button.
   Bild-Inset oben/unten = pad-*-Klassen am Band (img-right: xs, img-left: std). */

@layer components {
  .split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1030fr) minmax(0, 890fr);
    align-items: center;
    background: var(--white);
  }

  .split--img-left {
    grid-template-columns: minmax(0, 890fr) minmax(0, 1030fr);
  }

  .split--gradient {
    background: url("../../files/theme/img/bg-verlauf.jpg") center / cover no-repeat;
  }

  .theme-lasermedizin .split--gradient,
  .split--gradient.accent-green {
    background-image: url("../../files/theme/img/bg-verlauf-lasermedizin.jpg");
  }

  /* Dachmarke-Schema (accent-anthracite) hat keinen eigenen Verlauf → neutral hellgrau statt blauem Verlauf (User 2026-09-23) */
  .split--gradient.accent-anthracite {
    background: var(--light-grey);
  }

  .split__media {
    padding-inline: var(--container-gutter);
  }

  .split--img-right .split__media { order: 2; padding-left: 0; }
  .split--img-left  .split__media { order: 1; padding-right: 0; }
  .split--img-right .split__content { order: 1; }
  .split--img-left  .split__content { order: 2; }

  .split__media img {
    width: 100%;
    aspect-ratio: 850 / 1000;
    object-fit: cover;
  }

  .split--img-left .split__media img {
    aspect-ratio: 850 / 900;
  }

  .split--teaser .split__media img {
    aspect-ratio: 850 / 950;
  }

  /* Option „Bild niedriger“ (Bildgröße Split-Quer 850×750) */
  .split--low .split__media img {
    aspect-ratio: 850 / 750;
  }

  @supports not (aspect-ratio: 1) {
    .split__media img { height: 52vw; }
    .split--img-left .split__media img { height: 46.9vw; }
  }

  .split__media--flip img {
    transform: scaleX(-1);
  }

  /* Zwei Bilder nebeneinander (Feld „Zweites Bild“): gleich groß, Hochformat wie das Einzelbild */
  .split__media-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Karte statt Bild (Kontakt/Anfahrt): Platzhalter in Bildgeometrie, Google Maps erst nach Klick */
  .map {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    aspect-ratio: 850 / 1000;
    padding: var(--container-gutter);
    background: var(--light-grey);
    text-align: center;
  }

  .split--img-left .map {
    aspect-ratio: 850 / 900;
  }

  .map__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .map.is-loaded .map__note,
  .map.is-loaded .map__load,
  .map.is-loaded .map__hint {
    display: none;
  }

  /* Teaser (Vorschaltseite): Bild abgedunkelt, Logo-Overlay */
  .split__media-frame {
    position: relative;
    background: var(--black);
  }

  .split__media-frame figure img {
    display: block;
    opacity: 0.85;
  }

  .split .split__media img.split__media-logo {
    position: absolute;
    top: clamp(24px, calc(17.37px + 1.699vw), 50px);
    width: clamp(160px, calc(114.12px + 11.765vw), 340px);
    height: auto;
    aspect-ratio: auto;
    opacity: 1;
  }

  .split .split__media img.split__media-logo--tr { right: clamp(24px, calc(17.37px + 1.699vw), 50px); }
  .split .split__media img.split__media-logo--tl { left: clamp(24px, calc(17.37px + 1.699vw), 50px); width: clamp(140px, calc(98.45px + 10.654vw), 303px); }

  .split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-inline: var(--inset);   /* symmetrisch (User 2026-09-16): Textbreite ergibt sich aus Spalte − 2 × Inset */
  }

  /* ein oder zwei Buttons nebeneinander (Abstand wie Hinweis-Buttons) */
  .split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Headline → Text 60 statt Stack-Gap 50 */
  .split__title + .split__text {
    margin-top: calc(var(--gap-md) - var(--gap-sm));
  }

  /* Checkliste = Core-Liste als Kind-Element (Stern-Icon in Akzentfarbe) */
  .split .content-list,
  .split .content-accordion {
    width: 100%;
  }

  .split .content-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .split .content-list li + li {
    margin-top: var(--space-xs);
  }

  .split .content-list li::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: var(--accent);
    -webkit-mask: url("../../files/theme/img/star.svg") center / contain no-repeat;
    mask: url("../../files/theme/img/star.svg") center / contain no-repeat;
  }

  /* Akkordeon-Design-Styles: in overwrites.css (unlayert), weil handorgel.min.css
     selbst unlayert lädt und sonst jede @layer-Regel schlägt. */

  /* Laptop: die Textspalte wird höher als das Bild → sie bringt selbst den Bandabstand mit
     (auf 1920 definiert das Bild die Höhe, Text ist zentriert; User 2026-09-16, 13"-MacBook).
     Nur wenn die Sektion den xs-Inset trägt (Bild-Kante 40): xs + (std − xs) = std. Sektionen mit explizitem
     std-Abstand (z. B. „Mein Weg“) bekommen nichts dazu — sonst verdoppelt sich der Abstand (User 2026-09-23). */
  @media (max-width: 1499px) {
    /* Laptop: der 1920-Inset (185) skaliert auf ~120–135 und lässt der Textspalte nur ~450 px → auf zwei Gutter kappen (User 2026-09-23, 13") */
    .split__content {
      padding-inline: calc(var(--container-gutter) * 2);
    }

    .split--img-right.pad-top-xs .split__content {
      padding-top: calc(var(--pad-std) - var(--pad-xs));
    }

    .split--img-right.pad-bot-xs .split__content {
      padding-bottom: calc(var(--pad-std) - var(--pad-xs));
    }
  }

  @media (max-width: 1023px) {
    .split,
    .split--img-left {
      grid-template-columns: 1fr;
    }

    .split--img-right .split__media,
    .split--img-left .split__media {
      order: 2;
      padding: 0 var(--container-gutter) var(--container-gutter);
    }

    /* Oberer Abstand kommt von der Sektion (pad-top-*) — vorher zusätzlich pad-std am Text → doppelt (Sead 2026-10-14).
       Nur bei kleinem/keinem Sektionsabstand füllt der Text auf std auf (wie am Laptop). */
    .split--img-right .split__content,
    .split--img-left .split__content {
      order: 1;
      padding: 0 var(--container-gutter) var(--gap-xl);   /* Abstand Text → Bild gestapelt (User 2026-11-04: mehr, vorher gap-xs → gap-lg → gap-xl) */
    }

    /* Laptop-Auffüllung bei pad-bot-xs gilt gestapelt nicht — sonst 44 statt 30 zwischen Text und Bild */
    .split--img-right.pad-bot-xs .split__content {
      padding-bottom: var(--gap-xl);
    }

    .split.pad-top-xs .split__content {
      padding-top: calc(var(--pad-std) - var(--pad-xs));
    }

    .split.pad-top-none .split__content {
      padding-top: var(--pad-std);
    }

    .split__media img,
    .split--img-left .split__media img,
    .split--teaser .split__media img {
      aspect-ratio: 4 / 5;
    }

    .split--low .split__media img {
      aspect-ratio: 850 / 750;
    }

    .split .content-list li::before {
      width: 14px;
      height: 14px;
    }
  }

  /* Teaser-Headline als Link (Vorschaltseite): Farbe erben, Hover = Unterstreichung wie sitewide */
  .split__title a {
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) {
    .split__title a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
}

/* Hinweis-Block (2 Spalten): links Info-Icon + Label → Headline (sm); rechts h3 → Text (sm) → Buttons (sm) */

@layer components {
  .notice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--container-gutter);
    padding-inline: var(--inset-sm);
    background: var(--white);
  }

  /* Hellgraue Variante (Backend-Checkbox „Helle Variante“): Band-Wechsel zwischen zwei weißen Nachbarn */
  .notice--light {
    background: var(--light-grey);
  }

  /* Hervorgehobene Variante (Backend-Checkbox „Hervorgehoben“, z. B. Notfall): Akzentfläche, Schrift c-white im Markup */
  .notice--accent {
    background: var(--accent);
  }

  .notice__left,
  .notice__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
  }

  .notice__right {
    padding-left: clamp(24px, calc(0.81px + 5.948vw), 115px);   /* Figma: rechte Spalte ab x 1075 */
    max-width: 776px;
  }

  .notice__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .notice__icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("../../files/theme/img/icon-info.svg") center / contain no-repeat;
    mask: url("../../files/theme/img/icon-info.svg") center / contain no-repeat;
  }

  /* Kompakt (ohne Headline, Unterseiten): Label = große Zeile, Icon wächst mit der Schrift */
  .notice--compact .notice__icon {
    width: 1.15em;
    height: 1.15em;
  }

  .notice__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  @media (max-width: 1023px) {
    .notice {
      grid-template-columns: 1fr;
      row-gap: var(--gap-xs);
      padding-inline: var(--container-gutter);
    }

    .notice__right {
      padding-left: 0;
      max-width: none;
    }
  }
}

/* CTA-Banner (Akzent-Fläche) und helle Variante: Label → Headline (sm) → Text (md) → Button (sm). c-white im Markup. */

@layer components {
  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-inline: var(--container-gutter);
    background: var(--accent);
    text-align: center;
  }

  .banner--light {
    background: var(--white);
  }

  .banner__text {
    max-width: 800px;
  }

  /* ein oder zwei Buttons, Abstand wie die Hinweis-Buttons */
  .banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }

  .banner__title + .banner__text {
    margin-top: calc(var(--gap-md) - var(--gap-sm));
  }
}

/* Footer = EIN flaches 3-Spalten-Grid über drei Reihen (Figma), Platzierung per grid-area, kein Subgrid (User 2026-09-22):
   Spalte 1 (592) Logo | Zentrum + Adresse
   Spalte 2 (856) Telefon/Mail | Arztblock
   Spalte 3 (max-content, rechtsbündig) CTA | Ordination/Zeiten | Credit
   Reihe 3 = © + Rechtliches als EINE Flex-Zeile über Spalte 1–2 (Figma: Impressum 93 nach dem ©-Ende); © bricht um, wenn der Platz fehlt
   (vorher © nowrap in Spalte 1 → lief ab 1500 in die vier Rechtliches-Links). Spalte 1/2 proportional wie Figma, damit die Mitte mitwandert.
   Reihenabstand 120 (gap-2xl). Phone: eine Spalte, Stapel = DOM-Reihenfolge (spaltenweise). */

@layer components {
  .footer {
    display: grid;
    grid-template-columns: auto auto auto;   /* Spalten = Inhaltsbreite, Restfläche in die Zwischenräume (User 2026-09-22) — Figma: Spalte 2 endet 1305, Spalte 3 beginnt 1489, beide Lücken 184 */
    grid-template-rows: auto auto auto;
    justify-content: space-between;
    column-gap: var(--gap-xs);   /* Mindestabstand, wenn die Inhalte eng werden */
    align-items: start;
    row-gap: var(--gap-2xl);
    padding-inline: clamp(20px, calc(7.25px + 3.268vw), 70px);   /* Figma 70 */
    background: url("../../files/theme/img/bg-verlauf.jpg") center / cover no-repeat;
  }

  .theme-lasermedizin .footer {
    background-image: url("../../files/theme/img/bg-verlauf-lasermedizin.jpg");
  }

  .theme-vorschalt .footer {
    background: var(--light-grey);
  }

  /* Platzierung (Desktop) */
  .footer__logo    { grid-area: 1 / 1; }
  .footer__address { grid-area: 2 / 1; }
  .footer__contact { grid-area: 1 / 2; }
  .footer__doctor  { grid-area: 2 / 2; }
  .footer__cta     { grid-area: 1 / 3; }
  .footer__hours   { grid-area: 2 / 3; }
  .footer__legal   { grid-area: 3 / 1 / 4 / -1; }

  /* Ohne Arztblock (Chirurgie seit #40: Name + Titel in Spalte 1) darf Spalte 1 in Reihe 2 die leere Spalte 2 mitnutzen —
     sonst bricht der lange Titel am schmalen 2-Spalten-Raster mitten im Wort („Univ.-/Doz.“, 1024) */
  .footer:not(:has(.footer__doctor)) .footer__address { grid-column: 1 / 3; }

  /* Reihe 1 */
  .footer__logo {
    justify-self: start;   /* Klickfläche = Logo, nicht die ganze Spalte (User 2026-09-22) */
    width: fit-content;
    margin-top: var(--space-xs);   /* Figma: Logo-Oberkante 70 = pad-sm + 10 (margin, damit der Abstand nicht klickbar ist) */
  }

  .footer__logo img {
    width: min(340px, 17.71vw);   /* Design-Geometrie Logo-Lockup */
    height: auto;
  }

  .footer__logo--signet img {
    width: min(85px, 4.43vw);   /* Signet verkleinert (User 2026-09-24, 2×) */
  }

  /* Kontaktzeilen: Silo-Footer 68 tiefer als das Logo (Figma 138), Vorschaltseite auf Logo-Höhe */
  .footer__contact {
    padding-top: clamp(24px, calc(6.79px + 3.203vw), 68px);
  }

  .theme-vorschalt .footer__contact {
    padding-top: 0;   /* Figma: Kontakt-Cap auf Logo-Höhe 70 → Zeilenbox 60 */
  }

  /* Kontaktzeile 60/63 hat 10 px weniger Unterlänge als eine 35er-Zeile → Figma 126 zum Spaltentitel */
  .footer__contact {
    margin-bottom: var(--space-xs);
  }

  .footer__contact a {
    display: block;
    width: fit-content;   /* Klickfläche = Text, nicht die Spaltenbreite (User 2026-09-22) */
    white-space: nowrap;   /* nie umbrechen (User 2026-09-16); Größe über .contact-lg-Token */
  }

  /* Rückverweis auf die Dachmarke (Silo-Footer): Klickfläche = Text */
  .footer__address a {
    display: block;
    width: fit-content;
    color: inherit;
    text-decoration: none;
  }

  .footer__cta {
    padding-top: clamp(40px, calc(20.05px + 5.098vw), 118px);   /* Figma: Button-Oberkante 177 = pad-sm + 117 */
  }

  /* Reihe 2 */
  .footer__col-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  /* Reihe 3 */
  /* © links, Rechtliches rechts am Inhaltsende von Spalte 2 (User 2026-09-22: „one flex, justify end, margin-right auto on the copyright“);
     © bricht um, bis es ~45 Zeichen schmal ist — erst dann rutschen die Links rechtsbündig in eine zweite Zeile */
  .footer__legal {
    display: flex;
    flex-wrap: nowrap;   /* © schrumpft auf zwei Zeilen (nowrap-Hälften), Links + Credit bleiben in der Zeile; Umbruch erst unter 1100 (unten) */
    justify-content: space-between;   /* © | Links | Credit mit gleichen Zwischenräumen (User 2026-09-23) */
    align-items: last baseline;   /* © wird zweizeilig → Links und Credit sitzen auf dessen letzter Zeile (User 2026-09-23); Grundlinie statt Unterkante, weil der Credit kleiner ist als die Links (User 2026-10-05) */
    gap: var(--gap-xs);   /* 40 wie zwischen den Links */
    align-self: baseline;
    width: 0;             /* trägt nichts zu den Spaltenbreiten bei (sonst weitet die Zeile Spalte 1/2 über den Inhalt hinaus) … */
    min-width: 100%;      /* … füllt aber die ganze Grid-Zeile (User 2026-09-23: © + Links + Credit in einer Zeile, auch am 13") */
  }

  /* © darf auf zwei Zeilen (Umbruch zwischen den Hälften), die Links bleiben in der Zeile; erst wenn nicht einmal die längere
     Hälfte (min-content) neben die Links passt, rutschen die Links in eine zweite Zeile (User 2026-09-23) */
  .footer__copyright {
    flex: 0 1 auto;   /* nicht wachsen — die Restfläche verteilt space-between gleichmäßig */
    min-width: auto;
  }

  /* die zwei Hälften brechen nur zwischen sich um */
  .footer__copyright-part {
    white-space: nowrap;
  }

  /* Sobald das einzeilige © nicht mehr neben Links + Credit passt, werden die Hälften ZWEI feste Zeilen: die ©-Box ist dann
     exakt so breit wie die längere Hälfte, und space-between verteilt die Restfläche gleichmäßig. (Flex-Shrink allein ließe
     Leerraum in der Box — die Lücke vor den Links wäre größer als die danach; User 2026-09-23, 1500.)
     Schwelle ≈ 1580 für alle Silos (je drei Links; Chirurgie seit #40: Akut · Impressum · Datenschutz, gemessen 2026-10-14). */
  @media (max-width: 1579px) {
    .footer__copyright-part {
      display: block;
    }
  }

  /* Fußnavigation = eine Link-Gruppe, rechtsbündig (Chirurgie: Akut vor dem Rechtlichen). Die Gruppe darf in sich umbrechen,
     statt die Zeile über den Rand zu schieben. */
  .footer__links {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
  }

  .footer__links-group {
    display: flex;
    flex-wrap: wrap;   /* Links brechen als Ganzes um, nicht mitten im Wort */
    justify-content: flex-end;
    gap: var(--space-xs) var(--gap-xs);   /* Figma 40 */
  }

  .footer__credit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .footer__credit img {
    height: 11px;
    width: auto;
  }

  @media (hover: hover) {
    .footer__contact a:hover,
    .footer__links a:hover,
    .footer__address a:hover,
    .footer__credit:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  /* Unter 1100 passt nicht einmal die längere ©-Hälfte neben Links + Credit → Zeile darf umbrechen (Links + Credit in Zeile 2) */
  @media (max-width: 1100px) {
    .footer__legal {
      flex-wrap: wrap;
    }
  }

  /* Laptop 1024–1100 (Chirurgie, längster Link „Akut- & Notfallchirurgie“): Credit allein in Zeile 2 → rechts; die anderen Silos passen hier noch in eine Zeile.
     Am Handy linksbündig wie auf den anderen Seiten (User 2026-11-04) */
  @media (min-width: 1024px) and (max-width: 1100px) {
    body:not(.theme-lasermedizin):not(.theme-vorschalt) .footer__credit {
      margin-left: auto;
    }
  }

  @media (max-width: 1023px) {
    /* KWER-Credit am Handy kleiner und näher an „created by“ (User 2026-11-04: 11 → 9 → 8 px) */
    .footer__credit {
      gap: var(--space-2xs);
    }

    .footer__credit img {
      height: 8px;
    }

    .footer {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      gap: var(--gap-xs);
      padding-inline: var(--container-gutter);
    }

    /* Eine Spalte: Platzierung zurücknehmen → Stapel in DOM-Reihenfolge (Logo, Adresse, Kontakt, Arzt, CTA, Zeiten, Rechtliches, Credit) */
    .footer__logo, .footer__address, .footer__contact, .footer__doctor, .footer__cta, .footer__hours, .footer__legal,
    .footer:not(:has(.footer__doctor)) .footer__address {
      grid-area: auto;
      justify-self: start;
      max-width: 100%;
    }

    .footer__legal {
      width: auto;
      min-width: 0;
    }

    .footer__legal {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .footer__copyright {
      min-width: 0;
      margin-right: 0;
    }

    .footer__links {
      align-items: flex-start;
    }

    .footer__links-group {
      justify-content: flex-start;
    }

    .footer__logo img {
      width: 160px;   /* mobil kleiner (Sead 2026-10-14, vorher 220) */
    }

    .footer__logo--signet img {
      width: 60px;   /* Signet am Handy etwas größer (User 2026-11-04, vorher 50) */
    }

    .footer__logo {
      margin-top: 0;
    }

    .footer__contact,
    .footer__cta {
      padding-top: 0;
    }
  }
}

/* Terminanfrage-Formular + Kopf-Abstand für Seiten ohne Hero.
   Typo: Formular-Tags aus Contaos .html5-Widgets tragen keine Klassen → Tag-Scope wie .legal (dokumentierte Ausnahme). */

@layer components {
  /* Erste Sektion unter dem absoluten Header (Seiten ohne Hero) */
  .page-head {
    padding-top: var(--header-clearance);
  }

  .contact-form {
    scroll-margin-top: calc(var(--btn-h) + var(--space-sm) * 2 + var(--gap-sm));   /* Anker #terminanfrage landet unter der Sticky-Leiste */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);   /* Feld → Feld 20 (Detail-Abstand, User 2026-09-22) */
    padding: var(--pad-std) var(--inset-sm);   /* eigenes Band-Padding oben/unten (Vorgänger kann hellgrau sein, User 2026-09-22) */
    max-width: 1100px;
    background: var(--white);
  }

  /* Contaos Formular liegt in form > .formbody → dort der Feld-Abstand */
  .contact-form .formbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .contact-form h2 {
    font-size: var(--fs-headline-md);
    font-weight: 500;
    line-height: 1;
    margin-bottom: var(--space-xs);
  }

  .contact-form label {
    display: block;
    font-size: var(--fs-text-xs);
    line-height: 1;
    margin-bottom: var(--space-xs);
  }

  /* Floating Labels (User 2026-09-22): Label liegt im leeren Feld, wandert bei Fokus oder Inhalt an den oberen Rand.
     Zustand „gefüllt“ setzt ein kleines Script im Footer-Template (is-filled); Select startet mit leerer Pflicht-Option. */
  .contact-form .widget-text,
  .contact-form .widget-textarea,
  .contact-form .widget-select,
  .contact-form .widget-captcha {
    position: relative;
  }

  .contact-form .widget-text > label,
  .contact-form .widget-textarea > label,
  .contact-form .widget-select > label,
  .contact-form .widget-captcha > label {
    position: absolute;
    left: calc(var(--space-md) + 1.5px);
    top: calc(var(--space-sm) + 1.5px + var(--fs-text-md) * 0.2);   /* optisch auf der Eingabezeile */
    margin: 0;
    font-size: var(--fs-text-md);
    line-height: 1.4;
    color: var(--accent);
    opacity: 0.55;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, opacity 0.15s ease;
  }

  .contact-form .widget:focus-within > label,
  .contact-form .widget.is-filled > label {
    top: 9px;
    font-size: var(--fs-text-xs);
    line-height: 1;
    opacity: 1;
  }

  .contact-form label .mandatory {
    margin-left: 1px;
  }

  .contact-form input.text,
  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"],
  .contact-form select,
  .contact-form input.captcha,
  .contact-form textarea {
    width: 100%;
    padding: calc(var(--space-sm) + 12px) var(--space-md) calc(var(--space-sm) - 12px);   /* Platz für das gefloatete Label oben */
    border: 1.5px solid var(--accent);
    border-radius: 16px;
    background: var(--white);
    font-size: var(--fs-text-md);
    line-height: 1.4;
    color: var(--accent);
  }

  .contact-form textarea {
    min-height: 220px;
  }

  /* Select (Anliegen): natives Aussehen aus, Chevron des Themes als Maske rechts */
  .contact-form select {
    appearance: none;
    padding-right: calc(var(--space-md) * 2 + var(--icon-sm));
    background: var(--white) no-repeat right var(--space-md) center;
    cursor: pointer;
  }

  .contact-form .widget-select {
    position: relative;
  }

  .contact-form .widget-select::after {
    content: "";
    position: absolute;
    right: var(--space-md);
    bottom: calc((var(--fs-text-md) * 1.4 + var(--space-sm) * 2) / 2 - var(--icon-sm) / 2);
    width: var(--icon-sm);
    height: var(--icon-sm);
    background: var(--accent);
    -webkit-mask: url("../../files/theme/img/chevron-down.svg") center / contain no-repeat;
    mask: url("../../files/theme/img/chevron-down.svg") center / contain no-repeat;
    transform: rotate(180deg);   /* Maske zeigt nach oben (Akkordeon dreht sie auf →), hier ↓ */
    pointer-events: none;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: var(--accent);
    opacity: 0.45;
  }

  .contact-form .widget-explanation {
    font-size: var(--fs-text-xs);
    line-height: 1.4;
    opacity: 0.75;
    max-width: 680px;
  }

  /* Datenschutz-Checkbox */
  .contact-form .checkbox_container > span {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .contact-form input.checkbox {
    appearance: auto;
    -webkit-appearance: auto;
    width: var(--icon-sm);
    height: var(--icon-sm);
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
  }

  .contact-form .checkbox_container label {
    margin: 0;
    font-size: var(--fs-text-xs);
    line-height: 1.4;
  }

  .contact-form .checkbox_container a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ALTCHA-Widget (Core-Captcha) */
  .contact-form altcha-widget {
    display: block;
  }

  .contact-form .widget-submit {
    margin-top: var(--gap-sm);
  }

  .contact-form .widget-submit button {
    display: inline-flex;
    align-items: center;
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border: var(--btn-border) solid var(--accent);
    border-radius: var(--btn-r);
    background: var(--accent);
    font-size: var(--fs-text-md);
    line-height: 1;
    color: var(--white);
    transition: background 0.25s ease, color 0.25s ease;
  }

  .contact-form p.error {
    margin-bottom: var(--space-xs);
    font-size: var(--fs-text-xs);
    line-height: 1.4;
    color: var(--error);
  }

  @media (hover: hover) {
    .contact-form .widget-submit button:hover {
      background: transparent;
      color: var(--accent);
    }
  }

  @media (max-width: 1023px) {
    .contact-form {
      max-width: none;
      padding: 0 var(--container-gutter) var(--pad-std);
    }

    .contact-form .widget-explanation {
      max-width: none;
    }

    .contact-form textarea {
      min-height: 180px;
    }
  }
}

/* Cookiebar (oveleon 2.x) im Brand-Look.
   BEWUSST UNLAYERT: das Vendor-CSS lädt ebenfalls unlayert — Overrides laufen
   über die --ccb-*-Variablen + Selektoren mit höherer Spezifität.
   Tints = color-mix aus den Tokens (keine Literalfarben). */

.contao-cookiebar {
  font-family: var(--font);

  --ccb-bg: var(--white);
  --ccb-clr: var(--accent);
  --ccb-bdr: color-mix(in srgb, var(--accent) 20%, var(--white));
  --ccb-box-shadow: var(--shadow-bar);

  --ccb-cookies-bg: color-mix(in srgb, var(--accent) 8%, var(--white));
  --ccb-cookies-bdr: color-mix(in srgb, var(--accent) 20%, var(--white));
  --ccb-info-bg: color-mix(in srgb, var(--accent) 8%, var(--white));
  --ccb-info-bdr: color-mix(in srgb, var(--accent) 20%, var(--white));

  --ccb-btn-bg: var(--white);
  --ccb-btn-bg-hvr: color-mix(in srgb, var(--accent) 8%, var(--white));
  --ccb-btn-bdr: var(--accent);
  --ccb-btn-clr: var(--accent);

  --ccb-checked-bg: var(--accent);
  --ccb-checked-clr: var(--white);
  --ccb-unchecked-bg: color-mix(in srgb, var(--accent) 30%, var(--white));
  --ccb-unchecked-clr: var(--white);
  --ccb-disabled-bg: color-mix(in srgb, var(--accent) 55%, var(--white));
  --ccb-disabled-clr: var(--white);

  --ccb-detail-clr: var(--accent);
  --ccb-detail-clr-hvr: color-mix(in srgb, var(--accent) 85%, var(--black));
  --ccb-focus-clr: var(--accent);
}

/* „Alle akzeptieren" = gefüllter Brand-Button (.highlight sitzt am .cc-footer) */
.contao-cookiebar .highlight .success {
  --ccb-btn-bg: var(--accent);
  --ccb-btn-bg-hvr: color-mix(in srgb, var(--accent) 85%, var(--black));
  --ccb-btn-bdr: var(--accent);
  --ccb-btn-clr: var(--white);
}

/* Pillen-Buttons wie im Design */
.contao-cookiebar .cc-btn {
  border-radius: var(--btn-r);
  font-family: var(--font);
}

.contao-cookiebar a {
  color: var(--accent);
}

/* Abstand Überschrift → Text (Sead 2026-11-09) */
.contao-cookiebar .cc-head h3 + * {
  margin-top: var(--space-sm);
}

/* Karten-Grid: News (2 Spalten, weiß) · Angebot (3 Spalten, hellgrau) · Text (3 Spalten Text, weiß) · Liste (Zeilen mit Linien, 1200 breit).
   Kopf: Label → Headline (sm); Kopf → Karten (xl); Reihen (grid).
   Karte: Bild → Titel (xs) → Text (2xs) → Button (xs). */

@layer components {
  .cards {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    padding-inline: var(--container-gutter);
    background: var(--white);
  }

  .cards__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .cards__grid {
    display: grid;
    row-gap: var(--gap-grid);
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .card__media {
    width: 100%;
  }

  .card__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .card__media + .card__title {
    margin-top: var(--gap-xs);
  }

  .card__text {
    margin-top: var(--gap-2xs);
  }

  /* Button sitzt am Kartenboden, damit die Buttons einer Reihe auf einer Linie stehen (User 2026-09-23);
     der Abstand Text/Titel → Button (xs) wandert dafür auf das Element davor.
     Zweizeilig in schmalen Spalten (Laptop) erlaubt, statt über die Karte zu laufen */
  .card > :has(+ .btn) {
    margin-bottom: var(--gap-xs);
  }

  .card .btn {
    margin-top: auto;
    max-width: 100%;
    height: auto;
    min-height: var(--btn-h);
    padding-block: var(--space-xs);
    white-space: normal;
    text-align: left;
  }

  /* Variante News: 2 Spalten, Bilder 880×500, Spaltenabstand 2 × Gutter (Figma 80) */
  .cards--news .cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--container-gutter) * 2);
  }

  .cards--news .card__media img {
    aspect-ratio: 880 / 500;
  }

  /* Hellgraue Variante (Backend-Checkbox „Helle Variante“): Band-Wechsel zwischen zwei weißen Nachbarn */
  .cards--light {
    background: var(--light-grey);
  }

  /* Variante Angebot: 3 Spalten auf Hellgrau, zentrierter Kopf, Bilder 587×450 */
  .cards--services {
    background: var(--light-grey);
  }

  .cards--services .cards__head,
  .cards--text .cards__head {
    align-items: center;
    text-align: center;
  }

  .cards--services .cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--container-gutter);
  }

  .cards--services .card__media img {
    aspect-ratio: 587 / 450;
  }

  /* Variante Text (Spezialisierungen): 3 Textspalten wie das Zahlen-Grid, zentriert */
  /* Einzug wie das Zahlen-Grid (Figma 204 ab Außenkante), keine feste Breite (User 2026-09-16) */
  .cards--text {
    padding-inline: var(--inset-grid);
  }

  .cards--text .cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-3-gap);
  }

  .cards--text .card {
    align-items: center;
    text-align: center;
  }

  /* 2 oder 4 Textkarten: zwei Spalten statt drei (Über mich: Entwicklung/Repertoire, Patienten-Service: Ablauf).
     Nur ab Laptop — :has() hat höhere Spezifität als die Phone-Regel unten. */
  @media (min-width: 1024px) {
    .cards--text .cards__grid:has(> :nth-child(2):last-child),
    .cards--text .cards__grid:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Genau 5 Karten: 3 + 2, untere Reihe zentriert (User 2026-09-22). 6 Spalten à span 2 = dieselbe
       Kartenbreite und derselbe Gap wie im 3er-Raster: (W − 2g)/3 */
    .cards--text .cards__grid:has(> :nth-child(5):last-child) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .cards--text .cards__grid:has(> :nth-child(5):last-child) > .card {
      grid-column: span 2;
    }

    .cards--text .cards__grid:has(> :nth-child(5):last-child) > .card:nth-child(4) {
      grid-column: 2 / span 2;
    }

    /* Genau 7 Karten (Chirurgie-Startseite: sechs Organbereiche + Operationstechniken): 3 + 3 + 1, letzte Karte über
       die ganze Rasterbreite (Sead 2026-10-14; vorher mittig in Spalte 2, Task #43) */
    .cards--text .cards__grid:has(> :nth-child(7):last-child) > .card:nth-child(7) {
      grid-column: 1 / -1;
    }
  }

  /* Variante Liste (Behandlungsspektrum, User 2026-09-22): zentrierter Kopf wie Text, darunter Zeilen mit Trennlinien
     (Linien + Zeilen-Innenabstand wie das Akkordeon in overwrites.css), 1200 breit wie das FAQ-Band.
     Zeile = Titel links (5/12) + Text rechts (7/12); Zeile ohne Text = eine Spalte. */
  .cards--list {
    align-items: center;
  }

  .cards--list .cards__head {
    align-items: center;
    text-align: center;
  }

  .cards--list .cards__grid {
    display: block;
    width: 100%;
    max-width: 1200px;
    border-top: 1.5px solid var(--accent);
  }

  .cards--list .card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: calc(var(--container-gutter) * 2);
    align-items: baseline;
    padding: var(--space-md);   /* wie das Akkordeon (handorgel-Button 20 rundum): Linien ragen über den Text hinaus (User 2026-09-23) */
    border-bottom: 1.5px solid var(--accent);
  }

  .cards--list .card:not(:has(.card__text)) {
    grid-template-columns: 1fr;
  }

  .cards--list .card__text {
    margin-top: 0;
  }

  /* Zeilentitel als Link (Karte mit Ziel, ohne Button-Text): Farbe erben, Hover = Unterstreichung wie sitewide */
  .card__title a {
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) {
    .card__title a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  @supports not (aspect-ratio: 1) {
    .cards--news .card__media img { height: 28.6vw; }
    .cards--services .card__media img { height: 23.4vw; }
  }

  @media (max-width: 1023px) {
    .cards--text {
      padding-inline: var(--container-gutter);
    }

    .cards--news .cards__grid,
    .cards--services .cards__grid,
    .cards--text .cards__grid {
      grid-template-columns: 1fr;
    }

    .cards--list .card {
      grid-template-columns: 1fr;
      row-gap: var(--gap-3xs);
    }
  }
}

/* Abgesetzte Karte (Backend „Abgesetzt“): Kachel „Operationstechniken“ im Organpaket-Raster (v3, 03.1).
   Hellgraue Fläche statt Rahmenlinie (Max 2026-10-08: „optisch nicht ideal mit dem Rahmen“); die Fläche ragt per
   box-shadow-Spread in den Spaltenabstand → Inhalt so breit wie die Nachbarkarten. Auf hellgrauem Band: weiße Fläche. */
@layer components {
  .card--outline {
    background: var(--light-grey);
    box-shadow: 0 0 0 var(--space-lg) var(--light-grey);
  }

  .cards--light .card--outline {
    background: var(--white);
    box-shadow: 0 0 0 var(--space-lg) var(--white);
  }
}

/* Button unter dem Raster (optional) */
@layer components {
  .cards__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--gap-sm);
  }
}

/* Lange Einzelwörter in schmalen Kachelspalten (z. B. „Operationstechniken“ im 4er-Raster) trennen statt überlaufen */
@layer components {
  .cards--text .card__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Abgesetzte Karte einspaltig (Phone/Tablet): Fläche innerhalb der Karte statt im Spaltenabstand, sonst klebt sie am Bildschirmrand */
@layer components {
  @media (max-width: 1023px) {
    .card--outline,
    .cards--light .card--outline {
      box-shadow: none;
      padding: var(--space-lg) var(--space-md);
    }
  }
}

/* Kopf-Unterzeile (optional, Backend „Text“): sagt, warum der Block da steht (Publikationen, Max 2026-10-08) */
@layer components {
  .cards__intro {
    max-width: 1200px;
  }

  .cards__intro > * + * {
    margin-top: var(--gap-3xs);
  }
}

/* Nummerierte Schritte (Backend „Nummerierte Schritte“, Patienten-Service „Ablauf in vier Schritten“, Max 2026-10-08:
   Reihenfolge muss klar sein): Kreis mit Ziffer über dem Titel, Verbindungslinie zur nächsten Karte, alle Schritte in EINER
   Reihe ab Laptop (vier Spalten statt 2 × 2 — sonst ist offen, ob man zeilen- oder spaltenweise liest). Ziffer-Typo in typography.css. */
@layer components {
  .cards--steps .cards__grid {
    counter-reset: step;
  }

  .cards--steps .card {
    position: relative;
    counter-increment: step;
  }

  .cards--steps .card::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: var(--btn-h);
    height: var(--btn-h);
    margin-bottom: var(--gap-xs);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: var(--white);
  }

  .cards--light.cards--steps .card::before {
    background: var(--light-grey);
  }

  @media (min-width: 1024px) {
    .cards--text.cards--steps .cards__grid,
    .cards--text.cards--steps .cards__grid:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      column-gap: calc(var(--container-gutter) * 2);
    }

    /* Linie vom Kreis zum nächsten Kreis (Mitte zu Mitte, durch den Spaltenabstand) */
    .cards--text.cards--steps .card:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--btn-h) / 2);
      left: calc(50% + var(--btn-h) / 2 + var(--space-sm));
      width: calc(100% + var(--container-gutter) * 2 - var(--btn-h) - var(--space-sm) * 2);
      border-top: 1.5px solid var(--accent);
    }
  }
}

/* Aufzählung in einer Karte (RTE-Liste): jeder Eintrag eine eigene Zeile mit feiner Trennlinie — sonst gingen die Einträge
   als „·“-Kette im Fließtext unter (Max 2026-10-08, Publikationen „Methoden aus 35 Jahren Forschung“) */
@layer components {
  .card__text ul {
    padding: 0;
    list-style: none;
  }

  .card__text li + li {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* FAQ-Band (Figma 246:858 „text-center accordion"): Hellgrau, alles zentriert.
   Stack: Label → Headline (sm) → Akkordeon (lg) → Text (md) → Button (sm); Liste und Text 1200 breit.
   Akkordeon-Optik (handorgel) liegt in overwrites.css (.faq .handorgel__*), weil handorgel.min.css unlayert lädt. */

@layer components {
  .faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--container-gutter);
    background: var(--light-grey);
    text-align: center;
  }

  /* Weiße Variante (Backend-Checkbox „Weißer Hintergrund“), wenn der Nachbar schon hellgrau ist */
  .faq--white {
    background: var(--white);
  }

  /* Bild als Hintergrund (Header-Optik, Mail Dr. Weiss 18.10.): Akzent wird Weiß → Akkordeon-Linien, Titel, Pfeil, Text folgen */
  .faq--image {
    --accent: var(--white);
    background: var(--black);
  }

  .faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
  }

  .faq__list {
    width: 100%;
    max-width: 1200px;
    text-align: left;
  }

  .faq__head + .faq__list {
    margin-top: var(--gap-lg);
  }

  .faq__text {
    max-width: 1200px;
  }

  .faq__list + .faq__text,
  .faq__head + .faq__text {   /* Publikations-Reader: Autorenzeile direkt unter dem Titel */
    margin-top: var(--gap-md);
  }

  .faq__text > * + * {
    margin-top: var(--gap-3xs);
  }

  .faq .btn {
    margin-top: var(--gap-sm);
  }
}

/* Zitat im Textband (RTE-Blockquote, Publikationen „Übersicht“ — vorher im blauen CTA-Banner, Max 2026-10-08):
   abgesetzt durch eine kurze Linie darüber, größere Schrift (typography.css) */
@layer components {
  .faq__text blockquote {
    margin-top: var(--gap-sm);
    margin-inline: auto;
    max-width: 1000px;
    padding-top: var(--gap-xs);
    border-top: 1.5px solid var(--accent);
  }
}

/* Organpakete (Umsetzungsdokument Chirurgie v3): Krankheitsbild im Akkordeon + Fachinformation.
   Akkordeon-Rahmen (handorgel) kommt aus overwrites.css (.faq .handorgel__*); hier nur der Inhalt. */

@layer components {
  .condition > * + * {
    margin-top: var(--space-md);
  }

  .condition__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Badge = Pill wie die Buttons, Akzent-Rahmen; „Standard“ gefüllt, „möglich“/„offen“ als Outline */
  .condition__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    text-decoration: none;
  }

  .condition__badge--standard {
    background: var(--accent);
    color: var(--white);
  }

  .condition__label {
    margin-bottom: var(--space-xs);
  }

  .condition__note {
    padding-left: var(--space-md);
    border-left: 1.5px solid var(--accent);
  }

  .condition :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: var(--space-xs);
  }

  .condition ul,
  .fachinfo__body ul {
    padding-left: 1.2em;
    list-style: disc;
  }

  .condition a:not(.condition__badge),
  .fachinfo__body a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Fachinformation: Hinweissatz + medizinische Fassung (Zwischenüberschriften h3 Organ, h4 Krankheitsbild) */
  .fachinfo__note {
    margin-bottom: var(--space-lg);
  }

  .fachinfo__body > * + * {
    margin-top: var(--space-sm);
  }

  .fachinfo__body h3 {
    margin-top: var(--gap-xs);
  }

  .fachinfo__body h4 {
    margin-top: var(--space-lg);
  }

  .fachinfo__body h3:first-child {
    margin-top: 0;
  }

  .fachinfo__body ul ul {
    margin-top: var(--space-xs);
  }

  .fachinfo__body li + li {
    margin-top: var(--space-xs);
  }

  @media (hover: hover) {
    a.condition__badge:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
}

/* Krankheitsbild/Verfahren als offener Block (ohne Akkordeon, Operationstechniken; Max 2026-10-08 „zu viele Tabs“):
   Zeilen wie die Linien-Liste (cards--list) — Titel links, Inhalt rechts, Trennlinie in Akzentfarbe. */
@layer components {
  .condition--block {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: calc(var(--container-gutter) * 2);
    align-items: start;
    padding-block: var(--gap-xs);
    border-bottom: 1.5px solid var(--accent);
  }

  .condition--block:first-child {
    border-top: 1.5px solid var(--accent);
  }

  .condition--block > * + * {
    margin-top: 0;
  }

  .condition__body > * + * {
    margin-top: var(--space-md);
  }

  @media (max-width: 1023px) {
    .condition--block {
      grid-template-columns: 1fr;
      row-gap: var(--space-md);
    }
  }
}

/* Online-Terminbuchung (Doctena): zentrierter Kopf wie das FAQ-Band, darunter der Kalender (1200 breit).
   Der Doctena-Loader setzt das iframe auf scrolling="no" und passt die Höhe per postMessage an → kein Scrollen im Rahmen. */

@layer components {
  .booking {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--container-gutter);
    background: var(--white);
    text-align: center;
  }

  /* Hellgraue Variante (Backend-Checkbox), wenn der Nachbar weiß ist */
  .booking--light {
    background: var(--light-grey);
  }

  .booking__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
  }

  .booking__text {
    max-width: 1200px;
  }

  .booking__head + .booking__text {
    margin-top: var(--gap-md);
  }

  /* Weiße Karte mit Innenabstand — die Doctena-App klebt sonst an der Rahmenoberkante (User 2026-09-23) */
  .booking__frame {
    width: 100%;
    max-width: 1200px;
    padding: var(--space-md);
    background: var(--white);
    text-align: left;
  }

  .booking__head + .booking__frame,
  .booking__text + .booking__frame {
    margin-top: var(--gap-lg);
  }

  /* Doctena meldet keine Inhaltshöhe (die App füllt den Rahmen und scrollt intern; Cross-Origin, per JS nicht messbar) →
     feste Höhe knapp über dem gemessenen Terminwahl-Schritt (Desktop 705, Phone 1126 bei 390) plus Doctenas Fußzeile/Cookie-Hinweis.
     In rem, damit sie mit der Browser-Schriftgröße mitwächst wie der Inhalt im Rahmen (User 2026-09-23). Der Registrierungsschritt
     nach der Terminwahl konnte ohne echte Buchung nicht gemessen werden — ist er höher, scrollt nur dieser Schritt im Rahmen. */
  .booking__frame iframe {
    display: block;
    width: 100%;
    height: 50rem;   /* 800 px @16 */
  }

  /* Platzhalter bis zur Zustimmung */
  .booking__consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--pad-sm) var(--container-gutter);
    background: var(--light-grey);
    text-align: center;
  }

  .booking--light .booking__consent {
    background: var(--white);
  }

  .booking__consent p {
    max-width: 700px;
  }

  @media (max-width: 1023px) {
    .booking__frame iframe {
      height: 76rem;   /* 1216 px @16 */
    }
  }
}

/* Publikationsverzeichnis (Modul „Publikationen“): zentrierter Kopf, darunter Jahresgruppen — Jahr links, Einträge rechts.
   Eintrag: Titel (Link) → Zitat → Autoren, Trennlinien zwischen den Einträgen; Rhythmus über die Gap-Tokens. Hellgraues Band, 1200 breit wie FAQ/Liste. */

@layer components {
  .pubs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--container-gutter);
    background: var(--light-grey);
  }

  .pubs__head {
    text-align: center;
  }

  .pubs__groups {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .pubs__head + .pubs__groups {
    margin-top: var(--gap-lg);
  }

  .pubs__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
    column-gap: var(--container-gutter);
    align-items: start;
  }

  .pubs__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Trennlinien zwischen den Einträgen wie in der Linien-Liste (cards--list): 1,5 px Akzent, Abstand über space-md (User 2026-09-23) */
  .pubs__item {
    padding-block: var(--space-md);
  }

  .pubs__item + .pubs__item {
    border-top: 1.5px solid var(--accent);
  }

  .pubs__item:first-child {
    padding-top: 0;
  }

  .pubs__item:last-child {
    padding-bottom: 0;
  }

  .pubs__item > * + * {
    margin-top: var(--gap-3xs);
  }

  .pubs__meta p {
    margin: 0;
  }

  .pubs__meta p + p {
    margin-top: var(--gap-3xs);
  }

  .pubs__name a {
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) {
    .pubs__name a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  @media (max-width: 1023px) {
    .pubs__group {
      grid-template-columns: 1fr;
      row-gap: var(--gap-2xs);
    }
  }
}

/* overwrites.css — BEWUSST UNGELAYERT und als LETZTES registriert.
   Escape-Hatch für Fälle, in denen fremdes (ungelayertes) CSS — z. B.
   handorgel.min.css — gewonnen hat. Regeln hier so schmal wie möglich halten. */

/* Akkordeon (Core-Accordion/handorgel) im Design-Kleid — in Bild-Text-Sektionen (.split) und im FAQ-Band (.faq) — muss handorgel.min.css
   (ebenfalls unlayert) per Spezifität/Reihenfolge schlagen.
   Figma: Titel 30/30 Regular, Zeile 71 Pitch = 20 oben / 20 unten + 1,5 px Linie, Einzug 20, Pfeil rechts 20. */
.split .content-accordion,
.faq .content-accordion {
  width: 100%;
}

/* Contao-Akkordeon-CSS gibt .content-accordion einen grauen Unterstrich — die Zeilen tragen ihre Linie selbst (User 2026-09-23) */
.content-accordion {
  border-bottom: 0;
}

.split .handorgel__header,
.faq .handorgel__header {
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  font: inherit;
  margin: 0;
}

.split .handorgel__header__button,
.faq .handorgel__header__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) - 1.5px);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--fs-headline-sm);   /* = .text-lg (handorgel setzt eigene font-Werte, unlayert) */
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  text-align: left;
}

.split .handorgel__header__button:hover,
.faq .handorgel__header__button:hover,
.split .handorgel__header__button:focus,
.faq .handorgel__header__button:focus,
.split .handorgel__header--open .handorgel__header__button,
.faq .handorgel__header--open .handorgel__header__button,
.split .handorgel__header--focus .handorgel__header__button,
.faq .handorgel__header--focus .handorgel__header__button {
  background: none;
  color: var(--accent);
}

/* Hover/Fokus wie in den anderen KWER-Akkordeons (sportgell/dibora): Label unterstrichen. Keine Opacity (User 2026-09-16).
   Pfeil: zu = ↓, offen = ↑ (Max 2026-10-08: „Pfeile umdrehen“; vorher zu = ↑ seit 2026-09-23); kein Hover-Drehen (User: „the underline hover is enough“). */
.split .handorgel__header__button:focus-visible,
.faq .handorgel__header__button:focus-visible {
  outline: none;   /* kein Fokus-Kasten (User 2026-10-14) — Unterstreichung ist hier der Fokus-Hinweis */
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .split .handorgel__header__button:hover,
  .faq .handorgel__header__button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

}

.split .handorgel__header__button::after,
.faq .handorgel__header__button::after {
  content: "";
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: var(--accent);
  -webkit-mask: url("../../files/theme/img/chevron-down.svg") center / contain no-repeat;
  mask: url("../../files/theme/img/chevron-down.svg") center / contain no-repeat;
  transform: rotate(180deg); /* Pfeil ↓ (zu) — Asset zeigt in Basislage nach oben */
  transition: transform 0.25s ease;
}

/* aria-expanded schaltet handorgel beim Klick sofort um (die Klassen --open/--opened erst nach der Höhen-Transition →
   der Pfeil drehte beim Schließen verzögert; User 2026-09-23) */
.split .handorgel__header__button[aria-expanded="true"]::after,
.faq .handorgel__header__button[aria-expanded="true"]::after {
  transform: rotate(0deg);   /* Pfeil ↑ (offen) */
}

/* Offenes Akkordeon: Linie wandert vom Titel unter den aufgeklappten Inhalt (User 2026-10-14). Titel-Linie nur transparent
   (Höhe bleibt, kein Springen); der Inhalt trägt die Linie selbst — zugeklappt ist sie mit dem Inhalt verborgen. */
.split .handorgel__header:has(> .handorgel__header__button[aria-expanded="true"]),
.faq .handorgel__header:has(> .handorgel__header__button[aria-expanded="true"]) {
  border-bottom-color: transparent;
}

.split .handorgel__content__inner,
.faq .handorgel__content__inner {
  border-bottom: 1.5px solid var(--accent);
}

.split .handorgel__content,
.faq .handorgel__content {
  border: 0;
  background: none;
}

.split .handorgel__content__inner,
.faq .handorgel__content__inner {
  padding: 0 var(--space-md) calc(var(--space-md) - 1.5px);   /* oben 0: Titel → Text trägt der Titel-Abstand; unten 20 bis zur Linie */
  font-size: var(--fs-text-md);   /* = .text-md (handorgel-Reset erzwingt eigene Werte) */
  line-height: 1.4;
  color: var(--accent);
}

/* Mehrere Absaetze im Akkordeon (Werdegang: ein Eintrag je Jahr, 2026-10-12) */
.split .handorgel__content__inner > .content-text > .rte > * + *,
.faq .handorgel__content__inner > .content-text > .rte > * + * {
  margin-top: var(--space-sm);
}

/* Aufzählungen im Akkordeon (Werdegang: Schwerpunkte, Fachgesellschaften, 2026-10-14) — reset.css nimmt ul die Punkte */
.split .handorgel__content__inner > .content-text > .rte ul,
.faq .handorgel__content__inner > .content-text > .rte ul {
  padding-left: 1.2em;
  list-style: disc;
}

.split .handorgel__content__inner > .content-text > .rte li + li,
.faq .handorgel__content__inner > .content-text > .rte li + li {
  margin-top: var(--space-xs);
}

/* Fehlerseiten + Stub-Seiten (Platzhalter): zentrierter Kurztext unter dem absoluten Header */
.error-page,
.page-stub {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: var(--header-clearance) var(--container-gutter) var(--pad-std);
  text-align: center;
}

.page-stub .btn + .btn {
  margin-left: var(--space-xs);
}

.error-page h1,
.page-stub h1 {
  font-size: var(--fs-headline-lg);   /* Kurzseiten-Text kommt aus dem RTE ohne Klassen → Tag-Scope wie .legal */
  font-weight: 500;
  line-height: 1.083;
}

.error-page p,
.page-stub p {
  font-size: var(--fs-text-md);
  line-height: 1.4;
}

.error-page p + p,
.page-stub p + p {
  margin-top: var(--gap-2xs);
}

/* Breadcrumb im Topline-Look des Designs: liegt oben links ÜBER dem Folgeband
   (das Band bekommt die Clearance per utilities-Regel). Typo: text-xs-loose im Markup (20/25, bricht wie im Design nach der Dachmarke um). */

@layer components {
  .mod_breadcrumb {
    position: relative;
    z-index: 1;
    height: 0;
  }

  .breadcrumb__list {
    position: absolute;
    top: var(--container-gutter);
    left: var(--container-gutter);
    right: var(--container-gutter);
    text-wrap: balance;   /* eine Zeile, wenn Platz; sonst gleichmäßig zweizeilig (User 2026-11-04, ersetzt Figma-Box 610) */
  }

  .breadcrumb__item {
    display: inline;
  }

  /* Trenner hängt am vorderen Crumb (::after), damit „GmbH |" wie im Design am Zeilenende bleibt */
  .breadcrumb__item:not(:last-child)::after {
    content: "|";
    margin-left: 0.5em;
    margin-right: 0.25em;   /* + Wortabstand aus dem Markup ≈ 0.5em */
  }

  @media (hover: hover) {
    .breadcrumb__item a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
}