@font-face { font-family:"Bricolage Grotesque"; font-weight:700; font-display:swap; src:url(fonts/bricolage-700.woff2) format("woff2"); }
@font-face { font-family:"Figtree"; font-weight:400; font-display:swap; src:url(fonts/figtree-400.woff2) format("woff2"); }
@font-face { font-family:"Figtree"; font-weight:700; font-display:swap; src:url(fonts/figtree-700.woff2) format("woff2"); }

:root { --grund:#EFEAF8; --text:#2B2145; --rose:#F4A6B8; --aprikose:#FFC48C; --minze:#A5DCCB; --himmel:#A9C8F5; --butter:#FFE79A; --flieder:#D9CEF2;
  --karte:#fff; --nacht:#231A3F; --tab-h:64px; }
html.night { --grund:#231A3F; --text:#F3EEFF; --karte:#322659; --flieder:#43357a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:var(--grund); }
body { margin:0; background:var(--grund); color:var(--text); font:17px/1.45 "Figtree", -apple-system, system-ui, sans-serif; transition:background .6s;
  padding:env(safe-area-inset-top) 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px); min-height:100vh; }
body.no-tabs { padding-bottom:calc(env(safe-area-inset-bottom) + 24px); }
h1,h2,h3 { font-family:"Bricolage Grotesque", "Figtree", sans-serif; font-weight:700; line-height:1.15; margin:.5em 0 .4em; }
h1 { font-size:30px; } h2 { font-size:22px; } h3 { font-size:18px; margin:0; }
p { margin:.4em 0; }
button, input, select { font:inherit; color:inherit; }
button { background:var(--flieder); border:0; border-radius:16px; min-height:44px; min-width:44px; padding:8px 16px; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--himmel); outline-offset:2px; }
button.primary { background:var(--text); color:var(--grund); font-weight:700; }
button[aria-pressed="true"] { background:var(--rose); color:#2B2145; font-weight:700; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row.center { justify-content:center; }
.top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; }
.top h1 { margin:0; }
.lock { background:transparent; font-size:22px; }
.hint { opacity:.8; font-size:15px; }
.err { background:#FFD9DF; color:#2B2145; padding:10px 14px; border-radius:14px; }
.ok { background:var(--minze); color:#2B2145; padding:10px 14px; border-radius:14px; }

/* Formen: Hörspiel = Bogen, Wissen = Kreis, Lieder/Schlaf = Blatt */
.shape { overflow:hidden; background:var(--flieder); display:block; }
.shape-hoerspiel { border-radius:999px 999px 18px 18px; }
.shape-wissen { border-radius:50%; }
.shape-lieder { border-radius:60% 6px 60% 6px; }
.shape-podcast { border-radius:30%; }
.shape img { width:100%; height:100%; object-fit:cover; display:block; }
.tint-hoerspiel { background:var(--himmel); } .tint-wissen { background:var(--butter); } .tint-lieder { background:var(--rose); } .tint-podcast { background:var(--minze); }

.resume { display:flex; gap:14px; align-items:center; width:100%; text-align:left; background:var(--aprikose); color:#2B2145; border-radius:24px; padding:14px; }
.resume .shape { width:84px; height:84px; flex:none; }
.resume .meta { flex:1; min-width:0; }
.bar { height:8px; border-radius:4px; background:rgba(43,33,69,.18); overflow:hidden; margin-top:8px; }
.bar > i { display:block; height:100%; background:#2B2145; }

.reihe { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px; margin:0 -16px; padding-left:16px; padding-right:16px; scroll-snap-type:x proximity; }
.reihe > * { flex:none; width:132px; scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.tile { display:flex; flex-direction:column; gap:8px; text-align:left; background:transparent; padding:0; min-height:44px; align-items:stretch; }
.tile .shape { width:100%; aspect-ratio:1; }
.tile strong { font-size:15px; line-height:1.25; }
.tile small { opacity:.8; }

.ep { display:flex; gap:12px; align-items:center; background:var(--karte); border-radius:20px; padding:10px; margin:8px 0; width:100%; text-align:left; }
.ep .shape { width:64px; height:64px; flex:none; }
.ep .meta { min-width:0; } .ep small { display:block; opacity:.8; }

.chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.search { display:flex; gap:8px; }
.search input { flex:1; min-width:0; min-height:48px; border-radius:16px; border:2px solid var(--flieder); background:var(--karte); padding:8px 14px; }
input[type=text], input[type=password], input[type=tel], select { min-height:48px; border-radius:14px; border:2px solid var(--flieder); background:var(--karte); padding:8px 12px; max-width:100%; }

/* Jetzt läuft */
.now { text-align:center; }
.now .cover { width:min(72vw,320px); aspect-ratio:1; margin:12px auto; }
.now input[type=range] { width:100%; min-height:44px; accent-color:var(--text); }
.now .time { display:flex; justify-content:space-between; font-size:15px; }
.now .big { min-width:72px; min-height:72px; border-radius:50%; font-size:17px; }
html.night .now .big, html.night button.primary { background:var(--butter); color:#231A3F; }

/* Tableiste */
.tabs { position:fixed; left:0; right:0; bottom:0; height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--karte); display:flex; justify-content:space-around; align-items:center; box-shadow:0 -2px 12px rgba(43,33,69,.12); }
.tabs button { background:transparent; flex:1; min-height:var(--tab-h); border-radius:0; font-size:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.tabs button[aria-current="page"] { font-weight:700; color:var(--text); box-shadow:inset 0 3px 0 var(--rose); }
.mini { position:fixed; left:10px; right:10px; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); background:var(--text); color:var(--grund);
  border-radius:20px; padding:6px 8px 6px 14px; display:flex; gap:8px; align-items:center; }
.mini .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; background:none; color:inherit; padding:8px 0; }
.mini .p { background:var(--grund); color:var(--text); font-weight:700; }
body.has-mini { padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 90px); }

.pin { display:flex; flex-direction:column; gap:12px; max-width:320px; margin:24px auto; }
.item { display:flex; gap:10px; align-items:center; justify-content:space-between; background:var(--karte); border-radius:16px; padding:8px 12px; margin:6px 0; }
.item .t { min-width:0; } .item small { opacity:.8; display:block; }
@media (prefers-reduced-motion: reduce) { body { transition:none; } }
.cover-s { width:96px; height:96px; flex:none; }
.reihe { scroll-padding-left:16px; }
.resume small, .tile small { display:block; }
.bar { display:block; }

/* Player passt ohne Scrollen auf den Bildschirm */
.now h1 { font-size:21px; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.now .hint { margin:2px 0; }
.now .cover { width:min(46vw, 25vh); margin:6px auto 4px; }
.now input[type=range] { min-height:36px; margin:0; }
.now .row { gap:8px; }
.now .row.tight { margin-top:8px; }
.now .row.tight button { padding:6px 12px; font-size:16px; }
.now .big { min-width:68px; min-height:68px; }
.now .label { font-family:"Bricolage Grotesque", sans-serif; font-weight:700; margin-top:10px; }
.now .plbox { margin-top:8px; display:flex; flex-direction:column; gap:8px; align-items:stretch; background:var(--karte); border-radius:18px; padding:10px; }
.ep-wrap { position:relative; }
.ep-wrap .ep { padding-right:60px; }
.ep-wrap .x { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; }
[hidden] { display:none !important; }

/* Pop-up */
.modal { position:fixed; inset:0; background:rgba(35,26,63,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.panel { background:var(--grund); color:var(--text); border-radius:24px; padding:18px; width:min(100%,420px); max-height:85vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.35); }
.panel .pl-list { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.panel .pl-list button { text-align:left; }
.panel .row input { flex:1; min-width:0; }
.now .big, .mini .p { display:inline-flex; align-items:center; justify-content:center; padding:0; }
.now .big svg { margin-left:0; }
.mini .p { width:48px; height:48px; border-radius:50%; }
.pencil { background:transparent; font-size:18px; min-height:44px; min-width:44px; vertical-align:middle; }

/* Lieblingspodcasts aussuchen */
.linkbtn { background:transparent; text-decoration:underline; min-height:44px; }
.tile.pick { position:relative; }
.tile.pick[aria-pressed="true"] { background:transparent; }
.tile.pick .shape { transition:box-shadow .15s; }
.tile.pick[aria-pressed="true"] .shape { box-shadow:0 0 0 5px var(--rose); }
.tile.pick .check { display:none; position:absolute; top:6px; right:6px; width:34px; height:34px; border-radius:50%; background:var(--minze); color:#2B2145; font-weight:700; font-size:20px; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(43,33,69,.3); }
.tile.pick[aria-pressed="true"] .check { display:flex; }
.pickbar { position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--karte); box-shadow:0 -2px 12px rgba(43,33,69,.15); z-index:20; }
.pickbar button.primary:disabled { opacity:.4; }
body.no-tabs:has(.pickbar) { padding-bottom:110px; }


/* Lade-Animation: Bogen, Kreis und Blatt hüpfen der Reihe nach */
.loader { display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 0 24px; text-align:center; }
.loader p { margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px; animation:fade 1.6s ease-in-out infinite; }
.hops { display:flex; align-items:flex-end; gap:14px; height:64px; }
.hop { display:block; width:36px; height:36px; animation:hop 1.1s cubic-bezier(.3,0,.4,1) infinite; transform-origin:50% 100%; }
.hop.arch { background:var(--himmel); border-radius:999px 999px 8px 8px; }
.hop.circle { background:var(--butter); border-radius:50%; animation-delay:.14s; }
.hop.leaf { background:var(--rose); border-radius:60% 6px 60% 6px; animation-delay:.28s; }
@keyframes hop { 0%,55%,100% { transform:translateY(0) scale(1,1); } 10% { transform:translateY(0) scale(1.12,.84); } 30% { transform:translateY(-26px) scale(.94,1.08); } 45% { transform:translateY(0) scale(1.1,.88); } }
@keyframes fade { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hop, .loader p { animation:none; } }

/* Suchen: großer Knopf, Such-Pop-up, gelbes Wort */
.searchbtn { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; margin:8px 0; padding:10px 18px; border-radius:22px; background:var(--karte); border:3px solid var(--rose); font-size:19px; font-weight:700; text-align:left; }
.searchbtn .lens-s { color:var(--text); display:inline-flex; }
.bubble { background:var(--butter); color:#2B2145; border-radius:24px 24px 24px 6px; padding:12px 18px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:30px; line-height:1.2; margin:6px 0; max-width:100%; word-break:break-word; }
.bubble.pop { animation:pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { 0% { transform:scale(.7); opacity:0; } 100% { transform:scale(1); opacity:1; } }
input.bubble-input { width:100%; min-height:76px; border:0; border-radius:24px; background:var(--butter); color:#2B2145; text-align:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:32px; padding:10px 16px; box-shadow:inset 0 0 0 3px rgba(43,33,69,.15); }
input.bubble-input::placeholder { color:rgba(43,33,69,.45); }
input.bubble-input:focus { outline:4px solid var(--himmel); outline-offset:2px; }
.sresult { margin:8px 0 4px; }
.sresult .hint { margin:2px 0; }
.search-anim { display:flex; justify-content:center; margin-top:4px; }
.lens { display:inline-flex; color:var(--text); background:var(--rose); width:92px; height:92px; border-radius:50%; align-items:center; justify-content:center; animation:wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform:rotate(-8deg) scale(1); } 50% { transform:rotate(10deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .lens, .bubble.pop { animation:none; } }
.bigbtn { min-height:60px; min-width:132px; font-size:20px; font-weight:700; border-radius:20px; padding:10px 20px; }
.bigbtn.ok { background:var(--minze); color:#2B2145; }
.bigbtn.ok:disabled { opacity:.4; }
.bigbtn.again { background:var(--flieder); color:var(--text); }
.bigbtn span { font-size:24px; margin-right:4px; }
.panel.voice { text-align:center; }

/* Playlist-Name: Platz zum Schreiben, Knopf darunter */
.plform { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.plform input[type=text] { width:100%; box-sizing:border-box; min-height:60px; font-size:20px; padding:10px 16px; }
.plform button { width:100%; min-height:52px; }

/* Uhr */
.clock { position:fixed; top:calc(env(safe-area-inset-top) + 8px); right:12px; z-index:40; background:transparent; padding:0; min-width:0; min-height:0; border-radius:50%; line-height:0; filter:drop-shadow(0 2px 4px rgba(43,33,69,.25)); }
.clock:active { transform:scale(.94); }
.clock svg { display:block; }
.top { padding-right:66px; }

/* Startseite */
.launcher { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.appicon { display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; padding:0; min-height:0; }
.appicon img { width:100%; height:auto; aspect-ratio:1; border-radius:22%; box-shadow:0 8px 20px rgba(43,33,69,.25); transition:transform .15s; }
.appicon:active img { transform:scale(.96); }
.appicon strong { font-family:"Bricolage Grotesque",sans-serif; font-size:26px; margin-top:6px; }
.appicon small { opacity:.75; text-align:center; }

/* Suche: großes Löschen-X */
.srow { display:flex; align-items:center; gap:10px; }
.srow .bubble { flex:1; min-width:0; }
.clearx { flex:none; width:68px; height:68px; border-radius:50%; background:var(--text); color:var(--grund); font-size:36px; font-weight:700; line-height:1; padding:0; box-shadow:0 4px 12px rgba(43,33,69,.3); }
html.night .clearx { background:var(--butter); color:#231A3F; }

/* Aufgaben */
.az-top { gap:8px; }
.az-back { min-height:52px; font-size:18px; font-weight:700; white-space:nowrap; }
.az-chip { background:var(--butter); color:#2B2145; border-radius:999px; padding:8px 14px; font-weight:700; white-space:nowrap; }
.az-title { margin:8px 0 0; }
.az-tiles { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.az-tile { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--karte); border-radius:28px; padding:18px 10px; min-height:210px; justify-content:flex-start; box-shadow:0 4px 14px rgba(43,33,69,.12); }
.az-tile strong { font-family:"Bricolage Grotesque",sans-serif; font-size:26px; }
.az-tile small { opacity:.75; text-align:center; }
.az-badge { display:flex; align-items:center; justify-content:center; width:104px; height:104px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:34px; color:#2B2145; }
.az-math { background:var(--himmel); border-radius:50%; }
.az-ger { background:var(--rose); border-radius:999px 999px 18px 18px; }
.az-topics { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.az-topic { min-height:68px; font-size:20px; font-weight:700; text-align:left; background:var(--karte); border-radius:22px; padding:12px 18px; box-shadow:0 2px 8px rgba(43,33,69,.1); }
.az-topic.first { background:var(--aprikose); color:#2B2145; }
.az-dots { display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.az-dots span { width:14px; height:14px; border-radius:50%; background:var(--flieder); }
.az-dots span.done { background:var(--minze); }
.az-dots span.now { background:var(--rose); transform:scale(1.35); }
.az-q { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:44px; line-height:1.15; text-align:center; margin:6px 0; word-break:break-word; }
.az-q.small { font-size:26px; }
.az-answer { min-height:84px; margin:8px auto; width:min(100%,260px); display:flex; align-items:center; justify-content:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:52px; background:var(--butter); color:#2B2145; border-radius:24px; opacity:.6; }
.az-answer.has { opacity:1; }
.az-keys { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:340px; margin:12px auto 0; }
.az-key { min-height:68px; font-size:30px; font-weight:700; border-radius:20px; background:var(--karte); box-shadow:0 3px 0 var(--flieder); }
.az-key.go { background:var(--minze); color:#2B2145; }
.az-key.del { background:var(--flieder); }
.az-key:disabled { opacity:.5; }
.az-fb { margin:12px 0; min-height:10px; text-align:center; border-radius:22px; }
.az-fb.right { background:var(--minze); color:#2B2145; padding:14px; font-size:26px; }
.az-fb.wrong { background:var(--aprikose); color:#2B2145; padding:14px; font-size:20px; }
.az-fb p { margin:6px 0; }
.az-tip { font-size:17px; }
.az-speak { display:block; margin:6px auto; min-height:52px; font-size:18px; font-weight:700; }
.az-opts { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.az-opt { min-height:72px; font-size:30px; font-weight:700; font-family:"Bricolage Grotesque",sans-serif; background:var(--karte); border-radius:22px; box-shadow:0 3px 0 var(--flieder); }
.az-opt.right { background:var(--minze); color:#2B2145; }
.az-opt.wrong { background:#F7B6B0; color:#2B2145; }
.az-opt:disabled { opacity:1; }
.az-word { text-align:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:52px; background:var(--butter); color:#2B2145; border-radius:28px; padding:22px 10px; margin:10px 0 6px; }
.az-word.hidden { background:var(--flieder); color:transparent; text-shadow:none; user-select:none; }
.az-word.hidden::after { content:"?"; color:var(--text); }
.az-bar { height:12px; border-radius:6px; background:var(--flieder); overflow:hidden; margin:4px 0; }
.az-bar span { display:block; height:100%; width:100%; background:var(--rose); }
@keyframes az-count { from { width:100%; } to { width:0; } }
.az-msg { text-align:center; margin:6px 0; }
.az-form { margin-top:6px; }
.az-form.wait { opacity:.35; pointer-events:none; }
input.az-input { width:100%; box-sizing:border-box; min-height:64px; font-size:30px; text-align:center; border-radius:20px; border:3px solid var(--flieder); background:var(--karte); margin-bottom:12px; }
.row.center { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.az-sum { text-align:center; padding-top:30px; }
.az-stars { font-size:72px; letter-spacing:6px; color:var(--flieder); }
.az-stars .on { color:#F2B705; text-shadow:0 2px 0 #2B2145; }
.az-big { font-size:24px; font-weight:700; margin:6px 0 20px; }
.az-moon { font-size:84px; }
.az-top-lock { position:fixed; left:16px; top:calc(env(safe-area-inset-top) + 12px); }
@media (prefers-reduced-motion: reduce) { .az-bar span { animation:none !important; } }

/* Große Lern-Uhr */
.bc-panel { text-align:center; width:min(100%,440px); }
.bigclock { width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.bc-digital { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:44px; line-height:1.1; margin-top:6px; }
.bc-words { font-size:22px; font-weight:700; margin-bottom:8px; }
.bc-legend { list-style:none; margin:8px 0 12px; padding:0; text-align:left; font-size:16px; display:flex; flex-direction:column; gap:6px; }
.bc-legend i { display:inline-block; width:22px; height:8px; border-radius:4px; margin-right:10px; vertical-align:middle; }
.bc-legend .k1 { background:#2B2145; height:11px; } .bc-legend .k2 { background:#E0708C; } .bc-legend .k3 { background:#2F7FD6; height:4px; }
.bc-legend .k4 { background:transparent; width:auto; height:auto; color:#2F5DA8; font-weight:800; } .bc-legend .k4::before { content:"13"; }

/* Meintest du …? */
.choices { display:flex; flex-direction:column; gap:12px; }
.choice { min-height:68px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; background:var(--butter); color:#2B2145; border-radius:24px; box-shadow:0 3px 0 rgba(43,33,69,.18); }
.choice.typed { background:var(--flieder); color:var(--text); font-size:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:8px 16px; }
.choice.typed small { font:600 15px Figtree,sans-serif; opacity:.8; }

/* Lernpfad, Abzeichen, Schreibfeld */
.az-tile .az-prog { margin-top:4px; }
.az-prog { display:block; width:86%; height:10px; border-radius:6px; background:var(--flieder); overflow:hidden; }
.az-prog > span { display:block; height:100%; background:var(--minze); border-radius:6px; transition:width .5s; }
.az-medals { display:flex; align-items:center; gap:14px; width:100%; margin-top:16px; padding:14px 18px; border-radius:26px; background:var(--aprikose); color:#2B2145; text-align:left; box-shadow:0 4px 14px rgba(43,33,69,.12); }
.az-medal-ico { font-size:44px; line-height:1; }
.az-medal-txt { display:flex; flex-direction:column; } .az-medal-txt strong { font-family:"Bricolage Grotesque",sans-serif; font-size:22px; }
.az-lvs { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.az-lv { display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:10px 14px; border-radius:22px; background:var(--karte); text-align:left; box-shadow:0 2px 8px rgba(43,33,69,.1); }
.az-lv.here { background:var(--butter); color:#2B2145; box-shadow:0 0 0 4px var(--rose); }
.az-lv.locked { opacity:.55; }
.az-lv-ico { font-size:34px; width:48px; text-align:center; flex:none; }
.az-lv-txt { display:flex; flex-direction:column; flex:1; min-width:0; } .az-lv-txt strong { font-size:18px; } .az-lv-txt small { opacity:.8; }
.az-go { font-weight:800; font-size:18px; }
.az-starrow { display:inline-flex; gap:1px; font-size:22px; color:var(--flieder); } .az-starrow .on { color:#F2B705; text-shadow:0 1px 0 #2B2145; }
.az-lvname { text-align:center; font-weight:700; margin:2px 0 4px; opacity:.8; }
.az-unlock { background:var(--minze); color:#2B2145; border-radius:22px; padding:12px 16px; margin:10px 0; display:flex; flex-direction:column; gap:2px; font-size:18px; }
.az-unlock strong { font-size:22px; }
.az-try { background:var(--flieder); border-radius:20px; padding:12px 16px; margin:10px 0; }
.az-switch { display:block; margin:14px auto 0; min-height:52px; font-size:17px; font-weight:700; }
.badges { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
.badge { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; background:var(--karte); border-radius:24px; padding:14px 8px; box-shadow:0 2px 8px rgba(43,33,69,.1); }
.badge strong { font-family:"Bricolage Grotesque",sans-serif; font-size:17px; line-height:1.15; } .badge small { font-size:13px; opacity:.8; line-height:1.25; }
.badge.locked { opacity:.55; filter:grayscale(.7); }
.bshape { display:flex; align-items:center; justify-content:center; width:84px; height:84px; font-size:44px; border:4px solid #2B2145; box-shadow:0 3px 0 rgba(43,33,69,.25); }
.bs-arch { border-radius:999px 999px 18px 18px; } .bs-circle { border-radius:50%; } .bs-leaf { border-radius:60% 6px 60% 6px; } .bs-soft { border-radius:30%; }
.t-himmel { background:var(--himmel); } .t-butter { background:var(--butter); } .t-rose { background:var(--rose); } .t-minze { background:var(--minze); } .t-aprikose { background:var(--aprikose); } .t-flieder { background:var(--flieder); }
.badge.big { padding:16px 12px; margin:8px auto; max-width:260px; animation:pop .5s cubic-bezier(.2,1.4,.4,1); } .badge.big .bshape { width:120px; height:120px; font-size:62px; } .badge.big strong { font-size:24px; }
.newbadges h2 { margin:14px 0 0; }
.az-sum { position:relative; }
.confetti { position:absolute; inset:0 0 auto 0; height:0; pointer-events:none; z-index:5; }
.confetti i { position:absolute; top:-10px; width:11px; height:16px; border-radius:3px; animation:fall 2.6s ease-in forwards; }
@keyframes fall { 0% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translateY(520px) rotate(540deg); opacity:0; } }
.az-stars.big { font-size:72px; letter-spacing:6px; display:block; }
.az-stars span { color:var(--flieder); } .az-stars .on { color:#F2B705; text-shadow:0 2px 0 #2B2145; }
.pad { margin:8px 0; }
.pad-canvas { display:block; width:100%; height:200px; border-radius:24px; border:3px solid var(--flieder); touch-action:none; -webkit-user-select:none; user-select:none; background:#FFF9E3; }
.pad.locked .pad-canvas { opacity:.7; }
.pad-reads { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:4px; }
.pad-read { min-height:44px; display:flex; align-items:center; justify-content:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; border-radius:14px; }
.pad-read.on::after { content:" ✕"; font-size:16px; opacity:.5; margin-left:4px; }
.pad-read.bad { color:#C0506E; }
@media (prefers-reduced-motion: reduce) { .confetti i, .badge.big { animation:none; } }
.az-top .az-back { padding:8px 12px; font-size:16px; }
.az-top .az-chip { font-size:15px; padding:6px 10px; }
.az-top .lock { min-width:40px; padding:6px; }

/* Adventskalender */
.advent-card { display:flex; align-items:center; gap:14px; width:100%; margin:12px 0; padding:10px 16px 10px 10px; border-radius:26px; text-align:left; color:#FFF6E0; background:linear-gradient(135deg,#4A3C9A,#8B79E0); box-shadow:0 4px 14px rgba(43,33,69,.25); min-height:92px; }
.advent-card img { width:72px; height:72px; border-radius:20px; flex:none; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.advent-card.wide { margin-top:22px; }
.advent-txt { display:flex; flex-direction:column; } .advent-txt strong { font-family:"Bricolage Grotesque",sans-serif; font-size:24px; } .advent-txt small { font-size:17px; font-weight:700; color:#FFE79A; }
.snow { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.snow i { position:absolute; top:-30px; color:#fff; opacity:.8; font-style:normal; animation:snowfall linear infinite; }
@keyframes snowfall { from { transform:translateY(-30px) rotate(0); } to { transform:translateY(105vh) rotate(360deg); } }
.advent-msg:empty { display:none; }
.advent-msg { text-align:center; font-weight:700; background:var(--butter); color:#2B2145; border-radius:18px; padding:0; margin:8px 0; }
.advent-msg:not(:empty) { padding:10px 14px; } .advent-msg.pop { animation:pop .35s cubic-bezier(.2,1.4,.4,1); }
.advent-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:8px 0; position:relative; z-index:2; }
.door { position:relative; aspect-ratio:1; min-width:0; min-height:0; padding:0; display:flex; align-items:center; justify-content:center; border:3px solid #2B2145; font-family:"Bricolage Grotesque",sans-serif; color:#2B2145; box-shadow:0 3px 0 rgba(43,33,69,.25); }
.door .door-n { font-weight:800; font-size:26px; }
.door.s0 { border-radius:30%; } .door.s1 { border-radius:999px 999px 14px 14px; } .door.s2 { border-radius:50%; } .door.s3 { border-radius:60% 8px 60% 8px; }
.door.d0 { background:var(--rose); } .door.d1 { background:var(--minze); } .door.d2 { background:var(--himmel); } .door.d3 { background:var(--aprikose); } .door.d4 { background:var(--flieder); }
.door.zu { filter:saturate(.55); opacity:.85; } .door.zu .door-n { opacity:.7; }
.door-lock { position:absolute; right:-4px; bottom:-6px; font-size:16px; }
.door-star { position:absolute; top:-8px; right:-4px; font-size:24px; color:#F2B705; text-shadow:0 1px 0 #2B2145; }
.door.offen, .door.heard { background:radial-gradient(circle,#FFF3B8,#FFC95C); }
.door.today { box-shadow:0 0 0 5px #fff, 0 0 0 8px var(--rose); animation:glowpulse 1.8s ease-in-out infinite; }
@keyframes glowpulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
.door.shake { animation:shake .45s; } @keyframes shake { 20% { transform:translateX(-5px) rotate(-4deg); } 40% { transform:translateX(5px) rotate(4deg); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }
.advent-foot { text-align:center; }
html.night .advent-card { box-shadow:none; }
@media (prefers-reduced-motion: reduce) { .snow i, .door.today, .door.shake, .advent-msg.pop { animation:none; } }

/* Weihnachtszauber */
body.advent-on { background:transparent; color:#FFF6E0; }
body.advent-on #app { position:relative; z-index:2; }
body.advent-on h1 { color:#fff; text-shadow:0 2px 8px rgba(10,10,60,.6); }
body.advent-on .hint { color:#FFF6E0; text-shadow:0 1px 6px rgba(10,10,60,.7); }
body.advent-on .tabs { background:rgba(255,255,255,.94); }
.z-chip { display:inline-block; margin:4px 0 8px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,229,154,.7); color:#FFE59A; font-weight:700; font-size:15px; backdrop-filter:blur(4px); }
.z-root { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.z-bg { position:absolute; inset:0; background:linear-gradient(#0B1544 0%,#1F2370 38%,#5A3FA0 66%,#C86FA8 88%,#F2A9B8 100%); }
.z-star { position:absolute; border-radius:50%; background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.8); animation:ztw 3s ease-in-out infinite; }
@keyframes ztw { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.25; transform:scale(.6); } }
.z-aurora { position:absolute; left:-20%; right:-20%; top:8%; height:34%; background:linear-gradient(100deg,transparent 8%,rgba(90,255,190,.28) 28%,rgba(160,120,255,.3) 55%,rgba(255,120,200,.25) 78%,transparent 95%); filter:blur(24px); transform:skewY(-5deg); animation:zaur 9s ease-in-out infinite alternate; }
@keyframes zaur { from { transform:skewY(-5deg) translateX(-4%); opacity:.7; } to { transform:skewY(-2deg) translateX(5%); opacity:1; } }
.z-hills { position:absolute; left:0; right:0; bottom:0; height:46vh; }
.z-hills svg { display:block; }
.z-win { animation:ztw 2.6s ease-in-out infinite; }
.z-snow { position:absolute; inset:0; width:100%; height:100%; }
.z-actors { position:fixed; inset:0; z-index:35; pointer-events:none; overflow:hidden; }
.z-actor { position:absolute; left:0; top:0; background:transparent; border:0; padding:0; min-width:0; min-height:0; border-radius:12px; pointer-events:auto; line-height:0; }
.z-santa svg { display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); animation:zbob 1.4s ease-in-out infinite; }
.z-santa.flip svg { transform:scaleX(-1); }
@keyframes zbob { 0%,100% { transform:rotate(-1.5deg) translateY(0); } 50% { transform:rotate(1.5deg) translateY(-5px); } }
.z-santa.flip svg { animation:none; }
.z-santa.flip .z-ck svg { display:block; filter:drop-shadow(0 0 12px rgba(255,229,154,.9)); animation:zbob 2.4s ease-in-out infinite; }
.z-glow { position:absolute; left:50%; top:-6px; width:60px; height:20px; margin-left:-30px; border-radius:50%; box-shadow:0 0 22px 8px rgba(255,229,154,.65); pointer-events:none; }
.z-shoot { font-size:30px; line-height:1; filter:drop-shadow(0 0 8px #FFE59A); }
.z-shoot span { position:absolute; left:100%; bottom:-36px; width:150px; height:3px; transform-origin:0 50%; transform:rotate(-30deg) translateX(0); background:linear-gradient(90deg,#FFE59A,transparent); border-radius:2px; }
.z-elf.flip .in { display:block; transform:scaleX(-1); }
.z-elf .in { display:block; }
.z-elf svg { display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.z-elf .legL, .z-elf .legR { transform-box:fill-box; transform-origin:50% 0; animation:zleg .5s ease-in-out infinite alternate; }
.z-elf .legR { animation-direction:alternate-reverse; }
@keyframes zleg { from { transform:rotate(-24deg); } to { transform:rotate(24deg); } }
.z-elf .in.hop { animation:zhop .7s ease-out; } .z-elf.flip .in.hop { animation:zhopf .7s ease-out; }
@keyframes zhop { 0%,100% { transform:translateY(0); } 25% { transform:translateY(-26px) rotate(-8deg); } 55% { transform:translateY(0); } 75% { transform:translateY(-12px) rotate(6deg); } }
@keyframes zhopf { 0%,100% { transform:scaleX(-1) translateY(0); } 25% { transform:scaleX(-1) translateY(-26px) rotate(-8deg); } 55% { transform:scaleX(-1) translateY(0); } 75% { transform:scaleX(-1) translateY(-12px) rotate(6deg); } }
.z-moon { position:absolute; right:14px; top:68px; width:46px; height:46px; min-width:0; min-height:0; padding:0; border-radius:50%; border:0; background:radial-gradient(circle at 35% 30%,#FFFDF0,#FFF1B8 60%,#F5D97A); box-shadow:0 0 28px 8px rgba(255,246,208,.5); pointer-events:auto; transition:transform .3s; }
.z-moon::before, .z-moon::after { content:""; position:absolute; top:18px; width:8px; height:4px; border-bottom:2.5px solid #7A5A1F; border-radius:0 0 8px 8px; opacity:0; }
.z-moon::before { left:10px; } .z-moon::after { right:10px; }
.z-moon.happy { transform:scale(1.15) rotate(-8deg); } .z-moon.happy::before, .z-moon.happy::after { opacity:1; }
.z-man { position:absolute; right:8px; bottom:0; min-width:0; min-height:0; padding:0; border:0; background:transparent; pointer-events:auto; line-height:0; }
.z-man svg { display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.z-man .hat { transform-box:fill-box; transform-origin:50% 100%; }
.z-man.wave .hat { animation:zhat .9s ease-out; } @keyframes zhat { 0%,100% { transform:translateY(0) rotate(0); } 30% { transform:translateY(-14px) rotate(-14deg); } 60% { transform:translateY(-4px) rotate(6deg); } }
.z-bubble { position:absolute; max-width:150px; padding:8px 12px; border-radius:16px 16px 16px 4px; background:#fff; color:#2B2145; font:700 14px/1.25 Figtree,sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.3); pointer-events:none; z-index:5; }
.z-spark { position:absolute; font-style:normal; font-size:16px; pointer-events:none; line-height:1; }
.z-motion { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 84px); pointer-events:auto; padding:10px 18px; min-height:48px; border-radius:999px; background:rgba(255,255,255,.95); color:#2B2145; font-weight:700; font-size:16px; box-shadow:0 0 18px 4px rgba(255,229,154,.6); animation:zpulse 2s ease-in-out infinite; }
@keyframes zpulse { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .z-star, .z-aurora, .z-win, .z-santa svg, .z-ck svg, .z-motion { animation:none !important; } }
body.advent-on .tabs { color:#2B2145; }
body.advent-on .hint { padding-right:62px; }
body.advent-on .advent-foot { padding-right:0; }
.z-motion { white-space:nowrap; font-size:15px; padding:8px 16px; min-height:44px; }

/* Aufräumen: Zauber bleibt über der unteren Leiste, nichts darf drüberlaufen */
body.advent-on .tabs { z-index:40; background:#fff; }
.z-actors { inset:0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0; }
.z-elf { bottom:2px; top:auto; }
.z-man { bottom:0; }
.z-motion { bottom:86px; }
body.advent-on { padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 90px); }

/* Wichtel und Schneemann stehen auf dem Schnee, nicht auf der Leiste */
.z-elf { bottom:30px; }
.z-man { bottom:14px; }
.z-motion { bottom:100px; }

/* Türchen-Öffnen, Blinzeln, Klang-Schalter */
.z-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.z-bell { min-width:44px; min-height:44px; padding:0; border-radius:50%; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,229,154,.7); font-size:22px; color:#fff; }
.dfx { position:fixed; inset:0; z-index:48; background:rgba(8,8,50,.72); perspective:800px; }
.dfx-door, .dfx-rays { position:fixed; transform-origin:50% 50%; }
.dfx-door { perspective:700px; }
.dfx-in { position:absolute; inset:0; background:radial-gradient(circle,#FFF6C4,#FFB52B); display:flex; align-items:center; justify-content:center; overflow:visible; }
.dfx-n { font-size:56px; color:#2B2145; font-weight:800; }
.dfx-star { position:absolute; font-size:44px; filter:drop-shadow(0 0 12px #FFE59A); opacity:0; }
.dfx-leaf { position:absolute; inset:0; border:3px solid #2B2145; transform-origin:0 50%; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center; font-size:56px; color:#2B2145; box-shadow:0 3px 0 rgba(43,33,69,.3); }
.dfx-leaf .num { font-size:56px; }
.dfx-rays { width:520px; height:520px; margin:0; pointer-events:none; opacity:0; background:repeating-conic-gradient(from 0deg,rgba(255,229,154,.55) 0 8deg,transparent 8deg 24deg); border-radius:50%; -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 70%); mask-image:radial-gradient(circle,#000 10%,transparent 70%); }
.dfx-sp { position:fixed; font-style:normal; font-size:20px; pointer-events:none; line-height:1; }
.eye { transform-box:fill-box; transform-origin:50% 50%; animation:zblink 4.8s infinite; }
@keyframes zblink { 0%,91%,100% { transform:scaleY(1); } 94% { transform:scaleY(.08); } }
.ear { transform-box:fill-box; transform-origin:100% 100%; animation:zear 3.2s ease-in-out infinite; }
@keyframes zear { 0%,80%,100% { transform:rotate(0); } 88% { transform:rotate(-16deg); } 94% { transform:rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .eye, .ear { animation:none !important; } }

/* Hinweise und Sperre */
#hinweise { position:sticky; top:env(safe-area-inset-top); z-index:44; margin:0 -16px; padding:0 12px; }
#hinweise:empty { display:none; }
.hin-card { display:flex; gap:12px; align-items:flex-start; margin:8px 0; padding:12px 14px 12px 12px; padding-right:62px; border-radius:24px; background:linear-gradient(135deg,#FFD9A8,#FFC48C); color:#2B2145; border:3px solid #2B2145; box-shadow:0 6px 16px rgba(43,33,69,.3); animation:pop .5s cubic-bezier(.2,1.4,.4,1); }
.hin-ico { font-size:42px; line-height:1; flex:none; }
.hin-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.hin-titel { font-family:"Bricolage Grotesque",sans-serif; font-size:21px; line-height:1.15; }
.hin-text { font-size:16px; line-height:1.3; }
.hin-text:empty { display:none; }
.hin-ok { align-self:flex-start; margin-top:6px; min-height:52px; padding:8px 18px; border-radius:18px; background:var(--minze); color:#2B2145; font-size:18px; font-weight:800; border:2.5px solid #2B2145; }
.hin-ok span { font-size:22px; margin-right:4px; }
.hin-mehr { opacity:.8; font-weight:700; } .hin-mehr:empty { display:none; }
#sperre { position:fixed; inset:0; z-index:70; background:linear-gradient(#0B1544,#1F2370 45%,#5A3FA0 80%,#C86FA8); color:#FFF6E0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; overflow:hidden; }
#sperre[hidden] { display:none !important; }
.sp-sterne i { position:absolute; font-style:normal; color:#fff; opacity:.85; animation:ztw 3s ease-in-out infinite; }
.sp-lock { position:absolute; left:16px; top:calc(env(safe-area-inset-top) + 12px); background:rgba(255,255,255,.18); }
.sp-mitte { position:relative; z-index:2; max-width:340px; }
.sp-mond { font-size:110px; line-height:1; filter:drop-shadow(0 0 24px rgba(255,246,208,.7)); animation:zbob 4s ease-in-out infinite; }
.sp-mitte h1 { color:#fff; font-size:34px; margin:10px 0 6px; } .sp-mitte p { font-size:20px; margin:6px 0; } .sp-klein { opacity:.8; font-size:17px !important; }
body.gesperrt { overflow:hidden; }
.chk { display:flex; align-items:center; gap:10px; min-height:44px; } .chk input { width:24px; height:24px; flex:none; }
.item.col { flex-direction:column; align-items:stretch; }
.item .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
input[type=time], input[type=date] { min-height:44px; border-radius:12px; border:2px solid var(--flieder); background:var(--karte); padding:4px 8px; font:inherit; }
@media (prefers-reduced-motion: reduce) { .hin-card, .sp-mond, .sp-sterne i { animation:none; } }

/* Sprechfunk */
#funk-overlay { position:fixed; inset:0; z-index:80; background:linear-gradient(#FFE9C7,#FFC48C); display:flex; align-items:flex-start; justify-content:center; padding:calc(env(safe-area-inset-top) + 16px) 16px 24px; overflow:auto; }
#funk-overlay[hidden], #funk-toast[hidden] { display:none !important; }
body.funk-offen { overflow:hidden; }
.fk-card { width:min(100%,420px); display:flex; flex-direction:column; gap:12px; text-align:center; color:#2B2145; }
.fk-card h1 { color:#2B2145; font-size:26px; margin:0; } .fk-card h2 { font-size:20px; margin:4px 0; color:#2B2145; }
.fk-ico { font-size:72px; line-height:1; animation:pop .6s cubic-bezier(.2,1.4,.4,1); }
.fk-big { min-height:68px; border-radius:24px; font-size:22px; font-weight:800; padding:10px 18px; border:3px solid #2B2145; color:#2B2145; box-shadow:0 4px 0 rgba(43,33,69,.3); width:100%; }
.fk-big span { font-size:26px; margin-right:6px; }
.fk-hoer { background:var(--himmel); } .fk-ok { background:var(--minze); } .fk-start { background:var(--rose); } .fk-stop { background:#F0746B; color:#fff; border-color:#2B2145; } .fk-send { background:var(--minze); }
.fk-mid { min-height:52px; font-size:18px; font-weight:700; border-radius:18px; background:var(--flieder); color:#2B2145; padding:6px 16px; }
.fk-zaehler, .fk-hint, .fk-dauer { margin:0; font-weight:700; } .fk-zaehler:empty, .fk-hint:empty { display:none; }
.fk-antwort { margin-top:8px; padding:12px; border-radius:22px; background:rgba(255,255,255,.55); }
.fk-rec { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.fk-pulse { width:46px; height:46px; margin:0 auto; border-radius:50%; background:#F0746B; animation:fkpulse 1s ease-in-out infinite; }
@keyframes fkpulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(240,116,107,.6); } 50% { transform:scale(1.15); box-shadow:0 0 0 14px rgba(240,116,107,0); } }
.fk-zeit { font-variant-numeric:tabular-nums; margin-left:6px; }
.fk-status { font-weight:700; text-align:center; } .fk-msg { text-align:center; }
.fk-opt { display:flex; flex-direction:column; gap:4px; margin:10px 0; }
.fk-verlauf { display:flex; flex-direction:column; gap:8px; }
.fk-zeile { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background:var(--karte); }
.fk-zeile.nele { background:var(--minze); color:#2B2145; } .fk-z-zeit { font-weight:800; flex:none; } .fk-z-text { flex:1; }
.fk-code { margin:8px 0; padding:12px; border-radius:16px; background:var(--butter); color:#2B2145; display:flex; flex-direction:column; align-items:center; gap:4px; }
.fk-code strong { font-family:"Bricolage Grotesque",sans-serif; font-size:30px; letter-spacing:2px; }
#funk-toast { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 66px); z-index:75; }
.fk-toastbtn { width:100%; min-height:56px; border-radius:20px; background:var(--minze); color:#2B2145; font-weight:800; font-size:17px; border:3px solid #2B2145; box-shadow:0 6px 16px rgba(43,33,69,.3); }
.funk-card { display:flex; align-items:center; gap:14px; width:100%; margin-top:16px; padding:10px 16px; border-radius:26px; text-align:left; background:var(--minze); color:#2B2145; min-height:88px; box-shadow:0 4px 14px rgba(43,33,69,.2); }
.funk-ico { font-size:44px; }
@media (prefers-reduced-motion: reduce) { .fk-pulse, .fk-ico { animation:none; } }

/* Gute-Nacht-Modus */
.nacht-label { display:flex; align-items:center; justify-content:center; gap:10px; }
.info-btn { min-width:36px; min-height:36px; width:36px; height:36px; padding:0; border-radius:50%; font-weight:800; font-style:italic; font-family:Georgia,serif; background:var(--himmel); color:#2B2145; border:2px solid #2B2145; }
.nacht-pick { display:flex; flex-direction:column; align-items:center; gap:6px; margin:6px 0; }
.nacht-pick input[type=range] { width:100%; accent-color:var(--text); }
.nacht-wert { font-family:"Bricolage Grotesque",sans-serif; font-size:24px; }
.nacht-start, .nacht-stop { min-height:52px; font-weight:800; }

.sp-btn { margin-top:10px; min-height:60px; padding:10px 22px; border-radius:22px; font-size:20px; font-weight:800; background:rgba(255,255,255,.92); color:#2B2145; border:3px solid #2B2145; }
.sp-pick { margin:10px 0; } .sp-pick .nacht-wert { color:#FFE59A; font-size:34px; }

/* Großes Hausaufgaben-Pop-up, Ziffernfeld */
#aufgabe-block { position:fixed; inset:0; z-index:65; background:linear-gradient(#FFE9C7,#FFC48C); display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top) + 16px) 16px 24px; overflow:auto; }
#aufgabe-block[hidden] { display:none !important; }
body.block-offen { overflow:hidden; }
.bl-karte { width:min(100%,420px); text-align:center; color:#2B2145; display:flex; flex-direction:column; align-items:center; gap:12px; }
.bl-karte h1 { color:#2B2145; font-size:30px; margin:0; } .bl-text { font-size:19px; margin:0; max-width:340px; }
.bl-ico { font-size:96px; line-height:1; animation:pop .6s cubic-bezier(.2,1.4,.4,1); } .bl-warte { animation:zbob 2.4s ease-in-out infinite; }
.bl-gross { width:100%; min-height:84px; border-radius:28px; background:var(--minze); color:#2B2145; font-size:24px; font-weight:800; border:3px solid #2B2145; box-shadow:0 5px 0 rgba(43,33,69,.3); margin-top:6px; }
.bl-klein { min-height:52px; border-radius:18px; background:rgba(255,255,255,.7); color:#2B2145; font-size:17px; font-weight:700; border:2px solid #2B2145; padding:6px 16px; }
.bl-reihe { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; } .bl-hilfe { font-weight:700; margin:0; } .bl-hilfe:empty { display:none; }
.pin-punkte { display:flex; gap:12px; justify-content:center; min-height:26px; } .pin-punkte span { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.7); border:3px solid #2B2145; transition:background .15s, transform .15s; } .pin-punkte span.an { background:#2B2145; transform:scale(1.15); }
.pin-msg { min-height:24px; margin:0; font-weight:700; color:#B23A3A; }
.pin-pad { display:grid; grid-template-columns:repeat(3,84px); gap:14px; justify-content:center; }
.pin-pad.wackel { animation:shake .45s; }
.pin-key { width:84px; height:84px; min-width:0; padding:0; border-radius:50%; font-family:"Bricolage Grotesque",sans-serif; font-size:36px; font-weight:800; color:#2B2145; border:3px solid #2B2145; box-shadow:0 5px 0 rgba(43,33,69,.3); }
.pin-key:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(43,33,69,.3); }
.hin-meldung { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 70px); z-index:90; padding:14px; border-radius:20px; background:var(--minze); color:#2B2145; font-weight:800; text-align:center; border:3px solid #2B2145; box-shadow:0 6px 16px rgba(43,33,69,.3); animation:pop .4s cubic-bezier(.2,1.4,.4,1); }
/* Sprechfunk: Text, Gespräch, „nimmt auf …“ */
#funk-live { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 8px); z-index:79; padding:12px 16px; border-radius:20px; background:#2B2145; color:#fff; display:flex; align-items:center; gap:12px; font-size:20px; box-shadow:0 6px 16px rgba(0,0,0,.4); }
#funk-live[hidden] { display:none !important; }
.fk-rec-punkt { width:18px; height:18px; border-radius:50%; background:#FF4B4B; animation:fkblink 1s steps(2,jump-none) infinite; flex:none; } @keyframes fkblink { 0% { opacity:1; } 50% { opacity:.15; } }
.fk-text { font-size:26px; font-weight:700; margin:0; padding:14px; border-radius:20px; background:rgba(255,255,255,.65); word-break:break-word; }
.fk-antw { background:var(--butter); }
#funk-chatbtn { position:fixed; right:12px; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); z-index:60; min-height:60px; padding:10px 18px; border-radius:30px; background:var(--butter); color:#2B2145; font-size:19px; font-weight:800; border:3px solid #2B2145; box-shadow:0 6px 16px rgba(43,33,69,.35); animation:zpulse2 2.2s ease-in-out infinite; }
#funk-chatbtn[hidden], #funk-chat[hidden], #funk-live[hidden] { display:none !important; }
@keyframes zpulse2 { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
#funk-chat { position:fixed; inset:0; z-index:78; background:linear-gradient(#EFEAF8,#D9CEF2); overflow:auto; padding:calc(env(safe-area-inset-top) + 12px) 12px 24px; display:flex; justify-content:center; }
.fk-chat-karte { width:min(100%,440px); display:flex; flex-direction:column; gap:10px; color:#2B2145; }
.fk-chat-kopf { display:flex; align-items:center; gap:10px; } .fk-chat-kopf h1 { margin:0; font-size:26px; flex:1; color:#2B2145; }
.fk-x { min-width:48px; min-height:48px; border-radius:50%; font-size:22px; font-weight:800; background:var(--text); color:var(--grund); }
.fk-liste { display:flex; flex-direction:column; gap:8px; max-height:34vh; overflow:auto; padding:4px; }
.fk-blase { max-width:86%; padding:10px 14px; border-radius:20px; display:flex; flex-direction:column; gap:2px; font-size:19px; word-break:break-word; } .fk-blase small { opacity:.7; font-weight:700; }
.fk-blase.du { align-self:flex-start; background:#fff; border-bottom-left-radius:6px; } .fk-blase.ich { align-self:flex-end; background:var(--minze); border-bottom-right-radius:6px; }
.fk-schnell { display:flex; flex-wrap:wrap; gap:8px; } .fk-chip { min-height:48px; padding:8px 14px; border-radius:24px; background:#fff; color:#2B2145; font-weight:700; border:2px solid #2B2145; }
.fk-eingabe { display:flex; gap:8px; } .fk-textfeld { flex:1; min-width:0; min-height:60px; font-size:22px; padding:8px 14px; border-radius:20px; border:3px solid var(--flieder); }
.fk-sendetext { min-height:60px; padding:8px 18px; border-radius:20px; font-size:20px; font-weight:800; background:var(--minze); color:#2B2145; border:3px solid #2B2145; }
.fk-oder { text-align:center; font-weight:700; opacity:.7; margin:2px 0; }
.fk-weg { min-height:48px; background:transparent; font-size:17px; font-weight:700; text-decoration:underline; color:inherit; }
.fk-toastkarte { padding:14px; border-radius:22px; background:#fff; color:#2B2145; border:3px solid #2B2145; box-shadow:0 6px 16px rgba(43,33,69,.35); display:flex; flex-direction:column; gap:10px; text-align:center; font-size:18px; }
.fk-zeile { flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce) { .fk-rec-punkt, #funk-chatbtn, .bl-warte, .bl-ico { animation:none; } }

/* Fernbedienung, Meine Woche, Pause */
.fern-card { background:var(--himmel); } .woche-card { background:var(--butter); }
.appicon.aus { opacity:.45; filter:grayscale(.6); }
#sperre.pause { background:linear-gradient(#FFE9C7,#FFC48C); color:#2B2145; } #sperre.pause h1 { color:#2B2145; } #sperre.pause .sp-mond { filter:none; }
.sp-gross { font-size:28px !important; font-weight:800; }
.fn-status { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:20px; background:var(--karte); margin:8px 0; }
.fn-aktual { margin:4px 0 10px; min-height:44px; }
.fn-karte { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:24px; background:var(--karte); box-shadow:0 2px 10px rgba(43,33,69,.1); }
.fn-reihe { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .fn-reihe > span { flex:1; font-weight:700; }
.fn-knopf { flex:1; min-height:68px; border-radius:22px; font-size:19px; font-weight:800; border:3px solid #2B2145; color:#2B2145; box-shadow:0 4px 0 rgba(43,33,69,.25); }
.fn-rot { background:#F7B6B0; } .fn-gruen { background:var(--minze); }
.fn-schalter { padding:6px 0; }
.fn-sektionen details { margin:10px 0; padding:8px 12px; border-radius:18px; background:var(--karte); } .fn-sektionen summary { min-height:48px; display:flex; align-items:center; cursor:pointer; font-size:18px; }
.fn-form { display:flex; flex-direction:column; gap:8px; } .fn-form input[type=text] { min-height:52px; font-size:18px; width:100%; box-sizing:border-box; }
.wo-tag { margin:12px 0; padding:12px 14px; border-radius:22px; background:var(--karte); } .wo-tag.heute { background:var(--butter); color:#2B2145; box-shadow:0 0 0 3px var(--rose); }
.wo-tag h2 { margin:0 0 6px; font-size:21px; } .wo-ferien { font-weight:600; opacity:.7; }
.wo-eintrag { display:flex; align-items:center; gap:12px; padding:6px 0; font-size:20px; } .wo-ico { font-size:34px; } .wo-zeit { font-weight:800; min-width:64px; } .wo-titel { font-weight:700; }
.wo-leer { margin:0; opacity:.7; }

/* Wochenübersicht, Stimmung, Push */
.uebersicht-card { background:var(--rose); }
.nele-reihe { display:flex; gap:12px; margin-top:14px; } .nele-karte { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border-radius:24px; min-height:96px; box-shadow:0 4px 14px rgba(43,33,69,.15); color:#2B2145; } .nele-karte span { font-size:38px; line-height:1; } .nele-karte strong { font-size:17px; }
.nele-karte.stimmung { background:var(--butter); } .nele-karte.hilfe { background:#F7B6B0; }
.gesichter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .gesicht { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:92px; padding:10px 8px; border-radius:22px; background:var(--karte); border:3px solid var(--flieder); } .gesicht span { font-size:46px; line-height:1; } .gesicht small { font-weight:700; }
.wu-kacheln { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:8px 0; } .wu-kachel { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:20px; background:var(--karte); text-align:center; } .wu-kachel strong { font-family:"Bricolage Grotesque",sans-serif; font-size:21px; } .wu-ico { font-size:30px; } .wu-kachel small { opacity:.75; }
.wu-balken { display:flex; align-items:flex-end; gap:6px; padding:10px 6px; border-radius:20px; background:var(--karte); min-height:150px; } .wu-sp { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; } .wu-b { width:100%; border-radius:8px 8px 3px 3px; } .wu-zahl { font-size:12px; font-weight:700; min-height:14px; } .wu-sp small { font-weight:700; opacity:.7; }
.wu-top { display:flex; flex-direction:column; gap:8px; } .wu-zeile { display:grid; grid-template-columns:1fr 1.1fr auto; gap:8px; align-items:center; padding:8px 12px; border-radius:16px; background:var(--karte); } .wu-lb { height:10px; border-radius:6px; background:var(--flieder); overflow:hidden; } .wu-lb i { display:block; height:100%; background:var(--minze); }
.wu-stimmung { display:flex; gap:4px; padding:10px 6px; border-radius:20px; background:var(--karte); } .wu-st { flex:1; display:flex; flex-direction:column; align-items:center; font-size:22px; line-height:1.2; text-align:center; } .wu-st small { font-size:12px; font-weight:700; opacity:.7; }
.fk-push { margin-top:14px; padding:12px; border-radius:18px; background:var(--karte); } .fk-push h3 { margin:0 0 6px; } .fk-push-kanal { font-size:15px !important; letter-spacing:0 !important; word-break:break-all; }

/* Familienregal */
.regal-card { background:var(--butter); }
.rg-liste, .rg-eltern-liste { display:flex; flex-direction:column; gap:10px; } .rg-karte { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:22px; background:var(--karte); text-align:left; min-height:72px; } .rg-ico { font-size:36px; }
.rg-lyrics { max-height:46vh; overflow-y:auto; padding:18px 12px; border-radius:24px; background:var(--karte); text-align:center; scroll-behavior:smooth; } .rg-zeile { font-size:22px; line-height:1.35; margin:10px 0; opacity:.45; transition:all .3s; } .rg-zeile.jetzt { opacity:1; font-size:26px; font-weight:800; color:#2B2145; background:linear-gradient(transparent 62%, var(--butter) 62%); }
.rg-gross { font-size:120px; text-align:center; margin:20px 0; }
.rg-steuer { margin-top:16px; display:flex; flex-direction:column; gap:12px; } .rg-reihe { display:flex; align-items:center; gap:12px; justify-content:center; } .rg-pos { flex:1; } .rg-play { width:84px; height:84px; border-radius:50%; font-size:34px; background:var(--rose); box-shadow:0 5px 16px rgba(43,33,69,.2); }
.rg-tempobox { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:20px; background:var(--karte); } .rg-tempo { flex:1; } .rg-tempobox span { font-size:30px; }
.rg-text { width:100%; box-sizing:border-box; font:inherit; font-size:17px; padding:12px; border-radius:16px; margin-top:10px; }
.rg-zeile-e { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:10px 14px; border-radius:16px; background:var(--karte); } .rg-zeile-e small { grid-column:1; opacity:.7; } .rg-weg { grid-row:1 / span 2; grid-column:2; font-size:22px; min-width:48px; min-height:48px; }
.rg-pos, .rg-tempo { accent-color:#9A7FD6; height:32px; }

/* Routinen */
.routinen-card { background:var(--minze); }
.rt-kopf { font-weight:800; font-size:20px; text-align:center; } .rt-liste { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.rt-karte { display:flex; align-items:center; gap:14px; padding:16px; border-radius:24px; background:var(--karte); min-height:84px; text-align:left; border:3px solid transparent; } .rt-karte.fertig { background:#DFF3EA; border-color:#7DCBB0; } .rt-ico { font-size:42px; } .rt-haken { margin-left:auto; font-size:38px; }
.rt-e-zeile { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 12px; border-radius:14px; background:var(--karte); margin-bottom:8px; } .rt-e-zeile small { grid-column:1; opacity:.7; } .rt-e-zeile button { grid-row:1 / span 2; grid-column:2; min-width:48px; min-height:48px; font-size:20px; }

/* Live-Funk */
.live-card { background:var(--himmel); }
#live { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(43,33,69,.82); padding:20px; } #live[hidden] { display:none; }
.lv-karte { width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 20px; border-radius:32px; background:linear-gradient(#FFF6E4,#F6D9E8); text-align:center; color:#2B2145; }
.lv-ico { font-size:72px; line-height:1; } .lv-puls { animation:lvpuls 1.4s ease-in-out infinite; } @keyframes lvpuls { 50% { transform:scale(1.15); } }
.lv-status { margin:0; font-weight:700; min-height:1.4em; }
.lv-gross { width:100%; min-height:72px; font-size:22px; font-weight:800; border-radius:24px; background:var(--butter); } .lv-ja { background:#8ED8B8; }
.lv-sprechen { width:100%; min-height:150px; font-size:26px; font-weight:800; border-radius:36px; background:#F7B6C8; border:4px solid #2B2145; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } .lv-sprechen.aktiv { background:#8ED8B8; transform:scale(.97); } .lv-sprechen.gesperrt, .lv-sprechen:disabled { background:#DDD6EC; opacity:.9; }
.lv-auflegen { min-height:52px; padding:0 26px; border-radius:26px; font-weight:800; background:#fff; border:3px solid #2B2145; }

.az-ueben { display:flex; align-items:center; gap:14px; width:100%; margin-top:12px; padding:14px 16px; border-radius:24px; background:var(--minze); text-align:left; min-height:76px; }
.chk { display:flex; align-items:center; gap:8px; min-height:44px; } .chk input { width:24px; height:24px; }

/* Klare Eltern-Einstellungen */
.fn-sek { background:var(--karte); border-radius:22px; margin:10px 0; padding:4px 14px; } .fn-sek > summary { display:flex; align-items:center; gap:12px; min-height:68px; cursor:pointer; list-style:none; } .fn-sek > summary::-webkit-details-marker { display:none; } .fn-sek > summary::after { content:'›'; margin-left:auto; font-size:28px; opacity:.5; transition:transform .2s; } .fn-sek[open] > summary::after { transform:rotate(90deg); }
.fn-sek-ico { font-size:32px; } .fn-sek-txt { display:flex; flex-direction:column; } .fn-sek-txt small { opacity:.7; font-weight:500; }
.ber-uebers { font-weight:800; padding:10px 12px; border-radius:14px; background:var(--butter); }
.ber-zeile { display:flex; align-items:center; gap:12px; min-height:60px; padding:6px 2px; border-bottom:1px solid rgba(43,33,69,.08); } .ber-text { flex:1; display:flex; flex-direction:column; } .ber-text small { opacity:.7; } .ber-zeile.klein strong { font-weight:600; }
.sw { appearance:none; -webkit-appearance:none; flex:none; width:58px; height:34px; border-radius:17px; background:#CFC7E0; position:relative; transition:background .2s; margin:0; } .sw::after { content:''; position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:left .2s; } .sw:checked { background:#5DBB94; } .sw:checked::after { left:27px; }
.ber-unter.aus { opacity:.4; pointer-events:none; } .ber-unter h3 { margin:16px 0 4px; font-size:16px; }

/* Live: Verbinden-Animation */
.lv-verbinde { display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 2px; } .lv-av { font-size:64px; line-height:1; animation:lvwippe 1.6s ease-in-out infinite; } .lv-av2 { animation-delay:.8s; }
.lv-welle { display:flex; gap:10px; align-items:center; } .lv-welle i { width:12px; height:12px; border-radius:50%; background:#E0708C; opacity:.25; animation:lvpunkt 1.4s ease-in-out infinite; } .lv-welle i:nth-child(2) { animation-delay:.18s; } .lv-welle i:nth-child(3) { animation-delay:.36s; background:#8ED8B8; } .lv-welle i:nth-child(4) { animation-delay:.54s; } .lv-welle i:nth-child(5) { animation-delay:.72s; }
@keyframes lvpunkt { 0%,100% { opacity:.2; transform:scale(.7); } 40% { opacity:1; transform:scale(1.35); } } @keyframes lvwippe { 50% { transform:translateY(-6px) rotate(-4deg); } }
.lv-diag { opacity:.65; font-size:12px; }

/* ===== Überarbeitung: Kacheln, Bild-Karten, Timer, Stimmung ===== */
.kachel-raster { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.kachel { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px 14px; border-radius:26px; background:var(--karte); color:#2B2145; text-align:center; box-shadow:0 4px 14px rgba(43,33,69,.16); min-height:150px; } .kachel img { width:84px; height:84px; border-radius:22px; box-shadow:0 3px 8px rgba(43,33,69,.2); } .kachel strong { font-size:17px; line-height:1.15; } .kachel small { opacity:.7; font-size:13px; line-height:1.2; }
.kachel:active, .bild-karte:active { transform:scale(.97); }
.bild-karte { background:var(--butter); } .bild-karte .bk-img { width:72px; height:72px; border-radius:20px; flex:none; box-shadow:0 3px 8px rgba(43,33,69,.2); }
/* Schreib-Timer: klein neben der Uhr */
#funk-chatbtn { top:calc(env(safe-area-inset-top) + 14px); bottom:auto; right:68px; min-height:34px; padding:2px 12px; border-radius:17px; font-size:15px; border-width:2px; box-shadow:0 2px 6px rgba(43,33,69,.2); animation:none; }
/* Stimmung */
.gesichter { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } .gesicht { min-width:0; padding:8px 2px; border-radius:18px; border:3px solid transparent; } .gesicht span { font-size:34px; } .gesicht small { font-size:11px; font-weight:700; } .gesicht.on { border-color:#2B2145; background:var(--butter); transform:scale(1.06); }
.st-text { width:100%; box-sizing:border-box; margin-top:12px; font:inherit; font-size:17px; padding:10px 12px; border-radius:16px; border:3px solid var(--flieder); } .st-senden { width:100%; margin-top:10px; min-height:56px; font-size:20px; } .st-tuer { font-size:72px; text-align:center; } .st-dank { font-size:19px; text-align:center; }
/* Sperrtext groß */
.sp-nachricht { font-size:28px !important; font-weight:800; line-height:1.25; max-width:22ch; margin:10px auto !important; }
/* Fernbedienung */
.fn-label { display:flex; flex-direction:column; gap:2px; font-weight:800; font-size:18px; } .fn-label small { font-weight:500; opacity:.7; font-size:14px; }
.fn-nachricht { width:100%; box-sizing:border-box; font:inherit; font-size:22px; font-weight:700; padding:14px; border-radius:20px; border:4px solid var(--flieder); min-height:104px; margin:6px 0 10px; resize:vertical; }
.fn-klein { margin:10px 0 4px; font-weight:700; } .fn-kat { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .fn-kat.aus { opacity:.45; pointer-events:none; }
.fn-sw-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.fn-knopf.fn-rot { background:#F7B6B0; }
.chip { min-height:44px; padding:0 14px; border-radius:22px; background:var(--karte); border:3px solid transparent; font-weight:700; } .chip.on { border-color:#2B2145; background:var(--butter); }
/* Sprechen-Zentrale */
.zt-tafeln { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 14px; }
.zt-tafel { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px 12px; border-radius:24px; background:var(--karte); border:4px solid transparent; color:#2B2145; box-shadow:0 3px 10px rgba(43,33,69,.14); } .zt-tafel img { width:64px; height:64px; border-radius:18px; } .zt-tafel strong { font-size:15px; } .zt-tafel small { font-size:12px; opacity:.7; } .zt-tafel.on { border-color:#2B2145; background:var(--butter); }
.zt-flaeche { display:flex; flex-direction:column; gap:12px; }
.fk-gross-feld { width:100%; box-sizing:border-box; font:inherit; font-size:22px; padding:14px; border-radius:22px; border:4px solid var(--flieder); min-height:120px; resize:vertical; }
.fk-eingabe.unter { flex-direction:column; }
.fk-big.fk-send { background:var(--minze); display:flex; align-items:center; justify-content:center; gap:10px; min-height:76px; font-size:24px; }
.fk-svg { display:inline-flex; width:34px; height:34px; } .fk-svg svg { width:100%; height:100%; }
.fk-zweit { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.fk-mittel { display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; border-radius:20px; background:var(--karte); border:3px solid #2B2145; font-size:16px; font-weight:800; color:#2B2145; } .fk-mittel .fk-svg { width:28px; height:28px; } .fk-mittel.fk-weg { text-decoration:none; background:var(--karte); }
.fk-punkte { display:inline-flex; gap:4px; margin-right:8px; } .fk-punkte i { width:9px; height:9px; border-radius:50%; background:#2B2145; animation:lvpunkt 1.2s infinite; } .fk-punkte i:nth-child(2) { animation-delay:.2s; } .fk-punkte i:nth-child(3) { animation-delay:.4s; }
/* Aufgabe schicken */
.ik-raster { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:8px 0; } .ik { font-size:26px; min-height:44px; border-radius:14px; background:var(--karte); border:3px solid transparent; padding:0; } .ik.on { border-color:#2B2145; background:var(--butter); }
.rt-karte.auftrag { border-color:var(--rose); }
/* Große Uhr: Legende sauber ausgerichtet */
.bc-legend { display:flex; flex-direction:column; gap:8px; } .bc-legend li { display:grid; grid-template-columns:46px 1fr; align-items:center; column-gap:12px; line-height:1.25; }
.bc-legend i { justify-self:center; margin:0; width:34px; }
.bc-legend .k4 { width:auto; height:auto; font-size:20px; justify-self:center; }
#sperre.pause .sp-nachricht { background:#fff; border-radius:24px; padding:16px 18px; box-shadow:0 4px 14px rgba(43,33,69,.15); }

/* Gezeichnete Bilder und Bewegung */
.ti { width:100%; height:100%; display:block; overflow:visible; } .ti path, .ti rect, .ti circle, .ti ellipse { stroke:#2B2145; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.ti [stroke-width="0"] { stroke:none; }
.bild { display:inline-flex; align-items:center; justify-content:center; } .bild.rt-ico { width:56px; height:56px; font-size:42px; flex:none; } .bild.klein { width:36px; height:36px; font-size:26px; } .bild.gross { width:150px; height:150px; font-size:110px; } .bild .ti { width:100%; height:100%; }
.ik-svg { grid-template-columns:repeat(5,1fr); } .ik-svg .ik { min-height:54px; padding:3px; } .rt-e-titel { display:inline-flex; align-items:center; gap:6px; }
.an-wippe, .an-huepf, .an-huepf2, .an-puls, .an-dampf { transform-box:fill-box; transform-origin:center; }
.an-wippe { animation:anWippe 2.4s ease-in-out infinite; } .an-huepf { animation:anHuepf 1.6s ease-in-out infinite; } .an-huepf2 { animation:anHuepf 1.6s ease-in-out .5s infinite; } .an-puls { animation:anPuls 2.2s ease-in-out infinite; } .an-dampf { animation:anDampf 2.4s ease-in infinite; fill:none; }
@keyframes anWippe { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } } @keyframes anHuepf { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } } @keyframes anPuls { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } } @keyframes anDampf { 0% { opacity:0; transform:translateY(8px); } 40% { opacity:1; } 100% { opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .an-wippe, .an-huepf, .an-huepf2, .an-puls, .an-dampf { animation:none; } }

/* Schnell-Knöpfe, Essen, Gute Nacht */
.schnell-reihe { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; } .schnell { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 8px 12px; border-radius:26px; color:#2B2145; text-align:center; border:4px solid #2B2145; box-shadow:0 4px 0 rgba(43,33,69,.3); } .schnell strong { font-size:18px; line-height:1.1; } .schnell small { font-size:13px; opacity:.75; }
.schnell.nacht { background:linear-gradient(#C9BCF0,#A9C8F5); } .schnell.essen { background:linear-gradient(#FFE79A,#FFC48C); } .schnell.an { background:#8ED8B8; } .sch-bild { width:70px; height:70px; display:block; } .sch-bild .ti { width:100%; height:100%; }
.ess-raster { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .ess-wahl { display:flex; flex-direction:column; align-items:center; padding:8px 4px 10px; border-radius:20px; background:var(--karte); border:4px solid transparent; font-size:15px; } .ess-wahl.on { border-color:#2B2145; background:var(--butter); } .ess-bild { width:88px; height:88px; display:block; }
#sperre.essen { background:linear-gradient(#FFF1C9,#FFC48C); color:#2B2145; } #sperre.essen .sp-essen-bild { width:230px; height:230px; display:block; margin:0 auto; } #sperre.essen h1 { color:#2B2145; } #sperre.essen .sp-klein { color:#2B2145; opacity:.7; }
#essen-banner { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 12px); z-index:70; } #essen-banner[hidden] { display:none; } .eb-karte { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:26px; background:linear-gradient(#FFF1C9,#FFC48C); border:4px solid #2B2145; box-shadow:0 6px 18px rgba(43,33,69,.3); color:#2B2145; } .eb-bild { width:84px; height:84px; flex:none; display:block; } .eb-txt { flex:1; display:flex; flex-direction:column; } .eb-txt strong { font-size:21px; line-height:1.15; } .eb-txt small { font-size:15px; font-weight:700; } .eb-ok { font-size:30px; background:transparent; min-width:48px; min-height:48px; }
.sp-gruss { margin-top:16px; }
.ti path:not([fill]) { fill:none; }

/* ===== Animierte Regler ===== */
.zr { margin:8px 0 12px; padding:10px 14px 8px; border-radius:24px; background:var(--karte); box-shadow:0 3px 10px rgba(43,33,69,.12); }
.zr-kopf { display:flex; align-items:center; gap:10px; } .zr-sym { font-size:24px; } .zr-wert { font-family:"Bricolage Grotesque",sans-serif; font-size:26px; color:#2B2145; } .zr-wert.pop { animation:zrPop .35s ease-out; } .zr.zr-leer .zr-wert { font-size:19px; opacity:.6; }
@keyframes zrPop { 0% { transform:scale(.8); } 60% { transform:scale(1.2); } 100% { transform:scale(1); } }
.zr-bahn { position:relative; height:58px; margin:2px 0 0; touch-action:pan-y; } .zr-bahn::before { content:''; position:absolute; left:0; right:0; top:50%; height:16px; margin-top:-8px; border-radius:8px; background:#E4DCF6; }
.zr-fuell { position:absolute; left:0; top:50%; height:16px; margin-top:-8px; border-radius:8px; width:calc(22px + var(--zr-p,0) * (100% - 44px)); background:linear-gradient(90deg,var(--zr-a),var(--zr-b)); transition:width .08s; }
.zr-in { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
.zr-figur { position:absolute; top:50%; left:calc(22px + var(--zr-p,0) * (100% - 44px)); width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#fff; border:3px solid #2B2145; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 3px 0 rgba(43,33,69,.25); pointer-events:none; animation:zrSchweb 2.6s ease-in-out infinite; transition:left .08s; }
.zr.zieht .zr-figur { animation:zrWackel .35s ease-in-out infinite; transform:scale(1.15); } .zr-leer .zr-figur { filter:grayscale(.6); }
@keyframes zrSchweb { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } } @keyframes zrWackel { 0%,100% { rotate:-10deg; } 50% { rotate:10deg; } }
.zr-skala { display:flex; justify-content:space-between; opacity:.55; font-size:12px; font-weight:700; margin-top:-2px; }
.zr.zr-aus { opacity:.45; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .zr-figur, .zr.zieht .zr-figur, .zr-wert.pop { animation:none; } }

.fn-block { display:flex; flex-direction:column; gap:2px; margin:10px 0 4px; } .fn-block > strong { font-size:17px; } .fn-block .fn-knopf { width:100%; }
.row .zr { flex:1 1 100%; } .nacht-pick .zr, .sp-pick .zr { background:rgba(255,255,255,.9); color:#2B2145; }

.schnell-reihe { grid-template-columns:repeat(3,1fr); gap:8px; } .schnell { padding:8px 4px 10px; border-radius:22px; } .schnell strong { font-size:15px; } .schnell small { font-size:11px; } .sch-bild { width:58px; height:58px; } .schnell.ruhe { background:linear-gradient(#FFD9E6,#F7B6C8); } .schnell.an { background:#8ED8B8; }
#ruhe-banner { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 12px); z-index:69; } #ruhe-banner[hidden] { display:none; } .eb-karte.ruhe { background:linear-gradient(#FFE3EC,#F7B6C8); }
.kachel.k-aus { opacity:.5; filter:grayscale(.4); }

/* Heute-Karte */
#heute { position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; background:rgba(43,33,69,.55); padding:14px; overflow:auto; } #heute[hidden] { display:none; }
.hk-karte { width:100%; max-width:420px; border-radius:34px; padding:14px 18px 22px; background:linear-gradient(#CDE6FF 0%,#FFF6DF 52%,#FFE9F0 100%); color:#2B2145; text-align:center; box-shadow:0 10px 30px rgba(43,33,69,.3); animation:hkEin .6s cubic-bezier(.2,1.2,.4,1); }
@keyframes hkEin { from { transform:translateY(40px) scale(.92); opacity:0; } to { transform:none; opacity:1; } }
.hk-bild { margin:-4px -6px 0; } .hk-szene { width:100%; height:auto; display:block; overflow:visible; } .hk-karte h1 { font-size:30px; margin:0; } .hk-datum { font-size:20px; font-weight:800; margin:2px 0 10px; opacity:.8; }
.hk-tag { display:inline-block; padding:6px 16px; border-radius:20px; background:#fff; font-weight:800; font-size:19px; margin:0 0 8px; } .hk-tag.frei { background:#8ED8B8; }
.hk-wetter { font-size:18px; font-weight:700; line-height:1.3; margin:8px 0; } .hk-liste { background:#fff; border-radius:22px; padding:10px 14px; text-align:left; margin:8px 0; } .hk-liste strong { display:block; margin-bottom:4px; } .hk-zeile { display:flex; gap:10px; align-items:center; font-size:18px; font-weight:700; padding:3px 0; } .hk-zeile span:first-child { font-size:26px; }
.hk-los { width:100%; margin-top:10px; min-height:66px; border-radius:24px; background:var(--butter); border:4px solid #2B2145; font-size:23px; font-weight:800; color:#2B2145; box-shadow:0 4px 0 rgba(43,33,69,.3); }
.hk-strahlen { animation:hkDreh 24s linear infinite; } @keyframes hkDreh { to { transform:rotate(360deg); } }
.hk-wolke { animation:hkWolke 9s ease-in-out infinite alternate; } .hk-wolke.w2 { animation-duration:12s; animation-delay:-4s; } @keyframes hkWolke { from { translate:-12px 0; } to { translate:14px 0; } }
.hk-tropfen { animation:hkRegen .9s linear infinite; } @keyframes hkRegen { 0% { transform:translateY(0); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(50px); opacity:0; } }
.hk-flocke { animation:hkSchnee 2.4s linear infinite; } @keyframes hkSchnee { 0% { transform:translate(0,0); opacity:0; } 20% { opacity:1; } 100% { transform:translate(8px,60px); opacity:0; } }
.hk-blitz { animation:hkBlitz 2.2s steps(1) infinite; } @keyframes hkBlitz { 0%,88%,100% { opacity:0; } 90%,96% { opacity:1; } }
.hk-blume { transform-box:fill-box; transform-origin:bottom center; animation:hkWiegen 3s ease-in-out infinite; } .hk-blume.b2 { animation-delay:-1.4s; } @keyframes hkWiegen { 0%,100% { rotate:-5deg; } 50% { rotate:5deg; } }
@media (prefers-reduced-motion: reduce) { .hk-strahlen, .hk-wolke, .hk-tropfen, .hk-flocke, .hk-blitz, .hk-blume, .hk-karte { animation:none; } }

/* Eigene Symbole statt Emojis */
.em { display:inline-block; width:1.2em; height:1.2em; vertical-align:-.22em; line-height:1; flex:none; } .em .ti { width:100%; height:100%; display:block; overflow:visible; }
.em.gross { width:56px; height:56px; } .em.riesig { width:84px; height:84px; }

/* Antwort-Symbole, Tagebuch */
.fk-sym { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:10px 0; } .fk-sym-btn { min-height:60px; border-radius:18px; background:var(--karte); border:3px solid var(--flieder); padding:6px; } .fk-sym-btn .em { width:44px; height:44px; } .fk-sym-btn:active { transform:scale(.92); background:var(--butter); }
.gesicht .em { width:42px; height:42px; } .gesichter { grid-template-columns:repeat(5,1fr); }
.tb-hinweis { margin:6px 0 10px; padding:8px 12px; border-radius:16px; background:#E3F6EC; font-weight:700; text-align:center; } .tb-hinweis.mit { background:#FFE9C9; }
.tb-neu { width:100%; min-height:62px; font-size:20px; margin:6px 0; } .tb-liste { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.tb-karte { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:22px; background:var(--karte); } .tb-karte > .em { width:52px; height:52px; } .tb-inhalt { flex:1; min-width:0; } .tb-inhalt small { opacity:.7; font-weight:700; } .tb-inhalt p { margin:4px 0 0; font-size:18px; overflow-wrap:anywhere; } .tb-weg { min-width:44px; min-height:44px; background:transparent; font-size:20px; }
.tb-pin { display:flex; flex-direction:column; align-items:center; gap:10px; margin:10px 0; } .tb-punkte { display:flex; gap:14px; margin:6px 0; } .tb-punkte i { width:22px; height:22px; border-radius:50%; border:3px solid #2B2145; background:#fff; transition:all .15s; } .tb-punkte i.voll { background:#9A7FD6; transform:scale(1.15); } .tb-punkte.falsch { animation:tbWackel .4s; } @keyframes tbWackel { 20%,60% { transform:translateX(-10px); } 40%,80% { transform:translateX(10px); } }
.tb-tasten { display:grid; grid-template-columns:repeat(3,76px); gap:10px; } .tb-taste { min-height:64px; border-radius:50%; background:var(--karte); border:3px solid #2B2145; font-size:26px; font-weight:800; color:#2B2145; } .tb-taste:active { background:var(--butter); transform:scale(.94); } .tb-pinmsg { min-height:1.4em; text-align:center; font-weight:700; margin:0; } .tb-vergessen { display:block; margin:12px auto; background:transparent; text-decoration:underline; font-weight:700; }

.lv-liste { align-items:stretch; text-align:left; } .lv-zeile { display:flex; gap:10px; align-items:center; padding:8px 4px; font-weight:700; } .lv-zeile .lv-sym { width:26px; text-align:center; font-weight:800; } .lv-zeile.ok .lv-sym { color:#2f9e6e; } .lv-zeile.fehl .lv-sym { color:#d6455f; } .lv-zeile .em { width:24px; height:24px; }
.lv-ton { background:#FFE79A; } .fk-pruef { display:block; margin:14px auto 0; min-height:52px; padding:0 22px; border-radius:26px; background:var(--karte); border:3px solid #2B2145; font-weight:800; }

/* Einrichtung */
.ein { max-width:440px; margin:0 auto; padding:16px 18px 40px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:stretch; position:relative; animation:einEin .5s ease-out; } @keyframes einEin { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.ein h1 { font-size:30px; margin:4px 0 0; } .ein-text { font-size:19px; line-height:1.35; margin:0; } .ein-klein { font-size:14px; opacity:.7; margin:0; } .ein-fehler { color:#d6455f; font-weight:800; min-height:1.3em; margin:0; }
.ein-bild { position:relative; width:150px; height:150px; margin:6px auto 0; } .ein-bild.klein { width:112px; height:112px; } .ein-bild img { width:100%; height:100%; border-radius:30px; box-shadow:0 6px 18px rgba(43,33,69,.25); animation:einSchweb 3s ease-in-out infinite; } @keyframes einSchweb { 50% { transform:translateY(-8px) rotate(-2deg); } }
.ein-fk { position:absolute; color:#F2B84B; font-size:22px; animation:einFunkel 2s ease-in-out infinite; } .ein-fk.f1 { top:-6px; right:-8px; } .ein-fk.f2 { bottom:8px; left:-12px; animation-delay:.7s; font-size:16px; } .ein-fk.f3 { top:30px; right:-18px; animation-delay:1.3s; font-size:14px; } @keyframes einFunkel { 0%,100% { transform:scale(.6) rotate(0); opacity:.4; } 50% { transform:scale(1.2) rotate(30deg); opacity:1; } }
.ein-wahl { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:28px; text-align:left; border:4px solid #2B2145; box-shadow:0 5px 0 rgba(43,33,69,.3); min-height:104px; color:#2B2145; } .ein-wahl.kind { background:linear-gradient(#FFE79A,#FFC48C); } .ein-wahl.eltern { background:linear-gradient(#C9E3FF,#A5DCCB); } .ein-wahl img { width:84px; height:84px; border-radius:22px; flex:none; } .ein-wahl strong { display:block; font-size:22px; } .ein-wahl small { font-size:14px; opacity:.8; } .ein-wahl:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(43,33,69,.3); }
.ein-punkte { display:flex; gap:8px; justify-content:center; } .ein-punkte i { width:12px; height:12px; border-radius:50%; background:#D9CEF2; transition:all .3s; } .ein-punkte i.an { background:#9A7FD6; transform:scale(1.25); }
.ein-zurueck { align-self:flex-start; background:var(--flieder); border-radius:20px; min-height:44px; padding:0 14px; font-weight:700; }
.ein-feld { width:100%; box-sizing:border-box; font-size:24px; text-align:center; padding:12px; border-radius:20px; border:4px solid var(--flieder); } .ein-feld.wackel { animation:tbWackel .4s; } .ein-weiter { min-height:64px; font-size:22px; } .ein-spaeter { background:transparent; text-decoration:underline; font-weight:700; }
.ein-tor { background:#fff; border-radius:24px; padding:12px; display:flex; flex-direction:column; gap:8px; } .ein-frage { font-family:"Bricolage Grotesque",sans-serif; font-size:38px; font-weight:800; margin:0; }
.ein-code { background:#fff; border-radius:24px; padding:14px; display:flex; flex-direction:column; gap:8px; align-items:center; } .ein-code strong { font-family:"Bricolage Grotesque",sans-serif; font-size:30px; letter-spacing:2px; } .ein-kopie { min-height:44px; border-radius:22px; padding:0 18px; background:var(--butter); font-weight:800; border:3px solid #2B2145; }
.ein-liste { text-align:left; font-size:18px; line-height:1.6; margin:0; padding-left:26px; } .ein-chips { display:flex; gap:8px; justify-content:center; } .ein-schloss { font-size:56px; animation:einSchweb 3s ease-in-out infinite; }
.ein-suche { display:flex; align-items:center; justify-content:center; gap:8px; font-size:60px; margin:20px 0; } .ein-welle { display:flex; gap:10px; } .ein-welle i { width:12px; height:12px; border-radius:50%; background:#E0708C; animation:lvpunkt 1.4s ease-in-out infinite; } .ein-welle i:nth-child(2) { animation-delay:.18s; } .ein-welle i:nth-child(3) { animation-delay:.36s; background:#8ED8B8; } .ein-welle i:nth-child(4) { animation-delay:.54s; } .ein-welle i:nth-child(5) { animation-delay:.72s; }
.ein-konfetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; } .ein-konfetti i { position:absolute; top:-20px; width:12px; height:16px; border-radius:4px; animation:einFall 3.2s linear infinite; } @keyframes einFall { to { transform:translateY(110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .ein, .ein-bild img, .ein-fk, .ein-schloss, .ein-konfetti i, .ein-welle i { animation:none; } }

/* Wörter- und Zahlen-Werkstatt */
.az-werkstatt { background:var(--himmel); }
.wk-raster { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; } .wk-set { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:24px; background:var(--wk,#fff); border:4px solid #2B2145; box-shadow:0 4px 0 rgba(43,33,69,.28); color:#2B2145; min-height:150px; } .wk-set strong { font-size:17px; text-align:center; } .wk-set:active { transform:translateY(3px); box-shadow:none; }
.wk-bilder { display:flex; gap:2px; justify-content:center; } .wk-mini { width:46px; height:46px; display:block; } .wk-mini .ti, .wk-bild .ti, .wk-m1 .ti { width:100%; height:100%; } .wk-sterne { display:inline-flex; gap:4px; } .wk-sterne .em { width:22px; height:22px; } .wk-sterne.gross .em { width:44px; height:44px; } .wk-sterne .em.aus { filter:grayscale(1); opacity:.3; } .wk-sterne.gross .em.an { animation:wkStern .7s ease-out backwards; } .wk-sterne.gross .em.an:nth-child(2) { animation-delay:.2s; } .wk-sterne.gross .em.an:nth-child(3) { animation-delay:.4s; } @keyframes wkStern { from { transform:scale(0) rotate(-90deg); } 70% { transform:scale(1.3); } }
.wk-regel { padding:14px 16px; border-radius:22px; background:var(--wk); border:3px solid #2B2145; font-size:19px; font-weight:600; line-height:1.35; margin:8px 0; } .wk-regel p { margin:0; }
.wk-gross { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:68px; margin-top:12px; border-radius:24px; font-size:22px; font-weight:800; border:4px solid #2B2145; box-shadow:0 4px 0 rgba(43,33,69,.3); color:#2B2145; } .wk-gross .em { width:34px; height:34px; } .wk-gross.ueben { background:var(--minze); } .wk-gross.lernen { background:var(--butter); } .wk-gross.weiter { background:var(--himmel); }
.wk-bestleistung { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:16px; font-weight:800; }
.wk-karte { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px 16px; border-radius:30px; background:var(--wk); border:4px solid #2B2145; box-shadow:0 6px 0 rgba(43,33,69,.28); margin:10px 0; animation:wkPop .45s cubic-bezier(.2,1.3,.4,1); } @keyframes wkPop { from { transform:scale(.8) rotate(-4deg); opacity:0; } }
.wk-bild { width:170px; height:170px; display:block; animation:wkWipp 3.4s ease-in-out infinite; } @keyframes wkWipp { 0%,100% { transform:rotate(-2.5deg); } 50% { transform:rotate(2.5deg) translateY(-4px); } }
.wk-wort { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:54px; line-height:1.1; color:#2B2145; letter-spacing:1px; } .wk-wort.klein { font-size:34px; } .wk-m { background:#fff; color:#E0708C; border-radius:10px; padding:0 4px; box-shadow:0 0 0 3px #E0708C; margin:0 2px; }
.wk-hoer { display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 20px; border-radius:26px; background:#fff; border:3px solid #2B2145; font-weight:800; font-size:18px; } .wk-hoer .em { width:30px; height:30px; } .wk-hoer.klein { min-height:44px; padding:0 12px; }
.wk-nav { display:flex; align-items:center; justify-content:center; gap:18px; } .wk-pfeil { width:64px; height:64px; border-radius:50%; font-size:40px; font-weight:800; background:var(--karte); border:3px solid #2B2145; color:#2B2145; } .wk-zaehler { font-weight:800; font-size:18px; }
.wk-fortschritt { height:12px; border-radius:6px; background:#E4DCF6; overflow:hidden; margin:6px 0 10px; } .wk-fortschritt i { display:block; height:100%; border-radius:6px; transition:width .4s; }
.wk-frage { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px; border-radius:28px; background:var(--wk); border:4px solid #2B2145; position:relative; } .wk-frage h2 { margin:0; font-size:22px; text-align:center; } .wk-frage .wk-hoer.klein { position:absolute; top:10px; right:10px; }
.wk-frage .wk-bild { width:140px; height:140px; } .wk-zahlwort { font-family:"Bricolage Grotesque",sans-serif; font-size:34px; font-weight:800; text-align:center; padding:14px 6px; overflow-wrap:anywhere; } .wk-block { display:block; width:100%; max-width:300px; } .wk-block .ti { width:100%; height:auto; } .wk-uhrbild { width:150px; height:150px; display:block; } .wk-uhrbild .ti { width:100%; height:100%; } .wk-muenzen { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; } .wk-m1 { width:62px; height:62px; display:block; }
.wk-optionen { display:flex; flex-direction:column; gap:10px; margin:12px 0; } .wk-opt { min-height:70px; border-radius:22px; background:#fff; border:4px solid #2B2145; font-size:30px; font-weight:800; color:#2B2145; box-shadow:0 4px 0 rgba(43,33,69,.28); transition:transform .15s; } .wk-opt:active { transform:translateY(3px); box-shadow:none; } .wk-opt.richtig { background:#8ED8B8; animation:wkJa .5s; } .wk-opt.falsch { background:#F7B6B0; animation:tbWackel .45s; } @keyframes wkJa { 40% { transform:scale(1.08); } }
.wk-rueck { min-height:60px; text-align:center; } .wk-rueck strong { font-size:22px; } .wk-rueck.lob strong { color:#2f9e6e; } .wk-rueck .em.gross { width:44px; height:44px; vertical-align:middle; margin-right:6px; animation:wkJa .6s; } .wk-rueck p { margin:4px 0; }
.wk-ende { text-align:center; padding:10px 6px 30px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; } .wk-held { width:150px; height:150px; display:block; animation:wkWipp 2s ease-in-out infinite; } .wk-held .ti { width:100%; height:100%; } .wk-ende h1 { font-size:28px; margin:0; } .wk-punkte { font-size:20px; font-weight:800; margin:0; }
@media (prefers-reduced-motion: reduce) { .wk-karte, .wk-bild, .wk-held, .wk-sterne .em, .wk-opt { animation:none !important; } }

.ein-chips.wrap { flex-wrap:wrap; } .ein-pwd { display:flex; flex-direction:column; gap:10px; } .ein-pwd h2 { margin:4px 0; } .bl-feld { width:100%; box-sizing:border-box; font-size:22px; padding:12px; border-radius:18px; border:4px solid #2B2145; text-align:center; margin:8px 0; }