/* =========================================================================
   Seite /funktionen, nur hier geladen. Neu am 11.10.2026 (Umbau fürs Handy).

   Steht hier und nicht in site.css, weil site.css allen Seiten gehört und an
   diesem Tag mehrere Leute daran arbeiten. Keine neue Farbe, keine neue
   Schrift, kein neuer Radius: alles kommt aus dem :root-Block von site.css.
   Bewegt wird nichts Neues; die Einblendung macht die vorhandene Klasse .rise.
   ========================================================================= */

/* ---------- «So sieht es aus»: Text links, Handy rechts ----------
   Bis zum 11.10.2026 stand hier links das Handy und rechts der Fahrplan
   (.appduo in site.css). Der Fahrplan ist auf /ideen gezogen, und Eluan wollte
   den Text links, das Handy rechts, wie bei den Skills und den 21 Tagen weiter
   oben, wo die Zeichnung auch rechts steht.

   Auf dem Handy untereinander, erst der Text, dann das Gerät: der Satz sagt,
   dass man unten im Gerät tippen kann. Wer zuerst das Gerät sieht, weiss das
   noch nicht. */
.fk-duo{display:grid;gap:30px;align-items:center}
.fk-duo__lead{margin-top:18px;max-width:36ch}
.fk-duo__handy{min-width:0}
@media(min-width:940px){
  .fk-duo{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(38px,5vw,72px)}
  .fk-duo__lead{font-size:clamp(17px,1.6vw,19px)}
}

/* ---------- Lesbare kleine Beschriftungen ----------
   Zwei leise Beschriftungen standen in #5c6a68 auf dem Seitengrund: «5 Skills»
   unter den Phasen der Pyramide und «Erkunden · Training · Finale» unter den
   Tagesfeldern. Das sind 3,3 zu 1, bei 9 bis 11 Pixel Schrift. AA verlangt dort
   4,5 zu 1. var(--faint) hält rund 6,5 zu 1 und bleibt dabei leiser als der
   Phasenname darüber (var(--muted), 7,6 zu 1), die Rangfolge stimmt also noch.
   Beide Bausteine gibt es nur auf dieser Seite. */
.pyra__t em{color:var(--faint)}
.bz__wochen{color:var(--faint)}

/* ---------- Schriftgrössen fürs Handy ----------
   Die Handy-Prüfung vom 11.10.2026 hat gezählt: auf dieser Seite standen rund
   die Hälfte aller Zeichen unter 14 Pixeln. Die Regel seither: Fliesstext
   mindestens 16 Pixel, Nebenzeilen mindestens 14. Kleine Etiketten in
   Grossbuchstaben mit Sperrung («WOCHE 2», «5 SKILLS») bleiben kleiner, aber
   nicht unter 12; sie sind Beschriftung, kein Lesetext.
   Die Augenbrauen über den Überschriften (.eyebrow), die Pillen (.chip) und
   die Laden-Karten gehören allen Seiten und bleiben, wie sie in site.css sind.
   Gezielt über die Abschnitts-Kennungen, damit die Regeln gegen die
   Handy-Ausnahmen in site.css gewinnen. */

/* Die Sprungmarken im Kopf */
.sprung a{font-size:15px}

/* Was in einem Jahr drinsteckt: das Band */
#rechnung .bz__skill span,#rechnung .bz__unten span,#rechnung .bz__wochen{font-size:12px}
#rechnung .bz__skill b,#rechnung .bz__unten b{font-size:14px}
#rechnung .bz__spruch span{font-size:14px}
#rechnung .bz__turm-r b{font-size:12px}

/* 17 Skills: Pyramide und Karten */
#skills .pyra__t{font-size:15px}
#skills .pyra__t em{font-size:12px}
#skills .swipe{font-size:12px}
#skills .skill__n{font-size:13px}
#skills .skill h4{font-size:17px}
#skills .skill p{font-size:16px;line-height:1.5}
#skills .karu__l span{font-size:12px}
#skills .karu__l b{font-size:14px}

/* 21 Tage: die drei Zeilen neben der Tagesleiste */
#tage .wqhint{font-size:16px}
#tage .bz__wochen{font-size:12px}

/* Der Kopf rückt nach oben, weil jetzt der Zurück-Knopf über der Augenbraue
   steht; sonst stünde über ihm ein leerer Streifen. */
.seitenkopf{padding-top:18px}


/* =========================================================================
   Nachbesserung vom 11.10.2026 (Prüfung des Handy-Umbaus, Note 7)
   ========================================================================= */

/* ---------- «21 Tage. Ein Thema / Skill.» links wie alles andere ----------
   Am Handy stand die Überschrift mittig (site.css, .tagsk-sec), die drei
   Zeilen darunter aber links. Jetzt steht der ganze Abschnitt links, wie
   jeder andere Abschnitt dieser Seite. Am Rechner war das schon so (site.css,
   .tagduo ab 900 Pixeln). */
.tagsk-sec .tagduo{text-align:left}
.tagsk-sec .tagduo .lead{margin-inline:0;max-width:34ch}
.tagsk-sec .tagduo .wqhint--liste{margin-inline:0}

/* ---------- Die fünf Phasen in der Kachel «17 Skills» ----------
   Bis der Lauf eine Zeile erreicht hatte, stand ihr Name in #5c6a68, auf der
   Kachel rund 3,1 zu 1. Der Lauf geht nur einmal, darum blieben «Aussenwelt»
   und «Hebel & Sinn» oft so blass stehen. Jetzt von Anfang an var(--faint)
   (rund 6,5 zu 1), eine angelaufene Zeile wird heller. */
#rechnung .bz__turm-r b{color:var(--faint)}
#rechnung .bz__turm-r.an b{color:#e9efec}

/* ---------- Am Handy kürzer: keine Kachel, die gleich darunter gross steht ----------
   Drei Kacheln des Bandes zeigen dasselbe wie die nächsten zwei Abschnitte:
   die fünf Phasen (gross als Pyramide bei «17 Skills»), das Buchregal von
   Skill 01 (gross als erste Karte gleich darunter) und die 21 Tagesfelder
   (gross bei «So läuft es ab»). Untereinander kosteten sie am Handy zusammen
   rund 390 Pixel. Unter 900 Pixeln fallen diese drei Kacheln weg, die Zahlen
   und die Rechnung bleiben, dazu das Roulette, das sonst nirgends steht. Am
   Rechner stehen alle vier, nebeneinander kosten sie keine Länge. */
@media(max-width:900px){
  #rechnung .band__b[data-bz="phasen"],#rechnung .band__b[data-bz="tage"],
  #rechnung .band__b[data-bz="buecher"]{display:none}
}


/* =========================================================================
   V2 am Handy (Runde 2 und 3, 12.10.2026): blättern, ein Abschnitt ein
   Bildschirm, und jeder Bildschirm mit einem starken Bild
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 13, 17, 18, 25
   und 26. Alles nur unter 768 Pixeln, am Rechner und am Tablet bleibt jeder
   Pixel. Das Einrasten selbst steht in site.css 17a (html.blaettern,
   .bildschirm): Platz für den Inhalt je Bildschirm höchstens 571 Pixel
   (375 × 667). Bewegung nur über transform und opacity.

   Runde 3: Eluan fand die Bildschirme «sehr mager, null visuell». Massstab
   ist die Fassung am Rechner. Darum hat jetzt jeder Bildschirm ein Bild:
     Kopf          die 17 Skills als Symbole, eine Reihe je Phase
     Rechnung      vier Kacheln neben ihren Zahlen (seit Runde 4: Fächer,
                   Kalender, Bücher, Roulette)
     17 Skills     Karten wie die Phasenkarten, Pfeile, Phasen-Leiste
     21 Tage       drei Wochen, je ein Buch und sieben Tage
     Dann los      das App-Symbol über den Laden-Knöpfen
   Gezeichnet von assets/js/funktionen-handy.js. Die Klasse .fk-fertig setzt
   das Skript bei «weniger Bewegung»: dann steht der Endstand sofort da.
   ========================================================================= */
@media(max-width:767px){
  /* Die Haarlinien zwischen den Abschnitten: am Handy ist jeder Abschnitt
     ein eigener Bildschirm, eine Linie dazwischen sähe niemand. */
  html.blaettern main > .hair{display:none}

  /* ---------- 1 · Der Kopf ----------
     Zurück oben, darunter die Zeile, der Satz und die Pyramide aus Symbolen.
     Der Satz endet über dem Zustimmungsband (rund 115 Pixel unten). Die
     Sprungmarken fallen weg: «In der App» zeigt auf einen Abschnitt, den es
     am Handy nicht gibt, die anderen kommen beim Blättern von selbst. */
  html.blaettern .seitenkopf > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - var(--blatt-oben) - var(--blatt-unten))}
  html.blaettern .seitenkopf .seite-zurueck{align-self:flex-start}
  html.blaettern .seitenkopf .eyebrow{margin-top:auto}
  html.blaettern .seitenkopf .lead.nur-handy{max-width:30ch}
  html.blaettern .seitenkopf__h{font-size:64px;line-height:.92}
  html.blaettern .seitenkopf .sprung{display:none}
  .fk-pyr{--k:38px;--g:8px;display:grid;gap:var(--g);margin:30px 0 auto;padding-bottom:8px}
  .fk-pyr__r{display:grid;grid-template-columns:calc(var(--k) * 5 + var(--g) * 4) minmax(0,1fr);
    align-items:center;column-gap:14px}
  .fk-pyr__s{display:flex;justify-content:center;gap:var(--g)}
  .fk-pyr__n{min-width:0;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.04em;color:var(--f);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fk-pyr__k{display:grid;place-items:center;flex:none;width:var(--k);height:var(--k);
    border-radius:calc(var(--k) * .3);color:var(--f);
    background:color-mix(in srgb,var(--f) 13%,var(--card));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 36%,transparent)}
  .fk-pyr__k svg{width:calc(var(--k) * .52);height:calc(var(--k) * .52)}
  .fk-pyr.fk-wartet .fk-pyr__k,.fk-pyr.fk-wartet .fk-pyr__n{opacity:0}

  /* ---------- 2 · Was in einem Jahr drinsteckt ----------
     Wie am Rechner: Kachel und Zahl nebeneinander, die Rechnung von oben
     nach unten gelesen, die Summe unter dem Strich. Rechts die Zahl, die
     hochzählt (main.js), das Bindewort leise davor, das Wort darunter. Alle
     Zahlen enden an derselben Kante wie in einer schriftlichen Rechnung. Das
     Band des Rechners steht am Handy nicht, es hat dieselben Zahlen. */
  #rechnung .band{display:none}
  #rechnung .eyebrow{margin-bottom:0}
  .fk-rechnung{display:grid;gap:10px;margin-top:20px}
  .fk-r{display:grid;grid-template-columns:minmax(0,1fr) 136px;align-items:center;column-gap:14px}
  .fk-r__b{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:88px;
    padding:8px 10px;overflow:hidden;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line)}
  .fk-r__w{display:grid;grid-template-columns:auto auto;grid-template-areas:"op n" "w w";
    justify-content:end;align-items:baseline;column-gap:6px;margin:0;text-align:right}
  .fk-r__w i{grid-area:op;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px;
    line-height:1;color:var(--muted)}
  .fk-r:nth-child(2) .fk-r__w i{font-size:32px}
  .fk-r__w .n{grid-area:n;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;
    font-size:56px;line-height:.92;letter-spacing:.005em;color:var(--primary);font-variant-numeric:tabular-nums}
  .fk-r__w .n--pop{color:var(--pop)}
  .fk-r__w span{grid-area:w;justify-self:end;margin-top:6px;font-size:13px;font-weight:700;line-height:1.2;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .fk-r--summe{margin-top:4px;padding-top:14px;border-top:1px solid var(--line-strong)}
  .fk-r--summe .n{font-size:64px}
  .fk-r--summe .fk-r__w span{color:#fff}
  #rechnung .lead{margin-top:18px}

  /* Kachel 17 Skills (Runde 4, 13.10.2026): ein Farbfächer aus 17 Karten
     in den Phasenfarben, nach Phasen gruppiert, mit Niete und Schatten. Der
     Grundzustand ist geschlossen (alle Karten auf dem ersten Winkel);
     funktionen-handy.js öffnet ihn, bei «weniger Bewegung» steht er offen
     (.fk-fertig, Winkel aus --w). Die Karte: Farbe der Phase, zur Niete hin
     dunkler, oben eine feine Lichtkante, links ein weicher Schlagschatten
     auf die Karte darunter. */
  .fk-faecher{position:relative;flex:none;width:176px;height:76px}
  .fk-faecher__schatten{position:absolute;left:50%;bottom:0;width:150px;height:12px;margin-left:-75px;
    border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
  .fk-faecher__k{position:absolute;left:50%;bottom:7px;width:16px;height:68px;margin-left:-8px;
    border-radius:5px 5px 4px 4px;transform-origin:50% calc(100% - 8px);transform:rotate(-64deg);
    background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,0) 60%),
      linear-gradient(100deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 40%),
      color-mix(in srgb,var(--f) 86%,#0e1213);
    box-shadow:-1.5px 0 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3)}
  .fk-faecher__niete{position:absolute;left:50%;bottom:10.5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fbfcfc,#9aa4a2 50%,#3b4344);
    box-shadow:0 1px 2px rgba(0,0,0,.7),0 0 0 1.5px rgba(0,0,0,.35)}

  /* Kachel 21 Tage (Runde 4): ein Tischkalender, leicht schräg, mit zwei
     Ringen, Kopfleiste und Seitenschnitt (zwei helle Kanten darunter, wie
     die Seiten der Bücher). Darauf drei Wochen zu sieben Tagen: das leere
     Feld dunkel, die Füllung in der Farbe der Woche darüber (opacity und
     scale), Tag 4, 11 und 18 mit weissem Ring, Tag 21 grün mit Leuchten. */
  .fk-kal{position:relative;flex:none;width:122px;height:74px;transform:rotate(-5deg)}
  .fk-kal__schatten{position:absolute;left:4px;right:-2px;bottom:-4px;height:12px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
  .fk-kal__blatt{position:absolute;left:4px;top:7px;width:112px;height:62px;border-radius:8px;
    background:linear-gradient(#293234,#1b2224);
    box-shadow:inset 0 0 0 .8px rgba(255,255,255,.12),1px 2px 0 #d3dad8,2px 4px 0 #a3adab}
  .fk-kal__kopf{display:block;height:12px;border-radius:8px 8px 0 0;
    background:radial-gradient(circle at 28.25px 8px,#0b0f10 2.3px,transparent 2.8px),
      radial-gradient(circle at 84.25px 8px,#0b0f10 2.3px,transparent 2.8px),#333d3f;
    box-shadow:0 1px 0 rgba(0,0,0,.45)}
  .fk-kal__tage{display:grid;grid-template-columns:repeat(7,11px);gap:3px 3.4px;justify-content:center;padding-top:5px}
  .fk-kal__t{position:relative;width:11px;height:11px;border-radius:3.2px;background:#101718;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .fk-kal__t b{position:absolute;inset:0;border-radius:inherit;opacity:0;
    background:color-mix(in srgb,var(--f) 76%,#0f1516)}
  .fk-kal__t.wq b{box-shadow:inset 0 0 0 1.3px rgba(255,255,255,.92)}
  .fk-kal__t.fin b{background:color-mix(in srgb,#2fc95f 82%,#0f1516);box-shadow:inset 0 0 0 1.3px rgba(255,255,255,.92)}
  .fk-kal__glanz{position:absolute;inset:-2px;border-radius:5px;text-decoration:none;opacity:0;
    box-shadow:0 0 9px 2px rgba(47,201,95,.7)}
  .fk-kal__ring{position:absolute;top:1px;left:30px;width:4.5px;height:14px;border-radius:3px;
    background:linear-gradient(90deg,#6d7775,#eef2f1 45%,#7c8684);box-shadow:0 1px 1.5px rgba(0,0,0,.55)}
  .fk-kal__ring--r{left:86px}

  /* Kachel 51 Bücher: der Stapel, der sich auffächert (Katalog 28). */
  .fk-stapel{position:relative;flex:none;width:136px;height:74px}
  .fk-stapel__schatten{position:absolute;left:50%;bottom:0;width:116px;height:12px;margin-left:-58px;
    border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
  .fk-stapel__b{position:absolute;left:50%;top:9px;width:40px;height:58px;margin-left:-20px;transform-origin:50% 100%}
  .fk-stapel__b svg{display:block;width:100%;height:100%;overflow:visible}
  .fk-stapel__b2{z-index:2}

  /* Kachel 357 Tage: das Roulette, angeschnitten wie am Rechner, danach
     «Dein Start.» in derselben Schrift und Farbe. */
  .fk-r__b--anschnitt{padding:0}
  .fk-rad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .fk-rad__svg{display:block;width:auto;height:150%;overflow:visible;transform:translateY(20%)}
  .fk-rad__svg g{transform-box:view-box;transform-origin:50% 50%}
  .fk-rad__zeiger{transform-box:fill-box;transform-origin:50% 50%}
  .fk-spruch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:0 8px;opacity:0;pointer-events:none}
  .fk-spruch b{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:30px;line-height:1;
    text-transform:uppercase;color:var(--pop);white-space:nowrap}

  /* Endstand ohne Bewegung (prefers-reduced-motion): der Farbfächer ist
     offen, der Kalender gefüllt, die Bücher aufgefächert, das Rad liegt als
     Schatten hinter dem Satz. */
  .fk-fertig .fk-faecher__k{transform:rotate(var(--w))}
  .fk-fertig .fk-kal__t b,.fk-fertig .fk-kal__glanz{opacity:1}
  .fk-fertig .fk-stapel__b1{transform:translateX(-27px) rotate(-12deg)}
  .fk-fertig .fk-stapel__b2{transform:translateY(-6px)}
  .fk-fertig .fk-stapel__b3{transform:translateX(27px) rotate(12deg)}
  .fk-fertig .fk-rad{opacity:.1}
  .fk-fertig .fk-spruch{opacity:1}

  /* ---------- 3 · Alles offen gelegt ----------
     Die 17 Skills als Karten zum Wischen, im Stil der Phasenkarten am
     Rechner: blasses Symbol im Hintergrund, Symbol, Phase und Nummer, Name,
     der eine Satz, unten das Buch-Karussell (.buch aus site.css) mit Woche
     und Titel. Darunter die Steuerung: Pfeile links und rechts, dazwischen
     die Phasen-Leiste. Der Absatz «Tipp auf eine Phase …» gehört zur
     Pyramide des Rechners und bleibt dort. */
  #skills .skillsec__kopf .lead{display:none}
  #skills .skillsec__h{font-size:38px}
  #skills #skillGrid{display:none}
  .fk-reihe{margin-top:18px}
  .fk-band{position:relative;display:flex;align-items:stretch;gap:12px;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 4px;scrollbar-width:none}
  .fk-band::-webkit-scrollbar{display:none}
  /* Platz nach der letzten Karte: so rastet auch sie an der linken Kante
     ein, wie jede andere, und die Reihe ruht nie genau am Ende. Ruhte sie am
     Ende, ging in Chrome nach Wischen und einem Sprung dorthin (Pfeil,
     Phase) der nächste senkrechte Wisch auf der Reihe ins Leere; erst der
     zweite blätterte weiter (geprüft mit pruefen-runde3-funktionen.mjs).
     40 Pixel mehr als nötig, Karte und Abstand wie oben. */
  .fk-band::after{content:"";flex:0 0 calc(100% - min(84%, 330px) + 28px)}
  .fk-band:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:var(--r-lg)}
  .fk-sk{position:relative;display:flex;flex-direction:column;flex:0 0 84%;max-width:330px;min-width:0;
    scroll-snap-align:start;overflow:hidden;padding:18px 18px 14px;border-radius:var(--r-lg);
    border:1px solid var(--f-linie);background:linear-gradient(160deg,var(--f-dim) 0%,rgba(22,27,28,0) 58%),var(--card)}
  .fk-sk__bg{position:absolute;right:-30px;top:-28px;line-height:0;color:var(--f);opacity:.08;pointer-events:none}
  .fk-sk__kopf{position:relative;display:flex;align-items:center;gap:12px}
  .fk-sk__sym{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;color:var(--f);
    background:color-mix(in srgb,var(--f) 16%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 40%,transparent)}
  .fk-sk__ph{display:grid;gap:4px;margin:0}
  .fk-sk__ph span{font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--f)}
  .fk-sk__ph b{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:15px;line-height:1;
    letter-spacing:.08em;color:#e9efec}
  .fk-sk h3{position:relative;margin-top:16px;font-size:22px;line-height:1.22;font-weight:700;color:#fff;text-wrap:balance}
  .fk-sk__satz{position:relative;margin:6px 0 12px;font-size:16px;line-height:1.45;color:var(--faint)}
  .fk-sk__karu{position:relative;display:block;width:100%;height:92px;margin:auto 0 0;padding:0;border:0;
    border-radius:var(--r-md);background:none;cursor:pointer;perspective:760px;transform-style:preserve-3d;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .fk-sk__karu:focus-visible{outline:2px solid var(--f);outline-offset:2px}
  .fk-sk .buch{top:6px;width:54px;height:74px;filter:none;
    transition:transform .62s var(--ease),opacity .5s ease}
  /* 24 Pixel: grosse Schrift nach AA (3 zu 1). Das Violett von «Klarer Geist»
     hält auf dem dunklen Buch rund 4 zu 1, bei 23 Pixeln zu wenig. */
  .fk-sk .buch em{font-size:24px}
  .fk-sk .buch[data-p="0"]{transform:translate(calc(-50% - 48px),8px) rotateY(48deg) scale(.84);opacity:.45;filter:none}
  .fk-sk .buch[data-p="2"]{transform:translate(calc(-50% + 48px),8px) rotateY(-48deg) scale(.84);opacity:.45;filter:none}
  .fk-sk__buch{margin:8px 0 0;min-height:38px;text-align:center}
  .fk-sk__buch span{display:block;font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.18em;
    text-transform:uppercase;color:var(--f)}
  .fk-sk__buch b{display:block;margin-top:3px;font-size:15px;font-weight:600;line-height:1.3;color:#dfe7e5;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Die Steuerung: Pfeil, Phasen-Leiste, Pfeil. Jede Phase ist ein Knopf
     mit ihren Punkten (ein Punkt je Karte, in ihrer Farbe). Die Phase der
     vordersten Karte bekommt ihre Fläche (nur opacity), der Punkt dieser
     Karte wird gross (scale). Jede Berührfläche 44 Pixel. */
  .fk-steuer{display:flex;align-items:center;justify-content:space-between;gap:2px;margin-top:14px}
  .fk-pfeil{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;
    border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease),opacity .2s var(--ease)}
  .fk-pfeil svg{width:20px;height:20px}
  .fk-pfeil:active{transform:scale(.94)}
  .fk-pfeil[aria-disabled="true"]{opacity:.35;cursor:default}
  .fk-pfeil:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
  .fk-phasen{display:flex;flex:1;justify-content:center;gap:0;min-width:0}
  .fk-ph{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;flex:0 1 auto;
    min-width:44px;height:44px;margin:0;padding:0 6px;border:0;border-radius:22px;background:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .fk-ph::before{content:"";position:absolute;inset:4px 0;border-radius:18px;opacity:0;
    background:color-mix(in srgb,var(--f) 15%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 45%,transparent);
    transition:opacity .25s var(--ease)}
  .fk-ph.an::before{opacity:1}
  .fk-ph i{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--f);opacity:.45;
    transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .fk-ph.an i{opacity:.8}
  .fk-ph i.an{opacity:1;transform:scale(1.6)}
  .fk-ph:focus-visible{outline:2px solid var(--f);outline-offset:1px}
  .fk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;color:#fff}

  /* ---------- 4 · So läuft es ab ----------
     Erst die Überschrift, dann das Bild: drei Wochen, je Woche vorne ihr Buch
     und sieben Tage mit ihrer Nummer. Tag 4, 11 und 18 tragen den weissen
     Ring der Wochen-Quest, Tag 21 leuchtet grün. Die Skala des Rechners steht
     schon in der Rechnung, hier fällt sie weg. Die drei Zeilen unter dem Satz
     bekommen dieselben Zeichen und werden so zur Legende. */
  #tage .tagduo__kopf{order:-2}
  #tage .tagduo__r{display:none}
  #tage .tagduo__l .lead{margin-top:0}
  .fk-wo{order:-1;display:grid;gap:10px;padding:16px 14px;border-radius:var(--r-lg);background:var(--card);
    border:1px solid var(--line);box-shadow:0 0 0 1px rgba(95,181,171,.10),0 0 52px rgba(95,181,171,.14)}
  .fk-wo__r{display:flex;align-items:center;gap:10px}
  .fk-wo__buch{position:relative;display:grid;place-items:center;flex:none;width:26px;height:36px;
    border-radius:2px 6px 6px 2px;background:linear-gradient(120deg,#2b3435 0%,#1d2425 55%,#161c1d 100%);
    box-shadow:inset 4px 0 0 rgba(0,0,0,.45),inset 5px 0 0 color-mix(in srgb,var(--f) 70%,transparent),
      0 6px 12px rgba(0,0,0,.5)}
  .fk-wo__buch em{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-style:normal;font-size:15px;line-height:1;
    padding-left:4px;color:var(--f)}
  .fk-wo__tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;flex:1;min-width:0}
  .fk-wo__t{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:9px;
    background:color-mix(in srgb,var(--f) 15%,#141b1c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .fk-wo__t b{position:absolute;inset:0;border-radius:inherit;opacity:0;
    background:color-mix(in srgb,var(--f) 60%,#0f1516)}
  .fk-wo__t em{position:relative;font-style:normal;font-size:12px;font-weight:700;line-height:1;color:#f2f5f4}
  .fk-wo__t.wq::after,.fk-wo__t.fin::after{content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.92)}
  .fk-wo__t.fin b{background:color-mix(in srgb,#2fc95f 72%,#0f1516)}
  .fk-wo__glanz{position:absolute;inset:-3px;border-radius:12px;text-decoration:none;opacity:0;
    box-shadow:0 0 16px 3px rgba(47,201,95,.65)}
  .fk-fertig .fk-wo__t b,.fk-fertig .fk-wo__glanz{opacity:1}
  #tage .wqhint--liste{gap:10px}
  #tage .wqhint--liste li{position:relative;padding-left:30px}
  #tage .wqhint--liste li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:6px;
    background:color-mix(in srgb,#5aa0e0 60%,#0f1516)}
  #tage .wqhint--liste li:nth-child(2)::before{background:color-mix(in srgb,#a87fd6 60%,#0f1516);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.92)}
  #tage .wqhint--liste li:nth-child(3)::before{background:color-mix(in srgb,#2fc95f 72%,#0f1516);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.92),0 0 12px 1px rgba(47,201,95,.6)}

  /* ---------- 5 · So sieht es aus: am Handy keine App-Ansicht ---------- */
  #bilder{display:none}

  /* ---------- 6 · Dann los ----------
     Oben das App-Symbol, darunter die grosse Zeile und die Laden-Knöpfe
     (Baustein .laden-weiche aus site.css 16b: mit Erkennung nur der eigene,
     sonst beide untereinander, App Store oben). Seit Runde 4 (13.10.2026,
     Punkt 27) ohne die kleine Zeile «Auch für Android» bzw. «Auch fürs
     iPhone». */
  .fk-los__icon{display:block;width:88px;height:88px;margin:0 auto 22px;border-radius:22px;
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.55),0 0 64px rgba(95,181,171,.24)}
  .fk-los__icon.fk-wartet{opacity:0}
  html.blaettern #holen h2{font-size:52px;line-height:.95}
  /* Die Knöpfe so breit wie auf «Über mich», höchstens 320 Pixel */
  html.blaettern #holen .laden-tat{max-width:320px;margin-inline:auto}

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

/* Kleine Handys (375 × 667 und ähnlich): Pyramide und Symbol etwas kleiner,
   damit im Kopf nichts unter das Zustimmungsband rutscht und am Schluss die
   Fusszeile Platz hat. */
@media(max-width:767px) and (max-height:700px){
  .fk-pyr{--k:31px;--g:6px;margin-top:22px}
  html.blaettern .seitenkopf__h{font-size:56px}
  /* Die Rechnung rückt zusammen, damit unter der Pille Luft bleibt */
  .fk-rechnung{gap:8px;margin-top:16px}
  .fk-r__b{height:80px}
  /* Fächer und Kalender passen in die niedrigere Kachel (nur transform,
     die Kachel schneidet ohnehin ab) */
  .fk-faecher{transform:scale(.84)}
  .fk-kal{transform:rotate(-5deg) scale(.9)}
  .fk-r--summe{padding-top:12px}
  #rechnung .lead{margin-top:14px}
  .fk-los__icon{width:72px;height:72px;margin-bottom:16px;border-radius:18px}
}
/* Schmale Handys (375 Pixel): der Fächer ist 176 Pixel breit, die Kachel
   dort nur rund 165. Er wird etwas kleiner (nur transform). */
@media(max-width:380px){
  .fk-faecher{transform:scale(.88)}
}
@media(max-width:380px) and (max-height:700px){
  .fk-faecher{transform:scale(.84)}
}
@media(max-width:767px) and (hover:hover){
  .fk-pfeil:hover{border-color:var(--primary-line)}
  .fk-ph:hover i{opacity:.8}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .fk-ph::before,.fk-ph i,.fk-pfeil,.fk-sk .buch{transition:none}
  .fk-pfeil:active{transform:none}
}