:root {--navy:#17324d;--teal:#087f8c;--teal-dark:#086b75;--paper:#fff;--ink:#263b4f;--muted:#617385;--bg:#f3f7fa;--border:#dce7ed;--pale:#eaf6f7;--gold:#c6871c;--gold-bg:#fff5e3;--danger:#b13a3a;--success:#167256}
* {box-sizing:border-box} html {scroll-behavior:smooth}body {margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.48}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dfa635;outline-offset:3px}.shell{width:min(1020px,calc(100% - 36px));margin-inline:auto}.skip{position:absolute;left:-999px;top:6px;background:#fff;padding:10px;z-index:90}.skip:focus{left:10px}.masthead{background:var(--navy);color:#fff}.masthead-inner{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px}.logo{display:flex;align-items:center;gap:11px;font-size:14px;letter-spacing:.16em;font-weight:800}.logo-mark{display:inline-grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#12a0a4;font-family:Georgia,serif;font-size:25px;letter-spacing:0}.pill{font-size:12px;border-radius:999px;padding:7px 12px}.pill-light{background:#304960;color:#ecf7fa}.intro{padding:53px 0 24px}.eyebrow{display:block;color:var(--teal);font-weight:850;font-size:11px;letter-spacing:.16em}.intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(41px,7vw,68px);letter-spacing:-.04em;line-height:1.04;margin:11px 0 14px;color:var(--navy)}.intro h1 span{color:var(--teal)}.lede{font-size:17px;max-width:665px;color:var(--muted);margin:0 0 25px}.level-area{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.level-caption{font-size:13px;font-weight:750;letter-spacing:.04em}.level-switch{display:inline-flex;flex-wrap:wrap;gap:5px;padding:5px;border:1px solid var(--border);background:#fff;border-radius:15px}.level-button{background:transparent;border:0;color:var(--muted);padding:10px 17px;border-radius:11px;font-weight:850;font-size:13px;text-align:left}.level-button span{display:block;font-weight:500;font-size:11px;color:inherit}.level-button[aria-pressed=true]{background:var(--navy);color:white;box-shadow:0 2px 8px #17324d28}.instruction{display:flex;gap:15px;border:1px solid #c8e3e5;background:var(--pale);border-radius:14px;padding:19px 22px;margin-top:10px}.instruction-icon{display:grid;place-items:center;background:var(--teal);color:white;width:28px;height:28px;border-radius:50%;flex:none;font-weight:900;font-size:17px}.instruction strong{color:var(--navy)}.instruction p{margin:4px 0 0;color:var(--ink);font-size:14px}.progress-area{margin:30px 0 45px}.progress-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:10px}.progress-title strong{color:var(--navy)}.progress-title span{color:var(--muted)}.progress-track{height:11px;background:#dce7eb;border-radius:20px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#0a7b85,#31b5a3);width:0%;border-radius:20px;transition:width .24s}.section-top{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:18px}.section-top h2,.final-area h2{font:700 30px Georgia,serif;color:var(--navy);margin:4px 0}.level-info{padding:6px 12px;background:#fff;color:var(--teal);border:1px solid var(--border);font-weight:850;font-size:11px;border-radius:999px;letter-spacing:.09em}.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.station-card{background:white;border:1px solid var(--border);border-radius:16px;padding:21px;box-shadow:0 6px 20px #17324d08;min-width:0}.station-card.completed{border-color:#9bd7bb}.card-heading{display:flex;gap:14px;align-items:flex-start}.number{display:grid;place-items:center;width:46px;height:46px;flex:none;background:var(--pale);color:var(--teal-dark);border-radius:12px;font-weight:900;font-size:17px}.completed .number{background:#e1f5eb;color:var(--success)}.card-heading .meta{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--muted)}.card-heading h3{font-size:19px;line-height:1.22;margin:4px 0 7px;color:var(--navy)}.card-subtitle{margin:0;color:var(--muted);font-size:13px}.card-actions{margin-top:18px}.open-button,.submit-button,.final-button{padding:11px 16px;font-weight:800;border-radius:10px;border:0;min-height:45px}.open-button{background:#edf4f8;color:var(--navy);width:100%;text-align:left}.open-button:hover{background:#dceaf0}.open-button::after{content:'+';float:right;font-size:20px;line-height:18px}.open-button[aria-expanded=true]::after{content:'−'}.card-form{padding-top:16px;border-top:1px solid var(--border);margin-top:15px}.field{margin-bottom:15px}.field label{display:block;font-size:13px;font-weight:750;color:var(--navy);margin-bottom:6px}.field input,.field select,.final-input{display:block;border:1px solid #b9cad4;border-radius:9px;padding:11px 12px;min-height:44px;color:var(--navy);background:#fff;width:100%;font-size:17px}.field input::placeholder{color:#8fa1ad}.field.invalid input,.field.invalid select{border:2px solid var(--danger);background:#fffafb}.error-text{font-size:12px;color:var(--danger);margin:5px 0 0}.hint{margin:8px 0 12px;font-size:12px;color:var(--muted);background:#f5f8fa;padding:10px 12px;border-left:3px solid #b4cbd5;border-radius:5px}.submit-button{background:var(--teal);color:white;width:100%}.submit-button:hover,.final-button:hover{background:var(--teal-dark)}.feedback{font-size:13px;margin-top:12px;padding:10px 12px;border-radius:7px;background:#fff4ee;color:#7d4a23}.unlock{margin-top:15px;background:#e5f6ed;border:1px solid #bbe3ce;padding:15px 16px;border-radius:10px}.unlock .unlock-label{font-size:12px;color:var(--success);font-weight:850}.unlock .unlock-frag{font-family:Georgia,serif;font-weight:700;font-size:22px;color:var(--navy);margin:4px 0 0}.final-area{margin:46px 0 35px;background:#fff;border:1px solid var(--border);padding:28px;border-radius:18px}.final-heading{display:flex;align-items:center;gap:20px}.big-five{display:grid;place-items:center;width:64px;height:64px;flex:none;background:var(--gold-bg);border-radius:17px;color:var(--gold);font-size:23px;font-weight:900}.final-area>p{color:var(--muted);font-size:14px;margin:16px 0 20px}.fragment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.fragment{min-height:92px;border:1px dashed #b7ccd7;border-radius:11px;padding:13px 10px;background:#fafcfe}.fragment .tiny{font-size:11px;letter-spacing:.06em;font-weight:850;color:var(--muted)}.fragment strong{display:block;color:var(--navy);font-size:17px;margin-top:6px}.fragment.locked strong{font-size:19px;color:#b4c0ca}.fragment.done{background:#eaf8f1;border-style:solid;border-color:#b9ddce}.final-check{margin-top:23px;border-top:1px solid var(--border);padding-top:22px}.final-check label{font-size:14px;font-weight:750;color:var(--navy);display:block;margin-bottom:9px}.final-row{display:flex;gap:10px}.final-input{flex:1}.final-button{background:var(--teal);color:#fff}.final-status{margin:12px 0 0;font-weight:750;font-size:14px;color:var(--navy)}.final-status.success{color:var(--success)}.wait-message{margin-top:20px;padding:15px;background:#f6f8fa;color:var(--muted);font-size:13px;border-radius:9px}footer{padding:12px 0 45px;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}.reset{border:0;text-decoration:underline;background:none;color:var(--teal);font-size:12px;margin-left:12px;padding:3px}footer p{margin:13px 0 0} @media(max-width:740px){.cards{grid-template-columns:1fr}.fragment-grid{grid-template-columns:1fr 1fr}.intro{padding-top:35px}.final-area{padding:18px}.level-area{gap:11px}.masthead .pill{display:none}.final-row{flex-direction:column}.level-button{padding:9px 11px}.station-card{padding:18px}}@media(max-width:380px){.level-switch{width:100%}.level-button{flex:1}.fragment-grid{grid-template-columns:1fr 1fr}.fragment strong{font-size:14px}}@media print{.masthead,footer,.level-switch,.submit-button,.open-button,.final-check{display:none!important}.cards{grid-template-columns:1fr 1fr}.station-card{break-inside:avoid}.card-form{display:block!important}}
/* V2: iPad-first mystery reveal and touch arcade */
:root{--soft-yellow:#fff6df;--arcade:#10283d}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.intro{padding-bottom:29px}
.intro .lede{max-width:710px;margin-bottom:23px}
.mystery{scroll-margin-top:12px;position:relative;margin:7px 0 22px;padding:27px 29px 21px;background:linear-gradient(125deg,#183951,#102a40);color:#fff;border-radius:22px;box-shadow:0 14px 38px #132b4021;overflow:hidden}
.mystery:before{content:'✳';position:absolute;right:15px;top:-60px;font-size:195px;color:#ffffff08;pointer-events:none}
.mystery-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap}
.mystery .eyebrow{color:#72dfd1}
.mystery h2{margin:3px 0;color:#fff;font:700 clamp(23px,3vw,33px) Georgia,serif}
.letter-stat{border:1px solid #ffffff3d;background:#ffffff1b;font-size:12px;border-radius:100px;padding:9px 13px;font-weight:850;white-space:nowrap}
.mystery-sub{position:relative;color:#c3dce4;font-size:13px;margin:6px 0 17px}
.sentence-mask{position:relative;display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:6px 0;min-height:96px;border-radius:14px;background:#ffffff12;border:1px solid #ffffff26;padding:23px 22px;font:700 clamp(21px,3.8vw,33px) Georgia,serif;line-height:1.3;letter-spacing:.015em;overflow-wrap:anywhere}
.mask-word{display:inline-flex;align-items:baseline;white-space:nowrap}
.space-token{white-space:pre;display:inline-block;width:.33em}
.letter{display:inline-block;min-width:.55em;text-align:center;transition:color .35s ease,transform .35s ease}
.hidden-letter{color:#91acbf}
.visible-letter{color:#ffffff}
.stage-0{color:#92efd1}.stage-1{color:#f6d18e}.stage-2{color:#bcd4ff}.stage-3{color:#f6b9d4}
.mystery-foot{position:relative;display:flex;align-items:center;gap:16px;margin-top:19px;color:#d3e7ec;font-size:12px}
.mystery-foot .progress-track{flex:1;background:#ffffff30;min-width:90px}
.mystery-foot .progress-fill{background:linear-gradient(90deg,#33c5b3,#f5dc9c)}
.fresh-unlock{animation:pulsebox .65s ease-out}
@keyframes pulsebox{0%,100%{box-shadow:0 14px 38px #132b4021}50%{box-shadow:0 0 0 6px #2cc2ae55,0 14px 38px #132b4021}}
.instruction{margin:0 0 44px}
.unlock p{margin:6px 0 0;font-size:13px;color:#267354}
.station-area{scroll-margin-top:15px}
.final-area{scroll-margin-top:16px}
.final-area>p{margin-bottom:17px}
.final-success{background:#e1f7ed;color:#166348;border:1px solid #a9dec2;padding:19px;border-radius:12px;font-size:17px}
.final-row .final-button{white-space:nowrap}
.games-area{scroll-margin-top:14px;margin:35px 0 46px;background:#fff;border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:0 7px 25px #17324d10}
.games-head{display:flex;justify-content:space-between;align-items:center;gap:15px}
.games-head h2{font:700 31px Georgia,serif;color:var(--navy);margin:3px 0}
.games-head p{font-size:14px;color:var(--muted);margin:8px 0 17px}
.game-trophy{display:grid;place-items:center;width:68px;height:68px;border-radius:18px;background:#fff4cf;color:#b87b14;font-size:41px}
.play-all-button,.game-primary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:0;border-radius:12px;padding:12px 22px;font-size:16px;font-weight:850;background:#087f8c;color:white}
.play-all-button:active,.game-primary:active{transform:scale(.98)}
#games-content{margin-top:23px}
.game-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;border-bottom:1px solid var(--border);padding-bottom:12px}
.game-tab{min-height:54px;padding:10px 8px;border:1px solid var(--border);border-radius:11px;background:#eff5f7;color:var(--navy);font-weight:800;font-size:14px}
.game-tab[aria-selected=true]{background:#19374f;color:#fff;border-color:#19374f}
.game-panel{padding-top:19px;outline-offset:4px}
.game-info{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}
.game-info h3{font-size:21px;color:var(--navy);margin:0 0 5px}
.game-info p{font-size:13px;color:var(--muted);margin:0}
.game-score{display:flex;align-items:center;flex-direction:column;justify-content:center;flex:none;min-width:104px;padding:9px 11px;border-radius:11px;background:var(--pale);color:var(--navy)}
.game-score strong{font-size:23px}.game-score span{font-size:11px;text-align:center}
.snake-layout{display:grid;grid-template-columns:minmax(0,500px) minmax(185px,1fr);gap:22px;align-items:start}
.snake-board{width:100%;max-width:500px}
#snake-canvas{width:100%;height:auto;display:block;aspect-ratio:1/1;border:4px solid #25475e;border-radius:10px;background:#10283d;touch-action:none;user-select:none}
.game-note{font-size:13px;color:var(--muted);margin:11px 0 0;min-height:20px}
.snake-side{display:flex;align-items:center;flex-direction:column;gap:17px}
.snake-side .game-primary{width:100%}
.snake-side p{font-size:12px;line-height:1.4;color:var(--muted);max-width:220px;margin:0;text-align:center}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px);gap:7px;justify-content:center}
.dpad button{border:0;border-radius:13px;background:#d5edf0;color:#17324d;font-size:27px;font-weight:900;min-width:64px;min-height:64px;touch-action:manipulation;user-select:none}
.dpad button:active{background:#94d3d8}
.game-primary.compact{min-height:46px;font-size:14px;margin:0 0 18px}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:510px;margin:auto}
.memory-tile{aspect-ratio:1/1;min-height:66px;border:2px solid #bed4dd;border-radius:13px;background:#1b4860;color:white;font-size:clamp(22px,5vw,37px);font-weight:800;box-shadow:0 3px 0 #112e3f;touch-action:manipulation}
.memory-tile.face-up{background:#fff6dd;color:#2e4a4f;border-color:#e2c784}
.memory-tile.is-matched{background:#d7f7e7;border-color:#75c69f;box-shadow:none}
.memory-tile:disabled{opacity:1}
.zahlen-area{padding:13px 0 2px}
.zahlen-question span{font-size:12px;font-weight:850;color:#0c8190;letter-spacing:.09em}
.zahlen-question h4{font-size:clamp(20px,3vw,27px);line-height:1.2;margin:6px 0 21px;color:var(--navy)}
.zahlen-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zahlen-choice{min-height:91px;padding:10px 8px;border:2px solid #c8dbe4;border-radius:14px;background:#f0f7fa;color:#163951;font-weight:850;font-size:clamp(18px,2.4vw,27px);white-space:nowrap;font-variant-numeric:tabular-nums}
.zahlen-choice:disabled{opacity:1}
.zahlen-choice.choice-correct{background:#c5f1da;border-color:#44b47f;color:#07572b}
.zahlen-choice.choice-wrong{background:#fee5df;border-color:#dd8b7d;color:#8a3529}
.zahlen-feedback{color:var(--muted);font-size:14px;min-height:23px}
.zahlen-finish{text-align:center;background:#e8f6f1;border-radius:16px;padding:26px 15px}
.zahlen-finish h4{font-size:23px;color:var(--navy);margin:0 0 9px}
.zahlen-finish p{color:#395d5b;margin:8px}
.finish-star{font-size:47px;color:#b88824}
@media(max-width:740px){.mystery{padding:21px 17px 19px;border-radius:16px}.sentence-mask{padding:17px 12px;min-height:82px}.mystery-foot{align-items:flex-start;flex-direction:column;gap:8px}.mystery-foot .progress-track{width:100%;flex:none}.games-area{padding:20px 14px}.snake-layout{grid-template-columns:1fr}.snake-board{margin-inline:auto;max-width:470px}.snake-side{flex-direction:row;align-items:center;justify-content:space-evenly;flex-wrap:wrap}.snake-side .game-primary{width:auto}.snake-side p{display:none}.dpad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(2,62px)}.dpad button{min-width:62px;min-height:62px}.game-tabs{gap:5px}.game-tab{font-size:12px;padding:8px 4px}.zahlen-choice{font-size:clamp(15px,3.4vw,22px);min-height:70px}.game-info{align-items:flex-start}}
@media(max-width:420px){.mystery-head{align-items:flex-start}.letter-stat{font-size:11px;padding:6px 9px}.snake-side{flex-direction:column}.memory-grid{gap:6px}.memory-tile{min-height:55px}.zahlen-answers{gap:6px}.zahlen-choice{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fresh-unlock{animation:none}.letter{transition:none}}