/* ============================================================
   11 · Browser-APIs & Gadgets
   ============================================================ */
.a-mitte{display:grid;justify-items:center;gap:14px;text-align:center}
.a-status{margin:0;font-size:12px;color:var(--text-3)}

/* View Transitions */
.a-vt{display:grid;gap:18px;width:100%}
.a-vt-raster{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.a-vt-kachel{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;font:700 22px var(--mono);color:#fff;background:var(--f);box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.a-vt-kachel.gross{grid-column:span 2;grid-row:span 2;font-size:44px}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
@media (max-width:640px){.a-vt-raster{grid-template-columns:repeat(4,1fr)}}

/* Seitenwechsel */
.a-seite{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;background:var(--bg-3)}
.a-seite nav{display:flex;gap:4px;padding:14px}
.a-seite nav button{padding:7px 12px;border:0;border-radius:999px;background:none;color:var(--text-2);font-size:13px}
.a-seite nav button.aktiv{background:var(--text);color:var(--bg)}
.a-seite-inhalt{padding:20px 24px}
.a-seite-inhalt .mono{font-size:12px;color:var(--akzent)}
.a-seite-inhalt h4{margin:6px 0 8px;font:650 40px/1 var(--sans);letter-spacing:-.05em}
.a-seite-inhalt p{margin:0;color:var(--text-2);font-size:14px}
.a-vorhang{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.a-vorhang i{background:var(--akzent);transform:translateY(101%)}
.a-vorhang.rein i{animation:vorhang-rein .45s var(--raus) forwards;animation-delay:calc(var(--n) * 60ms)}
.a-vorhang.raus i{transform:none;animation:vorhang-raus .5s var(--sanft) forwards;animation-delay:calc(var(--n) * 60ms)}
@keyframes vorhang-rein{from{transform:translateY(101%)}to{transform:none}}
@keyframes vorhang-raus{from{transform:none}to{transform:translateY(-101%)}}

/* Vollbild */
.a-voll{display:grid;justify-items:center;gap:16px}
.a-voll-szene{display:grid;place-content:center;text-align:center;width:220px;height:130px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--akzent),var(--a3))}
.a-voll-szene b{font-size:22px}
.a-voll-szene p{margin:2px 0 0;font-size:12px;opacity:.85}
.a-voll:fullscreen{background:var(--bg);place-content:center}
.a-voll:fullscreen .a-voll-szene{width:min(70vw,900px);height:min(50vh,500px)}
.a-voll:fullscreen .a-voll-szene b{font-size:clamp(3rem,8vw,6rem)}

/* Vorlesen */
.a-lesetext{max-width:380px;margin:0;font:500 18px/1.5 var(--sans)}
.a-lesetext .w{border-radius:5px;transition:background .15s,color .15s}
.a-lesetext .w.an{background:var(--akzent);color:#fff;box-shadow:0 0 0 3px var(--akzent)}

/* Pipette */
.a-farbfeld{width:110px;height:110px;border-radius:26px;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);box-shadow:inset 0 0 0 1px var(--linie-2),0 20px 40px -20px rgba(0,0,0,.6);transition:background .4s}
.a-hex{font-size:16px}

/* Synth */
.a-synth{display:grid;justify-items:center;gap:16px;width:100%}
.a-oszi{width:100%;max-width:640px;height:110px;border-radius:16px;background:#07070d;box-shadow:inset 0 0 0 1px var(--linie)}
.a-tasten{display:flex;gap:6px}
.a-taste{position:relative;width:58px;height:120px;padding-top:80px;border:0;border-radius:0 0 12px 12px;font:600 12px var(--mono);color:#555;
  background:linear-gradient(180deg,#f5f5f7,#e2e2e8);box-shadow:0 6px 0 #b8b8c4,0 10px 16px -6px rgba(0,0,0,.4);transition:transform .08s,box-shadow .08s,background .2s}
.a-taste.an{transform:translateY(5px);box-shadow:0 1px 0 #b8b8c4,0 3px 6px -2px rgba(0,0,0,.4);background:linear-gradient(180deg,color-mix(in oklab,var(--akzent) 40%,#fff),color-mix(in oklab,var(--akzent) 25%,#e2e2e8))}
.a-taste span{display:block;margin-top:4px;font-size:10px;color:#999}
@media (max-width:640px){.a-tasten{gap:4px}.a-taste{width:32px;height:96px;padding-top:56px;font-size:11px}}

/* Steckbrief */
.a-steckbrief{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;width:100%;max-width:400px;margin:0;font-size:13.5px}
.a-steckbrief dt{color:var(--text-3)}
.a-steckbrief dd{margin:0;font-family:var(--mono);font-size:12.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-steckbrief .gut{color:var(--gut)}
.a-steckbrief .schlecht{color:var(--schlecht)}

/* Libelle */
.a-libelle{position:relative;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,transparent 0 20%,var(--linie) 20.5% 21.5%,transparent 22% 48%,var(--linie) 48.5% 49.5%,transparent 50%),radial-gradient(circle at 40% 35%,color-mix(in oklab,#a3e635 35%,var(--bg-3)),var(--bg-3) 75%);
  box-shadow:inset 0 0 0 2px var(--linie-2),inset 0 -10px 30px rgba(0,0,0,.25),0 20px 40px -20px rgba(0,0,0,.6)}
.a-blase{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,rgba(255,255,255,.4) 40%,rgba(255,255,255,.1));box-shadow:0 0 0 1px rgba(255,255,255,.5),0 6px 12px rgba(0,0,0,.25);
  transform:translate(var(--bx,0px),var(--by,0px));transition:transform .12s linear}

/* Sichtbarkeit */
.a-sicht-zahl{font:300 72px/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.demo[data-demo="sichtbarkeit"] .a-mitte>span{margin-top:-8px;color:var(--text-3);font-size:13px}
.demo[data-demo="sichtbarkeit"] .a-status{max-width:300px;font-size:13px}

/* Sprache */
.a-mikro{width:84px;height:84px;border:0;border-radius:50%;font-size:32px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie-2);transition:transform .3s var(--feder),box-shadow .3s}
.a-mikro:hover{transform:scale(1.06)}
.a-mikro.hoert{background:var(--schlecht);box-shadow:0 0 0 0 rgba(248,113,113,.6);animation:mikro 1.4s infinite}
@keyframes mikro{to{box-shadow:0 0 0 22px rgba(248,113,113,0)}}
.a-sprache-text{max-width:300px;margin:0;font-size:15px;color:var(--text-2);min-height:3em}

/* Konami */
.a-konami{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.a-konami kbd{min-width:30px;padding:7px 8px;font-size:14px;text-align:center;box-shadow:0 3px 0 var(--linie-2);transition:background .2s,color .2s,transform .2s}
.a-konami kbd.an{background:var(--akzent);color:#fff;transform:translateY(2px);box-shadow:none}