:root{--map-sea:#eef1f4;--map-land:#dcdcdb;--map-border:#fafafa;--map-hover:#bdbdbc;--map-city:#e9e9e8;--relief-opacity:.6}@media (prefers-color-scheme:dark){:root{--map-sea:#0f1113;--map-land:#2e2e2e;--map-border:#0f1113;--map-hover:#505050;--map-city:#252525;--relief-opacity:.8}}body:has([data-quiz]){overflow:hidden}.quiz{grid-template-columns:minmax(0,1fr) 22rem;height:100dvh;display:grid}.map{background:var(--map-sea);min-height:0;position:relative}.stage{overscroll-behavior:contain;scrollbar-width:thin;position:absolute;inset:0;overflow:auto}.canvas{width:100%;height:100%;position:relative}.stage[data-zoom="2"] .canvas{width:200%;height:200%}.stage[data-zoom="3"] .canvas{width:300%;height:300%}.canvas svg{width:100%;height:100%;padding:1rem;display:block;position:absolute;inset:0}.canvas .fills{touch-action:manipulation;will-change:transform}.canvas .overlay{pointer-events:none}.stage path{fill:var(--map-land);stroke:none;pointer-events:fill}.stage path.borders{fill:none;stroke:var(--map-border);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none;transition:none}.stage path.city{fill:var(--map-city)}.stage path.done-ok{fill:color-mix(in srgb, var(--ok) 40%, var(--map-land))}.stage path.done-late{fill:color-mix(in srgb, var(--warn) 45%, var(--map-land))}.stage path.done-miss{fill:color-mix(in srgb, var(--bad) 40%, var(--map-land))}.canvas .mark{pointer-events:none;will-change:opacity}.stage .mark path{pointer-events:none}.stage .mark.target path{fill:var(--accent)}.stage .mark.reveal path{fill:var(--ok)}.canvas .mark.target{animation:1.6s ease-in-out infinite target}.canvas .mark.reveal{animation:.5s 3 blink}.canvas .hover{pointer-events:none;will-change:transform}.stage .hover path{fill:var(--map-hover);pointer-events:none;transition:none}.stage .hover path.done-ok{fill:color-mix(in srgb, var(--ok) 60%, var(--map-hover))}.stage .hover path.done-late{fill:color-mix(in srgb, var(--warn) 65%, var(--map-hover))}.stage .hover path.done-miss{fill:color-mix(in srgb, var(--bad) 60%, var(--map-hover))}.stage path.correct{fill:var(--ok)!important}.stage path.wrong{fill:var(--bad)!important}.relief{object-fit:contain;mix-blend-mode:multiply;width:calc(100% - 2rem);height:calc(100% - 2rem);opacity:var(--relief-opacity);pointer-events:none;user-select:none;will-change:transform;position:absolute;inset:1rem}@keyframes target{50%{opacity:.45}}@keyframes shake{20%,60%{translate:-3px}40%,80%{translate:3px}}@keyframes blink{50%{opacity:.25}}.zoom{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));box-shadow:var(--shadow);border-radius:999px;gap:1px;display:grid;position:absolute;overflow:hidden}.zoom-btn{background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(8px);width:2.75rem;height:2.75rem;color:var(--fg);font:inherit;cursor:pointer;border:0;font-size:1.25rem}.zoom-btn:hover{background:var(--surface)}.cue{z-index:4;pointer-events:none;white-space:nowrap;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);color:var(--muted);opacity:0;border-radius:999px;padding:.35rem .85rem;font-size:.9rem;transition:opacity .2s;position:fixed}.cue strong{color:var(--fg);font-weight:600}.cue.is-visible{opacity:1}.cue.is-new{animation:.35s ease-out cue-in}@keyframes cue-in{0%{scale:.85}60%{scale:1.06}}.pop{z-index:10;pointer-events:none;white-space:nowrap;background:var(--fg);color:var(--bg);box-shadow:var(--shadow);border-radius:999px;padding:.35rem .8rem;font-size:.9rem;font-weight:500;animation:1.8s ease-out forwards pop;position:fixed;translate:-50% calc(-100% - 12px)}@keyframes pop{0%{opacity:0;scale:.6}12%{opacity:1;scale:1.05}20%{scale:1}80%{opacity:1}to{opacity:0}}.ghost{z-index:3;pointer-events:none;will-change:scale, opacity;animation:.8s ease-out forwards ghost;position:fixed;overflow:visible}.ghost path{stroke-width:8px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.ghost.ok path{fill:var(--ok);stroke:var(--ok)}.ghost.bad path{fill:var(--bad);stroke:var(--bad)}.ghost.bad{animation:.8s ease-out forwards ghost,.4s shake}@keyframes ghost{0%{opacity:.7;scale:1}to{opacity:0;scale:var(--grow)}}.ripple{z-index:5;pointer-events:none;position:fixed;translate:-50% -50%}.ripple.ok{--c:var(--ok)}.ripple.bad{--c:var(--bad)}.ripple:before,.ripple:after{content:"";border-radius:50%;position:absolute;inset:0}.ripple:before{background:radial-gradient(circle, color-mix(in srgb, var(--c) 60%, transparent) 0%, color-mix(in srgb, var(--c) 25%, transparent) 55%, transparent 71%);animation:.9s ease-out forwards glow}.ripple:after{border:3px solid var(--c);animation:.9s ease-out forwards ring}@keyframes glow{0%{opacity:0;scale:.2}25%{opacity:1}to{opacity:0;scale:1}}@keyframes ring{0%{opacity:0;scale:.4}20%{opacity:1}to{opacity:0;scale:1.15}}@media (prefers-reduced-motion:reduce){.ripple,.ghost{display:none}.pop{animation-timing-function:step-end}}.panel{border-left:1px solid var(--line);background:var(--bg);flex-direction:column;gap:1.75rem;min-height:0;padding:1.25rem 1.5rem 2rem;display:flex;overflow-y:auto}.panel-head{justify-content:space-between;align-items:center;gap:1rem;margin-inline:-.6rem 0;display:flex}.question h1{color:var(--muted);margin:.5rem 0 .25rem;font-size:1.15rem;font-weight:400}.question h1 strong{color:var(--fg);letter-spacing:-.02em;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:600;line-height:1.15;display:block}.level{background:var(--soft);color:var(--muted);border-radius:999px;margin:.5rem 0 0;padding:.15rem .6rem;font-size:.8rem;display:inline-block}.progress{gap:.3rem;margin:1.25rem 0 0;padding:0;list-style:none;display:flex}.progress li{background:var(--line);border-radius:999px;flex:1;height:.3rem;transition:background-color .3s}.progress li.current{background:var(--muted)}.progress.long li{background:linear-gradient(to right, var(--fg) calc(var(--done) * 100%), var(--line) 0)}.progress li.ok{background:var(--ok)}.progress li.late{background:var(--warn)}.progress li.miss{background:var(--bad)}.question-meta{justify-content:space-between;gap:1rem;display:flex}.timer{color:var(--fg);letter-spacing:.02em;font-size:.9rem}.answer{--pad:.75rem;--field:3rem;z-index:6;width:min(24rem,100vw - 2rem);padding:var(--pad);border:1px solid var(--line);border-radius:calc(var(--field) / 2 + var(--pad));background:color-mix(in srgb, var(--surface) 92%, transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow);grid-template-columns:minmax(0,1fr);gap:.6rem;transition:left .35s,top .35s;display:grid;position:fixed}.answer[hidden]{display:none}.answer-row{gap:.5rem;display:flex}.answer input{width:0;min-width:0;height:var(--field);border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;border-radius:999px;flex:1 1 0;padding:0 1.1rem;font-size:max(1.25rem,16px)}.answer input:focus{border-color:var(--fg);outline:none}.answer .btn-primary{height:var(--field);padding-inline:1.3rem;font-size:1rem}.answer-foot{color:var(--muted);justify-content:space-between;align-items:center;gap:.5rem;padding-left:1.1rem;font-size:.85rem;display:flex}.answer-feedback{min-width:0}.answer-row[hidden],.answer [hidden]{display:none}.answer-diff{padding:.15rem .6rem 0}.answer-diff p{margin:0}.diff-correct{letter-spacing:.01em;font-size:1.6rem;font-weight:600;line-height:1.25}.diff-typed{color:var(--muted);font-size:1rem;margin-top:.2rem!important}.answer-diff mark,.answer-diff del,.answer-diff .miss{color:inherit;border-radius:.25em;padding:0 .06em;text-decoration:none}.answer-diff mark.fix{background:color-mix(in srgb, var(--ok) 30%, transparent);box-shadow:inset 0 -2px var(--ok)}.answer-diff mark.swap{background:color-mix(in srgb, var(--warn) 35%, transparent);box-shadow:inset 0 -2px var(--warn)}.answer-diff del.bad{background:color-mix(in srgb, var(--bad) 18%, transparent);color:var(--bad);text-decoration:line-through}.answer-diff .miss{vertical-align:-.12em;background:color-mix(in srgb, var(--bad) 18%, transparent);width:.6em;height:.95em;box-shadow:inset 0 -2px var(--bad);border-radius:2px;margin:0 .05em;display:inline-block}.answer-feedback:empty:before{content:"Enter zum Bestätigen";opacity:.7}.answer-feedback.ok{color:var(--ok)}.answer-feedback.bad{color:var(--bad)}.answer .btn-quiet{flex-shrink:0;margin:-.3rem 0;font-size:.85rem}.question-foot{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.skip{flex-shrink:0;margin:.45rem -.6rem 0 0;font-size:.85rem}.skip[hidden]{display:none}.feedback{min-height:1.5em;margin:.9rem 0 0;font-size:.95rem}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}.feedback.info{color:var(--muted)}.settings{color:var(--muted);gap:.6rem;font-size:.9rem;display:grid}.setting{justify-content:space-between;align-items:center;gap:1rem;display:flex}.switch{cursor:pointer}.switch input{appearance:none;background:var(--line);cursor:pointer;border-radius:999px;width:2.6rem;height:1.5rem;margin:0;transition:background-color .2s;position:relative}.switch input:after{content:"";background:var(--surface);border-radius:50%;width:1.1rem;height:1.1rem;transition:translate .2s;position:absolute;top:.2rem;left:.2rem;box-shadow:0 1px 2px #0003}.switch input:checked{background:var(--fg)}.switch input:checked:after{translate:1.1rem}.segmented{background:var(--soft);border-radius:999px;padding:.2rem;display:inline-flex}.segmented input{opacity:0;position:absolute}.segmented span{min-width:2.2rem;color:var(--muted);text-align:center;cursor:pointer;border-radius:999px;padding:.3rem .7rem;transition:background-color .15s,color .15s;display:block}.segmented input:checked+span{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px #0000001a}.segmented input:focus-visible+span{outline:2px solid var(--fg)}.stats h2{margin:0;font-size:1rem;font-weight:600}.stats h3{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:1.5rem 0 .4rem;font-size:.75rem;font-weight:500}.stats-head{justify-content:space-between;align-items:center;margin-right:-.6rem;display:flex}.stats-summary{color:var(--muted);margin:.4rem 0 .9rem;font-size:.9rem}.stats-summary strong{color:var(--fg);font-size:1.5rem;font-weight:600}.bar{border-radius:999px;gap:2px;height:.5rem;display:flex;overflow:hidden}.bar span{flex-basis:0;transition:flex-grow .4s}.legend{color:var(--muted);flex-wrap:wrap;gap:.4rem 1rem;margin:.6rem 0 0;padding:0;font-size:.8rem;list-style:none;display:flex}.legend li:before{content:"";background:currentColor;border-radius:50%;width:.55rem;height:.55rem;margin-right:.35rem;display:inline-block}.bar .new,.legend .new:before{background:var(--line)}.bar .shaky,.legend .shaky:before{background:var(--bad)}.bar .almost,.legend .almost:before{background:var(--warn)}.bar .known,.legend .known:before{background:var(--ok)}.rows{margin:0;padding:0;font-size:.9rem;list-style:none}.rows li{border-bottom:1px solid var(--line);justify-content:space-between;gap:1rem;padding:.4rem 0;display:flex}.rows li span:last-child{color:var(--muted);flex-shrink:0}.credits{color:var(--muted);margin:2rem 0 0;font-size:.75rem;line-height:1.5}.credits a{color:inherit}.sheet-toggle{display:none}.result{background:var(--surface);width:min(24rem,100vw - 2rem);color:var(--fg);box-shadow:var(--shadow);text-align:center;border:0;border-radius:1.25rem;padding:1.75rem}.result::backdrop{backdrop-filter:blur(2px);background:#00000059}.result h2{margin:.4rem 0 .5rem;font-size:1.5rem;font-weight:600}.result p{color:var(--muted)}.result-actions{justify-content:center;gap:.5rem;margin-top:1.25rem;display:flex}@media (width<=860px){.quiz{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.panel{padding:calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;border-left:0;border-bottom:1px solid var(--line);grid-row:1;grid-template-columns:1fr auto;gap:0;display:grid;overflow:visible}.panel-head{grid-column:1/-1;margin-bottom:.25rem}.question{grid-column:1}.question h1{margin-top:.25rem}.question h1 strong{font-size:1.5rem}.level{display:none}.progress{margin-top:.75rem}.feedback{margin-top:.5rem;font-size:.9rem}.sheet-toggle{grid-area:2/2;align-self:start;margin-top:.4rem;padding:.4rem .9rem;display:inline-flex}.sheet{z-index:20;max-height:75dvh;padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));background:var(--bg);border-radius:1.25rem 1.25rem 0 0;gap:1.5rem;transition:transform .3s;display:grid;position:fixed;inset:auto 0 0;overflow-y:auto;transform:translateY(105%);box-shadow:0 -8px 32px #00000026}.sheet-open .sheet{transform:none}}