/* Hicke 01.11.2026: Lernerlebnisse im neuen App-Stil (wie Profil, Premium, Münzen, Statistik, Lehrerbereich).
   Aufbau, Szenen und Bedienung unverändert, nur die Bedienelemente darüber: Nunito als Grundschrift, Überschriften in Baloo 2,
   weiße Flächen mit 3px hellgrauer Kontur und Unterkante, flache blaue Knöpfe mit Unterkante, Auswahl hellblau.
   Weil die Karten über einem Bild schweben, bleibt ein sehr weicher Schatten für die Lesbarkeit.
   Wird von jeder Erlebnis-Seite nach dem eigenen <style> geladen; „html body“ vorne, damit es auch gegen später
   per JS eingefügte Set-Styles (KAERTCHEN_CSS, SCHILD_CSS) gewinnt.  */

@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url('/static/fonts/nunito/nunito-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url('/static/fonts/nunito/nunito-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:800;src:url('/static/fonts/baloo2/baloo2-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:800;src:url('/static/fonts/baloo2/baloo2-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html:root{
  --schrift:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ns-ink:#2a2e34;--ns-muted:#6b7280;--ns-line:#e5e5e5;--ns-line-strong:#d6dbe2;--ns-soft:#f0f2f5;--ns-hover:#f4f6f9;
  --ns-blue:#1E8CE3;--ns-blue-2:#2ea3f2;--ns-blue-edge:#1874c0;--ns-blue-soft:#e8f3fd;--ns-blue-line:#b9dcf8;
  --ns-schwebe:0 6px 20px rgba(26,31,46,.12);
  /* Blautöne und Textfarben der Sets auf die App-Farben umstellen (nur CSS; die gemalten Szenen bleiben unverändert) */
  --blau:#1E8CE3;--blau5:#2ea3f2;--blau7:#1874c0;--blau50:#e8f3fd;--blau100:#d6eafb;--blau200:#b9dcf8;
  --titel:#2a2e34;--text:#3a3f47;--leise:#6b7280;
}
html body{font-family:var(--schrift)}
html body :is(button,input,select,textarea){font-family:var(--schrift)}
html body :is(button,a,[tabindex]):focus-visible{outline:3px solid var(--ns-blue);outline-offset:2px}

/* ---------- Kopfleiste: Stationen und runde Knöpfe ---------- */
html body .weg{background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:14px;padding:9px 11px;gap:5px;box-shadow:var(--ns-schwebe)}
html body .weg button{height:9px;border-radius:99px;background:var(--ns-soft)}
html body .weg button.da{background:var(--ns-blue)}
html body .weg button.jetzt{background:#F5CB6D}
html body .knoepfe{gap:8px}
html body .knopf{width:42px;height:42px;background:#fff;color:var(--ns-ink);border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:14px;box-shadow:var(--ns-schwebe);transition:background-color .15s ease,transform .1s ease}
html body .knopf:hover{background:var(--ns-hover)}
html body .knopf:active{transform:translateY(2px);border-bottom-width:2px}

/* ---------- Aufgabenkarte ---------- */
html body #karte{box-sizing:border-box;background:#fff;border:3px solid var(--ns-line);border-bottom-width:5px;border-radius:20px;box-shadow:var(--ns-schwebe);padding:16px 18px;gap:10px}
html body #karte .klein{font-size:13px;font-weight:800;letter-spacing:0;color:var(--ns-blue)}
html body #karte .auftrag{font-size:18px;line-height:1.35;font-weight:800;color:var(--ns-ink)}
html body #karte .auftrag b{color:var(--ns-blue-edge)}
html body #rueck{border-radius:14px;padding:10px 12px;font-size:15px;font-weight:600;border:2px solid transparent}
html body #rueck.gut{background:#ebf7e1;border-color:#c8e8ad;color:#2f5a12}
html body #rueck.tipp{background:#fff6d1;border-color:#ffe27a;color:#6b5200}
html body #rueck b{font-weight:800}

/* ---------- Knöpfe: flach blau mit Unterkante, Nebenknopf weiß mit Kontur ---------- */
html body .haupt{font:800 16px var(--schrift);min-height:46px;padding:10px 22px;color:#fff;background:var(--ns-blue);border:0;border-bottom:4px solid var(--ns-blue-edge);border-radius:14px;box-shadow:none;transition:background-color .15s ease,transform .1s ease}
html body .haupt:hover{background:var(--ns-blue-2)}
html body .haupt:active{transform:translateY(2px);border-bottom-width:2px}
html body .haupt:disabled{background:var(--ns-line-strong);border-bottom-color:#c3c9d1;cursor:default;transform:none}
html body .neben{font:800 16px var(--schrift);min-height:46px;padding:10px 20px;color:var(--ns-ink);background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:14px;transition:background-color .15s ease,transform .1s ease}
html body .neben:hover{background:var(--ns-hover)}
html body .neben:active{transform:translateY(2px);border-bottom-width:2px}
html body .zwei{gap:10px}

/* Antwortwahl, Plus/Minus, Regler (einzelne Erlebnisse) */
html body #wahl button{font:700 16px/1.3 var(--schrift);color:var(--ns-ink);background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:14px;padding:11px 14px}
html body #wahl button:hover{background:var(--ns-hover);border-color:var(--ns-line-strong)}
html body #wahl button.falsch{background:var(--ns-soft);color:var(--ns-muted);border-color:var(--ns-line);border-bottom-width:2px}
html body .rund{background:#fff;color:var(--ns-blue);border:2px solid var(--ns-line);border-bottom-width:4px;font-weight:800}
html body .rund:hover{background:var(--ns-blue-soft);border-color:var(--ns-blue-line)}
html body #anzahl{font-weight:800;color:var(--ns-ink)}
html body #steuer{background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:16px;box-shadow:var(--ns-schwebe)}
html body #steuer button{background:var(--ns-blue);border-bottom:4px solid var(--ns-blue-edge);border-radius:12px}
html body #steuer button:hover{background:var(--ns-blue-2)}
html body #steuer button:active{transform:translateY(2px);border-bottom-width:2px}
html body #vorlesen{background:var(--ns-blue-soft);color:var(--ns-blue);border-radius:10px}
html body #vorlesen:hover{background:#d6eafb}

/* ---------- Namenskärtchen zum Ziehen ---------- */
html body .name{font-family:var(--schrift);font-weight:800;color:var(--ns-ink);background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:12px;box-shadow:var(--ns-schwebe)}
html body .name:hover{border-color:var(--ns-line-strong)}
html body .name.gewaehlt{background:var(--ns-blue-soft);border-color:var(--ns-blue);color:var(--ns-blue-edge)}
html body .name.zieht{box-shadow:0 12px 28px rgba(26,31,46,.22)}

/* ---------- Hinweise und Zähler über dem Bild ---------- */
html body :is(#zaehler,#hinweis){font-weight:800;color:var(--ns-ink);background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:12px;box-shadow:var(--ns-schwebe)}
html body #flug{background:#fff;border:3px solid var(--ns-line);border-bottom-width:5px;border-radius:20px;box-shadow:var(--ns-schwebe)}
html body #flug .wohin{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;line-height:1.1;color:var(--ns-ink)}
html body #flug .wie{font-family:var(--schrift);color:var(--ns-muted)}

/* Beschriftungen im Bild: etwas runder */
html body .schild:not(.rose){border-radius:8px}
html body .griff{box-shadow:0 2px 0 var(--ns-blue-edge),0 4px 10px rgba(26,31,46,.18)}

/* ---------- Start- und Endtafel ---------- */
html body .tafel{background:#fff;border:3px solid var(--ns-line);border-bottom-width:6px;border-radius:24px;box-shadow:0 18px 50px rgba(26,31,46,.22);padding:28px 28px 24px;width:min(440px,100%);box-sizing:border-box;gap:14px}
html body .tafel h1{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:34px;line-height:1.08;letter-spacing:0;color:var(--ns-ink)}
html body .tafel p{font-size:16px;line-height:1.5;color:#4b5563}
html body .tafel .klein{font-size:13px;font-weight:800;color:var(--ns-blue)}
html body .tafel > .klein:first-child{align-self:flex-start;padding:4px 12px;border-radius:99px;background:var(--ns-blue-soft);box-shadow:inset 0 0 0 2px var(--ns-blue-line)}
html body .tafel ul{gap:8px}
html body .tafel li a{font:700 15px var(--schrift);color:var(--ns-ink);background:#fff;border:2px solid var(--ns-line);border-bottom-width:4px;border-radius:12px;padding:10px 14px}
html body .tafel li a:hover{background:var(--ns-hover)}
html body .tafel .zwei{margin-top:4px}

@media (max-width:420px){
  html body .tafel{padding:22px 20px 20px;border-radius:20px}
  html body .tafel h1{font-size:28px}
  html body #karte{padding:13px 14px;border-radius:18px}
  html body #karte .auftrag{font-size:16.5px}
  html body .knopf{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  html body :is(.knopf,.haupt,.neben){transition:none}
  html body :is(.knopf,.haupt,.neben,#steuer button):active{transform:none}
}

/* Hicke 01.11.2026 15:00: Frage in eigener Zeile, Einleitung („Guten Morgen! …“) etwas kleiner (Klassen setzt neuer-stil.js) */
html body #karte .auftrag.mit-frage{font-size:15.5px;line-height:1.45;font-weight:600;color:#4b5563;text-wrap:pretty}
html body #karte .auftrag.mit-frage b{font-weight:800;color:var(--ns-blue-edge)}
html body #karte .auftrag.mit-frage b.frage{display:block;margin-top:6px;font-size:18px;line-height:1.35;font-weight:800;color:var(--ns-blue-edge);text-wrap:pretty}
@media (max-width:420px){
  html body #karte .auftrag.mit-frage{font-size:14.5px}
  html body #karte .auftrag.mit-frage b.frage{font-size:16.5px}
}