/* ==========================================================================
   Bestattungen Zobel – Theme
   Quelle: Figma ZOBEL_design (yw7wVWY4F1WwmBnVKIixtU)
   Natives CSS mit Nesting, keine Präprozessoren.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (lokal, keine Google-Server)
   League Spartan: Variable Font 100–700 · Rubik Pixels: Dekoschrift
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/league-spartan-variable.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik Pixels';
  src: url('../fonts/rubik-pixels-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  --bordeaux: #7A2532;                     /* Primärfarbe, exakter Figma-Wert */
  --bordeaux-dark: hsl(351, 53%, 23%);
  --bordeaux-tint: hsl(351, 35%, 96%);
  --ink: hsl(60, 3%, 11%);                 /* #1D1D1B – im Figma-Text ungenutzt */
  --paper: hsl(0, 0%, 100%);
  --mist: #D8E0E5;                         /* helles Blaugrau */
  --sand: #F8EFB0;                         /* blasses Gelb: Hero-Zeile 2, Akzente */
  --gradient-hero: linear-gradient(180deg, hsla(348, 58%, 32%, 0.1) 0%, hsl(12, 7%, 46%) 100%);

  --ff-base: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  --ff-deco: 'Rubik Pixels', var(--ff-base);

  /* Typo-Skala aus Figma (bei 1280px exakt): 80/80 thin · 35/40 light ·
     22/26 regular+bold · 15.4/18.2 bold — einzige Textfarben: Bordeaux/Weiß/Sand */
  --fs-display: clamp(2.75rem, 2rem + 3.75vw, 5rem);
  --fs-heading: clamp(1.625rem, 1.35rem + 1.1vw, 2.1875rem);
  --fs-body: clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem);
  --fs-small: 0.9625rem;

  --content-width: 72.5rem;                /* 1160px – Figma-Spalte x=60…1220 */
  --text-width: 52rem;                     /* Fließtextspalte (823px im Design) */
  --space-section: clamp(4rem, 3rem + 6vw, 9rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

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

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bordeaux); /* Figma: Fließtext ist bordeaux, nie schwarz */
  background: var(--paper);
}

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

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

p {
  margin-block: 0 1em;
  max-width: var(--text-width);
}

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

: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 */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7em 1.1em;
  background: var(--bordeaux);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  border-radius: 3px;
  transition: top 0.15s ease;
}

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

/* „Nach oben“-Button (Figma „Frame 61“): kleine Bordeaux-Kachel, fix unten
   rechts (x=1232, y=783 im 900er-Design-Viewport → bottom 77px) */
.to-top {
  position: fixed;
  right: 0.6875rem;
  bottom: 4.8125rem;
  width: 2.3125rem;
  height: 2.5rem;
  z-index: 30;
  border-radius: 3px;
  background-color: var(--bordeaux);
  /* Original-Figma-Pfeil (Frame 61, nach oben) */
  background-image: url('../img/icon-pfeil-hoch.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.0625rem 1.25rem;
  /* erst einblenden, wenn gescrollt wurde */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;

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

main:focus {
  outline: none;
}

/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen (Spezifität 0
   via :where, damit Element-Stile wie .btn-Hintergrund weiter greifen);
   auf dunklen/bordeauxfarbenen Flächen heller Ring. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bordeaux);
  outline-offset: 3px;
}

:where(body.page--dark, body.page--start, .section--bordeaux, .section--dark, .hero)
  :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--sand);
}

.wrap,
.site-footer,
main .mod_article:not(.full-bleed) .mod_article__inner {
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
}

/* Navigations-Breakpoint des Core-Menü-JS: das Zobel-Menü ist auf ALLEN
   Breiten ein Burger-Overlay (Figma), daher unerreichbar hoch */
body {
  --nav-breakpoint: 99999px;
}

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

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

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

/* handorgel.min.css zieht unter jedem Akkordeon eine graue Linie – im
   Zobel-Design unerwünscht (FAQ, Rechtshinweis, Genderhinweis) */
.content-accordion {
  border-bottom: 0;
}

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

/* Vollbreites Video wie vollbreites Bild behandeln (nativ 16:9, kein Deckel) */
.content-player.full-bleed video {
  object-fit: cover;
}

.content-player.full-bleed {
  margin-block: 0 clamp(3.5rem, 3rem + 4.5vw, 9.4rem);
}

/* Figma-Bildzuschnitte: Slots erzwingen das Design-Seitenverhältnis */
/* ratio-Klassen croppen nur noch VIDEOS – Bilder schneidet das Bildsystem
   (benannte Crop-Größen respektieren den „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-54 video { aspect-ratio: 5 / 4; }
.ratio-11 video { aspect-ratio: 1 / 1; }
.ratio-tall video { aspect-ratio: 3 / 5; }
.ratio-interior video { aspect-ratio: 6 / 7; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1,
.display {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 1;
  color: var(--bordeaux);
  margin-block: 0 0.5em;
  max-width: 16em;
  text-wrap: balance;
  /* lange Einzelwörter (z. B. „Bestattungsvorsorge") mobil trennen, sonst
     überläuft der große Titel die Spalte (+6px auf /vorsorge-treffen bei 390) */
  overflow-wrap: break-word;
  hyphens: auto;
}

h2,
.heading {
  font-size: var(--fs-heading);
  font-weight: 300;
  line-height: 1.15;
  color: var(--bordeaux);
  margin-block: 0 0.7em;
  text-wrap: balance;
}

/* Unterzeilen (eigenständige Überschriften-Elemente): 40px Abstand wie im
   Figma – fester Wert, damit auch h3 und die 80px-Display-Titel (0.5em=40
   über die .display-Regel) im selben Raster landen */
:is(h2, h3).content-headline:not(.display) {
  margin-block: 0 2.5rem;
}

/* Zentrierte schmale Inhaltsspalte (Figma: 750px) für Band-/Seiten-Intros */
.narrow {
  width: min(100% - 3rem, 46.875rem);
  margin-inline: auto;
  @media (max-width: 1023px) {
      /* margin-inline: 0; */
    }
}

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

.deco {
  font-family: var(--ff-deco);
  font-weight: 400;
}

.text--lg {
  font-size: var(--fs-heading);
  font-weight: 300;
  color: var(--bordeaux);
}

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

/* Plattdeutsche Gedichtzeilen – roter Faden der Website */
.quote {
  font-size: var(--fs-display);
  font-weight: 100;
  line-height: 1.05;
  color: var(--bordeaux);
  max-width: 12em;
  margin-block: 0;

  & blockquote {
    margin: 0;

    & p {
      max-width: none;
      margin: 0;

      &::before {
        content: '“';
      }

      &::after {
        content: '”';
      }
    }
  }
}

/* Allein stehendes Zitat zwischen zwei Abschnitten (eigener „section“-Abstand) */
.quote--solo {
  padding-block: calc(var(--space-section) / 2);
}

/* --------------------------------------------------------------------------
   Buttons & Chips – doppelter Rahmen mit Versatz (Figma-Stil)
   -------------------------------------------------------------------------- */
a.btn,
button.btn,
summary.btn,
.widget-submit button,
.content-hyperlink.btn > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.4em 0.6em;
  border: 1px solid var(--bordeaux);
  background: transparent;           /* Vorlage: Buttons ohne Füllung */
  color: var(--bordeaux);
  font-family: var(--ff-base);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--bordeaux);
    pointer-events: none;
  }

  /* Original-Figma-Pfeil rechts im Button (kleine Variante 14×12) */
  &::before {
    content: '';
    order: 2;
    flex-shrink: 0;
    width: 0.9em;
    height: 0.78em;
    background: currentColor;
    mask: url('../img/icon-pfeil-klein.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon-pfeil-klein.svg') no-repeat center / contain;
  }

  /* Vorlage: beim Hover füllt sich der Zwischenraum der beiden Rahmen */
  &:hover::after,
  &:focus-visible::after {
    box-shadow: 0 0 0 4px var(--bordeaux);
  }

  /* Große CTA-Buttons (Figma: 22px bold, 60px hoch inkl. Doppelrahmen) */
  &.btn--lg {
    font-size: var(--fs-body);
    padding: 0.6em 0.75em 0.5em;

    &::before {
      width: 0.77em;
      height: 0.9em;
      mask-image: url('../img/icon-pfeil.svg');
      -webkit-mask-image: url('../img/icon-pfeil.svg');
    }
  }
}

/* Hyperlink-Elemente: Abstand wie früher der umgebende Absatz */
.content-hyperlink {
  margin-block: 0 1em;
}

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

/* --------------------------------------------------------------------------
   Formulare (z. B. Kontaktformular) – Zobel-Look: Label über dem Feld,
   1px-Bordeaux-Rahmen wie Buttons/Chips, Absenden im Button-Stil
   (Contao rendert das Formular-Element mit der Legacy-Klasse .ce_form)
   -------------------------------------------------------------------------- */
:is(.ce_form, .content-form) {
  max-width: var(--text-width);

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

  & :is(.widget-text, .widget-textarea) {
    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(--bordeaux);
    border-radius: 0;
    background: var(--paper);
    color: var(--bordeaux);
    font: inherit;
    line-height: 1.2;

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

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

  /* Sicherheitsfrage (Altcha bringt seinen eigenen Kasten mit) */
  & .widget-altcha {
    display: grid;
    gap: 0.5rem;

    & label {
      font-weight: 700;
    }
  }

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

/* Anker-Chips unterhalb des Headers auf den Onepagern (Figma: 22px, 60px
   hoch, 21px-Innenabstand, ~45px-Lücken – so bleibt auch die M3-Reihe mit
   vier Chips einzeilig) */
.subnav {
  padding-block: var(--space-block);

  & .mod_article__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;

    @media (min-width: 76rem) {
      column-gap: 2.6875rem;

      /* Reihen ab fünf Chips (Urnen) verteilt das Figma über die volle
         Contentbreite (x=60..1220, variable Lücken 32-55px). Ein fester
         Durchschnitts-Gap liefe hier 2px über (990px Chips + 4×43px = 1162
         > 1160) und bräche den letzten Chip um – space-between reguliert
         sich selbst; der column-gap wirkt nur noch als Mindestabstand. */
      &:has(> .content-hyperlink:nth-child(5)) {
        justify-content: space-between;
        column-gap: 1rem;
      }
    }
  }

  & .content-hyperlink {
    margin: 0;
  }

  & .content-hyperlink.btn > a {
    font-size: var(--fs-body);
    font-weight: 700; /* Figma: Pills sind bold */
    background: transparent;         /* Vorlage: Chips ohne Füllung, Grund scheint durch */
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    padding-inline: 0.95em;          /* Figma: 21px seitlicher Innenabstand */

    /* Chips nutzen die große Pfeil-Variante (17×20) */
    &::before {
      width: 0.77em;
      height: 0.9em;
      mask-image: url('../img/icon-pfeil.svg');
      -webkit-mask-image: url('../img/icon-pfeil.svg');
    }
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Kopfzeile = Theme-Elementgruppe (native CEs: Logo, Telefon, Navigationsmodul) */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - 3rem, var(--content-width));
  margin-inline: auto;
  padding-block: 3.0625rem 1.5rem;         /* Logo-Oberkante y=49 (Figma) */
  @media (max-width: 1023px) {
    padding-block: 10px;
    gap: 10px
  }
}

body:not(.page--start):not(.page--hero) .site-header {
  position: static;
}

/* Unterhalb des Desktop-Breakpoints steht der Header auch auf Hero-Seiten im Fluss */
@media (max-width: 75.99rem) {
  body.page--hero .site-header {
    position: static;
  }
}

/* Unterseiten mit Bild-/Video-Hero (M4/M5): Header + Anker-Chips liegen AUF dem
   Hero (Figma: Bild beginnt bei y=0, Chips bei y=228). Nur ab Desktop –
   mobil ist das Hero-Bild zu niedrig für das Overlay. */
@media (min-width: 76rem) {
  body.page--hero main {
    position: relative;
  }

  body.page--hero .subnav {
    position: absolute;
    top: 14.25rem;
    left: 0;
    right: 0;
    z-index: 9;
    padding-block: 0;
  }

  /* Variante mit dunklem Hero (M5 Schafswiese): Header-Elemente + Chips in Weiß */
  body.page--hero-light {
    & header :is(.site-logo, .site-phone) {
      color: var(--paper);
    }

    & header .site-logo img {
      filter: brightness(0) invert(1);
    }

    & header .nav-burger:not(.is-active) {
      color: var(--paper);
    }

    & .subnav :is(a.btn, .content-hyperlink.btn > a) {
      background: transparent;
      border-color: var(--paper);
      color: var(--paper);

      &::after {
        border-color: var(--paper);
      }
    }
  }
}

/* Startseite: Header liegt auf dem Hero, alles in Weiß (Figma M1) */
body.page--start {
  & header :is(.site-logo, .site-phone) {
    color: var(--paper);
  }

  & header .site-logo img {
    filter: brightness(0) invert(1);
  }

  & header .nav-burger:not(.is-active) {
    color: var(--paper);
  }
}

/* Logo als natives Bild-Element (figure > a > img), verlinkt zur Startseite */
.site-logo {
  color: var(--bordeaux);
  line-height: 0.9;

  & figure {
    margin: 0;
  }

  & a {
    display: block;
  }

  & img {
    height: 5.5625rem;                     /* Figma: 89px */
    width: auto;
    @media (max-width: 1023px) {
      height: auto;
    }
  }
}

/* Gefüllte Icons (Figma) – SVG-Maske, färbt sich über currentColor */
.site-phone a::before,
.contact::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background: currentColor;
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
  rotate: 270deg;
  position: relative;
  top: 6px;
}

.site-phone a::before,
.contact--phone::before {
  --icon: url('../img/icon-phone.svg');
}

.contact--pin::before {
  --icon: url('../img/icon-pin.svg');
}

.contact--mail::before {
  --icon: url('../img/icon-mail.svg');
}

/* Telefon als natives Hyperlink-Element: Optik am Link, Layout am Wrapper */
.site-phone {
  color: var(--bordeaux);
  margin-left: auto;
  margin-right: 4.25rem;                  /* Figma: 100px Abstand zum Menü-Icon */
  margin-top: 0.8125rem;                  /* Figma: Telefon beginnt bei y=62, Logo bei 49 */
  @media (max-width: 1023px) {
    margin-right: 0;
    width: stretch;
    align-self: center;
  }
  & a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: var(--fs-heading);
    font-weight: 300;
    text-decoration: none;
    color: inherit; 
    top: 15px;
    position: relative;
  }
}

/* Menü-Button: natives Core-Markup und -Styling (navigation.css, drei
   icon-line-Striche, morphen beim Öffnen zum X). Die Striche folgen der
   Textfarbe; die Dicke kommt aus --nav-burger-line-height (Figma-Balken:
   7.2px bei 36px Breite). */
.nav-burger {
  margin-top: 0.5rem;                     /* Figma: Menü-Icon bei y=67 */
  color: var(--bordeaux);
  --nav-burger-line-color: currentColor;
  --nav-burger-line-height: 0.45rem;

  /* Offenes Menü: der Button (jetzt X) liegt fix über dem Overlay – an
     derselben Stelle wie die Öffnen-Schaltfläche (rechter Rand der
     Inhaltsspalte, Header-Höhe), auf jeder Viewport-Breite */
     @media (max-width: 1023px) {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }
  &.is-active {
    position: fixed;
    top: 3.5625rem;
    right: max(1.5rem, calc((100vw - var(--content-width)) / 2));
    z-index: 30;
    margin: 0;
    color: var(--bordeaux);
    @media (max-width: 1023px) {
      top: 0.5rem;
    }
  }
}

/* Contao 5.7 kennt --nav-burger-line-height noch nicht – Strichhöhe nachrüsten
   (Selektor mit body-Präfix, damit er die Core-Regel sicher überschreibt) */
body .nav-burger .icon-line,
body .nav-burger .icon-line::before,
body .nav-burger .icon-line::after {
  height: var(--nav-burger-line-height, 0.25rem);
}

/* Menü-Overlay (Core-Modul „Navigationsmenü" mit mod_navigation_accessible):
   Spalten mit Rubrik + Ankerlinks aus dem Seitenbaum. Fährt langsam 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 – Zobel-Werte einspeisen
     (greifen in den body.nav-is-mobile-Regeln des Core, teils !important) */
  --nav-mobile-background: var(--sand);    /* Figma-Menü: Rectangle 17, #F8EFB0 */
  --nav-mobile-color: var(--bordeaux);
  --nav-mobile-active-color: var(--bordeaux);
  --nav-mobile-active-background: transparent;
  --nav-mobile-separator-color: transparent;
  --nav-mobile-font-size: var(--fs-body);
  --nav-mobile-padding: clamp(1.5rem, 4vw, 4rem);
  --nav-mobile-backdrop-height: 0px;

  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  background: var(--sand);                 /* Figma-Menü: Rectangle 17, #F8EFB0 */
  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;
  }

  /* Rubriken-Raster (ehem. site-menu__grid) – Figma: Grid beginnt y=163 */
  & ul.level_1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-block) 2rem;
    max-width: var(--content-width);
    margin: 7rem auto 0;
    padding: 0;
    list-style: none;
  }

  /* Rubrik-Titel (aktive Seite rendert als <strong>, gleiche Optik) */
  & ul.level_1 > li > :is(a, strong) {
    font-size: var(--fs-heading);
    font-weight: 300;
    color: var(--bordeaux);
    text-decoration: none;
    display: block;
    margin-bottom: 0.8em;
  }
  /* Unterpunkte: immer sichtbar (kein Aufklappen – das Overlay IST das Menü) */
  & ul.level_2 {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;

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

    & :is(a:hover, strong) {
      font-weight: 700 !important;
    }
  }

  /* Submenu-Aufklapp-Buttons des Core-JS werden nicht gebraucht */
  & .btn-toggle-submenu {
    display: none;
  }
}

/* Sobald das Core-JS body.nav-is-mobile setzt, greifen die mobilen Regeln aus
   navigation.css (laden NACH zobel.css) – die Zobel-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;
    }
  }

  & ul.level_1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-block) 2rem;
    max-width: var(--content-width);
    margin: 7rem auto 0;
    padding: 0;
    @media (max-width: 1023px) {
      margin: 3rem auto 0;
    }
  }

  & ul.level_1 > li > :is(a, strong) {
    display: block;
    width: auto;
    padding: 0;
    font-size: var(--fs-heading);
    font-weight: 300;
    margin-bottom: 0.8em;
  }

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

    & li {
      padding: 0;
    }

    & :is(a, strong) {
      display: block;
      width: auto;
      padding: 0.35em 0;
      font-size: var(--fs-body);
      font-weight: 400;
      margin-bottom: 0;
      @media (max-width: 1023px) {
        padding: 0;
      }
    }
  }

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

/* --------------------------------------------------------------------------
   Hero (Startseite: später Imagevideo, vorerst Standbild)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;

  /* Sand-Bogen rechts, kreuzt die Hero-Unterkante (Figma: endet 183px darunter) */
  &::after {
    content: '';
    position: absolute;
    right: 7.65%;
    bottom: -11.4375rem;
    width: 10.125rem;
    height: 29rem;
    background: url('../img/deco-bogen-a-sand.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 2;
    @media (max-width: 1023px) {
      display: none;
    }
  }

  /* (Frame 61 ist der globale „Nach oben“-Button, siehe .to-top) */

  & .mod_article__inner {
    /* Voller Bildschirm, damit der animierte Claim sicher sichtbar ist;
       svh berücksichtigt mobile Browserleisten */
    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;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gradient-hero);
    }
  }

  & .hero__claim {
    width: min(100% - 3rem, var(--content-width));
    margin-inline: auto;
    padding-block: clamp(2.5rem, 2rem + 3vw, 5.8rem);
    color: var(--paper);

    & p {
      max-width: none;
      margin: 0;
    }

    /* Gestaffelte Einrückung wie im Figma (61px / 155px bei 1280) */
    & .hero__line1 {
      font-size: var(--fs-display);
      font-weight: 100;
      line-height: 1.1;
      display: block;
      padding-left: clamp(0rem, 4.75vw, 3.8125rem);
    }

    & .hero__line2 {
      /* Rubik Pixels (--ff-deco) lief hier zu fett und war schlecht lesbar –
         stattdessen dünner Schnitt der Hausschrift; die Sand-Partikel
         (zobel.js) tasten die Schrift ab und folgen der neuen Form von selbst */
      font-family: var(--ff-base);
      font-weight: 200;
      font-size: var(--fs-display);
      line-height: 1.2;
      display: block;
      padding-left: clamp(0rem, 12.1vw, 9.6875rem);
      color: var(--sand); /* Figma: Zeile 2 in Sandgelb */

      /* Kein Aufblitzen der statischen Schrift vor der Partikel-Animation
         (zobel.js): Zeile startet unsichtbar, solange JS läuft, Bewegung
         erlaubt ist und die Animation laufen kann (unter 48rem bricht die
         Zeile um, dort animiert zobel.js nicht). Startet die Animation
         nicht, setzt zobel.js die Klasse .hero__line2--static und die
         Zeile ist sofort wieder sichtbar. */
      @media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
        &:not(.hero__line2--static) {
          color: transparent;
          /* Sicherheitsnetz: falls zobel.js nicht lädt, Zeile nach 4s einblenden */
          animation: hero-line2-reveal 0s 4s forwards;
        }
      }
    }
  }
}

/* Sicherheitsnetz für die Hero-Zeile 2 (siehe .hero__line2) */
@keyframes hero-line2-reveal {
  to { color: var(--sand); }
}

/* Unterseiten-Kopf: Headline + Anker-Chips, Header ist hier statisch */
.page-intro {
  padding-top: var(--space-block);
}

/* --------------------------------------------------------------------------
   Sektionen
   -------------------------------------------------------------------------- */
.section {
  padding-block: calc(var(--space-section) / 1.5);
}

.section--dark {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  padding-block: 0;

  & .mod_article__inner {
    /* Figma-Band: 809px hoch bei 1280 (Maskenhöhe, nicht Bildhöhe!) */
    min-height: min(50.5rem, 63.2vw);
    display: grid;
    align-content: center;
    padding-block: var(--space-block);
  }

  @media (min-width: 76rem) {
    & .mod_article__inner {
      display: block;
      align-content: start;                /* align-content wirkt in Chrome auch auf Blöcke! */
      padding-block: 11.125rem 0;          /* Textblock beginnt 178px unter der Bandkante */
    }
  }

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

    & figure {
      height: 100%;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Figma legt KEIN abdunkelndes Overlay über das Bandfoto */
  }

  & :is(h1, h2, h3, .heading, .display, .quote, .text--lg) {
    color: var(--paper);
  }

  & :is(a.btn, .content-hyperlink.btn > a) {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);

    &::after {
      border-color: var(--paper);
    }

    &:hover::after,
    &:focus-visible::after {
      box-shadow: 0 0 0 4px var(--paper);
    }
  }

  /* Textblock sitzt rechts im Banner (Figma: x=822, 38px vor dem Spaltenrand) */
  & .wrap .rte {
    max-width: 22.5rem;
    margin-left: auto;

    & p {
      max-width: none;
    }

    @media (min-width: 76rem) {
      margin-right: 2.375rem;
    }
  }
}

.section--bordeaux {
  background: var(--bordeaux);
  color: var(--paper);
  padding-block: var(--space-section);

  & :is(h1, h2, h3, .heading, .display) {
    color: var(--paper);
  }

  /* Zitate und Links im Band hell; Muschel-Box behält dunkle Schrift */
  & .quote {
    color: var(--paper);
  }

  & .rte a:not(.btn) {
    color: var(--paper);
  }

  & .muschel {
    color: var(--bordeaux);
  }

  & .muschel :is(h2, h3) {
    color: var(--bordeaux);
  }
}

/* Helles Blaugrau-Band (Diamantbestattung) */
.section--mist {
  background: var(--mist);
  padding-block: var(--space-section);
}

/* Folgen zwei Mist-Bänder aufeinander, entsteht sonst doppeltes Padding
   (~240px statt Figma ~131) */
.section--mist + .section--mist {
  padding-top: 0;
}

/* Teamfoto + Zitat nebeneinander im Moin-Band, Strandfoto-Streifen dahinter (Figma) */
/* Vertretungs-Block (Drachen-Video + Text) unter dem Muschel-Zitat:
   Figma-Lücke Zitat → Video-Oberkante = 192px (bei 1280);
   danach Bandende → „Wo wir tohuus sind" = 153px */
@media (min-width: 76rem) {
  .team-row + .cols-2 {
    margin-top: 6.625rem;
  }

  #wo-wir-tohuus-sind {
    padding-top: 1.75rem;
  }
}

.team-row {
  align-items: center;
  position: relative;
  height: 900px;
  &::before {
    content: '';
    position: absolute;
    top: 26%;
    bottom: 4%;
    left: calc(50% - 50vw);
    width: 100vw;
    background: url('../media/strand-team.jpg') center -35vw / cover no-repeat;
    @media (max-width: 1023px) {
      top: 80px;
      bottom: 380px;
    }
  }
  .quote {
      margin-top: 200px !important;
      @media (max-width: 1023px) {
        margin-top: 50px !important;
      }
  }
  & > * {
    position: relative;
  }

  /* Figma: Herren-Foto 531px breit (Hochformat) – nicht auf 26rem deckeln */
  & .team-photo figure {
    max-width: 33rem;
  }

  /* Muschel-Illustration am rechten Rand des Strandstreifens (Figma) */
  &::after {
    content: '';
    position: absolute;
    right: 2%;
    bottom: -14%;
    width: 13rem;
    height: 15.5rem;
    background: url('../img/muscheln.svg') no-repeat center / contain;
    pointer-events: none;
    @media (max-width: 1023px) {
      position: relative;
      top: -90px;
      left: 0;
      width: 100%;
      background-size: 120px;
    }
  }
}

/* Halbbreites Einzelbild in einem full-bleed-Band (z. B. Drachen-Foto) */
.media-half figure {
  max-width: 46%;
}

/* Zitat-Zeile mit quadratischem Foto links, Zitat rechts (Figma Trauerfeier:
   Bild 530×530 bei x=60, Zitat bei x=690 → ~100px Spalte dazwischen) */
.quote-row {
  align-items: center;
  /* Figma (exakt): 92px unter dem Zitat bis zu den Spalten (bei 1280px) */
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);

  /* höhere Spezifität als .cols-2{gap} (sonst überschreibt das den Spaltenabstand) */
  &.cols-2 {
    @media (min-width: 48rem) {
      column-gap: 6.25rem;
    }
  }

  & .content-image figure {
    margin-inline: 0;
  }

  & .content-image img {
    width: 100%;
  }

  /* Bild-Swiper im Zitat-Slot (M4 „Un in de Färn…"): das Grid-Kind darf
     schrumpfen, sonst bläht der intrinsisch breite Swiper die Spalte auf */
  & .content-custom-swiper {
    min-width: 0;

    & .custom_swiper {
      width: 100%;
    }

    & img {
      width: 100%;
    }
  }
}

/* Zitat unterhalb eines Textblocks in einer Spalte: Abstand wie im Figma */
.cols-2 .quote {
  margin-top: var(--space-block);
}

/* Bildstapel rechts neben Textspalte (Figma Kennenlernen): klein oben rechts, groß darunter */
.media-stack {
  display: grid;
  gap: 1.5rem;

  /* Figma Kennenlernen: großes Interieur 397px linksbündig in der Spalte */
  & :is(.content-image, .content-player) {
    width: 72%;
  }

  /* kleines Foto 254px, rechts versetzt (endet 103px vor dem Spaltenrand) */
  & .media-stack__small {
    width: 46%;
    justify-self: end;
    margin-right: 18.7%;
  }
}

/* Zweispalter (Text neben Text/Bild) und Karten-Raster */
.cols-2 {
  display: grid;
  gap: var(--space-block);

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

  /* Figma-Raster: 530px-Spalten mit 100px-Lücke (x=60/690) */
  @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);
  }

  /* Figma-Raster: 320px-Spalten mit 100px-Lücken (x=60/480/900) */
  @media (min-width: 76rem) {
    column-gap: 6.25rem;
  }
}

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

/* Gestapeltes Bild + Inhalt innerhalb einer Karten-Spalte (verschachtelte
   Gruppe) braucht Abstand – sonst klebt die Überschrift am Bild darüber
   (Figma ~60px). Nur DIREKTE Kinder einer einfachen Spalten-Gruppe;
   Sonderlayouts (media-split/-stack, team-row, quote-row) ausgenommen,
   damit deren eigene Abstände nicht verdoppelt werden. */
:is(.cols-2, .cols-3):not(.media-split):not(.team-row):not(.quote-row) > .content-element-group:not(.media-stack) > :is(.content-image, .content-player) + *,
:is(.cols-2, .cols-3):not(.media-split):not(.team-row):not(.quote-row) > .content-element-group:not(.media-stack) > * + :is(.content-image, .content-player) {
  margin-top: var(--space-block);
}

/* Startseiten-Teaser „Beistand im Trauerfall.": Titel bricht wie im Figma
   in zwei Zeilen (Live-Font läuft etwas schmaler als der Figma-Satz,
   daher unterhalb der Figma-Boxbreite deckeln) */
.section--beistand h1 {
  max-width: 42rem;                        /* Figma: Titel läuft zweizeilig */
}

/* Startseiten-Teaser: die drei H1 (.einblenenNummer1-3) blenden nacheinander
   ein und aus. zobel.js stapelt sie dazu in einen Grid-Wrapper
   (.headline-rotator); die Animation selbst läuft rein in CSS. Ohne JS
   stehen alle drei Überschriften statisch untereinander; läuft JS, aber
   der Nutzer wünscht reduzierte Bewegung, bleibt nur die erste stehen. */
@media (scripting: enabled) {
  :is(.einblenenNummer2, .einblenenNummer3):not(.headline-rotator > *) {
    display: none;
  }
}

.headline-rotator {
  display: grid;

  & > .content-headline {
    grid-area: 1 / 1;                      /* alle drei übereinander, Höhe = längste */
    max-width: none;                       /* Bild daneben ist entfernt – volle Breite */
    opacity: 0;
    animation: headline-cycle 12s infinite;
  }

  & > .einblenenNummer2 { animation-delay: 4s; }
  & > .einblenenNummer3 { animation-delay: 8s; }
}

/* 4s je Überschrift: 0,8s einblenden, 2,4s halten, 0,8s ausblenden
   (Prozentwerte anteilig am 12s-Zyklus) */
@keyframes headline-cycle {
  0%     { opacity: 0; }
  6.67%  { opacity: 1; }
  26.67% { opacity: 1; }
  33.33% { opacity: 0; }
  100%   { opacity: 0; }
}

/* Button-Absätze in den Bändern/Teasern: 40px über dem Button (Figma;
   der Absatz-Margin des Vortexts kollabiert hinein) */
:is(.section--beistand, .section--vorsorge, .section--dark, .section--bordeaux, .section--mist) .rte > p:has(> a.btn:first-child) {
  margin-top: 2.5rem;
}

/* Überschriften in den Textblöcken der Farbbänder: 40px zum Folgeinhalt
   (Figma-Raster, überall identisch gemessen: M2 Kampweg/Vertretungen,
   M4-Spalten, M5 Verfügungen). Margins benachbarter Blöcke kollabieren,
   exakt gepinnte größere Abstände (z. B. .fragebogen) gewinnen dadurch. */
:is(.section--bordeaux, .section--mist, .section--dark, .section--beistand, .section--vorsorge) .content-text .rte > :is(h2, h3):not(:last-child):not(:has(+ ul)),
body.page--dark .content-text .rte > :is(h2, h3):not(:last-child):not(:has(+ ul)) {
  margin-bottom: 2.5rem;
}

/* Intro → Spaltenraster der Info-Bänder: exakte Figma-Lücken (nur Desktop);
   die Anker sind die Artikel-IDs aus dem cssID-Feld */
@media (min-width: 76rem) {
  /* Werte = volle Figma-Lücke: der Absatz-Margin des Intros kollabiert hinein */
  #verfuegungen .cols-3 {
    margin-top: 10.1875rem;                /* Figma: 163px unter dem Intro-Text */
  }

  #abschiedsrituale .cols-3 {
    margin-top: 4.625rem;                  /* Figma: 74px unter dem Intro-Text */
  }
}

/* Bullet-Listen im Leistungs-/Kartenkontext (Klasse am Text-Element).
   Figma-Rhythmus der Info-Bänder: 40px zwischen allen Blöcken (Titel, Absätze,
   Liste, Button), 20px zwischen „Wichtig zu wissen:" und der Liste,
   Listenzeilen laufen ohne Zusatzabstand durch (nur Zeilenhöhe). */
.card-list {
  & :is(h2, h3) {
    margin-bottom: 2.5rem;
  }

  & p {
    margin-bottom: 2.5rem;
  }

  & :is(h2, h3, p):has(+ ul) {
    margin-bottom: 1.25rem;
  }

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

  & ul {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
  }

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

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

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

/* Muschel-Bogen-Ornamente (Figma) – dekorative Linien rechts der Collagen */
.ornament {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    pointer-events: none;
    background: no-repeat center / contain;
  }

  &.ornament--a::after {
    background-image: url('../img/deco-bogen-a.svg');
    width: 10.125rem;
    height: 29rem;
    right: 6%;
  }

  &.ornament--b::after {
    background-image: url('../img/deco-bogen-b.svg');
    width: 10.125rem;
    height: 27.1875rem;
    right: 28%;
  }

  &.ornament--c::after {
    background-image: url('../img/deco-bogen-c.svg');
    width: 10.2rem;
    height: 60rem;
    right: 8%;
  }

  @media (max-width: 60rem) {
    &::after {
      display: none;
    }
  }
}

/* Einsatzort-genaue Bögen (Positionen aus dem Figma-JSON, x/y der Union-Nodes) */
:is(.ornament-kennen, .ornament-riten) {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: no-repeat top left / contain;
  }

  @media (max-width: 60rem) {
    &::after {
      display: none;
    }
  }
}

/* M2 Kennenlernen: langer Sand-Bogen, Bein rechts (Figma-Union x=983…1146, y=439).
   Die Kappe sitzt direkt auf dem kleinen Video (Figma: Videooberkante y=513, also
   74px unter der Bogen-Oberkante), das Bein läuft rechts am Video + Interieur-Foto
   entlang und endet ~78px darunter (Figma-Bein y=1410, Interieur-Unterkante 1332).
   Feste Hintergrundbreite statt „contain“, damit die gekürzte Höhe das gerade Bein
   nur abschneidet, ohne die Form zu stauchen. */
.ornament-kennen::after {
  background-image: url('../img/deco-bogen-c-sand.svg');
  background-size: 10.2rem auto;
  width: 10.2rem;
  height: 47.19rem;                         /* Bein endet ~78px unter dem Interieur-Foto (Figma) */
  left: calc(50% - 36.25rem + 57.7rem);     /* Figma-Kappe x=983, Content-relativ */
  top: 8.0625rem;                           /* Kappe auf dem kleinen Video (Video 203px – 74px) */
}

/* M2 Tohuus: heller Bogen (565px, Bein links) am KAMPWEG-FOTO verankert –
   Figma: Union x=800…961 bei Bild x=690/w=525, Unterkante bündig mit dem
   Bild, die Kappe ragt oben darüber hinaus */
.ornament-kampweg {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: url('../img/deco-bogen-d-sand.svg') no-repeat top left / contain;
    width: 10.0625rem;
    height: 35.3125rem;
    left: 20.95%;
    bottom: 0;
  }

  @media (max-width: 60rem) {
    &::after {
      display: none;
    }
  }
}

/* M3 Seebestattung/Diamant: Bordeaux-Bogen 565px am FOTO verankert
   (Kappe beginnt 78px über der Bildkante, x=108 relativ zum 525px-Foto) */
.ornament-shore {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: url('../img/deco-bogen-d.svg') no-repeat top left / contain;
    width: 10.125rem;
    height: 35.3rem;
    left: 20.6%;
    top: -4.875rem;
  }

  @media (max-width: 60rem) {
    &::after {
      display: none;
    }
  }
}

/* M4 Abschiedsrituale: langer Sand-Bogen, Bein rechts zwischen den Spalten.
   Am FOTO „Hände mit Bildern" verankert (Figma: Bild x=451/w=393, Kappe x=690,
   beginnt 77px über der Bildkante, Bein 960px lang) */
.ornament-riten::after {
  background-image: url('../img/deco-bogen-c-sand.svg');
  width: 10.125rem;
  height: 60rem;
  left: 60.81%;
  top: -4.8125rem;
}

/* Beige Themen-Icons über den Bestattungsarten-Spalten (Figma) */
.topic-icon .rte::before {
  content: '';
  display: block;
  width: 8.875rem;
  height: 7.8125rem;
  margin-bottom: 1.5rem;
  background: var(--topic-icon) no-repeat left bottom / contain;
}

.topic-icon--sarg .rte::before {
  --topic-icon: url('../img/icon-sarg.svg');
}

.topic-icon--urne .rte::before {
  --topic-icon: url('../img/icon-urne.svg');
}

.topic-icon--grab .rte::before {
  --topic-icon: url('../img/icon-grab.svg');
}

.topic-icon--kolumbarium .rte::before {
  --topic-icon: url('../img/icon-kolumbarium.svg');
}

/* Bild-Collagen: großes Bild + versetzte kleine Bilder */
.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-block: var(--space-block);

  & figure {
    margin: 0;
  }

  & .collage__a {
    grid-column: 1 / span 7;
  }

  & .collage__b {
    grid-column: 8 / span 5;
    margin-top: 18%;
  }

  & .collage__c {
    grid-column: 3 / span 4;
    margin-top: -10%;
  }

  & .collage__d {
    grid-column: 8 / span 4;
    align-self: start;
  }
}

/* Zitat-Collage Startseite (Figma): Video-Standbild mittig oben,
   hohes Strandbild links darunter, Zitat rechts daneben */
.collage--quote {
  & .collage__d {
    grid-area: 1 / 7 / 2 / 11;
  }

  & .collage__c {
    grid-area: 2 / 2 / 3 / 6;
    margin-top: -6%;
  }

  & .collage__b {
    grid-area: 2 / 7 / 3 / 13;
    align-self: center;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Startseiten-Teaser (Figma M1): Collagen liegen ab 76rem absolut in der
   Inhaltsspalte — alle Maße aus dem Figma-JSON bei 1280px Framebreite.
   Darunter: einfache Stapel.
   -------------------------------------------------------------------------- */

/* Trauerfall-Teaser: h1 oben links, Text 360px darunter, Sonnenuntergang
   rechts neben der h1 (beginnt 84px über ihr), Seil mittig, Video-Fenster
   rechts unten, gespiegelter Bogen dazwischen */
.collage--trauerfall {
  display: grid;
  gap: 1.5rem;
  margin-block: var(--space-block);
}

@media (min-width: 76rem) {
  .section--beistand {
    padding-block: 0;

    & .mod_article__inner {
      position: relative;
      padding-top: 10.375rem;              /* h1-Oberkante: Figma y=1004, Hero endet 838 */
    }

    & h1 {
      margin-block: 0;
    }

    & .beistand__text {
      max-width: 22.5rem;
      /* Figma: 24px unter dem (zweizeiligen) Titel – der frühere 102px-Wert
         kompensierte den damals einzeilig laufenden h1 */
      margin-top: 1.5rem;

      & :is(p, ul) {
        max-width: none;
      }
    }
  }

  .collage--trauerfall {
    display: block;
    position: static;
    margin: 0;

    & .ct__sunset {
      position: absolute;
      top: 5.25rem;
      right: 0;
      width: 24.48%;

      & img {
        width: 100%;
      }
    }

    & .ct__seil {
      position: absolute;
      top: 19.5625rem;
      left: 41.12%;
      width: 20.26%;

      & img {
        width: 100%;
      }
    }

    & .ct__video {
      position: absolute;
      top: 28.625rem;
      left: 48.7%;
      width: 37.76%;
    }

    /* Gespiegelter Bordeaux-Bogen: Linie links, Kurve oben nach rechts */
    &::after {
      content: '';
      position: absolute;
      left: 61.47%;
      top: 23.625rem;
      width: 10.125rem;
      height: 27.1875rem;
      background: url('../img/deco-bogen-b.svg') no-repeat top left / contain;
      pointer-events: none;
      z-index: 1;
    }
  }
}

/* Zitat-Zeile Startseite: hohes Meeresbild links (ragt 39px ins Mühlen-Band),
   Zitat rechts, 24px nach unten versetzt (Figma) */
.section--zitat {
  position: relative;
  z-index: 1;                              /* Bild-Überhang liegt ÜBER dem Mühlen-Band */
}

.quote-row-left {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  margin-block: var(--space-block);

  @media (min-width: 48rem) {
    grid-template-columns: minmax(15rem, 20rem) minmax(0, 33.0625rem);
    justify-content: start;
    column-gap: 4rem;
  }

  @media (min-width: 76rem) {
    padding-left: 6.75rem;                 /* Bild bei x=168 (Spalte beginnt x=60) */
    column-gap: 12.625rem;                 /* Figma: 202px Abstand Bild ↔ Zitat */
  }

  & .quote {
    margin-top: 1.5rem;
  }

  & .quote blockquote p {
    max-width: none;
  }

  & .content-image img {
    width: 100%;
  }

  /* Zitat-Fenster ist ein VIDEO (Figma) – Hochformat-Crop nur per CSS möglich */
  & .content-player video {
    aspect-ratio: 320 / 569;
    object-fit: cover;
    width: 100%;
  }
}

@media (min-width: 76rem) {
  .section--zitat {
    padding-block: 0;

    & .mod_article__inner {
      padding-top: 14.125rem;              /* Bild-Oberkante y=1678 */
    }
  }

  .quote-row-left {
    margin-block: 0;

    & :is(.content-image, .content-player) {
      margin-bottom: -2.4375rem;           /* Überhang ins Mühlen-Band */
    }
  }
}

/* Vorsorge-Teaser Startseite: Text links, rechts Dreier-Collage
   (See-Abendstimmung klein, Spuren im Sand hochkant, Krokuswiese groß) + Bogen */
.collage--vorsorge {
  display: grid;
  gap: 1.5rem;
  margin-block: var(--space-block);
}

@media (min-width: 76rem) {
  .section--vorsorge {
    padding-block: 0;

    & .mod_article__inner {
      position: relative;
      padding-top: 16.1875rem;             /* Headline y=3276, Band endet 3017 */
      min-height: 55.375rem;               /* große Krokuswiese endet y=3903 */
    }

    & .vorsorge__text {
      max-width: 41rem;

      & p {
        max-width: 25.25rem;               /* Fließtext 404px (Figma) */
      }
    }
  }

  .collage--vorsorge {
    display: block;
    position: static;
    margin: 0;

    & .ct__vor-a {
      position: absolute;
      top: 7.5rem;
      left: 42.59%;
      width: 29.66%;

      & img {
        width: 100%;
      }
    }

    & .ct__vor-b {
      position: absolute;
      top: 10.25rem;
      left: 77.93%;
      width: 18.88%;

      & img {
        width: 100%;
        position: relative;
        z-index: 9;
      }
    }

    & .ct__vor-c {
      position: absolute;
      top: 26.625rem;
      left: 53.19%;
      width: 34.22%;

      & img {
        width: 100%;
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: 2.5rem;
      left: 61.47%;
      width: 10.125rem;
      height: 29rem;
      background: url('../img/deco-bogen-a.svg') no-repeat top left / contain;
      pointer-events: none;
      z-index: 1;
    }
  }
}

/* --------------------------------------------------------------------------
   Startseiten-Collagen MOBIL (< 76rem): dieselbe Desktop-Anordnung, nur
   proportional verkleinert. Die Collage wird ein eigenständiger, quadratur-
   treuer Block: Breite = 100 % (bis max. Desktop-Cluster-Breite), Höhe über
   aspect-ratio, container-type:inline-size → alle Vertikal-Positionen in cqw
   (= % der Collage-Breite). Dadurch skaliert die komplette Anordnung 1:1 mit
   der Breite, ohne die Bilder/Elemente selbst zu verändern.
   Alle %/cqw-Werte sind aus den Desktop-Messungen (Content-Spalte 1160px)
   auf die Collage-Bounding-Box umgerechnet:
     Trauerfall  BBox 683×729  Ursprung (537,1084)
     Vorsorge    BBox 629×846  Ursprung (554,3264)
   -------------------------------------------------------------------------- */
@media (max-width: 75.99rem) {
  .section--beistand .collage--trauerfall {
    display: block;
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 42.69rem;                 /* = Desktop-Cluster-Breite 683px */
    margin-inline: auto;
    aspect-ratio: 683 / 729;
    gap: 0;

    & > * { margin: 0; }

    & .ct__sunset { position: absolute; top: 0;         left: 58.42%; width: 41.58%; }
    & .ct__seil   { position: absolute; top: 33.53cqw;  left: 0;      width: 34.41%; }
    & .ct__video  { position: absolute; top: 54.76cqw;  left: 12.88%; width: 64.13%; }

    & :is(.ct__sunset, .ct__seil, .ct__video) img,
    & .ct__video video { width: 100%; height: auto; display: block; }

    &::after {
      content: '';
      position: absolute;
      top: 43.05cqw;
      left: 34.55%;
      width: 23.72%;
      height: 63.69cqw;
      background: url('../img/deco-bogen-b.svg') no-repeat top left / contain;
      pointer-events: none;
      z-index: 1;
    }
  }

  .section--vorsorge .collage--vorsorge {
    display: block;
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 39.31rem;                 /* = Desktop-Cluster-Breite 629px */
    margin-inline: auto;
    aspect-ratio: 629 / 846;
    gap: 0;

    & > * { margin: 0; }

    & .ct__vor-a { position: absolute; top: 12.72cqw;  left: 0;      width: 54.69%; }
    & .ct__vor-b { position: absolute; top: 19.71cqw;  left: 65.18%; width: 34.82%; }
    & .ct__vor-c { position: absolute; top: 61.37cqw;  left: 19.55%; width: 63.12%; }

    & :is(.ct__vor-a, .ct__vor-b, .ct__vor-c) img { width: 100%; height: auto; display: block; }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 34.82%;
      width: 25.76%;
      height: 73.77cqw;
      background: url('../img/deco-bogen-a.svg') no-repeat top left / contain;
      pointer-events: none;
      z-index: 1;
    }
  }
}

/* Rechtsbündiges Einzelbild, rechts leicht angeschnitten (Figma Kirche/Schiff/Diamant) */
.media-right {
  display: grid;
  justify-items: end;

  & figure {
    width: min(100%, 47.5rem);
  }
}

.bleed-r img {
  width: calc(100% + 6rem);
  max-width: none;
}

/* M3 Schiffs-/Diamant-Foto: 525px breit, endet an der Inhaltskante (Figma-Maske
   x=692…1217 – NICHT über den Rand angeschnitten) */
.media-shore {
  display: grid;
  justify-items: end;

  & figure {
    width: min(100%, 32.8rem);
  }
}

/* Telefonnummer im Fließtext (M1 Schritt 2): Icon + Nummer, keine Unterstreichung */
.tel-plain {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: 300;
  text-decoration: none;

  &::before {
    content: '';
    align-self: center;
    width: 0.8em;
    height: 0.8em;
    flex-shrink: 0;
    background: currentColor;
    mask: url('../img/icon-phone.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon-phone.svg') no-repeat center / contain;
  }
}

/* Überschrift auf Figma-Spaltenbreite begrenzen (z. B. „Wo wir tohuus sind!"
   bricht im Design zweizeilig in der 530px-Spalte) */
.narrow-h {
  max-width: 33rem;
}

/* „Unser Fragebogen…“-Block: 70px Abstand zum Text darüber (Figma) */
.fragebogen {
  margin-top: 4.375rem;
}

/* Download-Zeile (Figma M5): fetter Textlink mit PDF-Icon darunter,
   40px über, 162px unter dem Block bis zu den Spalten */
.download-link {
  margin-block: 2.5rem 10.125rem;

  & > a {
    display: block;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--bordeaux);
    text-decoration: none;

    &::after {
      content: '';
      display: block;
      width: 1.625rem;
      height: 2rem;
      margin-top: 0.9rem;
      background: url('../img/icon-pdf-download.svg') no-repeat center / contain;
    }

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }
}

.narrow-h-lg {
  max-width: 47rem;                        /* Figma-Box 749px (M5-Seitentitel) */
}

/* Leistungs-Karten (M2, Bordeaux): Titel sind 35px light, nicht fett-klein */
.section--bordeaux .card-list h3 {
  font-size: var(--fs-heading);
  font-weight: 300;
  margin-bottom: 0.9em;
}

/* Rechtshinweis als kleiner zuklappbarer Chip (Figma zeigt nur den Button
   „Bitte beachten“, der Text öffnet sich erst auf Klick) */
.notice-toggle {
  max-width: none;
  margin-block: var(--space-block) 0;

  & .handorgel__header {
    margin: 0;
    font-size: var(--fs-small);

    & .handorgel__header__button {
      position: relative;
      display: inline-flex;
      width: auto;
      background: transparent;
      color: var(--bordeaux);
      border: 1px solid var(--bordeaux);
      font-weight: 700;
      padding: 0.75em 1.4em 0.6em;

      &::after {
        content: '';
        position: absolute;
        inset: 4px;
        border: 1px solid var(--bordeaux);
        pointer-events: none;
      }
    }

    &.handorgel__header--open .handorgel__header__button {
      background: var(--bordeaux);
      color: var(--paper);
    }
  }

  & .handorgel__content__inner {
    /* handorgel.min.css hinterlegt den Inhalt grau – Innenabstand wie bei den FAQ */
    padding: 1em 1em 0.5em;
    max-width: var(--text-width);
    font-size: var(--fs-small);
  }
}

/* Spuren-im-Sand-Foto mit Muschel-Illustration links daneben (Figma Tohuus) */
.spuren {
  position: relative;
  display: grid;
  justify-items: end;
  margin-top: var(--space-block);

  /* Figma: Spuren-Foto 219px, endet 37px vor dem Spaltenrand */
  & figure {
    width: min(41%, 13.7rem);
    margin-right: 2.3rem;
  }

  /* Muschel-Liniengrafik 357px, endet 26px links vor dem Foto, oben ausgerichtet */
  &::before {
    content: '';
    position: absolute;
    right: 17.6rem;
    top: 1.75rem;
    width: 22.3rem;
    height: 13rem;
    background: url('../img/muscheln2.svg') no-repeat top right / contain;
    pointer-events: none;
    @media (max-width: 1023px) {
      position: relative;
      right: auto;
      top: auto;
    }
  }
}

/* Nummerierte Schritte (Hilfe im Trauerfall) – Blocklücken im 40px-Raster
   (Figma); letzte Absatz-Margins bleiben in der Grid-Zelle und werden genullt */
.steps {
  counter-reset: step;
  display: grid;
  gap: 2.5rem;
  margin-block: var(--space-block);

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

  & .step {
    counter-increment: step;

    /* Figma: Ziffer steht ÜBER dem Untertitel (gestapelt), 40px Lücke */
    & h2 {
      margin-bottom: 2.5rem;
    }

    &::before {
      content: counter(step) '.';
      display: block;
      margin-bottom: 2.5rem;
      font-size: var(--fs-display);
      font-weight: 100;
      line-height: 0.9;
      color: var(--bordeaux);
    }
  }
}

/* Akkordeon (FAQ-artige Fragen) – natives Contao-Element, handorgel-Markup */
.accordion {
  margin-block: var(--space-block);
  max-width: var(--text-width);

  & .handorgel__header {
    margin: 1.25rem 0 0;
    font-size: var(--fs-heading);
    font-weight: 300;
    line-height: 1.15;

    &:first-child {
      margin-top: 0;
    }

    & .handorgel__header__button {
      width: 100%;
      font: inherit;
      color: var(--paper);
      background: var(--bordeaux);
      border: 1px solid var(--bordeaux);
      border-radius: 5px;                    /* Figma: Frage-Balken cornerRadius 5 */
      text-align: left;
      cursor: pointer;
      padding: 0.55em 1em 0.45em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      &::after {
        content: '';
        flex-shrink: 0;
        width: 0.77em;
        height: 0.9em;
        background: currentColor;
        mask: url('../img/icon-pfeil.svg') no-repeat center / contain;
        -webkit-mask: url('../img/icon-pfeil.svg') no-repeat center / contain;
      }
    }

    &.handorgel__header--open .handorgel__header__button {
      background: var(--paper);
      color: var(--bordeaux);

      &::after {
        transform: scaleY(-1);
      }
    }
  }

  & .handorgel__content {
    background: transparent;
  }

  & .handorgel__content__inner {
    padding: 1em 1em 0.5em;
  }
}

/* FAQ-Zeile: Akkordeon-Frage links (Balken inhaltsbreit wie im Figma),
   „Zum Erklärvideo“-Button rechts daneben, vertikal mittig */
.faq-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  /* Figma: 128px Lücke zwischen den Frage-Balken (bei 1280px) */
  margin-bottom: clamp(2.75rem, 2rem + 7.5vw, 8rem);

  & .accordion {
    margin-block: 0;
    /* Balken schrumpft auf die Textbreite, bricht aber bei ~840px um (Figma) */
    width: fit-content;
    max-width: 52.5rem;
  }

  /* Frage-Balken: Pfeil mit festem Abstand hinter dem Text, nicht space-between */
  & .handorgel__header__button {
    width: 100%;
    justify-content: flex-start;
    gap: 1.25rem;

    &::after {
      margin-left: auto;
    }
  }

  & .content-hyperlink {
    margin: 0;
  }
}

/* „Was noch wichtig ist“: Sektion ist im Figma ~110px eingerückt */
.indent .mod_article__inner {
  padding-left: clamp(0rem, 8vw, 6.875rem);
}

/* Brechende-Welle-Liniengrafik über der unteren Bildmitte (Figma Erste Schritte).
   Das Motiv sitzt in der oberen linken Ecke des SVG-Rahmens, daher Box-Unterkante
   am Bildboden ausrichten – so steigt die Welle in die Bildmitte. */
.deco-wave {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 34%;
    bottom: -8.8125rem;                /* Figma: Welle ragt 141px unter das Bild */
    width: 25.9rem;   /* 415px */
    height: 22.8rem;  /* 365px */
    background: url('../img/deco-wellen.svg') no-repeat top left / contain;
    pointer-events: none;
    z-index: 1;
  }

  @media (max-width: 60rem) {
    &::after { display: none; }
  }
}

/* Zwei helle Muschel-Skizzen unten links (Figma Formalitäten, 503×331 bei x=63) */
.deco-shells {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: calc(50% - 36.25rem);   /* Artikel ist viewport-breit: an der Inhaltsspalte (1160) ausrichten */
    top: 32rem;       /* Figma: Cluster beginnt 522px unter dem Sektionsanfang */
    width: 31.4rem;   /* 503px – kombiniertes Figma-Muschelcluster */
    height: 20.7rem;  /* 331px */
    background: url('../img/deco-muscheln3.svg') no-repeat left top / contain;
    pointer-events: none;
  }

  @media (max-width: 60rem) {
    &::after { display: none; }
  }
}

/* M2 Leistungen: Unterzeile → Kartenraster 125px; M4 Trauerfeier: Intro →
   Zitat-Swiper 108px; M3: Intro → Erd-/Feuer-Spalten 273px (Figma, bei 1280) */
@media (min-width: 76rem) {
  #was-wir-fuer-sie-tun .cols-3 {
    margin-top: 7.8125rem;
  }

  #trauerfeier .quote-row {
    margin-top: 6.75rem;
  }

  /* M3: Intro-Text -> Themen-Icons der Erd-/Feuer-Spalten (Figma: 120px) */
  #erd-und-feuerbestattung .content-text + .cols-2 {
    margin-top: 7.5rem;
  }

  /* M3: Sektionsuebergaenge zu den Vollbild-Titeln (Figma 132/142) */
  #seebestattung {
    padding-top: 1.6875rem;
  }

  #naturbestattung {
    padding-top: 2.3125rem;
  }

}

/* Produktseiten: der Abstand zwischen den Kategorien kommt allein aus dem
   Karten-Margin (kein Sektions-Padding). Sichtmaß, nicht Box-Maß: die
   Figma-Beschreibungsboxen sind 162px hoch, aber nur ~3 Zeilen (78px bei
   lh=26) gefüllt – live enden die Boxen am Text, daher gehört der
   Box-Leerraum mit in den Margin (siehe .products) */
body.page--tint .section:has(.products) {
  padding-block: 0;
}

/* Produktkarten (Särge quer 2-spaltig / Urnen hoch 3-spaltig, Figma) */
.products {
  display: grid;
  gap: 2.5rem 2.5rem;
  margin-block: var(--space-block);

  /* Figma: 38px über den Karten (nach der Preis-Notiz); darunter 140px
     SICHTBARER Abstand bis zur nächsten Kategorie-h1 (Urnen: h1-Top 2112
     − sichtbares Textende 1894+3×26 = 140; Särge analog 133). Gegenprobe
     über den Zeilenrhythmus: Kartenzeilen-Top → h1-Top = Figma Ø 817px
     = live 406 Bild + 47 + 224 Text + 140. Die früheren 3.5rem maßen ab
     der Fixed-Box-Unterkante und waren sichtbar zu knapp. */
  @media (min-width: 76rem) {
    margin-block: 2.375rem 8.75rem;
  }

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

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

  @media (min-width: 76rem) {
    column-gap: 6.25rem;                   /* Figma Särge: 100px Spaltenlücke */
  }

  & .product {
    & figure {
      margin: 0 0 2.9rem;                  /* Figma: 46px Bild → Titel */
    }

    /* Kartenformat kommt aus den Bildgrößen „Produktbild Sarg/Urne" (crop) */
    & img {
      width: 100%;
      width: auto;
      max-width: 325px;
    }

    & h3 {
      font-weight: 300;
      font-size: var(--fs-heading);
      margin-bottom: 0.55em;
    }
  }
}

/* Urnen: 3 Spalten, hochformatige Produktboxen (Figma 325×400) */
.products--3 {
  @media (min-width: 60rem) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: 76rem) {
    column-gap: 5.8125rem;                 /* Figma Urnen: 93px */
  }


}

/* „Preise auf Anfrage“ steht rechtsbündig direkt unter der Kategorie-h1 (Figma);
   verlinkt auf die Kontaktseite – Optik wie die Überschrift, Unterstreichung beim Hover */
.price-note {
  text-align: right;

  @media (min-width: 76rem) {
    margin-top: -2.5rem;
  }

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

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }
}

/* Produktseiten (page--tint): Footer steht auf Weiß (Figma) */
body.page--tint footer {
  background: var(--paper);
}

/* Hinweiskasten (z. B. Rechtshinweis Testament) */
.notice {
  border: 1px solid var(--bordeaux);
  padding: 1.5rem;
  max-width: var(--text-width);
  font-size: var(--fs-small);
  margin-block: var(--space-block);

  & h3 {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* --------------------------------------------------------------------------
   Genderhinweis + Footer
   -------------------------------------------------------------------------- */
/* Genderhinweis als natives Akkordeon (standardmäßig zu, Chip wie notice-toggle) */
.gender-note {
  padding-block: var(--space-block);

  & .handorgel__header {
    margin: 0;
    font-size: var(--fs-small);

    & .handorgel__header__button {
      position: relative;
      display: inline-flex;
      width: auto;
      background: transparent;
      color: var(--bordeaux);
      border: 1px solid var(--bordeaux);
      font-weight: 700;
      padding: 0.75em 1.4em 0.6em;

      &::after {
        content: '';
        position: absolute;
        inset: 4px;
        border: 1px solid var(--bordeaux);
        pointer-events: none;
      }
    }

    &.handorgel__header--open .handorgel__header__button {
      background: var(--bordeaux);
      color: var(--paper);
    }
  }

  & .handorgel__content__inner {
    /* handorgel.min.css hinterlegt den Inhalt grau – Innenabstand wie bei den FAQ */
    padding: 1em 1em 0.5em;
    font-size: var(--fs-small);
    max-width: var(--text-width);
  }
}

.site-footer {
  padding-block: var(--space-section) var(--space-block);

  @media (min-width: 76rem) {
    padding-top: 11.625rem;                /* Figma: Logo-Oberkante 186px unter dem Inhalt */
  }

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

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

    @media (min-width: 76rem) {
      /* Figma-Spalten: Logo x=62, Kontakt x=480, Links x=1007 */
      grid-template-columns: 26.25rem 1fr auto;
      gap: 0;
    }
  }

  & .site-footer__address {
    font-style: normal;
    font-size: var(--fs-heading);
    font-weight: 300;
    color: var(--bordeaux);

    & a {
      text-decoration: none;
    }

    & p {
      display: flex;
      gap: 0.6em;
      align-items: baseline;
      max-width: none;
      margin-bottom: 0.75rem;              /* Figma: 16px Zeilenabstand im Adressblock */
    }
  }

  & .site-footer__links {
    display: grid;
    gap: 0.9375rem;                        /* Figma: 15px zwischen den Links */
    justify-items: start;

    & a {
      font-weight: 700;
      font-size: var(--fs-body); /* Figma: 22px */
      text-decoration: none;
    }

    @media (min-width: 76rem) {
      margin-right: 5rem;                  /* Linkspalte endet 80px vor dem Spaltenrand */
    }
  }

  & .site-footer__partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    margin-top: 3.4375rem;                 /* Logos-Oberkante y=4491 (Figma) */
    font-size: var(--fs-small);
    color: var(--ink);

    & img {
      max-height: 3.5rem;
      width: auto;
    }

    /* Verbandslogo Niedersachsen ist im Figma größer (72px hoch);
       die Logos sind native Bild-Elemente (div > figure > img) */
    & > :first-child img {
      height: 4.5rem;
      max-height: none;
    }

    /* Exakte Figma-Lücken (99px / 133px) nur auf Desktop-Breite */
    @media (min-width: 76rem) {
      gap: 6.1875rem;

      & > :last-child {
        margin-left: 2.125rem;
      }
    }
  }
}

/* --------------------------------------------------------------------------
   Seiten-Farbwelten (Figma): M2 komplett Bordeaux, M3 komplett Blaugrau
   -------------------------------------------------------------------------- */
body.page--dark {
  background: var(--bordeaux);
  color: var(--paper);

  & :is(h1, h2, h3, .heading, .display, .quote, .text--lg) {
    color: var(--paper);
  }

  & header :is(.site-logo, .site-phone) {
    color: var(--paper);
  }

  & header .site-logo img {
    filter: brightness(0) invert(1);
  }

  & header .nav-burger:not(.is-active) {
    color: var(--paper);
  }

  & main :is(a.btn, .content-hyperlink.btn > a) {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);

    &::after {
      border-color: var(--paper);
    }

    &:hover::after,
    &:focus-visible::after {
      box-shadow: 0 0 0 4px var(--paper);
    }
  }

  & main .rte a:not(.btn) {
    color: var(--paper);
  }

  & .muschel {
    color: var(--bordeaux);

    & :is(h2, h3) {
      color: var(--bordeaux);
    }
  }

  /* Ornamente in Sandgelb auf Bordeaux */
  & .ornament--a::after {
    background-image: url('../img/deco-bogen-a-sand.svg');
  }

  & .ornament--b::after {
    background-image: url('../img/deco-bogen-b-sand.svg');
  }

  & .ornament--c::after {
    background-image: url('../img/deco-bogen-c-sand.svg');
  }

  /* Footer bleibt hell */
  & footer {
    background: var(--paper);
    color: var(--bordeaux);

    & .site-logo {
      color: var(--bordeaux);
    }
  }
}

body.page--tint {
  background: var(--mist);

  & footer {
    background: var(--paper);
  }
}

/* --------------------------------------------------------------------------
   Kleinkram
   -------------------------------------------------------------------------- */
.full-bleed {
  width: 100%;
}

/* Vollbreite Bilder (Figma): Element bricht aus der Inhaltsspalte aus */
main .mod_article:not(.full-bleed) .mod_article__inner > .full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Vollbild-Bänder: Zuschnitt macht das BILDSYSTEM (Bildgrößen „Zwischenbild
   Hintergrund" 1920×900 bzw. „– groß" 1920×1100, crop) — so bleibt der im
   Dateimanager markierte WICHTIGE TEIL erhalten. Kein max-height/aspect-ratio
   im CSS erzwingen! */
.content-image.full-bleed img {
  width: 100%;
}

/* Figma: ~120–150px Luft nach Bildern in voller Breite */
.content-image.full-bleed {
  margin-block: 0 clamp(3.5rem, 3rem + 4.5vw, 9.4rem);
}

/* Am Artikelende liefert schon das Padding des Folge-Artikels die Luft
   (sonst ~290px statt Figma 131) */
.mod_article__inner > .content-image.full-bleed:last-child,
.mod_article__inner > .content-player.full-bleed:last-child {
  margin-bottom: 0;
}

/* Folgt ein Vollbild-Bild auf Inhalt (nicht erstes Element / nicht bündig am
   Bandkopf), braucht es oben Luft – sonst klebt es an der Textspalte (Figma ~55px) */
.content-image.full-bleed:not(:first-child) {
  margin-top: var(--space-block);
}

/* Foto/Video bündig an der Oberkante eines Bordeaux-/Mist-Bandes */
:is(.section--bordeaux, .section--mist) .mod_article__inner > :is(.content-image, .content-player).full-bleed:first-child {
  margin-top: calc(-1 * var(--space-section));
}

html {
  overflow-x: clip;
}

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

@media (max-width: 47.9375rem) {
  .site-phone {
    font-size: var(--fs-body);
  }

  .collage {
    display: block;

    & figure {
      margin-bottom: 1.5rem;
    }

    & .collage__b,
    & .collage__c {
      margin-top: 0;
    }
  }
}


.align-items_center {
  align-items: center;
}

main .mod_article:not(.full-bleed) .mod_article__inner > .full-bleed.nachObenVerschieben {
  margin-top: -37px;
}

.BitteBeachtenSie {
  display: flex;
  gap: 60px;
  .handorgel__content {
    background-color: transparent;
    border-top: 0;
    .handorgel__content__inner {
      padding-top: 0;
    }
  }
  @media (max-width: 47.9375rem) {
    flex-direction: column;
    gap: 20px;
  }
}

.AbstandUntenXS {
  margin-bottom: 1.5rem !important;
}

.volleBreite {
  p {
    max-width: none;
  }
}

.AbstandUntenM {
  margin-bottom: 5.5rem !important;
}

.SchriftgrößeS {
  font-size: 15.5px;
}

.AbstandObenXS {
  margin-top: 1rem !important;
}