/* ===================== Mobile v5 · 16.10.2026 =====================
   Additiv nach seite.css + v4.css. Wirkt NUR bis 760 px Breite (Handy hoch und kleines Handy quer, z. B. 667×375).
   Breitere Fenster – auch Handy quer ab 761 px (844×390, 932×430) – zeigen unverändert v4; JS nutzt dieselbe Grenze (matchMedia).
   Leitsätze: Heft im Hochformat als Bühne · Fließtext (Absätze, Listen, Fall-Erklärungen, Kapitel) ≥ 16 px; Beschriftungen,
   Seitenverweise („Heft, Seite …“, „Ausgangslage … im Heft“), Bildunterschriften, Namenszeilen, Quellen und Rechtstext 12–15 px ·
   Tap-Ziele ≥ 44 px (Inline-Links über unsichtbare Trefferfläche) · Daumenzone unten ·
   Rhythmus 8 · 13 · 21 · 34 · 55 · Nacht und Papier, ein Gold, Marcellus + Poppins. Wortlaut unverändert. */

@media (max-width: 760px) {
  /* ---------- ① Hero: Heft im Hochformat ---------- */
  html body .kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 6; }
  html body .kopf .innen { height: 52px; }
  html body .kopf .marke { color: var(--papier); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

  /* Bühne: volle Breite, Hochformat (Breite × 1,18), höchstens 58 % der Höhe – kleine Geräte werden annähernd quadratisch */
  html body .hero .hero-buehne { position: relative; top: auto; right: auto; margin: 0; width: 100%; height: min(calc(100vw * 1.18), 58svh); aspect-ratio: auto; overflow: hidden; z-index: 0;
    -webkit-mask-image: none; mask-image: none; }
  html body .hero .hero-buehne img, html body .hero .hero-buehne video { position: absolute; inset: 0; left: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: 50% 40%; transform: none; -webkit-mask-image: none; mask-image: none; background: var(--nacht); }
  /* Verlauf: oben Ruhe für die Wortmarke, unten weich ins Schwarz (Text beginnt im Schiefer, nie auf dem Heft) */
  html body .hero .hero-buehne::after { display: block; background:
    linear-gradient(0deg, var(--nacht) 0%, rgba(17, 17, 17, .9) 8%, rgba(17, 17, 17, 0) 26%),
    linear-gradient(180deg, rgba(17, 17, 17, .7) 0%, rgba(17, 17, 17, 0) 13%); }
  html body .hero .bewegung-schalter { bottom: 48px; }

  html body .hero .innen { position: relative; z-index: 2; margin-top: -34px; padding-top: 0; padding-bottom: 55px; }
  html body .hero .hero-text { display: flex; flex-direction: column; }
  /* Lesefolge Daumen: Titel → Schmerzsatz → Formular → Beleg → Absender (Wortlaut gleich, nur Reihenfolge) */
  html body .hero .hero-text > .unterzeile { display: contents; }
  html body .hero .hero-text .hero-titel { order: 1; }
  html body .hero .hero-text .uz-schmerz { order: 2; display: block; }
  html body .hero .hero-text > .formular { order: 3; }
  html body .hero .hero-text .uz-beleg { order: 4; display: block; }
  html body .hero .hero-text > .absender { order: 5; }

  html body .hero .eyebrow { font-size: 12px; letter-spacing: .12em; line-height: 1.5; margin: 0 0 13px; }
  html body .hero .eyebrow .eb-fuer { margin-top: 2px; color: #b8995a; }
  html body .hero h1 { font-size: min(28px, 7.15vw); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 13px; text-wrap: balance; }
  html body .hero .hero-text .uz-schmerz { font-size: min(18px, 4.6vw); line-height: 1.36; margin: 0 0 21px; color: var(--papier); }
  html body .hero .hero-text .uz-beleg { margin: 34px 0 0; padding-left: 16px; font-size: 16px; line-height: 1.6; }
  html body .hero .hero-text .uz-beleg .druck-1 { display: block; }
  html body .hero .hero-text > .absender { margin-top: 34px; }
  html body .hero .absender p span { font-size: 14px; line-height: 1.5; }

  /* ---------- Formulare (alle drei): Daumenzone, Feldschrift 16 px (kein iOS-Zoom), Fehler sichtbar ---------- */
  html body .formular .vorfeld { font-size: 12px; letter-spacing: .08em; margin-bottom: 8px; }
  html body .feld input, html body .hero .feld input { height: 58px; font-size: 16px; padding-top: 24px; padding-bottom: 6px; }
  html body .feld-name, html body .hero .feld-name { font-size: 12px; top: 9px; }
  html body .formular .knopf, html body .hero .formular .knopf { height: 56px; margin-top: 13px; font-size: 15px; letter-spacing: .12em; }
  /* Meldung ÜBER den Feldern (nach der Zeile darüber): Meldung und Feld stehen zusammen im Bild, auch mit Tastatur */
  html body .formular .fehler { order: -1; margin: 0 0 13px; padding: 10px 12px; font-size: 15px; line-height: 1.4; border-left: 2px solid #e0a46a; background: rgba(224, 164, 106, .08); }
  html body .papier .formular .fehler { border-left-color: #a5451b; background: rgba(165, 69, 27, .06); }
  html body .feld.falsch { border-color: #e0a46a; }
  html body .formular .rechtlich { margin-top: 13px; font-size: 13px; line-height: 1.55; }
  /* Fußnoten-Zeichen und Datenschutz-Link: Trefferfläche ≥ 44 px ohne Satzänderung */
  html body .fn-marke { position: relative; display: inline-block; padding: 0 2px; }
  html body .fn-marke::after { content: ""; position: absolute; left: -16px; right: -16px; top: -14px; bottom: -14px; }
  html body .formular .rechtlich a { position: relative; }
  html body .formular .rechtlich a::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }

  /* ---------- ② 17 Dinge: Liste mit hängender Ziffer, alle 17 auf einen Blick, nichts zum Eintippen ---------- */
  html body .siebzehn { padding: 55px 0 55px; }
  html body .siebzehn-kopf { font-size: 27px; line-height: 1.15; margin-bottom: 34px; }
  html body .reihe { padding: 21px 0 8px; row-gap: 8px; }
  html body .reihe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; }
  html body .reihe-titel { font-size: 20px; line-height: 1.3; max-width: none; }
  html body .reihe-nr { margin: 0; flex: 0 0 auto; font-size: 12px; letter-spacing: .14em; }
  html body .lauf { font-size: 16px; line-height: 1.42; text-wrap: pretty; }   /* v6: pretty – keine Ein-Wort-Zeilen am Punktende */
  html body .lauf li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: 9px 0 10px; border-top: 1px solid rgba(250, 246, 223, .1); }
  html body .lauf li:first-child { border-top: 0; }
  html body .lauf li::before { margin: 0; font-size: 15px; letter-spacing: .04em; }
  html body .lauf li:not(:last-child)::after { content: none; }
  html body .siebzehn-fuss { margin-top: 21px; }

  /* ---------- ③ Fälle: kompakter, Zahl führt, Beleg leise ---------- */
  html body .haus-zeile { padding: 26px 0 26px; }
  html body .haus-name h3 { font-size: 21px; }
  html body .haus-wert { margin-top: 13px; }
  html body .wert { font-size: min(48px, 12.3vw); }
  html body .haus-wert .was { font-size: 16px; line-height: 1.5; margin-top: 8px; }
  html body .haus-wert .vorzeile { font-size: 14px; }
  html body .haus-zweit { margin-top: 13px; padding-top: 13px; }
  html body .haus-zweit .wert2 { font-size: 24px; }
  html body .haus-zweit .was { font-size: 16px; line-height: 1.4; }
  html body .haus-wert .was.gespraech { font-size: 16px; }
  html body .im-heft { padding-top: 10px; font-size: 13px; }
  html body .stimme-gross blockquote p { font-size: 23px; line-height: 1.3; }

  /* ---------- Stimmen: weniger Leerraum ---------- */
  html body .stimme-band { padding: 34px 0 34px; }
  html body .stimme-band + .probe { padding-top: 21px; }

  /* ---------- ⑦ Manifest: ruhiger, Fließtext 16 px ---------- */
  html body .manifest-liste li { font-size: 16px; line-height: 1.55; padding: 16px 0 18px; }
  html body .manifest-liste b { font-size: 19px; }

  /* ---------- ⑧ Elisa: Bild als Hochformat-Porträt, nicht höher als 70 % des Bildschirms ---------- */
  html body .elisa-bild img { height: min(calc(100vw * 1.25), 70svh); width: 100%; object-fit: cover; object-position: 50% 18%; }

  /* ---------- ⑨ Für wen + Kapitel ---------- */
  html body .fuerwen .koerper p { font-size: 16px; }
  html body .kapitel .unter { font-size: 16px; line-height: 1.5; }
  html body .stimme figcaption cite { font-size: 14px; }

  /* ---------- ⑩ Einblick: Wischstreifen statt festgehaltener Scroll-Bühne ---------- */
  html body .einblick.wisch .blaetter-spur { display: none !important; }
  html body .einblick.wisch .doppelseiten { display: flex !important; gap: 16px; margin: 21px 0 0; padding: 8px 11vw 13px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 11vw; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html body .einblick.wisch .doppelseiten::-webkit-scrollbar { display: none; }
  html body .einblick.wisch .doppelseiten li { flex: 0 0 78vw; scroll-snap-align: center; scroll-snap-stop: always; }
  html body .einblick.wisch .doppel { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
  html body .einblick.wisch .doppel img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html body .einblick.wisch .doppel img:not(.m-seite) { display: none; }
  html body .einblick.wisch .doppelseiten figcaption { margin-top: 13px; text-align: center; font-size: 14px; line-height: 1.4; }
  html body .einblick.wisch .wisch-unten { display: flex; justify-content: center; gap: 0; margin: 0; padding-bottom: 13px; }
  html body .einblick.wisch .wisch-unten button { width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; }
  html body .einblick.wisch .wisch-unten button::before { content: ""; position: absolute; left: 11px; right: 11px; top: 21px; height: 2px; background: rgba(17, 17, 17, .2); transition: background-color .2s; }
  html body .einblick.wisch .wisch-unten button[aria-current="true"]::before { background: var(--gold-papier); }
  /* ---------- ⑫ Schluss: Heftseite etwas kleiner, Formular früher ---------- */
  html body .schluss-bild { width: 72%; margin: 0 auto 34px; }
  html body .schluss .unterzeile { font-size: 16px; }

  /* ---------- Fester Knopf: Daumenzone, ab dem ersten Bildschirm (JS), über der Home-Leiste ---------- */
  html body .fest-knopf { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
  html body .fest-knopf .knopf { height: 52px; letter-spacing: .1em; }

  /* ---------- Quellen + Fuß: Links als Trefferflächen ---------- */
  html body .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}

/* Handy quer (niedrig): Heft hochkant neben dem Text statt Breitband */
@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  /* overflow: clip statt hidden – sonst greift sticky am Bild nicht (linke Spalte blieb beim Scrollen leer) */
  html body .hero { display: grid; grid-template-columns: 40% 60%; align-items: start; overflow: clip; }
  html body .hero .hero-buehne { position: sticky; top: 0; grid-column: 1; grid-row: 1; width: 100%; height: 100svh; margin: 0; aspect-ratio: auto; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  html body .hero .hero-buehne img, html body .hero .hero-buehne video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 40%; transform: none; -webkit-mask-image: none; mask-image: none; }
  html body .hero .hero-buehne::after { display: block; background: linear-gradient(270deg, var(--nacht) 0%, rgba(17, 17, 17, 0) 22%); }
  html body .hero .innen { grid-column: 2; grid-row: 1; margin: 0; padding: 52px 24px 34px 8px; }
  html body .hero h1 { font-size: 26px; }
}
/* Handy quer ab 761 px (844×390, 932×430): v4-Desktopfassung, nur kleine Beschriftungen auf ≥ 12 px.
   Nur Touch (pointer: coarse) – ein Desktop-Fenster 800×400 mit Maus bleibt pixelgleich. */
@media (min-width: 761px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  html body .hero .eyebrow, html body .hero .eyebrow .eb-fuer { font-size: 12px; }
  html body .formular .vorfeld { font-size: 12px; }
  html body .feld-name, html body .hero .feld-name { font-size: 12px; }
  html body .formular .fehler { order: -1; margin: 0 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .einblick.wisch .doppelseiten { scroll-behavior: auto; }
}

/* ---------- v6 (16.10.2026, Owner): 17 Dinge – Gewinner-Reihe oben (I–VIII), Verlust-Reihe unten (IX–XVII); alle Breiten ---------- */
html body .lauf.lauf-2 { counter-reset: lauf 8; }

/* ---------- v7 (16.10.2026, Owner): Stimme Martin Seitel – Zitat ausführlicher, WhatsApp-Ausschnitt als Beleg, mehr Weißraum ----------
   Desktop: Zitat links (61,8 %), Beleg rechts (38,2 %), Abstand 89 px. Handy: Zitat zuerst, Beleg darunter in voller Breite. */
html body .stimme-band.stimme-seitel { padding: clamp(89px, 8vw, 144px) 0 clamp(89px, 7vw, 120px); }
html body .stimme-seitel .seitel-raster { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: clamp(55px, 6vw, 89px); align-items: center; }
html body .stimme-seitel .goldstrich { margin-bottom: 34px; }
html body .stimme-seitel blockquote { margin: 0; }
html body .stimme-seitel .seitel-lauf { font-family: "Marcellus", Georgia, serif; font-size: clamp(21px, 1.75vw, 27px); line-height: 1.42; color: var(--text-papier); text-indent: -.4em; max-width: 30em; text-wrap: pretty; }
html body .stimme-seitel .seitel-pointe { font-family: "Marcellus", Georgia, serif; font-size: clamp(32px, 3.1vw, 48px); line-height: 1.12; letter-spacing: -.01em; color: var(--tinte); margin-top: 21px; max-width: 16em; text-wrap: balance; text-indent: 0; }
html body .stimme-seitel figcaption { margin-top: 34px; }
html body .stimme-seitel cite { font-size: 14px; }
html body .stimme-seitel cite b { font-size: 15px; }
html body .stimme-seitel .seitel-beleg { margin: 0; justify-self: start; width: 100%; max-width: 314px; }   /* Quelle 314 px: Desktop nie vergrößern */
/* Nachrichtenblase: Fläche in der Farbe der Original-Blase (#242625) rahmt den unveränderten Ausschnitt; oben etwas Luft, damit die Zeile nicht an der Kante klebt */
html body .stimme-seitel .seitel-blase { background: #242625; border-radius: 14px; padding: 13px 0 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 17, 17, .14), 0 18px 40px -14px rgba(17, 17, 17, .38); }
html body .stimme-seitel .seitel-beleg img { display: block; width: 100%; height: auto; }
html body .stimme-seitel .seitel-beleg figcaption { margin-top: 13px; padding: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise-papier); }
html body .stimme-seitel .seitel-beleg figcaption::before { display: none; }
@media (max-width: 760px) {
  html body .stimme-band.stimme-seitel { padding: 72px 0 55px; }
  html body .stimme-seitel .seitel-raster { grid-template-columns: 1fr; row-gap: 34px; }
  html body .stimme-seitel .goldstrich { margin-bottom: 21px; }
  html body .stimme-seitel .seitel-lauf { font-size: 18px; line-height: 1.5; }
  html body .stimme-seitel .seitel-pointe { font-size: min(30px, 7.6vw); margin-top: 13px; }
  html body .stimme-seitel figcaption { margin-top: 21px; }
  html body .stimme-seitel .seitel-beleg { max-width: 380px; }   /* Quelle ist 314 px breit: nie stärker als etwa 1,2-fach vergrößern */
  html body .stimme-seitel .seitel-blase { border-radius: 12px; }
}