:root{--bg:#e3eedb;--ink:#26331f;--bar:#b0412f;--hay:#e2b24a;--gr:#4f8a4a;--card:#fbfdf7;--line:#c5d6ba;--sky:#cfe5ef;--h1:#8fbf7c;--h2:#a9cf98}
@media(prefers-color-scheme:dark){:root{--bg:#1a281b;--ink:#e8f0e2;--card:#25392a;--line:#3f5a40;--sky:#223a4c;--h1:#2f5a3a;--h2:#3a6b45}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 "Trebuchet MS","Segoe UI",system-ui,sans-serif}
/* Weide als Hintergrund: Szene oben fest, Inhalt schiebt sich wie ein Blatt darüber */
main{position:relative;z-index:1;margin:0;margin-top:calc(var(--wh,0px) - 18px);padding:18px 16px 48px;min-height:calc(100vh - var(--wh,0px) + 18px);background:var(--bg);border-radius:22px 22px 0 0;box-shadow:0 -6px 18px #0002}
.in{max-width:640px;margin:0 auto}
body.nohof main{margin-top:0;min-height:100vh;border-radius:0;box-shadow:none}
.hof{position:fixed;left:0;top:0;width:100%;height:var(--wh,0px);z-index:0;display:none;touch-action:pan-y;background:#cfe5ef}
body.fly{overflow:hidden}
body.fly .hof{height:100%;z-index:60;touch-action:none;cursor:grab}
body.fly main{display:none}
#fly{position:fixed;left:10px;top:10px;z-index:70;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 20px)}
#fly[hidden]{display:none}
#fly span{color:#fff;font-size:14px;text-shadow:0 1px 3px #000a}
#fly button{background:#fffd;color:#26331f;border:0}
/* Countdown vor der Hof-Sperre: unten in der Mitte, auch über dem Rundflug */
#sperre{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;background:#fffbe9;color:#26331f;border:2px solid #e2b24a;border-radius:16px;padding:8px 16px;font-size:17px;box-shadow:0 4px 14px #0003;white-space:nowrap}
#sperre b{display:inline-block;min-width:1.4em;text-align:center;font-size:22px;color:#b0412f}
#sperre[hidden]{display:none}
h1{font:700 28px "Palatino Linotype",Palatino,Georgia,serif;margin:8px 0}h2{font:700 20px "Palatino Linotype",Palatino,Georgia,serif;margin:20px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
button,select,input{font:inherit;color:inherit}
button{background:var(--bar);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
button.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.go{background:var(--hay);color:#26331f;font-weight:700}
button.big{width:100%;text-align:left;margin:6px 0;display:flex;justify-content:space-between;align-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--hay);outline-offset:2px}
input,select{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin:4px 4px 4px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sp{justify-content:space-between}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line);margin-left:3px}.dots i.on{background:var(--gr)}
.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}.bar b{display:block;height:100%;background:var(--hay)}
button.klein{padding:4px 9px;font-size:13px;margin:2px 0 2px 4px}
.scene{width:100%;border-radius:14px;display:block}.q{font-size:clamp(17px,5vw,22px);white-space:pre-line;margin:12px 0}
#ans{font-size:clamp(19px,5.6vw,24px);width:100%;max-width:240px}
/* Themen-Kategorien: Schulstoff, Mathe-Olympiade & Knobeln, aufklappbar Wiederholen */
.kat{font-size:15px;margin:14px 0 6px;color:var(--gr);text-transform:none}
details.wdh{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--card)}
details.wdh summary{cursor:pointer;font-weight:bold;padding:6px 0}
/* Zeichnungen zu Geometrie-Aufgaben (zeichnung.js), Farben passen sich an Hell und Dunkel an */
.zeich{display:block;width:100%;max-width:340px;margin:10px 0 0;background:var(--card);border:1px solid var(--line);border-radius:12px}
.zeich .zf{fill:var(--bg);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.zeich .zl{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.zeich .zd{stroke-dasharray:5 4}.zeich .zdick{stroke-width:3}.zeich .zduenn{stroke-width:1;opacity:.55}
.zeich .zleiter{fill:none;stroke:#a0703c;stroke-width:4;stroke-linecap:round}
.zeich .zb{fill:none;stroke:var(--gr);stroke-width:1.6}.zeich .zbr{fill:none;stroke:var(--bar);stroke-width:2.2}
.zeich .zp{fill:var(--ink)}.zeich .zpa{fill:var(--hay);stroke:var(--ink);stroke-width:1.2}
.zeich text{font-size:14px;text-anchor:middle;dominant-baseline:middle;fill:var(--ink)}
/* Sudoku (seit 2026-10-19): Feld, markiertes Feld, dünne Linien, dicke Kastenlinien, vorgegebene Zahlen */
.zeich .zsf{fill:var(--card)}.zeich .zsm{fill:var(--hay);opacity:.45}.zeich .zsd{stroke:var(--ink);stroke-width:.6;opacity:.45}
.zeich .zsk{stroke:var(--ink);stroke-width:2.2}.zeich .zst{font-weight:600}
.zeich .zh{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.zeich .zw{fill:var(--hay);stroke:var(--ink);stroke-width:1}.zeich .zwl{stroke:var(--ink);stroke-width:.6;opacity:.55}
.zeich .zpfeil{stroke:var(--bar);stroke-width:2.6}
.zeich .zmoehre{fill:#e67e22;stroke:#9a4a12;stroke-width:1}.zeich .zmstreif{stroke:#9a4a12;stroke-width:1;opacity:.6}.zeich .zkraut{fill:none;stroke:#4f8a4a;stroke-width:2.2;stroke-linecap:round}
.zeich .zuhrh{stroke:var(--ink);stroke-width:6;stroke-linecap:round}.zeich .zuhrm{stroke:var(--bar);stroke-width:3.5;stroke-linecap:round}
.zeich .zgs{stroke:#5b4a2a;stroke-width:1.2}.zeich .zgl{stroke:#5b4a2a;stroke-width:.8;opacity:.6}.zeich .zgt{fill:#2b2410;font-weight:700}
/* Formen und Körper haben feste helle Farben, deshalb feste dunkle Kanten (auch im dunklen Modus gut sichtbar) */
.zeich .zfo{stroke:#3a2c1a;stroke-width:1.6;stroke-linejoin:round}.zeich .zverd{stroke:#3a2c1a;stroke-dasharray:4 3;opacity:.8}
.zeich .ztab{fill:var(--bg);stroke:var(--ink);stroke-width:1.4}.zeich .ztl{text-anchor:start}.zeich .ztr{text-anchor:end}.zeich .zti{font-weight:700}.zeich .zstrich{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.zeich .zr{fill:var(--bar);font-weight:bold;font-size:15px}.zeich .zn{font-size:15px;font-style:italic;font-weight:bold}
/* Eingabefeld mit Einheit dahinter (z. B. °, cm, €) */
.antw{display:flex;align-items:center;gap:10px;max-width:300px}
/* Figuren winken beim Antippen (seit 2026-10-19) */
#hof .fig,.figmini{cursor:pointer}
/* Besuch per Code (seit 2026-10-20): QR-Code immer schwarz auf weiß (auch im dunklen Modus), mit Rand zum Scannen */
.qrbox{display:inline-block;background:#fff;padding:8px;border-radius:12px;line-height:0}.qr{display:block;max-width:100%;height:auto}
/* Kein blauer Tipp-Kasten und keine Markierung beim Antippen von Hof und Figur (Android-Browser, seit 2026-10-19) */
#hof,.figmini,.scene{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#hof:focus,#hof *:focus,.figmini:focus{outline:none}
/* Kopf der Aufgabe: Themenname darf umbrechen, der Zähler bleibt oben rechts */
.qthema{flex:1;min-width:0;text-align:center}#apz{flex:none}.qthema .dots{white-space:nowrap}
.row.qkopf{flex-wrap:nowrap}
/* Antwortzeile (seit 2026-10-19): Eingabefeld mit Einheit und "Prüfen" nebeneinander, gleich hoch; Tipp als Link darunter */
.antwort{display:flex;gap:10px;align-items:stretch;max-width:440px;margin:8px 0 2px}
.antwort .antw{flex:1;min-width:0;max-width:none}.antwort #ans{max-width:none;min-width:0;margin:0}
/* Fokusrahmen um das ganze Antwortfeld samt Einheit (seit 2026-10-28, Brain Dump): Vorher lag er nur um das Eingabefeld darin,
   schnitt so den Rahmen des Felds und endete vor der Einheit (z. B. €). :focus-within statt :has() und beim Feld nur :focus
   (eine Liste mit :focus-visible würden Browser ohne :focus-visible ganz verwerfen), damit es auch ältere Browser können. */
.antwort .antw:focus-within{outline:3px solid var(--hay);outline-offset:2px}
.antwort .antw #ans:focus{outline:none}
button.pruefen{padding:0 22px;font-size:18px;flex:none}
button.tipp{background:none;color:var(--ink);border:0;padding:8px 2px;font-size:15px;opacity:.75;text-decoration:underline;text-underline-offset:3px}
.einheit{font-size:clamp(19px,5.6vw,24px);font-weight:bold;white-space:nowrap}
.ok{color:var(--gr)}.no{color:var(--bar)}.small{font-size:14px;opacity:.85}
.badge{display:inline-block;background:var(--hay);color:#26331f;border-radius:14px;padding:2px 12px;margin:3px;font-size:14px}
.badge.off{background:var(--line);color:var(--ink);opacity:.6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
button:disabled{opacity:.55;cursor:not-allowed}
.ap{display:inline-flex;align-items:center;gap:4px;font-weight:700}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(calc(var(--a)*-1))}}@keyframes gal{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--a))}}@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes aus{0%,40%,80%,100%{transform:translateY(0)}20%,60%{transform:translateY(calc(var(--a)*-1))}}
.an-jump,.an-hop{animation:jump .9s ease-out .5s}.an-gal{animation:gal 1.2s ease-in-out .5s}.an-wig{animation:wig .8s ease-in-out .5s;transform-origin:160px 160px}.an-aus{animation:aus 1.1s ease-out .5s}.now{animation-delay:0s!important}
@keyframes hrt{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(-36px)}}.hrt{animation:hrt 1.3s ease-out both}
/* Aufgaben-Animationen (seit 2026-10-19) */
@keyframes rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rein{animation:rein .35s ease-out both}.rein2{animation:rein .35s ease-out .12s both}
.bar b{transition:width .6s ease}
@keyframes wackel{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.wackel{animation:wackel .45s ease-in-out}
.funkeln{position:relative}.sterne{position:absolute;left:0;top:0;pointer-events:none}
.sterne i{position:absolute;left:var(--x);top:var(--y);width:13px;height:13px;background:var(--hay);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:funkel .9s ease-out var(--d) both}
@keyframes funkel{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(40deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) .25s both}
#apz{display:inline-block}.puls{animation:puls .4s ease-out}@keyframes puls{50%{transform:scale(1.35)}}
.flugapfel{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:16px;height:16px}
.konfetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.konfetti i{position:absolute;top:-30px;width:9px;height:14px;border-radius:2px;animation:fall var(--t) cubic-bezier(.3,.1,.6,1) var(--d) both}
.konfetti i.hu{width:auto;height:auto;background:none}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(105vh) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){[class^=an-],.hrt,.rein,.rein2,.wackel,.sterne i,.pop,.puls{animation:none}.sterne{display:none}.bar b{transition:none}}
/* Copyright-Vermerk als Fußzeile unten auf jeder Seite (seit 2026-10-25).
   Seit 2026-10-27 am unteren Rand (Brain Dump): main ist eine Flex-Spalte und mindestens so hoch wie der freie Bildschirm, der Inhaltsblock .in
   wächst mit, die Zeile steht danach im normalen Textfluss. Auf kurzen Seiten landet sie am Bildschirmrand, auf langen nach dem Inhalt,
   und sie kann nichts überdecken (auch nicht bei großer Schrift). 100dvh nur, wo der Browser es kennt (sonst gilt 100vh von oben). */
main{display:flex;flex-direction:column;padding-bottom:16px}
#app>.in{flex:1 0 auto;width:100%}
.copyright{text-align:center;margin:20px 0 0;opacity:.8}
/* Impressum und Datenschutz (seit U8): Knöpfe, die wie Links aussehen, in jeder Ansicht. Die Kennung #app sticht die Holz-Optik der Welt aus. Etwas Polster, damit sie sich mit dem Finger treffen lassen */
#app button.textlink{background:none;color:inherit;border:0;border-radius:0;box-shadow:none;text-shadow:none;margin:0;padding:6px 3px;font-weight:400;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
#app .recht button.textlink{padding:0}
.rechtzeile{text-align:center;margin:12px 0 0}
/* Erinnerung an die Sicherung in der Eltern-Ansicht (seit U8h) */
.card.sicherkasten{border:2px solid var(--hay);background:#fff6d8;color:#26331f}.sicherkasten p{margin:0 0 8px}
.sicherstart{text-align:center;margin:10px 0 0}
.recht h2{font-size:18px;margin:18px 0 4px}.recht a{color:inherit}.recht ul{padding-left:20px}.recht li{margin:6px 0}
@supports (height:100dvh){main{min-height:calc(100dvh - var(--wh,0px) + 18px)}body.nohof main{min-height:100dvh}}
/* Während des Countdowns vor der Hof-Sperre (unten in der Mitte) die Zeile ausblenden, sie läge sonst darunter (Klasse aus countdown() in app.js) */
body.cdlauf .copyright{visibility:hidden}
.gummi{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #0004;vertical-align:-1px}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:5px 4px;border-bottom:1px solid var(--line);text-align:left}
/* Schriftgröße nicht vom Browser aufblähen lassen (seit 2026-10-21) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Lange Seiten der Welt (seit 2026-10-21): Trennlinien zwischen den Bereichen, Fortschrittsbalken zur Freischaltung, Bilder der Hof-Gegenstände */
.xpb{position:relative;display:block;height:24px;margin:6px 0;border-radius:12px;background:var(--line);overflow:hidden;font-size:13px;line-height:24px;text-align:center;color:var(--ink)}
.xpb i{position:absolute;left:0;top:0;bottom:0;background:var(--hay);opacity:.6}.xpb span{position:relative;font-weight:bold}
.xpb.klein{height:16px;line-height:16px;font-size:11px;margin:4px 0 0}
/* Regen und Schnee als eigene Ebene über dem Hof (seit 2026-10-21): wird nur verschoben, nicht neu gezeichnet (schont das Fire-Tablet) */
#hwetter{position:fixed;left:0;top:0;width:100%;height:var(--wh,0px);z-index:0;pointer-events:none;overflow:hidden;display:none}
body.fly #hwetter{height:100%;z-index:61}body.nohof #hwetter{visibility:hidden}
#hwetter svg{position:absolute;left:0;top:-100%;width:100%;height:200%;will-change:transform;animation:fallen 1s linear infinite}
#hwetter .pendel{position:absolute;inset:0;animation:pendel 4.5s ease-in-out infinite alternate}
@keyframes fallen{from{transform:translateY(0)}to{transform:translateY(50%)}}
@keyframes pendel{from{transform:translateX(calc(var(--sw,0%) * -1))}to{transform:translateX(var(--sw,0%))}}
#hwetter.ruhig svg,#hwetter.ruhig .pendel{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#hwetter svg,#hwetter .pendel{animation:none}}
/* Hinweis beim Hineinscrollen mit etwas Abstand zum Bildschirmrand (seit 2026-10-21) */
#app p.no{scroll-margin:24px}
/* PIN vergessen (seit 2026-10-22): kleines "i" auf der PIN-Seite, erst nach 5 schnellen Tipps sichtbar */
.pinkarte{position:relative}.pini{position:absolute;right:10px;top:10px;width:28px;height:28px;min-height:0;padding:0;border-radius:50%;font:italic bold 15px Georgia,serif;line-height:26px}
/* Erklärseite für Eltern und PIN-Sperre (seit 2026-10-24) */
ul.info{margin:6px 0 0;padding-left:20px}ul.info li{margin:5px 0}
.pinzu{border-color:#c0392b}.pinzu b{color:#c0392b}
button.big:disabled{opacity:.5}
/* Schulstoff "im Unterricht schon dran" in der Eltern-Ansicht (seit 2026-10-24) */
details.ndl{margin:6px 0}details.ndl summary{cursor:pointer;font-size:15px}.ndz{display:block;margin:4px 0;font-size:15px}.ndz input{width:auto;min-height:0;margin-right:6px}
/* Ansichten "Bunte Kacheln" (B) und "Turnier" (C), seit 2026-10-26 (menue.js). Klassen mit m vorn, damit nichts mit dem Rest kollidiert. */
/* --mgrau: Beschriftung der Leiste (C), --mleer: leere Sterne, --mgold: volle Sterne, --mon: aktiver Knopf der Leiste */
:root{--mrand:#eadfc6;--mgrau:#5f6155;--mleer:#a3a596;--mgold:#c08a10;--mon:#b0412f}
@media(prefers-color-scheme:dark){:root{--mrand:#3f5a40;--mgrau:#b6c2ae;--mleer:#6e8269;--mgold:#e8b84e;--mon:#f0b44a}}
button.mk{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:8px 0;padding:10px 12px;color:var(--ink);background:var(--card);border:0;font-weight:400}
.mwt{flex:1;min-width:0}
/* Auswahlseite */
button.mwahl{justify-content:flex-start;gap:14px;padding:10px 12px}button.mwahl.on{border:2px solid var(--bar)}.mvor{flex:none;line-height:0}
.mlinks{justify-content:center;margin-top:16px}.mlinks button{padding:7px 13px;font-size:15px}
/* B: Kinder auf der Startseite, Kopf der Kind-Ansicht */
button.mkind{border-radius:18px;box-shadow:0 3px 10px #0002}button.mkind b{font-size:18px}
.mbild{width:76px;height:70px;border-radius:16px;display:grid;place-items:center;overflow:hidden;flex:none}.mbild svg{display:block}
.mkopf{display:flex;align-items:center;gap:10px;margin:10px 0 2px}.mkopf b{font-size:19px}
.mava{width:56px;height:56px;border-radius:50%;background:var(--card);box-shadow:0 2px 6px #0002;display:grid;place-items:end center;overflow:hidden;flex:none}.mava svg{display:block}
.mkt{flex:1;min-width:0;line-height:1.3}
/* B: Kacheln (helle Farben mit dunkler Schrift, auch im dunklen Modus) */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
button.mkach{margin:0;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-height:96px;border-radius:16px;color:#26331f;font-weight:700;font-size:15px;line-height:1.25;box-shadow:0 3px 0 #0001,0 4px 10px #0001}
button.mkach .ms{display:block;font-weight:400;font-size:12.5px;opacity:.8;margin-top:3px}button.mkach .ms.mwarn{color:#a3271a;font-weight:700;opacity:1}
button.mkach.breit{grid-column:1/-1;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;min-height:76px;font-size:21px}
button.mf1{background:#ffe9a8}button.mf2{background:#d7efc6}button.mf3{background:#cfe6f6}button.mf4{background:#f6d6d0}button.mf5{background:#e7dcf6}button.mf6{background:#fdf0d6}button.mfg{background:linear-gradient(135deg,#e2b24a,#f3cf7a)}
/* B: Umschalter und Themen mit Ring */
.mseg{display:flex;background:var(--line);border-radius:12px;padding:3px;margin:8px 0 10px}
.mseg button{flex:1;background:transparent;color:var(--ink);padding:8px 4px;border-radius:9px;font-size:15px;font-weight:700}
.mseg button.on{background:var(--card);box-shadow:0 1px 4px #0002}
button.mtile{border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:7px 0;font-weight:700;box-shadow:0 2px 6px #0001}
.mring{width:38px;height:38px;flex:none}.mring .rg0{stroke:var(--line)}.mring text{fill:var(--ink)}
/* C: Startnummern, Karten mit Rosette, großer Knopf, kleine Kacheln */
button.mnr{border:2px solid var(--mrand);border-radius:14px}button.mnr b{font-size:18px}
/* Bild statt Startnummer (seit 2026-10-26): Kopf des Tiers, sonst Kopf der Figur, sonst die Nummer */
.mnr .nr{width:60px;height:58px;border-radius:8px;background:linear-gradient(#cfe6f6,#eaf4e2);color:#26331f;border:3px solid #26331f;display:grid;place-items:center;overflow:hidden;font:800 21px "Trebuchet MS",sans-serif;flex:none;box-shadow:2px 2px 0 #b0412f}
.mnr .nr svg{display:block}
button.mros{border:2px solid var(--mrand);border-radius:16px;font-size:17px}button.mros.mwarnk{border-color:#e2b24a}button.mros svg{flex:none}
button.mcta{justify-content:center;gap:10px;margin:14px 0 10px;padding:15px;border-radius:30px;background:var(--hay);color:#26331f;font-weight:800;font-size:20px;box-shadow:0 4px 0 #a8832f}
.mmini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.mmini button.mk{flex-direction:column;justify-content:center;gap:2px;margin:0;padding:8px 4px;text-align:center;border:2px solid var(--mrand);border-radius:14px;font-size:13px;font-weight:700;line-height:1.2}
/* C: Themen mit Bändern und Sternen */
h3.mband{display:inline-block;padding:3px 18px 3px 9px;border-radius:4px;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:16px 0 2px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
button.mzeile{justify-content:space-between;margin:0;padding:12px 4px;border-radius:0;background:transparent;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
.msterne{color:var(--mgold);letter-spacing:1px;white-space:nowrap;font-size:16px}.msterne i{font-style:normal;color:var(--mleer)}
/* C: Leiste unten (fest), Platz für sie unter dem Inhalt, Countdown darüber */
.mleiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 12px #0001;padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
.mleiste button{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;color:var(--mgrau);font-size:11.5px;font-weight:700;padding:4px 2px;border-radius:0}
.mleiste button.on{color:var(--mon)}.mleiste button:disabled{opacity:.4}
body.mitleiste main{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}body.mitleiste #sperre{bottom:84px}
/* Werbespruch unter dem App-Namen (seit 2026-10-26) */
p.spruch{margin:-6px 0 10px;font:italic 700 16px "Palatino Linotype",Palatino,Georgia,serif;color:var(--gr)}
/* ---------- Aufgabenseiten je Ansicht (seit 2026-10-26, aufgabeSeite in menue.js) ---------- */
.qbild{max-width:300px}.qloes{white-space:pre-line;font-size:16px}
.qseg i.neu{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
/* B Bunte Kacheln: klare Karte, Striche, Rückmeldung als Leiste unten */
.qkopfb{display:flex;align-items:center;gap:8px}
button.qzu{width:40px;height:40px;flex:none;border-radius:50%;padding:0;background:var(--card);color:var(--ink);box-shadow:0 1px 4px #0002;font-weight:700;font-size:17px}
.qpill{flex:1;min-width:0;background:var(--card);border-radius:20px;padding:5px 12px;font-size:14px;font-weight:700;box-shadow:0 1px 4px #0001}.qpill .dots{white-space:nowrap}
.qseg{display:flex;gap:4px;margin:12px 0 10px}.qseg i{flex:1;height:8px;border-radius:4px;background:var(--line)}.qseg i.ok{background:#4f8a4a}.qseg i.no{background:#e08a77}.qseg i.jetzt{background:#e2b24a}
.qkarte{background:var(--card);border-radius:20px;padding:14px 16px 16px;box-shadow:0 6px 18px #0001,0 1px 3px #0001;margin:6px 0 12px}
.qkarte .small{margin:0}.qkarte .q{font-size:clamp(18px,5vw,22px);font-weight:700}
.qb .antwort{flex-direction:column;align-items:stretch;max-width:none;gap:12px;margin-top:12px}
.qb .antw,.qgegeben{display:flex;align-items:center;height:58px;border-radius:16px;background:var(--bg);border:2px solid #4f8a4a;padding:0 10px 0 16px;max-width:none}
.qb #ans{border:0;background:transparent;font-size:26px;font-weight:700;margin:0;padding:0;height:100%;max-width:none}
.qb .einheit,.qgegeben .einheit{margin-left:auto;background:#4f8a4a;color:#fff;border-radius:10px;padding:2px 10px;font-size:16px}
.qb button.pruefen{height:56px;border-radius:16px;font-size:19px;box-shadow:0 4px 0 #b38420;padding:0}
.qb button.tipp{display:block;margin:4px auto 0;text-decoration:none;font-weight:700;opacity:.85}.qb button.tipp:not(.qwarum)::before{content:"💡 "}
.qgegeben{margin-top:12px;font-size:26px;font-weight:700}.qgegeben.ok{background:#e3f2d9;color:#26331f}.qgegeben.no{border-color:#c0563f;background:#fbe6e1;color:#26331f}.qgegeben.no .einheit{background:#c0563f}
.qbanner{position:sticky;bottom:0;z-index:5;margin:14px -16px 0;padding:16px 16px 20px;border-radius:22px 22px 0 0;color:#fff;box-shadow:0 -4px 14px #0002}
.qbanner.ok{background:#4f8a4a}.qbanner.no{background:#c0563f}
.qbanner p.ok,.qbanner p.no{color:#fff;margin:0 0 8px;font-size:18px}
.qbanner button.qweiter{width:100%;height:50px;margin-top:4px;border-radius:14px;background:#fff;color:#26331f;font-size:18px}
.qb .qloes{background:var(--card);border-radius:16px;border:0;box-shadow:0 2px 8px #0001}
/* C Turniermodus: Parcours, Sprechblase, Zahlenblock */
button.qende{background:none;color:var(--ink);padding:6px 4px;font-weight:700}
/* Gezeichneter Vierbeiner (core/vierbeiner.js, seit U7g für alle Welten, nur innerhalb von .pferd2d: Gleich benannte Klassen einer Welt bleiben frei): Farben kommen als CSS-Variablen vom jeweiligen Tier.
   Umriss leicht (fest): Haare, Glanz und Details bekommen keinen Rand, hintere Tiere gar keinen. Sparmodus: Klasse ohneUmriss. */
.pferd2d .kK{fill:var(--gK)}.pferd2d .kN{fill:var(--gN)}.pferd2d .kN2{fill:var(--gN2)}.pferd2d .kH{fill:var(--gH)}.pferd2d .kKf{fill:var(--fk3)}.pferd2d .bO{fill:var(--gB)}.pferd2d .bOf{fill:var(--gBf)}.pferd2d .bU{fill:var(--u)}.pferd2d .bUf{fill:var(--fu)}
/* Weiße Socken je Bein, fernes Bein etwas dunkler */
.pferd2d .sock{fill:#f1eee6}.pferd2d .sockF{fill:#d4d1c8}
.pferd2d .hu{fill:var(--huf)}.pferd2d .hf{fill:var(--fhuf)}.pferd2d .ha1{fill:var(--h1);stroke:#000;stroke-opacity:.22;stroke-width:.8}.pferd2d .ha2{fill:var(--h2);stroke:#000;stroke-opacity:.18;stroke-width:.8}
.pferd2d .glanz{fill:var(--k1);opacity:.55}.pferd2d .maul{fill:var(--maul);opacity:.8}.pferd2d .beh{fill:var(--h1);opacity:calc(var(--beh) * .85)}.pferd2d .aal{fill:none;stroke:var(--u);stroke-width:3.4;stroke-linecap:round;opacity:var(--aal)}
.pferd2d .fleck{fill:#f4f1ea;opacity:var(--sch)}.pferd2d .blesse{fill:#f4f1ea;opacity:var(--bl)}.pferd2d .gummi2d{fill:var(--gu);stroke:#0004;stroke-width:.6}.pferd2d .schatten2d{fill:#2d4a1f;opacity:.22}
.pferd2d .umriss{stroke:#2a1d14;stroke-width:3.8;stroke-linejoin:round;opacity:.6;--ohneUm:none}.pferd2d .fuell{stroke:none}/* Deckkraft am ganzen Umriss statt je Teil (seit 2026-10-25): überlappende Striche werden nicht mehr dunkler (Kehle, Brust, Beinansätze) */
.pferd2d .ha1,.pferd2d .ha2,.pferd2d .glanz,.pferd2d .maul,.pferd2d .aal,.pferd2d .beh,.pferd2d .det,.pferd2d .fleck,.pferd2d .blesse,.pferd2d .gummi2d{display:var(--ohneUm,inline)}
.hinten .pferd2d .umriss,.ohneUmriss .pferd2d .umriss{display:none}
/* Karte eines Termins (Baustein termine, core/bausteine.js) */
[data-welt] .gpk button{margin-top:6px}
.qparc{position:relative;height:56px;margin:4px 6px 0}
.qparc .boden{position:absolute;left:-6px;right:-6px;bottom:6px;height:4px;border-radius:2px;background:#a9cf98}
.qparc .hin{position:absolute;bottom:9px;width:14px;height:16px;margin-left:-7px;border-left:2px solid #f4f1ea;border-right:2px solid #f4f1ea}
.qparc .hin::before{content:"";position:absolute;left:-2px;right:-2px;top:3px;height:3px;border-radius:1px;background:repeating-linear-gradient(90deg,#b0412f 0 3px,#fff 3px 6px)}
.qparc .hin.ok::before{background:#4f8a4a}.qparc .hin.no::before{top:11px;transform:rotate(22deg);background:repeating-linear-gradient(90deg,#9a9a9a 0 3px,#fff 3px 6px)}
.qparc .hin.jetzt::before{box-shadow:0 0 0 1.5px #e2b24a}
/* Hindernis der Welt (Haken parcours, seit U7e): das Motiv statt der Stange */
.qparc .hin.eigen{border:0;width:18px;height:18px;margin-left:-9px}.qparc .hin.eigen::before{display:none}.qparc .hin.eigen svg{display:block;width:100%;height:100%}.qparc .hin.eigen.no{opacity:.45}.qparc .hin.eigen.jetzt svg{filter:drop-shadow(0 0 2px #e2b24a)}
.qpf{position:absolute;bottom:8px;width:40px;margin-left:-46px;line-height:0;transform-origin:50% 100%}.qpf svg{width:100%;height:auto}
.qpf.springt{margin-left:-20px;transform:translateY(-40%) rotate(-12deg)}
@keyframes qsprung{0%{transform:translate(-14px,0) rotate(0)}55%{transform:translate(-4px,-65%) rotate(-16deg)}100%{transform:translateY(-40%) rotate(-12deg)}}
.qpf.neu{animation:qsprung .6s ease-out both}
.qblase{position:relative;background:var(--card);border-radius:18px;padding:12px 14px;margin:12px 0;box-shadow:0 3px 10px #0001}
.qblase::before{content:"";position:absolute;left:28px;top:-9px;border:9px solid transparent;border-bottom-color:var(--card);border-top:0}
.qblase .small{margin:0}.qblase .q{margin:6px 0 0}
.qc .antwort{display:block;max-width:460px}
.qc .antw,.qc .qgegeben{display:flex;align-items:center;height:56px;border-radius:14px;background:var(--card);border:3px solid var(--ink);padding:0 14px;margin-bottom:10px;max-width:none}
.qc #ans{border:0;background:transparent;font-size:28px;font-weight:800;margin:0;padding:0;height:100%;max-width:none;min-width:0;flex:1}
.qc .einheit,.qc .qgegeben .einheit{margin-left:auto;background:none;color:var(--ink);opacity:.7;font-size:18px}
.qc .qgegeben.ok{border-color:#4f8a4a;color:#2e6a2a;background:var(--card)}.qc .qgegeben.no{border-color:#c0563f;color:#a33a26;background:var(--card)}
.qpad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.qpad button{height:52px;border-radius:12px;padding:0;background:var(--card);color:var(--ink);font-size:23px;font-weight:700;box-shadow:0 3px 0 var(--line)}
.qpad button.grau{background:var(--bg);font-size:19px}.qpad button:disabled{opacity:.4}
.qpad button.pruefen{grid-row:span 2;height:auto;background:var(--hay);color:#26331f;font-size:16px;box-shadow:0 3px 0 #a8832f}
.qpad button.tipp{background:#fff6b0;color:#26331f;text-decoration:none;opacity:1;font-size:21px;padding:0}
/* Antworten zum Antippen (seit 2026-10-27, Klasse 2): große Knöpfe, zwei pro Reihe, bei <, >, = drei in einer Reihe. Gilt in allen drei Ansichten. */
.qwahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;flex:1 1 100%}
.qwahl.qzeichen{grid-template-columns:repeat(3,minmax(0,1fr))}
.qwahl .wahlk{margin:0;width:100%;min-height:54px;padding:10px 8px;font-size:21px;font-weight:700;border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--line),inset 0 0 0 2px var(--line)}
.qwahl.qzeichen .wahlk{font-size:30px;line-height:1}
.qwahl .wahlk:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line),inset 0 0 0 2px var(--line)}
.qerg{border-radius:16px;padding:12px 14px;margin:0 0 10px;color:#26331f}.qerg.ok{background:#d7efc6}.qerg.no{background:#f6d6d0}
.qerg p.ok,.qerg p.no{margin:0;color:#26331f}.qerg .card{background:transparent;border:0;padding:6px 0 0;margin:0;color:#26331f}.qerg button.tipp{color:#26331f}
.qc button.qweiter{width:100%;height:52px;border-radius:26px;font-size:18px;font-weight:800;background:var(--hay);color:#26331f;box-shadow:0 4px 0 #a8832f}
@media(prefers-reduced-motion:reduce){.qseg i.neu,.qpf.neu{animation:none}}
@media(prefers-color-scheme:dark){.qc .qgegeben.ok{color:#9fd18f}.qc .qgegeben.no{color:#ff9a86}}