/* Andika liegt auf dem eigenen Server (keine Verbindung zu Google – Datenschutz an Schulen). Lizenz: SIL Open Font License. */
@font-face{font-family:"Andika";src:url("schrift/andika-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url("schrift/andika-700.woff") format("woff");font-weight:700;font-display:swap}
/* Rechtschreibzauber für Schulen – gemeinsame Gestaltung
   Farben wie die Rechtschreibzauber-App (Navy/Gold/Creme), ruhig, eine breite Spalte. */
:root{
  --navy:#1b2235; --navy-2:#2a3350;
  --gold:#c2a442; --gold-dark:#8a6f22;
  --cream:#f4efe4; --tinte:#26303f; --card:#ffffff;
  --bg:#ece7da; --muted:#5b6270; --linie:#ddd5c3;
  --gruen:#2f6b46; --gruen-hell:#e3f0e7;
  --orange:#9a5b12; --orange-hell:#fbeedd;
  --rot:#9b2c2c; --rot-hell:#f8e3e3;
  --schatten:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(27,34,53,.10), 0 2px 4px rgba(27,34,53,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tinte);
  font:17px/1.55 "Andika", system-ui, sans-serif}
img{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
/* Kopf */
.kopf{background:var(--navy);color:var(--cream);padding:14px 0}
.kopf .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kopf .marke{font-weight:700;font-size:19px;letter-spacing:.2px;flex:1;min-width:180px}
.kopf .marke small{display:block;font-weight:400;font-size:13px;color:#d9d2c0}
.kopf a,.kopf button{color:var(--cream)}
.land{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.land button{border:0;background:transparent;color:var(--cream);font:inherit;font-size:14px;
  padding:6px 10px;border-radius:8px;cursor:pointer;min-height:36px}
.land button[aria-pressed="true"]{background:var(--gold);color:var(--navy);font-weight:700}
/* Karten */
.karte{background:var(--card);border-radius:18px;box-shadow:var(--schatten);padding:22px;margin:18px 0}
.karte h2{margin:0 0 8px;font-size:22px;color:var(--navy)}
.karte h3{margin:14px 0 6px;font-size:18px;color:var(--navy)}
.karte p{margin:6px 0}
.hinweis{background:var(--cream);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:15px}
.entwurf{background:var(--orange-hell);border:1px dashed var(--orange);color:#5a3a0c;border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0}
.leise{color:var(--muted);font-size:15px}
/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:inherit;font-weight:700;border-radius:14px;padding:12px 20px;min-height:48px;text-decoration:none;
  background:linear-gradient(180deg,#d4b85a,var(--gold));color:var(--navy);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 3px 0 var(--gold-dark),0 6px 14px rgba(0,0,0,.12)}
.knopf:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-dark)}
.knopf.zwei{background:linear-gradient(180deg,#34406a,var(--navy));color:var(--cream);box-shadow:0 3px 0 #0d1220,0 6px 14px rgba(0,0,0,.15)}
.knopf.still{background:var(--cream);color:var(--navy);box-shadow:0 2px 0 var(--linie)}
.knopf:focus-visible,.kachel:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.knopfreihe{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.zurueck{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;color:var(--navy);
  cursor:pointer;padding:8px 0;min-height:44px;font-weight:700}
/* Kacheln: EINE breite Spalte */
.kacheln{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.kachel{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:16px;box-shadow:var(--schatten);
  padding:16px 18px;border:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.kachel .sym{flex:0 0 52px;height:52px;border-radius:14px;background:var(--cream);display:flex;align-items:center;
  justify-content:center;font-size:28px;box-shadow:0 2px 0 var(--linie)}
.kachel b{display:block;color:var(--navy);font-size:18px}
.kachel span.leise{display:block}
.kachel .marke-bald{display:inline-block;margin-top:6px;font-size:12px;background:var(--cream);color:var(--muted);border-radius:20px;padding:3px 10px}
/* Formulare */
label{display:block;font-weight:700;margin:12px 0 4px;color:var(--navy)}
input[type=text],input[type=number],select{font:inherit;width:100%;max-width:420px;padding:10px 12px;border:2px solid var(--linie);
  border-radius:12px;background:#fff;min-height:48px}
/* Auswahl-Raster (Tiere, Bilder) */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:10px 0}
.wahl{background:var(--card);border:3px solid transparent;border-radius:16px;box-shadow:var(--schatten);padding:10px 6px;
  text-align:center;cursor:pointer;font:inherit;color:var(--tinte)}
.wahl .bild{font-size:46px;line-height:1.1}
.wahl small{display:block;font-size:14px;margin-top:4px}
.wahl[aria-pressed="true"]{border-color:var(--gold);background:var(--cream)}
/* Tabellen */
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle th,.tabelle td{padding:8px 6px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.tabelle th{color:var(--navy);font-size:14px}
.scroll{overflow-x:auto}
.stufe{display:inline-block;border-radius:20px;padding:2px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.stufe.viel{background:var(--rot-hell);color:var(--rot)}
.stufe.gut{background:var(--orange-hell);color:var(--orange)}
.stufe.sicher{background:var(--gruen-hell);color:var(--gruen)}
.balken{height:14px;background:var(--cream);border-radius:8px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--gold)}
/* Reiter */
.reiter{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.reiter button{font:inherit;border:0;border-radius:12px;padding:10px 14px;background:var(--cream);color:var(--navy);cursor:pointer;min-height:44px}
.reiter button[aria-selected="true"]{background:var(--navy);color:var(--cream);font-weight:700}
.fuss{color:var(--muted);font-size:13px;padding:24px 0 40px;text-align:center}
.fuss a{color:var(--muted)}
[hidden]{display:none!important}
.kachel > span:nth-child(2){flex:1;min-width:0}
@media (max-width:520px){.knopfreihe .knopf{width:100%}.karte{padding:18px}}

.fehler{color:var(--rot);font-weight:700}

/* ---------- Hochwertige Gestaltung für alle Seiten (18.10.2026) ---------- */
body{background:radial-gradient(1100px 600px at 50% -10%,#f8f3e6,transparent 70%),linear-gradient(180deg,#efe9db,#e7e0cf);background-attachment:fixed;min-height:100vh}
.kopf{background:radial-gradient(1.5px 1.5px at 18% 30%,rgba(255,240,190,.8) 50%,transparent 51%),radial-gradient(1px 1px at 72% 62%,rgba(255,255,255,.6) 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 90% 24%,rgba(255,232,160,.8) 50%,transparent 51%),radial-gradient(600px 200px at 85% 0%,rgba(194,164,66,.18),transparent 70%),linear-gradient(180deg,#1f2740,#1b2235)}
.karte{border-radius:20px}
.karte > h2:first-child{font-size:25px}

/* Gemalte Bildzeichen statt Emojis (18.10.2026): wachsen mit der Schriftgröße der Stelle */
img.bz{width:1.35em;height:1.35em;object-fit:contain;vertical-align:-.32em;display:inline-block}
.kachel .sym img.bz{width:82%;height:82%;vertical-align:middle}
.wahl .bild img.bz{width:1.45em;height:1.45em;vertical-align:middle;filter:drop-shadow(0 3px 4px rgba(27,34,53,.12))}
.wahl:hover .bild img.bz{transform:scale(1.06) rotate(-2deg);transition:transform .2s ease}
@media print{img.bz{-webkit-print-color-adjust:exact;print-color-adjust:exact}}