/* Finos Mathe-Welt – Gestaltung (tablet-first) */
@font-face { font-family: 'Fredoka'; src: url(../fonts/fredoka-latin-wght-normal.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/nunito-latin-wght-normal.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }
:root {
  --or: #FF7A1A; --or2: #FFB061; --or-d: #E35F00; --te: #14B8A6; --te-d: #0D9488; --te-l: #CCFBF1; --ink: #1E2A4A; --ink2: #50608A; --mut: #8A97B8;
  --line: #E3E8F4; --red: #FF4D4D; --blue: #2F80FF; --green: #22C55E; --yel: #FFC531; --pur: #8B5CF6; --pink: #EC4899;
  --r: 22px; --sh: 0 6px 0 rgba(30, 42, 74, .08), 0 12px 30px rgba(30, 42, 74, .08); --sh-s: 0 3px 0 rgba(30, 42, 74, .1);
  --ff: 'Fredoka', 'Nunito', system-ui, sans-serif; --ft: 'Nunito', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--ft); color: var(--ink); background: linear-gradient(180deg, #FFE9D1 0%, #FFF6EA 38%, #E9FBF6 100%) fixed; font-size: 18px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 4px solid rgba(20, 184, 166, .55); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--ff); font-weight: 600; margin: 0 0 .4em; line-height: 1.15; }
a { color: var(--te-d); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; }
.small, small { font-size: .8em; color: var(--ink2); }
img.em { width: 1.3em; height: 1.3em; vertical-align: -.28em; display: inline-block; pointer-events: none; }
img.em.xs { width: 1em; height: 1em; vertical-align: -.15em; } img.em.sm { width: 1.5em; height: 1.5em; }
img.em.md { width: 2.4em; height: 2.4em; } img.em.lg { width: 3.4em; height: 3.4em; } img.em.xl { width: 5em; height: 5em; }
[hidden] { display: none !important; }
#sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#sky .cl { position: absolute; width: 220px; height: 70px; background: #fff; border-radius: 70px; opacity: .55; animation: drift 70s linear infinite; }
#sky .cl::before, #sky .cl::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
#sky .cl::before { width: 100px; height: 100px; left: 30px; top: -45px; } #sky .cl::after { width: 70px; height: 70px; left: 110px; top: -28px; }
#sky .c1 { top: 8%; left: -240px; } #sky .c2 { top: 32%; left: -240px; animation-delay: -30s; animation-duration: 95s; } #sky .c3 { top: 64%; left: -240px; animation-delay: -55s; animation-duration: 120s; opacity: .35; }
@keyframes drift { to { transform: translateX(calc(100vw + 480px)); } }
#app { max-width: 1320px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: 0 clamp(8px, 2vw, 22px); }
.boot { display: grid; place-items: center; height: 80vh; } .boot-dot { width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--or2); border-top-color: var(--or); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
#toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translate(-50%, 30px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 95; max-width: 90vw; text-align: center; box-shadow: var(--sh); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .62em 1.15em; border-radius: 18px; font-family: var(--ff); font-weight: 600; font-size: 1.05em;
  min-height: 52px; transition: transform .12s, box-shadow .12s, background .2s; position: relative; text-decoration: none; white-space: nowrap; }
.btn:active:not(:disabled) { transform: translateY(3px); }
.btn-go { background: linear-gradient(180deg, #FF9440, var(--or)); color: #fff; box-shadow: 0 5px 0 var(--or-d), 0 10px 18px rgba(255, 122, 26, .3); }
.btn-go:active:not(:disabled) { box-shadow: 0 2px 0 var(--or-d); }
.btn-go.next { background: linear-gradient(180deg, #2DD4BF, var(--te)); box-shadow: 0 5px 0 var(--te-d), 0 10px 18px rgba(20, 184, 166, .3); }
.btn-soft { background: #fff; color: var(--ink); box-shadow: 0 4px 0 #D5DCEC, 0 0 0 2px #E8ECF6 inset; }
.btn-soft.on { background: var(--te-l); box-shadow: 0 4px 0 #8FE3D6, 0 0 0 2px #8FE3D6 inset; }
.btn-soft.danger { color: #C62828; }
.btn.big { font-size: 1.2em; min-height: 62px; padding: .7em 1.4em; border-radius: 22px; }
.btn.small { min-height: 42px; font-size: .92em; padding: .4em .8em; border-radius: 14px; }
.btn:disabled { opacity: .5; }
.btn.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 4px 0 #F5C24B, 0 0 0 6px rgba(255, 197, 49, .45); transform: scale(1.04); } }
.icon-btn { width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: var(--sh-s); display: grid; place-items: center; font-size: 26px; font-weight: 700; flex: none; }
.icon-btn.back { font-size: 38px; line-height: 1; padding-bottom: 4px; color: var(--ink2); }
.icon-btn:active { transform: translateY(2px); }
.link { color: var(--ink2); font-weight: 700; padding: 10px; text-decoration: underline; text-underline-offset: 3px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 800; box-shadow: var(--sh-s); font-family: var(--ff); }
.star-pill { color: #D79A00; } .star-pill b { color: var(--ink); }
.sync-pill.wait { background: #FFF6D6; }
.stars i { font-style: normal; color: #D9DEEA; font-size: 1.1em; } .stars i.on { color: #FFB800; text-shadow: 0 2px 0 #E09A00; }
/* Fino */
.fino-host { cursor: pointer; position: relative; }
.fino { width: 100%; height: 100%; overflow: visible; display: block; }
.fino .f-tail { transform-origin: 128px 190px; animation: tail 2.6s ease-in-out infinite; }
@keyframes tail { 50% { transform: rotate(-9deg); } }
.fino .f-head { transform-origin: 100px 125px; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(2.5deg) translateY(1px); } }
.fino .f-happy-eyes, .fino .f-mouth-open { display: none; }
.fino .f-eye { transition: transform .08s; transform-box: fill-box; transform-origin: center; }
.blink .fino .f-eye { transform: scaleY(.1); }
.happy .fino .f-eyes, .cheer .fino .f-eyes { display: none; } .happy .fino .f-happy-eyes, .cheer .fino .f-happy-eyes { display: inline; }
.happy .fino, .cheer .fino { animation: hop .6s ease 2; }
.cheer .fino .f-arm-l { transform-origin: 70px 152px; animation: armL .5s ease-in-out 3; } .cheer .fino .f-arm-r { transform-origin: 130px 152px; animation: armR .5s ease-in-out 3; }
@keyframes armL { 50% { transform: rotate(60deg); } } @keyframes armR { 50% { transform: rotate(-60deg); } }
@keyframes hop { 30% { transform: translateY(-14px); } 60% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
.think .fino .f-head { animation: tilt 1.4s ease-in-out infinite; } @keyframes tilt { 50% { transform: rotate(-7deg); } }
.wave .fino .f-arm-r { transform-origin: 130px 152px; animation: armR .45s ease-in-out 4; }
.talking .fino .f-mouth { display: none; } .talking .fino .f-mouth-open { display: inline; animation: talk .26s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center top; }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
/* ---------- Start ---------- */
.welcome { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 0 40px; }
.w-hero { display: flex; align-items: center; gap: 18px; }
.w-fino { width: clamp(120px, 20vw, 190px); height: clamp(133px, 22vw, 211px); animation: popin .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.w-title h1 { font-size: clamp(34px, 6vw, 60px); color: var(--or); text-shadow: 0 4px 0 #FFD7B3; margin: 0; }
.w-title p { margin: 4px 0 0; font-size: 1.1em; color: var(--ink2); font-weight: 700; }
.w-card { background: #fff; border-radius: 30px; box-shadow: var(--sh); padding: clamp(18px, 3vw, 32px); width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: up .5s .1s both; }
.w-card h2 { font-size: 1.7em; margin: 0; } .lead { font-size: 1.15em; margin: 0; }
.w-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.code-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }
.code-in, .name-in { font: 600 1.6em var(--ff); text-align: center; padding: 10px 16px; border-radius: 18px; border: 3px solid var(--line); width: min(340px, 100%); outline: 0; color: var(--ink); background: #FAFBFF; }
.code-in { letter-spacing: .12em; text-transform: uppercase; }
.code-in:focus, .name-in:focus { border-color: var(--te); background: #fff; }
.name-in { font-size: 1.3em; }
.w-msg { min-height: 1.4em; margin: 0; font-weight: 700; color: var(--ink2); } .w-msg.bad { color: #D32F2F; }
.code-ok { background: #E7FAF3; color: #0F766E; padding: 8px 16px; border-radius: 14px; font-weight: 700; margin: 0; }
.fl { font-family: var(--ff); font-weight: 600; font-size: 1.1em; margin-top: 6px; }
.avatars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; width: 100%; }
.av { aspect-ratio: 1; border-radius: 16px; background: #F4F6FC; display: grid; place-items: center; transition: .15s; }
.av img.em { width: 70%; height: 70%; } .av.sel { background: #FFE8D2; box-shadow: 0 0 0 4px var(--or) inset; transform: scale(1.08); }
.klassen { display: flex; gap: 12px; }
.kl-btn { width: 84px; height: 84px; border-radius: 22px; background: #F4F6FC; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--sh-s); }
.kl-btn b { font: 700 2em var(--ff); line-height: 1; } .kl-btn.sel { background: var(--te); color: #fff; } .kl-btn.sel small { color: #fff; }
.teach-link { margin-top: 6px; font-size: .9em; }
/* ---------- Karte ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; flex-wrap: wrap; }
.me { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 20px; padding: 6px 14px 6px 6px; box-shadow: var(--sh-s); text-align: left; min-width: 0; }
.me-av { width: 50px; height: 50px; border-radius: 15px; background: #FFE8D2; display: grid; place-items: center; flex: none; } .me-av img.em { width: 34px; height: 34px; }
.me-txt { display: flex; flex-direction: column; min-width: 0; } .me-txt b { font-family: var(--ff); font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-txt small { white-space: nowrap; }
.tb-pills { display: flex; gap: 8px; margin-left: auto; } .tb-btns { display: flex; gap: 8px; }
.m-hello { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 8px; }
.m-fino { width: 96px; height: 107px; flex: none; }
.m-bubble { background: #fff; border-radius: 22px 22px 22px 6px; padding: 14px 20px; font-weight: 700; font-size: 1.1em; box-shadow: var(--sh-s); margin-bottom: 26px; animation: up .5s both; max-width: 640px; }
.t-note { display: flex; gap: 10px; align-items: center; background: #FFF8E1; border: 2px dashed #F5C24B; border-radius: 18px; padding: 10px 16px; margin-bottom: 12px; }
.assign { background: linear-gradient(135deg, #FFF1E5, #FFE3EC); border-radius: 26px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--sh-s); }
.assign h3 { font-size: 1.2em; }
.sugg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sugg-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 22px; padding: 12px 18px; text-align: left; box-shadow: var(--sh-s); border: 3px solid color-mix(in srgb, var(--c) 35%, #fff); transition: transform .15s; min-width: 0; }
.sugg-card:active { transform: translateY(3px); }
.sugg-card span { display: flex; flex-direction: column; min-width: 0; } .sugg-card small { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c); font-size: .72em; }
.sugg-card b { font-family: var(--ff); font-size: 1.2em; } .sugg-card em { font-style: normal; color: var(--ink2); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kchips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; font-weight: 800; color: var(--ink2); }
.chip-btn { padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: var(--sh-s); }
.chip-btn.sel { background: var(--ink); color: #fff; }
.world { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; padding-bottom: 20px; }
.area { border-radius: 30px; padding: 16px 16px 18px; position: relative; overflow: hidden; box-shadow: var(--sh); }
.area::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, .7) 3px, transparent 4px); background-size: 46px 46px; }
.a-zo { background: linear-gradient(160deg, #FFE0C2, #FFC79A); } .a-rf { background: linear-gradient(160deg, #D8F7D4, #A8E6A1); }
.a-gm { background: linear-gradient(160deg, #DCEBFF, #B6D4FF); } .a-dh { background: linear-gradient(160deg, #EDE4FF, #D3C2FF); }
.a-head { display: flex; align-items: center; gap: 12px; position: relative; margin-bottom: 12px; }
.a-ic { width: 60px; height: 60px; border-radius: 20px; background: rgba(255, 255, 255, .8); display: grid; place-items: center; flex: none; } .a-ic img.em { width: 42px; height: 42px; }
.a-head h2 { font-size: 1.5em; margin: 0; } .a-head small { color: var(--ink); opacity: .7; font-weight: 700; }
.a-stars { margin-left: auto; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 6px 12px; font-weight: 800; color: #B07A00; white-space: nowrap; font-family: var(--ff); }
.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; position: relative; }
.node { background: #fff; border-radius: 24px; padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center;
  box-shadow: 0 6px 0 rgba(30, 42, 74, .12), 0 10px 20px rgba(30, 42, 74, .1); border: 3px solid color-mix(in srgb, var(--c) 35%, #fff); transition: transform .15s; animation: up .45s both; }
.node:nth-child(2) { animation-delay: .05s; } .node:nth-child(3) { animation-delay: .1s; } .node:nth-child(4) { animation-delay: .15s; } .node:nth-child(5) { animation-delay: .2s; } .node:nth-child(n+6) { animation-delay: .25s; }
.node:hover { transform: translateY(-3px); } .node:active { transform: translateY(3px); }
.n-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, #fff); }
.n-ic img.em { width: 44px; height: 44px; }
.node.played .n-ic { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 40%, #fff); }
.n-t { font-family: var(--ff); font-weight: 600; font-size: 1em; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; }
.n-lv { display: flex; gap: 4px; } .n-lv i { font-style: normal; font-size: .72em; min-width: 26px; padding: 1px 5px; border-radius: 999px; background: #F0F2F8; color: #B6BED3; font-weight: 900; letter-spacing: -1px; }
.n-lv i.on { color: #fff; } .n-lv i.l1.on { background: #4ADE80; } .n-lv i.l2.on { background: #22B5A3; } .n-lv i.l3.on { background: #15803D; }
.n-k { font-size: .72em; font-weight: 800; color: var(--mut); }
.n-badge { position: absolute; top: 6px; right: 8px; }
.node.assigned { border-color: #FF8FB1; }
.m-foot { text-align: center; padding: 10px 0 30px; color: var(--ink2); font-size: .9em; }
/* ---------- Spiel-Start ---------- */
.play-top { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; }
.pt-title { display: flex; align-items: center; gap: 8px; font-family: var(--ff); font-size: 1.3em; min-width: 0; }
.pt-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro .i-body { display: grid; grid-template-columns: minmax(260px, 1fr) 1.6fr; gap: 24px; align-items: center; padding: 10px 0 30px; }
.i-left { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.i-fino { width: 180px; height: 200px; }
.i-bubble { background: #fff; border-radius: 26px; padding: 18px 20px; box-shadow: var(--sh); font-size: 1.1em; font-weight: 600; position: relative; }
.i-bubble::before { content: ''; position: absolute; top: -14px; left: 50%; margin-left: -14px; border: 14px solid transparent; border-top: 0; border-bottom-color: #fff; }
.i-bubble p { margin: 0 0 10px; }
.i-right h2 { font-size: 1.6em; margin-bottom: 0; } .why { margin: 4px 0 14px; color: var(--ink2); font-weight: 700; }
.lv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; padding-top: 10px; }
.lv-card { background: #fff; border-radius: 24px; padding: 18px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: var(--sh-s); border: 4px solid transparent; position: relative; transition: .15s; }
.lv-card b { font-family: var(--ff); font-size: 1.25em; } .lv-d { font-size: .88em; color: var(--ink2); font-weight: 600; flex: 1; }
.lv-card.sel { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 40%, #fff), var(--sh); }
.lv-tag { position: absolute; top: -13px; padding: 3px 10px; border-radius: 999px; font-size: .74em; font-weight: 800; white-space: nowrap; }
.lv-tag.forsch { background: var(--pur); color: #fff; } .lv-tag.teach { background: #FF5C8A; color: #fff; top: auto; bottom: -13px; } .lv-tag.rec { background: var(--te); color: #fff; top: auto; bottom: -13px; }
.start { width: 100%; }
.say-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--te-l); display: grid; place-items: center; flex: none; box-shadow: 0 3px 0 #8FE3D6; }
.say-btn img.em { width: 30px; height: 30px; }
.say-btn.inline { width: auto; height: auto; display: inline-flex; gap: 6px; padding: 8px 16px; border-radius: 999px; font-weight: 800; color: var(--te-d); }
.say-btn.inline img.em { width: 22px; height: 22px; }
/* ---------- Spielfläche ---------- */
.play-host { min-height: 100dvh; }
.play { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(96px + var(--safe-b)); }
.play.shake .stage { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lvl-pill { padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: .85em; white-space: nowrap; color: #fff; }
.lvl-pill.l1 { background: #4ADE80; } .lvl-pill.l2 { background: #22B5A3; } .lvl-pill.l3 { background: #15803D; }
.pdots { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.pdots i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #D5DCEC inset; transition: .3s; }
.pdots i.cur { box-shadow: 0 0 0 3px var(--or) inset; transform: scale(1.2); }
.pdots i.g { background: var(--green); box-shadow: none; } .pdots i.y { background: var(--yel); box-shadow: none; } .pdots i.r { background: #FCA5A5; box-shadow: none; }
.pdots i.pop { animation: dotpop .5s; } @keyframes dotpop { 50% { transform: scale(1.6); } }
.prompt { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r); padding: 12px 18px 12px 12px; box-shadow: var(--sh-s); margin-bottom: 12px; }
.q { font-family: var(--ff); font-size: clamp(1.1em, 2.4vw, 1.45em); font-weight: 500; line-height: 1.25; }
.q b { font-weight: 700; color: var(--or-d); } .q .price { color: var(--te-d); }
.play-main { display: flex; gap: 14px; flex: 1; min-height: 0; }
.stage { flex: 1; min-width: 0; background: rgba(255, 255, 255, .78); border-radius: 28px; padding: clamp(12px, 2vw, 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  box-shadow: 0 0 0 3px #fff inset, var(--sh-s); container-type: inline-size; position: relative; }
.stage.enter > * { animation: up .35s both; }
.side { display: none; }
.has-pad .side { display: flex; flex-direction: column; justify-content: center; width: 250px; flex: none; transition: opacity .2s; }
.side.dim { opacity: .35; pointer-events: none; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #fff; padding: 12px; border-radius: 26px; box-shadow: var(--sh-s); }
.key { height: 66px; border-radius: 18px; background: #F4F6FC; font: 700 1.9em var(--ff); box-shadow: 0 4px 0 #D5DCEC; transition: transform .06s; }
.key.down { transform: translateY(3px); box-shadow: 0 1px 0 #D5DCEC; background: #E6FBF7; }
.key.k-back { background: #FFEDEC; color: #D9534F; } .key.k-next { background: #E6F0FF; color: var(--blue); }
.hintbox { background: #FFFBEA; border: 3px solid #FFE38A; border-radius: 20px; padding: 10px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; animation: up .3s both; font-weight: 600; }
.hint b { color: #B07A00; }
.play-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px max(clamp(8px, 2vw, 22px), calc((100vw - 1320px) / 2 + 22px)) calc(10px + var(--safe-b)); background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -4px 20px rgba(30, 42, 74, .1); display: flex; align-items: center; gap: 12px; }
.pb-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pb-fino { width: 64px; height: 71px; flex: none; margin-top: -26px; }
.pb-bubble { background: #F4F6FC; border-radius: 18px 18px 18px 4px; padding: 10px 16px; font-weight: 700; opacity: 0; transform: scale(.9); transform-origin: left bottom; transition: .25s; min-width: 0; font-size: 1.02em; line-height: 1.25; max-height: 4.2em; overflow: auto; }
.pb-bubble.on { opacity: 1; transform: none; }
.pb-bubble.ok { background: #DCFCE7; color: #166534; } .pb-bubble.bad { background: #FFF1E6; color: #9A3412; } .pb-bubble.reveal { background: #EDE9FE; color: #5B21B6; } .pb-bubble.info { background: #E0F2FE; color: #075985; }
.pb-right { display: flex; gap: 10px; flex: none; }
.pb-right .btn { min-width: 64px; }
.eq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-family: var(--ff); font-size: clamp(1.4em, 4cqw, 2em); font-weight: 600; }
.eqt { white-space: nowrap; } .eqt.big { font-size: 1.3em; color: var(--or-d); }
.slot { min-width: 1.9em; height: 1.75em; padding: 0 .25em; border-radius: 14px; border: 3px dashed #B8C3DE; background: #fff; font: 700 1em var(--ff); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: .15s; position: relative; }
.slot.active { border: 3px solid var(--te); box-shadow: 0 0 0 5px rgba(20, 184, 166, .22); }
.slot.active:empty::after { content: ''; width: 3px; height: 1em; background: var(--te); border-radius: 2px; animation: blinkc 1s steps(2) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.slot.filled { border-style: solid; border-color: #9FB0D6; }
.slot.given { border: 3px solid transparent; background: #EEF2FB; color: var(--ink); }
.slot.bad { border-color: var(--red) !important; background: #FFF1F1; color: #C62828; animation: shake .35s; }
.slot.ok { border-color: var(--green) !important; background: #ECFDF3; color: #15803D; }
.slot.shown { border-color: var(--pur) !important; background: #F3EEFF; color: #6D28D9; }
.is-done .slot { pointer-events: none; }
.choices { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 900px; }
.choices.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.choice { background: #fff; border-radius: 20px; padding: 14px 18px; font-weight: 700; font-size: 1.08em; box-shadow: 0 4px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; text-align: left; flex: 1 1 260px; min-height: 64px; transition: .15s;
  display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.choice:active { transform: translateY(2px); }
.choice.sel { box-shadow: 0 4px 0 #7DD3C7, 0 0 0 4px var(--te) inset; background: #F0FDFA; }
.choice.right { box-shadow: 0 4px 0 #86EFAC, 0 0 0 4px var(--green) inset; background: #ECFDF3; }
.choice.wrong { box-shadow: 0 4px 0 #FCA5A5, 0 0 0 4px var(--red) inset; background: #FFF1F1; }
.choices.nums .choice, .choices.three .choice { flex: 0 1 auto; min-width: 110px; justify-content: center; font: 700 1.9em var(--ff); text-align: center; }
.choices.three .choice { font-size: 1.4em; min-width: 160px; }
.choices.ops .choice { justify-content: center; font: 700 1.6em var(--ff); flex: 0 1 200px; }
.choices.pics .choice { flex-direction: column; justify-content: center; text-align: center; flex: 0 1 200px; }
.choices.letters .choice { font: 700 2.6em var(--ff); justify-content: center; flex: 0 1 110px; }
.choices.toks .choice { justify-content: center; flex: 0 1 auto; }
.two-fields { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; } .two-fields > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--ff); font-size: 1.2em; }
/* Plättchenfelder */
.field { --cs: clamp(22px, calc((100cqw - 40px) / (var(--cols) + 1.6)), 54px); display: inline-flex; flex-direction: column; padding: 8px; background: #FFF7E0; border: 4px solid #E8B04A; border-radius: 16px; touch-action: none; }
.two-fields .field { --cs: clamp(14px, calc((45cqw - 40px) / 11.6), 30px); }
.field .frow { display: flex; } .field .frow.gap5 { margin-bottom: calc(var(--cs) * .22); }
.field .fcell { width: var(--cs); height: var(--cs); padding: calc(var(--cs) * .08); border: 1.5px solid #EED6A0; display: grid; place-items: center; background: #FFFDF5; }
.field .fcell.gapR { margin-right: calc(var(--cs) * .22); }
.field .chip { width: 100%; height: 100%; border-radius: 50%; transform: scale(0); transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.field .fcell[data-v="1"] .chip { transform: scale(1); background: radial-gradient(circle at 35% 30%, #FF8A8A, var(--red) 60%, #D32F2F); box-shadow: 0 2px 0 #B71C1C; }
.field .fcell[data-v="2"] .chip { transform: scale(1); background: radial-gradient(circle at 35% 30%, #7FB2FF, var(--blue) 60%, #1858C9); box-shadow: 0 2px 0 #0D47A1; }
.field .fcell[data-v="3"] .chip { transform: scale(1); opacity: .6; background: linear-gradient(45deg, #E5E7EB 45%, #9CA3AF 46%, #9CA3AF 54%, #E5E7EB 55%); }
.field[role="grid"] { cursor: pointer; }
.field.f100 { --cs: clamp(18px, min(calc((100cqw - 40px) / 11.5), calc((100dvh - 390px) / 11)), 46px); }
.field.mini { --cs: 14px !important; padding: 3px; border-width: 3px; }
.field.hide .chip { opacity: 0; }
.blitz-wrap { position: relative; } .blitz-cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 247, 224, .75); border-radius: 16px; }
.lay-top { display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; }
.rep { display: flex; gap: 12px; align-items: center; background: #fff; padding: 10px 18px; border-radius: 20px; box-shadow: var(--sh-s); min-height: 80px; }
.rep-num { font: 700 3.2em var(--ff); color: var(--or-d); padding: 0 28px; } .rep-word { font: 600 2em var(--ff); color: var(--te-d); }
.count-badge { font: 700 1.6em var(--ff); background: var(--ink); color: #fff; border-radius: 16px; padding: 6px 16px; min-width: 64px; text-align: center; }
.count-badge .r { color: #FF9E9E; } .count-badge .b { color: #9EC3FF; }
.colpick { display: flex; gap: 10px; }
.colbtn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; }
.colbtn i { width: 26px; height: 26px; border-radius: 50%; } .colbtn.c1 i { background: var(--red); } .colbtn.c2 i { background: var(--blue); }
.colbtn.sel { box-shadow: 0 3px 0 #7DD3C7, 0 0 0 4px var(--ink) inset; }
.dice { display: grid; grid-template-columns: repeat(3, 1fr); width: 70px; height: 70px; padding: 8px; gap: 3px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 3px #CBD3E6 inset, 0 3px 0 #CBD3E6; }
.dice i { border-radius: 50%; } .dice i.on { background: var(--ink); }
.fingers { display: flex; gap: 14px; }
.hand { display: flex; align-items: flex-end; gap: 3px; height: 76px; position: relative; padding: 0 4px 24px; }
.hand i { width: 13px; height: 20px; border-radius: 7px 7px 3px 3px; background: #F6D7BF; box-shadow: 0 0 0 2px #E2B48F inset; position: relative; z-index: 1; }
.hand i.up { height: 46px; background: #FFD7B5; } .hand i:nth-child(1).up { height: 30px; } .hand i:nth-child(3).up { height: 52px; }
.hand b { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border-radius: 12px 12px 16px 16px; background: #FFD7B5; box-shadow: 0 0 0 2px #E2B48F inset; }
/* Zahlenhaus */
.house-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; }
.house { display: flex; flex-direction: column; align-items: center; font-size: clamp(1.3em, 3.6cqw, 1.8em); width: 7.5em; }
.house.tall { font-size: clamp(1.1em, 3cqw, 1.5em); }
.roof { width: 100%; height: 2.8em; background: #FF6B6B; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: .25em; color: #fff; font: 700 1.1em var(--ff); }
.roof .slot { font-size: .8em; height: 1.5em; }
.hbody { background: #FFF1D6; border: 4px solid #E0A54A; border-top: 0; padding: 10px 12px 0; display: flex; flex-direction: column; gap: 8px; width: 88%; align-items: center; }
.floor { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .floor .slot { border-radius: 0; width: 100%; height: 1.6em; }
.floor .slot:first-child { border-radius: 10px 0 0 10px; } .floor .slot:last-child { border-radius: 0 10px 10px 0; }
.door { width: 1.6em; height: 1.9em; background: #A0703F; border-radius: .8em .8em 0 0; margin-top: 4px; }
.house-aid { display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 380px; } .house-aid small { text-align: center; }
/* Rechenstrich */
.rstrich { width: 100%; max-width: 1000px; height: auto; touch-action: none; overflow: visible; }
.rstrich .rs-num { font: 700 26px var(--ff); fill: var(--ink); } .rstrich .rs-arc { fill: none; stroke: var(--or); stroke-width: 5; stroke-linecap: round; }
.rstrich .rs-arc.bw { stroke: var(--blue); } .rstrich .rs-jl { font: 700 24px var(--ff); fill: var(--or-d); } .rstrich .rs-jl.bw { fill: var(--blue); } .rstrich .rs-hint { font: 600 20px var(--ff); fill: var(--mut); }
.jumps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.jbtn { min-width: 72px; height: 58px; padding: 0 10px; border-radius: 18px; background: #FFF1E6; color: var(--or-d); font: 700 1.5em var(--ff); box-shadow: 0 4px 0 #FFC79A; }
.jbtn.neg { background: #E6F0FF; color: var(--blue); box-shadow: 0 4px 0 #A9C8FF; }
.jbtn:active { transform: translateY(3px); box-shadow: none; }
.rs-tools, .dirpick { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rs-info { font-weight: 800; color: var(--ink2); min-height: 1.3em; text-align: center; }
.dir { padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; } .dir.sel { background: var(--ink); color: #fff; box-shadow: none; }
/* Malwinkel */
.winkel-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; touch-action: none; }
.wcorner { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--te); border: 4px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); cursor: grab; z-index: 3; touch-action: none; }
.wcorner::after { content: '↘'; color: #fff; font-weight: 900; display: grid; place-items: center; height: 100%; font-size: 20px; }
.winkel-lab, .winkel-cnt { font: 700 1.5em var(--ff); text-align: center; margin-top: 6px; color: var(--te-d); }
.derive { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.derive .field.f100 { --cs: clamp(16px, min(calc(55cqw / 11), calc((100dvh - 400px) / 11)), 38px); }
.derive-eqs { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .derive-eqs .eq { font-size: 1.5em; justify-content: flex-end; }
.derive-eqs hr { width: 100%; border: 0; border-top: 4px solid var(--ink); margin: 2px 0; }
.opsign { font: 700 1.1em var(--ff); color: var(--mut); align-self: center; }
/* Zahlenmauer */
.wall { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: clamp(1.3em, 4.2cqw, 2em); }
.wrow { display: flex; gap: 6px; }
.slot.brick { width: 3.3em; height: 1.7em; border-radius: 8px; background: #FFE8D6; border: 3px solid #E58E5A; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .06); }
.slot.brick.given { background: #F6B88E; border-color: #E58E5A; color: #5B2A0E; }
.slot.brick.active { border-color: var(--te); background: #fff; }
.wall.r4 { font-size: clamp(1.1em, 3.6cqw, 1.7em); }
/* Rechendreieck */
.tri { position: relative; width: min(500px, 88cqw); aspect-ratio: 300 / 260; font-size: clamp(1.1em, 4cqw, 1.8em); margin-bottom: 1em; }
.tri-shape, .tri-shape svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tri .slot { position: absolute; transform: translate(-50%, -50%); width: 2.6em; height: 1.7em; }
.tri .slot.inner { background: #FFF7FB; } .tri .slot.inner.given { background: #FBCFE8; }
.tri .p0 { left: 50%; top: 42%; } .tri .p1 { left: 66%; top: 74%; } .tri .p2 { left: 34%; top: 74%; }
.tri .p3 { left: 83%; top: 42%; } .tri .p4 { left: 50%; top: 104%; } .tri .p5 { left: 17%; top: 42%; }
.tri .slot.dots { flex-wrap: wrap; gap: 2px; padding: 4px; height: auto; min-height: 1.7em; width: 3.1em; align-content: center; }
.tri .slot.dots .n { display: none; } .tri .slot.dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--red); }
/* Entdeckerpäckchen */
.pack { display: inline-flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 20px; padding: 14px 22px; box-shadow: 0 0 0 3px #E3E8F4 inset; font: 600 clamp(1.3em, 3.8cqw, 1.9em) var(--ff); }
.prow { display: grid; grid-template-columns: 2.2em 1em 2.2em 1em 2.6em; align-items: center; gap: 6px; text-align: center; border-radius: 10px; padding: 0 4px; }
.prow .slot { font-size: .95em; min-width: 2.4em; } .prow.sel { background: #FFF1F1; box-shadow: 0 0 0 3px var(--red) inset; } .prow.pick { cursor: pointer; }
.parrow { display: none; grid-template-columns: 2.2em 1em 2.2em 1em 2.6em; gap: 6px; padding: 0 4px; }
.pack.forscher .parrow { display: grid; }
.parrow i { font-style: normal; font-size: .5em; text-align: center; color: var(--pink); font-weight: 900; line-height: 1.2; }
/* Blitzrechnen */
.blitz-num { font-weight: 800; color: var(--mut); } .blitz-eq { font-size: clamp(2em, 7cqw, 3.2em); }
.blitz-time { font: 700 1.3em var(--ff); color: var(--te-d); } .blitz-aid { display: flex; justify-content: center; }
/* Stellentafel */
.tafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(110px, 170px); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 3px #CBD3E6 inset; }
.tcol { display: flex; flex-direction: column; align-items: center; border-left: 3px solid #CBD3E6; min-height: 210px; } .tcol:first-child { border-left: 0; }
.thead { width: 100%; text-align: center; padding: 6px 0; font-family: var(--ff); display: flex; flex-direction: column; line-height: 1.05; }
.thead b { font-size: 1.5em; } .tcol.T .thead { background: #FDE68A; } .tcol.H .thead { background: #FECACA; } .tcol.Z .thead { background: #BFDBFE; } .tcol.E .thead { background: #BBF7D0; }
.tbody { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; justify-content: center; align-content: flex-start; width: 100%; }
.tchip { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5C6B93, var(--ink)); box-shadow: 0 2px 0 #0B1430; animation: popin .25s; }
.tplus { width: 52px; height: 44px; border-radius: 14px; background: var(--te-l); color: var(--te-d); font: 700 1.6em var(--ff); margin: 6px 0 8px; box-shadow: 0 3px 0 #8FE3D6; }

.tdig { font: 700 2em var(--ff); padding: 4px 0 8px; }
.found { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 600px; }
.fchip { background: #E6F0FF; color: var(--blue); font: 700 1.3em var(--ff); padding: 4px 14px; border-radius: 12px; } .fcount { font-weight: 800; color: var(--mut); align-self: center; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* Zahlenstrahl */
.zs-wrap { width: 100%; max-width: 1000px; touch-action: none; }
.zstrahl { width: 100%; height: auto; overflow: visible; }
.zstrahl text { font-family: var(--ff); font-weight: 700; } .zs-help { color: var(--mut); font-weight: 700; }
/* Schriftlich addieren */
.coladd { display: grid; gap: 4px; font: 700 clamp(1.5em, 5cqw, 2.3em) var(--ff); background: #fff; padding: 12px 20px; border-radius: 16px; box-shadow: 0 0 0 3px #E3E8F4 inset;
  background-image: linear-gradient(90deg, #EEF2FB 1px, transparent 1px), linear-gradient(#EEF2FB 1px, transparent 1px); background-size: .8em .8em; }
.crow { display: grid; grid-template-columns: 1em repeat(var(--n), 1.5em); gap: 6px; align-items: center; justify-items: center; }
.crow.chead span { font-size: .55em; color: var(--mut); } .crow.plus::before { content: '+'; } .crow:not(.plus)::before { content: ''; }
.crow.carry { font-size: .6em; } .crow.carry .slot { min-width: 1.6em; height: 1.6em; color: var(--red); }
.crow .slot { min-width: 1.3em; width: 1.4em; height: 1.5em; padding: 0; }
.cline { border-top: 4px solid var(--ink); margin: 2px 0; }
.cards-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cards-board { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 700 1.6em var(--ff); background: #fff; padding: 12px 18px; border-radius: 18px; box-shadow: 0 0 0 3px #E3E8F4 inset; position: relative; }
.chd, .crow3 { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; text-align: center; } .chd span { font-size: .55em; color: var(--mut); }
.cplace { width: 62px; height: 74px; border-radius: 12px; border: 3px dashed #B8C3DE; background: #FAFBFF; font: 700 1.2em var(--ff); }
.cplace.drop-hover, .cplace.sel { border-color: var(--te); background: #E6FBF7; }
.cplace.filled { border-style: solid; background: #FFF7E0; border-color: #E8B04A; }
.cplus { position: absolute; left: 14px; top: 50%; }
.hand-cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dcard { width: 62px; height: 78px; border-radius: 12px; background: #FFF7E0; border: 3px solid #E8B04A; font: 700 2em var(--ff); box-shadow: 0 4px 0 #E8B04A; touch-action: none; }
.dcard.sel { transform: translateY(-8px); box-shadow: 0 8px 0 var(--te); border-color: var(--te); } .dcard.used { opacity: .25; pointer-events: none; }
.ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -60%) scale(1.12) rotate(-4deg); opacity: .92; }
/* Muster */
.mscroll { max-width: 100%; overflow-x: auto; padding: 8px; }
.mrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mcell { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #E3E8F4 inset; position: relative; }
.mcell small { position: absolute; bottom: -20px; font-weight: 800; color: var(--mut); font-size: .7em; }
.mcell.gap { border: 3px dashed #B8C3DE; box-shadow: none; background: #FAFBFF; } .mcell.gap.filled { border-style: solid; border-color: var(--te); background: #fff; }
.mcell.pnext { border-color: var(--te); box-shadow: 0 0 0 4px rgba(20, 184, 166, .2); }
.mcell.pick.sel { box-shadow: 0 0 0 4px var(--red) inset; background: #FFF1F1; }
.mcell.dots { box-shadow: none; background: none; font: 700 1.6em var(--ff); }
.palette { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; background: #fff; padding: 10px; border-radius: 20px; box-shadow: var(--sh-s); }
.ptok { width: 64px; height: 64px; border-radius: 16px; background: #F4F6FC; display: grid; place-items: center; box-shadow: 0 3px 0 #D5DCEC; }
.ptok:active { transform: translateY(2px); }
.grow { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.gwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; } .gwrap small { font-weight: 800; }
.gfig { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gfig i { width: 18px; height: 18px; border-radius: 50%; background: var(--te); display: inline-block; } .gfig i.mid { background: var(--or); }
.gfig > div { display: flex; gap: 3px; }
.gq { width: 70px; height: 70px; border-radius: 16px; border: 3px dashed #B8C3DE; display: grid; place-items: center; font: 700 2em var(--ff); color: var(--mut); }
.tok { display: block; }
/* Spiegeln */
.sgrid-wrap { display: flex; justify-content: center; }
.sgrid { --gs: clamp(26px, min(calc((100cqw - 20px) / (var(--c) + 1)), calc((100dvh - 400px) / (var(--r) + 1))), 50px); display: grid; grid-template-columns: repeat(var(--c), var(--gs)); grid-template-rows: repeat(var(--r), var(--gs)); position: relative;
  background: #fff; box-shadow: 0 0 0 3px #CBD3E6; border-radius: 6px; touch-action: none; }
.gc { border: 1px solid #E3E8F4; } .gc[data-v="1"] { background: var(--or); } .gc[data-v="2"] { background: var(--te); }
.gc.given[data-v="1"] { background: #E86A0C; } .gc.given[data-v="2"] { background: #0E9384; }
.gc.given { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 8px); }
.sgrid:not(.mini) .gc:not(.given) { cursor: pointer; }
.gc.bad { box-shadow: inset 0 0 0 3px var(--red); }
.saxis { position: absolute; background: var(--pink); pointer-events: none; border-radius: 3px; }
.saxis.v { top: -10px; bottom: -10px; left: 50%; width: 5px; margin-left: -2.5px; } .saxis.h { left: -10px; right: -10px; top: 50%; height: 5px; margin-top: -2.5px; }
.sgrid.mini { --gs: 14px; }
/* Würfelgebäude */
.iso-wrap { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; }
.iso { max-width: 100%; height: auto; } .iso .cF { fill: #FFB061; } .iso .cT { fill: #FFE1C2; } .iso .cR { fill: #F08A2E; } .iso path, .iso polygon { stroke: #7A3A0A; stroke-width: 1.6; stroke-linejoin: round; }
.build { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.bcol { display: flex; flex-direction: column; align-items: center; gap: 8px; } .bcol > b { font-family: var(--ff); font-weight: 600; }
.plan { display: grid; grid-template-columns: repeat(var(--n), 64px); gap: 4px; background: #E3E8F4; padding: 4px 4px 28px; border-radius: 10px; position: relative; }
.plan .pc { width: 64px; height: 64px; background: #fff; border-radius: 6px; display: grid; place-items: center; font: 700 1.8em var(--ff); color: var(--or-d); }
.plan button.pc:active { background: #FFF1E6; }
.plan.small { grid-template-columns: repeat(var(--n), 40px); } .plan.small .pc { width: 40px; height: 40px; font-size: 1.2em; }
.plan-front { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: .8em; color: var(--ink2); }
.plan-aid { display: flex; justify-content: center; }
.eye-arrow { display: flex; flex-direction: column; align-items: center; font: 700 1.6em var(--ff); color: var(--pink); }
.vgrid { display: grid; grid-template-columns: repeat(var(--c), 34px); grid-auto-rows: 34px; gap: 2px; }
.vgrid i { border: 2px dashed #E3E8F4; border-radius: 4px; } .vgrid i.on { background: #FFB061; border: 2px solid #7A3A0A; }
.choice .vgrid, .choice .plan { margin: 0 auto; }
.net { display: grid; grid-template-columns: repeat(var(--c), 26px); grid-auto-rows: 26px; }
.net i.on { background: #FFB061; border: 2px solid #7A3A0A; }
/* Geld */
.shop { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.product { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 12px 22px; border-radius: 22px; box-shadow: var(--sh-s); }
.product b { font-family: var(--ff); font-size: 1.2em; } .product img.em.xl { width: 84px; height: 84px; }
.tag { background: var(--yel); font: 700 1.3em var(--ff); padding: 4px 14px; border-radius: 12px; transform: rotate(-4deg); margin-top: 6px; box-shadow: 0 3px 0 #E0A100; }
.paid { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink2); }
.tray { width: min(640px, 100%); min-height: 132px; background: #E8F5E9; border: 4px dashed #81C784; border-radius: 22px; padding: 8px 12px; position: relative; display: flex; flex-direction: column; }
.tray.drop-hover { background: #D1F2D9; border-style: solid; }
.tray-lab { font-weight: 800; color: #2E7D32; font-size: .9em; } .tray-in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-height: 80px; }
.tray-sum { position: absolute; right: 12px; top: 6px; font: 700 1.2em var(--ff); color: #2E7D32; }
.wallet { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; background: linear-gradient(180deg, #9A6544, #7C4D31); padding: 14px; border-radius: 22px; box-shadow: inset 0 0 0 4px #6D4229, var(--sh-s); max-width: 760px; }
.coin { --s: 64px; width: var(--s); height: var(--s); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-family: var(--ff); cursor: pointer; flex: none; touch-action: none; position: relative; transition: transform .1s; }
.coin b { font-size: calc(var(--s) * .36); } .coin small { font-size: calc(var(--s) * .2); color: inherit; font-weight: 700; }
.coin.cu { background: radial-gradient(circle at 35% 30%, #F2B48A, #C46A35 70%); color: #5A2A0E; box-shadow: inset 0 0 0 3px #A65222, 0 3px 0 #7A3A14; }
.coin.au { background: radial-gradient(circle at 35% 30%, #FFE79A, #E2B23C 70%); color: #6B4A00; box-shadow: inset 0 0 0 3px #C29018, 0 3px 0 #8F6A0C; }
.coin.bi { background: radial-gradient(circle at 50% 50%, #FFE08A 0 46%, #CFD5DD 47%); color: #4B5563; box-shadow: inset 0 0 0 3px #9CA3AF, 0 3px 0 #6B7280; }
.coin.v1, .coin.v2 { --s: 46px; } .coin.v5 { --s: 52px; } .coin.v10 { --s: 50px; } .coin.v20 { --s: 56px; } .coin.v50 { --s: 62px; } .coin.v100 { --s: 60px; } .coin.v200 { --s: 66px; }
.coin.sm { --s: 40px !important; }
.note { width: 110px; height: 60px; border-radius: 8px; background: var(--nc, #9FD3A8); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; flex: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(255, 255, 255, .45); touch-action: none; overflow: hidden; }
.note b { font: 700 1.3em var(--ff); color: #1F2937; z-index: 1; background: rgba(255, 255, 255, .55); padding: 0 8px; border-radius: 6px; }
.note i { position: absolute; right: -12px; top: -12px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.note.sm { width: 80px; height: 44px; } .note.sm b { font-size: 1em; }
.coin:active, .note:active { transform: scale(.94); }
.tray .coin, .tray .note { animation: popin .25s; }
/* Uhr */
.clock-wrap { display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; }
.clock { width: clamp(200px, min(42cqw, calc(100dvh - 420px)), 330px); height: auto; touch-action: none; }
.clock .c-rim { fill: #fff; stroke: var(--te); stroke-width: 10; } .clock .c-face { fill: #F0FDFA; } .clock .c-num { font: 700 20px var(--ff); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.clock .c-hour { stroke: var(--ink); stroke-width: 10; stroke-linecap: round; } .clock .c-min { stroke: var(--or); stroke-width: 6; stroke-linecap: round; } .clock .c-pin { fill: var(--ink); }
.clock.live { cursor: grab; } .clock.drag-h .c-hour { stroke: var(--te-d); } .clock.drag-m .c-min { stroke: var(--or-d); }
.clock-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.digi { font: 700 2.4em ui-monospace, Menlo, monospace; background: var(--ink); color: #7CFFB2; padding: 6px 18px; border-radius: 14px; letter-spacing: .05em; }
.digi-in { display: flex; align-items: center; gap: 6px; font: 700 2em var(--ff); background: var(--ink); padding: 10px 14px; border-radius: 18px; color: #7CFFB2; }
.digi-in .slot { background: #0F1A33; color: #7CFFB2; border-color: #3A4A70; } .digi-in .eqt { color: #fff; font-size: .7em; margin-left: 6px; }
.hourbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tl { display: flex; align-items: center; width: min(700px, 100%); font-weight: 800; }
.tl-t { background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 10px; font-family: var(--ff); z-index: 1; }
.tl-seg { height: 36px; display: grid; place-items: center; border-radius: 6px; margin: 0 -4px; } .tl-seg b { font-size: .85em; }
.tl-seg.s1 { background: #FFD8B5; color: var(--or-d); } .tl-seg.s2 { background: #B9F0E6; color: var(--te-d); }
/* Sachrechnen */
.story { background: #fff; padding: 16px 20px; border-radius: 20px; box-shadow: 0 0 0 3px #E3E8F4 inset; font-size: 1.2em; font-weight: 700; max-width: 760px; line-height: 1.45; }
.svis { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.scene { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; justify-content: center; background: #FFFBEA; padding: 8px; border-radius: 16px; }
.scene img.em.md { width: 34px; height: 34px; }
/* Daten */
.chart { background: #fff; border-radius: 18px; padding: 12px 16px 8px; box-shadow: 0 0 0 3px #E3E8F4 inset; width: min(560px, 100%); }
.ch-title { font: 600 1.05em var(--ff); text-align: center; margin-bottom: 12px; }
.ch-body { position: relative; height: clamp(170px, calc(100dvh - 540px), 280px); margin-left: 34px; margin-bottom: 46px; }
.ch-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ch-line { border-top: 1.5px solid #E3E8F4; height: 0; position: relative; } .ch-line span { position: absolute; left: -36px; top: -.7em; width: 28px; text-align: right; font-weight: 800; font-size: .8em; color: var(--ink2); }
.ch-bars { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; }
.ch-col { position: relative; height: 100%; width: 14%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ch-bar { width: 100%; background: linear-gradient(180deg, #38BDF8, #0284C7); border-radius: 8px 8px 0 0; animation: grow .7s cubic-bezier(.3, 1.3, .5, 1) both; transform-origin: bottom; }
.ch-col:nth-child(2) .ch-bar { background: linear-gradient(180deg, #FB923C, #EA580C); } .ch-col:nth-child(3) .ch-bar { background: linear-gradient(180deg, #4ADE80, #16A34A); } .ch-col:nth-child(4) .ch-bar { background: linear-gradient(180deg, #C084FC, #9333EA); }
.ch-lab { position: absolute; bottom: -44px; }
@keyframes grow { from { transform: scaleY(0); } }
.cb-wrap { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.wimmel { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; justify-content: center; background: #F0FDF4; padding: 12px; border-radius: 18px; }
.wim { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; position: relative; }
.wim img.em.md { width: 38px; height: 38px; } .wim.done img { opacity: .3; } .wim.done::after { content: '✓'; position: absolute; color: var(--green); font: 900 30px var(--ff); }
.bchart { display: flex; gap: 10px; background: #fff; padding: 10px 14px; border-radius: 18px; box-shadow: 0 0 0 3px #E3E8F4 inset; }
.bcol2 { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 12px; padding: 4px; }
.bcol2.bad { background: #FFF1F1; box-shadow: 0 0 0 3px var(--red) inset; }
.bval { font: 700 1.3em var(--ff); }
.bbar { display: flex; flex-direction: column; gap: 3px; }
.bcell { width: 46px; height: clamp(18px, calc((100dvh - 480px) / 11), 30px); border-radius: 5px; background: #F1F4FA; box-shadow: inset 0 0 0 1.5px #DCE2EF; }
.bcell.on { background: linear-gradient(90deg, #38BDF8, #0EA5E9); box-shadow: none; }
.blab { padding-top: 4px; }
.tally-tab { display: flex; flex-direction: column; gap: 8px; background: #fff; padding: 12px 16px; border-radius: 18px; box-shadow: 0 0 0 3px #E3E8F4 inset; }
.trow { display: grid; grid-template-columns: 40px 110px auto; align-items: center; gap: 8px; font-weight: 800; }
.tally line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.ballbox { display: flex; flex-wrap: wrap; gap: 8px; width: 240px; padding: 18px; background: #F5E6D3; border: 5px solid #B88A5A; border-radius: 10px 10px 26px 26px; justify-content: center; box-shadow: inset 0 8px 0 rgba(0, 0, 0, .06); }
.ballbox i, i.ball { width: 38px; height: 38px; border-radius: 50%; display: inline-block; box-shadow: inset -5px -6px 0 rgba(0, 0, 0, .15), inset 4px 4px 0 rgba(255, 255, 255, .35); flex: none; }
.choice i.ball { width: 34px; height: 34px; }
.wheel .wheel-rot { transform-origin: 100px 100px; }
.spin-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.spin-side { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 260px; }
.guess { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 800; }
.gbtn { display: flex; gap: 6px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; }
.gbtn i.ball { width: 26px; height: 26px; } .gbtn.sel { box-shadow: 0 0 0 4px var(--ink) inset; }
.sp-chart { display: flex; flex-direction: column; gap: 6px; } .sp-row { display: grid; grid-template-columns: 30px 1fr 34px; gap: 8px; align-items: center; font: 700 1.1em var(--ff); }
.sp-row i.ball { width: 26px; height: 26px; } .sp-bar { height: 22px; background: #F1F4FA; border-radius: 999px; overflow: hidden; } .sp-bar b { display: block; height: 100%; border-radius: 999px; transition: width .2s; }
.kombi { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.kombi > div:first-child { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kleider { display: flex; gap: 8px; } .kl { padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; } .kl.sel { box-shadow: 0 0 0 4px var(--te) inset; background: #F0FDFA; }
.outfits { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; max-width: 420px; align-content: flex-start; }
.outfit { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 0 0 2px #E3E8F4 inset; animation: popin .3s; } .outfit svg { width: 40px; }
.dice-wrap { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
.drow { display: flex; gap: 14px; align-items: center; } .dbox .dice { width: 64px; height: 64px; }
.dchart { display: flex; gap: 6px; align-items: flex-end; height: clamp(120px, calc(100dvh - 580px), 200px); width: min(560px, 100%); padding-top: 18px; }
.dc-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.dc-bar { width: 100%; background: linear-gradient(180deg, #A78BFA, #7C3AED); border-radius: 6px 6px 0 0; position: relative; min-height: 2px; transition: height .15s; }
.dc-bar small { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-weight: 800; color: var(--ink2); }
.dc-col b { font-family: var(--ff); }
/* ---------- Ergebnis ---------- */
.result { min-height: 100dvh; display: grid; place-items: center; padding: 20px 0; }
.r-card { background: #fff; border-radius: 34px; padding: 24px clamp(18px, 4vw, 40px) 28px; box-shadow: var(--sh); width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: popin .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.r-fino { width: 140px; height: 156px; margin-top: -10px; }
.r-card h2 { font-size: 2.2em; color: var(--or); margin: 0; }
.r-stars { display: flex; gap: 10px; align-items: flex-end; }
.rs { font-style: normal; font-size: 70px; line-height: 1; color: #E5E9F2; }
.rs.on { color: #FFB800; text-shadow: 0 5px 0 #E09A00; animation: starIn .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.rs:nth-child(2) { font-size: 88px; }
@keyframes starIn { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
.r-sum { font-weight: 800; font-size: 1.2em; margin: 0; } .r-dots { display: flex; gap: 6px; }
.r-dots i { width: 20px; height: 20px; border-radius: 50%; } .r-dots i.g { background: var(--green); } .r-dots i.y { background: var(--yel); } .r-dots i.r { background: #FCA5A5; }
.r-tip { background: #F0FDFA; border-radius: 16px; padding: 10px 16px; font-weight: 700; margin: 4px 0; }
.r-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.r-ward, .r-next { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink2); margin: 0; }
.r-ward { background: #FFF7E0; padding: 8px 14px; border-radius: 14px; color: var(--ink); }
.r-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
/* ---------- Forscherpass ---------- */
.pass { padding-bottom: 40px; }
.p-head { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #FFE3C7, #FFF1E2); border-radius: 28px; padding: 16px 20px; box-shadow: var(--sh-s); flex-wrap: wrap; }
.p-av { width: 80px; height: 80px; border-radius: 24px; background: #fff; display: grid; place-items: center; } .p-av img.em { width: 56px; height: 56px; }
.p-head h2 { margin: 0; font-size: 1.7em; } .p-head p { margin: 0; font-weight: 700; color: var(--ink2); }
.p-stats { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.p-stats span { background: #fff; border-radius: 18px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; min-width: 86px; }
.p-stats b { font: 700 1.6em var(--ff); color: var(--or-d); }
.p-ward { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 26px; padding: 14px 18px; margin: 14px 0; box-shadow: var(--sh-s); }
.p-fino { width: 120px; height: 133px; flex: none; }
.ward { display: flex; gap: 10px; flex-wrap: wrap; }
.ward-it { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 110px; padding: 10px 6px; border-radius: 18px; background: #F4F6FC; box-shadow: 0 3px 0 #D5DCEC; }
.ward-it b { font-family: var(--ff); font-size: .9em; } .ward-it.on { background: #E6FBF7; box-shadow: 0 0 0 3px var(--te) inset; } .ward-it.locked { filter: grayscale(1); opacity: .5; }
.p-h { font-size: 1.4em; margin: 18px 0 10px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { background: #fff; border-radius: 20px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: var(--sh-s); filter: grayscale(1); opacity: .45; }
.badge.on { filter: none; opacity: 1; background: linear-gradient(180deg, #FFFBEA, #fff); box-shadow: 0 0 0 3px #FFE38A inset, var(--sh-s); }
.badge b { font-family: var(--ff); } .badge small { font-size: .74em; }
.badge.pop { animation: popin .6s 1s cubic-bezier(.3, 1.6, .5, 1) both; flex-direction: row; gap: 8px; padding: 8px 14px; }
.stamps { border-radius: 24px; padding: 14px; margin-bottom: 12px; } .stamps h4 { font-size: 1.2em; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stamp { background: rgba(255, 255, 255, .85); border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 3px dashed rgba(30, 42, 74, .18); }
.stamp.on { border: 3px solid var(--c); background: #fff; } .stamp:not(.on) img.em { filter: grayscale(1); opacity: .5; }
.stamp b { font-family: var(--ff); font-weight: 600; font-size: .92em; line-height: 1.1; }
.st-lv { display: flex; gap: 4px; } .st-lv i { width: 24px; height: 24px; border-radius: 50%; background: #EEF1F7; font-style: normal; font-weight: 900; font-size: .75em; display: grid; place-items: center; color: #fff; }
.st-lv i.l1.on { background: #4ADE80; } .st-lv i.l2.on { background: #22B5A3; } .st-lv i.l3.on { background: #15803D; }
.p-code { background: #fff; border-radius: 22px; padding: 14px 18px; margin-top: 16px; box-shadow: var(--sh-s); }
.pcode { font-size: 1.4em; font-weight: 800; background: #F4F6FC; padding: 10px 14px; border-radius: 12px; word-break: break-all; -webkit-user-select: all; user-select: all; }
/* ---------- Einstellungen / Lehrkräfte ---------- */
.settings, .teacher, .gate { padding-bottom: 40px; }
.set-card { background: #fff; border-radius: 24px; padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--sh-s); max-width: 820px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1.5px solid #F0F2F8; cursor: pointer; }
.set-row > span { display: flex; flex-direction: column; }
.sw { appearance: none; -webkit-appearance: none; width: 62px; height: 36px; border-radius: 999px; background: #D5DCEC; position: relative; transition: .2s; flex: none; cursor: pointer; margin: 0; }
.sw::after { content: ''; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: .2s; }
.sw:checked { background: var(--te); } .sw:checked::after { left: 30px; }
.seg { display: flex; background: #F0F2F8; border-radius: 14px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: .9em; } .seg button.sel { background: #fff; box-shadow: var(--sh-s); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gate .w-card { margin: 40px auto; }
.t-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.t-tabs button { padding: 10px 16px; border-radius: 14px; background: #fff; font-weight: 800; box-shadow: var(--sh-s); } .t-tabs button.sel { background: var(--ink); color: #fff; }
.t-body { background: #fff; border-radius: 24px; padding: 20px clamp(14px, 3vw, 30px); box-shadow: var(--sh-s); -webkit-user-select: text; user-select: text; line-height: 1.5; }
.t-body li { margin-bottom: 6px; } .t-body code { background: #F4F6FC; padding: 1px 6px; border-radius: 6px; font-size: .9em; word-break: break-all; }
.tab-wrap { overflow-x: auto; margin: 10px 0 16px; }
.map-tab { border-collapse: collapse; width: 100%; font-size: .84em; min-width: 900px; }
.map-tab th { background: var(--ink); color: #fff; text-align: left; padding: 8px; } .map-tab th:first-child { border-radius: 10px 0 0 0; } .map-tab th:last-child { border-radius: 0 10px 0 0; }
.map-tab td { padding: 8px; border-bottom: 1.5px solid #EEF1F7; vertical-align: top; } .map-tab tr:nth-child(even) td { background: #FAFBFE; }
.map-tab td:first-child { white-space: nowrap; }
/* ---------- Hochformat & kleine Bildschirme ---------- */
@media (orientation: portrait), (max-width: 860px) {
  .play-main { flex-direction: column; }
  .has-pad .side { width: 100%; }
  .keypad { grid-template-columns: repeat(6, 1fr); padding: 8px; gap: 8px; max-width: 720px; margin: 0 auto; width: 100%; }
  .key { height: 58px; font-size: 1.7em; }
  .intro .i-body { grid-template-columns: 1fr; }
  .i-left { flex-direction: row; align-items: center; } .i-fino { width: 120px; height: 134px; flex: none; } .i-bubble::before { display: none; }
  .field.f100 { --cs: clamp(18px, calc((100cqw - 40px) / 11.5), 46px); }
  .sgrid { --gs: clamp(24px, calc((100cqw - 20px) / (var(--c) + 1)), 50px); }
  .clock { width: clamp(200px, 56cqw, 320px); }
  .ch-body { height: 220px; } .bcell { height: 22px; } .dchart { height: 170px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  #app { padding: 0 8px; }
  .topbar { gap: 8px; } .tb-pills { order: 3; margin-left: 0; width: 100%; } .me { flex: 1; } .me-txt small { font-size: .7em; }
  .m-fino { width: 70px; height: 78px; } .m-bubble { font-size: 1em; padding: 10px 14px; }
  .nodes { grid-template-columns: repeat(2, 1fr); gap: 10px; } .n-ic { width: 54px; height: 54px; } .n-ic img.em { width: 36px; height: 36px; }
  .world { grid-template-columns: 1fr; } .a-head h2 { font-size: 1.25em; } .a-ic { width: 48px; height: 48px; } .a-ic img.em { width: 32px; height: 32px; }
  .lv-cards { grid-template-columns: 1fr; gap: 18px; } .lv-card { flex-direction: row; text-align: left; flex-wrap: wrap; padding: 14px; } .lv-card .lv-d { flex-basis: 100%; order: 5; }
  .play-top { gap: 8px; padding: 8px 0 6px; } .pt-title { font-size: 1.05em; } .pt-title img.em { display: none; } .pdots i { width: 12px; height: 12px; } .pdots { gap: 4px; }
  .icon-btn { width: 44px; height: 44px; } .lvl-pill { font-size: .72em; padding: 4px 8px; }
  .prompt { padding: 8px 12px 8px 8px; gap: 10px; } .say-btn { width: 46px; height: 46px; } .say-btn img.em { width: 24px; height: 24px; }
  .stage { padding: 12px 8px; border-radius: 20px; gap: 12px; }
  .key { height: 50px; font-size: 1.5em; border-radius: 14px; } .keypad { gap: 6px; padding: 6px; border-radius: 18px; }
  .play-bar { gap: 8px; padding: 8px 8px calc(8px + var(--safe-b)); }
  .pb-fino { width: 44px; height: 49px; margin-top: -8px; } .pb-bubble { font-size: .88em; padding: 8px 10px; }
  .pb-right { gap: 6px; } .pb-right .btn { min-width: 0; padding: .5em .7em; min-height: 48px; } .pb-right .btn-soft span { display: none; }
  .play { padding-bottom: calc(86px + var(--safe-b)); }
  .choice { flex-basis: 100%; padding: 12px 14px; font-size: 1em; } .choices.grid2 { grid-template-columns: 1fr; }
  .tafel { grid-auto-columns: minmax(70px, 1fr); } .tchip { width: 24px; height: 24px; }
  .avatars { grid-template-columns: repeat(4, 1fr); } .kl-btn { width: 66px; height: 66px; }
  .wallet { padding: 10px; gap: 8px; } .note { width: 90px; height: 50px; }
  .plan { grid-template-columns: repeat(var(--n), 50px); } .plan .pc { width: 50px; height: 50px; }
  .rs { font-size: 54px; } .rs:nth-child(2) { font-size: 68px; }
  .p-ward { flex-direction: column; } .p-stats { margin-left: 0; }
  .w-hero { flex-direction: column; text-align: center; gap: 4px; }
  .cb-wrap { gap: 12px; } .bcell { width: 36px; } .wim { width: 40px; height: 40px; } .wim img.em.md { width: 32px; height: 32px; }
}
@media (max-height: 560px) and (orientation: landscape) { .pb-fino { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } #sky .cl { display: none; } }
@media print { #sky, .play-top, .t-tabs, .btn { display: none !important; } body { background: #fff; } .t-body { box-shadow: none; } .map-tab { min-width: 0; font-size: 10px; } }
.fchip.new { background: #F3EEFF; color: #6D28D9; }
/* Malwinkel: Hunderterpunktefeld mit Winkel */
.field.winkel { position: relative; }
.field.winkel .fcell .chip { transform: scale(.42); background: #E8C98A; }
.field.winkel .fcell.in { background: #FFF0D9; }
.field.winkel .fcell.in .chip { transform: scale(1); background: radial-gradient(circle at 35% 30%, #FF8A8A, var(--red) 60%, #D32F2F); box-shadow: 0 2px 0 #B71C1C; }
.field.winkel .fcell[data-v="1"] .chip { transform: scale(1); }
.field.deriv .fcell[data-v="3"] .chip { transform: scale(1); }
.story-card { display: flex; gap: 14px; align-items: flex-start; background: #FFFDF5; border: 3px solid #F5DFA8; border-radius: 22px; padding: 16px 20px; max-width: 780px; width: 100%; box-shadow: var(--sh-s); }
.story-card p { margin: 0; font: 500 clamp(1.15em, 3cqw, 1.45em)/1.45 var(--ff); }
.story-card b { color: var(--or-d); } .sc-ic img.em { width: 40px; height: 40px; }
.groups { gap: 10px; } .grp { display: flex; flex-wrap: wrap; gap: 2px; width: 92px; padding: 4px; border: 2px dashed #E8B04A; border-radius: 10px; justify-content: center; }
.grp img.em.sm { width: 22px; height: 22px; }
.world { align-items: start; }