/* Lab 11 · Kinderspiel */
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-latin-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--ink:#3a2c55;--ink2:rgba(58,44,85,.62);--glass:rgba(255,255,255,.56);--line:rgba(58,44,85,.16);--ease:cubic-bezier(.65,0,.35,1);--pop:cubic-bezier(.34,1.56,.64,1);--frost:0;--f:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#d9d0ec;color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Himmel */
#sky,#sky i,#sky b{position:fixed;inset:0}
#sky i{opacity:0;transition:opacity 1.4s var(--ease)}
#sky .s-ov{background:radial-gradient(120% 80% at 50% 0%,#cfc6f0 0%,rgba(207,198,240,0) 60%),linear-gradient(180deg,#c8c2ec 0%,#e3d2ea 52%,#f8ddd0 100%)}
#sky .s-klingstopp{background:radial-gradient(110% 80% at 30% 0%,#cfe0f7 0%,rgba(207,224,247,0) 60%),linear-gradient(180deg,#bcd3f0 0%,#dfe4f6 55%,#f4e2ee 100%)}
#sky .s-luftikus{background:radial-gradient(110% 80% at 70% 0%,#bfe6f8 0%,rgba(191,230,248,0) 60%),linear-gradient(180deg,#a8d6f1 0%,#d7ecf5 55%,#fde0cc 100%)}
#sky .s-lavaland{background:radial-gradient(110% 80% at 50% 0%,#f5d2e6 0%,rgba(245,210,230,0) 60%),linear-gradient(180deg,#d9c3ec 0%,#f1d4e2 55%,#ffd9c2 100%)}
#sky .s-schatteninseln{background:radial-gradient(110% 80% at 70% 0%,#fff1c9 0%,rgba(255,241,201,0) 60%),linear-gradient(180deg,#a9d9f2 0%,#d8eef2 55%,#fff0cf 100%)}
#sky .s-federschwer{background:radial-gradient(110% 80% at 40% 0%,#e3dcff 0%,rgba(227,220,255,0) 60%),linear-gradient(180deg,#c7cff4 0%,#e4e2f6 55%,#f8e2ea 100%)}
#sky .s-zeitlupenblatt{background:radial-gradient(110% 80% at 70% 0%,#ffe7c2 0%,rgba(255,231,194,0) 60%),linear-gradient(180deg,#bfdcef 0%,#f3e5d2 55%,#ffd3b0 100%)}
#sky .s-aufziehkind{background:radial-gradient(110% 80% at 30% 0%,#fff3c4 0%,rgba(255,243,196,0) 60%),linear-gradient(180deg,#c9e8dc 0%,#f0f0d4 55%,#ffe4c9 100%)}
#sky .s-tanzknopf{background:radial-gradient(110% 80% at 50% 0%,#ffd6f0 0%,rgba(255,214,240,0) 60%),linear-gradient(180deg,#d9c6f5 0%,#f6d7ea 55%,#ffe0cc 100%)}
#sky .s-krakenschatz{background:radial-gradient(110% 80% at 40% 0%,#c9f3ff 0%,rgba(201,243,255,0) 60%),linear-gradient(180deg,#9fd8ec 0%,#cdeef2 55%,#e8f6e8 100%)}
#sky .s-lichtmaus{background:radial-gradient(110% 80% at 70% 0%,#56508f 0%,rgba(86,80,143,0) 60%),linear-gradient(180deg,#2c2c5c 0%,#5a5390 55%,#b48fb5 100%)}
#sky .s-kopfueber{background:radial-gradient(110% 80% at 60% 0%,#ffe3c4 0%,rgba(255,227,196,0) 60%),linear-gradient(180deg,#f5c9b4 0%,#f8dccf 52%,#e6d4f0 100%)}
#sky .s-kopfueber2{background:radial-gradient(90% 70% at 25% 8%,#6a62b0 0%,rgba(106,98,176,0) 55%),linear-gradient(180deg,#232657 0%,#4b4689 55%,#a07fae 100%);transition:none}
#sky[data-s="kopfueber"] .s-kopfueber2{opacity:var(--alt,0)}
#sky .s-maeuschenstill{background:radial-gradient(110% 80% at 40% 0%,#eef4ff 0%,rgba(238,244,255,0) 60%),linear-gradient(180deg,#cfe0f2 0%,#e7eef8 55%,#f6efe6 100%)}
#sky .s-zauberstatue{background:radial-gradient(110% 80% at 70% 0%,#fff0d6 0%,rgba(255,240,214,0) 60%),linear-gradient(180deg,#e2d3ee 0%,#f2e6ea 55%,#fbe6d2 100%)}
#sky .s-spuelfangen{background:radial-gradient(110% 80% at 40% 0%,#e2fbff 0%,rgba(226,251,255,0) 60%),linear-gradient(180deg,#bfe7f0 0%,#e2f3f3 55%,#f8eedf 100%)}
#sky .s-fensterhuepfer{background:radial-gradient(110% 80% at 75% 0%,#fff6c9 0%,rgba(255,246,201,0) 55%),linear-gradient(180deg,#8fcdf2 0%,#cfe9f5 55%,#fbefd2 100%)}
#sky .s-rueckenbauernhof{background:radial-gradient(110% 80% at 30% 0%,#625ea6 0%,rgba(98,94,166,0) 60%),linear-gradient(180deg,#2f2f62 0%,#6a5a98 55%,#d9a6b0 100%)}
#sky .s-quatschgang{background:radial-gradient(110% 80% at 30% 0%,#fff3c4 0%,rgba(255,243,196,0) 60%),linear-gradient(180deg,#cdeac9 0%,#f3efd6 55%,#ffe0cc 100%)}
#sky .s-fussroboter{background:radial-gradient(110% 80% at 70% 0%,#e6f0ff 0%,rgba(230,240,255,0) 60%),linear-gradient(180deg,#b9cbe8 0%,#dfe6f3 55%,#f3e6ee 100%)}
#sky .s-greifautomat{background:radial-gradient(110% 80% at 50% 0%,#ffd6ec 0%,rgba(255,214,236,0) 60%),linear-gradient(180deg,#d6c3f2 0%,#f4d8ea 55%,#ffe7cc 100%)}
#sky .s-elterngebirge{background:radial-gradient(110% 80% at 50% 0%,#fff2d0 0%,rgba(255,242,208,0) 60%),linear-gradient(180deg,#c9dcf0 0%,#e8eef3 55%,#f6ead6 100%)}
#sky .s-kitzelkrabben{background:radial-gradient(110% 80% at 50% 0%,#ffe0d6 0%,rgba(255,224,214,0) 60%),linear-gradient(180deg,#bfe6ee 0%,#e9f1ee 55%,#fde6da 100%)}
#sky .s-waeschewind{background:radial-gradient(110% 80% at 50% 0%,#f4fbff 0%,rgba(244,251,255,0) 60%),linear-gradient(180deg,#9fd2ef 0%,#d4ecf6 55%,#f7f0dc 100%)}
#sky .s-teppichinsel{background:radial-gradient(110% 80% at 50% 0%,#fff4cc 0%,rgba(255,244,204,0) 60%),linear-gradient(180deg,#9fdcea 0%,#d8f0ee 55%,#fbeccf 100%)}
#sky .s-zaubermoehre{background:radial-gradient(110% 80% at 50% 0%,#ffe9c9 0%,rgba(255,233,201,0) 60%),linear-gradient(180deg,#e3d0f2 0%,#f3e3ee 55%,#ffe6d0 100%)}
#sky .s-schaefchen{background:radial-gradient(110% 80% at 50% 0%,#fff6d6 0%,rgba(255,246,214,0) 60%),linear-gradient(180deg,#b3dcf2 0%,#e0eff3 55%,#eef3d6 100%)}
#sky .s-klavierkind{background:radial-gradient(110% 80% at 50% 0%,#ffeef6 0%,rgba(255,238,246,0) 60%),linear-gradient(180deg,#d9cdf0 0%,#efe4f2 55%,#fff0dd 100%)}
#sky .s-fusstierchen{background:radial-gradient(110% 80% at 50% 0%,#fff0dc 0%,rgba(255,240,220,0) 60%),linear-gradient(180deg,#cdc6ee 0%,#e8e2f3 55%,#fbe8dc 100%)}
#sky .s-schlangenlinie{background:radial-gradient(110% 80% at 50% 0%,#f6fbe0 0%,rgba(246,251,224,0) 60%),linear-gradient(180deg,#c6e4cf 0%,#e6f0e3 55%,#f8eedb 100%)}
#sky .s-lebkuchenrennen{background:radial-gradient(110% 80% at 50% 0%,#ffe4ea 0%,rgba(255,228,234,0) 60%),linear-gradient(180deg,#f2cbd8 0%,#f8e2e6 55%,#ffeedd 100%)}
#sky .s-frischgeschluepft{background:radial-gradient(110% 80% at 50% 0%,#fff6d8 0%,rgba(255,246,216,0) 60%),linear-gradient(180deg,#f3dcb8 0%,#f8ecdc 55%,#fdf4e6 100%)}
#sky .s-fernsteuerung{background:radial-gradient(110% 80% at 50% 0%,#e8f0ff 0%,rgba(232,240,255,0) 60%),linear-gradient(180deg,#c4d2f0 0%,#e2e8f6 55%,#f6eaf0 100%)}
#sky .s-schlenkerpuppe{background:radial-gradient(110% 80% at 50% 0%,#ffe6d6 0%,rgba(255,230,214,0) 60%),linear-gradient(180deg,#f2cdb8 0%,#f8e2d8 55%,#f3e6f2 100%)}
#sky .s-immereintrick{background:radial-gradient(110% 80% at 50% 0%,#f0e8ff 0%,rgba(240,232,255,0) 60%),linear-gradient(180deg,#d6ccf2 0%,#ece6f6 55%,#fbeee0 100%)}
#sky .s-woistdaskind{background:radial-gradient(110% 80% at 50% 0%,#eefbe6 0%,rgba(238,251,230,0) 60%),linear-gradient(180deg,#c9e6c0 0%,#e6f2e2 55%,#f6f0e0 100%)}
#sky .s-lachenverboten{background:radial-gradient(110% 80% at 50% 0%,#fff0f4 0%,rgba(255,240,244,0) 60%),linear-gradient(180deg,#f6c9d6 0%,#fae2e8 55%,#fff1e0 100%)}
#sky[data-s="elterngebirge"] .s-elterngebirge,#sky[data-s="kitzelkrabben"] .s-kitzelkrabben,#sky[data-s="waeschewind"] .s-waeschewind,#sky[data-s="teppichinsel"] .s-teppichinsel,#sky[data-s="zaubermoehre"] .s-zaubermoehre,#sky[data-s="schaefchen"] .s-schaefchen,#sky[data-s="klavierkind"] .s-klavierkind,#sky[data-s="fusstierchen"] .s-fusstierchen,#sky[data-s="schlangenlinie"] .s-schlangenlinie,#sky[data-s="lebkuchenrennen"] .s-lebkuchenrennen,#sky[data-s="frischgeschluepft"] .s-frischgeschluepft,#sky[data-s="fernsteuerung"] .s-fernsteuerung,#sky[data-s="schlenkerpuppe"] .s-schlenkerpuppe,#sky[data-s="immereintrick"] .s-immereintrick,#sky[data-s="woistdaskind"] .s-woistdaskind,#sky[data-s="lachenverboten"] .s-lachenverboten,#sky[data-s="quatschgang"] .s-quatschgang,#sky[data-s="fussroboter"] .s-fussroboter,#sky[data-s="greifautomat"] .s-greifautomat,#sky[data-s="spuelfangen"] .s-spuelfangen,#sky[data-s="fensterhuepfer"] .s-fensterhuepfer,#sky[data-s="rueckenbauernhof"] .s-rueckenbauernhof,#sky[data-s="kopfueber"] .s-kopfueber,#sky[data-s="maeuschenstill"] .s-maeuschenstill,#sky[data-s="zauberstatue"] .s-zauberstatue,#sky[data-s="tanzknopf"] .s-tanzknopf,#sky[data-s="krakenschatz"] .s-krakenschatz,#sky[data-s="lichtmaus"] .s-lichtmaus,#sky[data-s="federschwer"] .s-federschwer,#sky[data-s="zeitlupenblatt"] .s-zeitlupenblatt,#sky[data-s="aufziehkind"] .s-aufziehkind,#sky[data-s="ov"] .s-ov,#sky[data-s="klingstopp"] .s-klingstopp,#sky[data-s="luftikus"] .s-luftikus,#sky[data-s="lavaland"] .s-lavaland,#sky[data-s="schatteninseln"] .s-schatteninseln{opacity:1}
#sky .frost{background:radial-gradient(90% 70% at 50% 55%,rgba(226,244,255,0) 40%,rgba(214,240,255,.75) 100%);opacity:calc(var(--frost) * .9)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tag{touch-action:none}

/* Vorhang */
#veil{position:fixed;inset:0;z-index:60;background:#d9d0ec;display:grid;place-items:center;transition:opacity 1s var(--ease),visibility 0s 1s}
#veil.off{opacity:0;visibility:hidden}
#veil span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:max(18px,env(safe-area-inset-top)) clamp(16px,2.6vw,36px) 0;pointer-events:none}
.nav>*{pointer-events:auto}
.nav__links{display:flex;align-items:center;gap:14px;min-width:0}
.nav__marke img{display:block;filter:brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(1500%) hue-rotate(228deg);opacity:.85}
.pille{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;font-weight:600;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px -10px rgba(58,44,85,.35);transition:transform .35s var(--pop),background .3s}
.pille:hover{transform:translateY(-2px);background:rgba(255,255,255,.78)}
.navbtn{display:none}
.is-game .navbtn{display:inline-flex}
.is-game .nav__links a.pille{display:none}
.wortmarke{margin:0;font-weight:600;font-size:clamp(18px,1.7vw,24px);letter-spacing:.01em;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.is-game .wortmarke{opacity:0;transform:translateY(-8px)}
.nav__rechts{display:flex;justify-content:flex-end;grid-column:3}
.rund{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px -10px rgba(58,44,85,.35);transition:transform .35s var(--pop)}
.rund:hover{transform:scale(1.08)}
.rund svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rund .lsp{fill:var(--ink)}
.rund .x{display:none}
.rund.aus .wel{display:none}.rund.aus .x{display:block}

/* Übersicht: Namen unter den Inseln */
.tags{position:fixed;inset:0;pointer-events:none;z-index:10}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:.1em;pointer-events:auto;text-align:center;will-change:transform;transition:opacity .5s var(--ease)}
.tag__nr{font-size:calc(14px * var(--tagS,1));font-weight:600;letter-spacing:.2em;color:var(--ink2)}
.tag__name{font-size:clamp(46px,6.6vw,124px);font-weight:600;line-height:.92;letter-spacing:-.025em;transition:transform .5s var(--pop),color .3s}
.tag__mat{display:inline-flex;align-items:center;gap:6px;margin-top:calc(.55em * var(--tagS,1));height:calc(32px * var(--tagS,1));padding:0 calc(13px * var(--tagS,1)) 0 calc(9px * var(--tagS,1));border-radius:999px;background:var(--glass);font-size:calc(15px * var(--tagS,1));font-weight:600;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tag__mat svg{width:calc(20px * var(--tagS,1));height:calc(20px * var(--tagS,1));fill:currentColor}
.tag__mat .faden,.hud__mat .faden{fill:none;stroke:currentColor;stroke-width:1.4}
.tag__mat .loch,.hud__mat .loch{fill:#fff}
body[data-game="lichtmaus"] .hud__kopf,body[data-game="lichtmaus"] .weiter,body[data-game="lichtmaus"] .wortmarke,body[data-game="rueckenbauernhof"] .hud__kopf,body[data-game="rueckenbauernhof"] .weiter,body[data-game="rueckenbauernhof"] .wortmarke{color:#f4efff}
body[data-game="lichtmaus"] .hud__nr,body[data-game="rueckenbauernhof"] .hud__nr{color:rgba(244,239,255,.7)}
body[data-game="lichtmaus"] #tipp,body[data-game="rueckenbauernhof"] #tipp{color:var(--ink)}
body[data-game="kopfueber"] .hud__kopf,body[data-game="kopfueber"] .weiter,body[data-game="kopfueber"] .wortmarke{color:rgb(calc(58 + 186 * var(--alt,0)),calc(44 + 195 * var(--alt,0)),calc(85 + 170 * var(--alt,0)))}
.tag.on .tag__name,.tag:hover .tag__name{transform:translateY(-6px) scale(1.04)}
.tag:focus-visible{outline:3px solid #fff;outline-offset:8px;border-radius:18px}
.is-game .tag{opacity:0;pointer-events:none}
#mehr{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:12;width:48px;height:48px;margin-left:-24px;border-radius:50%;display:grid;place-items:center;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 20px -12px rgba(58,44,85,.45);animation:mehr 1.8s infinite var(--ease);transition:opacity .5s var(--ease)}
#mehr svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mehr.weg{opacity:0;pointer-events:none}
@keyframes mehr{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Spielansicht */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
#hud[hidden]{display:none}
.hud__kopf{position:absolute;left:clamp(16px,2.6vw,36px);top:clamp(78px,10vh,120px);display:flex;flex-direction:column;align-items:flex-start;animation:hudIn 1s .45s both var(--ease)}
.hud__kopf[hidden]{display:none}
.hud__nr{font-size:14px;font-weight:600;letter-spacing:.2em;color:var(--ink2)}
.hud__name{margin:.05em 0 0;font-size:clamp(52px,7.4vw,140px);font-weight:600;line-height:.9;letter-spacing:-.03em}
.hud__regel{margin:.55em 0 0;font-size:clamp(18px,1.6vw,26px);font-weight:400;line-height:1.25;max-width:17ch}
.hud__mat{display:inline-flex;align-items:center;gap:7px;margin-top:16px;height:34px;padding:0 14px 0 9px;border-radius:999px;background:var(--glass);font-size:15px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hud__mat svg{width:21px;height:21px;fill:currentColor}
@keyframes hudIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hud__fuss{position:absolute;left:0;right:0;bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));display:flex;justify-content:center;align-items:center;padding:0 clamp(16px,2.6vw,36px);animation:hudIn 1s .6s both var(--ease)}
.knopf{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px 0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:18px;font-weight:600;box-shadow:0 14px 30px -14px rgba(58,44,85,.7);transition:transform .35s var(--pop),background .3s}
.knopf:hover{transform:translateY(-3px) scale(1.03)}
.knopf svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.knopf .i-auge{display:none}
.knopf[data-m="play"]{background:#fff;color:var(--ink)}
.knopf[data-m="play"] svg{stroke:var(--ink)}
.knopf[data-m="play"] .i-hand{display:none}.knopf[data-m="play"] .i-auge{display:block}
.weiter{pointer-events:auto;position:absolute;right:clamp(16px,2.6vw,36px);display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:600;color:var(--ink);padding:10px 4px}
.weiter b{display:inline-block;transition:transform .4s var(--pop)}
.weiter:hover b{transform:translateX(6px)}
#takt{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
#takt i{position:absolute;inset:0;background:var(--ink);opacity:.55;transform-origin:0 50%;transform:scaleX(0)}
.is-play #takt{opacity:0}
#zaehler{position:absolute;right:clamp(16px,2.6vw,36px);top:clamp(78px,10vh,120px);font-size:clamp(80px,11vw,200px);font-weight:600;line-height:.85;letter-spacing:-.04em;transition:opacity .4s,transform .4s}
#zaehler[hidden]{display:none}
#zaehler.hop{animation:hop .45s var(--pop)}
#zaehler.weg{opacity:.25;transform:scale(.9)}
@keyframes hop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-3deg)}100%{transform:scale(1)}}
#tipp{position:absolute;left:50%;bottom:calc(max(26px,calc(env(safe-area-inset-bottom) + 18px)) + 72px);transform:translateX(-50%);margin:0;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 10px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;animation:tipp 1.4s infinite var(--ease)}
#tipp[hidden]{display:none}
#tipp svg{width:26px;height:26px;fill:#fff;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
#tipp [hidden]{display:none}
@keyframes tipp{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-7px)}}

@media (max-width:860px){
  .hud__kopf{top:76px}
  .hud__name{font-size:clamp(46px,13vw,80px)}
  .hud__regel{font-size:17px;max-width:20ch}
  .hud__mat{margin-top:10px;height:30px;font-size:14px}
  .weiter{font-size:16px}
  .weiter span{display:none}
  .tag__name{font-size:clamp(40px,12.5vw,72px)}
  .tag__mat{height:28px;font-size:13px;margin-top:.35em}
  .knopf{height:50px;font-size:17px}
}
@media (max-width:520px){
  #mehr{left:auto;right:16px;margin-left:0}
  .wortmarke{display:none}
  .nav__marke{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
body[data-game="lichtmaus"] .hud__mat,body[data-game="rueckenbauernhof"] .hud__mat,body[data-game="kopfueber"] .hud__mat{color:var(--ink)}

/* Weiter-Schwenk: Kopf und Weiter-Knopf blenden aus und wieder ein */
.hud__kopf,.weiter span{transition:opacity .35s var(--ease)}
body.wechsel .hud__kopf,body.wechsel .weiter span{opacity:0}