/* ===================== Conversion v4 · 15.10.2026 · VORSCHAU (nur lokal) =====================
   Additiv nach seite.css. Haltung wie Hero v3: Nacht und Papier, ein Gold, Marcellus + Poppins,
   Goldener Schnitt 38,2 / 61,8, Abstände 8 · 13 · 21 · 34 · 55 · 89. */

/* ---------- Hero: Titel dreizeilig („Das Haus gegenüber / kocht nicht besser. / Es wird nur zuerst genannt.“) ---------- */
@media (min-width: 761px) {
  /* längste Zeile ≈ 27 Zeichen ≈ 13,4 em → Größe an die Breite gebunden, damit nichts ins Heft läuft */
  html .hero { --h1: min(clamp(34px, 2.7vw, 50px), 2.7vw, 46px); }
  /* Titel-Unterkante bleibt auf der 38,2-%-Linie: drei Zeilen = 3,12 × --h1 */
  html .hero .innen { padding-top: max(89px, calc(38.2svh - 3.12 * var(--h1) - var(--eb-luft) - 38px)); }
  html .hero .hero-text .uz-schmerz { font-size: clamp(17px, 1.3vw, 22px); }
}
@media (min-width: 761px) and (max-height: 800px) {
  html .hero { --h1: min(clamp(32px, 2.6vw, 42px), 2.6vw); }
}
@media (min-width: 761px) and (max-aspect-ratio: 37/25) {
  html .hero { --h1: 28px; }
  /* Tablet (Prüfer 15.10., 1024×768): Text stieß ans Heftbild → Bildfeld 48 px weiter rechts, Heft etwas kleiner */
  html .hero { --spalte: calc(clamp(20px, 6.667vw, 96px) + clamp(468px, 38.2vw, 680px) + 72px); }
  html .hero .hero-buehne img, html .hero .hero-buehne video { --bw: min(calc((100% - var(--spalte)) * 2.3), 140svh); }
}
@media (max-width: 760px) {
  html .hero h1 .br-desk { display: none; }
  html .hero h1 { font-size: min(23px, 5.8vw); margin-bottom: 8px; text-wrap: balance; }
  /* Knopf-Unterkante ≤ 780 px bei 390×844 (Prüfer 15.10.): Heftband flacher, Rhythmus 8 · 13 */
  html .hero .hero-buehne { margin-top: 44px; height: clamp(96px, calc(100svh - 730px), 200px); }
  html .hero .innen { margin-top: 8px; }
  html .hero .eyebrow { margin-bottom: 8px; }
  html .hero .hero-text .uz-schmerz { margin-bottom: 8px; }
  html .hero .hero-text > .unterzeile { margin-bottom: 13px; }
  html .hero .hero-text .uz-beleg { font-size: 13.5px; line-height: 1.5; }
}

/* Niedrige Handys (≤ 700 px hoch, z. B. 360×640): Einstiegsabsatz aus, damit der Knopf in der Falte bleibt (wie v3 mit Absatz 2) */
@media (max-width: 760px) and (max-height: 700px) {
  html .hero .hero-text .uz-beleg .druck-1 { display: none; }
  html .hero .hero-text .uz-beleg { display: none; }
}

/* ---------- Formular: Microcopy über den Feldern ---------- */
.formular .vorfeld { order: -1; margin: 0 0 13px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.papier .formular .vorfeld { color: var(--gold-papier); }
@media (max-width: 760px) {
  /* Lesbarkeit Handy (Prüfer 15.10.): Zeile über den Feldern und Feldnamen ≥ 12 px */
  .formular .vorfeld { font-size: 12px; letter-spacing: .06em; margin-bottom: 8px; text-wrap: balance; }
  html .hero .feld-name, html .feld-name { font-size: 12px; letter-spacing: .1em; top: 7px; }
  html .hero .feld input, html .feld input { padding-top: 24px; }
}

/* ---------- ② 17 Dinge in zwei Reihen ---------- */
.siebzehn { background: var(--nacht); color: var(--text-nacht); padding: 89px 0 89px; border-top: 1px solid rgba(201, 162, 75, .32); }
.siebzehn-kopf { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.15; color: var(--papier); margin: 0 0 55px; max-width: 22em; text-wrap: balance; }
.siebzehn-zahl { color: var(--gold); }
.reihe { display: grid; grid-template-columns: 38.2fr 61.8fr; column-gap: 34px; padding: 34px 0 34px; border-top: 1px solid rgba(250, 246, 223, .14); }
.reihe:last-of-type { border-bottom: 1px solid rgba(250, 246, 223, .14); }
.reihe-titel { font-family: "Marcellus", Georgia, serif; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; color: var(--papier); max-width: 14em; text-wrap: balance; }
.reihe-nr { margin-top: 13px; font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--gold); }
.lauf { list-style: none; margin: 0; padding: 0; counter-reset: lauf; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.85; color: var(--papier); text-wrap: pretty; hyphens: manual; }
.lauf-2 { counter-reset: lauf 9; }
.lauf li { display: inline; counter-increment: lauf; }
.lauf li::before { content: counter(lauf, upper-roman); content: counter(lauf, upper-roman) / ""; font-family: "Marcellus", Georgia, serif; font-size: .9em; letter-spacing: .05em; color: var(--gold); margin-right: .5em; }
.lauf li:not(:last-child)::after { content: "·"; content: "·" / ""; color: rgba(201, 162, 75, .7); margin: 0 .7em 0 .6em; }
.siebzehn-fuss { display: grid; grid-template-columns: 38.2fr 61.8fr; column-gap: 34px; margin-top: 34px; }
.siebzehn-fuss .knopf { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 56px; padding: 0 34px; letter-spacing: .14em; font-size: 14px;
  box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px rgba(201, 162, 75, .36); }
@media (max-width: 760px) {
  .siebzehn { padding: 55px 0; }
  .siebzehn-kopf { margin-bottom: 34px; font-size: 26px; }
  .reihe { grid-template-columns: 1fr; row-gap: 13px; padding: 21px 0; }
  .reihe-nr { margin-top: 8px; }
  .lauf { font-size: 15px; line-height: 1.75; }
  .siebzehn-fuss { grid-template-columns: 1fr; margin-top: 21px; }
  .siebzehn-fuss .knopf { grid-column: 1; justify-self: stretch; width: 100%; height: 52px; }
}

/* ---------- ③ Fall-Block: neue Etiketten ---------- */
.haus-wert .was.gespraech { margin-top: 6px; font-size: 13.5px; color: var(--leise-papier, #6b6960); font-style: italic; }

/* ---------- ⑦ Manifest: ein Band statt sechs ---------- */
.manifest { padding: var(--luft) 0; }
.manifest-auf { font-family: "Marcellus", Georgia, serif; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.22; color: var(--tinte); max-width: 22em; margin: 0 0 55px; text-wrap: balance; }
.manifest-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 55px; }
.manifest-liste li { border-top: 1px solid rgba(17, 17, 17, .2); padding: 21px 0 26px; font-size: 15.5px; line-height: 1.6; color: var(--text-papier); hyphens: manual; text-wrap: pretty; }
.manifest-liste b { display: block; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.3; color: var(--tinte); margin-bottom: 8px; text-wrap: balance; }
.manifest-schluss { margin: 34px 0 0; padding-top: 34px; border-top: 1px solid var(--gold-papier); font-family: "Marcellus", Georgia, serif; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; color: var(--tinte); max-width: 28em; text-wrap: balance; }
@media (max-width: 760px) {
  .manifest { padding: 55px 0; }
  .manifest-auf { margin-bottom: 34px; font-size: 24px; }
  .manifest-liste { grid-template-columns: 1fr; }
  .manifest-liste li { padding: 16px 0 18px; font-size: 15px; }
  .manifest-schluss { font-size: 21px; margin-top: 21px; padding-top: 21px; }
}