/* Landingpage „Die Gastronomie ist umgezogen.“ · Dossier 01 · TasteWorks
   Nacht und Papier wie das Heft: #111111 / #faf6df, Marcellus 400 + Poppins 400/500, Gold nur als Linie.
   Alle Pfade relativ (spaeter Seitenvorlage eines isolierten WordPress-Plugins). */

@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --nacht: #111111;
  --papier: #faf6df;
  --text-nacht: #d6d3c6;
  --leise-nacht: #9c9a92;
  --gold: #c9a24b;
  --gold-papier: #a8852f;
  --tinte: #111111;
  --text-papier: #2c2b27;
  --leise-papier: #5d5a50;
  --linie-nacht: rgba(250, 246, 223, .16);
  --linie-papier: rgba(17, 17, 17, .18);
  --rand: clamp(20px, 6.667vw, 96px);
  --luft: clamp(96px, 11vw, 160px);
  --kurve: cubic-bezier(.16, 1, .3, 1);
  --t-klein: 12.5px;
  --t-neben: 14px;
  --t-text: 18px;
  --t-satz: 24px;
  --t-zwischen: 30px;
  --t-h2: clamp(36px, 3.9vw, 56px);
  --t-h1: clamp(40px, 5vw, 72px);
  --t-wert: clamp(52px, 5vw, 72px);
  --t-zahl: clamp(104px, 15vw, 216px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-family: "Poppins", Arial, sans-serif; background: var(--nacht); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--nacht); color: var(--text-nacht);
  font-family: "Poppins", Arial, sans-serif; font-weight: 400; font-size: var(--t-text); line-height: 1.6;
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, .marcellus { font-family: "Marcellus", Georgia, serif; font-weight: 400; color: var(--papier); hyphens: manual; text-wrap: balance; }
p { text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.nw { white-space: nowrap; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.innen { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.papier { background: var(--papier); color: var(--tinte); }
.papier h2, .papier h3 { color: var(--tinte); }

/* Goldlinie: ein System ueber jedem Abschnittstitel, 48 x 1 px, 24 px Abstand */
.goldstrich { display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 24px; transform-origin: left center; }
.papier .goldstrich { background: var(--gold-papier); }
.marke-seite { display: block; font-size: var(--t-klein); line-height: 1.4; color: var(--leise-nacht); margin: -10px 0 18px; letter-spacing: .01em; }
.papier .marke-seite { color: var(--leise-papier); }

/* ---------- Kopf: nur die Marke, ohne Link ---------- */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.kopf .innen { display: flex; align-items: center; height: 88px; }
.marke { font-weight: 500; font-size: 12px; letter-spacing: .42em; color: var(--papier); line-height: 1; }

/* ---------- ① Hero: Vollbild-Buehne ---------- */
.hero { position: relative; background: var(--nacht); min-height: max(100svh, 720px); overflow: hidden; isolation: isolate; }
.hero-buehne { position: absolute; top: 0; right: 0; width: 100%; aspect-ratio: 16 / 9; z-index: -1; }
.hero-buehne img, .hero-buehne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero-buehne video { opacity: 0; transition: opacity .3s linear; }
.hero-buehne video.laeuft { opacity: 1; }
/* Abdunkler links (Sicherung der Ruhezone) und unten (Bild laeuft ins Schwarz der Seite aus) */
.hero-buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--nacht) 0%, rgba(17,17,17,.92) 26%, rgba(17,17,17,0) 46%),
              linear-gradient(0deg, var(--nacht) 0%, rgba(17,17,17,0) 18%); }
.hero .innen { position: relative; padding-top: clamp(150px, 19vh, 200px); padding-bottom: 72px; }
.hero-text { width: clamp(440px, 38vw, 548px); }
.eyebrow { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); line-height: 1.5; margin-bottom: 26px; }
.hero h1 { font-size: var(--t-h1); line-height: 1.0; letter-spacing: -.012em; margin-bottom: 28px; }
.unterzeile { font-size: 19px; line-height: 1.55; color: #e9e5d2; max-width: 30em; margin-bottom: 40px; hyphens: manual; }

/* ---------- Formular (dreimal gleich) ---------- */
.formular { position: relative; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feld { position: relative; display: block; border: 1px solid rgba(250, 246, 223, .36); background: rgba(17, 17, 17, .86); transition: border-color .2s; }
.feld:focus-within { border-color: var(--papier); }
.feld-name { position: absolute; left: 15px; top: 8px; font-size: 12px; line-height: 1.2; color: var(--leise-nacht); pointer-events: none; }
.feld input { display: block; width: 100%; height: 58px; padding: 23px 15px 7px; border: 0; background: transparent; color: var(--papier);
  font: 400 16px/1.4 "Poppins", Arial, sans-serif; border-radius: 0; -webkit-appearance: none; appearance: none; }
.feld input::placeholder { color: #85837c; opacity: 1; }
.feld input:focus { outline: none; }
.feld.falsch { border-color: #e0a07a; }
.hilfe { font-size: var(--t-klein); line-height: 1.5; color: var(--leise-nacht); margin: 10px 0 16px; hyphens: manual; }
.knopf { display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--papier); color: var(--tinte); font: 500 15px/1 "Poppins", Arial, sans-serif; letter-spacing: .05em; text-decoration: none;
  transition: background-color .2s ease; }
.knopf:hover { background: #ffffff; }
.knopf:focus-visible, .feld input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.danach { font-size: 13.5px; line-height: 1.5; color: var(--text-nacht); margin-top: 12px; hyphens: manual; }
.einwilligung { font-size: 12px; line-height: 1.5; color: #8d8b84; margin-top: 6px; }
.einwilligung a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.fehler { font-size: 13.5px; line-height: 1.45; color: #f0b892; margin-top: 10px; }
.fehler[hidden] { display: none; }
.honig { position: absolute !important; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ---------- ② Fuenf Haeuser (Papier, wie Heft S. 35) ---------- */
.haeuser { padding: var(--luft) 0 calc(var(--luft) - 16px); }
.haeuser-kopf { align-items: end; margin-bottom: 72px; }
.haeuser-kopf > div { grid-column: 1 / 8; }
.haeuser h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; }
.pflicht { grid-column: 8 / 13; font-size: var(--t-neben); line-height: 1.55; color: var(--leise-papier); padding-bottom: 6px; hyphens: manual; }
.liste-haeuser { border-top: 1px solid var(--tinte); }
.haus-zeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 40px 0 42px; border-bottom: 1px solid var(--linie-papier); align-items: start; }
.haus-name { grid-column: 1 / 5; grid-row: 1; }
.im-heft { grid-column: 1 / 5; grid-row: 2; align-self: end; font-size: 13px; color: var(--leise-papier); padding-top: 18px; hyphens: manual; }
.haus-name h3 { font-size: 28px; line-height: 1.2; }
.haus-name .ort { font-size: 15px; color: var(--leise-papier); margin-top: 4px; }
.haus-wert { grid-column: 5 / 10; grid-row: 1 / 3; }
.haus-wert .vorzeile { font-size: var(--t-neben); color: var(--text-papier); margin-bottom: 6px; }
.wert { font-family: "Marcellus", Georgia, serif; font-size: var(--t-wert); line-height: .95; letter-spacing: -.015em; color: var(--tinte); white-space: nowrap; }
.wert small { font-size: .5em; letter-spacing: 0; }
.wert .pfeilgrafik { display: inline-block; width: .9em; height: .34em; margin: 0 .14em; vertical-align: .2em; color: var(--gold-papier); }
.haus-wert .was { font-size: 15px; line-height: 1.5; color: var(--text-papier); margin-top: 14px; max-width: 26em; hyphens: manual; }
.haus-zweit { grid-column: 10 / 13; grid-row: 1 / 3; padding-top: 8px; }
.haus-zweit .wert2 { font-family: "Marcellus", Georgia, serif; font-size: 34px; line-height: 1; color: var(--tinte); white-space: nowrap; }
.haus-zweit .was { font-size: 14px; line-height: 1.5; color: var(--text-papier); margin-top: 8px; hyphens: manual; }

/* ---------- ③ Formular nach den Ergebnissen (Nacht) ---------- */
.zwischenform { padding: var(--luft) 0 calc(var(--luft) * .55); }
.zwischenform .raster { align-items: start; }
.zwischenform .links { grid-column: 1 / 7; }
.zwischenform h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.01em; }
.zwischenform .rechts { grid-column: 8 / 13; padding-top: 48px; }
.zwischenform .formular { max-width: 560px; }

/* ---------- ④ Leitzahlen: eine Zahl je Bildschirm ---------- */
.leitzahlen-kopf { padding: calc(var(--luft) * .9) 0 calc(var(--luft) * .6); }
.leitzahlen-kopf h2 { grid-column: 1 / 9; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.zahlbild { position: relative; background: var(--nacht); min-height: 100svh; display: flex; align-items: center; border-top: 1px solid rgba(201, 162, 75, .32); }
.zahlbild .raster { width: 100%; align-items: end; }
.zahlbild .links { grid-column: 1 / 8; }
.zahlbild .rechts { grid-column: 8 / 13; padding-bottom: 18px; }
.zahl { font-family: "Marcellus", Georgia, serif; font-size: var(--t-zahl); line-height: .86; letter-spacing: -.025em; color: var(--papier); white-space: nowrap; }
.zahl small { font-size: .3em; letter-spacing: 0; margin: 0 .1em; }
.zahl-satz { font-family: "Marcellus", Georgia, serif; font-size: var(--t-satz); line-height: 1.4; color: var(--papier); hyphens: manual; }
.zahl-quelle { font-size: 12.5px; line-height: 1.55; color: var(--leise-nacht); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linie-nacht); hyphens: manual; }
@media (prefers-reduced-motion: no-preference) {
  .zahlbild { position: sticky; top: 0; }
}

/* ---------- ⑤ Was drinsteht (Papier) ---------- */
.inhalt { padding: var(--luft) 0 calc(var(--luft) * .8); }
.inhalt-kopf h2 { grid-column: 1 / 9; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; }
.inhalt-kopf { margin-bottom: 64px; }
.seiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; list-style: none; }
.seiten figure { margin: 0; }
.seiten img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #efe9cc; }
.seiten figcaption { font-size: 13px; color: var(--leise-papier); margin-top: 12px; }
.kapitel { margin-top: 96px; }
.kapitel ol { grid-column: 1 / 13; list-style: none; border-top: 1px solid var(--tinte); }
.kapitel li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 18px 0 19px; border-bottom: 1px solid var(--linie-papier); align-items: baseline; }
.kapitel .nr { grid-column: 1 / 2; font-family: "Marcellus", Georgia, serif; font-size: 19px; color: #8a6a22; }
.kapitel .titel { grid-column: 2 / 6; font-family: "Marcellus", Georgia, serif; font-size: 23px; line-height: 1.25; }
.kapitel .unter { grid-column: 6 / 12; font-size: 15.5px; line-height: 1.5; color: var(--text-papier); hyphens: manual; }
.kapitel .s { grid-column: 12 / 13; font-size: 13px; color: var(--leise-papier); text-align: right; white-space: nowrap; }
.kapitel .zusatz { grid-column: 2 / 11; margin-top: 36px; font-family: "Marcellus", Georgia, serif; font-size: var(--t-satz); line-height: 1.4; hyphens: manual; }

/* ---------- ⑥ Fuer wen (Papier) ---------- */
.fuerwen { padding: 0 0 var(--luft); }
.fuerwen .trenn { height: 1px; background: var(--gold-papier); opacity: .55; margin-bottom: calc(var(--luft) * .8); }
.fuerwen .koerper { grid-column: 1 / 8; }
.fuerwen h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 32px; }
.fuerwen p { max-width: 36em; margin-bottom: 16px; color: var(--text-papier); }
.fuerwen .nicht { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linie-papier); }
.fuerwen .nicht b { font-weight: 500; color: var(--tinte); }
.fuerwen .sitze { grid-column: 9 / 13; align-self: center; }
.fuerwen .sitze .zahl { color: var(--tinte); font-size: clamp(72px, 7.5vw, 112px); }
.fuerwen .sitze p { font-size: var(--t-neben); color: var(--leise-papier); margin-top: 14px; }

/* ---------- ⑦ Elisa (Nacht) ---------- */
.elisa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 820px; }
.elisa-bild { position: relative; overflow: hidden; background: #1a1917; }
.elisa-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.elisa-text { padding: var(--luft) var(--rand) var(--luft) clamp(40px, 6vw, 96px); align-self: center; max-width: 760px; }
.elisa h2 { font-size: var(--t-h2); line-height: 1.04; margin-bottom: 36px; }
.elisa p { margin-bottom: 16px; max-width: 34em; }
.elisa .zitat { font-family: "Marcellus", Georgia, serif; font-size: var(--t-satz); line-height: 1.4; color: var(--papier); hyphens: manual; }
.elisa .name { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie-nacht); }
.elisa .name b { display: block; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: var(--t-zwischen); color: var(--papier); line-height: 1.2; }
.elisa .name span { display: block; font-size: 15px; color: var(--text-nacht); margin-top: 6px; }
.elisa .name small { display: block; font-size: var(--t-neben); color: var(--leise-nacht); margin-top: 2px; }

/* ---------- ⑧ Die Probe als Vorschau (Papier) ---------- */
.probe { padding: var(--luft) 0 calc(var(--luft) * .8); }
.probe .koerper { grid-column: 1 / 9; }
.probe h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 26px; }
.probe .einstieg { font-size: 19px; max-width: 34em; color: var(--text-papier); margin-bottom: 14px; }
.probe .anweisung { max-width: 34em; color: var(--text-papier); margin-bottom: 56px; }
.zeilen { border-top: 1px solid var(--tinte); }
.zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; gap: 24px; padding: 22px 0 26px; border-bottom: 1px solid var(--linie-papier); align-items: start; }
.zeile .wo { font-size: var(--t-neben); color: var(--leise-papier); padding-top: 5px; }
.zeile .frage { font-family: "Marcellus", Georgia, serif; font-size: 21px; line-height: 1.35; hyphens: manual; }
.zeile .leer span { display: block; font-size: 13px; color: var(--leise-papier); padding-top: 4px; }
.zeile .leer i { display: block; height: 28px; border-bottom: 1px solid var(--tinte); }
.probe .verweis { margin-top: 40px; max-width: 36em; color: var(--text-papier); }

/* ---------- ⑨ Fragen (Papier, Fortsetzung) ---------- */
.fragen { padding: 0 0 var(--luft); }
.fragen .trenn { height: 1px; background: var(--gold-papier); opacity: .55; margin-bottom: calc(var(--luft) * .7); }
.fragen .kopf2 { grid-column: 1 / 9; font-size: var(--t-h2); line-height: 1.04; margin-bottom: 56px; }
.fragen dl { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.fragen dl > div { border-top: 1px solid var(--tinte); padding-top: 22px; }
.fragen dt { font-family: "Marcellus", Georgia, serif; font-size: 24px; line-height: 1.25; color: var(--tinte); margin-bottom: 12px; }
.fragen dd { font-size: 16px; line-height: 1.6; color: var(--text-papier); }
.platzhalter { display: block; margin-top: 8px; font-size: 13px; color: var(--leise-papier); font-style: italic; }

/* ---------- ⑩ Schluss (Nacht, Heft rechts) ---------- */
.schluss { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--luft) * 1.25) 0 var(--luft); min-height: 860px; }
.schluss-bild { position: absolute; top: 0; right: 0; bottom: 0; width: min(56vw, 760px); z-index: -1; overflow: hidden; }
.schluss-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); mask-composite: intersect; }
.schluss .hero-text { width: clamp(460px, 44vw, 620px); }
.schluss .formular { max-width: 548px; }
.schluss h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.01em; margin-bottom: 22px; }
.schluss .unterzeile { margin-bottom: 36px; }

/* ---------- Fuss ---------- */
.fuss { border-top: 1px solid var(--linie-nacht); }
.fuss .innen { display: flex; justify-content: space-between; align-items: center; min-height: 120px; gap: 24px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 32px; font-size: 13.5px; color: var(--leise-nacht); }
.fuss nav a { text-decoration: none; padding: 12px 0; }
.fuss nav a:hover { color: var(--papier); }

/* ---------- Fester Knopf mobil ---------- */
.fest-knopf { display: none; }

/* ---------- Bewegung (nur mit JS und ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.bew .goldstrich { transform: scaleX(0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  html.bew .goldstrich.da { transform: scaleX(1); }
}

/* =================== Tablet =================== */
@media (max-width: 1100px) {
  .haus-name, .im-heft { grid-column: 1 / 6; }
  .haus-wert { grid-column: 6 / 13; grid-row: 1; }
  .haus-zweit { grid-column: 6 / 13; grid-row: 2; padding-top: 22px; }
  .zwischenform .links { grid-column: 1 / 13; }
  .zwischenform .rechts { grid-column: 1 / 13; padding-top: 40px; }
  .fragen dl { grid-template-columns: 1fr; row-gap: 32px; }
}

/* =================== Handy (bis 760 px): eigens komponiert =================== */
@media (max-width: 760px) {
  :root { --t-text: 17px; --luft: 88px; --t-satz: 21px; --t-zwischen: 26px; }
  .raster { display: block; }

  .kopf .innen { height: 44px; }
  .marke { font-size: 10.5px; letter-spacing: .38em; }

  /* Falte: Band mit dem Heft, darunter Titel, Unterzeile, Felder, Knopf – alles ueber einer 298-px-Cookie-Leiste */
  .hero { min-height: 0; }
  .hero-buehne { position: relative; aspect-ratio: 780 / 373; }
  .hero-buehne img { object-position: 50% 50%; }
  .hero-buehne::after { background: linear-gradient(0deg, var(--nacht) 0%, rgba(17,17,17,0) 30%), linear-gradient(180deg, rgba(17,17,17,.9) 0%, rgba(17,17,17,.55) 16%, rgba(17,17,17,0) 34%); }
  .hero .innen { padding-top: 2px; padding-bottom: 56px; }
  .hero-text { width: auto; }
  .eyebrow { display: none; }
  .hero h1 { font-size: 34px; line-height: 1.02; margin-bottom: 10px; }
  .unterzeile { font-size: 16px; line-height: 1.45; margin-bottom: 16px; }
  .formular { display: flex; flex-direction: column; }
  .felder { grid-template-columns: 1fr; gap: 8px; order: 0; }
  .feld input { height: 52px; padding-top: 21px; padding-bottom: 5px; }
  .feld-name { top: 7px; }
  .knopf { order: 1; height: 52px; margin-top: 10px; }
  .fehler { order: 2; }
  .danach { order: 3; margin-top: 10px; font-size: 13px; }
  .hilfe { order: 4; margin: 8px 0 0; }
  .einwilligung { order: 5; }
  .formular .honig { order: 6; }

  .haeuser-kopf { margin-bottom: 40px; }
  .pflicht { margin-top: 18px; padding: 0; }
  .haus-zeile { display: flex; flex-direction: column; padding: 30px 0 32px; }
  .im-heft { order: 5; padding-top: 14px; align-self: auto; }
  .haus-zweit { width: 100%; }
  .haus-name h3 { font-size: 23px; }
  .haus-name .ort { font-size: 14px; margin-top: 2px; }
  .haus-wert { margin-top: 18px; }
  .wert { font-size: 54px; }
  .haus-wert .was { margin-top: 10px; font-size: 14.5px; }
  .haus-zweit { display: flex; align-items: baseline; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--linie-papier); }
  .haus-zweit .wert2 { font-size: 26px; }
  .haus-zweit .was { margin-top: 0; font-size: 13.5px; }

  .zwischenform .rechts { padding-top: 28px; }

  .leitzahlen-kopf { padding: var(--luft) 0 40px; }
  .zahlbild { min-height: 78svh; }
  .zahlbild .rechts { padding: 28px 0 0; }
  .zahl { font-size: 27vw; }

  .inhalt-kopf { margin-bottom: 36px; }
  .seiten { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 22px; }
  .seiten li.zuerst { order: -1; }
  .seiten figcaption { font-size: 12.5px; margin-top: 8px; }
  .kapitel { margin-top: 56px; }
  .kapitel li { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 4px; column-gap: 10px; padding: 15px 0 16px; }
  .kapitel .nr { grid-column: 1; grid-row: 1; font-size: 17px; }
  .kapitel .titel { grid-column: 2; grid-row: 1; font-size: 20px; }
  .kapitel .s { grid-column: 3; grid-row: 1; }
  .kapitel .unter { grid-column: 2 / 4; grid-row: 2; font-size: 14.5px; }
  .kapitel .zusatz { margin-top: 28px; }

  .fuerwen h2 { margin-bottom: 22px; }
  .fuerwen .sitze { margin-top: 48px; }

  .elisa { display: block; min-height: 0; }
  .elisa-bild { height: 480px; }
  .elisa-bild img { object-position: 50% 12%; }
  .elisa-text { padding: 48px var(--rand) var(--luft); }
  .elisa h2 { margin-bottom: 24px; }

  .probe .anweisung { margin-bottom: 36px; }
  .zeile { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 20px; }
  .zeile .frage { font-size: 19px; }
  .zeile .leer { padding-top: 8px; }

  .fragen .kopf2 { margin-bottom: 32px; }

  .schluss { padding: 0 0 var(--luft); min-height: 0; }
  .schluss-bild { position: relative; width: 100%; height: 340px; }
  .schluss-bild img { object-position: 40% 45%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .schluss .innen { margin-top: -8px; }
  .schluss .hero-text { width: auto; }
  .schluss .unterzeile { margin-bottom: 24px; }

  .fuss .innen { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding-top: 28px; padding-bottom: 96px; }

  .fest-knopf { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: rgba(17, 17, 17, .96); border-top: 1px solid var(--linie-nacht); transform: translateY(110%); transition: transform .3s var(--kurve); }
  .fest-knopf.an { transform: none; }
  .fest-knopf .knopf { height: 50px; margin: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .fest-knopf { transition: none; } }

/* Nur fuer die Abnahme der Falte: simulierte Cookie-Leiste (298 px), per ?cookie=1 */
.cookie-sim { position: fixed; left: 0; right: 0; bottom: 0; height: 298px; z-index: 50; background: #f0f0f0; color: #333; font-size: 13px; padding: 22px 20px; border-top: 2px dashed #c9a24b; }

/* =================== Danke-Seite (gleicher Guss) =================== */
.danke { padding: 128px 0 var(--luft); }
.danke .raster { align-items: center; }
.danke-bild { grid-column: 1 / 7; }
.danke-bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.danke-text { grid-column: 8 / 13; }
.ausgabe { font-size: var(--t-neben); color: var(--leise-nacht); margin-bottom: 28px; }
.ausgabe .marcellus { font-size: 22px; color: var(--papier); margin-left: 6px; letter-spacing: .04em; }
.danke h1 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 22px; }
.danke .unterzeile { margin-bottom: 36px; }
.danke-knoepfe { display: grid; gap: 10px; max-width: 460px; }
.knopf-leise { background: transparent; color: var(--papier); border: 1px solid rgba(250, 246, 223, .5); }
.knopf-leise:hover { background: rgba(250, 246, 223, .08); }
.folgefrage { padding: var(--luft) 0; }
.folgefrage .koerper, .nebenangebot .koerper { grid-column: 1 / 10; }
.folgefrage .einstieg { color: var(--text-papier); margin-bottom: 8px; }
.folgefrage h2 { font-size: var(--t-h2); line-height: 1.06; margin-bottom: 36px; }
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl button { font: 400 16px/1 "Poppins", Arial, sans-serif; color: var(--tinte); background: transparent; border: 1px solid rgba(17, 17, 17, .45); border-radius: 0;
  padding: 0 22px; height: 52px; cursor: pointer; transition: background-color .2s, color .2s; }
.wahl button:hover:not(:disabled) { background: rgba(17, 17, 17, .06); }
.wahl button:focus-visible { outline: 2px solid var(--gold-papier); outline-offset: 3px; }
.wahl button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.wahl button:disabled { cursor: default; }
.wahl button:disabled:not([aria-pressed="true"]) { opacity: .45; }
.wahl-danke { font-family: "Marcellus", Georgia, serif; font-size: var(--t-satz); color: var(--tinte); margin-top: 18px; min-height: 1.4em; }
.freiwillig { font-size: 13px; color: var(--leise-papier); margin-top: 6px; }
.nebenangebot { padding: calc(var(--luft) * .75) 0; }
.nebenangebot h2 { font-size: var(--t-zwischen); line-height: 1.2; margin-bottom: 12px; }
.nebenangebot p { color: var(--text-nacht); max-width: 34em; }
.nebenangebot .link a { color: var(--papier); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 75, .7); padding-bottom: 2px; }
.nebenangebot .link { margin-top: 10px; }
@media (max-width: 760px) {
  .danke { padding: 44px 0 72px; }
  .danke-bild { margin: 0 calc(-1 * var(--rand)); }
  .danke-bild img { aspect-ratio: 390 / 330; object-position: 40% 50%; }
  .danke-text { margin-top: 8px; }
  .ausgabe { margin-bottom: 18px; }
  .danke .unterzeile { margin-bottom: 22px; }
  .wahl button { flex: 1 1 calc(50% - 5px); padding: 0 10px; }
  .wahl button:last-child { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .wahl { display: grid; grid-template-columns: 1fr 1fr; }
  .wahl button { padding: 0 10px; }
  .wahl button:last-child { grid-column: 1 / 3; }
  .nebenangebot .link a { font-size: 15.5px; hyphens: none; word-break: keep-all; }
}
@media (max-width: 760px) { .schluss-bild img { animation: none !important; } }

/* =================== Runde 2 =================== */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.papier a:focus-visible { outline-color: var(--gold-papier); }

/* Fussnote zur Hero-Zahl */
.fn-marke { text-decoration: none; color: var(--gold); font-size: .75em; vertical-align: .5em; line-height: 0; padding: 0 1px; }
.fussnote { font-size: 12px; line-height: 1.5; color: var(--leise-nacht); margin: -26px 0 30px; max-width: 34em; hyphens: manual; }
.fn-mobil { display: none; }

/* Freiwilliges Kaestchen */
.haken { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--text-nacht); }
.haken input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.haken-box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1px solid rgba(250, 246, 223, .55); position: relative; transition: background-color .15s, border-color .15s; }
.haken input:checked + .haken-box { background: var(--papier); border-color: var(--papier); }
.haken input:checked + .haken-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--tinte); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.haken input:focus-visible + .haken-box { outline: 2px solid var(--gold); outline-offset: 3px; }
.haken-text { hyphens: manual; }

/* Ladezustand des Knopfs: ein Zustand, eine Goldlinie */
.knopf { position: relative; overflow: hidden; }
.knopf-laden { display: none; }
.knopf.laedt { cursor: progress; background: #ece6cc; }
.knopf.laedt .knopf-text { display: none; }
.knopf.laedt .knopf-laden { display: inline; }
.knopf.laedt::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; animation: laden 1.4s var(--kurve) both; }
@keyframes laden { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .knopf.laedt::after { animation: none; } }

/* Absender am ersten Formular */
.absender { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linie-nacht); max-width: 548px; }
.absender img { width: 48px; height: 48px; object-fit: cover; flex: 0 0 48px; }
.absender p { font-size: 13.5px; line-height: 1.45; color: var(--text-nacht); }
.absender b { display: block; font-weight: 500; color: var(--papier); }
.absender span { display: block; }
.hero .einwilligung { margin-top: 8px; }

/* Zahlenbuehne */
.zahlen { padding: var(--luft) 0; }
.zahlen-kopf h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; max-width: 15em; }
.zahlen-staende { margin-top: 56px; }
.zahlstand { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 48px 0; border-top: 1px solid rgba(201, 162, 75, .32); }
.zahlstand .links { grid-column: 1 / 8; }
.zahlstand .rechts { grid-column: 8 / 13; padding-bottom: 18px; }
.zahlen-fortschritt { display: none; }
.zahlen.an { padding: 0; }
.zahlen.an .zahlen-spur { height: 320svh; }
.zahlen.an .zahlen-buehne { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.zahlen.an .zahlen-staende { display: grid; margin-top: clamp(32px, 7vh, 80px); }
.zahlen.an .zahlstand { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; transition: opacity .45s ease; }
.zahlen.an .zahlstand.aktiv { opacity: 1; }
.zahlen.an .zahlen-fortschritt { display: flex; gap: 10px; margin-top: clamp(28px, 6vh, 64px); }
.zahlen-fortschritt i { display: block; width: 36px; height: 1px; background: rgba(250, 246, 223, .25); transition: background-color .3s; }
.zahlen-fortschritt i.an { background: var(--gold); }

/* Einblick: Blaetterbuehne */
.einblick { padding: var(--luft) 0 calc(var(--luft) * .8); background: var(--nacht); }
.einblick-kopf h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; max-width: 14em; }
.doppelseiten { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; max-width: 1440px; margin: 56px auto 0; padding: 0 var(--rand); }
.doppel { display: grid; grid-template-columns: 1fr 1fr; background: #191919; }
.doppel img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.doppel .leer { display: block; }
.doppelseiten figcaption, .blaetter-cap { font-size: 13px; color: var(--leise-nacht); margin-top: 12px; }
.einblick.an { padding-bottom: 0; }
.einblick.an .doppelseiten { display: none; }
.blaetter-spur { position: relative; }
.blaetter-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.buch { --pw: min(450px, calc((100svh - 190px) * .75), 41vw); position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.3333); perspective: 2800px; }
.buch .seite, .blatt, .blatt > div { position: absolute; top: 0; height: 100%; width: var(--pw); }
.buch .links { left: 0; }
.buch .rechts, .blatt { left: var(--pw); }
.buch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blatt { transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.blatt > div { left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #e9e4cb; }
.blatt .hinten { transform: rotateY(180deg); }
.blatt .schatten { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; }
.blatt .vorn .schatten { background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 60%); }
.blatt .hinten .schatten { background: linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0) 60%); }
.buch .falz { position: absolute; top: 0; bottom: 0; left: calc(var(--pw) - 14px); width: 28px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.22) 50%, rgba(0,0,0,0)); opacity: 0; }
.blaetter-unten { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.blaetter-unten .blaetter-cap { margin: 0; min-width: 18em; }
.blaetter-punkte { display: flex; gap: 8px; }
.blaetter-punkte i { width: 22px; height: 1px; background: rgba(250, 246, 223, .25); }
.blaetter-punkte i.an { background: var(--gold); }
.inhalt { padding-top: calc(var(--luft) * .8); }
.inhalt .kapitel { margin-top: 0; }

@media (max-width: 1100px) {
  .doppelseiten { grid-template-columns: 1fr; }
}

/* ---------- Handy, Runde 2 ---------- */
@media (max-width: 760px) {
  .hero .innen { padding-top: 50px; padding-bottom: 48px; }
  .hero-buehne { position: absolute; top: 42px; right: 12px; width: 118px; height: auto; aspect-ratio: 450 / 584; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; }
  .hero-buehne::after { display: none; }
  .hero-buehne img { object-position: 50% 50%; }
  .hero-text { position: relative; z-index: 1; }
  .hero-titel { min-height: 160px; max-width: calc(100% - 108px); display: flex; flex-direction: column; justify-content: space-between; }
  .eyebrow { display: block; font-size: 12px; letter-spacing: .1em; line-height: 1.55; margin: 0; }
  .hero h1 { font-size: min(28px, 7.3vw); line-height: 1.04; margin: 0; text-wrap: nowrap; }
  .unterzeile { font-size: 15px; line-height: 1.42; margin: 12px 0 14px; }
  .fn-desktop { display: none; }
  .fn-mobil { display: block; margin: 16px 0 0; }
  .formular .haken { order: 4; margin: 16px 0 0; }
  .formular .einwilligung { order: 5; margin-top: 10px; }
  .formular .hilfe { order: 6; }
  .absender { margin-top: 22px; }

  .zahlen.an .zahlen-spur { height: 270svh; }
  .zahlen.an .zahlen-buehne { justify-content: flex-start; padding: 64px 0 40px; }
  .zahlen-kopf h2 { font-size: 30px; }
  .zahlstand { display: block; padding: 36px 0; }
  .zahlstand .rechts { padding: 20px 0 0; }
  .zahlen.an .zahlstand .rechts { padding-top: 18px; }
  .zahl { font-size: 26vw; }

  .doppelseiten { gap: 32px; margin-top: 36px; }
  .buch { --pw: min(76vw, calc((100svh - 230px) * .75)); width: var(--pw); }
  .buch .rechts, .blatt { left: 0; }
  .buch .links, .buch .falz { display: none; }
  .blaetter-unten { flex-direction: column; gap: 10px; }
  .blaetter-unten .blaetter-cap { min-width: 0; text-align: center; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .hero-buehne { width: 100px; top: 40px; }
  .hero-titel { min-height: 136px; max-width: calc(100% - 104px); }
  .hero h1 { font-size: min(27px, 7.4vw); }
  .unterzeile { font-size: 14.5px; margin: 10px 0 12px; }
  .feld input { height: 48px; padding-top: 19px; }
  .knopf { height: 48px; margin-top: 8px; }
  .danach { margin-top: 8px; }
}

/* =================== Runde 2: Leseseite (danke.html) und 404 =================== */
.lese-kopf { padding: 120px 0 56px; }
.lese-kopf .raster { align-items: end; }
.lese-text { grid-column: 1 / 9; }
.lese-text .ausgabe { font-size: var(--t-neben); color: var(--leise-nacht); margin-bottom: 20px; letter-spacing: .02em; }
.lese-text .ausgabe [data-nr] { font-family: "Marcellus", Georgia, serif; font-size: 20px; color: var(--papier); letter-spacing: .04em; }
.haus-name-wert { color: var(--papier); }
.lese-kopf h1 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 18px; }
.lese-kopf .unterzeile { margin-bottom: 0; }
.lese-aktion { grid-column: 9 / 13; }
.lese-aktion .knopf { height: 54px; }
.heft { padding: 0 0 var(--luft); }
.heft-lesen { display: grid; gap: 56px; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); }
.bogen { margin: 0; }
.bogen-seiten { display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(250, 246, 223, .08); background: #191919; }
.bogen-seiten img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.bogen.nur-rechts .bogen-seiten, .bogen.nur-links .bogen-seiten { grid-template-columns: 1fr; max-width: 600px; }
.bogen .leer { display: none; }
.bogen figcaption { text-align: center; font-size: 13px; color: var(--leise-nacht); margin-top: 12px; }
.heft .folgefrage { margin: 56px 0; }
.danke-seite .nebenangebot { border-top: 1px solid var(--linie-nacht); }
.wahl { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; }
.wahl button { min-height: 52px; height: auto; padding: 10px 22px; line-height: 1.3; }
@media (max-width: 760px) {
  .lese-kopf { padding: 64px 0 32px; }
  .lese-aktion { margin-top: 22px; }
  .lese-kopf h1 { font-size: 32px; }
  .heft-lesen { gap: 28px; padding: 0; }
  .bogen-seiten { grid-template-columns: 1fr; gap: 10px; box-shadow: none; background: transparent; }
  .bogen figcaption { margin-top: 8px; }
  .heft .folgefrage { margin: 28px 0; }
  .wahl { grid-template-columns: 1fr 1fr; }
  .wahl button { padding: 10px 12px; }
  .wahl button:last-child { grid-column: auto; }
}

/* 404 */
.fehlerseite { min-height: 100svh; display: flex; align-items: center; padding: 140px 0 96px; }
.fehlerseite h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.012em; margin-bottom: 24px; }
.fehlerseite .unterzeile { margin-bottom: 36px; }
.fehlerseite .knopf { max-width: 360px; }

/* =================== Runde 3 =================== */
/* Formular: Knopf direkt unter den Feldern (Desktop wie mobil), Hilfe und Kaestchen danach */
.formular { display: flex; flex-direction: column; }
.formular .felder { order: 0; }
.formular .knopf { order: 1; margin-top: 10px; }
.formular .fehler { order: 2; }
.formular .danach { order: 3; margin-top: 10px; }
.formular .haken { order: 4; margin: 16px 0 0; }
.formular .einwilligung { order: 5; margin-top: 10px; }
.formular .hilfe { order: 6; margin: 8px 0 0; }
.formular .honig { order: 7; }
.fussnote { margin: 14px 0 0; }

/* Desktop-Hero gestrafft: Knopf-Unterkante <= 600 px bei 1440 x 900 */
.hero .innen { padding-top: 112px; }
.eyebrow { margin-bottom: 18px; }
.hero h1 { margin-bottom: 20px; }
.unterzeile { margin-bottom: 26px; }

/* Kleintext */
.haus-name + .im-heft, .im-heft { font-size: 13.5px; }
.zahl-quelle { font-size: 13px; }
.marke-seite { font-size: 13px; }

/* Zahlen: ein Bildschirm, ohne Festhalten */
.zahlen { padding: var(--luft) 0; }
.zahlen .raster { align-items: start; }
.zahlen-kopf { grid-column: 1 / 6; }
.zahlen-kopf h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.zahlen-liste { grid-column: 7 / 13; list-style: none; }
.zahlen-liste .zahlstand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: end; padding: 26px 0 30px; border-top: 1px solid rgba(201, 162, 75, .32); }
.zahlen-liste .zahlstand:first-child { border-top: 0; padding-top: 0; }
.zahlen-liste .marke-seite { grid-column: 1 / -1; margin: 0 0 6px; }
.zahlen-liste .zahl { font-size: clamp(64px, 6.6vw, 104px); }
.zahlen-liste .zahl-satz { font-size: 19px; line-height: 1.42; }
.zahlen-liste .zahl-quelle { grid-column: 1 / -1; margin-top: 14px; padding-top: 0; border-top: 0; }

/* Blaetterbuehne gross: Doppelseite >= 75 % der Breite */
.blaetter-spur { display: none; }
html.buehne .blaetter-spur { display: block; height: calc(100svh + 3 * 55svh); }
html.buehne .doppelseiten { display: none; }
html.buehne .einblick { padding-bottom: 0; }
.einblick-kopf { margin-bottom: 8px; }
.buch { --pw: min(38vw, calc((100svh - 140px) * .75)); width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.3333); }
.buch img:not([src]) { visibility: hidden; }
.blaetter-unten { position: relative; z-index: 5; margin-top: 26px; }
.buch .falz { opacity: 1; }

/* Fuer wen: Satz ohne Heft-Marke */
.fuerwen-nicht .koerper { grid-column: 1 / 8; }
.fuerwen .nicht { margin-top: 8px; }
.fuerwen .hotel { font-size: 15px; color: var(--leise-papier); margin-top: 6px; }

/* Schluss: Heftseite 3 rechts (die Probe), statt das Hero-Bild zu wiederholen */
.schluss-bild { width: min(40vw, 600px); right: var(--rand); top: 50%; bottom: auto; transform: translateY(-50%); aspect-ratio: 3 / 4; height: auto; }
.schluss-bild img { object-fit: cover; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px rgba(250, 246, 223, .1); }

/* Fester Knopf: Desktop dezent rechts unten, mobil als Leiste */
.fest-knopf { display: block; position: fixed; right: 32px; bottom: 28px; z-index: 20; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.fest-knopf.an { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.fest-knopf .knopf { width: auto; height: 48px; padding: 0 28px; background: var(--nacht); color: var(--papier); border: 1px solid rgba(250, 246, 223, .55); font-size: 14px; }
.fest-knopf .knopf:hover { background: var(--papier); color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .fest-knopf, .fest-knopf.an { transition: none; transform: none; } }

/* Formular als ruhige Ebene */
.ebene { border: 0; padding: 0; margin: auto; width: min(560px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; background: var(--nacht); color: var(--text-nacht); box-shadow: 0 0 0 1px rgba(250, 246, 223, .14); }
.ebene::backdrop { background: rgba(17, 17, 17, .84); }
.ebene-innen { position: relative; padding: 48px 40px 40px; }
.ebene h2 { font-size: 38px; line-height: 1.06; margin-bottom: 12px; padding-right: 40px; }
.ebene .unterzeile { font-size: 15px; margin-bottom: 26px; }
.ebene-zu { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.ebene-zu span, .ebene-zu span::after { position: absolute; left: 12px; top: 21px; width: 20px; height: 1px; background: var(--papier); transform: rotate(45deg); content: ""; }
.ebene-zu span::after { left: 0; top: 0; transform: rotate(90deg); }

/* ---------- Handy, Runde 3 ---------- */
@media (max-width: 760px) {
  .hero-buehne { position: relative; top: auto; right: auto; width: 100%; aspect-ratio: 1170 / 1220; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .hero-buehne img { object-position: 50% 50%; }
  .hero .innen { padding-top: 0; margin-top: -28px; }
  .hero-titel { min-height: 0; max-width: none; display: block; }
  .eyebrow { margin: 0 0 10px; }
  .hero h1 { font-size: min(34px, 8.8vw); text-wrap: balance; margin: 0 0 10px; }
  .unterzeile { font-size: 15.5px; margin: 0 0 16px; }

  .zahlen { padding: 64px 0; }
  .zahlen-kopf { position: static; margin-bottom: 28px; }
  .zahlen-kopf h2 { font-size: 30px; }
  .zahlen-liste .zahlstand { padding: 20px 0 22px; }
  .zahlen-liste .zahl { font-size: 19vw; }
  .zahlen-liste .zahl-satz { font-size: 16.5px; }
  .zahlen-liste .zahl-quelle { margin-top: 10px; }

  html.buehne .blaetter-spur { height: calc(100svh + 3 * 50svh); }
  .buch { --pw: min(84vw, calc((100svh - 190px) * .75)); width: var(--pw); }

  .fuerwen-nicht .koerper { grid-column: auto; }

  .schluss-bild { position: relative; width: calc(100% - 2 * var(--rand)); right: auto; top: auto; transform: none; margin: 0 var(--rand) 36px; height: auto; }
  .schluss { padding-top: 64px; }
  .schluss .innen { margin-top: 0; }

  .fest-knopf { left: 0; right: 0; bottom: 0; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom)); background: rgba(17, 17, 17, .96); border-top: 1px solid var(--linie-nacht); }
  .fest-knopf .knopf { width: 100%; height: 50px; background: var(--papier); color: var(--tinte); border: 0; font-size: 15px; }

  .ebene { width: 100%; max-width: none; margin: auto 0 0; max-height: 92svh; }
  .ebene-innen { padding: 40px var(--rand) calc(28px + env(safe-area-inset-bottom)); }
  .ebene h2 { font-size: 30px; }
}

/* Leseseite: Cover mit gesetzter Zeile, „Der nächste Schritt“ */
.bogen.nur-rechts figcaption { margin-top: 18px; }
.ausgabe-zeile { font-family: "Marcellus", Georgia, serif; font-size: 21px; line-height: 1.35; color: var(--papier); letter-spacing: .01em; }
.ausgabe-zeile .haus-name-wert { color: var(--papier); }
.naechster { padding: 72px 0; margin: 56px 0; }
.naechster .koerper { grid-column: 3 / 11; max-width: 680px; }
.naechster h2 { font-size: 40px; line-height: 1.06; margin-bottom: 28px; }
.stufen { list-style: none; border-top: 1px solid var(--tinte); }
.stufen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0 17px; border-bottom: 1px solid var(--linie-papier); }
.stufen .nr { font-family: "Marcellus", Georgia, serif; font-size: 22px; color: #8a6a22; line-height: 1.2; }
.stufen p { font-size: 16px; line-height: 1.55; color: var(--text-papier); }
.stufen b { font-weight: 500; color: var(--tinte); }
.stufen a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--gold-papier); overflow-wrap: anywhere; }
.kontakt { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; }
.kontakt img { width: 48px; height: 48px; object-fit: cover; flex: 0 0 48px; }
.kontakt-satz { font-family: "Marcellus", Georgia, serif; font-size: 20px; line-height: 1.4; color: var(--tinte); }
.kontakt-name { font-size: 14px; color: var(--leise-papier); margin-top: 4px; }
.wege { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 15px; }
.wege a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--gold-papier); padding: 4px 0; }
.sitzfrage { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie-papier); }
.sitzfrage h3 { font-size: 28px; line-height: 1.15; color: var(--tinte); margin: 4px 0 20px; }
.sitzfrage .einstieg { color: var(--text-papier); font-size: 15px; }
.danke-seite main > .naechster:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .naechster { padding: 48px 0; margin: 28px 0; }
  .naechster .koerper { grid-column: auto; }
  .naechster h2 { font-size: 30px; }
  .ausgabe-zeile { font-size: 18px; padding: 0 var(--rand); display: block; }
}
@media (max-width: 760px) {
  .zahlen-liste .zahlstand { display: block; }
  .zahlen-liste .zahl-satz { margin-top: 10px; }
}
@media (max-width: 760px) {
  .hero-buehne { aspect-ratio: auto; height: clamp(290px, 40svh, 420px); }
  .hero-buehne img { object-fit: cover; object-position: 50% 45%; }
  .hero .innen { margin-top: -60px; }
}
@media (max-width: 760px) {
  .hero-buehne img { object-position: 50% 30%; }
  .hero .innen { margin-top: -38px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .hero-buehne { height: 37svh; }
}

/* =================== Fix-Runde 4 =================== */
/* Formular: Begruendung direkt unter „Haus und Ort“, Rechtsblock ruhig */
.formular .felder { order: 0; }
.formular .hilfe { order: 1; margin: 8px 0 0; }
.formular .knopf { order: 2; margin-top: 12px; }
.formular .fehler { order: 3; }
.formular .danach { order: 4; margin-top: 10px; }
.formular .haken { order: 5; margin: 14px 0 0; font-size: 12.5px; color: var(--leise-nacht); }
.formular .einwilligung { order: 6; margin-top: 6px; }
.formular .honig { order: 7; }
.haken-box { flex-basis: 16px; width: 16px; height: 16px; margin-top: 2px; }
.haken input { width: 16px; height: 16px; }
.haken input:checked + .haken-box::after { left: 4px; top: 0; width: 5px; height: 10px; }

/* Schalter fuer die Lichtfahrt (Schleife > 5 s) */
.bewegung-schalter { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; border: 1px solid rgba(250, 246, 223, .35); background: rgba(17, 17, 17, .55); cursor: pointer; z-index: 2; }
.bewegung-schalter span, .bewegung-schalter span::after { position: absolute; top: 11px; width: 3px; height: 12px; background: var(--papier); content: ""; }
.bewegung-schalter span { left: 12px; }
.bewegung-schalter span::after { left: 7px; top: 0; }
.bewegung-schalter[aria-pressed="true"] span { left: 13px; top: 10px; width: 0; height: 0; background: transparent; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--papier); }
.bewegung-schalter[aria-pressed="true"] span::after { display: none; }
.hero-buehne video.laeuft { opacity: 1; }

/* Feine Papierkante fuer Heftseiten auf #111 */
.buch .seite, .blatt > div { box-shadow: 0 0 0 1px rgba(250, 246, 223, .16); background: #1b1b1a; }
.buch { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.doppel { box-shadow: 0 0 0 1px rgba(250, 246, 223, .16), 0 24px 48px -16px rgba(0, 0, 0, .6); }
.bogen-seiten { box-shadow: 0 0 0 1px rgba(250, 246, 223, .16); }
.schluss-bild img { box-shadow: 0 0 0 1px rgba(250, 246, 223, .16); }

/* Fester Knopf Desktop: schmale Leiste oben, verdeckt keinen Text dauerhaft */
@media (min-width: 761px) {
  .fest-knopf { left: 0; right: 0; top: 0; bottom: auto; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--rand);
    background: rgba(17, 17, 17, .94); border-bottom: 1px solid var(--linie-nacht); transform: translateY(-100%); }
  .fest-knopf.an { transform: none; }
  .fest-knopf .knopf { height: 40px; padding: 0 26px; background: var(--papier); color: var(--tinte); border: 0; font-size: 14px; }
  .fest-knopf .knopf:hover { background: #fff; }
}
.fest-marke { display: none; }
@media (min-width: 761px) { .fest-marke { display: block; } }

/* ---------- Handy: Hero verdichtet, Text nie auf dem Bild ---------- */
@media (max-width: 760px) {
  .kopf .innen { height: 40px; }
  .hero-buehne { margin-top: 40px; height: clamp(140px, calc(100svh - 600px), 290px); -webkit-mask-image: none; mask-image: none; }
  .hero-buehne img, .hero-buehne video { object-fit: contain; object-position: 50% 50%; }
  .hero .innen { margin-top: 10px; }
  .eyebrow { margin: 0 0 8px; }
  .hero h1 { margin: 0 0 8px; }
  .unterzeile { margin: 0 0 14px; }
  .bewegung-schalter { right: 14px; bottom: 6px; width: 32px; height: 32px; }
  .bewegung-schalter span { left: 10px; top: 9px; }
  .bewegung-schalter[aria-pressed="true"] span { left: 11px; top: 8px; }
}
@media (max-width: 760px) {
  .hero-buehne { height: clamp(140px, calc(100svh - 545px), 300px); overflow: hidden; }
  .hero-buehne img, .hero-buehne video { transform: scale(1.24); transform-origin: 50% 48%; }
}
@media (min-width: 761px) {
  /* Platz fuer die feste Leiste oben: das Heft liegt nie darunter */
  .blaetter-sticky { padding-top: 60px; }
  .buch { --pw: min(38vw, calc((100svh - 180px) * .75)); }
}
@media (max-width: 760px) {
  /* Bild und Video haben genau die Groesse des Hefts (4:5), nicht die ganze Buehne:
     kein Ueberlauf durch die Vergroesserung, und das Video wird kein groesseres LCP-Element als das Startbild */
  .hero-buehne img, .hero-buehne video { left: 50%; right: auto; width: auto; height: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    transform: translateX(-50%) scale(1.24); transform-origin: 50% 48%; }
}
/* feste Leisten deckend (Inhalt laeuft sauber darunter durch, nichts scheint durch) */
.fest-knopf { background: var(--nacht); }
@media (min-width: 761px) { .fest-knopf { background: var(--nacht); } }

/* Mini-Fix: kurze Handys (375x667) – Pointe endet mit Abstand ueber einer 298-px-Cookie-Leiste */
@media (max-width: 760px) and (max-height: 700px) {
  .kopf .innen { height: 36px; }
  .hero-buehne { margin-top: 36px; height: 118px; }
  .hero .innen { margin-top: 8px; }
  .eyebrow { margin-bottom: 6px; }
  .hero h1 { margin-bottom: 6px; }
}
/* Mini-Fix: flachere Perspektive, das drehende Blatt waechst nie ueber die Buehne */
.buch { perspective: 12000px; }
.blaetter-unten { margin-top: 44px; }
.schritt-kurz { border-top: 1px solid var(--linie-nacht); padding: 36px 0; }
.schritt-kurz p { font-size: 15px; color: var(--text-nacht); line-height: 1.8; }
.schritt-kurz a { color: var(--papier); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 75, .7); }
@media (max-width: 760px) and (min-height: 701px) { .hero-buehne { height: clamp(140px, calc(100svh - 552px), 300px); } }

/* ---------- Hero-Eröffnung V1 (10.10.2026): einmal, letztes Bild bleibt; bis zum Start deckt #111111 das Standbild ---------- */
.hero-buehne::before { content: ""; position: absolute; inset: 0; background: var(--nacht); opacity: 0; pointer-events: none; z-index: 1; transition: opacity .2s linear; }
html.eroeffnung .hero-buehne::before { opacity: 1; }
.hero-buehne video { z-index: 2; opacity: 0; transition: none; }
.hero-buehne video.laeuft { opacity: 1; }
.hero-buehne::after { z-index: 3; }
@media (max-width: 760px) {
  /* 4:5-Rahmen, object-fit: contain auf #111111 – Video und Standbild liegen pixelgleich */
  .hero-buehne img, .hero-buehne video { object-fit: contain; background: var(--nacht); }
}

/* ---------- Hero-Punkte (Fassung A, 1–5) + Quellenblock (10.10.2026, Vorschau) ---------- */
/* (Design 14.10.2026 c: alte .punkte- und .hero-punkte-Regeln entfernt – Hero-B8; die Punkte stehen im Block „Hero-Design“) */
.knopf-nochmal { display: none; text-decoration: none; }
@media (min-width: 761px) {
  .hero .innen { padding-top: clamp(96px, 12vh, 140px); }
  .eyebrow { margin-bottom: 18px; }
  .hero h1 { margin-bottom: 18px; }
  .unterzeile { margin-bottom: 36px; }
}
@media (max-width: 760px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-text > .hero-titel { order: 0; } .hero-text > .unterzeile { order: 1; }
  .hero-text > .formular { order: 2; } .hero-text > .hero-punkte { order: 3; } .hero-text > .absender { order: 4; }
  .knopf-nochmal { display: flex; margin-top: 16px; height: 52px; }
}
.quellen { padding: 44px 0 40px; border-top: 1px solid var(--linie-nacht); }
.quellen h2 { font-family: Poppins, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise-nacht); margin: 0 0 14px; }
.quellen ol { margin: 0; padding-left: 1.4em; max-width: 60em; }
.quellen li { font-size: 12.5px; line-height: 1.6; color: var(--leise-nacht); margin: 0 0 8px; hyphens: manual; }
.quellen li:target { color: var(--text-nacht); }
@media (min-width: 761px) {
  /* gestrafft, damit der Knopf bei 1440×900 über ~640 px bleibt; Punkte dürfen etwas breiter laufen als die Textspalte (das Heft beginnt weiter rechts) */
  .hero .innen { padding-top: clamp(64px, 7vh, 96px); }
  .eyebrow { margin-bottom: 14px; }
  .hero h1 { margin-bottom: 10px; }
  .unterzeile { margin-bottom: 28px; }
}

/* Phrasen-Bänder (14.10.2026, additiv): ruhige Marcellus-Sätze zwischen den Abschnitten, kein Kasten, kein Bild */
.phrase { background: var(--nacht); color: var(--papier); padding: clamp(56px, 7vw, 104px) 0; }
.phrase .innen { max-width: 1440px; }
.phrase .goldstrich { margin-bottom: 28px; }
.phrase p { font-family: "Marcellus", Georgia, serif; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.24; letter-spacing: -.005em; max-width: 24em; color: var(--papier); text-wrap: balance; hyphens: manual; margin: 0 0 clamp(22px, 2.4vw, 34px); }
.phrase p:last-child { margin-bottom: 0; }
.phrase.papier { background: var(--papier); color: var(--tinte); }
.phrase.papier p { color: var(--tinte); }
.phrase.papier .goldstrich { background: var(--gold-papier); }
.vorknopf { font-size: 14px; line-height: 1.35; font-weight: 500; letter-spacing: .01em; color: var(--papier); margin: 0 0 10px; }
.schluss .kuechenzeile { margin-top: -10px; }
@media (max-width: 760px) {
  .phrase { padding: 48px 0; }
  .phrase p { font-size: 22px; }
  .vorknopf { font-size: 13.5px; }
}
/* Niedrige Laptop-Fenster (bis 800 px Höhe): der Satz über dem Knopf entfällt im Hero, damit der Knopf über der Falte bleibt */
@media (min-width: 761px) and (max-height: 800px) {
  .hero .vorknopf { display: none; }
}
/* Satz direkt über dem Knopf: nach der Begründung (order 1), vor dem Knopf (order 2) */
.formular .vorknopf { order: 1; margin: 14px 0 -2px; }
/* Zwei Bänder hintereinander (Nacht auf Nacht): das zweite ohne eigenes Oben-Polster, damit kein doppelter Sprung entsteht */
.phrase:not(.papier) + .phrase:not(.papier) { padding-top: 0; }

/* ===== Hero-Design 14.10.2026 c (Owner: Unterzeile allgemein, alle Punkte offen unter dem Knopf) =====
   DOM-Reihenfolge = sichtbare Reihenfolge auf allen Fenstern: Titel, Unterzeile, Formular, Punkte, Absender (Hero-B6). */
.hero .hero-text { display: flex; flex-direction: column; }
.hero .hero-text > .unterzeile { max-width: none; margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: var(--text-nacht); }
.hero .hero-text .uz-schmerz { display: block; margin: 0 0 14px; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.26; letter-spacing: -.005em; color: var(--papier); }
.hero .hero-text .uz-schmerz > span { display: block; text-wrap: balance; }
.hero .hero-text .uz-beleg { display: block; position: relative; padding-top: 14px; font-size: 15px; line-height: 1.55; color: var(--text-nacht); text-wrap: balance; }
.hero .hero-text .uz-beleg::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 1px; background: var(--gold); }
.hero .hero-text > .hero-punkte { margin: 44px 0 0; }
.hero .hero-text .punkte-kopf { margin: 0 0 12px; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1.3; letter-spacing: 0; color: var(--papier); }
.hero .hero-text .pk { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie-nacht); }
.hero .hero-text .pk li { position: relative; margin: 0; padding: 10px 0 10px 28px; border-top: 1px solid var(--linie-nacht); font-size: 14.5px; line-height: 1.5; color: var(--text-nacht); hyphens: manual; }
.hero .hero-text .pk li::before { content: ""; position: absolute; left: 5px; top: 21px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
.hero .hero-text .pk li::after  { content: ""; position: absolute; left: 1px; top: 21px; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .38); }
.hero .hero-text > .absender { margin-top: 32px; }
@media (min-width: 761px) {
  .hero .hero-text .knopf-nochmal { display: none; }
}
@media (min-width: 761px) and (max-height: 830px) {
  .hero .hero-text > .unterzeile { margin-bottom: 24px; }
  .hero .hero-text .uz-schmerz { font-size: 22px; margin-bottom: 10px; }
  .hero .hero-text .uz-beleg { padding-top: 10px; }
}
@media (max-width: 760px) {
  .hero .hero-text > .unterzeile { margin: 12px 0 14px; font-size: 14.5px; line-height: 1.5; }
  .hero .hero-text .uz-schmerz { font-size: min(19.5px, 4.9vw); line-height: 1.25; margin-bottom: 10px; }
  .hero .hero-text .uz-beleg { padding-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .hero .hero-text > .hero-punkte { margin: 36px 0 0; }
  .hero .hero-text .pk li { padding: 10px 0 10px 26px; }
  .hero .hero-text .pk li::before { left: 4px; top: 21px; }
  .hero .hero-text .pk li::after  { left: 0;   top: 21px; }
  .hero .hero-text .knopf-nochmal { display: flex; margin-top: 22px; }
  .hero .hero-text > .absender { margin-top: 22px; }
  html .hero .hero-buehne { height: clamp(120px, calc(100svh - 650px), 240px); margin-top: 38px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  html .hero .hero-buehne { height: 118px; margin-top: 34px; }
  .hero .hero-text .uz-schmerz { font-size: 18.5px; margin-bottom: 8px; }
  .hero .hero-text .uz-beleg { padding-top: 8px; }
  .hero .hero-text .vorknopf { display: none; }
  /* Hero-B4: kurze Handys – die Begründung zum Feld „Haus und Ort“ rückt unter den Knopf, damit er über der Falte steht */
  .hero .formular .hilfe { order: 4; margin: 10px 0 0; }
}
/* ===== Design 14.10.2026 d (Prüfer + Conversion, Owner-Delegation): Zitate edel, Satzblöcke ruhig, Hero-Bild mitlaufend, Bühne größer ===== */

/* Knopf-Hover sichtbar: Goldrand (Prüfer 8) */
.knopf:hover, .fest-knopf .knopf:hover { background: #ebe3c4; color: var(--tinte); box-shadow: 0 0 0 2px var(--gold); }
.knopf.laedt:hover { box-shadow: none; }

/* Hero Desktop: das Heftbild läuft mit, solange die Punkteliste gelesen wird (Prüfer 2: tote Fläche rechts) */
@media (min-width: 761px) {
  .hero { overflow: clip; }
  .hero-buehne { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; margin-bottom: -100svh; }
}

/* Zitate: ein System für alle Stimmen – Marcellus, hängende Anführung, ruhiges Maß, Quelle klein in Poppins unter einer Haarlinie */
.stimme { margin: 0; }
.stimme blockquote p { font-family: "Marcellus", Georgia, serif; font-weight: 400; color: var(--tinte); text-indent: -.4em; hyphens: manual; text-wrap: pretty; }
.stimme figcaption { position: relative; margin-top: 18px; padding-top: 14px; }
.stimme figcaption::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: var(--gold-papier); }
.stimme cite { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--leise-papier); }
.stimme cite b { display: block; font-weight: 500; font-size: 13.5px; color: var(--tinte); letter-spacing: .01em; }

/* Fall-Block: links groß Brodersen, rechts Seitel und Kongresszentrum; beide Spalten gleich hoch, Quellzeilen auf einer Linie */
.stimmen { margin-top: clamp(88px, 8vw, 120px); align-items: stretch; }
.stimme-gross { grid-column: 1 / 9; display: flex; flex-direction: column; justify-content: space-between; padding-right: clamp(0px, 2.4vw, 40px); }
.stimme-gross blockquote p { font-size: clamp(26px, 2.25vw, 32px); line-height: 1.32; letter-spacing: -.006em; max-width: 21em; }
.stimme-gross figcaption { margin-top: 28px; }
@media (max-width: 1100px) {
  .stimme-gross { grid-column: 1 / 13; padding-right: 0; }
}
@media (max-width: 760px) {
  .stimmen { margin-top: 72px; }
  .stimme-gross blockquote p { font-size: 24px; line-height: 1.32; }
  .stimme-gross figcaption { margin-top: 20px; }
}

/* Elisa: ihr Satz im selben Maß wie die Zitate */
.elisa .zitat { font-size: clamp(21px, 1.75vw, 24px); line-height: 1.42; max-width: 26em; text-wrap: pretty; }

/* Satzblöcke (Bänder A–F): erster Satz trägt, die folgenden leiser und kleiner; ruhiges Maß, saubere Umbrüche */
.phrase { padding: clamp(80px, 8vw, 128px) 0; }
.phrase .innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.phrase .innen > * { grid-column: 1 / 10; }
.phrase .goldstrich { margin-bottom: 28px; }
.phrase p { font-size: clamp(19px, 1.45vw, 21px); line-height: 1.5; letter-spacing: 0; max-width: 36em; color: var(--text-nacht); text-wrap: pretty; margin: 0 0 .8em; }
.phrase p:first-of-type { font-size: clamp(25px, 2.1vw, 30px); line-height: 1.28; letter-spacing: -.004em; max-width: 28em; color: var(--papier); text-wrap: balance; margin-bottom: .7em; }
.phrase.papier p { color: var(--text-papier); }
.phrase.papier p:first-of-type { color: var(--tinte); }
.phrase p:last-child { margin-bottom: 0; }
.phrase.papier + .phrase.papier { padding-top: 0; }
.haeuser + .phrase.papier { padding-top: calc(var(--luft) * .25); }
.phrase.papier + .einblick.papier { padding-top: calc(var(--luft) * .35); }
.fragen + .phrase.papier { padding-top: calc(var(--luft) * .2); }
/* Für wen folgt jetzt auf den dunklen Elisa-Block: eigenes Oben-Polster statt Trennlinie */
.elisa + .fuerwen { padding-top: var(--luft); }
.elisa + .fuerwen .trenn { display: none; }
@media (max-width: 760px) {
  .phrase { padding: 64px 0; }
  .phrase .innen { display: block; }
  .phrase p { font-size: 17.5px; line-height: 1.5; }
  .phrase p:first-of-type { font-size: 22px; line-height: 1.3; }
}

/* Blätterbühne auf Papier: Heft wieder groß (Kleintext lesbar), weicher Schatten, Luft rundherum */
.einblick.papier { background: var(--papier); }
.einblick.papier .buch { box-shadow: 0 1px 2px rgba(17, 17, 17, .12), 0 22px 44px -14px rgba(17, 17, 17, .32), 0 60px 110px -34px rgba(17, 17, 17, .5); }
.einblick.papier .buch .seite, .einblick.papier .blatt > div { box-shadow: 0 0 0 1px rgba(17, 17, 17, .08); }
.einblick.papier .blaetter-cap, .einblick.papier .doppelseiten figcaption { color: var(--leise-papier); }
.einblick.papier .blaetter-punkte i { background: rgba(17, 17, 17, .2); }
.einblick.papier .blaetter-punkte i.an { background: var(--gold-papier); }
.einblick.papier .doppel { box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 24px 48px -16px rgba(17, 17, 17, .35); }
@media (min-width: 761px) {
  .einblick.papier .buch { --pw: min(36vw, 600px, calc((100svh - 220px) * .75)); }
  .einblick.papier .blaetter-unten { margin-top: 40px; }
}
@media (max-width: 760px) {
  .einblick.papier .buch { --pw: min(80vw, calc((100svh - 220px) * .75)); box-shadow: 0 1px 2px rgba(17, 17, 17, .12), 0 18px 36px -12px rgba(17, 17, 17, .32), 0 40px 70px -26px rgba(17, 17, 17, .45); }
}

/* Schmale Handys (Prüfer 10): Schmerzsatz je Satz eine Zeile, Luft unter dem Knopf */
@media (max-width: 380px) {
  .hero .hero-text .uz-schmerz { font-size: 4.7vw; }
}
@media (max-width: 760px) and (max-height: 700px) {
  html .hero .hero-buehne { height: 104px; margin-top: 32px; }
  .hero .formular .hilfe { margin-top: 14px; }
}
/* Satzblöcke: der tragende erste Satz bricht an Satzgrenzen, nicht mitten im Gedanken */
.phrase p .satz { display: block; text-wrap: balance; }

/* ===== Design 14.10.2026 e: Zitate verteilt (Sektion, Zitat, Sektion, Zitat), Prüfer-Befunde Runde 2 ===== */
/* Einzelne Stimme zwischen zwei Sektionen – gleiche Zitat-Typografie wie der Fall-Block */
.stimme-band { padding: calc(var(--luft) * .3) 0 calc(var(--luft) * .9); }
.stimme-einzel { grid-column: 1 / 9; }
.stimme-einzel blockquote p { font-size: clamp(26px, 2.25vw, 32px); line-height: 1.32; letter-spacing: -.006em; max-width: 21em; }
.stimme-einzel figcaption { margin-top: 28px; }
.stimme-band + .probe { padding-top: calc(var(--luft) * .3); }
.fuerwen + .stimme-band { padding-top: 0; }
@media (max-width: 760px) {
  .stimme-band { padding: 8px 0 64px; }
  .stimme-einzel blockquote p { font-size: 24px; }
  .stimme-einzel figcaption { margin-top: 20px; }
}
/* Hero: keine doppelte Haarlinie unter den Punkten – die Linie des Absenders schließt die Liste */
@media (min-width: 761px) {
  .hero .hero-text .pk { border-bottom: 0; }
  .hero .hero-text > .absender { margin-top: 0; }
}

/* Zahlen-Liste: Prozentzeichen klebt an der Zahl, Zahlspalte breiter (kein Überlauf in die Satzspalte) */
.zahlen-liste .zahlstand { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 36px; }
.zahlen-liste .zahl small.pz { font-size: .5em; letter-spacing: 0; margin: 0 0 0 .06em; vertical-align: baseline; }

/* Formular (Owner 15.10.): nur zwei Felder und Knopf; alles Erklärende und Rechtliche ein kleiner, ruhiger Block darunter */
.formular .felder { order: 0; }
.formular .knopf { order: 1; margin-top: 10px; }
.formular .fehler { order: 2; }
.formular .rechtlich { order: 3; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: #8d8b84; hyphens: manual; }
.formular .rechtlich .danach, .formular .rechtlich .einwilligung { display: inline; margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.formular .rechtlich .danach::after { content: " "; }
.formular .rechtlich a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.formular .honig { order: 7; }
.hero .formular .rechtlich { margin-top: 12px; }

/* ===================== Hero v3 · 15.10.2026 · Katalog-Hero =====================
   Haltung: Auktionskatalog, nicht Werbeseite. Ein Gold (Titel, Haarlinien), sonst Nacht und Papier.
   Goldener Schnitt: Textspalte = 38,2 % der Breite, Bildfeld = 61,8 %; Abstände in der Folge 8 · 13 · 21 · 34 · 55 · 89.
   Nur der Hero; alle Bereiche darunter bleiben unberührt. */
:root {
  --h3-gold-hell: #e8d199;
  --h3-haar: rgba(250, 246, 223, .12);
  --h3-haar-gold: rgba(201, 162, 75, .5);
}

/* Titel (Owner 15.10.2026, v3b): einfarbig Champagner-Papier, Marcellus 400, 17 % kleiner als v3 */
html .hero h1 { color: var(--papier); line-height: 1.04; letter-spacing: -.012em; font-weight: 400; text-wrap: nowrap; }

/* Eyebrow: Haarlinie davor, weit gesperrt */
html .hero .eyebrow { font-weight: 500; letter-spacing: .24em; color: var(--gold); }
html .hero .eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; margin: 0 14px 0 0; vertical-align: .32em; background: currentColor; }

/* Unterzeile: der Schmerzsatz in Marcellus, der Beleg als Marginalie mit senkrechter Goldlinie */
html .hero .hero-text .uz-schmerz { color: var(--papier); letter-spacing: -.004em; }
html .hero .hero-text .uz-beleg { padding: 0 0 0 21px; border-left: 1px solid var(--h3-haar-gold); color: var(--text-nacht); text-wrap: pretty; }
html .hero .hero-text .uz-beleg::before { display: none; }
/* Druck-Absätze (v3e): zwei Absätze Fließtext in Champagner-Papier, Randnotiz mit Goldlinie */
html .hero .hero-text .uz-beleg .druck { display: block; color: var(--papier); text-wrap: pretty; }
html .hero .hero-text .uz-beleg .druck + .druck { margin-top: .5em; }
.br-handy { display: none; }
html .hero .fn-marke { color: var(--h3-gold-hell); }

/* Formular: ruhige Kästen, Beschriftung als gesperrte Kapitälchen, Knopf mit Passepartout */
html .hero .feld { border-color: rgba(250, 246, 223, .24); background: rgba(250, 246, 223, .025); transition: border-color .2s, background-color .2s; }
html .hero .feld:hover { border-color: rgba(250, 246, 223, .4); }
html .hero .feld:focus-within { border-color: var(--h3-gold-hell); background: rgba(250, 246, 223, .04); }
html .hero .feld-name { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #a9a597; top: 10px; left: 16px; }
html .hero .feld input { padding-left: 16px; padding-right: 16px; }
html .hero .feld input::placeholder { color: #85837c; }
html .hero .formular .knopf { box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px rgba(201, 162, 75, .36); letter-spacing: .14em; font-size: 14px; font-weight: 500; transition: background-color .25s ease, box-shadow .25s ease; }
html .hero .formular .knopf .knopf-text::after { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 0 0 14px; vertical-align: .32em; background: currentColor; transition: width .25s ease; }
html .hero .formular .knopf:hover { background: #fffdf3; box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px var(--h3-gold-hell); }
html .hero .formular .knopf:hover .knopf-text::after { width: 30px; }
html .hero .formular .knopf:focus-visible { outline: 2px solid var(--h3-gold-hell); outline-offset: 7px; }
html .hero .formular .knopf.laedt { box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px var(--h3-haar-gold); }
html .hero .formular .rechtlich { color: #8f8c84; }

/* Acht Punkte (Owner 15.10.2026, v3c): römische Zählung I–VIII in Marcellus Gold, Text in Champagner-Papier.
   Zählung nur als Pseudo-Inhalt mit leerem Alternativtext ( / "" ): Screenreader lesen nur den Punkt, die Liste bleibt ul/li.
   Hängender Einzug: Folgezeilen stehen bündig unter der ersten Textzeile; Ziffer auf derselben Zeilenhöhe wie die erste Zeile. */
html .hero .hero-text .punkte-kopf { color: var(--papier); letter-spacing: 0; }
html .hero .hero-text .pk { counter-reset: pk; }
html .hero .hero-text .pk li { counter-increment: pk; border-top-color: var(--h3-haar); padding-left: 40px; color: var(--papier); }
html .hero .hero-text .pk li::after { display: none; }
html .hero .hero-text .pk li::before { content: counter(pk, upper-roman); content: counter(pk, upper-roman) / ""; left: 0; top: 10px; width: 32px; height: auto; margin: 0;
  border-radius: 0; background: none; font-family: "Marcellus", Georgia, serif; font-size: 13.5px; line-height: 21.75px; letter-spacing: .05em; color: var(--gold); }

/* Absender: rundes Bild im Goldring */
html .hero .absender { border-top-color: var(--h3-haar); }
html .hero .absender img { border-radius: 50%; box-shadow: 0 0 0 1px var(--nacht), 0 0 0 2px var(--h3-haar-gold); }

/* ---------------- Desktop ---------------- */
@media (min-width: 761px) {
  html .kopf .innen { max-width: 1680px; height: clamp(76px, 10vh, 104px); }
  /* Goldener Schnitt: Textspalte 38,2 % der Breite; Titel-Unterkante auf der 38,2-%-Linie der Höhe
     (Oben-Polster = 38,2svh − Titelhöhe 2 × 1,04 × --h1 − Abstand Eyebrow − zweizeilige Eyebrow 38 px) */
  /* v3c: längere Titelzeile („Ihr Haus wird empfohlen.“) – Größe zusätzlich an die Breite gebunden, damit zwei Zeilen
     nie ins Heft laufen (Zeile ≈ 11,9 em; endet höchstens bei ~46 % der Breite) */
  html .hero { --h1: min(clamp(46px, 4.15vw, 73px), 3.85vw, 66px); --eb-luft: clamp(18px, 3vh, 30px); }
  html .hero .innen { max-width: 1680px; padding-top: max(96px, calc(38.2svh - 2.08 * var(--h1) - var(--eb-luft) - 38px)); padding-bottom: 89px; }
  html .hero .hero-text { width: clamp(468px, 38.2vw, 680px); }
  html .hero .eyebrow { font-size: 11.5px; margin: 0 0 var(--eb-luft); }
  html .hero h1 { font-size: var(--h1); margin: 0 0 clamp(21px, 3.2vh, 34px); }
  html .hero .hero-text > .unterzeile { margin: 0 0 clamp(26px, 3.8vh, 40px); }
  html .hero .hero-text .uz-schmerz { font-size: clamp(22px, 1.75vw, 30px); line-height: 1.3; margin: 0 0 clamp(16px, 2.4vh, 24px); }
  html .hero .hero-text .uz-beleg { font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.62; max-width: none; }
  html .hero .feld input { height: 60px; padding-top: 25px; padding-bottom: 8px; }
  html .hero .formular .knopf { height: 60px; margin-top: 13px; }
  html .hero .formular .rechtlich { margin-top: 16px; font-size: 12px; max-width: 46em; }
  html .hero .hero-text > .hero-punkte { margin: 55px 0 0; }
  html .hero .hero-text .punkte-kopf { font-size: 20px; margin: 0 0 13px; }
  html .hero .hero-text .pk li { padding-top: 11px; padding-bottom: 11px; font-size: 14.5px; }
  html .hero .hero-text .pk li::before { top: 11px; }
  html .hero .hero-text > .absender { padding-top: 21px; }

  /* Bühne: Schiefer im Streiflicht – Heft schwebt, Ränder laufen ins Schwarz, Text bleibt auf ruhigem Grund */
  html .hero .hero-buehne::after {
    background:
      radial-gradient(ellipse 46% 62% at 72% 50%, rgba(255, 226, 168, .05) 0%, rgba(255, 226, 168, 0) 70%),
      linear-gradient(90deg, var(--nacht) 0%, rgba(17,17,17,.94) 27%, rgba(17,17,17,.55) 38.2%, rgba(17,17,17,0) 50%),
      linear-gradient(180deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,0) 12%),
      linear-gradient(270deg, rgba(17,17,17,.6) 0%, rgba(17,17,17,0) 9%),
      linear-gradient(0deg, var(--nacht) 0%, rgba(17,17,17,0) 16%);
  }
}
/* Breite Bildschirme: Bildfeld bleibt beim Text, keine schwarze Leere links */
@media (min-width: 1680px) {
  html .hero .hero-buehne img, html .hero .hero-buehne video { object-position: 82% 50%; }
}
/* Niedrige Laptop-Fenster: Rhythmus enger, Knopf sicher über der Falte */
@media (min-width: 761px) and (max-height: 800px) {
  html .hero { --h1: min(clamp(45px, 4vw, 58px), 3.85vw); }
  /* Fensterhöhe ≤ 800 px: nur Absatz 1 im Hero, damit der Knopf in der Falte bleibt */
  html .hero .hero-text .uz-beleg .druck-2 { display: none; }
  html .hero .hero-text .uz-schmerz { font-size: 22px; }
  html .hero .hero-text .uz-beleg { font-size: 14.5px; line-height: 1.58; }
  html .hero .feld input { height: 56px; padding-top: 23px; }
  html .hero .formular .knopf { height: 56px; }
}

/* Schmale, hohe Fenster (Tablet 761–1100 px, alles schmaler als 3:2): das Heft steht ganz im Bildfeld rechts der
   Textspalte, auf das Heft eingepasst und senkrecht mittig; unter Text liegt nur Nacht, kein Heftmotiv.
   Heft im Bild: Mitte bei 73,75 % der Bildbreite, Breite 39 % → Bildbreite = Feldbreite × 2,73 (Heft füllt 85 %, Luft zu beiden Seiten). */
@media (min-width: 761px) and (max-aspect-ratio: 37/25) {
  html .hero { --spalte: calc(clamp(20px, 6.667vw, 96px) + clamp(468px, 38.2vw, 680px) + 24px); }
  html .hero .hero-buehne img, html .hero .hero-buehne video {
    --bw: min(calc((100% - var(--spalte)) * 2.73), 153svh);
    inset: auto; top: 50%; left: calc(var(--spalte) + (100% - var(--spalte)) / 2 - .7375 * var(--bw)); width: var(--bw); height: auto;
    aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; transform: translateY(-50%);
  }
  html .hero .hero-buehne::after {
    background:
      linear-gradient(90deg, var(--nacht) 0, var(--nacht) calc(var(--spalte) - 40px), rgba(17,17,17,0) calc(var(--spalte) + 4px)),
      linear-gradient(180deg, var(--nacht) 0, rgba(17,17,17,0) calc(50% - 22svh)),
      linear-gradient(0deg, var(--nacht) 0, rgba(17,17,17,0) calc(50% - 22svh)),
      linear-gradient(270deg, rgba(17,17,17,.6) 0%, rgba(17,17,17,0) 6%);
  }
}

/* ---------------- Handy ---------------- */
@media (max-width: 760px) {
  html .kopf .innen { height: 44px; }
  /* Heft oben: größer, ohne harte Bildkanten – das Bild verläuft oval ins Schwarz */
  html .hero .hero-buehne { margin-top: 44px; height: clamp(140px, calc(100svh - 596px), 268px); overflow: visible; }
  html .hero .hero-buehne img, html .hero .hero-buehne video {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%);
    transform: translateX(-50%) scale(1.22); transform-origin: 50% 50%;
  }
  html .hero .innen { margin-top: 13px; padding-bottom: 55px; }
  html .hero .eyebrow { font-size: 11px; letter-spacing: .15em; margin: 0 0 13px; white-space: nowrap; }
  html .hero .eyebrow::before { display: none; }
  /* v3c: drei Zeilen – „Ihr Haus wird / empfohlen. / Oder gar nicht erwähnt.“ (br-handy) */
  html .hero h1 { font-size: min(30px, 7.4vw); margin: 0 0 13px; text-wrap: wrap; }
  .br-handy { display: inline; }
  html .hero .hero-text > .unterzeile { margin: 0 0 21px; }
  html .hero .hero-text .uz-schmerz { font-size: min(19.5px, 5vw); line-height: 1.28; margin: 0 0 13px; }
  html .hero .hero-text .uz-beleg { padding-left: 13px; font-size: 14px; line-height: 1.52; }
  html .hero .felder { gap: 8px; }
  html .hero .feld input { height: 54px; padding-top: 22px; padding-bottom: 6px; }
  html .hero .feld-name { top: 9px; left: 14px; font-size: 10px; }
  html .hero .feld input { padding-left: 14px; padding-right: 14px; }
  html .hero .formular .knopf { height: 54px; margin-top: 13px; }
  html .hero .hero-text > .hero-punkte { margin: 55px 0 0; }
  html .hero .hero-text .pk li { padding-left: 36px; }
  html .hero .hero-text .pk li::before { width: 30px; }
  html .hero .hero-text .knopf-nochmal { box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px var(--h3-haar-gold); letter-spacing: .14em; font-size: 14px; margin-top: 34px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  html .hero .hero-buehne { margin-top: 36px; height: clamp(110px, calc(100svh - 505px), 165px); }
  html .hero .innen { margin-top: 8px; }
  html .hero .eyebrow { margin-bottom: 8px; }
  html .hero h1 { font-size: min(26.5px, 7.15vw); margin-bottom: 8px; }
  html .hero .hero-text > .unterzeile { margin-bottom: 13px; }
  html .hero .hero-text .uz-schmerz { font-size: min(17.5px, 4.7vw); margin-bottom: 8px; }
  html .hero .hero-text .uz-beleg { font-size: 13px; line-height: 1.48; }
  html .hero .feld input { height: 48px; padding-top: 19px; padding-bottom: 4px; }
  html .hero .feld-name { top: 7px; }
  html .hero .formular .knopf { height: 48px; margin-top: 10px; }
}
/* Zweiter Knopf unter den Punkten (Handy): gleiche Haarlinie wie der Formular-Knopf */
html .hero .hero-text .knopf-nochmal::after { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 0 0 14px; background: currentColor; }
/* Schmale Handys: Eyebrow bleibt 11 px und einzeilig, nur die Sperrung wird enger */
@media (max-width: 380px) { html .hero .eyebrow { letter-spacing: .1em; } }
/* Kleine Handys (Höhe ≤ 667 px, Regel bis 700 px): nur Absatz 1 im Hero, damit der Knopf in der Falte bleibt */
@media (max-width: 760px) and (max-height: 700px) {
  html .hero .hero-text .uz-beleg .druck-2 { display: none; }
}
/* Tablet-Modus (schmaler als 3:2): Titel passt zweizeilig in die 468-px-Spalte */
@media (min-width: 761px) and (max-aspect-ratio: 37/25) {
  html .hero { --h1: 38px; }
}
/* Handy: Heftband etwas flacher, Absatzabstand enger, Knopf bleibt in der Falte */
@media (max-width: 760px) and (min-height: 761px) {
  html .hero .hero-buehne { margin-top: 40px; height: clamp(140px, calc(100svh - 668px), 240px); }
  html .hero .hero-text .uz-beleg .druck + .druck { margin-top: .35em; }
}

/* ===== v3d · 15.10.2026: Eyebrow als Kicker, Druck-Block breit ===== */
/* Eyebrow zweizeilig: oben der Kicker aus dem Heft-Claim (Gold, weit gesperrt, Haarlinie davor),
   darunter kleiner die Erkennung, bündig unter dem Kicker-Text */
html .hero .eyebrow .eb-kicker { display: inline; }
html .hero .eyebrow .eb-trenn { display: none; }
html .hero .eyebrow .eb-fuer { display: block; margin-top: 4px; padding-left: 48px; font-size: 10px; letter-spacing: .22em; color: #b8995a; }
/* Druck-Block: volle Breite der Textspalte, Umbrüche ohne Wort-Witwen */
html .hero .hero-text .uz-beleg { max-width: none; }
html .hero .hero-text .uz-beleg .druck { text-wrap: pretty; max-width: none; }
@media (max-width: 760px) {
  html .hero .eyebrow { white-space: normal; letter-spacing: .1em; }
  html .hero .eyebrow .eb-kicker { display: block; text-wrap: balance; }
  html .hero .eyebrow .eb-fuer { padding-left: 0; margin-top: 3px; font-size: 11px; letter-spacing: .12em; }
  /* Handy (auch 390×844): Absatz 2 hat in der Falte keinen Platz */
  html .hero .hero-text .uz-beleg .druck-2 { display: none; }
}

/* Liste mit 17 Punkten: römische Ziffern bis XVII brauchen mehr hängenden Einzug (Owner 15.10.: nichts wegnehmen) */
html .hero .hero-text .pk li { padding-left: 56px; }
html .hero .hero-text .pk li::before { width: 48px; white-space: nowrap; }
@media (max-width: 760px) {
  html .hero .hero-text .pk li { padding-left: 52px; }
  html .hero .hero-text .pk li::before { width: 44px; }
}

/* ===== v3e · 15.10.2026 (Owner): Titel nochmals 20 % kleiner, Druck als zwei Absätze, Eyebrow zwei gleichwertige Zeilen =====
   Rhythmus 8 · 13 · 21 · 34 · 55: Eyebrow→Titel 21, Titel→Unterzeile 21, Unterzeile→Absätze 21, Absatz→Absatz 13, Absätze→Formular 34
   (Handy: 13 · 13 · 13 · 13 · 21). Titel-Unterkante bleibt auf der 38,2-%-Linie (Formel im Desktop-Block, --eb-luft = 21 px). */
html .hero .eyebrow .eb-fuer { font-size: inherit; letter-spacing: inherit; color: inherit; font-weight: inherit; margin-top: 4px; }
html .hero .hero-text .uz-beleg .druck { font-size: inherit; line-height: inherit; }
html .hero .hero-text .uz-beleg .druck + .druck { margin-top: 13px; }
.br-handy { display: none; }
@media (min-width: 761px) {
  html .hero { --h1: min(clamp(37px, 3.32vw, 58px), 3.08vw, 53px); --eb-luft: 21px; }
  html .hero h1 { margin: 0 0 21px; }
  html .hero .hero-text .uz-schmerz { font-size: clamp(18px, 1.4vw, 24px); margin: 0 0 21px; }
  html .hero .hero-text > .unterzeile { margin: 0 0 34px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  html .hero { --h1: min(clamp(36px, 3.2vw, 46px), 3.08vw); }
  html .hero .hero-text .uz-schmerz { font-size: 18px; }
}
@media (min-width: 761px) and (max-aspect-ratio: 37/25) {
  html .hero { --h1: 30px; }
}
@media (max-width: 760px) {
  html .hero h1 { font-size: min(24px, 5.9vw); margin: 0 0 13px; }
  html .hero .eyebrow .eb-fuer { padding-left: 0; margin-top: 3px; }
  html .hero .hero-text .uz-schmerz { font-size: min(16px, 4.1vw); margin: 0 0 13px; }
  html .hero .hero-text > .unterzeile { margin: 0 0 21px; }
  html .hero .hero-text .uz-beleg .druck + .druck { margin-top: 13px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  html .hero h1 { font-size: min(21px, 5.7vw); margin-bottom: 8px; }
  html .hero .hero-text .uz-schmerz { font-size: min(14.5px, 3.8vw); margin-bottom: 8px; }
  html .hero .hero-text > .unterzeile { margin-bottom: 13px; }
}