/* „Sag mal!“ – Gestaltung. Markenfarben TCG: Navy / Orange / Grün, Schrift Arial */
:root{
  --sp-navy:#1B2A4A; --sp-navy2:#2C3F66; --sp-orange:#E8792B; --sp-orange-hell:#FCE9DA;
  --sp-gruen:#4CA64C; --sp-gruen-hell:#E3F2E3; --sp-rot:#C8453B; --sp-rot-hell:#F8E1DF;
  --sp-gelb:#F2B632; --sp-papier:#FAF7F2; --sp-karte:#FFFFFF; --sp-text:#1B2A4A; --sp-grau:#5B6478; --sp-linie:#E3DED5;
  --sp-schrift: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --sp-schrift-fa: Arial, Tahoma, "Segoe UI", "Noto Naskh Arabic", "Vazirmatn", sans-serif;
  --sp-schrift-zh: Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --sp-rund:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.sp-body{margin:0;background:var(--sp-papier);color:var(--sp-text);font-family:var(--sp-schrift);font-size:17px;line-height:1.5}
:lang(fa){font-family:var(--sp-schrift-fa)}
:lang(zh){font-family:var(--sp-schrift-zh)}
:lang(ar){font-family:var(--sp-schrift-fa)}
.sp-rueckfall-kopf{display:flex;gap:.5rem;align-items:center;padding:.6rem 1rem;background:var(--sp-navy);color:#fff;font-weight:bold}
.sp-rueckfall-kopf a{color:#fff;text-decoration:none}
.sp-app{max-width:980px;margin:0 auto;padding:16px}
.sp-noscript{background:#fff;padding:1rem;border-radius:var(--sp-rund)}
.sp-fuss{max-width:980px;margin:0 auto;padding:0 16px 32px;color:var(--sp-grau);font-size:.85rem}
button{font-family:inherit;font-size:1rem;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:var(--sp-navy2)}
:focus-visible{outline:3px solid var(--sp-orange);outline-offset:2px}
.sp-versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe */
.sp-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:999px;padding:.7rem 1.3rem;background:var(--sp-orange);color:#fff;font-weight:bold;min-height:44px;text-decoration:none;transition:transform .12s,background .2s}
.sp-knopf:hover:not(:disabled){transform:translateY(-1px);background:#d4691e}
.sp-knopf.sp-zweit{background:var(--sp-navy)}
.sp-knopf.sp-zweit:hover:not(:disabled){background:var(--sp-navy2)}
.sp-knopf.sp-leise{background:transparent;color:var(--sp-navy);border:2px solid var(--sp-navy)}
.sp-knopf.sp-leise:hover:not(:disabled){background:var(--sp-navy);color:#fff}
.sp-knopf.sp-klein{padding:.45rem .9rem;min-height:38px;font-size:.92rem}
.sp-ton{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;border:2px solid var(--sp-navy);background:#fff;color:var(--sp-navy);border-radius:999px;padding:.35rem .8rem;min-height:38px;font-weight:bold;font-size:.9rem}
.sp-ton:hover:not(:disabled){background:var(--sp-navy);color:#fff}
.sp-ton.sp-aktiv{background:var(--sp-rot);border-color:var(--sp-rot);color:#fff;animation:sp-puls 1s infinite}
@keyframes sp-puls{50%{box-shadow:0 0 0 6px rgba(200,69,59,.25)}}

/* Startseite */
.sp-hero{background:var(--sp-navy);color:#fff;border-radius:22px;padding:28px 24px;position:relative;overflow:hidden}
.sp-hero h1{margin:0 0 .2rem;font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.1}
.sp-hero .sp-unter{margin:0 0 1rem;color:#FFD8BA;font-weight:bold}
.sp-hero p{max-width:40rem}
.sp-blasen{position:absolute;inset-inline-end:14px;top:14px;display:flex;flex-direction:column;gap:6px;opacity:.95;pointer-events:none}
.sp-blase{background:#fff;color:var(--sp-navy);border-radius:14px;padding:4px 12px;font-weight:bold;font-size:1rem;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.sp-blase:nth-child(2){background:var(--sp-orange);color:#fff;margin-inline-start:18px}
.sp-blase:nth-child(3){background:var(--sp-gruen);color:#fff}
.sp-blase:nth-child(4){margin-inline-start:24px}
@media (max-width:640px){.sp-blasen{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:.8rem}.sp-blase:nth-child(n){margin:0}}
.sp-wahl{background:#fff;border-radius:22px;padding:20px;margin-top:16px;box-shadow:0 1px 0 var(--sp-linie)}
.sp-wahl h2{margin:.2rem 0 .7rem;font-size:1.15rem}
.sp-sprachknoepfe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:1rem}
@media (max-width:640px){.sp-sprachknoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-sprache{border:2px solid var(--sp-linie);background:var(--sp-papier);border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sp-navy);min-height:84px}
.sp-sprache .sp-zeichen{font-size:1.5rem;font-weight:bold;width:46px;height:46px;border-radius:50%;background:var(--sp-navy);color:#fff;display:flex;align-items:center;justify-content:center}
.sp-sprache .sp-name{font-weight:bold}
.sp-sprache .sp-uname{font-size:.8rem;color:var(--sp-grau)}
.sp-sprache[aria-pressed="true"]{border-color:var(--sp-orange);background:var(--sp-orange-hell)}
.sp-sprache[aria-pressed="true"] .sp-zeichen{background:var(--sp-orange)}
.sp-hinweis{color:var(--sp-grau);font-size:.92rem}
.sp-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Übersicht */
.sp-paarkopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;background:var(--sp-navy);color:#fff;border-radius:22px;padding:18px 20px}
.sp-paarkopf h1{margin:0;font-size:clamp(1.4rem,4.5vw,2rem)}
.sp-paarkopf .sp-pfeil{color:var(--sp-orange);padding:0 .3rem}
.sp-paarkopf .sp-knopf.sp-leise{color:#fff;border-color:#fff}
.sp-abschnitt{background:#fff;border-radius:22px;padding:20px;margin-top:16px}
.sp-abschnitt h2{margin:0 0 .8rem;font-size:1.2rem}

/* Rail: Reisepass-Stempel */
.sp-rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;position:relative;margin:4px 0 6px}
@media (max-width:860px){.sp-rail{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:12px}}
.sp-stempel{aspect-ratio:1;border-radius:50%;border:2px dashed #C9C2B6;display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,3.4vw,1.5rem);color:#B7AFA2;position:relative;background:var(--sp-papier);font-weight:bold}
.sp-stempel.sp-erledigt{border:3px solid var(--sp-gruen);background:var(--sp-gruen-hell);color:var(--sp-navy);transform:rotate(-8deg)}
.sp-stempel.sp-erledigt:nth-child(even){transform:rotate(7deg)}
.sp-stempel.sp-naechste{border:3px solid var(--sp-orange);color:var(--sp-orange);animation:sp-glimm 1.6s ease-in-out infinite}
@keyframes sp-glimm{50%{box-shadow:0 0 0 6px rgba(232,121,43,.22)}}
.sp-stempel.sp-verbunden::after{content:"";position:absolute;inset-inline-start:100%;top:50%;width:6px;border-top:3px dotted var(--sp-gruen)}
@media (max-width:860px){.sp-stempel.sp-verbunden:nth-child(6n)::after{display:none}}
@media (prefers-reduced-motion:reduce){.sp-stempel,.sp-ton.sp-aktiv{animation:none!important}}

.sp-lektionsliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sp-lkarte{border:2px solid var(--sp-linie);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:flex-start;background:var(--sp-papier)}
.sp-lkarte .sp-lemoji{font-size:2rem;line-height:1}
.sp-lkarte h3{margin:0;font-size:1.05rem}
.sp-lkarte .sp-lziel{font-weight:bold;color:var(--sp-orange)}
.sp-lkarte .sp-lthema{font-size:.88rem;color:var(--sp-grau);margin:.15rem 0 .5rem}
.sp-lkarte.sp-gesperrt{opacity:.6}
.sp-lkarte.sp-ist-fertig{border-color:var(--sp-gruen)}
.sp-marke{display:inline-block;font-size:.75rem;font-weight:bold;padding:.15rem .55rem;border-radius:999px;background:var(--sp-linie);color:var(--sp-grau)}
.sp-marke.sp-gruen{background:var(--sp-gruen);color:#fff}

/* Lektion */
.sp-lkopf{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.sp-lkopf h1{margin:0;font-size:clamp(1.25rem,4vw,1.7rem)}
.sp-schritte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0 14px;padding:0;list-style:none}
.sp-schritte li{min-width:0}
.sp-schritte button{width:100%;border:0;border-radius:12px;padding:8px 4px;background:var(--sp-linie);color:var(--sp-grau);font-size:.82rem;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px}
.sp-schritte button .sp-nr{display:block;font-size:1rem}
.sp-schritte button.sp-besucht{background:var(--sp-navy);color:#fff}
.sp-schritte button.sp-jetzt{background:var(--sp-orange);color:#fff}
.sp-karte{background:var(--sp-karte);border-radius:22px;padding:22px;box-shadow:0 2px 0 var(--sp-linie);min-height:320px}
.sp-karte h2{margin:0 0 .6rem;font-size:1.35rem}
.sp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
.sp-bild{font-size:clamp(3rem,12vw,5rem);text-align:center;line-height:1.1;margin:.3rem 0 .6rem;letter-spacing:.1em}
.sp-ziel{font-weight:bold;font-size:1.6rem;color:var(--sp-navy);overflow-wrap:anywhere}
.sp-ziel.sp-gross{font-size:clamp(1.8rem,7vw,2.6rem)}
.sp-um{display:block;color:var(--sp-orange);font-weight:bold;font-size:1rem;direction:ltr;unicode-bidi:isolate}
.sp-bed{display:block;color:var(--sp-grau);font-size:.9rem}
.sp-optionen{display:grid;gap:10px;margin:14px 0}
.sp-opt{border:2px solid var(--sp-linie);background:var(--sp-papier);border-radius:14px;padding:12px 14px;text-align:start;color:var(--sp-text);min-height:52px}
.sp-opt:hover:not(:disabled){border-color:var(--sp-navy)}
.sp-opt:disabled,.sp-kachel:disabled{opacity:1;cursor:default}
.sp-opt.sp-gestrichen:disabled{opacity:.35}
.sp-kachel.sp-gestrichen:disabled{opacity:.2}
.sp-opt.sp-richtig{border-color:var(--sp-gruen);background:var(--sp-gruen-hell)}
.sp-opt.sp-falsch{border-color:var(--sp-rot);background:var(--sp-rot-hell)}
.sp-opt.sp-gestrichen{text-decoration:line-through;opacity:.35}
.sp-rueck{border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--sp-orange-hell);border-inline-start:6px solid var(--sp-orange)}
.sp-rueck.sp-gut{background:var(--sp-gruen-hell);border-color:var(--sp-gruen)}
.sp-rueck.sp-schlecht{background:var(--sp-rot-hell);border-color:var(--sp-rot)}
.sp-rueck strong{display:block}
.sp-joker{display:inline-flex;align-items:center;gap:.4rem;border:2px dashed var(--sp-orange);background:#fff;color:var(--sp-orange);border-radius:999px;padding:.35rem .9rem;font-weight:bold;min-height:38px}
.sp-joker:disabled{border-color:var(--sp-linie);color:var(--sp-grau)}

/* Bildkarten */
.sp-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
@media (max-width:640px){.sp-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-kachel{border:2px solid var(--sp-linie);background:var(--sp-papier);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:118px;color:var(--sp-text)}
.sp-kachel .sp-kbild{font-size:2.6rem;line-height:1.1}
.sp-kachel .sp-ktext{font-weight:bold;font-size:1.05rem}
.sp-kachel .sp-um{font-size:.85rem}
.sp-kachel.sp-gesehen{border-color:var(--sp-navy)}
.sp-kachel.sp-richtig{border-color:var(--sp-gruen);background:var(--sp-gruen-hell)}
.sp-kachel.sp-falsch{border-color:var(--sp-rot);background:var(--sp-rot-hell)}
.sp-kachel.sp-gestrichen{opacity:.2}
.sp-fortschritt{height:10px;background:var(--sp-linie);border-radius:999px;overflow:hidden;margin:6px 0}
.sp-fortschritt span{display:block;height:100%;background:var(--sp-gruen);transition:width .3s}

/* Nachsprechen */
.sp-satzliste{display:grid;gap:12px;margin-top:12px}
.sp-satz{border:2px solid var(--sp-linie);border-radius:16px;padding:12px 14px;background:var(--sp-papier)}
.sp-satz.sp-geuebt{border-color:var(--sp-gruen)}
.sp-satz .sp-ziel{font-size:1.35rem}
.sp-satz .sp-zeile{margin-top:8px}
.sp-uhr{font-variant-numeric:tabular-nums;font-weight:bold;font-size:1.3rem;background:var(--sp-navy);color:#fff;border-radius:12px;padding:.2rem .7rem}
.sp-kasten{border-radius:16px;padding:14px;background:var(--sp-papier);border:2px solid var(--sp-linie);margin-top:12px}
.sp-kasten h3{margin:0 0 .4rem;font-size:1rem}
.sp-tipp{background:#FFF6D9;border-color:var(--sp-gelb)}

/* Szene */
.sp-sprecher{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sp-papier);border-radius:16px;padding:10px 14px;margin:8px 0}
.sp-wertung{display:inline-block;font-weight:bold;border-radius:999px;padding:.15rem .7rem;color:#fff;margin-bottom:.3rem}
.sp-w-stark{background:var(--sp-gruen)} .sp-w-riskant{background:var(--sp-gelb);color:var(--sp-navy)} .sp-w-gefaehrlich{background:var(--sp-rot)}

/* Segen */
.sp-vers{border-radius:18px;background:var(--sp-navy);color:#fff;padding:18px;margin:8px 0}
.sp-vers .sp-ziel{color:#fff;font-size:1.35rem;display:block}
.sp-vers .sp-uebers{display:block;margin-top:.5rem;color:#FFD8BA}
.sp-vers a{color:#fff}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.sp-chip{border:2px solid var(--sp-linie);background:#fff;border-radius:14px;padding:8px 12px;color:var(--sp-text);text-align:start}
.sp-chip[aria-pressed="true"]{border-color:var(--sp-orange);background:var(--sp-orange-hell)}
.sp-eingabe{width:100%;border:2px solid var(--sp-linie);border-radius:12px;padding:.6rem .8rem;font:inherit;background:#fff;color:var(--sp-text)}
.sp-links{margin:.3rem 0 0;padding-inline-start:1.2rem}
.sp-links li{margin:.25rem 0}

/* Hilfe */
.sp-hilfe{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sp-hilfe li{background:var(--sp-papier);border-radius:12px;padding:10px 12px}
.sp-hilfe .sp-nummer{font-weight:bold;color:var(--sp-orange);direction:ltr;unicode-bidi:isolate}

/* Sprachpass */
.sp-pass{border:3px solid var(--sp-navy);border-radius:20px;padding:18px;background:linear-gradient(135deg,#fff 0%,#F3EEE5 100%)}
.sp-pass-kopf{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;border-bottom:2px solid var(--sp-navy);padding-bottom:8px;margin-bottom:10px}
.sp-pass-kopf strong{font-size:1.3rem}
.sp-pass-saetze{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:6px}
.sp-pass-saetze li{border-bottom:1px dashed var(--sp-linie);padding-bottom:6px}
.sp-pass-saetze .sp-ziel{font-size:1.15rem}

/* Einblendung Stempel */
.sp-overlay{position:fixed;inset:0;background:rgba(27,42,74,.65);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.sp-overlay-box{background:#fff;border-radius:24px;padding:26px;max-width:420px;text-align:center}
.sp-grossstempel{width:140px;height:140px;margin:0 auto 10px;border-radius:50%;border:6px solid var(--sp-gruen);display:flex;align-items:center;justify-content:center;font-size:3.6rem;transform:rotate(-12deg);animation:sp-plopp .5s ease-out}
@keyframes sp-plopp{0%{transform:scale(2.2) rotate(-30deg);opacity:0}70%{transform:scale(.92) rotate(-10deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}
.sp-toast{position:fixed;inset-inline:16px;bottom:16px;margin:0 auto;max-width:520px;background:var(--sp-navy);color:#fff;border-radius:14px;padding:12px 16px;z-index:60;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25);border-inline-start:6px solid var(--sp-orange)}

/* Druck: nur der Sprachpass */
@media print{
  @page{size:A4;margin:14mm}
  body.sp-body{background:#fff;font-size:12pt}
  body>*:not(#sp-app){display:none!important}
  #sp-app{max-width:none;padding:0}
  #sp-app>*:not(#sp-wurzel){display:none!important}
  #sp-wurzel>*:not(#sp-pass-sec){display:none!important}
  #sp-pass-sec{padding:0;margin:0;break-inside:avoid}
  #sp-pass-sec .sp-nicht-drucken{display:none!important}
  .sp-stempel{animation:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sp-pass{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* voller Pass (ab 7 Sätzen): zwei Spalten, kompakt – bleibt auf 1 Seite */
  .sp-pass-saetze:has(li:nth-child(7)){display:block;columns:2;column-gap:7mm;font-size:8.5pt;line-height:1.25}
  .sp-pass-saetze:has(li:nth-child(7)) li{break-inside:avoid;padding:3px 0;margin:0}
  .sp-pass-saetze:has(li:nth-child(7)) .sp-ziel{font-size:10pt}
  .sp-pass:has(.sp-pass-saetze li:nth-child(7)) .sp-stempel{width:44px;height:44px;font-size:20px}
  .sp-pass-saetze:has(li:nth-child(7)){font-size:7.8pt;line-height:1.15}
  .sp-pass-saetze:has(li:nth-child(7)) .sp-ziel,.sp-pass-saetze:has(li:nth-child(7)) .sp-um{font-size:8.5pt}
  .sp-pass-saetze:has(li:nth-child(7)) li{padding:2px 0 3px}
  .sp-pass:has(.sp-pass-saetze li:nth-child(7)){padding:10px 14px}
  .sp-pass:has(.sp-pass-saetze li:nth-child(7)) .sp-stempelreihe,.sp-pass:has(.sp-pass-saetze li:nth-child(7)) .sp-rail{gap:4px;margin:4px 0}
  /* volle Pässe mit langen Sätzen (Staffel 2): schmaler Rand, kompaktere Schrift */
  @page{margin:9mm}
  .sp-pass-saetze:has(li:nth-child(7)){font-size:7.3pt;line-height:1.12;column-gap:6mm}
  .sp-pass-saetze:has(li:nth-child(7)) .sp-ziel,.sp-pass-saetze:has(li:nth-child(7)) .sp-um{font-size:7.8pt}
  .sp-pass-saetze:has(li:nth-child(7)) li{padding:1px 0 2px}
}

/* Kurs unter /kurse/: Ausgangssprache, Tonmarken, Reihe */
.sp-quelle{background:var(--sp-papier);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.sp-auswahl{font:inherit;border:2px solid var(--sp-linie);border-radius:10px;padding:.3rem .5rem;background:#fff;color:var(--sp-text);min-height:38px}
.sp-tonmarke{display:block;margin-top:4px;font-size:.72rem;font-weight:bold;color:var(--sp-gruen);line-height:1.25;text-align:center}
.sp-tonmarke.sp-ohne{color:var(--sp-grau)}
.sp-sprache[data-ton="keiner"] .sp-zeichen{background:#8C93A3}
.sp-reihe{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.sp-reihe li{background:var(--sp-papier);border-radius:12px;padding:8px 12px}
.sp-in-arbeit{color:var(--sp-grau)}
.sp-ohne-ton{margin:0 0 8px}
/* Zielsprache als Auswahlliste */
.sp-zielzeile{gap:12px;margin:6px 0 10px}
.sp-ziel-label{font-weight:bold;font-size:1.15rem;color:var(--sp-navy)}
.sp-ziel-wahl{font-size:1.05rem;min-height:48px;max-width:100%;padding:.5rem .7rem;border-color:var(--sp-orange)}

/* Rückblick, Dialoge, Praxis (ab Thema 06) */
.sp-rueckmarke{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:8px;background:var(--sp-linie);color:var(--sp-navy,#1B2A4A);font-size:.72rem;font-weight:bold;vertical-align:middle}
.sp-rueckblick{border-style:dashed}
.sp-verdeckt{opacity:.55}
.sp-dialog{border-inline-start:4px solid #E8792B}
.sp-antwort{margin-top:8px;background:#fff;border-inline-start-color:#4CA64C}
.sp-praxis{background:#EAF6EA;border-color:#4CA64C}
.sp-rueckblick .sp-ziel{font-size:1.15rem}
.sp-rueckblick .sp-chips{gap:6px}

/* Staffel 2 „Mitreden“: Lücke, Satzbau, Gespräch, Lesen */
.sp-nr-klein{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;background:var(--sp-navy);color:#fff;font-size:.8rem;font-weight:bold;margin-inline-end:8px;vertical-align:middle}
.sp-lueckensatz{line-height:1.7;margin:4px 0}
.sp-lueckenfeld{display:inline-block;min-width:3.5em;border-bottom:3px dashed var(--sp-orange);text-align:center;color:var(--sp-orange);padding:0 4px}
.sp-lueckenfeld.sp-gefuellt{border-bottom-style:solid;border-color:var(--sp-gruen);color:var(--sp-gruen)}
.sp-chip.sp-falsch{background:var(--sp-rot-hell);border-color:var(--sp-rot);text-decoration:line-through;opacity:.8}
.sp-bau-aufgabe{margin-bottom:8px}
.sp-bau-feld{min-height:52px;border:2px dashed var(--sp-linie);border-radius:12px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;background:#fff}
.sp-bau-feld.sp-bau-falsch{border-color:var(--sp-rot);background:var(--sp-rot-hell);animation:sp-wackeln .35s}
.sp-bau-teil{background:var(--sp-orange-hell);border-color:var(--sp-orange)}
.sp-bau-pool .sp-chip[disabled]{opacity:.25}
@keyframes sp-wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sp-chat{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.sp-blase-g{display:flex;gap:8px;align-items:flex-start;max-width:92%;background:var(--sp-papier);border-radius:4px 16px 16px 16px;padding:10px 12px;border-inline-start:4px solid var(--sp-orange)}
.sp-blase-ich{align-self:flex-end;max-width:88%;background:#fff;border:2px solid var(--sp-linie);border-radius:16px 4px 16px 16px;padding:8px 12px}
.sp-blase-ich.sp-w-stark{border-color:var(--sp-gruen);background:var(--sp-gruen-hell)}
.sp-blase-ich.sp-w-gefaehrlich{border-color:var(--sp-rot);background:var(--sp-rot-hell)}
.sp-blase-ich .sp-wertung{margin-top:4px}
.sp-wer{font-size:1.6rem;line-height:1}
.sp-dokument{background:#fff;border:1px solid #CFC8BB;border-radius:6px;box-shadow:0 6px 18px rgba(27,42,74,.12);padding:16px 18px;margin:10px 0;font-family:Georgia,"Times New Roman",serif}
.sp-dok-kopf{font-family:Arial,sans-serif;font-weight:bold;color:var(--sp-grau);font-size:.85rem;border-bottom:1px solid var(--sp-linie);padding-bottom:6px;margin-bottom:10px}
.sp-dok-text{white-space:pre-line;font-size:1.02rem;line-height:1.55}
.sp-dokument:lang(ar) .sp-dok-text,.sp-dokument:lang(fa) .sp-dok-text,.sp-dokument:lang(zh) .sp-dok-text{font-family:inherit;font-size:1.1rem}
.sp-dok-um{margin-top:10px;font-family:Arial,sans-serif;font-size:.85rem;white-space:pre-line}
.sp-frage{margin-top:10px}
.sp-pass-tabs{margin-bottom:8px}
.sp-fortschritt{margin-top:10px}
.sp-schritte:has(li:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
.sp-blase-ich .sp-zieltext{margin-inline-end:8px}
.sp-blase-ich .sp-wertung{display:inline-block;margin-inline-start:0}

/* Staffel 3 „Entdecken“: Vergleich, Diktat, Tastatur, Postkarte */
.sp-vergleich-haupt{display:flex;gap:12px;align-items:flex-start}
.sp-vergleich-emoji{font-size:2.4rem;line-height:1}
.sp-vergleich-liste{margin:8px 0 0;padding-inline-start:1.1rem}
.sp-vergleich-liste li{margin:6px 0}
.sp-vergleich-liste .sp-bed{display:block}
.sp-vergleich-mehr summary{cursor:pointer;font-weight:bold;color:var(--sp-navy);margin-top:8px}
.sp-schreibfeld,.sp-postfeld{width:100%;box-sizing:border-box;font-size:1.15rem;line-height:1.5;min-height:3.2em;resize:vertical;font-family:inherit}
.sp-diktat-vorschau{min-height:1.6em;margin:6px 0}
.sp-diff{margin:6px 0;font-size:1.1rem;line-height:1.7}
.sp-diff .sp-d-ok{background:#E3F3E3;border-radius:4px;padding:0 2px}
.sp-diff .sp-d-fehlt{background:#FDE6D5;border-radius:4px;padding:0 2px;text-decoration:underline wavy #E8792B;text-underline-offset:3px}
.sp-eigen{font-style:italic;color:#555;margin:4px 0}
.sp-tastatur{margin:6px 0}
.sp-tasten{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.sp-tasten.sp-zu{display:none}
.sp-tasten-reihe{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.sp-taste{min-width:38px;min-height:40px;padding:4px 6px;border:1px solid #C9D3E6;border-radius:8px;background:#fff;font-size:1.15rem;cursor:pointer;color:var(--sp-navy,#1B2A4A)}
.sp-taste:active{background:var(--sp-orange,#E8792B);color:#fff}
.sp-taste-breit{min-width:110px;font-size:.95rem}
.sp-postkarte{position:relative;background:#FFFDF6;border:2px dashed var(--sp-orange,#E8792B);border-radius:14px;padding:14px 70px 14px 14px;margin:10px 0}
[dir=rtl] .sp-postkarte{padding:14px 14px 14px 70px}
.sp-postkarte .sp-postfeld{background:transparent;border:0;border-bottom:1px solid #E6DDC8;border-radius:0}
.sp-postkarte-marke{position:absolute;top:10px;inset-inline-end:10px;width:48px;height:56px;border:2px solid var(--sp-navy,#1B2A4A);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:#fff}
.sp-post-fertig{white-space:pre-wrap;font-size:1.1rem;padding:14px}
.sp-stichworte .sp-chip{cursor:default}
.sp-stichworte .sp-chip.sp-an{background:var(--sp-gruen,#4CA64C);color:#fff;border-color:var(--sp-gruen,#4CA64C)}
.sp-pass-post .sp-ziel{display:block;white-space:pre-wrap}
@media (max-width:480px){.sp-tasten-reihe{gap:3px}.sp-taste{min-width:24px;min-height:38px;font-size:1rem;padding:2px 3px}.sp-postkarte{padding-inline-end:14px}.sp-postkarte-marke{display:none}}