:root {
  --d-hm-himmel: #d8f2f5; --d-hm-himmel-hell: #effbfc; --d-hm-tinte: #244350;
  --d-hm-matt: #54717a; --d-hm-papier: #ffffff; --d-hm-blau: #176593;
  --d-hm-wolke: #c4e7f3; --d-hm-wolkenrand: #9acbdb;
  --d-hm-gras: #539e64; --d-hm-wiese: #78bb75; --d-hm-wiese-hell: #b6d995;
  --d-hm-blatt: #276d4c; --d-hm-baum: #76b67b; --d-hm-baum-hell: #a7ce7c;
  --d-hm-holz: #96633f; --d-hm-holz-hell: #b67d4d; --d-hm-holz-dunkel: #684c35;
  --d-hm-huegel: #b98a60; --d-hm-huegel-hell: #d5a678;
  --d-hm-sonne: #ffcf5b; --d-hm-sonne-hell: #ffdf7d;
  --d-hm-bluete: #fff4dd; --d-hm-rosa: #eea38e;
  --d-hm-hose: #365e78; --d-hm-hose-hell: #62859c; --d-hm-shirt: #f1dfb6;
  --d-hm-haut: #e8b48d; --d-hm-schuhe: #6e5b4c;
  --d-hm-gut: #256848; --d-hm-gut-bg: #d5ebd7; --d-hm-falsch: #9c4937; --d-hm-falsch-bg: #f6e1d8;
  --d-hm-linie: #b5d2d7; --d-hm-schatten: #43727b24;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',sans-serif; color:var(--d-ink); }
button,select,input { font:inherit; -webkit-appearance:none; appearance:none; }
button,a,select { touch-action:manipulation; }
button { cursor:pointer; min-height:44px; border:1px solid var(--d-line); color:var(--d-ink); background:var(--d-surface-2); border-radius:12px; padding:9px 15px; font-weight:650; }
button:disabled { cursor:default; }
button:hover:not(:disabled) { filter:brightness(1.04); }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid var(--d-focus); outline-offset:3px; }
[hidden] { display:none !important; }
.kopf { max-width:1240px; display:flex; gap:20px; align-items:center; margin:auto; padding:22px 26px 18px; }
.zurueck { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; color:var(--d-ink-soft); font-size:14px; }
.titel { display:flex; gap:12px; align-items:center; }
.wortmarke { font-family:'Baloo 2',sans-serif; font-size:31px; font-weight:750; letter-spacing:-1px; line-height:1; }
.titel-punkt { color:var(--d-honig); }
.untertitel { font-size:10px; line-height:1.6; letter-spacing:2px; font-weight:750; max-width:70px; color:var(--d-ink-soft); }
.probe { color:var(--d-honig); border:1px solid var(--d-honig); border-radius:6px; padding:5px 8px; font-size:11px; }
.werkzeuge { margin-left:auto; display:flex; gap:9px; }
.werkzeuge button { font-size:12px; background:var(--d-card-bg); box-shadow:var(--d-small-shadow); }
#hilfe { min-width:44px; font-size:19px; padding:7px; }
main { max-width:1240px; padding:0 24px 20px; margin:0 auto; }
.vorschau-rollen { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; margin:10px 0; font-size:11px; color:var(--d-ink-soft); }
.vorschau-rollen select { padding-left:10px; font-size:16px; }
.spiel { border:var(--d-card-border); border-radius:25px; box-shadow:var(--d-card-shadow); overflow:hidden; background:var(--d-surface); }
.spiel-leiste { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 22px; background:var(--d-card-bg); }
#modus { background:transparent; font-size:13px; color:var(--d-ink-soft); }
.einstellungen { display:flex; gap:22px; }
.einstellungen label { display:flex; flex-direction:column; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--d-ink-soft); }
select { min-height:44px; font-size:14px; font-weight:650; color:var(--d-ink); background:transparent; border:0; border-radius:6px; padding:5px 24px 5px 0; background-image:linear-gradient(45deg,transparent 50%,var(--d-ink-soft) 50%),linear-gradient(135deg,var(--d-ink-soft) 50%,transparent 50%); background-position:calc(100% - 8px) 50%,calc(100% - 3px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
select option { color:var(--d-ink); background:var(--d-surface); }
.buehne { position:relative; min-height:410px; height:clamp(375px,39vw,455px); background:linear-gradient(var(--d-hm-himmel),var(--d-hm-himmel-hell)); color:var(--d-hm-tinte); isolation:isolate; }
#landschaft { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto !important; pointer-events:none; z-index:-1; }
#landschaft>.lw-pixi-szene { height:100%; aspect-ratio:auto !important; }
.wolken-bedienung { position:absolute; top:30px; left:3%; width:27%; z-index:2; }
.klassenwolke,.namenswolke { position:relative; border:0; color:var(--d-hm-blau); background:var(--d-hm-wolke); border-radius:50% 45% 43% 48%; box-shadow:0 4px 0 var(--d-hm-wolkenrand); font-family:'Baloo 2',sans-serif; font-size:27px; line-height:1; min-height:80px; width:100%; padding:15px 18px; }
.klassenwolke:before,.klassenwolke:after,.namenswolke:before { content:''; position:absolute; z-index:-1; background:inherit; border-radius:50%; width:40%; height:75%; top:-14px; left:12%; }
.klassenwolke:after { left:auto; right:10%; top:-8px; }
.wolke-klein { display:block; font:700 8px/1.4 'Inter',sans-serif; letter-spacing:1px; margin-bottom:5px; }
#klassen-pfeil { font-size:16px; margin-left:8px; }
.namenswolke { background:var(--d-hm-papier); box-shadow:0 3px 0 var(--d-hm-linie); color:var(--d-hm-tinte); font-size:21px; width:88%; margin:24px 0 0 18%; min-height:73px; padding:12px 14px; }
.namenswolke .wolke-klein { font-size:6px; }
#kindname { display:block; overflow-wrap:anywhere; max-height:65px; overflow:auto; }
.startkarte { position:relative; margin:auto; padding:38px 0 0; text-align:center; width:48%; }
.augenbraue { font-size:9px; font-weight:750; letter-spacing:2.3px; color:var(--d-hm-matt); }
h1 { font-family:'Baloo 2',sans-serif; font-weight:700; line-height:1.06; font-size:46px; margin:13px 0 10px; letter-spacing:-.8px; }
.startkarte p { font-size:13px; margin:0 0 22px; color:var(--d-hm-matt); }
.spielarten { display:grid; gap:9px; max-width:340px; margin:auto; }
.spielart { display:flex; align-items:center; gap:16px; text-align:left; color:var(--d-hm-tinte); border:1px solid var(--d-hm-linie); background:var(--d-hm-papier); box-shadow:0 4px 0 var(--d-hm-schatten); padding:12px 15px; border-radius:15px; }
.spielart svg { width:32px; height:32px; fill:none; stroke:var(--d-hm-blau); stroke-width:2; stroke-linecap:round; }
.spielart span:first-of-type { flex:1; font-size:15px; }
.spielart small { display:block; font-weight:450; font-size:10px; color:var(--d-hm-matt); margin-top:4px; }
.textknopf { margin-top:14px; border-color:transparent; background:transparent; color:var(--d-hm-matt); font-size:12px; font-weight:550; text-decoration:underline; }
dialog .textknopf { margin:8px 0 0; color:inherit; }
#klassenkarte { width:60%; margin:auto; padding:150px 0 0; }
.klassenwahl { display:flex; align-items:center; justify-content:center; gap:12px; }
.klassenwahl .spielart { width:auto; padding:10px 18px 10px 15px; }
.zufallswort { flex:none; width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; color:var(--d-hm-blau); background:var(--d-hm-papier); border:1px solid var(--d-hm-linie); box-shadow:0 4px 0 var(--d-hm-schatten); font-family:'Baloo 2',sans-serif; font-size:30px; line-height:1; }
.wolken-bedienung .namenswolke { width:50%; margin:12px 0 0 18%; min-height:42px; padding:7px 10px; font-size:15px; }
.wolken-bedienung .namenswolke .wolke-klein { font-size:9px; letter-spacing:0; margin-bottom:2px; }
.wolken-bedienung #kindname { max-height:36px; }
@media(min-width:601px) and (orientation:portrait) { #klassenkarte { padding-top:190px; } }
@media(max-width:600px) { #klassenkarte { width:92%; margin:auto; padding-top:185px; } }
.raetselbereich { position:relative; text-align:center; padding:135px 0 26px; width:60%; margin:auto; }
.thema { font-size:9px; font-weight:750; letter-spacing:2px; color:var(--d-hm-matt); }
.raetselbereich h1 { font-size:25px; margin:10px 0 20px; letter-spacing:0; }
.wortfelder { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:100%; margin:auto; }
.wortfeld { display:inline-flex; align-items:center; justify-content:center; min-width:31px; width:clamp(31px,3.1vw,40px); height:51px; border-bottom:3px solid var(--d-hm-blau); font-family:'Baloo 2',sans-serif; font-size:35px; font-weight:600; line-height:1; }
.wortfeld.offen { color:var(--d-hm-blau); }
.wortfeld.aufgeloest { color:var(--d-hm-falsch); }
.wortfelder.lang .wortfeld { min-width:24px; width:24px; height:42px; font-size:28px; }
.rueckmeldung { min-height:22px; font-size:13px; font-weight:550; margin:17px 0 9px; color:var(--d-hm-matt); }
.rundenende { margin-top:12px; }
.primaer { color:var(--d-btn-ink); background:var(--d-btn-bg); border:0; }
.rundenende .primaer { color:var(--d-hm-papier); background:var(--d-hm-blau); box-shadow:0 4px 0 var(--d-hm-schatten); }
.tastaturbereich { color:var(--d-hm-tinte); background:var(--d-hm-himmel-hell); padding:14px 25px 20px; }
.tastatur-kopf { display:flex; justify-content:space-between; color:var(--d-hm-matt); font-size:11px; margin:0 0 12px; }
.legende { color:var(--d-hm-gut); }
.legende span { margin-left:12px; color:var(--d-hm-falsch); }
.tastatur { display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:7px; max-width:1030px; margin:auto; }
.buchstabe { position:relative; border:1px solid var(--d-hm-linie); color:var(--d-hm-tinte); background:var(--d-hm-papier); box-shadow:0 3px 0 var(--d-hm-schatten); border-radius:11px; padding:7px 2px 10px; font:600 25px/1 'Baloo 2',sans-serif; min-height:58px; }
.buchstabe .zeichen { position:absolute; bottom:3px; right:6px; font:700 10px 'Inter',sans-serif; }
.buchstabe.gut { background:var(--d-hm-gut-bg); color:var(--d-hm-gut); border-color:var(--d-hm-gut); box-shadow:none; }
.buchstabe.falsch { background:var(--d-hm-falsch-bg); color:var(--d-hm-falsch); border-color:var(--d-hm-falsch); box-shadow:none; }
.buchstabe:disabled { opacity:1; }
.buchstabe.sonder { grid-row:3; }
.buchstabe.wort-falsch { grid-row:3; grid-column:13; display:flex; align-items:center; justify-content:center; padding:0; background:#d32f2f; border-color:#a61e1e; box-shadow:0 3px 0 #7d1414; }
.buchstabe.wort-falsch svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; }
.buchstabe.wort-falsch:active { transform:translateY(2px); box-shadow:0 1px 0 #7d1414; }
.buchstabe.wort-loesen { grid-row:3; grid-column:12; display:flex; align-items:center; justify-content:center; padding:0; background:#2e9b4f; border-color:#1f7a3a; box-shadow:0 3px 0 #155a2a; }
.buchstabe.wort-loesen svg { width:34px; height:34px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.buchstabe.wort-loesen svg .licht { fill:#fff6b0; }
.buchstabe.wort-loesen:active { transform:translateY(2px); box-shadow:0 1px 0 #155a2a; }
.buchstabe.wort-loesen:disabled, .buchstabe.wort-falsch:disabled { opacity:.55; }
.buchstabe[data-buchstabe="ä"] { grid-column:5; }
.buchstabe[data-buchstabe="ö"] { grid-column:6; }
.buchstabe[data-buchstabe="ü"] { grid-column:7; }
.buchstabe[data-buchstabe="ß"] { grid-column:8; }
.spiel-fuss { display:flex; align-items:center; justify-content:space-between; padding:9px 22px; gap:10px; }
.spiel-fuss p { font-size:11px; color:var(--d-ink-soft); margin:0; }
.spiel-fuss>div { display:flex; gap:8px; }
.spiel-fuss button { font-size:12px; background:transparent; }
.probenhinweis { text-align:center; font-size:10px; color:var(--d-ink-soft); line-height:1.6; margin:12px 0 0; }
dialog { color:var(--d-ink); background:var(--d-surface); border:var(--d-card-border); box-shadow:var(--d-pop-shadow); border-radius:24px; padding:24px; width:min(94vw,640px); max-height:90dvh; overflow:auto; }
dialog::backdrop { background:var(--d-bg); opacity:.78; }
.dialog-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.dialog-kopf h2 { font-family:'Baloo 2',sans-serif; font-size:27px; margin:0; }
.dialog-kopf button { font-size:24px; min-width:44px; padding:2px; }
#dialog-inhalt { font-size:15px; line-height:1.65; }
#dialog-inhalt p { margin:10px 0; color:var(--d-ink-soft); }
#dialog-inhalt label { display:block; margin:12px 0 6px; }
input { color:var(--d-ink); background:var(--d-bg); border:1px solid var(--d-line); font-size:22px; min-height:52px; padding:12px; border-radius:12px; width:100%; }
.dialog-aktionen { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.fehler { color:var(--d-honig); font-size:14px; }
.klassenliste { display:grid; gap:9px; }
.klassenliste button { text-align:left; display:flex; justify-content:space-between; }
.klassenliste small { color:var(--d-ink-soft); }
.klassenstart { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr); align-items:center; gap:12px; padding:17px 24px; background:var(--d-card-bg); border-top:1px solid var(--d-line); }
.klassenstart>div:first-child { grid-column:1; grid-row:1; }
.klassenstart h2 { font-family:'Baloo 2',sans-serif; font-size:21px; margin:0; }
.klassenstart p { margin:2px 0 0; font-size:11px; color:var(--d-ink-soft); }
.schnellklassen { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; grid-column:2; grid-row:1; }
.schnellklasse { min-width:58px; min-height:44px; background:var(--d-hm-wolke); color:var(--d-hm-blau); border-color:var(--d-hm-wolkenrand); }
.schnellklasse small { display:block; font-size:10px; }
#klasse-anlegen,.klasse-anlegen { background:transparent; font-size:13px; }
#klasse-anlegen { grid-column:3; grid-row:1; justify-self:end; border-color:transparent; color:var(--d-ink-soft); font-size:12px; font-weight:500; padding:8px; }
#klassen-neuladen { grid-column:3; grid-row:2; justify-self:end; }
.klasse-anlegen { margin:15px 12px 0 0; }
@media(max-width:850px) { .klassenstart { grid-template-columns:minmax(0,1fr) auto; } .schnellklassen { grid-column:1/-1; grid-row:2; } #klasse-anlegen { grid-column:2; } #klassen-neuladen { grid-column:1/-1; grid-row:3; } }
@media(max-width:600px) { .klassenstart { padding:15px; gap:10px; } }
.umschalter { display:flex; gap:8px; margin-bottom:14px; }
.umschalter button[aria-pressed=true] { border-color:var(--d-focus); }
.nicht-animieren * { animation:none !important; transition:none !important; }
@media(min-width:601px) and (orientation:portrait) {
  .buehne { height:450px; min-height:450px; }
  .raetselbereich { padding-top:141px; }
}
@media(min-width:601px) and (max-height:850px) and (orientation:landscape) {
  .kopf { padding-top:12px; padding-bottom:12px; }
  .buehne { height:360px; min-height:360px; }
  .raetselbereich { padding-top:145px; padding-bottom:18px; }
  .raetselbereich h1 { margin-top:8px; margin-bottom:12px; font-size:23px; }
  .rueckmeldung { margin-top:10px; margin-bottom:7px; }
  .rundenende { margin-top:6px; }
  .startkarte { padding-top:18px; }
  .startkarte h1 { font-size:35px; }
  .startkarte p { margin-bottom:13px; }
  .spielart { padding:10px 15px; }
  .tastaturbereich { padding-top:11px; padding-bottom:12px; }
  .tastatur-kopf { margin-bottom:9px; }
  .buchstabe { min-height:52px; }
  .buchstabe.sonder { min-height:44px; }
}
@media(min-width:1100px) { .buchstabe { min-height:64px; } }
@media(max-width:850px) { .kopf { gap:13px; padding:16px 18px; } .untertitel { display:none; } main { padding:0 14px 20px; } .einstellungen { gap:13px; } .spiel-leiste { padding:10px 15px; } .raetselbereich { width:62%; } .wolke-klein { font-size:7px; } .tastaturbereich { padding:13px 16px 18px; } .tastatur { gap:5px; } .buchstabe { min-height:52px; font-size:23px; } .startkarte { width:50%; } h1 { font-size:39px; } }
@media(max-width:600px) { .kopf { flex-wrap:wrap; gap:9px; padding:12px 14px; } .wortmarke { font-size:27px; } .probe { font-size:9px; } .werkzeuge { gap:5px; } .werkzeuge button { font-size:10px; padding:8px; } .zurueck { font-size:12px; } .titel { margin-right:auto; } main { padding:0 8px 15px; } .spiel { border-radius:18px; } .spiel-leiste { flex-wrap:wrap; gap:4px; padding:6px 11px; } .einstellungen { flex:1; justify-content:space-between; gap:6px; } #modus { padding:8px; width:100%; text-align:left; min-height:44px; } select { font-size:12px; } .einstellungen label { font-size:8px; } .buehne { height:440px; min-height:440px; } .wolken-bedienung { top:25px; left:5%; width:42%; } .klassenwolke { font-size:23px; min-height:65px; padding:10px; } .namenswolke { margin-top:17px; font-size:19px; min-height:68px; } .namenswolke .wolke-klein { font-size:5.5px; } .wolke-klein { font-size:6px; } .startkarte { width:86%; padding-top:132px; } .startkarte .augenbraue { font-size:7px; } h1 { font-size:32px; margin:10px 0; } .startkarte p { margin-bottom:14px; font-size:12px; } .spielarten { max-width:270px; gap:7px; } .spielart { padding:10px 13px; } .spielart span:first-of-type { font-size:13px; } .spielart small { font-size:9px; } .spielart svg { width:27px; height:27px; } .raetselbereich { padding-top:199px; width:82%; } .raetselbereich h1 { font-size:22px; margin-bottom:12px; } .thema { font-size:8px; } .wortfelder { gap:5px; } .wortfeld { width:26px; min-width:26px; height:37px; font-size:28px; border-bottom-width:2px; } .rueckmeldung { font-size:11px; margin-top:12px; } .tastatur { grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px 5px; } .buchstabe { min-height:49px; font-size:25px; } .buchstabe.sonder { grid-row:auto; } .buchstabe.sonder:nth-last-child(4) { grid-column:auto; } .tastaturbereich { padding:12px 10px 16px; } .tastatur-kopf { font-size:9px; } .legende span { margin-left:6px; } .spiel-fuss { padding:8px 10px; flex-wrap:wrap; } .spiel-fuss p { font-size:10px; } .spiel-fuss>div { margin-left:auto; } .spiel-fuss button { font-size:10px; padding:8px; } dialog { padding:17px; } .dialog-kopf h2 { font-size:23px; } }
@media(max-width:600px) {
  .buehne { height:480px; min-height:480px; }
  .buchstabe.sonder:nth-last-child(n) { grid-column:auto; }
  .buchstabe.wort-falsch, .buchstabe.wort-loesen { grid-row:auto; grid-column:auto; }
  .wortfelder.lang .wortfeld { min-width:23px; width:23px; height:35px; font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* Ton-Knopf als Lautsprecher-Symbol (Roman, 06.11.2026): an = leicht abgehoben, aus = durchgestrichen */
.werkzeuge button.lw-ton{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.14);color:var(--d-ink,#EEF3FF);box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}.werkzeuge button.lw-ton[aria-pressed="false"]{background:transparent;border-color:transparent;color:var(--d-ink-soft,#B3C3EC)}.werkzeuge button.lw-ton svg{width:22px;height:22px}.werkzeuge button.lw-ton[aria-pressed="true"] .lw-ton-strich,.werkzeuge button.lw-ton[aria-pressed="false"] .lw-ton-wellen{display:none}