/* ═══════════════ DIE HANDY-APP ═══════════════
   Gestalt zu js/handy.js. Alles hier gilt nur unter body.layout-phone und
   wird NACH app.css geladen — es gewinnt also bei gleicher Spezifitaet. */

/* ══════════ 1. DER PLUS-KNOPF ══════════ */
body.layout-phone #tabbar .tb-plus{position:relative; touch-action:none; transition:transform .28s cubic-bezier(.3,1.5,.5,1), box-shadow .2s;}
body.layout-phone #tabbar .tb-plus .ic{width:24px; height:24px; stroke-width:2.2; transition:transform .28s cubic-bezier(.3,1.5,.5,1);}
body.layout-phone #tabbar .tb-plus.auf .ic{transform:rotate(135deg);}
body.layout-phone #tabbar .tb-plus.auf{box-shadow:0 0 0 6px rgba(161,121,63,.18), var(--glow-bronze);}
body.layout-phone #tabbar .tb-plus .sk-zahl{top:-2px; right:-2px; border:2px solid var(--bg);}

#hd-plus{position:fixed; inset:0; z-index:90; pointer-events:none;}
/* Der Schleier faengt unten fast schwarz an und wird nach oben durchsichtig
   (Ben: „unten sehr dunkel, nach oben ein Verlauf") — dort, wo die Knoepfe
   stehen, ist er am dichtesten, oben bleibt die Seite zu ahnen. */
#hd-plus .hdp-scrim{position:absolute; inset:0; pointer-events:auto; opacity:0;
  background:linear-gradient(0deg, rgba(10,7,3,.97) 0%, rgba(10,7,3,.93) 30%, rgba(10,7,3,.72) 52%, rgba(10,7,3,.32) 78%, rgba(10,7,3,.12) 100%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:opacity .22s;}
#hd-plus.auf .hdp-scrim{opacity:1;}
/* Die Leiste bleibt ueber dem Schleier; ihre vier Reiter treten zurueck, nur das Kreuz bleibt. */
body.layout-phone.hd-plus-auf #tabbar{z-index:92 !important; background:transparent !important; box-shadow:none !important; border-color:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
body.layout-phone.hd-plus-auf #tabbar button:not(.tb-plus){opacity:0; pointer-events:none; transition:opacity .15s;}

#hd-plus .hdp-k{position:absolute; width:84px; margin-left:-42px; margin-top:-32px; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; padding:0;
  opacity:0; transform:translate(var(--dx), var(--dy)) scale(.3); -webkit-tap-highlight-color:transparent;
  transition:transform .34s cubic-bezier(.3,1.45,.5,1) var(--d), opacity .18s var(--d);}
#hd-plus.auf .hdp-k{opacity:1; transform:none;}
#hd-plus:not(.bereit) .hdp-k{pointer-events:none;}
#hd-plus .hdp-rund{position:relative; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #3a2f20 0%, #2a2116 100%); color:#f3e6c8;
  border:1px solid rgba(226,193,133,.45);
  box-shadow:0 1px 0 rgba(255,236,200,.18) inset, 0 6px 16px rgba(0,0,0,.55);
  transition:transform .15s, box-shadow .15s;}
#hd-plus .hdp-rund .ic{width:25px; height:25px;}
#hd-plus .hdp-k b{font:600 13px/1 var(--sans); color:#fbf3e2; letter-spacing:.01em; white-space:nowrap;
  padding:5px 9px; border-radius:99px; background:rgba(20,15,8,.72); box-shadow:0 0 0 1px rgba(226,193,133,.18);}
#hd-plus .hdp-k:active .hdp-rund, #hd-plus .hdp-k.ziel .hdp-rund{transform:scale(1.12);
  box-shadow:0 0 0 3px rgba(226,193,133,.55), 0 8px 20px rgba(0,0,0,.6);}
#hd-plus .hdp-k.ziel b{background:var(--bronze-grad); color:#2a1f0f;}
/* Scannen ist der Hauptweg: Messing, wie das Plus selbst. */
#hd-plus .hdp-scan .hdp-rund{width:66px; height:66px; background:var(--bronze-grad); color:#2a1f0f; border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 22px rgba(161,121,63,.55);}
#hd-plus .hdp-abfrage .hdp-rund{color:#e7c98f;}
#hd-plus .hdp-zahl{position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:var(--danger); color:#fff; font:700 11px/19px var(--sans); font-style:normal;
  border:2px solid #2a2116;}
@media (prefers-reduced-motion: reduce){
  #hd-plus .hdp-k, #hd-plus .hdp-scrim, body.layout-phone #tabbar .tb-plus .ic{transition:none;}
}

/* ══════════ 2. UNTERWEGS ══════════
   Vollbild ueber allem (auch ueber Kopf und Tab-Leiste). Oben: Schliessen,
   Fortschritt. Mitte: die Karteikarte. Unten, im Daumenbereich: Antworten. */
body.hd-uw-an{overflow:hidden;}
body.hd-uw-an #tabbar{display:none !important;}
.hd-uw{position:fixed; inset:0; z-index:96; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  padding:calc(var(--sat, 0px) + 6px) 0 calc(var(--sab, 0px) + 10px);
  opacity:0; transform:translateY(16px); transition:opacity .2s, transform .26s cubic-bezier(.2,.9,.3,1);}
.hd-uw.da{opacity:1; transform:none;}
:root[data-theme="dark"] .hd-uw{background:radial-gradient(120% 70% at 50% 0%, #241b0f 0%, var(--bg) 60%);}

.hduw-kopf{display:flex; align-items:center; gap:12px; padding:4px 16px 8px; min-height:52px;}
.hduw-x{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ink2); flex:0 0 auto;}
.hduw-x .ic{width:18px; height:18px;}
.hduw-bar{flex:1; height:6px; border-radius:3px; background:var(--line2); overflow:hidden;}
.hduw-bar i{display:block; height:100%; background:var(--bronze-grad); border-radius:3px; transition:width .3s;}
.hduw-zahl{font:600 14px/1 var(--sans); color:var(--ink2); font-variant-numeric:tabular-nums; min-width:40px; text-align:right;}

.hduw-roll{flex:1; overflow-y:auto; padding:6px 20px 20px; -webkit-overflow-scrolling:touch;}
.hduw-marke{display:inline-flex; align-items:center; gap:6px; font:700 11.5px/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--bronze2);}
.hduw-marke .ic{width:15px; height:15px;}
.hd-uw h1{font:500 34px/1.08 var(--serif); margin:10px 0 6px; letter-spacing:-.01em;}
.hduw-sub{font:400 16px/1.4 var(--sans); color:var(--ink2); margin:0 0 6px;}
.hduw-lbl{font:700 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
  margin:26px 0 10px;}

.hduw-chips{display:flex; gap:8px; overflow-x:auto; margin:0 -20px; padding:2px 20px 4px; scrollbar-width:none;}
.hduw-chips::-webkit-scrollbar{display:none;}
.hduw-chip{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  min-height:58px; max-width:190px; padding:10px 14px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--line2); color:var(--ink);}
.hduw-chip b{font:600 15px/1.2 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;}
.hduw-chip small{font:500 12.5px/1.2 var(--sans); color:var(--ink3);}
.hduw-chip.on{border-color:var(--bronze); background:var(--bronzesoft); box-shadow:0 0 0 1px var(--bronze) inset;}
.hduw-chip.on small{color:var(--bronze2);}
.hduw-chip:disabled{opacity:.45;}

.hduw-ums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.hduw-um{display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px 12px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--line2); color:var(--ink);}
.hduw-um b{font:500 20px/1.1 var(--serif);}
.hduw-um span{font:600 13px/1.3 var(--sans); color:var(--ink2);}
.hduw-um small{font:500 12px/1.2 var(--sans); color:var(--ink3);}
.hduw-um.on{border-color:var(--bronze); background:var(--bronzesoft); box-shadow:0 0 0 1px var(--bronze) inset;}
.hduw-um.on span, .hduw-um.on small{color:var(--bronze2);}
.hduw-ansp .ansp-erkl{font-size:14px; margin-top:10px;}

.hduw-fuss{padding:10px 20px 4px; display:flex; flex-direction:column; align-items:stretch; gap:8px;
  border-top:1px solid var(--line);}
.hduw-fuss small{font:500 13px/1.35 var(--sans); color:var(--ink3); text-align:center; min-height:18px;}
.hduw-link{background:none; border:0; padding:0; color:var(--bronze2); font:600 13px/1.35 var(--sans); text-decoration:underline; text-underline-offset:3px;}
.hduw-los{min-height:56px; border-radius:var(--r-l); border:0; background:var(--bronze-grad); color:#fffdf7;
  font:600 17px/1 var(--sans); box-shadow:var(--glow-bronze); letter-spacing:.01em;}
:root[data-theme="dark"] .hduw-los{color:#2a1f0f;}
.hduw-los:disabled{opacity:.5; box-shadow:none;}
.hduw-los:active{transform:scale(.985);}
.hduw-zweit{min-height:50px; border-radius:var(--r-l); background:transparent; border:1px solid var(--line2);
  color:var(--ink); font:600 16px/1 var(--sans);}

/* Leer / Warten */
.hduw-leer{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 32px 60px; gap:10px;}
.hduw-leer h2{font:500 26px/1.15 var(--serif); margin:6px 0 0;}
.hduw-leer p{font:400 16px/1.45 var(--sans); color:var(--ink2); margin:0 0 14px;}
.hduw-leer .hduw-los, .hduw-leer .hduw-zweit{align-self:stretch;}
.hduw-leer-ic{width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bronzesoft); color:var(--bronze2);}
.hduw-leer-ic .ic{width:30px; height:30px;}
.hduw-orb{width:44px; height:44px;}

/* ── Die Karte ── */
.hduw-buehne{flex:1; display:flex; align-items:center; justify-content:center; padding:4px 18px 10px; min-height:0;}
.hduw-karte{position:relative; width:100%; max-height:100%; overflow-y:auto; display:flex; flex-direction:column;
  border-radius:var(--r-l); background:#fffcf3; color:#26221b;
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(61,91,214,.10) 31px 32px);
  background-position:0 58px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(0,0,0,.12), 0 18px 40px rgba(0,0,0,.22);
  border-top:4px solid #b8934f; touch-action:pan-y;
  transition:transform .22s cubic-bezier(.2,.9,.3,1), opacity .18s, box-shadow .2s;
  animation:hduwRein .26s cubic-bezier(.2,.9,.3,1);}
@keyframes hduwRein{from{opacity:0; transform:translateY(14px) scale(.98);}}
.hduw-karte.raus{opacity:0; transform:translateX(-26px) rotate(-2deg);}
.hduw-karte::before{content:''; position:absolute; top:0; bottom:0; left:30px; width:1px; background:rgba(192,86,61,.35);}
.hduw-kk{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:16px 18px 10px 44px;
  font:700 11px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#876430;}
.hduw-kk small{font:500 12px/1.2 var(--sans); letter-spacing:0; text-transform:none; color:#736a5b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%;}
.hduw-inhalt{padding:14px 20px 26px 44px; flex:1; display:flex; flex-direction:column; justify-content:center; min-height:180px;}
.hduw-q{font:500 23px/1.32 var(--serif); margin:0; color:#26221b; overflow-wrap:anywhere;}
.hduw-vok{font:500 32px/1.2 var(--serif); color:#26437e;}
.hduw-hilfe{font:500 14px/1.4 var(--sans); color:#736a5b; margin:12px 0 0;}
.hduw-hilfe-oben{margin:0 0 10px;}
.hduw-kap{font:500 13px/1.3 var(--sans); color:#876430; margin:8px 0 0;}
.hduw-mat{font:400 15px/1.4 var(--sans); color:#4a4336; margin:10px 0 0; padding:8px 10px; background:rgba(161,121,63,.08); border-radius:8px;}
.hduw-loes{margin-top:18px; padding-top:14px; border-top:1px dashed rgba(38,34,27,.22); animation:hduwRein .22s;}
.hduw-a{font:500 26px/1.25 'Caveat', var(--handfont, cursive); color:#26437e; margin:0;}
.hduw-a-klein{font:500 22px/1.3 'Caveat', var(--handfont, cursive);}
.hduw-bsp{font:italic 400 15px/1.4 var(--serif); color:#6b6357; margin:8px 0 0;}
.hduw-wdh{position:absolute; bottom:12px; right:14px; font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:#b04a34; background:rgba(192,86,61,.1); padding:5px 8px; border-radius:99px;}
.hduw-karte.gut{box-shadow:0 0 0 3px rgba(79,138,84,.55), 0 18px 40px rgba(0,0,0,.22);}
.hduw-karte.schlecht{box-shadow:0 0 0 3px rgba(192,86,61,.5), 0 18px 40px rgba(0,0,0,.22); animation:hduwWackel .3s;}
@keyframes hduwWackel{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.hduw-karte.wisch-ja{box-shadow:0 0 0 3px rgba(79,138,84,.6), 0 18px 40px rgba(0,0,0,.22);}
.hduw-karte.wisch-nein{box-shadow:0 0 0 3px rgba(192,86,61,.55), 0 18px 40px rgba(0,0,0,.22);}

/* Luecke */
.hduw-satz{font-size:21px; line-height:1.7;}
.hduw-gap{display:inline-block; min-width:64px; padding:0 6px; margin:0 2px; border-bottom:2px solid #a1793f;
  font:600 19px/1.4 var(--sans); color:#26437e; text-align:center;}
.hduw-gap.jetzt{background:rgba(161,121,63,.14); border-radius:6px 6px 0 0;}
.hduw-gap.voll{border-bottom-style:solid;}
.hduw-gap.richtig{color:#3b7742; border-color:#4f8a54;}
.hduw-gap.falsch{color:#b04a34; border-color:#c0563d; text-decoration:line-through;}
.hduw-gap.falsch ins{text-decoration:none; color:#3b7742; margin-left:4px;}

/* ── Antworten im Daumenbereich ── */
.hduw-ant{padding:6px 18px 2px; display:flex; flex-direction:column; gap:10px; min-height:132px; justify-content:flex-end;}
.hduw-opts{display:flex; flex-direction:column; gap:8px;}
.hduw-opt{display:flex; align-items:center; gap:12px; min-height:54px; padding:10px 14px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--line2); color:var(--ink); text-align:left;
  font:500 16px/1.3 var(--sans);}
.hduw-opt i{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 13px/1 var(--sans); font-style:normal; background:var(--bronzesoft); color:var(--bronze2);}
.hduw-opt:active{transform:scale(.985);}
.hduw-opt.richtig{border-color:var(--gut); background:var(--gut-soft);}
.hduw-opt.richtig i{background:var(--gut); color:#fff;}
.hduw-opt.falsch{border-color:var(--schlecht); background:var(--schlecht-soft);}
.hduw-opt.falsch i{background:var(--schlecht); color:#fff;}
.hduw-opt:disabled{opacity:1;}
.hduw-opt:disabled:not(.richtig):not(.falsch){opacity:.5;}

.hduw-wf{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.hduw-wf button{min-height:72px; border-radius:var(--r-l); font:600 18px/1 var(--sans); border:1px solid var(--line2); background:var(--panel); color:var(--ink);}
.hduw-wf .hduw-wahr{color:var(--gut-t);} .hduw-wf .hduw-falsch{color:var(--schlecht-t);}
.hduw-wf button.richtig{background:var(--gut); color:#fff; border-color:var(--gut);}
.hduw-wf button.falsch{background:var(--schlecht); color:#fff; border-color:var(--schlecht);}
.hduw-wf button:disabled:not(.richtig):not(.falsch){opacity:.45;}

.hduw-chips2{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.hduw-wort{min-height:46px; padding:0 16px; border-radius:var(--r-pill); background:var(--panel); border:1px solid var(--line2);
  color:var(--ink); font:600 16px/1 var(--sans); transition:opacity .15s, transform .15s;}
.hduw-wort.weg{opacity:0; transform:scale(.85); pointer-events:none;}

.hduw-selbst{display:grid; grid-template-columns:1fr .8fr 1fr; gap:8px;}
.hduw-selbst button{min-height:62px; border-radius:var(--r-l); border:1px solid var(--line2); background:var(--panel); color:var(--ink);}
.hduw-selbst b{font:600 15px/1.15 var(--sans);}
.hduw-s0 b{color:var(--schlecht-t);} .hduw-s1 b{color:var(--mittel-t);}
.hduw-selbst .hduw-s2{background:var(--gut); border-color:var(--gut);} .hduw-s2 b{color:#fff;}
.hduw-wisch{font:500 12.5px/1 var(--sans); color:var(--ink3); text-align:center;}

.hduw-ant.mit-rm > :not(.hduw-rm){display:none;}
.hduw-ant.mit-rm > .hduw-opts, .hduw-ant.mit-rm > .hduw-wf{display:none;}
.hduw-rm{border-radius:var(--r-l); padding:14px 16px 12px; display:flex; flex-direction:column; gap:6px; animation:hduwRein .2s;}
.hduw-rm.gut{background:var(--gut-soft); border:1px solid rgba(79,138,84,.4);}
.hduw-rm.schlecht{background:var(--schlecht-soft); border:1px solid rgba(192,86,61,.4);}
.hduw-rm > b{font:700 16px/1.2 var(--sans);}
.hduw-rm.gut > b{color:var(--gut-t);} .hduw-rm.schlecht > b{color:var(--schlecht-t);}
.hduw-rm p{margin:0; font:400 15px/1.45 var(--sans); color:var(--mid); max-height:30vh; overflow-y:auto;}
.hduw-weiter{margin-top:6px; min-height:52px;}
/* Bei Wahl/wahr-falsch bleiben die markierten Knoepfe sichtbar, die Rueckmeldung kommt darunter */
.hduw-ant.mit-rm:has(.hduw-opt.richtig) > .hduw-opts{display:flex;}
.hduw-ant.mit-rm:has(.hduw-opt.richtig) > .hduw-opts .hduw-opt:not(.richtig):not(.falsch){display:none;}

/* ── Bilanz ── */
.hduw-bil{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:20px;}
.hduw-ring{--p:0; width:150px; height:150px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(closest-side, var(--bg) 82%, transparent 83% 100%),
    conic-gradient(var(--bronze) calc(var(--p) * 1%), var(--line2) 0);
  margin:10px 0 8px; animation:hduwRein .4s;}
.hduw-ring b{font:500 52px/1 var(--serif);}
.hduw-ring small{font:600 14px/1.2 var(--sans); color:var(--ink3);}
.hduw-bil .hduw-lbl{align-self:flex-start;}
.hduw-zeilen{align-self:stretch; display:flex; flex-direction:column; gap:10px; margin-top:22px;}
.hduw-zl{display:grid; grid-template-columns:1fr 90px 38px; align-items:center; gap:10px; text-align:left;}
.hduw-zl span{font:500 15px/1.2 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hduw-zl i{height:6px; border-radius:3px; background:var(--line2); overflow:hidden;}
.hduw-zl em{display:block; height:100%; background:var(--gut);}
.hduw-zl b{font:600 14px/1 var(--sans); color:var(--ink2); text-align:right;}
.hduw-offen{align-self:stretch; display:flex; flex-wrap:wrap; gap:6px;}
.hduw-ot{padding:7px 12px; border-radius:var(--r-pill); font:500 14px/1.2 var(--sans); background:var(--schlecht-soft); color:var(--schlecht-t);}
.hduw-ot.f{background:var(--mittel-soft); color:var(--mittel-t);}
.hduw-ot.mehr{background:var(--line); color:var(--ink2);}
.hduw-gesichert{display:flex; align-items:center; gap:6px; font:500 13.5px/1 var(--sans); color:var(--gut-t); margin-top:24px;}
.hduw-gesichert .ic{width:16px; height:16px;}
@media (prefers-reduced-motion: reduce){ .hd-uw, .hduw-karte, .hduw-loes, .hduw-rm{animation:none; transition:none;} }

/* ══════════ 3. DER LERNRAUM AM HANDY ══════════ */
body.layout-phone .hdl{gap:14px; padding-bottom:20px;}
/* Kein Titel „Lernen" ueber dem Reiter „Lernen" (Ben, 2026-10-18: die
   Beschriftung steht schon im Reiter). Nur noch fuer Screenreader. */
body.layout-phone .hdl-kopf{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0;}
body.layout-phone .hdl-sec{display:flex; justify-content:space-between; align-items:baseline; margin:10px 2px -4px;
  font:700 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);}

/* Unterwegs: die Karte, die man am Handy am oeftesten antippt. Leder mit
   Messing — dieselbe Familie wie der Notenschnitt, nicht noch ein Glas. */
body.layout-phone .hdl-uw{position:relative; display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:16px 76px 18px 18px; border-radius:var(--r-xl); cursor:pointer;
  background:linear-gradient(160deg, #6a4a2c 0%, #4d3420 55%, #3a2717 100%);
  color:#f7ecd6; box-shadow:0 1px 0 rgba(255,236,200,.18) inset, 0 -1px 0 rgba(0,0,0,.3) inset, var(--sh-2);
  overflow:hidden; -webkit-tap-highlight-color:transparent;}
body.layout-phone .hdl-uw::before{content:''; position:absolute; inset:6px; border-radius:calc(var(--r-xl) - 5px);
  border:1px dashed rgba(247,233,205,.28); pointer-events:none;}
body.layout-phone .hdl-uw:active{transform:scale(.99);}
body.layout-phone .hdl-uw-k{display:inline-flex; align-items:center; gap:6px; font:700 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:#e2c48c;}
body.layout-phone .hdl-uw-k .ic{width:14px; height:14px;}
body.layout-phone .hdl-uw b{font:500 25px/1.15 var(--serif); color:#fbf3e2; margin-top:4px;}
body.layout-phone .hdl-uw small{font:500 14px/1.35 var(--sans); color:rgba(247,236,214,.78);}
body.layout-phone .hdl-uw-go{position:absolute; right:16px; top:50%; margin-top:-26px; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--messing); color:var(--messing-t);
  box-shadow:var(--messing-glanz), 0 4px 10px rgba(0,0,0,.35);}
body.layout-phone .hdl-uw-go .ic{width:20px; height:20px; margin-left:3px; fill:currentColor;}

body.layout-phone .hdl-wand{margin-top:-2px;}

/* Kopf des gewaehlten Zettels */
body.layout-phone .hdl-zk{display:flex; align-items:center; gap:12px; margin:6px 2px -2px;}
body.layout-phone .hdl-zk-t{flex:1; min-width:0;}
/* r-kasten, 2026-10-26: zwei Zeilen — ein langer Kastenname (etwa ein geschickter)
   war nach dem ersten Wort abgeschnitten. */
body.layout-phone .hdl-zk-t b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font:500 21px/1.2 var(--serif); overflow:hidden; overflow-wrap:break-word;}
body.layout-phone .hdl-zk-t small{display:block; font:500 13.5px/1.3 var(--sans); color:var(--ink3); margin-top:3px;}
body.layout-phone .hdl-zk-pct{--p:0; flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:600 15px/1 var(--sans); color:var(--gut-t);
  background:radial-gradient(closest-side, var(--bg) 79%, transparent 80% 100%), conic-gradient(var(--gut) calc(var(--p) * 1%), var(--line2) 0);}
body.layout-phone .hdl-zk-pct i{font-style:normal; font-size:10px; margin-left:1px;}
body.layout-phone .hdl-stift{flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink2); background:transparent; border:1px solid var(--line2);}
body.layout-phone .hdl-stift .ic{width:18px; height:18px;}

/* ── DER KARTEIKASTEN ──
   Von vorn-oben: hinten die Innenwand, vier Faecher mit Registerkarten in der
   Farbe ihres Fachs, in jedem ein Kartenstapel (Hoehe ~ Wurzel der Anzahl,
   damit 2 und 30 Karten beide lesbar bleiben). Vorn die Holzblende mit dem
   Messingschild. Das gewaehlte Fach hebt seinen Stapel an. */
body.layout-phone .hdl-kgrp{display:flex; flex-direction:column; gap:12px;}
body.layout-phone .hdl-kasten{display:block !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important;}
body.layout-phone .hdk{position:relative; border-radius:16px 16px 14px 14px; padding:12px 10px 0;
  background:var(--holz-maserung, none), linear-gradient(180deg, #3b2817 0%, #2a1b0e 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,220,170,.12) inset, var(--sh-2);}
body.layout-phone .hdk-innen{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; height:132px; align-items:end;
  padding:0 2px; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, #1f140a 0%, #2b1c0f 100%); box-shadow:0 6px 14px rgba(0,0,0,.45) inset;}
body.layout-phone .hdk-fach{position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;
  background:none; border:0; padding:0 3px; color:inherit; -webkit-tap-highlight-color:transparent;}
body.layout-phone .hdk-reiter{position:absolute; left:3px; right:3px; bottom:calc(var(--h) + 20px); height:30px;
  border-radius:7px 7px 2px 2px; background:var(--farbe); opacity:.9;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 2px 4px rgba(0,0,0,.4);
  transition:bottom .3s cubic-bezier(.3,1.3,.5,1);}
body.layout-phone .hdk-reiter i{position:absolute; top:5px; left:7px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:700 11.5px/1 var(--sans); font-style:normal;
  background:rgba(255,255,255,.88); color:#2a1b0e;}
body.layout-phone .hdk-stapel{display:block; height:calc(var(--h) + 22px); border-radius:3px 3px 0 0;
  background:#fbf6e9 repeating-linear-gradient(180deg, #fbf6e9 0 3px, #ddd3bd 3px 4px);
  box-shadow:0 -1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(0,0,0,.3);
  transition:height .3s cubic-bezier(.3,1.3,.5,1), transform .3s cubic-bezier(.3,1.3,.5,1);}
body.layout-phone .hdk-fach.leer .hdk-stapel{height:12px; background:rgba(255,255,255,.06); box-shadow:none;}
body.layout-phone .hdk-fach.leer .hdk-reiter{bottom:24px; opacity:.4;}
body.layout-phone .hdk-fach.on .hdk-stapel{height:calc(var(--h) + 34px);}
body.layout-phone .hdk-fach.on .hdk-reiter{bottom:calc(var(--h) + 32px); opacity:1;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 2px #f1dfb6, 0 4px 10px rgba(0,0,0,.5);}
/* Zahl und Name sitzen auf der Blende, unter dem Fach */
body.layout-phone .hdk-zahl, body.layout-phone .hdk-fach small{position:absolute; left:0; right:0; text-align:center; z-index:2; pointer-events:none;}
body.layout-phone .hdk-zahl{bottom:-38px; font:500 24px/1 var(--serif); color:#f3e3c2; text-shadow:0 1px 0 rgba(0,0,0,.5);}
body.layout-phone .hdk-fach small{bottom:-56px; font:600 10.5px/1.15 var(--sans); color:rgba(243,227,194,.72); white-space:nowrap;}
body.layout-phone .hdk-fach.on .hdk-zahl{color:#ffe7b0;}
body.layout-phone .hdk-fach.on small{color:#f1dfb6;}
body.layout-phone .hdk-front{position:relative; z-index:1; height:70px; margin:0 -10px; border-radius:0 0 14px 14px;
  background:var(--holz-maserung, none), linear-gradient(180deg, #6b4a2a 0%, #573b21 45%, #4a3119 100%);
  box-shadow:0 1px 0 rgba(255,225,180,.3) inset, 0 -6px 10px rgba(0,0,0,.35);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px;}
body.layout-phone .hdk-schild{display:none;}
body.layout-phone .hdk.leer .hdk-schild{display:inline-block; margin-bottom:24px; padding:4px 12px; border-radius:3px;
  background:var(--messing); color:var(--messing-t); font:600 12px/1.2 var(--sans); box-shadow:var(--messing-glanz);}
body.layout-phone .hdk.leer .hdk-fach small{color:rgba(243,227,194,.4);}

body.layout-phone .hdl-links{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:-2px;}
body.layout-phone .hdl-links button{min-height:40px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line2);
  background:transparent; color:var(--ink2); font:600 13.5px/1 var(--sans); display:inline-flex; align-items:center; gap:6px;}
body.layout-phone .hdl-links .ic{width:15px; height:15px;}

/* Der Messingknopf ist die Schublade des Kastens: so breit wie er. */
body.layout-phone .hdl .lrp-akt{display:flex; flex-direction:column;}
body.layout-phone .hdl .lrp-akt .lk-fbtn.haupt{width:100%; max-width:none; margin:0; min-height:64px; border-radius:var(--r-l);}
body.layout-phone .hdl-links > *{margin:0 !important;}

/* ══════════ 4. DAS BLATT AM HANDY ══════════ */
/* Oben rechts: Rueckgaengig · ‹ 2/6 › · ⋯ · KI */
body.layout-phone #editor .pagespill .pp-btn[onclick^="redo"],
body.layout-phone #editor .pagespill .pp-btn[onclick^="openPageSheet"],
body.layout-phone #editor .pagespill .pp-btn[onclick^="openPlusMenu"]{display:none;}
body.layout-phone #editor .pagespill .pp-sep:nth-of-type(2){display:none;}
body.layout-phone #editor .pagespill .pp-btn{width:40px; height:40px;}
body.layout-phone #editor #pageinfo{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:40px;
  padding:0 4px; font:600 13.5px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--mid); cursor:pointer;}
body.layout-phone #editor #pageinfo .pp-grp{display:none;}
body.layout-phone #editor .hd-ki{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 7px; margin-left:4px;
  border-radius:var(--r-pill); background:rgba(61,91,214,.12); border:1px solid rgba(61,91,214,.28); color:var(--ink);}
body.layout-phone #editor .hd-ki .t-ki-orb{width:20px; height:20px; border-radius:50%; background:var(--orb); box-shadow:0 0 8px rgba(61,91,214,.5);}
body.layout-phone #editor .hd-ki b{font:700 13.5px/1 var(--sans); letter-spacing:.02em;}
:root[data-theme="dark"] body.layout-phone #editor .hd-ki{background:rgba(110,140,255,.14); border-color:rgba(140,165,255,.3);}
body.layout-phone .jdock{display:none !important;}

/* Unten: EINE Zeile, grosse Knoepfe. Die Schiene blaettert nicht mehr — was
   nicht in die Zeile passt, steht unter „Mehr". Ist ein solches Werkzeug
   gerade aktiv, steht es solange mit in der Zeile. */
body.layout-phone #ebar .ez-schiene{transform:none !important; width:auto !important; display:flex;}
body.layout-phone #ebar .ez-seite{display:contents;}
body.layout-phone #ebar :is(#t-shape, #t-instr, #t-image, #t-tape, #t-zettel, #t-lupe):not(.on),
body.layout-phone #ebar :is(#ez-setup, #ez-vor2, .ez-tr2, #ez-blaetter, #t-ki){display:none !important;}
body.layout-phone #ebar .ez-reihe1{justify-content:space-between; gap:2px;}
body.layout-phone #ebar .etools{flex:1; overflow:visible;}
body.layout-phone #ebar .ez-schiene{justify-content:space-between; flex:1;}
body.layout-phone #ebar .ez-reihe1 .ebtn.tool{width:46px; height:46px; border-radius:14px;}
body.layout-phone #ebar .ez-reihe1 .ebtn.tool .ic{width:23px; height:23px;}
body.layout-phone #ebar .hd-mehr{color:var(--ink2);}
body.layout-phone #ebar .hd-mehr{border-left:1px solid var(--line2); border-radius:0 14px 14px 0 !important; margin-left:2px;}

/* Werkzeuge- und ⋯-Blatt */
.hdw{padding:4px 4px 6px;}
.hdw-t{font:700 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:4px 4px 14px;}
.hdw-gitter{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px;}
.hdw-vier{grid-template-columns:repeat(4,1fr);}
.hdw-k{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 4px 12px; border-radius:var(--r-l);
  background:var(--panel); border:1px solid var(--line2); color:var(--ink);}
.hdw-k span{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bronzesoft); color:var(--bronze2);}
.hdw-k .ic{width:22px; height:22px;}
.hdw-k b{font:600 13px/1.15 var(--sans);}
.hdw-k.on{border-color:var(--bronze); box-shadow:0 0 0 1px var(--bronze) inset;}
.hdw-zeile{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 8px; border:0; border-top:1px solid var(--line);
  background:none; color:var(--ink); font:500 16px/1.2 var(--sans); text-align:left;}
.hdw-zeile .ic{width:20px; height:20px; color:var(--ink2);}

/* KI-Blatt */
.hdk-ki{padding:2px 2px 4px;}
.hdki-kopf{display:flex; align-items:center; gap:10px; margin:2px 2px 14px;}
.hdki-kopf .t-ki-orb{width:24px; height:24px; border-radius:50%; background:var(--orb); box-shadow:0 0 12px rgba(61,91,214,.5); flex:0 0 auto;}
.hdki-kopf b{flex:1; min-width:0; font:500 21px/1.1 var(--serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hdki-verlauf{display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--line2); background:none; color:var(--ink2); font:600 13px/1 var(--sans);}
.hdki-verlauf .ic{width:15px; height:15px;}
.hdki-gross{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.hdki-gross button{display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; padding:14px 14px 15px; min-width:0;
  border-radius:var(--r-l); background:var(--panel); border:1px solid var(--line2); color:var(--ink);}
.hdki-gross button span{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bronzesoft); color:var(--bronze2); margin-bottom:2px; box-shadow:0 0 0 1px var(--bronzeline) inset;}
.hdki-gross button:first-child{background:linear-gradient(160deg, rgba(161,121,63,.16), rgba(161,121,63,.05)); border-color:var(--bronzeline);}
.hdki-gross button:first-child span{background:var(--bronze-grad); color:#fffdf7; box-shadow:none;}
:root[data-theme="dark"] .hdki-gross button:first-child span{color:#2a1f0f;}
.hdki-gross .ic{width:21px; height:21px;}
.hdki-gross b{font:600 16px/1.2 var(--sans);}
.hdki-gross small{font:400 13px/1.35 var(--sans); color:var(--ink3);}
.hdki-klein-t{font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:16px 4px 8px;}
.hdki-klein{display:flex; gap:8px; margin:0 0 14px;}
.hdki-klein button{flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:0 10px;
  border-radius:var(--r-m); border:1px solid var(--line2); background:none; color:var(--ink2); font:600 13.5px/1.15 var(--sans); text-align:left;}
.hdki-klein .ic{flex:0 0 auto;}
.hdki-klein .ic{width:17px; height:17px;}
.hdki-frag{display:flex; gap:8px; align-items:center;}
.hdki-frag input{flex:1; min-height:50px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line2);
  background:var(--sunk); color:var(--ink); font:400 16px/1 var(--sans);}
.hdki-frag button{width:50px; height:50px; flex:0 0 auto; border-radius:50%; border:0; background:var(--bronze-grad); color:#fffdf7; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-bronze);}
:root[data-theme="dark"] .hdki-frag button{color:#2a1f0f;}
.hdki-frag input:focus{outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px var(--bronzesoft);}
.hdki-frag .ic{width:20px; height:20px;}

/* ══════════ 5. DIE LERN-BUEHNE AM HANDY ══════════
   Drei Knoepfe in einer Reihe („Abbrechen · Gleich Aufgaben · Los geht's")
   passen nicht auf 390 px — der Hauptknopf wurde abgeschnitten. Am Handy steht
   er deshalb allein und ganz breit unten (Daumen), die Nebenwege darueber. */
body.layout-phone .fk .fk-leiste{flex-wrap:wrap; gap:8px;}
body.layout-phone .fk .fk-leiste > .fk-r{order:2; flex:1 1 100%; display:flex;}
body.layout-phone .fk .fk-leiste > .fk-l{order:1; flex:1 1 100%; display:flex; gap:8px; justify-content:space-between; align-items:center;}
body.layout-phone .fk .fk-leiste > .fk-l:empty{display:none;}
body.layout-phone .fk .fk-leiste .fk-haupt{flex:1; min-width:0; width:100%; height:56px;}
body.layout-phone .fk .fk-leiste .fk-neben{height:46px; padding:0 14px; flex:0 1 auto;}
body.layout-phone .fk .fk-leiste .fk-neben.leise{padding:0 6px;}

/* ══════════ 6. KALENDER UND NOTEN: das Wichtige zuerst ══════════
   Am Handy liest man von oben nach unten und hoert frueh auf. Also:
   Kalender — Monat, dann die Termine, ganz unten erst der Faecherfilter.
   Noten — Schnitt, dann die Faecher; Einschaetzung und Was-waere-wenn danach. */
body.layout-phone .calx{display:flex !important; flex-direction:column;}
body.layout-phone .calx > .calx-main{order:1;}
body.layout-phone .calx > .calx-right{order:2;}
body.layout-phone .calx > .calx-side{order:3;}
body.layout-phone .gwrap{display:flex !important; flex-direction:column;}
body.layout-phone .gwrap > .gstand{display:contents;}
body.layout-phone .gwrap > .gr-head{order:0;}
body.layout-phone .gwrap .gr-total{order:1;}
body.layout-phone .gwrap > .gcards{order:2;}
body.layout-phone .gwrap .gr-coach{order:3;}
body.layout-phone .gwrap > *:not(.gstand), body.layout-phone .gwrap .gr-total, body.layout-phone .gwrap .gr-coach{margin-top:0; margin-bottom:12px;}

/* Kalenderkopf: Titel buendig mit dem Umschalter darunter, nie abgeschnitten
   (schmale Telefone nehmen „Okt. 2026"), und das Plus mittig im Goldknopf —
   das unsichtbare „Termin" stand als eigene Zeile im Raster und schob es hoch. */
body.layout-phone .calx-main .cal-head h2{padding-left:5px; overflow:visible; text-overflow:clip; align-self:center; line-height:1.1;}
@media (max-width:380px){
  body.layout-phone .calx-main .cal-head .mo-voll{display:none !important;}
  body.layout-phone .calx-main .cal-head .mo-kurz{display:inline !important;}
}
body.layout-phone .calx-main .cal-head .cal-add{display:flex !important; align-items:center; justify-content:center; line-height:0;}
body.layout-phone .calx-main .cal-head .cal-add .ic{display:block;}

/* Unterwegs · Woraus als Liste */
.hduw-liste{display:flex; flex-direction:column; border-radius:var(--r-l); background:var(--panel); border:1px solid var(--line2); overflow:hidden;}
.hduw-z{display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px; background:none; border:0; border-top:1px solid var(--line);
  color:var(--ink); text-align:left; -webkit-tap-highlight-color:transparent;}
.hduw-z:first-child{border-top:0;}
.hduw-z:disabled{opacity:.45;}
.hduw-z-dot{flex:0 0 auto; width:10px; height:34px; border-radius:5px; background:var(--f);}
.hduw-z-t{flex:1; min-width:0;}
.hduw-z-t b{display:block; font:600 16px/1.25 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hduw-z-t small{display:block; font:500 13px/1.3 var(--sans); color:var(--ink3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hduw-z-r{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--line2); transition:border-color .15s, box-shadow .15s;}
.hduw-z.on{background:var(--bronzesoft);}
.hduw-z.on .hduw-z-t small{color:var(--bronze2);}
.hduw-z.on .hduw-z-r{border-color:var(--bronze); box-shadow:inset 0 0 0 5px var(--panel), inset 0 0 0 12px var(--bronze);}

/* ══════════ 5. GESTEN ══════════ */
#hd-zurueck{position:fixed; left:0; top:0; z-index:300; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0;
  background:var(--glass-strong); color:var(--ink2); border:1px solid var(--glass-line); box-shadow:var(--sh-2);
  transform:translateX(-60px); transition:opacity .15s, background .15s, color .15s;}
#hd-zurueck.da{opacity:1; transition:opacity .15s, background .15s, color .15s;}
#hd-zurueck.bereit{background:var(--bronze-grad); color:#fffdf7; border-color:transparent;}
:root[data-theme="dark"] #hd-zurueck.bereit{color:#2a1f0f;}
#hd-zurueck .ic{width:22px; height:22px;}
/* Fenster von unten: der Griff ist der Anfasser — breiter und gut zu treffen. */
#sk-sheet .skh-griff{width:44px; height:5px; margin:4px auto 10px; position:relative;}
#sk-sheet .skh-griff::before{content:''; position:absolute; left:-30px; right:-30px; top:-14px; bottom:-14px;}
.hd-uw .hduw-wisch{display:block;}
.hduw-rm .hduw-wisch{margin-top:2px;}

/* ══════════ 6. DER ABSTAND OBEN ══════════
   Ben, 2026-10-14 (iOS-App): „auf dem Handy ist alles ein bisschen nach unten
   verschoben — oben ein riesen Block." Der Abstand fuer Statuszeile und Dynamic
   Island (--sat, ~59 px) stand DOPPELT da: #app hat ihn als padding-top, und der
   Kopf am Handy noch einmal als margin-top (calc(4px + var(--sat)), app.css).
   Im Browser-Tab ist --sat 0 — dort fiel es nie auf; in der App und als
   Home-Bildschirm-App kostete es 59 px. Gemessen: Kopf bei 122 statt 63 px. */
body.layout-phone #topbar{margin-top:4px !important;}
/* Dasselbe im Blatt: #ewrap liegt mit inset:0 ueber dem ganzen #editor (auch ueber
   dessen padding-top) und hielt oben 76 px frei — die Leiste darueber steht aber
   bei 16 px + --sat. Mit Dynamic Island lag der Blatt-Titel halb unter ihr. */
body.layout-phone #ewrap{padding-top:calc(70px + var(--sat));}

/* ══════════ 7. BENS IPHONE-LISTE (2026-10-18) ══════════ */

/* 4 · Sanftes Federn statt harter Wand: auch eine Seite, die nicht rollt, laesst
   sich ein Stueck ziehen und federt zurueck (iOS tut das nur bei rollbaren
   Flaechen — darum ist der Inhalt einen Pixel hoeher als der Rahmen). */
body.layout-phone #view{overscroll-behavior-y:auto;}
body.layout-phone #view{position:relative;}
body.layout-phone #view::before{content:''; position:absolute; top:0; left:0; width:1px; height:calc(100% + 1px); pointer-events:none; visibility:hidden;}

/* 5 · Die KI-Kugel oben: das Pulsieren rechnete den Schatten in jedem Bild neu
   (box-shadow-Animation) — am Handy ruckelte das. Jetzt atmet sie nur noch ueber
   transform/opacity, das macht der Grafikchip allein. */
body.layout-phone .ki-pill .orb-s{animation:none; position:relative;
  box-shadow:0 0 14px rgba(90,108,240,.5);}
body.layout-phone .ki-pill .orb-s::after{content:''; position:absolute; inset:-5px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(110,130,255,.45), transparent); opacity:.5;
  animation:hdOrbAtem 5.2s ease-in-out infinite; will-change:transform, opacity;}
@keyframes hdOrbAtem{0%,100%{transform:scale(.85); opacity:.35;} 50%{transform:scale(1.15); opacity:.7;}}

/* 12 · Suche und KI-Feld wachsen aus ihrem Knopf (Ben, 2026-10-24: „ruckelt
   noch … das soll Apple-Niveau werden").
   Vorher wuchsen beide Felder ueber `max-width` im Fluss der Leiste, waehrend
   die Nachbarn per `max-width`/`display:none` wichen: jedes Bild rechnete die
   ganze Zeile neu, und `max-width:none` fuhr gar nicht, es sprang.
   Jetzt bleibt die Zeile, wie sie ist. Das Feld liegt als eigene Kapsel ueber
   ihr (absolut, nichts darunter muss neu gelegt werden), startet genau auf dem
   Knopf und zieht seine Kanten auf eine Kurve wie bei iOS-Blaettern auf die
   volle Breite. Die Nachbarn blenden nur aus (Deckkraft, leichtes Schrumpfen —
   beides macht der Grafikchip allein), der Inhalt folgt kurz danach.
   Die Startlage des Knopfs misst searchExpand / kiCmd (--ts-l/-r, --kp-l/-r). */
body.layout-phone #topbar{--hd-kurve:cubic-bezier(.32,.72,0,1); --hd-auf:.46s; --hd-zu:.34s;}

/* Nachbarn: bleiben stehen, werden unsichtbar. */
body.layout-phone #topbar #avatar,
body.layout-phone #topbar #ki-pill,
body.layout-phone #topbar .pro-pill,
body.layout-phone #topbar #topsearch .ts-ic{transition:opacity .2s ease .08s, transform var(--hd-zu) var(--hd-kurve);}
body.layout-phone #topbar.suche #avatar,
body.layout-phone #topbar.suche #ki-pill,
body.layout-phone #topbar.suche .pro-pill,
body.layout-phone #topbar.cmd #avatar,
body.layout-phone #topbar.cmd #ki-pill,
body.layout-phone #topbar.cmd .pro-pill,
body.layout-phone #topbar.cmd #topsearch .ts-ic{opacity:0; transform:scale(.9); pointer-events:none;
  transition:opacity .14s ease, transform var(--hd-auf) var(--hd-kurve);}

/* — Suche — Der Kasten selbst bleibt die Lupe (36 px im Fluss); Kapsel, Feld
   und Kreuz haengen absolut an der Leiste. */
body.layout-phone #topsearch,
body.layout-phone #topsearch.open{position:static; flex:0 0 36px; width:36px; min-width:36px; max-width:36px;
  height:36px; padding:0 !important; gap:0; overflow:visible; transition:none;
  background:transparent !important; border:0 !important; box-shadow:none !important;}
body.layout-phone #topsearch::before{content:''; position:absolute; z-index:3; pointer-events:none;
  top:0; bottom:0; left:var(--ts-l, auto); right:var(--ts-r, 0px); box-sizing:border-box;
  border-radius:18px; background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:0 2px 6px rgba(38,34,27,.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  opacity:0; transition:left var(--hd-zu) var(--hd-kurve), right var(--hd-zu) var(--hd-kurve), opacity 0s linear var(--hd-zu);}
body.layout-phone #topbar.suche #topsearch::before{left:0; right:0; opacity:1;
  transition:left var(--hd-auf) var(--hd-kurve), right var(--hd-auf) var(--hd-kurve), opacity 0s;}
/* Die Lupe reist mit der linken Kante. Ihr eigenes Glas geht im ersten Bild
   aus (die Kapsel liegt dann deckungsgleich darauf) und kommt erst zurueck,
   wenn die Kapsel wieder auf ihr angekommen ist. */
body.layout-phone #topsearch .ts-ic{position:relative; z-index:4;
  transition:transform var(--hd-zu) var(--hd-kurve), background-color 0s linear var(--hd-zu),
    border-color 0s linear var(--hd-zu), box-shadow 0s linear var(--hd-zu), opacity .2s ease;}
body.layout-phone #topbar.suche #topsearch .ts-ic{transform:translateX(calc(-1 * var(--ts-l, 0px)));
  background:transparent; border-color:transparent; box-shadow:none; color:var(--bronze);
  transition:transform var(--hd-auf) var(--hd-kurve), background-color 0s, border-color 0s, box-shadow 0s;}
body.layout-phone #topsearch input{display:block; position:absolute; z-index:4; top:0; left:38px; right:40px;
  width:auto; height:36px; padding:0; opacity:0; visibility:hidden; transform:translateX(14px);
  transition:opacity .12s linear, transform var(--hd-zu) var(--hd-kurve), visibility 0s linear .12s;}
body.layout-phone #topbar.suche #topsearch input{opacity:1; visibility:visible; transform:none;
  transition:opacity .22s linear .1s, transform var(--hd-auf) var(--hd-kurve), visibility 0s;}
body.layout-phone #topsearch .ts-x{display:flex; position:absolute; z-index:4; top:3px; right:3px;
  opacity:0; visibility:hidden; transform:scale(.6);
  transition:opacity .12s linear, transform var(--hd-zu) var(--hd-kurve), visibility 0s linear .12s;}
body.layout-phone #topbar.suche #topsearch .ts-x{opacity:1; visibility:visible; transform:none;
  transition:opacity .2s linear .14s, transform var(--hd-auf) var(--hd-kurve) .06s, visibility 0s;}

/* — KI-Feld — dieselbe Kapsel, aus der Pille heraus. Die Kugel steht links
   im Feld und reist so mit der linken Kante dorthin, wo sie dann bleibt. */
body.layout-phone .kicmd{position:absolute; z-index:3; top:0; bottom:auto; transform:none;
  left:var(--kp-l, auto); right:var(--kp-r, 0px); width:auto; max-width:none; min-width:0; height:36px;
  flex:none; margin:0; padding:0 4px 0 7px; gap:6px; border-width:1px; border-color:var(--glass-line);
  opacity:0; pointer-events:none;
  transition:left var(--hd-zu) var(--hd-kurve), right var(--hd-zu) var(--hd-kurve), opacity .16s linear .16s;}
/* `width:auto` auch hier: `#topbar.cmd .kicmd` (app.css) setzt sonst
   min(410px, 100% − 56px) — dann galt `right` nicht, rechts blieb ein 56 px
   breiter Block frei, und das Feld schob sich nur seitlich statt zu wachsen. */
body.layout-phone #topbar.cmd .kicmd{left:0; right:0; width:auto; max-width:none; opacity:1; pointer-events:auto;
  padding:0 4px 0 7px; border-color:var(--glass-line);
  transition:left var(--hd-auf) var(--hd-kurve), right var(--hd-auf) var(--hd-kurve), opacity .1s linear;}
/* Die Kugel im Feld pulsierte ueber box-shadow — das malte die ganze
   Glaskapsel in jedem Bild neu, auch waehrend sie aufzog (vgl. 5). */
body.layout-phone .kicmd .orb-s{animation:none; box-shadow:0 0 10px rgba(90,108,240,.45);}
body.layout-phone .kicmd input,
body.layout-phone .kicmd .kicmd-send{opacity:0; transform:translateX(10px);
  transition:opacity .1s linear, transform var(--hd-zu) var(--hd-kurve);}
body.layout-phone #topbar.cmd .kicmd input,
body.layout-phone #topbar.cmd .kicmd .kicmd-send{opacity:1; transform:none;
  transition:opacity .22s linear .12s, transform var(--hd-auf) var(--hd-kurve);}

@media (prefers-reduced-motion: reduce){
  body.layout-phone #topbar{--hd-auf:.01s; --hd-zu:.01s;}
}

/* 6 · Heftansicht: Kopf entzerrt. „Neu" wird ein runder Plus-Knopf, „Gruppe
   bilden" ein Symbol, Reihenfolge/Zuletzt ein kleiner Umschalter. */
body.layout-phone .vhead h1{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
body.layout-phone .vhead .vact.primary{width:40px; height:40px; padding:0 !important; border-radius:50%;
  font-size:0 !important; gap:0; justify-content:center;}
body.layout-phone .vhead .vact.primary .ic{width:20px; height:20px; margin:0;}
body.layout-phone .plist-h{display:flex; align-items:center; gap:8px; margin:6px 2px 10px;}
body.layout-phone .plist-h .plist-line{display:none;}
body.layout-phone .plist-h .plist-n{flex:1; font-size:14px;}
body.layout-phone .plist-grp{order:3; margin:0 !important; width:36px; height:36px; padding:0 !important; justify-content:center;
  font-size:0 !important; border-radius:50%;}
body.layout-phone .plist-grp .ic{width:17px; height:17px;}
body.layout-phone .plist-sort{order:2; display:flex; gap:2px; padding:3px; border-radius:var(--r-pill);
  background:var(--sunk, rgba(38,34,27,.06)); border:1px solid var(--line);}
body.layout-phone .plist-sort .plist-tr{display:none;}
body.layout-phone .plist-sort button{padding:6px 11px !important; border:0 !important; border-radius:var(--r-pill);
  font:600 12.5px/1 var(--sans); color:var(--ink3);}
body.layout-phone .plist-sort button.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(38,34,27,.14);}
/* Die rote Fahne (zuletzt bearbeitetes Blatt) sass auf der Mini-Vorschau. Jetzt
   haengt sie als kleines Lesezeichen an der Oberkante der Zeile. */
body.layout-phone .pitem .ps-ribbon{display:none !important;}
body.layout-phone .pitem:has(.ps-ribbon){position:relative;}
body.layout-phone .pitem:has(.ps-ribbon)::after{content:''; position:absolute; top:0; right:56px; width:10px; height:18px;
  background:#c0443a; clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); pointer-events:none;}

/* 10 · Kalender: der Umschalter war ein schwerer Block. Jetzt schmal und
   gestaucht, hell hinterlegt. Das Plus bleibt die runde Goldkugel (Ben,
   2026-10-18: der Ring daneben war eine Ellipse, „so wie vorher"). */
body.layout-phone .calx-main .cal-head .cal-toggle{height:34px !important; padding:3px !important; border-radius:var(--r-pill) !important;
  background:var(--sunk, rgba(38,34,27,.06)) !important; align-self:center;}
body.layout-phone .calx-main .cal-head .cal-toggle button{border-radius:var(--r-pill) !important; font:600 12.5px/1 var(--sans) !important; padding:0 4px !important;}
body.layout-phone .calx-main .cal-head .cal-add{align-self:center; justify-self:end; aspect-ratio:1;}
/* Woche: Mo–Fr fuellen die Breite, Sa/So liegen rechts daneben — geführt wischen
   (rastet ein). Die Zeitleiste rollt mit; dafür bleibt „heute" sichtbar. */
body.layout-phone #wg-holder{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;}
body.layout-phone #wg-holder::-webkit-scrollbar{display:none;}
/* KEIN seitliches Polster im rollenden Blatt (Ben, 2026-10-24: „rechts ist
   noch ein weißer Spalt"). Die 2 × 8 px rollten mit: eingerastet wurde auf die
   Kante der Woche, der Rand dahinter blieb aber rollbar — am Ende des Wischs
   stand er als heller Streifen rechts, und handy.js setzt den Anfang auf 0,
   also lag links derselbe Streifen. Ohne Polster sind Rastpunkt und Rollende
   dasselbe: Mo–Fr oder Mi–So fuellen genau die Breite. */
body.layout-phone #wg-holder{padding-left:0 !important; padding-right:0 !important;}
body.layout-phone #wg-holder > .wg{width:calc(52px + (100% - 52px) * 7 / 5); min-width:calc(52px + (100% - 52px) * 7 / 5); max-width:none; margin-inline:0;}
/* Die Ecken des Blatts (.cal-paper::after, inset 0) lagen im rollenden Kasten
   und wanderten beim Wischen mit nach innen. */
body.layout-phone #wg-holder::after{display:none;}
/* Eine sichtbare Rollleiste in der Stundenspalte machte die Tagesspalten
   schmaler als ihre Koepfe. */
body.layout-phone #wg-holder .wg-roll{scrollbar-width:none;}
body.layout-phone #wg-holder .wg-roll::-webkit-scrollbar{display:none;}
body.layout-phone #wg-holder > .wg::before, body.layout-phone #wg-holder > .wg::after{content:''; position:absolute; top:0; width:1px; height:1px; scroll-snap-align:start;}
body.layout-phone #wg-holder > .wg{position:relative;}
body.layout-phone #wg-holder > .wg::before{left:0;}
body.layout-phone #wg-holder > .wg::after{right:0; scroll-snap-align:end;}
body.layout-phone .hd-wo-hinweis{display:flex; justify-content:center; gap:6px; margin:6px 0 -2px; font:600 11.5px/1 var(--sans); color:var(--ink3);}
body.layout-phone .hd-wo-hinweis i{width:6px; height:6px; border-radius:50%; background:var(--line2);}
body.layout-phone .hd-wo-hinweis i.an{background:var(--bronze);}

/* 11 · Noten: Ueberschrift links; die Fachkarte zeigt hoechstens zwei Noten und
   „+N" (siehe handy.js), der „zuletzt"-Zusatz entfaellt. */
body.layout-phone .gr-head{justify-content:flex-start;}
body.layout-phone .gr-head h1{text-align:left; margin-left:2px;}
/* Ein unsichtbarer Abstandhalter (gr-head-sp, 104 px, fuer die iPad-Mitte) stand am
   Handy VOR der Ueberschrift und schob sie in die Mitte. */
body.layout-phone .gr-head .gr-head-sp{display:none !important;}
/* Ohne sichtbaren Titel „Noten" (Ben, 2026-10-18) stehen Eintragen, Skala und
   „Aus Bild" in einer Zeile — „Aus Bild" brach sonst allein in eine zweite.
   Am Telefon nur das Symbol; der Name bleibt fuer Screenreader im Knopf. */
body.layout-phone .gr-head{flex-wrap:nowrap;}
body.layout-phone .gr-head .vact:not(.primary){width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; font-size:0; gap:0;}
body.layout-phone .gr-head .vact:not(.primary) .ic{width:18px; height:18px; margin:0;}
body.layout-phone .gcard-chips{flex-wrap:nowrap; gap:6px;}
body.layout-phone .gcard-chips .gchip.hd-weg{display:none !important;}
body.layout-phone .gcard-chips .hd-mehr-chip{min-width:34px; height:32px; padding:0 8px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font:700 13px/1 var(--sans); color:var(--ink2); background:var(--sunk, rgba(38,34,27,.06)); border:1px solid var(--line2);}

/* 15 · Meldungen am Handy: oben unter der Statuszeile, schmal, eine Zeile Titel
   und eine Zeile Text — ohne „SKRIPTORIUM · jetzt"-Kopf und nicht mehr als
   dicke Karte ueber der Leiste. Wegwischen nach oben (wischWeg). */
body.layout-phone #banner{top:calc(6px + var(--sat, 0px)) !important; bottom:auto !important; left:12px !important; right:12px !important; gap:6px;}
body.layout-phone:has(#editor.on) #banner{bottom:auto !important;}
body.layout-phone .bnr{padding:8px 14px 8px 8px; gap:10px; border-radius:18px; align-items:center;
  box-shadow:0 1px 1px rgba(255,255,255,.3) inset, 0 8px 24px rgba(20,15,8,.28);}
body.layout-phone .bnr-k{display:none;}
body.layout-phone .bnr-ic{width:30px; height:30px; border-radius:9px; margin:0;}
body.layout-phone .bnr-ic .ic{width:16px; height:16px;}
body.layout-phone .bnr-titel{font:600 14px/1.25 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body.layout-phone .bnr-text{font-size:13px; -webkit-line-clamp:2;}
body.layout-phone #banner > .bnr.bnr-kurz{align-self:center;}
body.layout-phone #banner > .bnr:nth-child(n+3){display:none;}
@keyframes hdBnrRein{from{opacity:0; transform:translateY(-18px) scale(.97);} to{opacity:1; transform:none;}}
@keyframes hdBnrRaus{to{opacity:0; transform:translateY(-16px) scale(.97);}}
body.layout-phone .bnr{animation:hdBnrRein .28s var(--spring, cubic-bezier(.2,.9,.3,1.2)) both;}
body.layout-phone .bnr-raus{animation:hdBnrRaus .2s ease both;}

/* 8 · Lernraum: „Kurz abfragen" gehoert zum gewaehlten Zettel — ein zweiter Weg
   direkt unter dem grossen Knopf, leiser als er (Leder statt Messing). */
body.layout-phone .hdl-uw2{display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 14px 10px 10px;
  border-radius:var(--r-l); text-align:left; color:#f7ecd6;
  background:linear-gradient(160deg, #5f4228 0%, #4a3220 60%, #3a2717 100%);
  border:1px solid rgba(226,193,133,.28); box-shadow:0 1px 0 rgba(255,236,200,.14) inset, var(--sh-1);}
body.layout-phone .hdl-uw2:active{transform:scale(.99);}
body.layout-phone .hdl-uw2-ic{flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--messing); color:var(--messing-t); box-shadow:var(--messing-glanz);}
body.layout-phone .hdl-uw2-ic .ic{width:20px; height:20px;}
body.layout-phone .hdl-uw2-t{flex:1; min-width:0;}
body.layout-phone .hdl-uw2-t b{display:block; font:600 16px/1.2 var(--sans); color:#fbf3e2;}
body.layout-phone .hdl-uw2-t small{display:block; font:500 12.5px/1.3 var(--sans); color:rgba(247,236,214,.75); margin-top:2px;}
body.layout-phone .hdl-uw2-go{font:400 24px/1 var(--sans); color:#e2c48c;}

/* ══════════ 8. BENS LISTE (2026-10-24) ══════════ */

/* Noten-Kopf: „Aus Bild" (Kamera) links neben die Skala, „Note eintragen"
   nach rechts — getauscht (Ben: „sollte getauscht werden"). */
body.layout-phone .gr-head .vact:not(.primary){order:2; margin-left:0;}
body.layout-phone .gr-head .gskala{order:3;}
body.layout-phone .gr-head .vact.primary{order:4; margin-left:auto;}

/* Was waere wenn: der Drehregler statt der sechs Felder. Die grosse Zahl ueber
   dem Band faellt weg — die Note steht im Regler und im Chip. */
body.layout-phone .ww-rad .nwahl{margin:10px 0 4px;}
body.layout-phone .ww-rad .nw-kopf{display:none;}

/* Die finale Abfrage (handy.js, 2b): dieselbe Buehne wie Unterwegs, aber eine
   Aufgabe mit Antwortfeld darunter — alles rollt, weil die Tastatur Platz will. */
.hdfa-info{margin:14px 0 4px; padding:14px 16px; border-radius:var(--r-l); background:var(--panel); border:1px solid var(--line);}
.hdfa-info p{margin:0; font:400 15px/1.45 var(--sans); color:var(--ink2);}
.hdfa-info small{display:block; margin-top:8px; font:500 13px/1.35 var(--sans); color:var(--ink3);}
.hdfa-roll{display:flex; flex-direction:column; gap:14px; padding-top:4px;}
.hdfa-karte{max-height:none; overflow:visible; flex:0 0 auto; animation:hduwRein .22s cubic-bezier(.2,.9,.3,1);}
.hdfa-karte .hduw-inhalt{min-height:0; justify-content:flex-start; gap:10px; padding-bottom:20px;}
.hdfa-q{font-size:20px;}
.hdfa-kontext{margin:0; font:400 15px/1.45 var(--sans); color:#4a4336;}
.hdfa-mat{overflow-x:auto; font-size:14px; color:#26221b;}
.hdfa-ant{display:flex; flex-direction:column; gap:10px;}
.hdfa-text{width:100%; box-sizing:border-box; min-height:132px; resize:vertical; padding:12px 14px;
  border-radius:var(--r-l); border:1px solid var(--line2); background:var(--panel); color:var(--ink);
  font:400 16px/1.45 var(--sans); outline:none;}
.hdfa-text:focus, .hdfa-luecke:focus, .hdfa-zu select:focus{border-color:var(--bronze); box-shadow:0 0 0 3px var(--bronzesoft);}
.hdfa-wahl .hduw-opt.on{border-color:var(--bronze); background:var(--bronzesoft);}
.hdfa-wahl .hduw-opt.on i{background:var(--bronze); color:#fffdf7;}
.hdfa-hilfe{font:500 13px/1.3 var(--sans); color:var(--ink3); text-align:center;}
.hdfa-bank{display:flex; flex-wrap:wrap; gap:6px;}
.hdfa-bank span{padding:6px 11px; border-radius:var(--r-pill); background:var(--sunk); border:1px solid var(--line); font:500 14px/1.2 var(--sans);}
.hdfa-satz{margin:0; font:400 17px/2.1 var(--sans); color:var(--ink);}
.hdfa-luecke{width:7.5em; max-width:60%; padding:4px 8px; margin:0 2px; border-radius:var(--r-s); border:1px solid var(--line2);
  background:var(--panel); color:var(--ink); font:500 16px/1.3 var(--sans); outline:none;}
.hdfa-rechts{display:flex; flex-direction:column; gap:6px;}
.hdfa-rechts span{display:flex; gap:10px; font:400 15px/1.35 var(--sans);}
.hdfa-rechts b{flex:0 0 22px; height:22px; border-radius:50%; background:var(--sunk); display:flex; align-items:center; justify-content:center; font-size:12px;}
.hdfa-zu{display:flex; flex-direction:column; gap:8px;}
.hdfa-zu label{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px;
  border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line); font:400 15px/1.35 var(--sans);}
.hdfa-zu select{flex:0 0 64px; height:40px; border-radius:var(--r-s); border:1px solid var(--line2); background:var(--sunk);
  color:var(--ink); font:600 16px/1 var(--sans); text-align:center;}
.hdfa-knoepfe{display:flex; gap:10px;}
.hdfa-knoepfe .hduw-los{flex:1;}
.hdfa-knoepfe .hduw-zweit{flex:0 0 56px; font-size:24px;}
.hdfa-note b{font-size:60px;}
.hdfa-liste{align-self:stretch; display:flex; flex-direction:column; gap:8px;}
.hdfa-r{border-radius:var(--r-m); border:1px solid var(--line); background:var(--panel); border-left:4px solid var(--line2);}
.hdfa-r.gut{border-left-color:var(--gut);} .hdfa-r.mittel{border-left-color:var(--mittel);} .hdfa-r.schlecht{border-left-color:var(--schlecht);}
.hdfa-r summary{display:flex; align-items:center; gap:10px; padding:11px 12px; list-style:none; cursor:pointer;}
.hdfa-r summary::-webkit-details-marker{display:none;}
.hdfa-r-q{flex:1; min-width:0; font:400 14.5px/1.35 var(--sans); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.hdfa-r summary b{flex:0 0 auto; font:600 14px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink2);}
.hdfa-r-in{padding:0 12px 12px; display:flex; flex-direction:column; gap:8px;}
.hdfa-r-in p{margin:0; font:400 14.5px/1.45 var(--sans); color:var(--ink);}
.hdfa-r-in small{display:block; font:700 11px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);}