/* ============================================================
   ZITATE-STAPEL · wiederverwendbarer Baustein  (css/zitate-stapel.css)
   ------------------------------------------------------------
   Stimmen-Bereich mit Karten, die beim Scrollen kleben und sich
   übereinanderlegen — Look und Verhalten wie auf der Standortseite
   Waltersdorf (dort: .s-quote + .kv3-stack in waltersdorf-v3.css).

   Gehört zusammen mit js/zitate-stapel.js. Alle Klassen tragen das
   Präfix zs-, damit der Baustein neben den vorhandenen Stimmen-
   Klassen (.c-voices, .kv3-*, .s-quote, .wal-q) laufen kann, ohne
   dass deren Regeln in css/mobil-v4.css, standort-v3.js usw.
   hineingreifen.

   Aufbau
     section.zs-section                Rot-Anker-Fläche mit Verlauf
       div.zs-head                     Anführungszeichen + optional
         span.zs-mark                    Kicker, Überschrift, Vorspann
         p.zs-kicker  h2.zs-h  p.zs-lede
       div.zs-stack                    der Stapel
         div.zs-wrap                   klebende Ebene (je Karte eine)
           article.zs-card             die Karte
             p.zs-num  p.zs-stars  blockquote.zs-text
             p.zs-attr  p.zs-note  a.zs-btn

   Kartenfarben: .zs-card (Weiß), .zs-card--beige, .zs-card--anker
   (Tiefschwarz, für die Abschlusskarte mit Button).

   Verhalten
   · Desktop und mobil: jede Karte klebt mittig im Bild, die nächste
     schiebt sich darüber. Das Skript lässt die untere leicht
     schrumpfen und dunkler werden.
   · Ohne JS: Karten kleben trotzdem (reines CSS), nur ohne
     Schrumpfen/Abdunkeln. Alles lesbar.
   · prefers-reduced-motion: kein Kleben, die Karten stehen
     untereinander.

   WICHTIG · position: sticky wirkt nicht, wenn ein Vorfahre den
   Überlauf mit overflow: hidden/auto/scroll abschneidet. Deshalb
   setzt die Sektion `overflow: clip` (schneidet ab, ohne einen
   Scroll-Container zu erzeugen). Den Baustein nicht in einen
   Container mit overflow: hidden setzen (z. B. nicht in den alten
   .c-voices__viewport).

   WICHTIG · Kopf und Karten NICHT als <header>/<footer> auszeichnen:
   js/mobile-nav.js entfernt auf Seiten ohne `body > header` das
   erste <header> (bzw. <footer>) im Dokument, um die alte Navigation
   zu ersetzen — es würde den Überschriftbereich löschen.

   Farben und Schriften kommen aus css/tokens.css; die Fallbacks
   greifen nur, falls eine Seite tokens.css nicht lädt.
   ============================================================ */


/* ---- Sektion -------------------------------------------------- */
.zs-section {
  position: relative;
  background: var(--rp-rot-anker, #6D1723);
  color: #fff;
  padding: 170px 0 0;
  overflow: clip;          /* NICHT hidden — siehe Kopfkommentar */
}
.zs-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(220, 13, 29, 0.5), transparent 58%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 0, 0, 0.35), transparent 55%);
  pointer-events: none;
}


/* ---- Überschriftbereich --------------------------------------- */
/* Steht in derselben Spalte wie die Karten (880 px), damit
   Anführungszeichen, Überschrift und Kartenkante fluchten. */
.zs-head {
  position: relative;
  box-sizing: border-box;
  max-width: 920px;        /* 880 px Karte + 2 × 20 px Rand */
  margin: 0 auto;
  padding: 0 20px;
}
.zs-mark {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 120px;
  line-height: 0.6;
  color: rgba(212, 201, 181, 0.95);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.zs-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 22px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-beige, #D4C9B5);
}
.zs-kicker::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--rp-beige, #D4C9B5);
  flex-shrink: 0;
}
.zs-head > :first-child { margin-top: 0; }
.zs-mark + .zs-kicker,
.zs-mark + .zs-h { margin-top: 40px; }
.zs-h {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.zs-h em {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--rp-beige, #D4C9B5);
}
.zs-lede {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}


/* ---- Stapel-Mechanik ------------------------------------------ */
.zs-stack {
  position: relative;
  padding-bottom: 9vh;
}
/* Freizuhaltende Ränder der klebenden Fläche:
   --zs-oben  = Höhe der festen Navigation (84 px auf allen Breiten)
   --zs-unten = Luft unten; mobil (≤720 px) zusätzlich die Zone des
                schwebenden Probetraining-Buttons (unten mittig).
   Die Karte wird in der Fläche dazwischen mittig gesetzt und nie
   höher als diese Fläche — so verdecken weder Navigation noch
   schwebender Button Sterne, Nummer oder Namenszeile. (Waltersdorf
   zentriert im ganzen Bildschirm; bei langen Karten auf kleinen
   Handys rutscht dort der Kartenkopf unter die Navigation.)
   Seiten mit anderer Navigationshöhe überschreiben die Variablen
   an der Sektion. */
.zs-section { --zs-oben: 84px; --zs-unten: 16px; }
.zs-wrap {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zs-oben) 20px var(--zs-unten);
}


/* ---- Karte ---------------------------------------------------- */
.zs-card {
  box-sizing: border-box;
  position: relative;
  width: min(880px, 94vw);
  margin: 0;
  border-radius: 24px;
  padding: clamp(32px, 5vw, 64px);
  background: #fff;
  color: var(--rp-tiefschwarz, #1A1414);
  text-align: left;
  border-top: 4px solid var(--rp-rot-akzent, #DC0D1D);
  box-shadow: 0 40px 90px -36px rgba(26, 20, 20, 0.45);
  will-change: transform;
  /* sehr langer Text auf niedrigen Bildschirmen: scrollt in der Karte */
  max-height: calc(100vh - var(--zs-oben) - var(--zs-unten) - 16px);
  max-height: calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px);
  overflow-y: auto;
}
/* Die letzte Karte wird von keiner weiteren überdeckt: sie behält
   ihre volle Höhe (kein Scrollen in der Karte, der Button bleibt
   direkt erreichbar). Ist sie höher als die freie Fläche, steht sie
   oben bündig unter der Navigation und läuft mit dem Abschnitt aus.
   Voraussetzung: nach der letzten .zs-wrap folgt im .zs-stack
   nichts mehr. */
.zs-wrap:last-child {
  align-items: center;
  align-items: safe center;
}
.zs-wrap:last-child > .zs-card {
  max-height: none;
  overflow-y: visible;
}
.zs-card--beige { background: var(--rp-beige-deep, #ede4d2); }
/* Abschlusskarte: auf dem Rot-Anker der Sektion würde eine rote
   Karte verschwimmen — sie läuft deshalb in Tiefschwarz. */
.zs-card--anker {
  background: var(--rp-tiefschwarz, #1A1414);
  color: #fff;
  border-top-color: var(--rp-beige, #D4C9B5);
}

.zs-num {
  position: absolute;
  top: 26px;
  right: 30px;
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-grau-muted, #8A8E91);
}
.zs-stars {
  margin: 0 0 18px;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--rp-rot-akzent, #DC0D1D);
}
.zs-text {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  max-width: 46ch;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.05vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--rp-tiefschwarz, #1A1414);
  text-wrap: pretty;
}
.zs-text p { margin: 0; }
.zs-text p + p { margin-top: 0.6em; }
.zs-attr {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--rp-border-soft, #E8E5DD);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rp-grau-7012, #575E62);
}
.zs-attr strong { color: var(--rp-rot-anker, #6D1723); font-weight: 700; }
.zs-note {
  margin: 12px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-grau-muted, #8A8E91);
}

/* Abschlusskarte (Tiefschwarz) */
.zs-card--anker .zs-num   { color: rgba(237, 228, 210, 0.72); }
.zs-card--anker .zs-stars { color: var(--rp-beige, #D4C9B5); }
.zs-card--anker .zs-text  { color: #fff; }
.zs-card--anker .zs-attr {
  color: rgba(237, 228, 210, 0.88);
  border-top-color: rgba(255, 255, 255, 0.24);
}
.zs-card--anker .zs-attr strong { color: var(--rp-beige, #D4C9B5); }
.zs-card--anker .zs-note { color: rgba(237, 228, 210, 0.6); }


/* ---- Button in der Karte -------------------------------------- */
/* Im Muster steht class="s-btn zs-btn": .s-btn bringt auf den
   Standortseiten den Hausbutton samt Glanz-Effekt mit, .zs-btn
   bindet ihn an die Kartenbreite. .zs-btn allein sieht genauso aus,
   falls eine Seite standort.css nicht lädt. */
.zs-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 28px;
  padding: 22px 40px;
  border-radius: 999px;
  background: var(--rp-rot-akzent, #DC0D1D);
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms var(--ease-standard, ease), transform 220ms var(--ease-standard, ease);
}
/* Doppelte Klasse schlägt `.s-page a { color: inherit }`. */
.zs-card .zs-btn { color: #fff; }
.zs-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.zs-btn:focus-visible { outline: 2px solid var(--rp-beige, #D4C9B5); outline-offset: 3px; }


/* ---- Kopf-Einblendung (nur mit JS, nur ohne reduzierte Bewegung) */
/* .zs-js setzt das Skript erst, wenn es den Beobachter starten kann —
   ohne JS bleibt der Kopf sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .zs-js .zs-head > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease-standard, ease), transform 700ms var(--ease-standard, ease);
  }
  .zs-js .zs-head > :nth-child(2) { transition-delay: 90ms; }
  .zs-js .zs-head > :nth-child(3) { transition-delay: 180ms; }
  .zs-js .zs-head > :nth-child(n+4) { transition-delay: 270ms; }
  .zs-js .zs-head.is-in > * { opacity: 1; transform: none; }
}


/* ---- Tablet / schmal ------------------------------------------ */
@media (max-width: 900px) {
  .zs-section { padding-top: 100px; }
  .zs-mark { font-size: 84px; }
  .zs-card { padding: 30px 24px 28px; }
  .zs-num { top: 16px; right: 18px; }
  .zs-text { font-size: clamp(18px, 4.4vw, 22px); }
}

/* ---- Mobil ---------------------------------------------------- */
/* Wie Waltersdorf mobil (dort aus css/mobil-v4.css, Abschnitt 5):
   Stapel bleibt eingeschaltet, Karte wächst nach unten aus dem
   Schrumpfen heraus und scrollt bei sehr langem Text in sich. */
@media (max-width: 768px) {
  .zs-head { padding: 0 18px; text-align: center; }
  .zs-kicker { justify-content: center; }
  .zs-h, .zs-lede { margin-left: auto; margin-right: auto; }
  .zs-lede { font-size: 15.5px; }

  .zs-stack { padding-bottom: 6vh; }
  .zs-wrap { padding: var(--zs-oben) 18px var(--zs-unten); }
  .zs-card { transform-origin: 50% 0%; }
}
@media (max-width: 720px) {
  /* schwebender Probetraining-Button: bottom 16 px + ca. 51 px Höhe */
  .zs-section { --zs-unten: 76px; }
}
@media (max-width: 480px) {
  /* Button darf umbrechen statt über den Kartenrand zu ragen. */
  .zs-btn {
    white-space: normal;
    text-wrap: balance;
    letter-spacing: 0.06em;
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ---- Reduzierte Bewegung -------------------------------------- */
/* Kein Kleben, kein Schrumpfen: alle Karten stehen untereinander
   und sind vollständig lesbar. */
@media (prefers-reduced-motion: reduce) {
  .zs-stack { padding-bottom: 48px; }
  .zs-wrap {
    position: static;
    height: auto;
    padding: 14px 20px;
  }
  .zs-card {
    transform: none !important;   /* falls ein Inline-Wert vom Skript stehen blieb */
    filter: none !important;
    max-height: none;
    overflow-y: visible;
    will-change: auto;
  }
  .zs-btn { transition: none; }
  .zs-btn:hover { transform: none; }
}