/* ==========================================================================
   Theme-Starter für Figma-Projekte (Contao 5, modernes Twig-Layout)
   Natives CSS mit Nesting, keine Präprozessoren.

   WICHTIG: Diese Datei enthält nur MECHANIK, kein Design. Jede Stelle mit
   „PROJEKT:" ist ein Platzhalter und MUSS aus der Figma-Datei bzw. einer
   Kundenquelle belegt werden — niemals raten.
   Alle Marker finden:  grep -rn 'PROJEKT:' files/layout templates
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — immer lokal hosten (DSGVO), woff2, Subset auf den VOLLEN
   deutschen Zeichensatz (nicht nur genutzte Zeichen).
   Preload-URLs im Seitentemplate müssen EXAKT diesen URLs entsprechen.
   -------------------------------------------------------------------------- */
/* Montserrat lokal (google-webfonts-helper, latin) — XD nutzt Regular/Medium/
   SemiBold + Italic/Medium Italic; Serif = Times New Roman als System-Stack
   (kein Webfont — lizenzpflichtig, auf allen Systemen vorhanden). */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design-Tokens — Werte je Projekt aus dem Figma-JSON ableiten
   (Typo-Skala, Farbverteilung, Spaltenbreiten)
   -------------------------------------------------------------------------- */
:root {
  /* Farben aus dem XD */
  --color-primary: #575756;   /* Fließtext-Grau (Montserrat Regular 22) */
  --color-bg: #ffffff;
  --color-accent: #283583;    /* Primär-Blau (Titel, Links, Balken) */
  --c-blue: #283583;
  --c-blue-var: #3b4580;      /* Sektionstitel-Variante */
  --c-navy: #17214c;          /* Menü-Overlay, Hover-Overlays, Hero-Balken */
  --c-rose: #946f6a;          /* Serif-Titel altrosa (Wer wir sind, Kooperationen) */
  --c-rose-bar: #bf9388;      /* Hero-Box Start, Akkordeon-Balken-Wechselfarbe */
  --c-aubergine: #532051;     /* Abschiedsfeier-Farbwelt */
  --c-olive: #7a7444;         /* Bestattungsformen/Friedhöfe-Farbwelt */
  --c-brown: #957a55;         /* Trost-für-Kinder-Farbwelt */
  --c-green: #3c6728;         /* Schleifentexte-Titel */
  --c-red: #bf0505;           /* Hinweis-Rot (116 117, Bitte beachten Sie) */
  --c-grey-med: #707070;      /* Virtueller Rundgang-Titel */
  --bg-blue-soft: #e6e8f1;    /* hellblaue Bänder */
  --bg-blue-lighter: #f1f2f8; /* Verfügungen-Band */
  --bg-beige: #f0eae2;        /* Trauerdruck/Trost-Bänder */
  --bg-beige-rose: #eadfda;   /* Unser-Angebot-Band */
  --bg-olive-soft: #e4e2c9;   /* Bestattungsformen/Friedhöfe-Band */
  --bg-olive-mid: #f1efe2;    /* Grabarten-Band */
  --bg-schleifen: #c3c1ac;    /* Schleifentexte-Band */
  --bg-grey: #efefef;         /* Rundgang/Kondolenz-Band */
  --bg-grey-mid: #ededed;     /* Kontakt/Impressum/Datenschutz-Band */

  --ff-base: 'Montserrat', system-ui, sans-serif;
  --ff-serif: 'Times New Roman', Times, serif;

  /* Typo-Skala: trifft bei 1920px EXAKT die XD-Pixel, skaliert darunter.
     clamp so gewählt, dass a + b·vw bei 1920 = Sollwert. */
  --fs-display: clamp(2rem, 1.4rem + 1.875vw, 3.75rem);      /* 60px Hero-Serif */
  --fs-section: clamp(1.75rem, 1.3rem + 1.51vw, 3.125rem);   /* 50px Serif-Sektionstitel */
  --fs-heading: clamp(1.35rem, 1.11rem + 0.92vw, 2.1875rem); /* 35px Sans-Untertitel */
  --fs-subhead: clamp(1.2rem, 1.02rem + 0.71vw, 1.875rem);   /* 30px Zwischentitel/Balken */
  --fs-lead: clamp(1.1rem, 0.99rem + 0.47vw, 1.5625rem);     /* 25px Listen-Titel */
  --fs-body: clamp(1rem, 0.93rem + 0.31vw, 1.375rem);        /* 22px Fließtext */
  --fs-small: clamp(0.95rem, 0.9rem + 0.26vw, 1.25rem);      /* 20px klein */

  /* Inhaltsspalte: XD x=89..1831 (breites Raster) bzw. x=172..1748 (Text) */
  --content-width: 108.875rem;   /* 1742px */
  --text-width: 98.5rem;         /* 1576px — Textspalte x=172..1748 */
  --prose-width: 60rem;          /* Fließtext-Maß einzelner Absatzspalten */
  --space-section: clamp(3rem, 2rem + 3vw, 6.25rem);
  --space-block: clamp(1.5rem, 1rem + 1.5vw, 2.8rem);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: clip;                /* Vollbreite-Bänder (100vw) + Scrollbar-Rundung
                                      erzeugen sonst waagerechten Mini-Scroll */
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: 1.4;                /* PROJEKT: Zeilenhöhe aus Figma */
  color: var(--color-primary);
  background: var(--color-bg);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
}

p,
ul {
  max-width: var(--text-width);
}

p {
  margin-block: 0 1em;
}

:target {
  scroll-margin-top: 8rem;
}

html {
  scroll-behavior: smooth;
}

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

/* Skip-Link „Zum Inhalt springen" – nur bei Tastatur-Fokus sichtbar
   (Gegenstück: Anker + JS-Fokus-Ziel in script.js / Seitentemplate) */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7em 1.1em;
  background: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 700;
  border-radius: 3px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.75rem;
  outline: 3px solid var(--color-bg);
  outline-offset: 2px;
}

/* „Nach oben"-Button: fix unten rechts, erst nach Scrollen sichtbar
   (Ein-/Ausblenden übernimmt script.js über .to-top--visible) */
.to-top {
  position: fixed;
  right: 1rem;                     /* PROJEKT: Position/Maße aus Figma */
  bottom: 4rem;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 30;
  border-radius: 3px;
  background-color: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;

  &.to-top--visible {
    opacity: 1;
    visibility: visible;
  }

  /* Platzhalter-Pfeil als reines CSS — PROJEKT: durch das Figma-Icon ersetzen
     (Muster: SVG in files/layout/img/ + background-image, oder mask +
     currentColor, wenn das Icon die Textfarbe übernehmen soll) */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.75rem;
    height: 0.75rem;
    border: solid var(--color-bg);
    border-width: 3px 3px 0 0;
    transform: translateY(20%) rotate(-45deg);
  }
}

main:focus {
  outline: none;
}

/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen (Spezifität 0
   via :where, damit Element-Stile wie Button-Hintergründe weiter greifen). */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* PROJEKT: Auf dunklen Flächen braucht der Fokusring eine helle Farbe, z. B.:
:where(body.page--dark, .section--dark) :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--color-bg);
}
*/

/* --------------------------------------------------------------------------
   Layout-System: Inhaltsspalte + Vollbreite-Bänder
   Artikel ohne .full-bleed laufen automatisch in der Inhaltsspalte;
   .full-bleed (im cssID-Feld des Artikels) macht das Band vollbreit,
   dessen direkte Kinder werden wieder auf die Spalte begrenzt.
   -------------------------------------------------------------------------- */
.wrap,
.site-footer,
main .mod_article:not(.full-bleed) .mod_article__inner {
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
}

/* In full-bleed-Bändern werden direkte Kinder automatisch auf die
   Inhaltsspalte begrenzt (außer Vollbreite-/Hintergrund-Elemente); :where
   hält die Spezifität bei 0, damit .wrap/.full-bleed gewinnen */
:where(main .mod_article.full-bleed .mod_article__inner) > :where(*:not(.full-bleed):not(.section__media)) {
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
}

/* Sektions-Grundabstand (Artikel-Klasse .section im cssID-Feld);
   exakte Übergänge je Einsatzort ans Ende dieser Datei pinnen */
.section {
  padding-block: calc(var(--space-section) / 1.5);
}

/* --------------------------------------------------------------------------
   Contao-Elementwrapper (Mechanik, projektunabhängig)
   -------------------------------------------------------------------------- */
/* Bild-/Player-Elemente rendern als div > figure */
:is(.content-image, .content-player) figure {
  margin: 0;
}

.content-player video {
  display: block;
  width: 100%;
  height: auto;
}

/* Vollbreites Video wie vollbreites Bild behandeln */
.content-player.full-bleed video {
  object-fit: cover;
}

/* CSS-Zuschnitt NUR für VIDEOS (Contao beschneidet keine Videos) —
   Bilder IMMER über benannte Crop-Bildgrößen (respektieren den im
   Dateimanager markierten „wichtigen Teil"). */
[class*='ratio-'] video {
  width: 100%;
  object-fit: cover;
}

.ratio-32 video { aspect-ratio: 3 / 2; }
.ratio-43 video { aspect-ratio: 4 / 3; }
.ratio-11 video { aspect-ratio: 1 / 1; }
/* PROJEKT: weitere ratio-Klassen nach den Video-Slots des Designs ergänzen */

/* handorgel.min.css (natives Akkordeon) zieht unter jedem Akkordeon eine
   graue Linie — bei Bedarf projektweit entfernen */
.content-accordion {
  border-bottom: 0;
}

/* handorgel hinterlegt den Inhalt grau; ohne Innenabstand klebt der Text
   am Rand */
.handorgel__content__inner {
  padding: 1em 1em 0.5em;
}

/* Hyperlink-Elemente: Abstand wie ein umgebender Absatz */
.content-hyperlink {
  margin-block: 0 1em;
}

/* Im Seiten-Chrome (Kopf-/Fußzeile als Theme-Elementgruppen) gelten die
   Raster-Gaps der Gruppen — Absatz-Margins der Element-Wrapper würden sie
   aufblähen */
:is(.site-header, .site-footer) .content-hyperlink {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   Typografie — Gewichte/Farben/Abstände je Projekt aus dem Figma-Stil-Audit
   -------------------------------------------------------------------------- */
h1,
.display {
  font-size: var(--fs-display);
  font-weight: 400;                /* PROJEKT: Gewicht aus Figma */
  line-height: 1.05;               /* PROJEKT: aus Figma */
  margin-block: 0 0.5em;
  text-wrap: balance;
  /* Große Titel: lange deutsche Komposita (25+ Zeichen am Stück) mobil
     trennen, sonst überläuft die Überschrift die schmale Spalte. hyphens
     greift nur, wenn ein Wort sonst nicht passt (html lang muss gesetzt sein);
     bestehende Umbrüche bleiben unberührt. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h2,
.heading {
  font-size: var(--fs-heading);
  font-weight: 400;                /* PROJEKT: Gewicht aus Figma */
  line-height: 1.15;               /* PROJEKT: aus Figma */
  margin-block: 0 0.7em;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-block: 0 0.5em;
}

.text--small {
  font-size: var(--fs-small);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Buttons — nur Grundgerüst; PROJEKT: Look (Rahmen, Füllung, Icons, Hover)
   aus Figma. Selektorliste deckt Hyperlink-Elemente mit .btn im cssID-Feld
   und den Formular-Absenden-Button ab.
   -------------------------------------------------------------------------- */
a.btn,
button.btn,
summary.btn,
.widget-submit button,
.content-hyperlink.btn > a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.4em 0.6em;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--ff-base);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Formulare (z. B. Kontaktformular) — Label über dem Feld, Absenden im
   Button-Stil. Contao rendert das Formular mit der Legacy-Klasse .ce_form;
   die Feld-Klasse aus dem Backend landet am .widget-Wrapper.
   Sicherheitsfeld: Altcha im „Schwebenden Modus" (Projektstandard).
   -------------------------------------------------------------------------- */
:is(.ce_form, .content-form) {
  max-width: var(--text-width);

  & .widget {
    margin-bottom: 1.5rem;
  }

  & :is(.widget-text, .widget-textarea, .widget-altcha) {
    display: grid;
    gap: 0.5rem;

    & label {
      font-weight: 700;
    }
  }

  & :is(input.text, textarea) {
    width: 100%;
    padding: 0.75em 1em 0.6em;
    border: 1px solid var(--color-primary);
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    line-height: 1.2;

    &:focus-visible {
      outline: 3px solid var(--color-primary);
      outline-offset: 3px;
    }
  }

  & textarea {
    min-height: 9em;
    resize: vertical;
  }

  & .widget-submit {
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Kopfzeile — Theme-Elementgruppe (native CEs: Logo als Bild-Element mit
   Startseiten-Link, ggf. Telefon als Hyperlink-Element, Navigationsmodul)
   -------------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
  padding-block: 1.5rem;           /* PROJEKT: Logo-/Header-Position aus Figma */
}

/* PROJEKT: Liegt der Header im Design AUF einem Hero (Bild ab y=0), das
   Muster „Header-über-Hero" verwenden (Seitenklasse in
   tl_page.cssClass, absolute Positionierung NUR ab dem Design-Breakpoint,
   Regeln immer body-gescoped — die Seitenklasse landet auch an Nav-li!). */

/* WICHTIG: Figma liefert i. d. R. KEINEN Mobil-Header — ohne eigenen
   Mobil-Zustand läuft eine mehrteilige Header-Zeile (Zweitlinks, Telefon)
   plus Burger schmal über und der Menü-Button wird abgeschnitten. Darum
   IMMER einen Mobil-Header definieren. Muster (Werte je Projekt anpassen):
@media (max-width: 75.99rem) {
  .site-header { align-items: center; gap: 1rem; padding-block: 1rem; }
  .site-logo img { height: 3.75rem; }
  .site-header__meta { gap: 1.25rem; margin-top: 0; align-items: center; }
  .site-header__meta .content-hyperlink:not(.site-phone) { display: none; }
  .nav-burger { margin-top: 0; }
}
@media (max-width: 26rem) {   // ganz schmal: Telefon nur als Icon
  .site-phone a { font-size: 0; }
  .site-phone a::before { width: 1.5rem; height: 1.5rem; }
}
*/

/* Logo als natives Bild-Element (figure > a > img) */
.site-logo {
  line-height: 0.9;

  & figure {
    margin: 0;
  }

  & a {
    display: block;
  }

  & img {
    height: 4rem;                  /* PROJEKT: Logo-Höhe aus Figma */
    width: auto;
  }
}

/* PROJEKT: Icons (Telefon, Pfeile …) als SVG-Dateien in files/layout/img/
   ablegen und per mask + currentColor einfärben — Contaos Sanitizer escaped
   Inline-<svg> in html-Elementen. Muster:
.beispiel-icon::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background: currentColor;
  mask: url('../img/icon-beispiel.svg') no-repeat center / contain;
  -webkit-mask: url('../img/icon-beispiel.svg') no-repeat center / contain;
}
*/

/* --------------------------------------------------------------------------
   Navigation — Core-Modul „Navigationsmenü" mit Template
   mod_navigation_accessible. Struktur, JS und Core-CSS (navigation.css)
   bleiben aktiv; Farben/Raster hier über die --nav-*-Variablen und gezielte
   Overrides. Das Core-JS toggelt .is-active (Button + nav) und
   body.navigation-open; Escape-/Linkklick-Ergänzungen in script.js.
   -------------------------------------------------------------------------- */

/* Navigations-Breakpoint des Core-Menü-JS: unerreichbar hoch = das Menü ist
   auf ALLEN Breiten ein Burger-Overlay. PROJEKT: nur anpassen, wenn das
   Design ab Desktop eine sichtbare Menüleiste vorsieht. */
body {
  --nav-breakpoint: 99999px;
}

/* Core-Menü-JS setzt navigation-open am body, solange das Overlay offen ist */
body.navigation-open {
  overflow: hidden;
}

/* PROJEKT: Liegt der Header AUF einem dunklen Hero (helle Schrift) UND öffnet
   ein HELLES Overlay, sind zwei Dinge zu regeln (sonst unsichtbar/überlappt):
   1) Header-Teile, die sichtbar bleiben, bei offenem Menü auf die dunkle
      Textfarbe zurückdrehen — Spezifität über Kombi-Klasse sichern:
      body.page--hero-light.navigation-open header .site-header__meta … {
        color: var(--color-primary);
      }
   2) Der Burger wird beim Öffnen position:fixed → sein Flex-Slot fällt weg,
      die rechtsbündige Meta-Zeile dehnt sich unter das X. Platz reservieren:
      body.navigation-open .site-header__meta { padding-right: 4rem; } */

/* Menü-Button: natives Core-Markup und -Styling (navigation.css, drei
   icon-line-Striche, morphen beim Öffnen zum X). Die Striche folgen der
   Textfarbe. */
.nav-burger {
  color: var(--c-blue);
  --nav-burger-line-color: currentColor;
  --nav-burger-line-height: 0.1875rem;  /* XD „linien": 3px Strichstärke */

  /* Offenes Menü: der Button (jetzt X, weiß — XD-sandwich) liegt fix über dem
     Overlay — exakt an der Flow-Position der Öffnen-Schaltfläche,
     damit er beim Öffnen/Schließen nicht springt. */
  &.is-active {
    position: fixed;
    top: var(--burger-top, 3.10625rem);   /* = Flow-Position der Öffnen-Schaltfläche @1920 */
    right: max(1.5rem, calc((100vw - var(--content-width)) / 2));
    z-index: 30;
    margin: 0;
    color: #fff;
  }
}

/* XD „linien" (49×28): drei Striche 3px, Abstand 14px — oben 49px blau,
   Mitte 49px GRAU #707070, unten 25px blau (Zustand 2/Hover: alle 49px).
   Core-Markup: .icon-line (Mitte) + ::before (oben) + ::after (unten). */
body .nav-burger .icon-line,
body .nav-burger .icon-line::before,
body .nav-burger .icon-line::after {
  height: var(--nav-burger-line-height, 0.1875rem);
  width: 3.0625rem;                  /* 49px */
  border-radius: 0;
}

body .nav-burger .nav-burger__inner { width: 3.0625rem; }
body .nav-burger .icon-line { background: #707070; }
body .nav-burger .icon-line::before { top: -0.875rem; }   /* 14px Raster */
body .nav-burger .icon-line::after {
  bottom: -0.875rem;
  width: 1.5625rem;                  /* 25px — dritte Linie halb lang */
  left: 0;
  transform: none;
  /* Core transitioniert transform/top/bottom — width fürs Hover-Wachsen ergänzen */
  transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, width 0.2s ease-in-out;
}

/* XD „Zustand 2": dritte Linie wächst beim Hover von links auf volle Länge —
   NUR width animieren (transform steuert das X-Morphing) */
body .nav-burger:is(:hover, :focus-visible):not(.is-active) .icon-line::after {
  width: 3.0625rem;
}

/* X-Zustand: Mitte unsichtbar (Core), Schenkel volle Länge + weiß */
body .nav-burger.is-active .icon-line { background: transparent; }
body .nav-burger.is-active .icon-line::after {
  width: 3.0625rem;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* Menü-Overlay: fährt von oben ein (Core-JS toggelt .is-active); visibility
   hält das geschlossene Menü aus Tab-Reihenfolge und Screenreadern. */
.navigation-main {
  /* Core-navigation.css ist variablengesteuert — Projektwerte einspeisen
     (greifen in den body.nav-is-mobile-Regeln des Core, teils !important) */
  /* XD „sandwich": Overlay 1920×922 #17214c @ 92 %, weiße Schrift */
  --nav-mobile-background: rgb(23 33 76 / 0.922);
  --nav-mobile-color: #ffffff;
  --nav-mobile-active-color: #ffffff;
  --nav-mobile-active-background: transparent;
  --nav-mobile-separator-color: transparent;
  --nav-mobile-font-size: var(--fs-heading);
  --nav-mobile-padding: clamp(1.5rem, 4vw, 4rem);
  --nav-mobile-backdrop-height: 0px;

  position: fixed;
  inset: 0 0 auto 0;
  min-height: min(48rem, 100dvh);   /* XD: 922px hoch, Seite scheint unten durch */
  max-height: 100dvh;
  z-index: 20;
  overflow-y: auto;
  background: rgb(23 33 76 / 0.922);
  padding: clamp(1.5rem, 4vw, 4rem);
  translate: 0 -100%;
  visibility: hidden;
  transition: translate 0.6s ease, visibility 0s linear 0.6s;

  &.is-active {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.6s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &.is-active {
      transition: none;
    }
  }

  /* Navigation-überspringen-Link des Core-Templates unsichtbar halten */
  & a.skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* XD-„sandwich": ZWEISPALTIG — HM-Spalte links (x=306 bei 1920, 35px UPPER,
     94px-Rhythmus), die UM-Gruppe der Rubrik erscheint RECHTS daneben (x=857)
     auf Höhe ihres HM (30px, 59px-Rhythmus) bei Hover/Fokus/aktiver Rubrik.
     Keine Toggle-Pfeile. */
  & ul.level_1 {
    display: block;
    max-width: var(--content-width);
    margin: clamp(3rem, 2rem + 6.4vw, 11rem) auto 0;  /* 1. Punkt XD y=241 im Overlay */
    padding: 0 0 0 clamp(0.5rem, 11.3vw, 13.5625rem);  /* x=306 bei 1920 */
    list-style: none;
  }

  & ul.level_1 > li {
    position: relative;
    /* Hover-/Klickfläche reicht bis zur UM-Spalte (kein Loch zwischen HM-Text
       und UM), überdeckt die UM aber NICHT — sonst wechselte der Hover beim
       Bewegen in der UM aufs nächste li */
    width: clamp(14rem, 28.7vw, 34.4375rem);
    margin-bottom: clamp(0.8rem, 2vw - 0.4rem, 1.9375rem);   /* 94px-Rhythmus @1920 */
  }

  /* Rubrik-Titel (aktive Seite rendert als <strong>: XD-State SemiBold) */
  & ul.level_1 > li > :is(a, strong) {
    font-family: var(--ff-base);
    font-size: var(--fs-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    display: block;                /* füllt das li → ganze Breite klickbar */
    padding-block: 0.15em;
  }

  & ul.level_1 > li > strong {
    font-weight: 600;
  }

  & ul.level_1 > li > a:is(:hover, :focus-visible) {
    font-weight: 600;
  }

  /* UM-Spalte: absolut rechts neben der HM-Spalte, oben auf HM-Höhe
     (XD Δx = 857−306 = 551px) */
  & ul.level_1 > li > :is(.ul-wrapper, ul.level_2) {
    position: absolute;
    left: clamp(14rem, 28.7vw, 34.4375rem);
    top: 0;
    width: max-content;
    max-width: min(44rem, 45vw);
    display: none;
  }

  & ul.level_1 > li:is(:hover, :focus-within, .trail, .active) > :is(.ul-wrapper, ul.level_2),
  & ul.level_1 > li:has(> strong) > :is(.ul-wrapper, ul.level_2) {
    display: block;
  }

  /* Beim Hovern/Fokussieren einer ANDEREN Rubrik verschwinden die permanent
     sichtbaren UM der aktiven Rubrik (die Spalten überlagern sich sonst) */
  & ul.level_1:has(> li:is(:hover, :focus-within)) > li:not(:hover, :focus-within) > :is(.ul-wrapper, ul.level_2) {
    display: none;
  }

  & ul.level_2 {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;

    & li { margin-bottom: clamp(0.4rem, 1.2vw - 0.2rem, 1.1rem); }   /* 59er-Rhythmus */

    & :is(a, strong) {
      display: block;
      padding-block: 0.1em;
      font-size: var(--fs-subhead);
      font-weight: 400;
      color: #fff;
      text-decoration: none;
      margin-bottom: 0;
    }

    & strong { font-weight: 600; }

    & a:is(:hover, :focus-visible) {
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  /* Keine Aufklapp-Pfeile im sandwich-Layout (XD) */
  & .btn-toggle-submenu { display: none; }
}

/* Sobald das Core-JS body.nav-is-mobile setzt, greifen die mobilen Regeln aus
   navigation.css (laden NACH dieser Datei) — die Theme-Struktur hier mit
   höherer Spezifität (…header…) behaupten: Einfahr-Animation statt Fade,
   Rubriken-Raster, Unterpunkte immer sichtbar. */
body:not(.navigation-open):not(.nav-is-desktop) header .navigation-main {
  opacity: 1;   /* Core blendet per opacity — wir fahren per translate */
}

body.nav-is-mobile header .navigation-main {
  translate: 0 -100%;
  visibility: hidden;
  transition: translate 0.6s ease, visibility 0s linear 0.6s;

  &.is-active {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.6s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &.is-active {
      transition: none;
    }
  }

  /* XD-„sandwich" (Werte wie im Block oben): HM links, UM-Spalte rechts auf
     HM-Höhe; keine Toggles. Core-!important-Farben/Breiten zurückdrehen. */
  & ul.level_1 {
    display: block;
    max-width: var(--content-width);
    margin: clamp(3rem, 2rem + 6.4vw, 11rem) auto 0;
    padding: 0 0 0 clamp(0.5rem, 11.3vw, 13.5625rem);
  }

  & ul.level_1 > li {
    position: relative;
    width: clamp(14rem, 28.7vw, 34.4375rem);
    margin-bottom: clamp(0.8rem, 2vw - 0.4rem, 1.9375rem);
    border-bottom: 0 !important;
  }

  & ul.level_1 > li > :is(a, strong) {
    display: block;
    width: 100%;
    padding: 0.15em 0;
    font-size: var(--fs-heading);
    font-weight: 400;
    text-transform: uppercase;
    color: #fff !important;
  }

  & ul.level_1 > li > strong,
  & ul.level_1 > li > a:is(:hover, :focus-visible) {
    font-weight: 600;
  }

  & ul.level_1 > li > :is(.ul-wrapper, ul.level_2) {
    position: absolute;
    left: clamp(14rem, 28.7vw, 34.4375rem);
    left: 39rem;
    top: 0;
    width: max-content;
    max-width: min(44rem, 45vw);
    display: none;
    @media (max-width: 1440px) {
      left: 29rem;
    }    
  }

  & ul.level_1 > li:is(:hover, :focus-within, .trail, .active) > :is(.ul-wrapper, ul.level_2),
  & ul.level_1 > li:has(> strong) > :is(.ul-wrapper, ul.level_2) {
    display: block;
  }

  /* Beim Hovern/Fokussieren einer ANDEREN Rubrik verschwinden die permanent
     sichtbaren UM der aktiven Rubrik (die Spalten überlagern sich sonst) */
  & ul.level_1:has(> li:is(:hover, :focus-within)) > li:not(:hover, :focus-within) > :is(.ul-wrapper, ul.level_2) {
    display: none;
  }

  & ul.level_1 ul.level_2 {
    display: block;
    margin: 0;
    padding: 0;

    & li {
      padding: 0;
      margin-bottom: clamp(0.4rem, 1.2vw - 0.2rem, 1.1rem);
      border-bottom: 0 !important;
    }

    & :is(a, strong) {
      display: block;
      width: auto;
      padding: 0.1em 0;
      font-size: var(--fs-subhead, var(--fs-body));
      font-weight: 400;
      color: #fff !important;
      margin-bottom: 0;
    }

    & strong { font-weight: 600; }

    & a:is(:hover, :focus-visible) { font-weight: 600; }
  }

  & .btn-toggle-submenu { display: none; }
}

/* Menü-Overlay schmal: einspaltig gestapelt — die absolute UM-Spalte hätte
   keinen Platz, darum UM statisch UNTER dem HM und immer sichtbar. Gleiche
   Spezifität wie die nav-is-mobile-Regeln, per Quellreihenfolge dahinter. */
@media (max-width: 61.99rem) {
  body.nav-is-mobile header .navigation-main ul.level_1,
  .navigation-main ul.level_1 {
    padding-left: 0;
  }

  body.nav-is-mobile header .navigation-main ul.level_1 > li,
  .navigation-main ul.level_1 > li {
    width: auto;
  }

  body.nav-is-mobile header .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2),
  .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2) {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    padding: 0.2em 0 0 1.2em;
  }

  body.nav-is-mobile header .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2)::before,
  .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2)::before {
    content: none;
  }

  /* Mobil/Touch: ALLE Untermenüs immer aufgeklappt (kein Hover verfügbar) —
     überstimmt sowohl das Default-none als auch die Hover-Ausblend-Regel */
  body.nav-is-mobile header .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2),
  .navigation-main ul.level_1 > li > :is(.ul-wrapper, ul.level_2) { display: block !important; }
  .navigation-main ul.level_1:has(> li:is(:hover, :focus-within)) > li:not(:hover, :focus-within) > :is(.ul-wrapper, ul.level_2) { display: block !important; }
}

/* --------------------------------------------------------------------------
   Raster: Zwei-/Dreispalter (Klasse im cssID-Feld einer Elementgruppe;
   je Spalte eine verschachtelte Elementgruppe)
   -------------------------------------------------------------------------- */
.cols-2 {
  display: grid;
  gap: var(--space-block);

  @media (min-width: 48rem) {
    grid-template-columns: 1fr 1fr;
  }

  /* PROJEKT: exakten Spalten-Gap des Designs ab dem Design-Breakpoint pinnen,
     z. B.  @media (min-width: 76rem) { column-gap: 6.25rem; } */
}

.cols-3 {
  display: grid;
  gap: var(--space-block) 2.5rem;

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

  /* PROJEKT: exakten Spalten-Gap des Designs ab dem Design-Breakpoint pinnen */
}

.cols-2 :is(p, ul),
.cols-3 :is(p, ul) {
  max-width: none;
}

/* Gestapeltes Bild + Inhalt innerhalb einer Spalten-Gruppe braucht Abstand —
   sonst klebt die Überschrift am Bild darüber (Bild rendert mit margin 0,
   h2/h3 mit margin-top 0). Nur DIREKTE Kinder einfacher Spalten-Gruppen;
   PROJEKT: Sonderlayouts mit eigenen Abständen per :not() ausnehmen, sonst
   verdoppeln sich deren Abstände. */
:is(.cols-2, .cols-3) > .content-element-group > :is(.content-image, .content-player) + *,
:is(.cols-2, .cols-3) > .content-element-group > * + :is(.content-image, .content-player) {
  margin-top: var(--space-block);
}

/* --------------------------------------------------------------------------
   Bullet-Listen im Karten-/Leistungskontext (Klasse am Text-Element).
   PROJEKT: Rhythmus-Werte aus dem Figma-Raster ableiten (wiederkehrende
   Abstände ZENTRAL setzen statt Dutzende Einzelwerte zu pinnen).
   -------------------------------------------------------------------------- */
.card-list {
  & :is(h2, h3, p) {
    margin-bottom: var(--space-block);
  }

  & :is(h2, h3, p):has(+ ul) {
    margin-bottom: calc(var(--space-block) / 2);
  }

  & p:last-child {
    margin-bottom: 0;
  }

  & ul {
    list-style: none;
    margin: 0 0 var(--space-block);
    padding: 0;
  }

  & ul:last-child {
    margin-bottom: 0;
  }

  & li {
    padding-left: 1.1em;
    position: relative;
    margin-bottom: 0;

    &::before {
      content: '•';
      position: absolute;
      left: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   Fußzeile — Theme-Elementgruppe (native CEs; Grid über verschachtelte
   Gruppen mit den Klassen unten im cssID-Feld)
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-section) var(--space-block);

  & .site-footer__grid {
    display: grid;
    gap: var(--space-block);
    align-items: start;

    @media (min-width: 48rem) {
      grid-template-columns: auto 1fr auto;
    }

    /* PROJEKT: exakte Spaltenbreiten aus Figma ab dem Design-Breakpoint */
  }

  & .site-footer__links {
    display: grid;
    gap: 0.9375rem;                /* PROJEKT: Link-Abstand aus Figma */
    justify-items: start;

    & a {
      text-decoration: none;
    }
  }
}

/* --------------------------------------------------------------------------
   Muster (auskommentiert): Vollbild-Hero mit Medium hinter der Inhaltsspalte.
   PROJEKT: nur aktivieren, wenn das Design es vorsieht; Maße aus Figma.
   --------------------------------------------------------------------------
.hero {
  position: relative;
  isolation: isolate;

  & .mod_article__inner {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-content: end;
  }

  & .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;

    & figure {
      height: 100%;
    }

    & img,
    & video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
*/

/* --------------------------------------------------------------------------
   Ab hier projektspezifisch: Farbwelten (immer body-gescoped!), Sektions-
   Muster, exakte Abstands-Pins. Pixel-exakte Figma-Maße IMMER in
   @media (min-width: <Design-Breakpoint>) kapseln — mobil fluide Basiswerte.
   -------------------------------------------------------------------------- */