/* Punkte und Uhren in der Vorbereitung (js/lernen-vorbereitung.js) */
.vb-kopf{margin:0 0 14px;padding:12px 16px;border:2px solid var(--gold);border-radius:14px;background:#fffaf0}
.vb-punkte{margin:0;font-size:15px}.vb-punkte b{color:#7a5a12;font-size:17px}
.vb-hinweis{margin:4px 0 0;font-size:13px;color:var(--muted)}
/* Zeitleiste klebt unter der Stationsleiste; ihre Höhe steht in --vb-uhr-h (gemessen), der schwebende Arbeitsauftrag klebt darunter */
.vb-uhr{position:sticky;top:calc(var(--stages-h,68px) + 6px);z-index:15;box-shadow:0 4px 12px #07233412;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:54px;margin:0 0 16px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#f7fafc;font-size:13px;color:var(--muted)}
.vb-zeiten{display:inline-flex;flex-wrap:wrap;gap:2px 12px;font-variant-numeric:tabular-nums}
.vb-z{border-radius:6px;padding:1px 4px;font-weight:600}.vb-z b{color:var(--ink)}
.vb-phase-lesen .vb-z-lesen,.vb-phase-bearbeiten .vb-z-bearb{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 currentColor}
.vb-phase-lesen .vb-z-lesen{color:#0b5f86}.vb-phase-bearbeiten .vb-z-bearb{color:#8a4b06}
.vb-z.los{animation:vb-los 1.4s ease-out}
@keyframes vb-los{0%{background:#bfe3f5}100%{background:transparent}}
.vb-phase-countdown .vb-zeiten{display:none}
.vb-status{font-size:12px}
.vb-uhr.vb-phase-lesen{border-color:#9cc9df;background:#eef7fc}.vb-uhr.vb-phase-bearbeiten{border-color:#f0b46a;background:#fff4e6}.vb-uhr.vb-phase-countdown{border-color:#8fc7c8;background:#eefafa}
.vb-knopf{min-height:36px;margin-left:auto;padding:4px 12px;border-radius:9px;border:1px solid #c5d2db;background:#fff;color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.vb-start{background:var(--praxis);border-color:var(--gold)}
.vb-countdown{font:700 30px/1 var(--headline);color:var(--teal);min-width:1.4em;text-align:center}
.vb-countdown.tick{animation:vb-cd .8s ease-out}
@keyframes vb-cd{0%{transform:scale(1.7);opacity:0}35%{opacity:1}100%{transform:scale(1);opacity:1}}
/* Leiste gerade nicht im Bild: 3-2-1 schwebt unten am Bildschirm */
.vb-countdown.schwebt{position:fixed;left:0;right:0;bottom:22px;z-index:61;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);margin:0 auto;padding:8px 18px 8px 16px;border-radius:30px;background:var(--ink);color:var(--praxis);box-shadow:0 12px 30px #0006}
.vb-countdown.schwebt::after{content:"Gleich startet die Lesezeit";font:600 14px/1.2 var(--font);color:#fff}
.vb-countdown.schwebt.tick{animation:vb-cd-s .45s ease-out}
@keyframes vb-cd-s{0%{opacity:.4;transform:translateY(8px)}100%{opacity:1;transform:none}}
/* „Lesen läuft weiter“: kurzer Hinweis unter der Leiste (verschiebt nichts); vorgelesen wird .vb-sr */
.vb-chip{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);padding:4px 12px;border-radius:20px;background:#0b5f86;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px #0b5f8640;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.vb-chip.zeigen{opacity:1;visibility:visible}
.vb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.vb-richt{margin:22px 0 -14px;font-size:13px;color:#6b5420}
.vb-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:2px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 12px 30px #0006;font-size:14px;text-align:center}
.vb-toast b{font-size:17px}.vb-toast.gut b{color:var(--praxis)}
@media(max-width:760px){.vb-kopf{padding:10px 12px}.vb-uhr{font-size:12px;gap:6px 8px;min-height:50px;padding:6px 8px}.vb-zeiten{gap:2px 6px}.vb-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.vb-countdown{font-size:26px}
  /* während 3-2-1 ist Platz (die Zeiten sind ausgeblendet): sagen, worauf gezählt wird */
  .vb-phase-countdown .vb-status{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-weight:600;color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.vb-countdown.tick,.vb-countdown.schwebt.tick,.vb-z.los{animation:none}.vb-chip{transition:none}}
@media print{.vb-uhr,.vb-toast{display:none}}
.mein-vb{margin:8px 0 0;font-size:13px;color:var(--muted)}.mein-vb b{color:#7a5a12}
/* Schwebender Arbeitsauftrag der Lernaufgaben (css/lernen-spiel.css) klebt unter der Zeitleiste – beide bleiben sichtbar */
.sp-auftrag{--sp-oben:calc(var(--stages-h,68px) + var(--vb-uhr-h,54px) + 12px)}
/* Klebender Vorrat der Zieh-Aufgaben (css/lernen-spiel.css: sonst bei 76 px bzw. am Handy 64 px – hinter Zeitleiste und Auftrag) klebt unter dem Arbeitsauftrag;
   --vb-auftrag-h = gemessene Höhe des klebenden Auftrags dieser Lernaufgabe (js/lernen-vorbereitung.js). Am Handy reicht der Platz nicht für alles: Der Auftrag
   wird dafür knapper (22 % der Höhe), der Vorrat höchstens so hoch, dass 30 % des Bildschirms für die Plätze frei bleiben (beides scrollt in sich). */
:root{--vb-vh:100vh}
@supports(height:100dvh){:root{--vb-vh:100dvh}}
#lessonSpiele .sp{--vb-vorrat-oben:calc(var(--stages-h,68px) + var(--vb-uhr-h,54px) + 18px + var(--vb-auftrag-h,0px))}
@media(min-width:761px){#lessonSpiele .sp-vorrat:not(.breit){top:var(--vb-vorrat-oben);max-height:max(140px,calc(var(--vb-vh) - var(--vb-vorrat-oben) - 12px));overflow:auto}}
@media(max-width:760px){#lessonSpiele .sp-vorrat,#lessonSpiele .sp-vorrat.breit{top:var(--vb-vorrat-oben);max-height:max(120px,min(34vh,calc(var(--vb-vh) - var(--vb-vorrat-oben) - 30vh)))}}
@media(max-width:760px) and (min-height:561px){#lessonSpiele .sp:has(.sp-vorrat)>.sp-auftrag{max-height:22vh}}