/* TentaTipp – 10-Finger-Tastschreiben mit Tentakolus (js/lernen-tentatipp.js). Präfix tt-. Fingerfarben wie in js/lernen-tentatipp-daten.js:
   kleine Finger gelb, Ringfinger grün, Mittelfinger orange, Zeigefinger blau, Daumen grau. Fehler: Farbe UND Form (wellig/durchgestrichen/gepunktet). */
.tt-spiel{--tt-rot:#c62828;--tt-rot-bg:#ffe8e8;--tt-grau:#a7b2bc;--tt-tinte:#101820;--tt-teal:#00797b}
.tt-feld{display:block!important}
.tt-klein{font-size:13px;color:#536373;margin:.4em 0}
.tt-hinweis{min-height:1.4em;font-size:14px;color:#8a4b00;margin:.4em 0;font-weight:600}
.tt-warn{background:#fff4e5;border-left:4px solid #e08a1e;padding:8px 12px;border-radius:8px;font-size:14px}
.tt-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.tt-spiel kbd{font:600 .85em ui-monospace,Consolas,monospace;border:1px solid #b9c4cc;border-bottom-width:2px;border-radius:5px;padding:0 5px;background:#f7f9fa}
.tt-bild img{width:100%;height:auto;border-radius:14px}
.tt-bild.tt-ersatz{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#e7f4ff 0,#d6ecfb 45%,#c8e3f5 100%);border-radius:14px;padding:10px;aspect-ratio:16/10}
.tt-bild.tt-ersatz svg{width:min(100%,260px);height:auto}
.tt-mini{width:76px;flex:none}.tt-mini.tt-ersatz{aspect-ratio:1;padding:4px}.tt-mini img{border-radius:50%}

/* Start */
.tt-start{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}
.tt-start h4{margin:0 0 6px;font-size:20px}
.tt-regeln{margin:0 0 12px;padding-left:22px;line-height:1.6}.tt-regeln li{margin:4px 0}
.tt-demo-grau{color:var(--tt-grau);font-weight:700}
.tt-demo-falsch{color:var(--tt-rot);text-decoration:underline wavy var(--tt-rot);text-underline-offset:3px;font-weight:700}
.tt-einst{display:grid;gap:8px;margin:10px 0}
.tt-einst-zeile{display:flex;flex-wrap:wrap;gap:8px 20px}
.tt-schalter{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px;line-height:1.4;cursor:pointer}
.tt-schalter small{display:block;font-weight:400;color:#536373;font-size:12.5px}
.tt-schalter.gesperrt{opacity:.7;cursor:not-allowed}
.tt-los{margin:14px 0 0}

/* Status und Blatt */
.tt-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.tt-st{display:flex;flex-direction:column;line-height:1.15}.tt-st small{font-size:11px;color:#536373;text-transform:uppercase;letter-spacing:.06em}.tt-st span{font-weight:800;font-size:18px}
.tt-balken{flex:1 1 140px;height:8px;background:#e3e9ee;border-radius:9px;overflow:hidden;min-width:100px}.tt-balken-i{display:block;height:100%;width:0;background:var(--tt-teal);transition:width .2s}
.tt-blatt{position:relative;background:#fff;border:2px solid #d3dde4;border-radius:14px;padding:16px 20px 20px;max-height:360px;overflow:auto;cursor:text;
  font:500 clamp(17px,2.1vw,21px)/2.05 'Inter',system-ui,sans-serif;letter-spacing:.01em;overflow-wrap:anywhere;-webkit-user-select:none;user-select:none}
.tt-blatt.fokus{border-color:var(--tt-teal);box-shadow:0 0 0 3px #00797b22}
.tt-eingabe{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;border:0;padding:0;margin:0;resize:none;overflow:hidden;font-size:16px;color:transparent;background:transparent;caret-color:transparent}
.tt-fokus-hinweis{position:sticky;bottom:-12px;float:right;margin-top:6px;background:#101820;color:#fcebc1;font:600 12px/1 'Inter',sans-serif;padding:7px 11px;border-radius:20px;pointer-events:none}
.tt-blatt.fokus .tt-fokus-hinweis{visibility:hidden}   /* nur unsichtbar: kein Höhensprung beim Fokuswechsel (Klick daneben würde sonst verrutschen) */
.tt-text{white-space:normal}
.tt-w{white-space:nowrap}
.tt-c{position:relative}
.tt-c.st-offen{color:var(--tt-grau)}
.tt-c.st-ok{color:var(--tt-tinte)}
.tt-c.st-falsch{color:var(--tt-rot);background:var(--tt-rot-bg);font-weight:700;text-decoration:underline wavy var(--tt-rot);text-decoration-thickness:2px;text-underline-offset:4px;border-radius:3px}
.tt-blatt .tt-c.st-falsch::after{content:attr(data-soll);position:absolute;left:50%;transform:translateX(-50%);top:-1.15em;font-size:.55em;line-height:1;color:#6c7a85;font-weight:600;text-decoration:none}
.tt-c.st-zuviel{color:var(--tt-rot);background:var(--tt-rot-bg);text-decoration:line-through 2px;font-weight:700}
.tt-c.st-fehlt{color:#d06a6a;text-decoration:underline dotted var(--tt-rot) 2px;text-underline-offset:4px}
.tt-w.tt-aus{background:repeating-linear-gradient(135deg,#fff 0 6px,#ffe1e1 6px 12px);border-radius:4px}
.tt-cursor{display:inline-block;width:2px;height:1.2em;margin:0 -1px;vertical-align:-.22em;background:#8796a1}
.tt-blatt.fokus .tt-cursor{background:var(--tt-teal);animation:tt-blink 1.05s steps(1) infinite}
@keyframes tt-blink{50%{opacity:0}}
.tt-tr{color:#c8d1d8}.tt-tr.tt-abs{font-size:.75em;margin-left:2px}.tt-tr.tt-tab{display:inline-block;min-width:2.2em;text-align:center}
.tt-tr.st-falsch{color:var(--tt-rot);background:var(--tt-rot-bg);font-weight:800;border-radius:3px;text-decoration:underline wavy var(--tt-rot)}

/* Korrektur */
.tt-korr-kopf h4{margin:0 0 4px;font-size:20px}
.tt-korr-zahl{margin:0 0 8px}
.tt-korr{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start;margin:8px 0}
.tt-blatt-korr{cursor:default;max-height:480px}
.tt-fw{cursor:pointer;border-radius:3px;outline-offset:2px}
.tt-fw-gross,.tt-fw-fehlt{box-shadow:inset 0 -3px 0 var(--tt-rot);background:#fff0f0}
.tt-fw-klein{box-shadow:inset 0 -3px 0 #c76a00;background:#fff6e6}
.tt-fw-fehlt{background:repeating-linear-gradient(135deg,#fff 0 6px,#ffe1e1 6px 12px)}
.tt-fw:hover,.tt-fw:focus{background:#ffd9d9}
.tt-korrigiert{box-shadow:inset 0 -2px 0 #2e7d32}
.tt-korr-seite{background:#f7f9fb;border:1px solid #d9e2e8;border-radius:14px;padding:12px;max-height:520px;overflow:auto}
.tt-korr-seite h5{margin:0 0 8px;font-size:15px}
.tt-alle{margin:0 0 8px}
.tt-fliste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tt-f{background:#fff;border:1px solid #dbe3e9;border-left:5px solid var(--tt-rot);border-radius:10px;padding:8px 10px;display:grid;gap:4px;font-size:14px}
.tt-f-klein{border-left-color:#c76a00}.tt-f-trenner{border-left-color:#7d63c8}.tt-f-ok{border-left-color:#2e7d32;font-weight:700}
.tt-f-art{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#536373}
.tt-f-wort del{color:var(--tt-rot);text-decoration-thickness:2px}
.tt-f-akt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tt-vorschlag{background:#e8f5e9!important;border-color:#7cb782!important}
.tt-edit,.tt-taste-feld{width:auto!important;flex:1 1 140px;min-width:0;padding:7px 10px!important;border:2px solid var(--tt-teal)!important;border-radius:8px;font-size:16px}
.tt-taste-feld{cursor:pointer;background:#f3f0fb!important;border-color:#7d63c8!important}
.tt-edit-m{flex-basis:100%;color:#8a4b00;font-weight:600}
.tt-abgeben{margin:12px 0}

/* Ergebnis */
.tt-ergebnis{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:start}
.tt-erg-t h4{margin:0;font-size:22px}
.tt-sterne{margin:6px 0 10px}
.tt-werte{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0}
.tt-werte div{background:#f7f9fb;border:1px solid #dbe3e9;border-radius:10px;padding:8px 10px}
.tt-werte div.gut{border-left:4px solid #2e7d32}.tt-werte div.schwach{border-left:4px solid #e08a1e}
.tt-werte dt{font-size:12px;color:#536373}.tt-werte dd{margin:0;font-size:20px}.tt-werte dd small{font-size:12px;color:#536373}
.tt-werte div.tt-w-breit{grid-column:1/-1}   /* „Anschläge in 10 Minuten“ mit Rechnung (1.800 richtige in 6:00 min → 3.000 A/10 min) über die ganze Breite */
.tt-meintext h5{margin:12px 0 4px}
.tt-meintext pre{background:#f6f8fa;border:1px solid #dbe3e9;border-radius:10px;padding:10px 12px;max-height:200px;overflow:auto;white-space:pre-wrap;font:14px/1.6 'Inter',system-ui,sans-serif}
.tt-danach{background:#eef7f4;border-left:4px solid var(--tt-teal);padding:10px 14px;border-radius:8px;margin:10px 0}
.tt-weiter{text-decoration:none;display:inline-block}

/* Kurs */
.tt-kurs-kopf h4{margin:0 0 6px;font-size:21px}
.tt-lnr{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7d63c8}
.tt-lektionen{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 10px;padding:0}
.tt-lchip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:36px;min-height:38px;padding:2px 5px;border:1px solid #c8d5de;border-radius:8px;background:#fff;color:var(--tt-tinte);text-decoration:none;line-height:1.1}
.tt-lchip b{font-size:13px}.tt-lchip small{font-size:10px;color:#b38600;min-height:11px}
.tt-lchip.ok{background:#eaf6ec;border-color:#7cb782}.tt-lchip.skip{background:#f1f3f5;color:#7d8a94}.tt-lchip.num{border-style:dashed}.tt-lchip.meilenstein{border-color:#d4a017;border-width:2px;background:#fff7d6}
.tt-lchip.an{background:var(--tt-tinte);color:#fcebc1;border-color:var(--tt-tinte)}.tt-lchip.an small{color:#fcebc1}
a.tt-lchip:hover{border-color:var(--tt-teal)}
.tt-lerntipp{display:flex;gap:14px;align-items:flex-start;background:#f5f2fd;border:1px solid #ddd3f6;border-radius:14px;padding:10px 14px;margin:0 0 10px}
.tt-lerntipp p{margin:.25em 0}.tt-neu b{font:700 1.05em ui-monospace,Consolas,monospace;letter-spacing:.08em}
.tt-numhinweis{background:#fff8e1;border:1px solid #f0d27a;border-radius:12px;padding:8px 12px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tt-numhinweis p{margin:0;flex:1 1 300px;font-size:14px}
.tt-zeilen{font:600 clamp(18px,2.4vw,24px)/1.8 ui-monospace,Consolas,'Cascadia Mono',monospace;max-height:300px}
.tt-zeile{white-space:pre-wrap}
.tt-zeilen .tt-c{display:inline-block;min-width:.62em;text-align:center;border-radius:3px}
.tt-zeilen .tt-c.st-ok{color:var(--tt-tinte)}
.tt-zeilen .tt-c.war-falsch{color:#a35a00}
.tt-zeilen .tt-c.st-jetzt{background:#fde68a;box-shadow:inset 0 -3px 0 var(--tt-tinte);color:var(--tt-tinte)}
.tt-zeilen .tt-c.st-jetzt.st-falsch{background:var(--tt-rot-bg);box-shadow:inset 0 -3px 0 var(--tt-rot);text-decoration:none;color:var(--tt-rot)}
.tt-zeilen .tt-enter{color:#3f5262;font-size:.8em;box-shadow:inset 0 0 0 1px #8a9caa;border-radius:4px;padding:0 .12em;margin-left:.1em}   /* ↵ als kleine Taste – klar anders als „␣“ (Enter-Modi, Kontrast ≥ 3 : 1) */
.tt-zeilen .tt-enter.st-ok{box-shadow:inset 0 0 0 1px #9db3a6}
.tt-text.wackel{animation:tt-wackel .18s}
@keyframes tt-wackel{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* Bildschirmtastatur */
.tt-tastblock{margin:12px 0 4px;background:#eef3f6;border:1px solid #d3dde4;border-radius:16px;padding:10px}
.tt-tastzeile{display:flex;gap:10px;align-items:flex-end}
.tt-okto-box{flex:0 0 clamp(78px,12vw,140px)}
.tt-okto{display:block;width:100%;height:auto}
.tt-okto.gross{max-width:260px;margin:auto}
.tt-okto .tt-tentakel{transition:transform .15s ease}
.tt-tast-huelle{flex:1 1 auto;min-width:0}
.tt-tast{display:flex;gap:14px;align-items:flex-start}
.tt-haupt{flex:1 1 auto;min-width:0}
.tt-reihe{display:flex;gap:4px;margin-bottom:4px}
.tt-taste{--b:1;flex:var(--b) 1 0;min-width:0;height:clamp(30px,4.2vw,48px);position:relative;padding:0;border:1px solid #0000002a;border-radius:7px;
  background:#f6f7f8;color:#1b2630;font:600 clamp(9px,1.25vw,15px)/1 'Inter',system-ui,sans-serif;box-shadow:0 2px 0 #00000026;cursor:help;overflow:hidden}
.tt-f-lk,.tt-f-rk{background:#fff3c4}.tt-f-lr,.tt-f-rr{background:#dcf2de}.tt-f-lm,.tt-f-rm{background:#ffe4cc}.tt-f-lz,.tt-f-rz{background:#d9e9fb}.tt-f-ld,.tt-f-rd{background:#e4e8eb}
.tt-f-lk.tt-grund,.tt-f-rk.tt-grund{background:#ffe07a}.tt-f-lr.tt-grund,.tt-f-rr.tt-grund{background:#a9dcae}.tt-f-lm.tt-grund,.tt-f-rm.tt-grund{background:#ffc38e}.tt-f-lz.tt-grund,.tt-f-rz.tt-grund{background:#a7cbf3}
.tt-grund{font-weight:800;border-color:#00000055}
.tt-marke::after{content:"";position:absolute;left:38%;right:38%;bottom:4px;height:2px;border-radius:2px;background:#1b2630}
.tt-trenn{overflow:visible}
.tt-trenn::before{content:"";position:absolute;right:-4px;top:-3px;bottom:-5px;border-right:2px dashed #7d63c8}
.tt-taste .tt-n{position:absolute;left:12%;bottom:12%}
.tt-taste .tt-s{position:absolute;left:12%;top:10%;font-size:.85em;color:#3b4a56}
.tt-taste .tt-a{position:absolute;right:10%;bottom:12%;font-size:.8em;color:#5a2fb0}
.tt-taste .tt-gross{left:50%;bottom:50%;transform:translate(-50%,50%);font-size:1.15em}
.tt-taste .tt-l{font-size:.78em;font-weight:600;white-space:nowrap}
.tt-taste .tt-z2{position:absolute;right:8%;top:10%;font-size:.62em;color:#6b7883;font-weight:500}
.tt-sonder{background:#e9edf0}
.tt-taste.naechste{background:#101820;color:#fff;outline:3px solid #f0b429;outline-offset:1px;transform:translateY(-2px);z-index:1;animation:tt-puls 1.1s ease-in-out infinite}
.tt-taste.naechste .tt-s,.tt-taste.naechste .tt-a,.tt-taste.naechste .tt-z2{color:#fcebc1}
.tt-taste.naechste.tt-marke::after{background:#fcebc1}
.tt-taste.mod{outline:3px dashed #101820;outline-offset:1px;z-index:1}
.tt-taste.gedrueckt{transform:translateY(2px);box-shadow:none;filter:brightness(.9)}
@keyframes tt-puls{50%{outline-color:#f0b42955}}
.tt-num{display:grid;grid-template-columns:repeat(4,clamp(26px,3.5vw,46px));grid-auto-rows:clamp(30px,4.2vw,48px);gap:4px;flex:none}
.tt-num .tt-taste{grid-column:span var(--b,1);grid-row:span var(--h,1);height:auto}
.tt-finger{margin:8px 0 0;font-size:15px;min-height:1.5em}
.tt-tasteninfo{margin:4px 0 0;font-size:14px;color:#2d3b46;min-height:1.4em}

@media (max-width:760px){
  .tt-start,.tt-ergebnis,.tt-korr{grid-template-columns:1fr}
  .tt-startbild,.tt-fertigbild{max-width:320px}
  .tt-blatt{padding:12px 12px 16px;max-height:300px}
  .tt-tastzeile{flex-direction:column;align-items:stretch}
  .tt-okto-box{flex-basis:auto;width:90px;align-self:center}
  .tt-tast{flex-direction:column;align-items:center}
  .tt-haupt{width:100%}
  .tt-reihe{gap:2px;margin-bottom:2px}
  .tt-taste{height:30px;border-radius:5px;font-size:9px}
  .tt-taste .tt-l{font-size:.68em}
  .tt-num{grid-template-columns:repeat(4,38px);grid-auto-rows:32px}
  .tt-lerntipp{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .tt-blatt.fokus .tt-cursor,.tt-taste.naechste,.tt-text.wackel{animation:none}
  .tt-okto .tt-tentakel,.tt-balken-i{transition:none}
}

/* Ohne Anmeldung: Sperre im Spiel und Hinweis vor jedem Start (js/lernen-tentatipp.js, anmeldeSperre/anmeldeWarnung) */
.tt-anmelde-sperre{display:flex;gap:16px;align-items:flex-start;background:#f7f3ff;border:2px dashed #a78bfa;border-radius:16px;padding:16px 18px;margin:12px 0;color:#1e1530}
.tt-anmelde-sperre h4{margin:0 0 6px;font-size:18px}.tt-anmelde-sperre p{margin:0 0 6px}
.tt-warn-pop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(20,10,40,.55)}
.tt-warn-in{background:#fff;color:#1e1530;border-radius:20px;max-width:440px;width:100%;padding:22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.tt-warn-in h3{margin:8px 0 6px;font-size:20px}.tt-warn-in p{margin:0 0 8px;line-height:1.5}.tt-warn-in .tt-knoepfe{justify-content:center}
.tt-warn-bild{width:110px;margin:0 auto}.tt-warn-bild.tt-ersatz{aspect-ratio:1;padding:6px}.tt-warn-bild img{border-radius:50%}
@media (max-width:520px){.tt-anmelde-sperre{flex-direction:column}}

/* ── Tempoziel (ab 18.10.2026): Zielwort mit Fähnchen, grüne Zone (Steigerungsbereich) mit Marken +10/+20/+30 %, Vorgabe vor dem Start, „Dein Tempo“, Tentakolus in vier Tempo-Stufen.
   Kontrast der Zone: Vorlagentext #3f6b4e auf #e2f6e7 (≈ 5,6 : 1), Zielwort-Text #5c4300 auf #fff1bf. */
.tt-tempoziel{border:2px solid #cfe9d8;background:#f4fbf6;border-radius:12px;padding:10px 14px;margin:10px 0;display:grid;gap:6px}
.tt-tempoziel h5{margin:0;font-size:16px}
.tt-tempoziel p{margin:0}
.tt-tempo-feld{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:600;font-size:14px}
.tt-tempo-feld input,.tt-tempo-feld select{font:inherit;font-weight:700;padding:5px 8px;border:2px solid #b9c9c1;border-radius:8px;min-width:7em;background:#fff;color:#101820}
.tt-tempoziel input[type=range]{width:100%;max-width:420px;accent-color:#1f8f5f}
.tt-tempo-info{font-size:14px;color:#1d4a30}
.sp-knopf.klein{padding:3px 9px;font-size:13px}
.tt-statuszeile{display:flex;align-items:center;gap:10px;justify-content:space-between}
.tt-statuszeile .tt-status{flex:1 1 auto;margin:4px 0 8px}
.tt-st-tempo span{color:#1f6b45}
.tt-tfig{position:relative;flex:none;width:64px;height:64px;margin-bottom:12px}
.tt-tfig[hidden]{display:none}
.tt-tfig-bild{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.tt-tfig-bild.an{opacity:1}
.tt-tfig-bild svg,.tt-tfig-bild img{width:64px;height:58px;display:block}
.tt-tfig-text{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;font:700 10px/1.2 'Inter',system-ui,sans-serif;color:#1f6b45;background:#e7f7ec;border-radius:8px;padding:1px 6px}
.tt-tfig[data-stufe="1"] .tt-tfig-text{color:#5b4a8a;background:#eeeafc}
.tt-zielinfo{font-size:14px;margin:2px 0 8px;color:#203040}
.tt-ziel-ende{color:#8a4b00;font-weight:600}
.tt-demo-zone{background:#e2f6e7;color:#2d6a43;border-radius:4px;padding:0 4px;font-weight:700}
.tt-w.tt-zone,.tt-tr.tt-zone{background:#e2f6e7}
.tt-w.tt-zone .tt-c.st-offen{color:#3f6b4e}
.tt-w.tt-zielwort{position:relative;background:#fff1bf;box-shadow:inset 0 -3px 0 #d4a017;border-radius:4px}
.tt-w.tt-zielwort .tt-c.st-offen{color:#5c4300}
.tt-w[data-ziel]::before,.tt-w[data-marke]::before{position:absolute;left:0;top:-.95em;font:800 10px/1 'Inter',system-ui,sans-serif;white-space:nowrap;padding:2px 4px;border-radius:4px;pointer-events:none}
.tt-w[data-ziel]::before{content:"🚩 " attr(data-ziel);background:#ffe08a;color:#5c4300}
.tt-w[data-marke]{position:relative;box-shadow:inset 2px 0 0 #2f9e5f}
.tt-w[data-marke]::before{content:attr(data-marke);background:#c9eed5;color:#1d5a35}
.tt-tempo-erg{display:flex;gap:14px;align-items:center;background:#f4f8fb;border-radius:14px;padding:12px 14px;margin:10px 0}
.tt-tempo-erg.stufe-4{background:#e7f7ec}.tt-tempo-erg.stufe-3{background:#fff8dc}
.tt-tempo-gross{flex:none;width:130px}.tt-tempo-gross svg,.tt-tempo-gross img{width:130px;height:auto;display:block}
.tt-tempo-t p{margin:4px 0}
.tt-tempo-meldung{font-weight:800;font-size:17px;color:#203040}
.tt-tempo-wert b{font-size:26px;margin:0 4px;color:#1f6b45}.tt-tempo-wert small{color:#536373}
.tt-tempo-wert > small:first-child{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.tt-tempo-entw{font-size:14px;color:#536373}.tt-tempo-entw.plus{color:#1f6b45;font-weight:700}
.tt-ziel-erg{font-weight:700;color:#8a4b00}.tt-ziel-erg.ok{color:#1f6b45}
.tt-bonus{display:inline-block;background:#fff3c4;color:#6b4e00;border-radius:20px;padding:2px 10px;font-weight:800;font-size:13px}
@media (max-width:520px){.tt-tempo-erg{flex-direction:column;align-items:flex-start}.tt-tempo-gross{width:110px}.tt-tfig{width:52px;height:52px}.tt-tfig-bild svg,.tt-tfig-bild img{width:52px;height:48px}}
@media (prefers-reduced-motion:reduce){.tt-tfig-bild{transition:none}}
.tt-tfig-bild img,.tt-tempo-gross img{object-fit:contain}
.tt-tempo-gross img.tt-erfolg-bild{border-radius:14px}
.tt-bonus img{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:4px}
/* Erfolgs-Bilder (1280 × 720, rechts Platz für Text): breit; am Desktop steht die Meldung rechts im Bild, am Handy darunter */
.tt-tempo-erg[data-erfolg]{position:relative;display:block;padding:0;overflow:hidden;background:#f4f8fb}
.tt-tempo-erg[data-erfolg] .tt-tempo-gross{width:100%;max-width:none}
.tt-tempo-erg[data-erfolg] .tt-tempo-gross img{width:100%;height:auto;display:block;border-radius:0}
.tt-tempo-erg[data-erfolg] .tt-tempo-t{padding:10px 14px}
@media (min-width:761px){.tt-tempo-erg[data-erfolg] .tt-tempo-t{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:40%;max-height:92%;overflow:auto;background:rgba(255,255,255,.9);border-radius:14px;box-shadow:0 4px 16px rgba(20,30,60,.15)}}
.tt-bonus img.tt-erfolg-bild{width:56px;height:auto;border-radius:6px}

/* ── Schreibfenster (PO 20.10.2026: „das Schreibfenster ist OBEN FIXIERT, die TASTATUR darunter gleich dran“ – am Notebook nie scrollen; js/lernen-tentatipp.js, schreibFenster) ──
   .tt-sf am Spiel = Schreibansicht aktiv: Statuszeile + Vorlage + Hinweis kleben oben, die Bildschirmtastatur folgt direkt darunter. Tastenhöhe (--tt-key-h) und Höhe der
   Vorlage (--tt-blatt-h) rechnet einpassen() aus der Fensterhöhe. .tt-schreibt = ab dem ersten Anschlag: Kopf und Erklärtexte eingeklappt (nicht im Vollbild – dort steht
   der Kopf in der Spalte der Arbeitsfläche). Lektionen fließen als Text (weniger Enter): .tt-wg = Wort samt Leerzeichen, umbrochen wird nur zwischen Wörtern. */
.tt-zeilen .tt-wg{display:inline-block;white-space:nowrap}
.tt-lektionen-box{margin:2px 0 10px}
.tt-lektionen-box>summary{font-size:13px;font-weight:700;color:#5a3fa8;padding:4px 0;width:max-content;max-width:100%}
.tt-lektionen-box[open]>summary{margin-bottom:2px}
.tt-sf .tt-schreibfenster{position:sticky;top:var(--sp-oben,0px);z-index:7;background:#fffcf2;margin:0 -6px;padding:4px 6px 2px;border-radius:0 0 14px 14px}   /* nur beim Schreiben (Korrektur: normal) */
.sp-vollbild .tt-sf .tt-schreibfenster{top:var(--vb-klebe,0px)}
.tt-sf-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px}
.tt-sf-fuss .tt-hinweis{flex:1 1 220px}
.tt-sf-fuss .tt-knoepfe{margin:4px 0 2px;gap:6px}
.tt-sf .tt-sf-fuss .sp-knopf{min-height:36px;padding:5px 12px;font-size:14px}
.tt-sf{overflow-anchor:none}   /* beim Schreiben keine Scroll-Verankerung: die Seite springt nicht, wenn sich im Spiel etwas ändert */
.tt-sf .tt-statuszeile .tt-status{margin:2px 0 4px;gap:4px 16px}
.tt-sf .tt-st span{font-size:17px}
.tt-sf .tt-tfig{width:44px;height:44px;margin-bottom:10px}
.tt-sf .tt-tfig-bild svg,.tt-sf .tt-tfig-bild img{width:44px;height:40px}
.tt-statuszeile .tt-tfig-text{left:auto;right:0;transform:none}   /* Figur steht am rechten Rand: Spruch nach links, sonst ragt er am Handy hinaus (Seite zoomt, Vorlage springt) */
.tt-sf .tt-blatt:not(.tt-blatt-korr){max-height:var(--tt-blatt-h,360px)}
.sp-vollbild .tt-sf .tt-blatt.tt-blatt:not(.tt-blatt-korr){max-height:var(--tt-blatt-h,360px)}   /* im Vollbild gilt dieselbe eingepasste Höhe – sticht die Abschrift-Regel aus css/lernen-vollbild.css (lädt später), sonst rutscht die Tastatur bei langen Texten aus dem Bild */
.tt-sf .tt-hinweis{margin:3px 0 0;min-height:1.3em;line-height:1.3}
.tt-sf .tt-zielinfo{margin:0 0 4px;font-size:13px;line-height:1.35}
.tt-sf .tt-tastblock{margin:4px 0 4px;padding:6px 8px 4px}
.tt-sf .tt-taste{height:var(--tt-key-h,clamp(30px,4.2vw,48px))}
.tt-sf .tt-num{grid-auto-rows:var(--tt-key-h,clamp(30px,4.2vw,48px))}
.tt-sf .tt-okto-box{flex-basis:clamp(64px,9vw,118px)}
.tt-sf .tt-finger{margin:3px 0 0;font-size:14px;min-height:1.35em;line-height:1.35}
.tt-sf .tt-tasteninfo{margin:2px 0 0;min-height:0}
.tt-sf .tt-tasteninfo:empty{display:none}
.tt-schreibt:not(.sp-vollbild *)>.sp-auftrag,.tt-schreibt:not(.sp-vollbild *) .tt-kurs-kopf,.tt-schreibt:not(.sp-vollbild *) .tt-moduswahl,.tt-schreibt .tt-zielinfo{display:none}
.tt-schreibt .tt-schreibfenster{box-shadow:0 8px 12px -10px #6b4e0a66}
@media (max-width:600px){
  .tt-schreibt .tt-okto-box{display:none}
  .tt-sf .tt-statuszeile .tt-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}   /* feste Zeilen: wechselnde Zahlen verschieben die Vorlage nicht */
  .tt-sf .tt-statuszeile .tt-balken{grid-column:1/-1;min-width:0}
  .tt-sf .tt-st span{font-size:15px}
  .tt-sf .tt-st small{font-size:10px}
  .tt-sf .tt-sf-fuss .sp-knopf{min-height:34px;padding:4px 9px;font-size:13px}
}
/* Test unterbrechen und fortsetzen (PO 20.10.2026): „⏸ Unterbrechen“ im Schreibfenster, Fenster „Pause“ / „Test fortsetzen“ (wie .tt-warn-pop, über dem Vollbild) */
.tt-pause-k{white-space:nowrap}
.tt-pause-pop .tt-pause-rest{white-space:nowrap}.tt-pause-pop .tt-klein{margin-top:8px}
/* Pause fair (Nachbesserung 21.10.2026): solange die Uhr bewusst angehalten ist (Knopf, Fortsetzen), sind Vorlage, geschriebener Text und Fehlerliste unsichtbar – nichts
   vorauslesen, während die Zeit steht. Das Fenster „Pause“ liegt außerhalb des Spiels (body bzw. Vollbild). */
.tt-spiel.tt-pausiert .tt-feld{visibility:hidden}
.tt-pause-pop{background:rgba(20,10,40,.82)}
/* Frage „Fertig?“ (PO 21.10.2026): Zeit stoppen und werten / Weiterschreiben bzw. Zur Korrektur / Schließen ohne Korrekturen – Fokus auf dem Fenster, nicht auf einem Knopf */
.tt-fertig-pop .tt-warn-in:focus{outline:none}
.tt-fertig-pop .tt-warn-in:focus-visible{outline:3px solid #00797b66;outline-offset:3px}
.tt-fertig-pop .tt-knoepfe{flex-wrap:wrap;gap:8px}
/* Schreiben endgültig vorbei (anderes Fenster, schon abgegeben, Zeitraum vorbei): Hinweis gleich im Schreibfenster */
.tt-beendet{margin:12px 0}.tt-beendet .tt-warn{font-size:16px;line-height:1.5}
/* Echte Notebook-Fenster (1366×625, 1280×585, 1024×468): passt der Kopf der Lektion vor dem ersten Anschlag nicht ins Bild, stehen Titel und Lerntipp kurz im Schreibfenster
   (js/lernen-tentatipp.js, kopfPruefen) – an Stelle der Statuszeile, die vor dem ersten Anschlag nur „0:00“ zeigt. Ab dem ersten Anschlag wieder die Statuszeile. */
.tt-sf-kopf{display:none}
.tt-sf.tt-kopf-fenster:not(.tt-schreibt) .tt-sf-kopf{display:block;margin:2px 0 6px;font-size:14px;line-height:1.35;color:#2c3a46}
.tt-sf.tt-kopf-fenster:not(.tt-schreibt) .tt-statuszeile{display:none}
.tt-sf-k1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-sf-k1 b{font-size:16px;color:#1e1530}
.tt-sf-k2{margin:2px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.tt-sf-k2 b{font:700 1.05em ui-monospace,Consolas,monospace;letter-spacing:.08em}
/* „Hier klicken und lostippen“: oben rechts am Blatt, die Vorlage fließt darum herum (vorher klebte es unten und verdeckte die dritte Zeile) */
.tt-sf .tt-fokus-hinweis{position:sticky;top:0;bottom:auto;float:right;margin:-6px -8px 4px 12px}
@media (max-width:600px){.tt-sf .tt-fokus-hinweis{position:absolute;top:4px;right:6px;float:none;margin:0;z-index:2}}   /* Handy: aus dem Textfluss (erste Zeile volle Breite), beim Schreiben nur unsichtbar (Zeile 37) – kein Umbruch, kein Höhensprung, die Knöpfe bleiben unter dem Finger */
/* Enter-Modi (PO 21.10.2026: „einstellen können, ob ich viele Enter habe oder weniger“): Umschalter „Enter: ohne · wenige · viele“ im Schreibfenster (js/lernen-tentatipp.js,
   enterSchalter) und „␣“ am Zeilenende, wo die Vorlage umbricht, aber die Leertaste getippt wird (.tt-umbr; Abschrift ohne Enter: .tt-tr.tt-umbr, .tt-dran = jetzt dran) */
.tt-enterwahl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;margin:3px 0 2px;font-size:13px}
.tt-ew-l{font-weight:700;color:#3b4b59;margin-right:2px}
.tt-ew{font:inherit;font-weight:600;min-height:30px;padding:3px 10px;border:1px solid #b9c7d2;background:#fff;color:#22313d;border-radius:999px;cursor:pointer;line-height:1.2}
.tt-ew:hover:not(:disabled){border-color:var(--tt-teal)}
.tt-ew:focus-visible{outline:3px solid #00797b66;outline-offset:1px}
.tt-ew.an{background:var(--tt-teal);border-color:var(--tt-teal);color:#fff}
.tt-ew:disabled{cursor:not-allowed;opacity:.75}.tt-ew.an:disabled{opacity:.9}
.tt-ew-auto{border-style:dashed;color:#536373;font-weight:600}
.tt-ew-info{font-size:11.5px;color:#46525d;border:1px dashed #8a9caa;border-radius:999px;padding:1px 7px}
.tt-ew-fest{border-style:solid;font-weight:700;color:#3b4b59;background:#eef2f5}
.tt-ew-leg{font-size:12px;color:#46525d;margin-left:6px;white-space:nowrap}
.tt-ew-zl{font-weight:700;color:#2f3d49;font-size:1.3em;line-height:1}
.tt-ew-ze{font-weight:700;color:#2f3d49;box-shadow:inset 0 0 0 1px #8a9caa;border-radius:3px;padding:0 3px}
.tt-hw-umbr{font-weight:400;color:#46525d}
.tt-ew-neu{white-space:normal}
.tt-zeilen .tt-umbr{color:#56636e;font-size:.95em}   /* „␣“: Kontrast ≥ 4,5 : 1 */
.tt-zeilen .tt-umbr.st-ok{color:#4d6b5a}
.tt-zeilen .tt-umbr.st-jetzt{font-size:1em;color:var(--tt-tinte)}
.tt-tr.tt-umbr{color:#56636e;font-size:.9em}
.tt-tr.tt-umbr.tt-dran{color:var(--tt-tinte);background:#fde68a;border-radius:3px;font-size:.9em}
.tt-sf-fuss .tt-enterwahl{flex:0 1 auto}
/* Handy: Umschalter kompakt (ohne Kennzeichen „auto“/„Klasse“ und ohne Legende – „␣ = Leertaste“ steht im Hinweis, solange es dran ist); beim Schreiben (.tt-schreibt)
   ist er weg – Umstellen hieße ohnehin neu beginnen, und die Bildschirmtastatur samt Leertaste bleibt ganz im Bild. Breiter: kein Kurzhinweis (die Legende steht da). */
@media (min-width:601px){.tt-hw-umbr{display:none}}
@media (max-width:600px){
  .tt-enterwahl{font-size:12px;gap:2px;margin:1px 0}
  .tt-ew{min-height:28px;padding:2px 7px}
  .tt-ew-info:not(.tt-ew-fest),.tt-ew-leg{display:none}
  .tt-schreibt .tt-sf-fuss .tt-enterwahl{display:none}
}