/* =========================================================
   CleverMit – gemeinsames Aussehen für alle Übungsseiten
   Einbinden:  <link rel="stylesheet" href="clevermit.css">
   Fachfarbe:  <body class="fach-mathe">  (fach-deutsch, fach-englisch, fach-sachkunde)
   Hinweis:    Kein "gap" bei Flexbox (ältere iPads kennen es nicht) – Abstände über margin.
   ========================================================= */

@font-face { font-family:'Nunito'; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-weight:800; font-style:normal; font-display:swap; src:url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-weight:900; font-style:normal; font-display:swap; src:url(fonts/nunito-latin-900-normal.woff2) format('woff2'); }

:root {
  --ink:#1F2347;
  --ink-soft:#5B6080;
  --bg:#FFF8EC;
  --card:#FFFFFF;
  --line:#EFE6D6;
  --ok:#2BB673;  --ok-dark:#1E8F59;  --ok-soft:#DDF6E9;
  --err:#FF6B5B; --err-dark:#D9483A; --err-soft:#FFE6E2;
  --fach:#FFC93C; --fach-dark:#E0A800; --fach-soft:#FFF1C7; --fach-ink:#1F2347;
  --radius:24px;
}
.fach-mathe     { --fach:#FFC93C; --fach-dark:#E0A800; --fach-soft:#FFF1C7; --fach-ink:#1F2347; }
.fach-deutsch   { --fach:#FF6B9A; --fach-dark:#D94477; --fach-soft:#FFE3EC; --fach-ink:#FFFFFF; }
.fach-englisch  { --fach:#3D8BFD; --fach-dark:#1F68D6; --fach-soft:#E2EEFF; --fach-ink:#FFFFFF; }
.fach-sachkunde { --fach:#2EC4B6; --fach-dark:#1A9A8E; --fach-soft:#DDF7F4; --fach-ink:#FFFFFF; }

* { -webkit-box-sizing:border-box; box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  min-height:100vh;
  padding:14px 16px 32px;
  font-family:'Nunito', 'Arial Rounded MT Bold', Helvetica, Arial, sans-serif;
  font-weight:800;
  color:var(--ink);
  background-color:var(--bg);
  /* verspielte Farbtupfen im Hintergrund */
  background-image:
    radial-gradient(circle at 8% 12%, var(--fach-soft) 0, var(--fach-soft) 70px, transparent 71px),
    radial-gradient(circle at 96% 30%, #E2EEFF 0, #E2EEFF 90px, transparent 91px),
    radial-gradient(circle at 4% 88%, #DDF7F4 0, #DDF7F4 110px, transparent 111px),
    radial-gradient(circle at 92% 94%, #FFE3EC 0, #FFE3EC 80px, transparent 81px);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}
button { font-family:inherit; font-weight:900; color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; border:none; background:none; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
a { color:inherit; }

.cm-wrap { max-width:680px; margin:0 auto; }

/* ---------- Kopfzeile ---------- */
.cm-top { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; margin-bottom:16px; }
.cm-home, .cm-speak {
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  -webkit-flex-shrink:0; flex-shrink:0;
  width:56px; height:56px; border-radius:50%;
  background:var(--card); box-shadow:0 4px 0 var(--line); text-decoration:none; font-size:26px;
}
.cm-home:active, .cm-speak:active { -webkit-transform:translateY(3px); transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.cm-speak { background:var(--fach); box-shadow:0 4px 0 var(--fach-dark); }
.cm-speak:active { box-shadow:0 1px 0 var(--fach-dark); }
.cm-speak.spricht { -webkit-animation:cm-puls 0.8s ease-in-out infinite; animation:cm-puls 0.8s ease-in-out infinite; }
.cm-titel { -webkit-flex:1; flex:1; margin:0 12px; min-width:0; }
.cm-titel h1 { font-size:26px; font-weight:900; line-height:1.1; }
.cm-titel p { font-size:14px; color:var(--ink-soft); margin-top:2px; }

/* ---------- Punktestand ---------- */
.cm-stats { display:-webkit-flex; display:flex; margin:0 -5px 14px; }
.cm-stat {
  -webkit-flex:1; flex:1; margin:0 5px; padding:8px 6px; border-radius:18px; text-align:center;
  background:var(--card); box-shadow:0 3px 0 var(--line);
}
.cm-stat b { display:block; font-size:26px; font-weight:900; line-height:1.1; }
.cm-stat span { font-size:13px; color:var(--ink-soft); }
.cm-stat.richtig b { color:var(--ok); }
.cm-stat.falsch b { color:var(--err); }
.cm-stat.serie b { color:var(--fach-dark); }
.cm-stat.hoch { -webkit-animation:cm-hops 0.45s ease-out; animation:cm-hops 0.45s ease-out; }

/* ---------- Auswahl (Modus / Schwierigkeit) ---------- */
.cm-modes { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 -4px 14px; }
.cm-mode {
  -webkit-flex:1; flex:1; min-width:90px; margin:0 4px 8px; min-height:48px; padding:8px 12px; border-radius:999px;
  font-size:17px; background:var(--card); color:var(--ink-soft); box-shadow:0 3px 0 var(--line);
}
.cm-mode.on { background:var(--ink); color:#fff; box-shadow:0 3px 0 #000; }

/* ---------- Aufgabenkarte ---------- */
.cm-card {
  position:relative;
  background:var(--card); border-radius:var(--radius); padding:22px 18px 20px; text-align:center;
  box-shadow:0 6px 0 var(--line), 0 14px 30px rgba(31,35,71,0.06);
}
.cm-aufgabe { font-size:64px; font-weight:900; line-height:1.15; letter-spacing:1px; }
.cm-aufgabe .op { color:var(--fach-dark); margin:0 6px; }
.cm-frage { font-size:22px; line-height:1.35; }
.cm-card.neu .cm-aufgabe { -webkit-animation:cm-rein 0.35s ease-out; animation:cm-rein 0.35s ease-out; }
.cm-card.wackel { -webkit-animation:cm-wackel 0.4s ease-in-out; animation:cm-wackel 0.4s ease-in-out; }

/* Antwortfeld (zeigt, was über das Zahlenfeld getippt wurde) */
.cm-antwort {
  display:inline-block; min-width:140px; height:84px; margin:14px auto 0; padding:0 16px; border-radius:20px;
  font-size:56px; font-weight:900; line-height:80px; color:var(--ink);
  background:var(--fach-soft); border:3px dashed var(--fach-dark);
}
.cm-antwort.leer { color:var(--fach-dark); }
.cm-antwort.ok  { background:var(--ok-soft);  border:3px solid var(--ok);  color:var(--ok-dark); }
.cm-antwort.err { background:var(--err-soft); border:3px solid var(--err); color:var(--err-dark); }

/* ---------- Zahlenfeld (statt Tastatur) ---------- */
.cm-pad { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:18px -5px 0; }
.cm-key {
  width:calc(33.333% - 10px); margin:0 5px 10px; height:68px; border-radius:20px;
  font-size:32px; background:#F6F1E7; box-shadow:0 5px 0 var(--line);
}
.cm-key:active, .cm-key.gedrueckt { -webkit-transform:translateY(4px); transform:translateY(4px); box-shadow:0 1px 0 var(--line); }
.cm-key.weg { font-size:28px; color:var(--ink-soft); }
.cm-key.ok { background:var(--ok); color:#fff; box-shadow:0 5px 0 var(--ok-dark); }
.cm-key.ok:active { box-shadow:0 1px 0 var(--ok-dark); }
.cm-pad.aus .cm-key { opacity:0.35; pointer-events:none; }

/* ---------- Antwortknöpfe (Auswahlaufgaben) ---------- */
.cm-opts { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; margin:18px -6px 0; }
.cm-opt {
  -webkit-flex:1 1 40%; flex:1 1 40%; margin:0 6px 12px; min-height:76px; padding:12px; border-radius:20px;
  font-size:26px; background:#F6F1E7; box-shadow:0 5px 0 var(--line);
}
.cm-opt:active { -webkit-transform:translateY(4px); transform:translateY(4px); box-shadow:0 1px 0 var(--line); }
.cm-opt.ok, .cm-opt.show { background:var(--ok-soft); color:var(--ok-dark); box-shadow:0 5px 0 var(--ok); }
.cm-opt.err { background:var(--err-soft); color:var(--err-dark); box-shadow:0 5px 0 var(--err); }
.cm-opt.off { pointer-events:none; }

/* ---------- Rückmeldung mit Maskottchen ---------- */
.cm-fb {
  display:none; -webkit-align-items:center; align-items:center;
  margin-top:16px; padding:10px 14px; border-radius:20px; text-align:left; font-size:22px;
}
.cm-fb.ok  { display:-webkit-flex; display:flex; background:var(--ok-soft);  color:var(--ok-dark); }
.cm-fb.err { display:-webkit-flex; display:flex; background:var(--err-soft); color:var(--err-dark); }
.cm-fb .cm-maskottchen { margin-right:12px; }
.cm-fb.ok .cm-maskottchen  { -webkit-animation:cm-hops 0.6s ease-out 2; animation:cm-hops 0.6s ease-out 2; }
.cm-fb.err .cm-maskottchen { -webkit-transform:rotate(-8deg); transform:rotate(-8deg); }

.cm-maskottchen { display:inline-block; width:64px; height:64px; -webkit-flex-shrink:0; flex-shrink:0; }
.cm-maskottchen svg { display:block; width:100%; height:100%; }
.cm-maskottchen .oh { display:none; }
.cm-fb.err .cm-maskottchen .froh { display:none; }
.cm-fb.err .cm-maskottchen .oh { display:inline; }

/* ---------- Große Knöpfe ---------- */
.cm-btn {
  display:block; width:100%; margin-top:16px; min-height:64px; padding:12px 20px; border-radius:20px;
  font-size:24px; text-align:center; text-decoration:none;
  background:var(--fach); color:var(--fach-ink); box-shadow:0 6px 0 var(--fach-dark);
}
.cm-btn:active { -webkit-transform:translateY(5px); transform:translateY(5px); box-shadow:0 1px 0 var(--fach-dark); }
.cm-btn.weiter { background:var(--ok); color:#fff; box-shadow:0 6px 0 var(--ok-dark); }
.cm-btn.weiter:active { box-shadow:0 1px 0 var(--ok-dark); }
.versteckt { display:none !important; }

/* ---------- Bausteine der Übungs-Engine ---------- */
.cm-frage { font-size:24px; line-height:1.4; }
.cm-frage b, .cm-frage strong { color:var(--fach-dark); }
.fach-mathe .cm-frage b, .fach-mathe .cm-frage strong { color:#B07F00; }
.cm-frage .gross { display:block; margin-top:6px; font-size:46px; font-weight:900; color:var(--ink); }
.cm-frage .klein { display:block; margin-top:4px; font-size:17px; color:var(--ink-soft); }
.cm-frage .luecke { display:inline-block; min-width:56px; border-bottom:4px solid var(--fach-dark); color:var(--fach-dark); }
.cm-bild { margin:0 auto 12px; text-align:center; font-size:64px; line-height:1.1; }
.cm-bild svg { max-width:100%; height:auto; }
.cm-antwortzeile { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; margin-top:14px; }
.cm-antwortzeile .cm-antwort { margin:0; }
.cm-einheit { margin-left:12px; font-size:30px; color:var(--ink-soft); }
.cm-key.breit { width:calc(100% - 10px); }
.cm-rechts:empty { display:none; }

.cm-opts.text .cm-opt { font-size:22px; -webkit-flex:1 1 100%; flex:1 1 100%; }
.cm-opts.bilder .cm-opt { min-height:110px; }
.cm-opts.bilder .cm-opt svg { max-width:100%; height:auto; vertical-align:middle; }
.cm-opts.farben .cm-opt { min-height:90px; border:4px solid rgba(0,0,0,0.08); }
.cm-opts.farben .cm-opt.ok, .cm-opts.farben .cm-opt.show { border-color:var(--ok); }
.cm-opts.farben .cm-opt.err { border-color:var(--err); }
.cm-opts.emoji .cm-opt { font-size:52px; min-height:96px; }

.cm-textzeile { margin-top:16px; }
.cm-texteingabe {
  width:100%; max-width:420px; height:72px; padding:0 16px; border-radius:20px; border:3px dashed var(--fach-dark);
  background:var(--fach-soft); font-family:inherit; font-size:34px; font-weight:900; text-align:center; color:var(--ink);
  -webkit-appearance:none; appearance:none; outline:none;
}
.cm-texteingabe:focus { border-style:solid; }
.cm-texteingabe.ok { background:var(--ok-soft); border:3px solid var(--ok); color:var(--ok-dark); }
.cm-texteingabe.err { background:var(--err-soft); border:3px solid var(--err); color:var(--err-dark); }

.cm-reihe-ziel { min-height:76px; margin-top:16px; padding:8px; border-radius:20px; border:3px dashed var(--fach-dark); background:var(--fach-soft); }
.cm-reihe-ziel.ok { border:3px solid var(--ok); background:var(--ok-soft); }
.cm-reihe-ziel.err { border:3px solid var(--err); background:var(--err-soft); }
.cm-reihe-leer { display:block; padding:14px 6px; font-size:17px; color:var(--ink-soft); }
.cm-reihe-quelle { margin-top:12px; min-height:60px; }
.cm-kachel {
  display:inline-block; margin:5px; padding:10px 16px; min-height:54px; border-radius:16px;
  font-size:24px; background:#F6F1E7; box-shadow:0 4px 0 var(--line);
}
.cm-reihe-ziel .cm-kachel { background:#fff; }
.cm-kachel:active { -webkit-transform:translateY(3px); transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.cm-kachel.benutzt { visibility:hidden; }

.cm-hilfe { display:block; margin-top:4px; font-size:17px; font-weight:700; color:var(--ink); opacity:0.85; }
.cm-hoeren {
  display:block; margin:0 auto 14px; min-height:84px; padding:12px 30px; border-radius:999px; font-size:28px;
  background:var(--fach); color:var(--fach-ink); box-shadow:0 6px 0 var(--fach-dark);
}
.cm-hoeren:active { -webkit-transform:translateY(5px); transform:translateY(5px); box-shadow:0 1px 0 var(--fach-dark); }
.cm-hoeren.spricht { -webkit-animation:cm-puls 0.8s ease-in-out infinite; animation:cm-puls 0.8s ease-in-out infinite; }

.cm-tippbar { cursor:pointer; }
.getippt-ok { stroke:var(--ok) !important; stroke-width:10px !important; }
.getippt-err { stroke:var(--err) !important; stroke-width:10px !important; }
.getippt-zeige { stroke:var(--ok) !important; stroke-width:10px !important; stroke-dasharray:18 10; }

/* Tabellen (Strichliste, Diagramme) */
.cm-tabelle { margin:0 auto; border-collapse:collapse; font-size:20px; }
.cm-tabelle th, .cm-tabelle td { padding:8px 12px; border-bottom:2px solid var(--line); text-align:left; }
.cm-tabelle th { color:var(--ink-soft); font-size:16px; }
.cm-szene { text-align:left; font-size:20px; line-height:1.5; background:#FBF7EF; border-radius:18px; padding:14px 16px; margin-bottom:12px; }

/* Mathe-Bilder */
.mb-geld { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; }
.mb-geldstueck { margin:4px; line-height:0; }
.mb-mauer { display:inline-block; }
.mb-mauer-reihe { text-align:center; white-space:nowrap; }
.mb-stein { display:inline-block; width:74px; height:52px; margin:2px; line-height:48px; border-radius:8px; font-size:26px; background:#FFE0C2; border:2px solid #E8A36A; }
.mb-stein.frage { background:var(--fach-soft); border:3px dashed var(--fach-dark); color:var(--fach-dark); }
.mb-szene svg { max-width:100%; height:auto; }

/* ---------- Konfetti ---------- */
.cm-konfetti { position:fixed; top:-20px; width:12px; height:18px; border-radius:3px; pointer-events:none; z-index:50;
  -webkit-animation:cm-fall 1.4s ease-in forwards; animation:cm-fall 1.4s ease-in forwards; }

/* ---------- Bewegungen ---------- */
@-webkit-keyframes cm-rein { from { opacity:0; -webkit-transform:scale(0.7); } to { opacity:1; -webkit-transform:scale(1); } }
@keyframes cm-rein { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@-webkit-keyframes cm-hops { 0%,100% { -webkit-transform:translateY(0); } 40% { -webkit-transform:translateY(-10px); } }
@keyframes cm-hops { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-10px); } }
@-webkit-keyframes cm-wackel { 0%,100% { -webkit-transform:translateX(0); } 25% { -webkit-transform:translateX(-10px); } 75% { -webkit-transform:translateX(10px); } }
@keyframes cm-wackel { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-10px); } 75% { transform:translateX(10px); } }
@-webkit-keyframes cm-puls { 0%,100% { -webkit-transform:scale(1); } 50% { -webkit-transform:scale(1.1); } }
@keyframes cm-puls { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); } }
@-webkit-keyframes cm-fall { to { -webkit-transform:translateY(105vh) rotate(540deg); opacity:0.6; } }
@keyframes cm-fall { to { transform:translateY(105vh) rotate(540deg); opacity:0.6; } }

@media (prefers-reduced-motion: reduce) {
  * { -webkit-animation:none !important; animation:none !important; }
  .cm-konfetti { display:none; }
}

/* ---------- Tablet (iPad hochkant und quer) ---------- */
@media (min-width:700px) {
  body { padding:24px 24px 40px; }
  .cm-titel h1 { font-size:32px; }
  .cm-home, .cm-speak { width:64px; height:64px; font-size:30px; }
  .cm-aufgabe { font-size:84px; }
  .cm-antwort { height:100px; line-height:96px; font-size:68px; min-width:170px; }
  .cm-key { height:80px; font-size:38px; }
}
/* Tablet quer: Aufgabe links, Zahlenfeld/Antworten rechts – alles ohne Scrollen sichtbar */
@media (min-width:900px) and (orientation:landscape) {
  .cm-wrap { max-width:1040px; }
  .cm-card.zweispaltig { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:26px; }
  .cm-card.zweispaltig .cm-links { -webkit-flex:1; flex:1; margin-right:26px; min-width:0; }
  .cm-card.zweispaltig .cm-rechts { -webkit-flex:0 0 400px; flex:0 0 400px; }
  .cm-card.zweispaltig .cm-pad { margin:0 -5px; }
  .cm-card.zweispaltig .cm-opts { margin-top:0; }
  .cm-key { height:76px; }
}
/* Handy quer / niedrige Bildschirme: alles etwas kompakter */
@media (max-height:600px) and (orientation:landscape) {
  .cm-aufgabe { font-size:48px; }
  .cm-antwort { height:64px; line-height:60px; font-size:42px; margin-top:8px; }
  .cm-key { height:52px; font-size:26px; }
}

/* Ergänzungen */
.cm-emoji-gross { font-size:110px; line-height:1.1; }
.luecke-zahl { display:inline-block; min-width:1.2em; padding:0 0.15em; border-radius:14px; border:4px dashed var(--fach-dark); color:var(--fach-dark); line-height:1.05; }
.cm-opts.zeichen .cm-opt { font-size:48px; -webkit-flex:1 1 25%; flex:1 1 25%; }
.cm-frage .folge { font-size:38px; letter-spacing:1px; }
.klein-inline { font-size:0.45em; color:var(--ink-soft); vertical-align:middle; }
.mb-schriftlich { margin:0 auto; border-collapse:collapse; font-size:52px; font-weight:900; font-family:'Nunito', monospace; letter-spacing:6px; }
.mb-schriftlich td { padding:0 6px; text-align:right; }
.mb-schriftlich tr.strich td { border-top:5px solid var(--ink); }
.mb-schriftlich .luecke-zahl { letter-spacing:0; }
.cm-szene-emoji { float:left; margin:0 12px 4px 0; font-size:46px; line-height:1; }
.cm-szene:after { content:''; display:block; clear:both; }
.cm-diagramm-titel { font-size:18px; color:var(--ink-soft); margin-bottom:4px; }
.cm-zaehlbild { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; padding:10px; border-radius:18px; background:#FBF7EF; font-size:40px; line-height:1; }
.cm-zaehlbild span { margin:6px; }
.cm-tabelle td svg { vertical-align:middle; }
.mb-bruch { display:inline-block; vertical-align:middle; text-align:center; line-height:1.05; font-weight:900; }
.mb-bruch span { display:block; padding:0 6px; }
.mb-bruch span:first-child { border-bottom:4px solid currentColor; }
.cm-aufgabe .mb-bruch { font-size:0.75em; }
.cm-opt .mb-bruch { font-size:30px; }
.cm-mini-bild { display:block; margin-top:6px; line-height:0; }
.klein-block { display:block; margin-top:8px; font-size:22px; color:var(--ink); word-break:break-word; }
.cm-aufgabe .mittel { font-size:0.6em; white-space:normal; }
.cm-tabelle.stellen { font-size:32px; margin-bottom:8px; }
.cm-tabelle.stellen td, .cm-tabelle.stellen th { text-align:center; border:2px solid var(--line); min-width:46px; }
.cm-opts.artikel .cm-opt { font-size:34px; -webkit-flex:1 1 28%; flex:1 1 28%; }
.cm-opts.grossklein .cm-opt { font-size:30px; letter-spacing:1px; }
.cm-opt small { display:block; font-size:15px; opacity:0.8; }
.cm-satz { margin-top:16px; font-size:34px; line-height:1.8; }
.cm-wort { display:inline-block; padding:2px 10px; border-radius:12px; background:#F6F1E7; box-shadow:0 3px 0 var(--line); cursor:pointer; margin:3px 0; }
.cm-wort.getippt-ok { background:var(--ok-soft); color:var(--ok-dark); box-shadow:0 3px 0 var(--ok); }
.cm-wort.getippt-err { background:var(--err-soft); color:var(--err-dark); box-shadow:0 3px 0 var(--err); }
.cm-wort.getippt-zeige { background:var(--ok-soft); color:var(--ok-dark); box-shadow:0 3px 0 var(--ok); outline:3px dashed var(--ok); }
.cm-frage .luecke { min-width:70px; }
.cm-opt-bild { display:block; font-size:44px; line-height:1.1; margin-bottom:2px; }
.cm-farbklecks { display:inline-block; width:150px; height:150px; border-radius:50% 46% 52% 48%; border:4px solid rgba(0,0,0,0.12); }
.cm-karte { display:block; width:100%; max-width:640px; height:auto; margin:12px auto 0; }
.cm-karte path.getippt-ok { fill:var(--ok) !important; }
.cm-karte path.getippt-err { fill:var(--err) !important; }
.cm-karte path.getippt-zeige { fill:var(--ok) !important; }

@media (max-width:480px) {
  .cm-aufgabe { font-size:46px; }
  .cm-frage .gross { font-size:38px; }
  .mb-schriftlich { font-size:42px; }
  .cm-satz { font-size:28px; }
}

.cm-unten:empty { display:none; }

/* ---------- Runden, Startbildschirm, Vorlesen ---------- */
.cm-top { position:-webkit-sticky; position:sticky; top:0; z-index:20; margin:-14px -16px 16px; padding:10px 16px; background:rgba(255,248,236,0.94); }
@media (min-width:700px) { .cm-top { margin:-24px -24px 16px; padding:14px 24px; } }
.cm-card.start { text-align:center; padding:28px 20px; }
.cm-maskottchen.gross { display:block; width:140px; height:140px; margin:0 auto 6px; -webkit-animation:cm-hops 1s ease-in-out 2; animation:cm-hops 1s ease-in-out 2; }
.cm-card.start .cm-frage b { font-size:34px; color:var(--ink); }
.cm-card.start .cm-btn { max-width:420px; margin-left:auto; margin-right:auto; }
.cm-btn.los { font-size:28px; min-height:76px; }
.cm-btn.zweit { background:#fff; color:var(--ink); box-shadow:0 6px 0 var(--line); }
.cm-schalter { display:inline-block; margin-top:18px; padding:10px 18px; border-radius:999px; font-size:17px; background:#fff; color:var(--ink-soft); box-shadow:0 3px 0 var(--line); }
.cm-schalter.an { background:var(--ok-soft); color:var(--ok-dark); }
.cm-sterne { margin:6px 0 4px; }
.cm-stern { display:inline-block; font-size:64px; margin:0 6px; opacity:0.18; -webkit-filter:grayscale(1); filter:grayscale(1); }
.cm-stern.an { opacity:1; -webkit-filter:none; filter:none; -webkit-animation:cm-rein 0.5s ease-out both; animation:cm-rein 0.5s ease-out both; }
.cm-stern.an:nth-child(2) { -webkit-animation-delay:0.25s; animation-delay:0.25s; }
.cm-stern.an:nth-child(3) { -webkit-animation-delay:0.5s; animation-delay:0.5s; }
.cm-fortschritt { display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; margin:-6px 0 14px; }
.cm-fortschritt span { width:22px; height:10px; margin:0 3px; border-radius:6px; background:#EDE5D5; }
.cm-fortschritt span.jetzt { background:var(--fach); width:34px; }
.cm-fortschritt span.ok { background:var(--ok); }
.cm-fortschritt span.err { background:var(--err); }
/* Gerade vorgelesen: aufleuchten */
.cm-opt.liest { box-shadow:0 0 0 5px var(--fach), 0 5px 0 var(--line); -webkit-transform:scale(1.04); transform:scale(1.04); }
.cm-frage.liest, .cm-aufgabe.liest { border-radius:16px; background:var(--fach-soft); }
.cm-opt, .cm-frage, .cm-aufgabe { -webkit-transition:-webkit-transform 0.15s, box-shadow 0.15s, background 0.15s; transition:transform 0.15s, box-shadow 0.15s, background 0.15s; }
/* Weiter-Knopf läuft ab, wenn es automatisch weitergeht */
.cm-btn.weiter { position:relative; overflow:hidden; }
.cm-btn.weiter.laeuft:after { content:''; position:absolute; left:0; bottom:0; height:6px; width:100%; background:rgba(255,255,255,0.7); -webkit-animation:cm-ablauf 3s linear forwards; animation:cm-ablauf 3s linear forwards; }
@-webkit-keyframes cm-ablauf { from { width:0; } to { width:100%; } }
@keyframes cm-ablauf { from { width:0; } to { width:100%; } }

/* Erklärung "So geht's" */
.cm-card.erklaer .cm-erkltext { font-size:22px; line-height:1.4; font-weight:800; color:var(--ink); margin:14px auto 6px; max-width:520px; }
.cm-card.erklaer .cm-erkltext b { font-size:inherit; color:#E8590C; }
.cm-card.erklaer .cm-bild { margin:6px 0; }
.cm-erkl-knoepfe { display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; max-width:420px; margin:14px auto 0; }
.cm-erkl-knoepfe .cm-btn { margin:0 5px; -webkit-flex:1; flex:1; }
.cm-erkl-knoepfe .cm-btn.zweit { -webkit-flex:0 0 72px; flex:0 0 72px; }
#erklhilfe { margin-top:10px; }
.eb-reihe { display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.eb-reihe > * { margin:4px 8px; }
.eb-rechnung { font-size:30px; font-weight:900; color:var(--ink); margin-top:6px; }
.eb-art { display:inline-block; border-radius:18px; padding:8px 14px; font-size:24px; font-weight:900; text-align:center; min-width:96px; }
.eb-art span { display:block; font-size:44px; line-height:1.2; }
@media (max-width:480px) { .cm-card.erklaer .cm-erkltext { font-size:19px; } .eb-rechnung { font-size:24px; } }
.cm-erkl-knoepfe .cm-btn.weiter.laeuft:after { -webkit-animation-duration:2.5s; animation-duration:2.5s; }