/* ============================================================================
   Die vier Vertiefungsseiten unter /warum, Umbau fürs Handy vom 11.10.2026.
   Nur auf public/warum/*.html eingebunden, nach site.css. Ersetzt dort
   assets/css/warum.css (die Datei bleibt liegen, wird von hier nicht mehr
   gebraucht). Alle Klassen tragen den Vorsatz wy-.

   Eluan: «viel zu viel Text, das wird kein Mensch durchlesen». Jede Seite hat
   jetzt drei Teile und passt auf dem Handy in knapp zwei Bildschirme:
     1 · der Ich-Satz von der Karte der Startseite, wortgleich, und zwei Sätze,
         was dahintersteckt, mit der Studie in Klammern
     2 · drei Zeilen «So hilft dir Go & Grow», darunter App Store und Google Play
     3 · die Quellen, klein, ganz unten
   Fliesstext 16 Pixel und mehr, Nebenzeilen 14. Farben aus site.css.
   ========================================================================== */

.wy-spalte{max-width:720px}

/* ---------- 1 · Kopf ---------- */
.wy-kopf{padding:22px 0 26px;overflow:hidden}
.wy-marke{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pop)}
/* Anton steht versal. Die Guillemets der Karte fehlen hier mit Absicht: in
   Anton sehen « » wie << >> aus (Handy-Prüfung). Der Satz ist sonst derselbe. */
.wy-h1{margin:0;font-size:clamp(30px,8.2vw,52px);line-height:1.08;text-wrap:balance}
.wy-lead{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--faint);text-wrap:pretty}
.wy-lead cite{font-style:normal;color:var(--muted)}

/* ---------- 2 · So hilft dir Go & Grow ---------- */
.wy-teil{padding:6px 0 34px}
.wy-h2{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.wy-liste{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.wy-liste li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line)}
.wy-liste p{margin:0;font-size:16px;line-height:1.5;color:var(--faint)}
.wy-liste b{display:block;margin-bottom:2px;font-size:17px;line-height:1.35;color:var(--text);font-weight:700}
.wy-sym{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--primary-dim);color:var(--primary)}
.wy-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Die Läden: dasselbe schwarze Abzeichen wie auf der Startseite
   (seite-start.css, .st-laden). App Store oben, Google Play darunter. */
.wy-laden{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:340px;margin:22px 0 0}
.wy-laden .store{display:flex;align-items:center;gap:14px;min-height:58px;margin:0;
  padding:8px 18px;border-radius:var(--r-md);background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.34);text-decoration:none;
  transition:transform .14s var(--ease),border-color .18s,background .18s}
.wy-laden .store svg{flex:none}
.wy-laden .store span{display:block;text-align:left;line-height:1.2;min-width:0}
.wy-laden .store span i{display:block;font-style:normal;font-size:14px;font-weight:500;
  letter-spacing:0;text-transform:none;opacity:1;color:#c9d3d1;margin:0 0 1px}
.wy-laden .store span b{display:block;font-size:19px;font-weight:800}
.wy-laden .store:hover{border-color:var(--primary);background:#0b0f10;transform:translateY(-1px);box-shadow:none}
.wy-laden .store:active{transform:translateY(0) scale(.99)}
.wy-laden .store:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Zurück: ein gewöhnlicher Verweis mit 44 Pixeln Trefferfläche. */
.wy-zurueck{margin:18px 0 0}
.wy-zurueck a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;
  font-size:16px;font-weight:600;color:var(--text);text-decoration:none}
.wy-zurueck a::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:3px}
.wy-zurueck a:hover{color:var(--primary)}

/* ---------- 3 · Quellen ---------- */
.wy-quellen{padding:20px 0 32px;border-top:1px solid var(--line)}
.wy-quellen h2{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wy-quellen ol{margin:0;padding-left:20px;display:grid;gap:6px;list-style:decimal}
.wy-quellen li{font-size:16px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .wy-laden .store{transition:none}
  .wy-laden .store:hover{transform:none}
}

/* ---------- Am Rechner ---------- */
@media (min-width:900px){
  .wy-kopf{padding:72px 0 40px}
  .wy-lead{font-size:19px}
  .wy-teil{padding:10px 0 64px}
  .wy-liste b{font-size:18px}
  .wy-liste p{font-size:17px}
  .wy-laden{max-width:300px}
  .wy-quellen{padding:36px 0 64px}
}

/* Die Grenze «kein Ersatz für Begleitung» auf /warum/rueckschlag. */
.wy-hinweis{margin:14px 0 0;max-width:46em;font-size:16px;line-height:1.5;color:var(--muted)}

/* Tag 0 als zweiter Weg unter den Läden: derselbe Knopf wie auf der
   Startseite (start.js), hier umrandet und damit leiser als die Läden. */
.wy-probe{margin:16px 0 0}
.wy-probe .btn{width:100%;max-width:340px;min-height:52px;background:transparent;color:var(--text);border-color:var(--line-strong)}
.wy-probe .btn:hover{background:rgba(255,255,255,.06);border-color:var(--primary)}
.wy-probe .pc-start__zeile{margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
@media (min-width:900px){.wy-probe .btn{max-width:300px}}

/* Der Laden-Knopf erkennt das Gerät (assets/js/laden-geraet.js): auf dem
   iPhone nur App Store, auf Android nur Google Play, sonst beide. */
html[data-geraet="apple"] [data-laden-geraet] .store[href*="play.google.com"],
html[data-geraet="android"] [data-laden-geraet] .store[href*="apps.apple.com"]{display:none}

/* ---------- Zurück oben (Nachbesserung 11.10.2026) ----------
   Wie auf den anderen Unterseiten steht oben links der Zurück-Knopf
   (.seite-zurueck aus site.css, Verhalten in assets/js/unterseite.js). Der
   Kopf rückt dafür nach oben, sonst stünde über dem Knopf ein leerer
   Streifen. Der Verweis «Zurück zur Startseite» unten ist damit weggefallen,
   die Regeln für .wy-zurueck oben werden nicht mehr gebraucht. */
.wy-kopf{padding-top:18px}
@media (min-width:900px){.wy-kopf{padding-top:28px}}


/* =========================================================================
   V2 Runde 2 (12.10.2026): am Handy blättern, ein Teil ein Bildschirm
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkt 13. Das Einrasten
   steht in site.css 17a (html.blaettern steht hier direkt im Tag, Deutsch
   und Englisch sind eigene Dateien). Platz für den Inhalt höchstens 571
   Pixel. Am Rechner und am Tablet bleibt jeder Pixel.
   ========================================================================= */
@media (max-width:767px){
  /* 1 · Zurück oben, Ich-Satz und Studie mittig im Platz über dem
     Zustimmungsband. Der Schein bleibt hinter dem ganzen Bildschirm. */
  html.blaettern .wy-kopf > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - var(--blatt-oben) - var(--blatt-unten))}
  html.blaettern .wy-kopf .seite-zurueck{align-self:flex-start}
  html.blaettern .wy-kopf .wy-marke{margin-top:auto}
  html.blaettern .wy-kopf .wy-lead{margin-bottom:auto;padding-bottom:96px}
  html.blaettern .wy-h1{font-size:clamp(32px,9vw,38px);line-height:1.06}

  /* 2 · So hilft dir Go & Grow: unverändert, nur etwas mehr Luft */
  html.blaettern .wy-liste li{padding:14px 0}

  /* 3 · Quellen: kein eigener Bildschirm (eine einzelne Quelle stand dort
     verloren mitten im Dunkeln). Sie stehen an der letzten Station, über der
     Fusszeile, wie Kleingedrucktes. Seit Runde 3 (12.10.2026) ist die
     Fusszeile nur noch eine leise Zeile (site.css 17a und 17d): die Quellen
     füllen die Station bis auf ihre Höhe (--fuss-h), mittig, oben bleibt der
     Platz für die Pille frei. Zusammen genau ein Bildschirm, darum schaut
     vom Bildschirm davor nichts angeschnitten herein; dass alles darunter
     Platz hat, prüft docs/umbau-handy/v2/pruefen-runde2-unterseiten.mjs
     (Punkt 9). Dicht gesetzt, weil /warum/rueckschlag zwei lange Quellen hat.
     Bis Runde 3 waren Quellen und Fusszeile je ein halber Bildschirm. */
  html.blaettern .wy-quellen{box-sizing:border-box;min-height:calc(100vh - var(--fuss-h));min-height:calc(100svh - var(--fuss-h));
    padding:var(--blatt-oben) 0 14px;border-top:0;align-content:center}
  html.blaettern .wy-quellen h2{margin-bottom:6px}
  html.blaettern .wy-quellen ol{gap:4px}
  html.blaettern .wy-quellen li{line-height:1.4}

  /* Die Sicherungen (Feld mit Fokus, Bereich zu hoch) gelten für alle
     Blätter-Seiten gemeinsam: site.css 17a und assets/js/blaettern.js. */
}

/* =========================================================================
   V2 Runde 4 (13.10.2026): «Lösung» und der Zurück-Knopf unten
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 33 und 34.
   · Unter dem Text des ersten Teils steht neu ein Absatz «Lösung: …», wie
     Go & Grow genau dieses Problem löst. Er ist Inhalt und steht darum auch
     am Rechner, dort unter dem Text wie der Kernsatz der Blogtexte (site.css
     15c): Fläche, türkise Kante links, Text weiss. Am Rechner verschiebt er
     nur, was darunter folgt; sonst ändert sich dort nichts.
   · Der Zurück-Knopf schwebt am Handy unten rechts (site.css 18b), oben ist
     er weg. Der erste Bildschirm hat darum oben keinen Knopf mehr: Marke,
     Ich-Satz, Text und Lösung stehen mittig im Platz über dem
     Zustimmungsband.
   ========================================================================= */
.wy-loesung{margin:20px 0 0;padding:14px 16px 15px 18px;border-left:3px solid var(--primary);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--card);
  font-size:17px;line-height:1.5;font-weight:500;color:var(--text);text-wrap:pretty}
.wy-loesung b{font-weight:800;color:var(--primary)}
@media (min-width:900px){
  .wy-loesung{margin-top:26px;padding:18px 22px 19px 24px;font-size:19px}
}
@media (max-width:767px){
  html.blaettern .wy-kopf .wy-lead{margin-bottom:0;padding-bottom:0}
  html.blaettern .wy-kopf .wy-loesung{margin-bottom:auto}
  /* Unten bleibt der Platz des Zurück-Knopfs frei (48 hoch, 16 über dem
     Rand, dazu 8 Luft: 48 über dem Innenabstand von 24), solange das
     Zustimmungsband offen ist, dessen Platz. Text und Lösung etwas dichter,
     damit alles in den Bildschirm passt (375 × 667: Platz für 471 Pixel
     Inhalt über dem Band). */
  html.blaettern .wy-kopf > .wrap{padding-bottom:48px}
  html.blaettern body:has(> .zust) .wy-kopf > .wrap{padding-bottom:100px}
  html.blaettern .wy-kopf .wy-lead{margin-top:14px;font-size:16px;line-height:1.5}
  html.blaettern .wy-kopf .wy-loesung{margin-top:16px;padding:12px 14px 13px 16px;font-size:16px;line-height:1.45}
  /* 13.10.2026: Auf /warum/rueckschlag (englisch, 375 x 667, beide Läden
     untereinander) war der zweite Teil 2 Pixel höher als der Bildschirm.
     Der Hinweis «kein Ersatz für Begleitung» rückt am Handy 4 Pixel näher. */
  html.blaettern .wy-hinweis{margin-top:10px}
}