/* splan: Papierblätter auf dem Lehrertisch, Kopf in Tafelgrün, Register wie im Ordner.
   Einzige Akzentfarbe ist Marias Silbenblau; Grün heißt fertig, Rot heißt hier stimmt etwas nicht.
   Tiefe: leise Schatten (Papier liegt auf dem Tisch). Raster 4 px. Schrift: Atkinson Hyperlegible, Titel in Andika. */

@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(vendor/fonts/atkinson-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(vendor/fonts/atkinson-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(vendor/fonts/atkinson-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(vendor/fonts/atkinson-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Andika";font-weight:400;font-display:swap;src:url(vendor/fonts/andika-latin-400.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:700;font-display:swap;src:url(vendor/fonts/andika-latin-700.woff2) format("woff2")}

:root{
  --tafel:#24362d; --tafel-hell:#34493e; --kreide:#e9efe9;
  --tisch:#eaece7; --papier:#ffffff; --einsatz:#f3f4f1; --einsatz-tief:#e3e6e0;
  --tinte:#1b231f; --tinte-2:#46514b; --tinte-3:#6b756f; --tinte-4:#9aa39d;
  --kante:rgba(27,35,31,.13); --kante-weich:rgba(27,35,31,.07); --kante-stark:rgba(27,35,31,.28);
  --blau:#1D5CC4; --blau-tief:#174a9e; --blau-bg:rgba(29,92,196,.08); --blau-ring:rgba(29,92,196,.32);
  --rot:#c22b25; --rot-bg:#fbebea; --gruen:#1d7f46; --gruen-bg:#e6f2ea; --gelb-bg:#fbf3d9; --gelb-tinte:#5b4a12;
  --k-name:#1D5CC4; --k-feld:#d07a00; --k-gesicht:#9a2fb0; --k-hand:#1d7f46;
  --knopf-text:#ffffff;
  --schatten:0 0 0 1px rgba(27,35,31,.06), 0 1px 2px -1px rgba(27,35,31,.08), 0 6px 16px -4px rgba(27,35,31,.07);
  --r-klein:6px; --r-mittel:10px; --r-gross:14px;
  --schrift:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --titel:"Andika","Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --weich:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme: dark){:root{
  --tafel:#1d2b24; --tafel-hell:#2a3b32; --kreide:#cfd8d1;
  --tisch:#141916; --papier:#1c221f; --einsatz:#171c19; --einsatz-tief:#111512;
  --tinte:#e6ebe7; --tinte-2:#b9c2bc; --tinte-3:#8f9993; --tinte-4:#68716b;
  --kante:rgba(255,255,255,.10); --kante-weich:rgba(255,255,255,.06); --kante-stark:rgba(255,255,255,.24);
  --blau:#7aa4ef; --blau-tief:#9bbcf5; --blau-bg:rgba(122,164,239,.12); --blau-ring:rgba(122,164,239,.4);
  --rot:#f0857d; --rot-bg:#3a1f1d; --gruen:#62c98d; --gruen-bg:#17301f; --gelb-bg:#332c18; --gelb-tinte:#ecd99a;
  --knopf-text:#0f1a2e;
  --schatten:0 0 0 1px rgba(255,255,255,.08);
  color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--tisch);color:var(--tinte);font:16px/1.55 var(--schrift);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--titel);font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--tinte)}
h1{font-size:1.95rem;line-height:1.15} h2{font-size:1.56rem;line-height:1.2} h3{font-size:1rem;color:var(--tinte-2)}
p{margin:0;text-wrap:pretty}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.gross{width:30px;height:30px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.leise{color:var(--tinte-3)} .klein{font-size:.875rem}
:focus-visible{outline:3px solid var(--blau-ring);outline-offset:2px}

/* Kopf: Tafel */
.kopf{background:var(--tafel);color:var(--kreide);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px))}
.marke{display:flex;align-items:center;gap:10px;font:700 1.4rem var(--titel);color:#fff;letter-spacing:.01em}
.marke img{display:block}
.kopf-rechts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kopf-info{font-size:.875rem;color:var(--kreide);opacity:.85;margin-right:4px}
.kopf-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);font-weight:400;min-height:38px;padding:6px 12px}
.kopf-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.kopf-btn .ic{width:17px;height:17px}

main{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:32px max(16px,env(safe-area-inset-left,0px)) 48px;display:flex;flex-direction:column;gap:20px}
.haupt{display:flex;flex-direction:column;min-width:0}

/* Blatt: Papier auf dem Tisch */
.blatt{background:var(--papier);border-radius:var(--r-gross);box-shadow:var(--schatten);padding:28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.blatt.schmal{max-width:480px;width:100%;margin:0 auto}
.blatt.mit-register{border-top-left-radius:0}
.blatt-kopf{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.blatt-kopf p{color:var(--tinte-2);max-width:66ch}
.zentriert{text-align:center;align-items:center}
.schloss{width:56px;height:56px;border-radius:50%;background:var(--einsatz);color:var(--tafel);display:grid;place-items:center;margin:0 auto}
@media (prefers-color-scheme: dark){.schloss{color:var(--kreide)}}

/* Register wie im Ordner */
.register{display:flex;gap:4px;flex-wrap:wrap}
.register .kurz{display:none}
.register button{display:inline-flex;align-items:center;gap:8px;background:var(--einsatz-tief);color:var(--tinte-2);border:0;border-radius:var(--r-mittel) var(--r-mittel) 0 0;
  padding:10px 18px;font-weight:700;min-height:46px}
.register button:hover{color:var(--tinte);background:var(--einsatz)}
.register button[aria-selected=true]{background:var(--papier);color:var(--tinte);box-shadow:0 -1px 0 0 rgba(27,35,31,.06),-1px 0 0 0 rgba(27,35,31,.04),1px 0 0 0 rgba(27,35,31,.04)}
.register button[aria-selected=true] .ic{color:var(--blau)}

/* Felder */
.feld{display:flex;flex-direction:column;gap:6px}
label{font-weight:700;font-size:.94rem}
input[type=password],input[type=text],textarea{font:inherit;color:var(--tinte);background:var(--einsatz);border:1px solid var(--kante);border-radius:var(--r-klein);padding:10px 12px;width:100%;min-height:44px;transition:border-color .15s,box-shadow .15s,background-color .15s}
input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:0;border-color:var(--blau);box-shadow:0 0 0 3px var(--blau-bg);background:var(--papier)}

/* Knöpfe */
button{font:700 .97rem var(--schrift);border-radius:var(--r-klein);border:1px solid var(--blau);background:var(--blau);color:var(--knopf-text);padding:10px 18px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s var(--weich),background-color .15s,opacity .15s}
button:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
button:active{transform:scale(.97)}
button.zweit{background:transparent;color:var(--blau)}
button.zweit:hover{background:var(--blau-bg)}
button.rot{background:var(--rot);border-color:var(--rot)}
button.breit{width:100%}
button:disabled{opacity:.4;cursor:not-allowed;transform:none}
button.weg{background:transparent;border:0;color:var(--tinte-3);min-height:36px;width:36px;padding:0;font-size:1.3rem;line-height:1}
button.weg:hover{color:var(--rot);background:var(--rot-bg)}
.reihe{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Hinweise und Zustände */
.hinweis{background:var(--gelb-bg);color:var(--gelb-tinte);border-radius:var(--r-klein);padding:12px 14px;font-size:.94rem}
.fehler{color:var(--rot);font-weight:700}
.fehler:empty{display:none}
.box{border-radius:var(--r-mittel);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.box.ok{background:var(--gruen-bg);color:var(--gruen);font-weight:700}
.box.fund{background:var(--rot-bg);color:var(--tinte)}
.box.fund b{color:var(--rot)}
.box.warn{background:var(--gelb-bg);color:var(--gelb-tinte)}
.box ul{margin:0;padding-left:20px}
.box label{font-weight:700;display:flex;gap:10px;align-items:flex-start}
.box input[type=checkbox],.seite input[type=checkbox],.schalter input{width:20px;height:20px;accent-color:var(--blau);margin-top:2px;flex:none}
.trenner{display:flex;align-items:center;gap:12px;color:var(--tinte-4);font-size:.875rem;margin:8px 0}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--kante)}

/* Richtung: zwei Karten mit Mini-Beispiel */
fieldset.richtung{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
@media (max-width:640px){fieldset.richtung{grid-template-columns:1fr}}
.wahl{position:relative;display:flex;flex-direction:column;gap:12px;font-weight:400;border:1px solid var(--kante);border-radius:var(--r-mittel);padding:16px;cursor:pointer;background:var(--papier);transition:border-color .15s,background-color .15s}
.wahl:hover{border-color:var(--kante-stark)}
.wahl:has(input:checked){border-color:var(--blau);background:var(--blau-bg);box-shadow:0 0 0 1px var(--blau)}
.wahl input{position:absolute;top:16px;right:16px;width:18px;height:18px;accent-color:var(--blau)}
.wahl-bild{display:flex;align-items:center;gap:10px;font:700 1.15rem var(--titel);color:var(--tinte)}
.wahl-bild .ic{color:var(--tinte-4)}
.kuerzel{display:inline-block;font:700 .95rem var(--schrift);color:var(--blau);background:var(--papier);border:1.5px solid var(--blau);border-radius:5px;padding:1px 8px;letter-spacing:.02em}
.wahl-text{display:flex;flex-direction:column;gap:2px}
.wahl-text span{color:var(--tinte-3);font-size:.94rem}

/* Ablage: der Mittelpunkt jeder Ansicht */
.ablage{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed var(--kante-stark);border-radius:var(--r-mittel);padding:36px 20px;cursor:pointer;background:var(--einsatz);transition:border-color .15s,background-color .15s}
.ablage:hover,.ablage.ueber{border-color:var(--blau);background:var(--blau-bg)}
.ablage-ic{width:34px;height:34px;color:var(--blau)}
.ablage-titel{font:700 1.2rem var(--titel)}
.ablage .leise{font-size:.9rem}
.ablage.aus{opacity:.55;cursor:progress}

/* Ergebnis */
.ergebnis{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--kante-weich);padding-top:20px}
.ergebnis-kopf{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.datei-titel{display:flex;gap:10px;align-items:flex-start;min-width:0}
.datei-titel .ic{margin-top:3px;color:var(--tinte-3)}
.datei-titel strong{display:block;word-break:break-word}
.datei-titel .leise{display:block;font-size:.9rem}

/* Fertig-Leiste mit Klettpunkten */
.leiste{list-style:none;margin:0;padding:12px 14px;display:flex;gap:6px 4px;flex-wrap:wrap;background:var(--einsatz);border-radius:var(--r-mittel)}
.leiste li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--tinte-3);padding-right:6px}
.leiste li+li::before{content:"";width:20px;height:2px;background:var(--kante);border-radius:1px;margin-right:4px}
.punkt{width:24px;height:24px;border-radius:50%;border:2px solid var(--kante-stark);display:grid;place-items:center;flex:none;background:var(--papier);font-size:.8rem;font-weight:700}
.punkt svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.leiste li[data-z=fertig]{color:var(--tinte)}
.leiste li[data-z=fertig] .punkt{background:var(--gruen);border-color:var(--gruen)}
.leiste li[data-z=fund]{color:var(--rot);font-weight:700}
.leiste li[data-z=fund] .punkt{border-color:var(--rot);color:var(--rot)}
.leiste li[data-z=jetzt]{color:var(--blau);font-weight:700}
.leiste li[data-z=jetzt] .punkt{border-color:var(--blau);box-shadow:0 0 0 3px var(--blau-bg)}

/* Getauschte Stellen */
.treffer-liste{display:flex;flex-direction:column;gap:8px}
#wordTreffer{display:flex;flex-direction:column;border:1px solid var(--kante);border-radius:var(--r-mittel);overflow:hidden}
.treffer+.treffer{border-top:1px solid var(--kante-weich)}
.treffer summary{padding:10px 14px;cursor:pointer;display:flex;gap:10px;justify-content:space-between;align-items:center;list-style:none}
.treffer summary::-webkit-details-marker{display:none}
.treffer summary:hover{background:var(--einsatz)}
.treffer summary .leise{font-variant-numeric:tabular-nums;font-size:.875rem}
.treffer ul{margin:0;padding:4px 14px 12px 34px;font-size:.92rem;color:var(--tinte-2)}
.treffer li{margin:4px 0;word-break:break-word}
mark{background:var(--blau-bg);color:var(--blau);border-radius:3px;padding:0 3px;font-weight:700}

/* PDF und Fotos */
.pruefhilfe{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--einsatz);border-radius:var(--r-mittel)}
.schalter{display:flex;gap:10px;align-items:center}
.legende{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.875rem;color:var(--tinte-2)}
.legende i{display:inline-block;width:14px;height:14px;background:#000;border:3px solid;border-radius:2px;vertical-align:-2px;margin-right:6px}
.k-name{border-color:var(--k-name)!important} .k-feld{border-color:var(--k-feld)!important} .k-gesicht{border-color:var(--k-gesicht)!important} .k-hand{border-color:var(--k-hand)!important}
.dateien{display:flex;flex-direction:column;gap:20px}
.datei{border:1px solid var(--kante);border-radius:var(--r-mittel);padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--papier)}
.seite{display:flex;flex-direction:column;gap:8px;border:2px solid transparent;border-radius:var(--r-mittel);padding:8px;transition:border-color .2s,background-color .2s}
.seite > .reihe{justify-content:space-between}
.seite.ok{border-color:var(--gruen);background:var(--gruen-bg)}
.seite.blockiert{border-color:var(--rot);background:var(--rot-bg)}
.seite label{display:flex;gap:10px;align-items:center}
canvas.ansicht{width:100%;height:auto;border-radius:6px;cursor:crosshair;touch-action:none;background:#fff;box-shadow:0 0 0 1px var(--kante)}
.textbox{display:flex;flex-direction:column;gap:8px}
textarea.ausgelesen{font:15px/1.55 var(--schrift);min-height:160px}

/* Namensliste als Namensschilder */
table.liste,table.liste tbody{display:block;width:100%}
#listeZeilen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
#listeZeilen tr{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--einsatz);border:1px solid var(--kante);border-radius:var(--r-mittel);padding:22px 14px 14px}
#listeZeilen tr::before{content:"";position:absolute;top:8px;left:50%;width:22px;height:6px;margin-left:-11px;border-radius:3px;background:var(--papier);box-shadow:inset 0 0 0 1px var(--kante)}
#listeZeilen td{display:flex;flex-direction:column;gap:4px;padding:0}
#listeZeilen td::before{content:attr(data-label);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-3)}
#listeZeilen td:first-child::before{content:none}
#listeZeilen td:first-child input{font:700 1.7rem/1.1 var(--titel);color:var(--blau);background:transparent;border-color:transparent;padding:4px 6px;min-height:0;width:calc(100% - 40px)}
#listeZeilen td:first-child input:hover{border-color:var(--kante)}
#listeZeilen td:first-child input:focus{background:var(--papier)}
#listeZeilen td:first-child input::placeholder{color:var(--tinte-4)}
#listeZeilen td:last-child{position:absolute;top:12px;right:8px}
#listeZeilen td:last-child::before{content:none}
#listeZeilen td input{background:var(--papier)}
.liste-fuss{border-top:1px solid var(--kante-weich);padding-top:16px}

.fuss{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--tinte-3);font-size:.875rem;padding:20px 16px 28px;text-align:center}
.fuss .ic{width:16px;height:16px}

@media (max-width:560px){
  main{padding-top:16px}
  .blatt{padding:20px 16px}
  h1{font-size:1.6rem} h2{font-size:1.35rem}
  .register{gap:2px}
  .register button{padding:10px 9px;font-size:.875rem;flex:1 1 auto;justify-content:center}
  .register .lang{display:none} .register .kurz{display:inline}
  .register button .ic{display:none}
  .kopf-info{width:100%}
}
@media (max-width:359px){.register button{padding:10px 6px;font-size:.8125rem}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- Startansicht: Bühne links, Formular rechts ---------- */
main.start{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;max-width:1080px;padding-top:56px}
main.start .blatt.schmal{margin:0;max-width:440px;justify-self:end}
@media (max-width:860px){main.start{grid-template-columns:1fr;gap:28px;padding-top:28px} main.start .blatt.schmal{justify-self:stretch;max-width:none}}
.buehne{display:flex;flex-direction:column;gap:18px;min-width:0}
.buehne-oben{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blau)}
.buehne-titel{font:700 clamp(2.4rem,5.2vw,3.6rem)/1.02 var(--titel);letter-spacing:-.025em;color:var(--tinte)}
.buehne-text{font-size:1.1rem;color:var(--tinte-2);max-width:44ch}
.buehne-punkte{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.buehne-punkte li{display:flex;gap:12px;align-items:flex-start;color:var(--tinte-2);font-size:.95rem}
.buehne-punkte .ic{width:34px;height:34px;padding:7px;border-radius:9px;background:var(--papier);color:var(--blau);box-shadow:var(--schatten)}
.buehne-punkte b{display:block;color:var(--tinte);font-size:1rem}

/* Namensschild-Demo: liegt schräg auf dem Tisch, der Balken fährt über den Namen, dann erscheint das Kürzel */
.demo{padding:14px 0 6px 6px}
.demo-schild{position:relative;display:flex;flex-direction:column;gap:12px;width:min(100%,360px);padding:30px 26px 24px;background:var(--papier);border-radius:12px;
  box-shadow:0 0 0 1px rgba(27,35,31,.07),0 2px 4px rgba(27,35,31,.06),0 18px 40px -12px rgba(27,35,31,.25);transform:rotate(-2.5deg)}
@media (prefers-color-scheme: dark){.demo-schild{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px -12px rgba(0,0,0,.6)}}
.demo-loch{position:absolute;top:10px;left:50%;width:34px;height:8px;margin-left:-17px;border-radius:4px;background:var(--tisch);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.demo-zeile{display:flex;align-items:baseline;gap:12px;font:700 2.2rem/1 var(--titel)}
.demo-label{font:400 1rem var(--schrift);color:var(--tinte-3)}
.demo-wort{position:relative;display:inline-block;min-width:3.4em}
.demo-name{color:var(--tinte);animation:demo-name 6s var(--weich) infinite}
.demo-balken{position:absolute;left:-4px;right:-4px;top:-2px;bottom:-6px;background:#111;border-radius:3px;transform-origin:left center;transform:scaleX(0);animation:demo-balken 6s var(--weich) infinite}
.demo-kuerzel{position:absolute;left:0;top:50%;font:700 1.3rem var(--schrift);color:var(--blau);background:var(--papier);border:2px solid var(--blau);border-radius:6px;padding:2px 10px;
  transform:translateY(-50%) scale(.9);opacity:0;animation:demo-kuerzel 6s var(--weich) infinite}
.demo-linie{display:block;height:8px;border-radius:4px;background:var(--einsatz-tief);width:88%}
.demo-linie.kurz{width:56%}
@keyframes demo-balken{0%,18%{transform:scaleX(0)}30%,52%{transform:scaleX(1)}62%,100%{transform:scaleX(1);opacity:0}}
@keyframes demo-name{0%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes demo-kuerzel{0%,56%{opacity:0;transform:translateY(-50%) scale(.9)}66%,94%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1)}}
@media (prefers-reduced-motion: reduce){
  .demo-name{animation:none;opacity:0} .demo-balken{animation:none;opacity:0}
  .demo-kuerzel{animation:none;opacity:1;transform:translateY(-50%)}
}

/* Leiste: Haken springt beim Erledigen leicht auf */
.leiste li.neu .punkt{animation:haken .45s var(--weich) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes haken{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* Ablage: deutliche Antwort beim Hineinziehen */
.ablage-ic{transition:transform .25s var(--weich)}
.ablage:hover .ablage-ic,.ablage.ueber .ablage-ic{transform:translateY(3px)}
.ablage.ueber{border-style:solid;box-shadow:0 0 0 4px var(--blau-bg)}

/* Blätter erscheinen sanft */
main.start .blatt,.buehne{animation:auf .35s var(--weich) both}
.buehne{animation-delay:.05s}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){main.start .blatt,.buehne,.leiste li.neu .punkt{animation:none}}
@media (prefers-color-scheme: dark){.kopf{box-shadow:0 1px 0 rgba(255,255,255,.07)}}

/* Word-Karten, Text-Reiter, mögliche Namen */
.wortkarte{border:1px solid var(--kante);border-radius:var(--r-mittel);padding:18px;background:var(--papier)}
.wortkarte + .wortkarte{margin-top:4px}
.wortkarte .bilder{display:flex;flex-direction:column;gap:10px}
.datei.eingebettet{border-style:dashed}
.treffer-box{display:flex;flex-direction:column;border:1px solid var(--kante);border-radius:var(--r-mittel);overflow:hidden}
.treffer-box .leer{padding:10px 14px}
button.klein-btn{min-height:32px;padding:4px 10px;font-size:.85rem;font-weight:700}
.namen-vorschlaege{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.namen-vorschlaege li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.text-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.text-paar{grid-template-columns:1fr}}
.text-paar textarea{min-height:220px;font:15px/1.55 var(--schrift);resize:vertical}
#textAus{background:var(--papier)}
#textMeldung{display:flex;flex-direction:column;gap:8px}
#textMeldung:empty{display:none}
.ignoriert{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--einsatz);border-radius:var(--r-mittel)}
.ignoriert ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ignoriert li{display:inline-flex;align-items:center;gap:2px;background:var(--papier);border:1px solid var(--kante);border-radius:999px;padding:2px 4px 2px 12px}
#wordErgebnisse:empty{display:none}

/* ---------- Wiederherstellungscode ---------- */
.code-karte{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;border:2px dashed var(--kante-stark);border-radius:var(--r-gross);padding:22px 16px;background:var(--einsatz)}
.code-titel{font:700 .8rem var(--schrift);letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3)}
.code-karte code{font:700 clamp(1rem,4.6vw,1.5rem)/1.2 ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;letter-spacing:.04em;color:var(--tinte);white-space:nowrap;user-select:all}
.code-klein{font-size:.82rem;color:var(--tinte-3);max-width:36ch}
.schutz{border-top:1px solid var(--kante-weich);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.schutz h3{margin:0}
/* Drucken: nur die Code-Karte (Klasse code-druck setzt der Knopf „Drucken“) */
@media print{
  body.code-druck{background:#fff}
  body.code-druck .kopf,body.code-druck .buehne,body.code-druck .fuss,body.code-druck #viewCode > :not(#codeKarte){display:none!important}
  body.code-druck main{display:block;padding:0;max-width:none}
  body.code-druck #viewCode{box-shadow:none;animation:none;transform:none;padding:15mm 0 0;background:#fff;max-width:none}
  body.code-druck #codeKarte{width:150mm;background:#fff;border-color:#555}
  body.code-druck #codeKarte code{font-size:22pt}
  body.code-druck #codeKarte code,body.code-druck #codeKarte span{color:#000}
}