/* ==========================================================================
   Kretschmer Bestattungen — Design-Schicht (XD 1106_komplett, 1920px = 1:1)
   Alle Werte quellbelegt aus xd-analyse (dump/_bauplan.txt, Token-Aggregation).
   Mechanik (Nav-Overlay, Fokus, Raster-Basis) liegt in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Basis-Typo
   -------------------------------------------------------------------------- */
body {
  font-weight: 400;
  line-height: 1.36;             /* XD: 30/22 Fließtext */
}

strong { font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Kopfzeile — XD: weiß 163px, Logo 386×93 @x89, Tel 35px Medium blau,
   Surmund-Logo 223×102 @x985, Tel2, Burger rechts
   -------------------------------------------------------------------------- */
.site-header {
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  width: min(100% - 2rem, var(--content-width));
  padding-block: clamp(0.75rem, 1.1vw, 1.3rem);
}

.header-logo {
  margin: 0;

  & figure { margin: 0; }
  & a { display: block; }
  & img { width: auto; }
}

.header-logo--kretschmer img { height: clamp(3rem, 4.84vw, 5.8rem); }   /* 93px @1920 */
.header-logo--surmund img { height: clamp(3.2rem, 5.3vw, 6.375rem); }   /* 102px @1920 */

.header-phone {
  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--fs-heading);
    font-weight: 500;
    color: var(--c-blue);
    text-decoration: none;
    white-space: nowrap;
  }

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

/* Reihenfolge/Verteilung: Logo+Tel | Logo+Tel | Burger */
.site-header {
  & .header-logo--kretschmer { margin-right: 0; order: 1; }
  & .header-phone--kretschmer { order: 2; margin-right: auto; }
  & .header-logo--surmund { order: 3; }
  & .header-phone--surmund { order: 4; margin-right: 0; }
  & :is(.navigation, .nav-wrapper, .mod_navigation) { order: 5; margin-left: auto; }
}

/* Burger: 3 Linien blau (XD „linien" 49×28) */
.nav-burger {
  color: var(--c-blue);
  --nav-burger-line-height: 0.19rem;
}

/* Mobil-Header: Surmund-Block ausblenden, Telefon als Icon */
@media (max-width: 68rem) {
  .site-header { gap: 1rem; }
  .site-header :is(.header-logo--surmund, .header-phone--surmund) { display: none; }
  .header-logo--kretschmer img { height: 3.2rem; }
}
@media (max-width: 30rem) {
  .header-phone--kretschmer a { font-size: 0; gap: 0; }
  .header-phone--kretschmer a::before { width: 1.6rem; height: 1.6rem; }
}

/* Offenes Menü: weiße Logos/Telefone (XD: sandwich-Overlay ersetzt Header-Optik).
   Umsetzung: Header bleibt, Farben drehen auf weiß; Logos wechseln per
   content-Swap auf die w-Varianten (Chrome/Safari; FF behält Standard). */
/* Das fixe Overlay (z-20) ist ein KIND der Header-Gruppe — die Geschwister
   (Logos/Telefone) brauchen daher selbst einen z-index über 20. */
body.navigation-open .site-header {
  & :is(.header-logo, .header-phone) { position: relative; z-index: 26; }
  & .header-phone a { color: #fff; }
  & .header-logo--kretschmer img { content: url('../img/logo_kretschmer_w.svg'); }
  & .header-logo--surmund img { content: url('../img/logo_geschwister_surmund_w.svg'); }
}

/* Mobil bleiben die Surmund-Teile auch im offenen Menü ausgeblendet (s. o.) */

/* --------------------------------------------------------------------------
   Hero — XD: 922px hoch inkl. Header (Bild 759px sichtbar).
   Varianten: Balken mittig unten (Unterseiten) / Textbox links (start, HM1)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

  & figure { margin: 0; }

  & img {
    width: 100%;
    height: clamp(18rem, 39.5vw, 47.4rem);   /* 759px @1920 */
    object-fit: cover;
  }
}

/* Titel-Balken (TRAUERFALL, SERVICE …): navy 80 %, 128px, mittig an Unterkante */
.hero--balken {
  & .hero__titel {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100vw - 1rem);
    padding: 0.4em 1.2em;
    background: rgb(23 33 76 / 0.8);
    color: #fff;
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: var(--fs-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
  }

  /* Einzeilig nur, wo der Titel sicher passt */
  @media (min-width: 62rem) {
    & .hero__titel { white-space: nowrap; }
  }

  /* Mobil: Balken NIMMT (nicht nur max) fast die volle Breite → lange
     Ein-Wort-Titel wie „Bestattungsvorsorge" passen ein-/zweizeilig statt
     auf die Silben-Bruchstelle zu schrumpfen */
  @media (max-width: 47.99rem) {
    & .hero__titel {
      width: calc(100vw - 0.5rem);
      max-width: none;
      padding-inline: 0.4em;
      font-size: clamp(1.35rem, 5.6vw, 2rem);
      overflow-wrap: break-word;
      hyphens: auto;
    }
  }
}

/* Textbox links (start: altrosa; ueber-kretschmer: navy) */
.hero--box {
  & .hero__box {
    position: absolute;
    left: max(1rem, calc(50vw - var(--content-width) / 2));
    bottom: clamp(1.5rem, 3.65vw, 4.375rem);   /* XD: Boxen enden 70px über Hero-Kante */
    width: min(46rem, calc(100% - 2rem));
    padding: clamp(1.5rem, 3vw, 3.5rem) clamp(1.25rem, 2.6vw, 3.125rem) clamp(1rem, 1.35vw, 1.6rem);
    color: #fff;
  }

  & .hero__box--rose { background: rgb(191 147 136 / 0.91); }   /* #bf9388@0.91 */
  & .hero__box--navy { background: rgb(23 33 76 / 0.9); }       /* #17214c@0.9 */

  & h1, & .hero__titel {
    margin: 0 0 0.55em;
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  & p {
    margin: 0 0 0.35em;
    font-size: var(--fs-heading);
    font-weight: 400;
    line-height: 1.35;
    max-width: none;
  }
}

@media (max-width: 48rem) {
  .hero--box .hero__box {
    position: static;
    transform: none;
    width: auto;
    margin: 0;
  }
  .hero--box img { height: clamp(14rem, 55vw, 20rem); }
}

/* Hero-Balken-Farbwelt: abschiedsfeier ist Aubergine statt Navy (XD) */
.page--abschiedsfeier .hero--balken .hero__titel { background: rgb(83 32 81 / 0.8); }

/* --------------------------------------------------------------------------
   Sektionen (Onepager-Bänder) — Hintergründe + Abstände
   -------------------------------------------------------------------------- */
.mod_article.sektion {
  padding-block: var(--space-section);

  & .mod_article__inner {
    width: min(100% - 2rem, var(--text-width));
    margin-inline: auto;
  }
}

/* Hero → Folgeelement: XD-Solls 68–73px (statt --space-section) */
.hero + :is(h1, h2, h3).abstand-oben { margin-top: clamp(2.2rem, 3.8vw, 4.5625rem) !important; }
.hero + .band { padding-top: clamp(2.2rem, 3.65vw, 4.375rem); }

/* Seiten mit Hero: erste Sektion beginnt bündig unter dem Header */
.mod_article.sektion--hero, .mod_article.sektion--start {
  padding-top: 0;

  & .mod_article__inner { width: 100%; max-width: none; }

  & > .mod_article__inner > *:not(.hero):not(.band-bild):not(.band):not(.video-band) {
    width: min(100% - 2rem, var(--text-width));
    margin-inline: auto;
  }
}

/* Start-Claim (XD: Montserrat Medium 35 #283583, zentriert, y=961) */
.start-claim {
  margin-block: clamp(2rem, 3.3vw, 4rem) clamp(1.5rem, 2.4vw, 2.9rem);
  text-align: center;

  /* volle Breite, zentriert (&.content-text übersteuert .content-text p) */
  &.content-text p {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    font-size: var(--fs-heading);
    font-weight: 500;
    color: var(--c-blue);
  }
}

/* Video-Band der Startseite: XD-Band #e6e8f1 beginnt 124px VOR dem Ende der
   Teaser-Karten (Karten ragen hinein), Video 1200px mittig, 148px bis Footer */
.video-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(3rem, 6.458vw, 7.75rem));
  background: var(--bg-blue-soft);
  padding-top: clamp(5rem, 10.99vw, 13.1875rem);
  padding-bottom: clamp(4rem, 7.7vw, 9.25rem);
}

.teaser-reihe { position: relative; z-index: 2; }
.sektion--start { padding-bottom: 0; }

/* Sektionen aus mehreren Farbflächen: Artikel ohne Eigen-Padding, jedes Band
   läuft 100vw und bringt sein Padding mit; Inhalt in .band__inhalt */
.mod_article.sektion--flaechen {
  padding-block: 0;

  & .mod_article__inner { width: 100%; max-width: none; }
}

.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: var(--space-section);
}

.band__inhalt {
  width: min(100% - 2rem, var(--text-width));
  margin-inline: auto;
}

.abstand-oben.abstand-oben { margin-top: var(--space-section) !important; }

.content-text.text-breit p { max-width: none; }   /* volle Breite (Größe s. u.) */

/* Leistungs-Karte (weiße Karte mit 2 Listen-Spalten) */
.angebot-galerie {
  width: 100vw;
  margin: clamp(1rem, 1.9vw, 2.3rem) 0 clamp(1rem, 1.9vw, 2.3rem) calc(50% - 50vw);

  & ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; max-width: none; }
  & li { margin: 0; }
  & figure { margin: 0; }
  & img { width: 100%; height: 100%; object-fit: cover; }

  @media (max-width: 48rem) { & ul { grid-template-columns: repeat(2, 1fr); } }
}

.leistungs-karte {
  background: #fff;
  box-shadow: 0 3px 16px rgb(0 0 0 / 0.1);
  padding: clamp(1.5rem, 3vw, 4rem) clamp(1.25rem, 2.8vw, 4rem);
}

.leistungs-spalten {
  display: grid;
  gap: 0 clamp(2rem, 5vw, 8rem);

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

.zwischentitel-liste {
  margin-bottom: clamp(1.25rem, 2vw, 2.4rem);

  & h3 {
    font-family: var(--ff-base);
    font-weight: 500;
    font-size: var(--fs-subhead);
    color: var(--c-blue);
    margin: 0 0 0.87em;   /* XD: 26px unter 30px-Titeln */
  }

  & ul { max-width: none; }
  & p { max-width: none; }
}

.angebot-abschluss p { font-weight: 400; }

/* Team-Karten-Textblock (mobil sichtbar, Desktop über figcaption-Overlay) */
.team-karte__text {
  & p { max-width: none; margin: 0; text-align: center; }
  & .team-karte__name { font-family: var(--ff-serif); font-weight: 700; font-size: var(--fs-subhead); color: var(--c-blue); margin-top: 0.6em; }
  & .team-karte__rolle { font-style: italic; font-size: var(--fs-body); }   /* XD 22 */
}

/* volle Breite (Bänder laufen 100vw, Inhalt bleibt in der Spalte) */
.bg--blue-soft   { background: var(--bg-blue-soft); }
.bg--blue-lighter{ background: var(--bg-blue-lighter); }
.bg--beige       { background: var(--bg-beige); }
.bg--beige-rose  { background: var(--bg-beige-rose); }
.bg--olive-soft  { background: var(--bg-olive-soft); }
.bg--olive-mid   { background: var(--bg-olive-mid); }
.bg--schleifen   { background: var(--bg-schleifen); }
.bg--grey        { background: var(--bg-grey); }
.bg--grey-mid    { background: var(--bg-grey-mid); }

/* --------------------------------------------------------------------------
   Titel-System — Serif-Sektionstitel (Times 50, zentriert) + Sans-Untertitel
   (Montserrat Medium 35 UPPER) + Zwischentitel (Medium 30)
   -------------------------------------------------------------------------- */
.content-headline { max-width: none; }

/* headline-CEs rendern als <hX class="… content-headline"> — Klassen direkt am Hx */
:is(h1, h2, h3).titel-serif, .titel-serif :is(h1, h2, h3) {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.2;
  text-align: center;
  color: var(--c-blue);
  margin: 0 0 0.5em;   /* etwas mehr Luft unter H2 */
}

:is(h1, h2, h3).titel-serif + .untertitel { margin-top: clamp(1rem, 1.46vw, 1.75rem); }   /* XD 26–31 (collapst mit Titel-mb) */
:is(h1, h2, h3).titel-serif + .split { margin-top: clamp(1.2rem, 1.35vw, 1.63rem); }        /* XD 26 (h3 in Splitspalte) */

/* Farbwelten je Sektion */
.titel--rose { color: var(--c-rose) !important; }
.titel--blue-var { color: var(--c-blue-var) !important; }
.titel--olive { color: var(--c-olive) !important; }
.titel--aubergine { color: var(--c-aubergine) !important; }
.titel--brown { color: var(--c-brown) !important; }
.titel--grey { color: var(--c-grey-med) !important; }
.titel--green { color: var(--c-green) !important; }

.titel--upper { text-transform: uppercase; letter-spacing: 0.04em; }
.titel--links { text-align: left !important; }

:is(h2, h3, h4).untertitel, .untertitel :is(h2, h3, h4) {
  font-family: var(--ff-base);
  font-weight: 500;
  font-size: var(--fs-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--c-blue);
  margin: 0 0 0.74em;
}

:is(h2, h3, h4).zwischentitel, .zwischentitel :is(h3, h4), p.zwischentitel {
  font-family: var(--ff-base);
  font-weight: 500;
  font-size: var(--fs-subhead);
  color: var(--c-blue);
  text-align: left;
  text-transform: none;
  margin: 0 0 0.5em;
}

/* zentrierter Intro-Absatz unterm Titel (XD: Medium 25px #575756, volle
   Textspalte). .content-text.… schlägt die generische .content-text p-Breite */
.content-text.intro-zentriert p {
  max-width: none;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 500;
}

/* Fließtext-Elemente */
.content-text p, .content-text ul { max-width: var(--prose-width); }
.content-text ul {
  padding-left: 1.1em;
  list-style: '· ';

  & li { margin-bottom: 0.35em; padding-left: 0.3em; }
}

/* rote Hervorhebung (116 117, „Bitte beachten Sie") */
.rot, .content-text .rot { color: var(--c-red); }

/* --------------------------------------------------------------------------
   Zweispalter (Text + Bild) — Standardmuster der Sektionen
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 6rem);
  align-items: start;

  /* Grid-Falle: Swiper/lange Inhalte blähen sonst die 1fr-Spur auf */
  & > * { min-width: 0; }

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

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

@media (min-width: 62rem) {
  .split--umgekehrt > *:first-child { order: 2; }
}

/* Text steht vertikal mittig neben dem Bild (XD: Bestattungsformen,
   Abschiedsräume, Möglichkeiten) */
.split--mittig { align-items: center; }

/* Interview (HM1): Akkordeon-Spalte 1155 + Hochformat-Bild 460, Gap 47 */
@media (min-width: 62rem) {
  .split.split--interview {
    grid-template-columns: 1fr clamp(16rem, 24vw, 28.75rem);
    gap: clamp(1.5rem, 2.45vw, 2.9375rem);
  }
}

.interview-bild img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Startseiten-Teaser — 4 Karten 400×600, weiß, Schatten, Serif-Titel blau
   -------------------------------------------------------------------------- */
.teaser-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.875rem);   /* XD: 46px */
  width: min(100% - 2rem, var(--content-width));
  margin-inline: auto;
}

.teaser-karte {
  background: #fff;
  box-shadow: 0 3px 16px rgb(0 0 0 / 0.12);
  display: flex;
  flex-direction: column;
  text-align: center;

  & figure { margin: 0; }
  & img { width: 100%; height: auto; }

  & .teaser-karte__inhalt {
    padding: clamp(1.25rem, 2vw, 2.2rem) clamp(1rem, 1.6vw, 1.9rem);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.9em;
  }

  & h3 {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.34rem + 0.6vw, 2.0625rem);   /* 33px @1920 */
    color: var(--c-blue);
    margin: 0;
    line-height: 1.25;
  }

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

  /* cssID-Klasse liegt am Hyperlink-Wrapper-div; der eigentliche Link ist das a darin */
  & .teaser-karte__mehr {
    margin-top: auto;

    & a {
      font-weight: 500;
      font-size: var(--fs-small);
      color: #000;
      text-decoration: none;
    }

    & a:hover, & a:focus-visible { color: var(--c-blue); }
  }
}

/* Karte komplett klickbar: Overlay-Pseudo am a (nicht am div-Wrapper, sonst
   fängt es die Klicks ab, ohne selbst ein Link zu sein) */
.teaser-karte { position: relative; }
.teaser-karte .content-image { overflow: hidden; }   /* Bild-Zoom bei Hover clippen */
.teaser-karte .teaser-karte__mehr a::after { content: ''; position: absolute; inset: 0; }

/* Hover (XD Zustand 2): Karte hebt sich 40px, Bild zoomt 600→766 (~1.28) */
@media (prefers-reduced-motion: no-preference) {
  .teaser-karte { transition: transform 0.35s ease; }
  .teaser-karte img { transition: transform 0.35s ease; }
  .teaser-karte:hover { transform: translateY(-2.5rem); }
  .teaser-karte:hover img { transform: scale(1.28); }
}

/* --------------------------------------------------------------------------
   Team-Grid — Karten 429×539 weiß + Schatten; Hover: navy-Overlay 78 % mit
   Name (Times Bold 30) + Rolle (Montserrat Italic 22) — XD-Symbol „Martin …"
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: clamp(2.25rem, 5.68vw, 6.8125rem) clamp(1.5rem, 7.76vw, 9.3125rem);   /* XD: row 109, col 149 */
  width: min(100% - 2rem, var(--text-width));
  margin-inline: auto;

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

.team-karte {
  position: relative;
  background: #fff;
  box-shadow: 0 3px 16px rgb(0 0 0 / 0.12);
  padding: clamp(0.9rem, 1.7vw, 2rem);

  & figure, & .content-image { margin: 0; }
  & img { width: 100%; height: auto; }
}

/* Hover-Overlay (XD-Symbol: navy 78 % über dem Foto, Name Serif Bold 30 weiß,
   Rolle Montserrat Italic 22 weiß). Mobil/Touch: statisch unterm Bild. */
@media (hover: hover) and (min-width: 48.01rem) {
  .team-karte .team-karte__text {
    position: absolute;
    inset: clamp(0.9rem, 1.7vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    padding: 1rem;
    background: rgb(23 33 76 / 0.78);
    opacity: 0;
    transition: opacity 0.25s ease;

    & .team-karte__name { color: #fff; margin: 0; }
    & .team-karte__rolle { color: #fff; }
  }

  .team-karte:is(:hover, :focus-within) .team-karte__text { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Akkordeons (Core handorgel) — Balken 70px, Titel Montserrat Medium 30 weiß.
   Varianten: blau/altrosa alternierend (Interview), oliv (Grabarten)
   -------------------------------------------------------------------------- */
.akkordeon {
  & .handorgel__header {
    margin: 0 0 13px;
  }

  & .handorgel__header__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-size: var(--fs-subhead);   /* XD 30 */
    padding: 0.55em 0.9em;
    background: var(--c-blue);
    border: 0;
    color: #fff;
    font-family: var(--ff-base);
    font-weight: 500;
    font-size: var(--fs-subhead);
    text-align: left;
    cursor: pointer;

    &::after {
      content: '+';
      font-size: 1.2em;
      font-weight: 400;
      line-height: 1;
      flex-shrink: 0;
    }
  }

  & .handorgel__header--open .handorgel__header__button::after,
  & .handorgel__header--opened .handorgel__header__button::after {
    content: '–';
  }

  & .handorgel__content {
    background: #fff;
  }

  & .handorgel__content__inner {
    opacity: 1 !important;   /* Core-Falle: initial data-open bleibt sonst unsichtbar */
    padding: clamp(1rem, 2vw, 2rem);

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

/* Interview: Balken alternierend blau/altrosa (XD: 1/3/5 blau, 2/4 altrosa).
   Markup: .akkordeon > h3.handorgel__header + div.handorgel__content (flach) */
.akkordeon--wechsel > .handorgel__header:nth-of-type(even) .handorgel__header__button {
  background: var(--c-rose-bar);
}

/* Grabarten: oliv, zweispaltig auf Desktop */
.akkordeon--olive .handorgel__header__button {
  background: var(--c-olive);
}

@media (min-width: 62rem) {
  .grabarten-spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2rem, 4vw, 6rem);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Galerien — Deko-Reihen (7 Thumbs, hochformat) und Grids (Särge/Urnen laut
   änderungen.md als GRID, mit Caption aus den Datei-Metadaten)
   -------------------------------------------------------------------------- */
.galerie-reihe ul,
.galerie-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.9rem);
}

.galerie-reihe ul {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}

/* Särge: 3 Spalten (Slots 520×333), Urnen: 5 (Slots 400×473) */
.galerie-grid ul { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.galerie-grid.galerie-grid--saerge ul { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.galerie-grid.galerie-grid--urnen ul { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }

/* Trauerdruck-Reihen: Hochformat (Totenbriefe 175×280) / Querformat (280×174) */
.galerie-reihe.galerie-reihe--hoch ul { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
.galerie-reihe.galerie-reihe--quer ul { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }

:is(.galerie-reihe, .galerie-grid) {
  & figure { margin: 0; }
  & img { width: 100%; height: auto; box-shadow: 0 2px 10px rgb(0 0 0 / 0.12); }

  & figcaption {
    margin-top: 0.5em;
    font-size: var(--fs-small);
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Partner-Karten (Kooperationen) — weiße Kacheln, Links blau
   -------------------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15.6rem, 100%), 1fr));   /* XD 300px, 5 Spalten */
  gap: clamp(1.25rem, 3.39vw, 4.0625rem);   /* XD 65px */
  /* XD-Raster x=88..1830 (1742): breiter als die 1576er-Textspalte —
     aus der Spalte ausbrechen */
  width: min(100vw - 2rem, var(--content-width));
  margin-inline: calc((100% - min(100vw - 2rem, var(--content-width))) / 2);
}

.partner-karte {
  background: #fff;
  box-shadow: 0 3px 14px rgb(0 0 0 / 0.1);
  padding: clamp(1.25rem, 2vw, 2rem) 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* XD: Inhalt vertikal mittig (alle Kachel-Typen) */
  gap: 0.4em;
  aspect-ratio: 1;               /* XD: Kacheln 300×300 quadratisch */
  min-height: 0;

  & p { margin: 0; max-width: none; font-size: clamp(0.85rem, 0.885vw, 1.0625rem); line-height: 1.4; color: #000; position: relative; }   /* XD 17px */

  & a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 0.15em; word-break: break-word; }

  & figure { margin: 0 auto; padding-top: 0.5em; position: relative; }
  & img { max-height: 4.5rem; max-width: 100%; width: auto; margin-inline: auto; }

  @media (max-width: 47.99rem) { aspect-ratio: auto; min-height: 14rem; }
}

/* Hintergrund-Icons (XD-Vektoren #eaecf3, fast kachelfüllend hinter dem Text) */
.partner-karte--blatt      { background: #fff url('../img/deko/koop-blatt.svg') no-repeat center 58% / auto 88%; }
.partner-karte--steuerrad  { background: #fff url('../img/deko/koop-steuerrad.svg') no-repeat center 62% / auto 78%; }
.partner-karte--hand       { background: #fff url('../img/deko/koop-hand.svg') no-repeat center 68% / 85% auto; }
.partner-karte--urne       { background: #fff url('../img/deko/koop-urne.svg') no-repeat center 62% / auto 82%; }
.partner-karte--schmuck    { background: #fff url('../img/deko/koop-schmuck.svg') no-repeat center 62% / auto 82%; }
.partner-karte--grabstein  { background: #fff url('../img/deko/koop-grabstein.svg') no-repeat center 62% / auto 84%; }
.partner-karte--blume      { background: #fff url('../img/deko/koop-blume.svg') no-repeat center 62% / auto 82%; }

/* --------------------------------------------------------------------------
   Schleifentexte — Band #c3c1ac, Foto links, Liste kursiv Serif schwarz
   (änderungen.md: KEINE weiße Box — direkt auf dem Band)
   -------------------------------------------------------------------------- */
.schleifen-titel {
  margin-bottom: clamp(1.25rem, 2.7vw, 3.25rem) !important;   /* XD: Titel 83px über der Bandkante */
}

.schleifen {
  display: grid;
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: center;

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

  & figure { margin: 0; }

  /* Scroll-Box mit erkennbarer Affordance: (a) permanent sichtbare Scrollbar
     über ::-webkit-scrollbar (scrollbar-width/color NICHT parallel setzen —
     das deaktiviert die webkit-Styles in Chrome); (b) Scroll-Schatten
     oben/unten per background-attachment (nur bei scrollbarem Inhalt). */
  & .content-text {
    max-height: clamp(20rem, 26vw, 31.25rem);
    overflow-y: scroll;
    padding-right: 1.25rem;
    background:
      linear-gradient(var(--bg-schleifen) 30%, rgb(195 193 172 / 0)) center top,
      linear-gradient(rgb(195 193 172 / 0), var(--bg-schleifen) 70%) center bottom,
      radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.22), transparent) center top,
      radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.22), transparent) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.9rem, 100% 0.9rem;
    background-attachment: local, local, scroll, scroll;
  }

  & .content-text::-webkit-scrollbar { width: 0.75rem; }
  & .content-text::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.5); border-radius: 0.375rem; }
  & .content-text::-webkit-scrollbar-thumb { background: var(--c-green); border-radius: 0.375rem; border: 2px solid rgb(255 255 255 / 0.55); }

  @supports not selector(::-webkit-scrollbar) {
    & .content-text { scrollbar-width: thin; scrollbar-color: var(--c-green) rgb(255 255 255 / 0.5); }
  }

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    columns: 1;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: var(--fs-subhead);
    line-height: 1.6;
    color: #000;

    & li::before { content: '–  '; }
  }

}

/* Trauersprüche im Akkordeon: mehrspaltig (nebeneinander, übersichtlicher — Live) */
.trauerspruch-akkordeon .content-text ul { columns: 1; column-gap: 2.5rem; max-width: none; }
.trauerspruch-akkordeon .content-text li { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 0.55em; }
@media (min-width: 48rem) { .trauerspruch-akkordeon .content-text ul { columns: 2; } }
@media (min-width: 75rem) { .trauerspruch-akkordeon .content-text ul { columns: 3; } }

/* --------------------------------------------------------------------------
   Bücher-/Verfügungs-Karten (Service) — weiße Karten mit blauem Kopf
   -------------------------------------------------------------------------- */
.karten-reihe {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  width: min(100% - 2rem, var(--text-width));
  margin-inline: auto;
}

.buch-karte, .verfuegung-karte {
  background: #fff;
  box-shadow: 0 3px 14px rgb(0 0 0 / 0.1);
  padding: clamp(1.25rem, 2vw, 2rem);

  & p { max-width: none; margin: 0 0 0.5em; }
  & .zwischentitel { margin-bottom: 0.2em; }
  & em { font-style: italic; }
  & figure { margin: 0 0 0.75em; }
}

/* --------------------------------------------------------------------------
   Vollbild-Band mit Info-Karte (Friedhöfe, Trauerbegleitung)
   -------------------------------------------------------------------------- */
.band-bild {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

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

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

/* Titel + Karte sitzen in einem gemeinsamen absoluten PANEL — die Karte
   rückt im Fluss unter den Titel, ein mehrzeiliger Titel kann daher NIE in
   die Karte ragen (Font-Metrik der Live-Schrift ≠ XD). */
.band-bild__panel {
  position: absolute;
  top: clamp(1.5rem, 4vw, 4.5rem);
  right: max(1rem, calc(50vw - var(--text-width) / 2));
  width: min(29rem, calc(100% - 2rem));
}

.band-bild__karte {
  background: #fff;
  padding: clamp(1.25rem, 2vw, 2.4rem);
  box-shadow: 0 3px 16px rgb(0 0 0 / 0.15);

  & p { max-width: none; }
}

.band-bild__titel {
  /* XD: weißer UPPER-Titel über der Info-Karte (rechte Spalte) */
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.4rem);
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.86vw, 2.0625rem);   /* 33px */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 62rem) {
  .band-bild__panel { position: static; width: auto; }
  .band-bild__karte { margin: 0; box-shadow: none; }
  .band-bild__titel { display: block; background: var(--c-navy); padding: 0.5em 1rem; margin: 0; }
  .band-bild > figure img, .band-bild .content-image img { min-height: 14rem; }
}

/* --------------------------------------------------------------------------
   Fußzeile — XD: weiß 665px, gestrichelte Linie oben, K-Wasserzeichen,
   4 Spalten, Texte 22 #575756, Innungslogo, Genderhinweis
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  border-top: 1px dashed #b5b5b5;
  /* K-Wasserzeichen: XD Pfad-Fill #f8f8f8, mittig-links (x≈487..1290 bei 1920) */
  background: #fff url('../img/k-wasserzeichen.svg') no-repeat left 32% top 60% / auto 88%;
  padding-block: clamp(2.5rem, 3.85vw, 4.625rem) clamp(2.5rem, 4.7vw, 5.625rem);   /* XD: 74 / ~90 */

  /* 4-Spalten-Raster direkt auf der Theme-Gruppe (Kinder = .footer-col) */
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem) 0;
  /* XD-Spaltenkanten: 172 / 562 / 1106 / rechtsbündig an 1750 (Breite 1578) */
  grid-template-columns: 24.7% 34.5% minmax(0, 1fr) auto;
  width: 100%;
  padding-inline: max(1rem, calc(50vw - 49.3125rem));

  @media (max-width: 67.99rem) {
    grid-template-columns: 1fr;
    justify-content: start;
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  & .footer-col { min-width: 0; }

  & figure { margin: 0; }

  & .footer-logo { margin-bottom: clamp(0.9rem, 1.09vw, 1.3125rem); }   /* XD 21px */
  & .footer-logo img { width: clamp(10rem, 16vw, 19.375rem); height: auto; }
  & .footer-logo--surmund { margin-bottom: clamp(1rem, 1.3vw, 1.5625rem); }   /* XD 25px */
  & .footer-logo--surmund img { width: clamp(7rem, 8vw, 9.7rem); }

  /* Spalten OHNE Logo (Zweigstellen) starten auf der Adress-Höhe der
     Logo-Spalten: Logo-Slot-Höhe (Breite × 75/310) + Logo-Abstand */
  @media (min-width: 68rem) {
    & .footer-col > .footer-address:first-child {
      margin-top: calc(clamp(10rem, 16vw, 19.375rem) * 0.2367 + clamp(0.9rem, 1.09vw, 1.3125rem));
    }
  }

  & .footer-address p {
    max-width: none;
    font-size: var(--fs-body);
    color: var(--color-primary);
    margin-bottom: 1.1em;
  }

  & .footer-address a { color: inherit; text-decoration: none; }
  & .footer-address a[href^="mailto"], & .footer-address a.email { text-decoration: underline; text-underline-offset: 0.15em; }

  & .footer-domain { margin-top: clamp(3rem, 5.54vw, 6.65rem); }   /* XD: Domain bei +491 */
  & .footer-domain a {
    font-weight: 500;
    color: var(--c-blue);
    text-decoration: none;
    font-size: var(--fs-body);
  }

  /* Spalte 4: Social + Links rechtsbündig */
  & .footer-col--links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(0.5rem, 0.78vw, 0.9375rem);   /* XD: 48er-Rhythmus bei 33px Zeilen */
    text-align: right;

    @media (max-width: 67.99rem) { align-items: flex-start; text-align: left; }
  }

  & .footer-social {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  & .social-link a {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0;
    background: #575756;
  }

  & .social-link--facebook a {
    mask: url('../img/icon-facebook.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon-facebook.svg') no-repeat center / contain;
  }

  & .social-link--instagram a {
    mask: url('../img/icon-instagram.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon-instagram.svg') no-repeat center / contain;
  }

  & .footer-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--fs-body);

    &:hover, &:focus-visible { color: var(--c-blue); }
  }

  & .footer-logo--innung { margin-block: clamp(2rem, 3.9vw, 4.6875rem) 0; }   /* XD: Innung 75px unter Datenschutz */
  & .footer-logo--innung img { width: clamp(12rem, 15.6vw, 18.75rem); }

  & .footer-link--gender { margin-top: clamp(0.75rem, 1.61vw, 1.9375rem); }   /* XD: Gender bei +551 */
  & .footer-link--gender a {
    font-weight: 500;
    font-size: var(--fs-small);
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}

/* --------------------------------------------------------------------------
   Formular (Kontakt) — Rubriken SemiBold 22 blau UPPER, Felder weiß,
   senden-Button navy
   -------------------------------------------------------------------------- */
/* Contaos „Pflichtfeld"-Präfix in Labels ist für Screenreader — visuell verstecken */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kontakt-formular {
  max-width: 62rem;
  margin-inline: auto;
  padding-block: var(--space-section);
}

.ce_form, .content-form {
  /* Anrede: Optionen nebeneinander (XD) */
  & .widget-radio {
    & fieldset, & .radio_container { border: 0; padding: 0; margin: 0; }
    & legend { float: left; margin-right: 1.5rem; }
    & span { display: inline-block; margin-right: 1.2rem; }
    & label { display: inline; color: var(--color-primary); margin-left: 0.3em; }
    & input { accent-color: var(--c-blue); }
  }

  & .widget-explanation { margin-top: -0.8rem; }

  & .widget-submit { text-align: right; }

  & fieldset { border: 0; margin: 0 0 2rem; padding: 0; }

  & legend {
    font-weight: 600;
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-blue);
    margin-bottom: 1rem;
  }

  & label {
    display: block;
    font-size: var(--fs-small);
    color: var(--c-blue);
    margin-bottom: 0.35em;
  }

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

  & :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    width: 100%;
    padding: 0.6em 0.75em;
    border: 1px solid #c9c9c9;
    background: #fff;
    font: inherit;
    color: #000;
  }

  & textarea { min-height: 11rem; }

  & .widget-explanation { font-style: italic; font-size: var(--fs-small); }

  & button[type="submit"], & .submit {
    background: var(--c-blue);
    color: #fff;
    border: 0;
    font: inherit;
    font-size: var(--fs-small);
    padding: 0.5em 1.6em;
    cursor: pointer;

    &:hover, &:focus-visible { background: var(--c-navy); }
  }
}

/* --------------------------------------------------------------------------
   to-top — navy Kasten mit Doppelpfeil (Live-Asset footer_up.svg)
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  border-radius: 0;
  right: clamp(0.5rem, 0.78vw, 0.9375rem);   /* XD x=1833..1905 → 15px vom Rand */
  bottom: 0.25rem;                           /* XD y=1005..1077 im 1080er-Screen */
  z-index: 15;
  width: clamp(3rem, 3.75vw, 4.5rem);        /* 72×72 */
  aspect-ratio: 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-blue);
  color: #fff;

  &::before {
    content: '';
    /* Vorlagen-Platzhalter (border-Winkel, absolute) vollständig neutralisieren */
    position: static;
    inset: auto;
    margin: 0;
    border: 0;
    transform: none;
    height: auto;
    width: 58%;                              /* Chevrons 46/72 */
    aspect-ratio: 46 / 36;
    background: currentColor;
    mask: url('../img/deko/chevron-doppel.svg') no-repeat center / contain;
    -webkit-mask: url('../img/deko/chevron-doppel.svg') no-repeat center / contain;
  }

  &:hover, &:focus-visible { background: var(--c-navy); }
}

/* --------------------------------------------------------------------------
   Video (Imagefilm) — zentriert, Poster; kein Autoplay
   -------------------------------------------------------------------------- */
.video-einbettung {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;

  & video { width: 100%; height: auto; display: block; }
  & figure { margin: 0; position: relative; }
}


/* --------------------------------------------------------------------------
   Deezer/Maps/Columba: Zwei-Klick-Consent (DSGVO) — Platzhalter-Karte
   -------------------------------------------------------------------------- */
.consent-embed {
  background: #fff;
  border: 1px solid #d5d5d5;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;

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

  & button {
    background: var(--c-blue);
    color: #fff;
    border: 0;
    font: inherit;
    padding: 0.55em 1.4em;
    cursor: pointer;
  }

  & iframe { width: 100%; border: 0; }
}

/* Virtueller Rundgang: XD-Fenster 1223×577 mittig (nicht volle Textbreite) */
.consent-embed--rundgang {
  max-width: 76.4375rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Utilities für die Sektions-Defs
   -------------------------------------------------------------------------- */
.abstand-oben-klein.abstand-oben-klein { margin-top: clamp(1.5rem, 2.6vw, 3.2rem) !important; }

.band--kompakt { padding-block: clamp(2rem, 3vw, 4rem); }

.band--unten-buendig { padding-bottom: 0; }

.upper, h3.upper { text-transform: uppercase; letter-spacing: 0.03em; }

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

.liste-2spaltig {
  @media (min-width: 48rem) { columns: 2; column-gap: 3rem; }
}

.split--listen { align-items: start; }

.zwischentitel-liste--olive h3 { color: var(--c-olive); }
.zwischentitel-liste--brown h3 { color: var(--c-brown); }
.zwischentitel--brown { color: var(--c-brown) !important; }
:is(h2, h3, h4).untertitel--nichtupper { text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 0.5em !important; font-size: var(--fs-subhead); }   /* XD 30 */
.text-mittig { text-align: center; }
.text-blau { color: var(--c-blue); }

.fussnote p {
  font-style: italic;
  font-size: var(--fs-small);
  max-width: 46rem;
}

.akkordeon--halb.abstand-oben-klein { margin-top: 0 !important; }

.akkordeon--halb {
  @media (min-width: 62rem) { max-width: calc(50% - clamp(1rem, 2vw, 3rem)); }
}

.bild-mittig {
  & figure { margin-inline: auto; }
  & img { margin-inline: auto; }
}

.rechtstext {
  & h3 {
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--c-blue);
    margin: 1.6em 0 0.4em;
  }

  & p, & ul { max-width: 75rem; overflow-wrap: anywhere; }
}

/* lange Komposita (Bestattungsvorsorge …) mobil trennen statt überlaufen */
:is(h1, h2, h3, .titel-serif, .untertitel, .zwischentitel) {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Musiklisten-Titel blau uppercase */
.musikliste h3 { color: var(--c-blue); }
.musikliste--mittig { margin-top: clamp(1rem, 2vw, 2rem); }

/* Literatur-Kopf: Breitbild mit Titel darüber */
.literatur-kopf {
  position: relative;

  & figure { margin: 0; }

  & .literatur-kopf__titel {
    position: absolute;
    top: clamp(0.75rem, 2vw, 2rem);
    left: 0;
    right: 0;
    text-align: center;
    color: var(--c-blue);
    font-family: var(--ff-base);
    font-weight: 600;
    font-size: var(--fs-heading);
    margin: 0;
  }
}

.verfuegung-karte {
  & figure { margin: 0 0 1rem; }
}

/* --------------------------------------------------------------------------
   Diverses
   -------------------------------------------------------------------------- */
/* PDF-Link mit Icon */
.pdf-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--c-blue);
  font-weight: 500;
}

/* Blumenlexikon (Doc-only): zweispaltige Begriffsliste */
.blumenlexikon ul {
  max-width: none;
  list-style: none;
  padding: 0;

  & li { margin-bottom: 0.45em; }
  & strong { color: var(--c-blue); font-weight: 600; }
}

/* zentrierter Zwischentitel (Bestattungskosten-Abschluss) */
.zwischentitel-mittig {
  font-family: var(--ff-base);
  font-weight: 500;
  font-size: var(--fs-subhead);
  color: var(--c-blue);
  text-align: center;
  margin: 0 0 0.5em;
}

/* zentrierte Voll-Absätze (XD: 25px) */
.text-zentriert {
  text-align: center;

  & p, & ul { margin-inline: auto; }
}
.content-text.text-zentriert p { font-size: var(--fs-lead); }              /* XD 25 */
.content-text.text-zentriert.text-breit p { font-size: var(--fs-body); }   /* XD 22 (breite Fließ-Intros) */
.content-text.zwischentitel-liste p { font-size: var(--fs-lead); }              /* XD 25: vollbreite Sektion-Intros */
.sektion--bestattungskosten > .mod_article__inner > .titel-serif,
.sektion--bestattungskosten .band__inhalt > .titel-serif { margin-bottom: clamp(2rem, 2.65vw, 3.1875rem); }   /* XD 51px unter dem Titel */
.split .content-text.zwischentitel-liste p { font-size: var(--fs-body); }      /* in Split-Spalten 22 */

/* Impressum/Datenschutz/Genderhinweis: ruhige Textseiten */
:is(.page--impressum, .page--datenschutz, .page--genderhinweis) .rechtstext p {
  max-width: 75rem;
}

/* --------------------------------------------------------------------------
   Seiten-Pins aus dem Design-Vertrag-Gate (XD-Solls @1920)
   -------------------------------------------------------------------------- */
/* Fußabstände (Inhaltsende → Footer) je Seite */
.page--start .sektion--start { padding-bottom: 0; }   /* Band läuft bis zur Fußzeile (XD); die 148px stecken im video-band */
.page--ueber-kretschmer .sektion--kooperationen .band { padding-bottom: clamp(5rem, 10.3vw, 12.4rem); }  /* Soll 264 */
.page--bestattungsvorsorge .sektion--flaechen:last-of-type .band:last-child { padding-bottom: clamp(2.5rem, 3.5vw, 4.2rem); } /* Soll 77 */
.page--service .band.bg--blue-lighter.band--unten-buendig { padding-bottom: clamp(1.5rem, 2.2vw, 2.6rem); } /* Soll 112 (Kartenrest) */
.page--kontakt .sektion--hero { padding-bottom: 0; }
.page--reels .sektion--hero { padding-bottom: 0; }      /* Band bis Fußzeile (XD) */
.page--impressum .sektion--hero { padding-bottom: 0; }  /* Band bis Fußzeile (XD) */
.page--kontakt .kontakt-formular { padding-block: var(--space-section) clamp(1.25rem, 1.5vw, 1.8rem); }      /* Soll 57 */
.page--datenschutz .sektion--hero { padding-bottom: 0; }                                                     /* Soll 57 (Band-Rest) */
.page--datenschutz .band--kompakt { padding-bottom: clamp(2rem, 2.24vw, 2.7rem); }

/* Trauerfall: Trauerdruck-Band → Bestattungskosten (Soll 386) */
.sektion--trauerdruck .band.bg--beige { padding-bottom: clamp(8rem, 20.1vw, 24.125rem); }
/* Trauerfall: Grabarten-Fußnote → Ausstellung (Soll 424) */
.mod_article.sektion--ausstellung-sortiment { padding-top: clamp(6rem, 16.93vw, 20.3rem); }   /* Soll 424 */
/* Trauerfall: Reihe-1-Text → Listenreihe (Soll 112) */
.page--trauerfall .sektion--hero .split p:last-of-type { margin-bottom: 0; }
.page--trauerfall .split--listen.abstand-oben-klein { margin-top: clamp(1rem, 1.5vw, 1.8rem) !important; }

/* Abschiedsfeier: Trauerrede → Persönliche Abschiednahme (Soll 150) */
.mod_article.sektion--trauerrede .band { padding-bottom: clamp(2.5rem, 3.9vw, 4.6875rem); }
.mod_article.sektion--persoenliche-abschiednahme .band { padding-top: clamp(2.5rem, 3.9vw, 4.6875rem); }

/* Bestattungsvorsorge: Checkliste → Finanzierung (Soll 184) */
.mod_article.sektion--vorteile .band { padding-bottom: clamp(2.5rem, 2.86vw, 3.44rem); }
.mod_article.sektion--finanzierung .band { padding-top: clamp(2.5rem, 2.86vw, 3.44rem); }


/* --------------------------------------------------------------------------
   Sektionsspezifische Feinabstände (XD-belegt)
   -------------------------------------------------------------------------- */
/* „aushändigen": Liste linksbündig, Block zentriert (XD x=464/493) */
.aushaendigen {
  width: fit-content;
  margin-inline: auto !important;
  text-align: left;

  & h3 { text-align: left; }
  & ul { max-width: 60rem; }
}

/* Bilder mit Schatten (XD: Trauerhilfe, Persönliche Abschiednahme) */
.bild-schatten img { box-shadow: 0 3px 16px rgb(0 0 0 / 0.18); }

/* Bestattungsformen: Luft zwischen den alternierenden Bild/Text-Zeilen —
   ist der TEXT die höhere Spalte, klebte sein Titel sonst am Bild darüber */
.sektion--bestattungsformen .split + .split { margin-top: clamp(2rem, 3.4vw, 4.0625rem); }

/* Bestattungskosten: Titel 68px unter der Bandkante (XD) */
.sektion--bestattungskosten .band { padding-top: clamp(2.5rem, 3.54vw, 4.25rem); }
/* Friedhöfe: Titel 61px unter der Bandkante (XD) */
.sektion--friedhoefe .band { padding-top: clamp(2.5rem, 3.18vw, 3.8125rem); }

/* Vollbild-Karten-Varianten (XD): Friedhöfe-Karte 728px, Titel/Karte oben
   statt vertikal zentriert; Service-Trauerbegleitung 886px */
.band-bild--friedhoefe .band-bild__panel {
  top: 8.75%;
  width: min(45.5rem, calc(100% - 2rem));   /* XD 728 */
}

.band-bild--breit .band-bild__panel {
  top: 9.4%;
  width: min(55.375rem, calc(100% - 2rem)); /* XD 886 */
}

.band-bild--friedhoefe .band-bild__panel,
.band-bild--breit .band-bild__panel {
  right: max(1rem, calc(50vw - var(--text-width) / 2 + 4.25rem));   /* Kante x≈1682 */
}

/* Großes K über „Ausstellung & Sortiment" (XD: 938×897 rechts, weiß auf dem
   Grabarten-Band, blaugrau unterhalb der Bandkante — Farbwechsel exakt an
   der Kante über mask + hartem Gradient-Stopp; 634/897 der Höhe liegen
   oberhalb) */
.mod_article.sektion--ausstellung-sortiment {
  position: relative;

  & > .mod_article__inner { position: relative; z-index: 1; }
}

/* Grabarten-INHALTE über dem K-Überhang — das Band-BG bleibt darunter,
   damit das K sichtbar in die Grabarten-Sektion hineinragt (XD) */
.sektion--grabarten .band__inhalt { position: relative; z-index: 2; }

@media (min-width: 62rem) {
  .mod_article.sektion--ausstellung-sortiment::before {
    content: '';
    position: absolute;
    right: 0.6vw;
    top: calc(-1 * 33.02vw);
    width: 48.85vw;
    aspect-ratio: 938 / 897;
    background: linear-gradient(to bottom, #fff 33.02vw, var(--bg-blue-soft) 33.02vw);
    mask: url('../img/deko/k-gross.svg') no-repeat center / contain;
    -webkit-mask: url('../img/deko/k-gross.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
  }
}

/* Bild-Slider (Feierhalle/Abschiedsräume) + Galerie-Slider (Trauerdeko):
   quadratische Bullets, aktiv gefüllt in der Sektionsfarbe (XD) */
.bild-slider, .galerie-slider {
  --slider-bullet: var(--c-aubergine);
  position: relative;
  min-width: 0;
  max-width: 100%;

  & .swiper-button-prev, & .swiper-button-next { color: var(--slider-bullet); }
  & .swiper-button-prev::after, & .swiper-button-next::after { font-size: 1.5rem; }

  & .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
  }

  & .swiper-pagination-bullet {
    width: 0.6875rem;                /* XD ~11px Quadrate */
    height: 0.6875rem;
    border-radius: 0;
    background: #fff;
    border: 1px solid var(--slider-bullet);
    opacity: 1;
  }

  & .swiper-pagination-bullet-active { background: var(--slider-bullet); }

  & figure { margin: 0; }
  & img { width: 100%; height: auto; }
}

.galerie-slider { --slider-bullet: var(--c-blue); }

@media (min-width: 62rem) {
  .galerie-slider .galerie-reihe ul,
  .galerie-reihe--voll ul { grid-template-columns: repeat(7, 1fr); }   /* 7 Thumbs füllen die Reihe (XD) */
}
/* Mobil: Slider-Gruppen auf 4 Einträge pro Zeile begrenzen (sonst zu klein) */
@media (max-width: 47.99rem) {
  .galerie-slider .galerie-reihe ul { grid-template-columns: repeat(4, 1fr); }
}

/* Trauerliteratur/Trostbücher: Kacheln intrinsisch breit (XD: ungleiche
   Breiten), volle Reihen verteilt, letzte Reihe links gepackt */
.karten-reihe--frei {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(0.85rem, 1.1vw, 1.375rem);   /* XD ~22px; knapp, damit 3 ungleiche Kacheln in eine Reihe passen */
  width: min(100% - 2rem, var(--text-width));   /* XD-Buch-Raster 1578; %-Breiten darauf gerechnet */
  margin-inline: auto;

  &::after { content: ''; flex: auto; }

  & .buch-karte {
    flex-grow: 0;
    max-width: 100%;
  }
}

/* XD-Kachelbreiten (Raster 1578): Trauerliteratur 705/705 | 581/492/453,
   Trostbücher 468/533/528 | 515/847 — ergibt exakt die Vorlagen-Reihen */
@media (min-width: 62rem) {
  .sektion--trauerhilfe .karten-reihe--frei .buch-karte:nth-child(1) { width: 44.68%; }
  .sektion--trauerhilfe .karten-reihe--frei .buch-karte:nth-child(2) { width: 44.68%; }
  .sektion--trauerhilfe .karten-reihe--frei .buch-karte:nth-child(3) { width: 36.82%; }
  .sektion--trauerhilfe .karten-reihe--frei .buch-karte:nth-child(4) { width: 31.18%; }
  .sektion--trauerhilfe .karten-reihe--frei .buch-karte:nth-child(5) { width: 28.71%; }
  .sektion--trost-fuer-kinder .karten-reihe--frei .buch-karte:nth-child(1) { width: 29.66%; }
  .sektion--trost-fuer-kinder .karten-reihe--frei .buch-karte:nth-child(2) { width: 33.78%; }
  .sektion--trost-fuer-kinder .karten-reihe--frei .buch-karte:nth-child(3) { width: 33.46%; }
  .sektion--trost-fuer-kinder .karten-reihe--frei .buch-karte:nth-child(4) { width: 32.64%; }
  .sektion--trost-fuer-kinder .karten-reihe--frei .buch-karte:nth-child(5) { width: 53.68%; }
}

/* Dokumente zur Entlastung: 2 unabhängige Spalten (XD-Masonry), Bild oben
   rechts in der Karte, Text umfließt */
.verfuegungs-masonry {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2.5rem);
  width: min(100% - 2rem, var(--text-width));
  margin-inline: auto;

  @media (min-width: 62rem) { grid-template-columns: 1fr 1fr; align-items: start; }

  & .verfuegungs-spalte { display: grid; gap: clamp(1.25rem, 2vw, 2.5rem); align-content: start; }
}

.verfuegung-karte {
  & .content-image { float: right; width: 48%; margin: 0 0 0.75rem 1rem; }
  & .content-image figure { margin: 0; }
  &::after { content: ''; display: block; clear: both; }
}

/* PDF-Checkliste: XD-Icon (116×139) rechts neben der Zeile, kein Linktext */
.pdf-zeile p {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.4rem);
  max-width: none;
}

.pdf-zeile__icon {
  display: inline-block;
  width: clamp(3.5rem, 6vw, 7.25rem);
  aspect-ratio: 116 / 139;
  background: url('../img/deko/icon-pdf.svg') no-repeat center / contain;
  flex-shrink: 0;

  &:hover, &:focus-visible { opacity: 0.8; }
}

/* Die Möglichkeiten: Treuhand-Logo rechts neben dem Text (XD) */
.moeglichkeiten-text {
  display: grid;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);

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

  & .logo-treuhand { margin: 0; }
  & .logo-treuhand img { width: clamp(4.5rem, 7.9vw, 9.4375rem); height: auto; }
}

/* BVV-Partner-Zeile: Logo-Kachel links, Text rechts (XD) */
.bvv-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);

  & .logo-bvv {
    margin: 0;
    background: #fff;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.1);
    padding: clamp(1rem, 1.5vw, 1.8rem);
  }

  & .logo-bvv img { width: clamp(11rem, 18.5vw, 22.2rem); height: auto; display: block; }

  & .content-text p { max-width: 40rem; margin-bottom: 0.4em; }
}

/* Musikvorschläge Rock & Pop: Titel mittig, Spalten EXAKT im Raster der
   Listen darüber (Grid statt columns — gleiche 1fr/1fr-Kanten wie .split) */
.musikliste--mittig {
  

  & ul.liste-2spaltig {
    max-width: none;

    @media (min-width: 48rem) {
      columns: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: column;
      grid-template-rows: repeat(6, auto);
      column-gap: clamp(1.5rem, 4vw, 6rem);
    }
  }
}

/* Reels: Facebook + Instagram nebeneinander (XD: 2 Kacheln je 750),
   Boxen 900 hoch */
.reel-band .consent-embed { max-width: 46.875rem; margin-inline: auto; width: 100%; }
.reel-split { align-items: start; }

/* Social-Icon oben in jeder Consent-Box (dekorativ, Markenfarbe; lokal gehostet) */
.reel-icon {
  display: block;
  width: clamp(2.5rem, 3.2vw, 3.75rem);
  height: clamp(2.5rem, 3.2vw, 3.75rem);
  margin: 0 auto 0.9rem;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.reel-icon--fb { background: #1877f2; -webkit-mask-image: url('../img/icon-facebook.svg'); mask-image: url('../img/icon-facebook.svg'); }
.reel-icon--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); -webkit-mask-image: url('../img/icon-instagram.svg'); mask-image: url('../img/icon-instagram.svg'); }

/* Direkter Plattform-Link ganz unten in der Box — bleibt vor UND nach dem
   Laden der Beiträge (das Consent-JS ersetzt nur .consent-embed__platzhalter) */
.reel-band .consent-embed { display: flex; flex-direction: column; }
.reel-band .consent-embed iframe { order: -1; }
.reel-plattform-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.reel-plattform-link .reel-icon { width: 1.5em; height: 1.5em; margin: 0; flex-shrink: 0; }
.reel-plattform-link:hover, .reel-plattform-link:focus-visible { text-decoration: underline; }
:is(.consent-embed--facebook, .consent-embed--instagram) iframe { min-height: 56.25rem; }

/* Kontaktformular: XD zweispaltig (Spalten 585px, Formularbreite 1195px) */
.kontakt-formular {
  max-width: 74.6875rem;
  margin-inline: auto;
  padding-block: 0;
}

.kontakt-formular fieldset:is(.form-rubrik-daten, .form-rubrik-nachricht) {
  display: grid;
  gap: 0 clamp(1rem, 1.3vw, 1.5625rem);

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

  & > * { grid-column: 1 / -1; }              /* volle Breite als Default */
  & > .widget.halb { grid-column: auto / span 1; }   /* halbe Felder nebeneinander */
}

.page--kontakt .sektion--hero .band { margin-top: 0; }


.ZählerHinzufügen {
  ul li {
    counter-increment: items;
  }
  
  ul li:after {
    content: counter(items) ". ";
  }
  
    counter-reset: items;
  
}

.KarteFußzeile {
  grid-column: 1/5;
}