/* ============================================================
   Quiz – Styles
   Theme über CSS-Variablen: :root = dunkel, [data-theme=light] hell
   ============================================================ */
:root{
  --bg-0:#070b18; --bg-1:#0d1326;
  --ink:#eaf0ff; --ink-dim:#9aa6c8; --ink-faint:#5f6b8f;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --r:#ff5d6c; --g:#37d67a; --b:#4d8dff;
  --accent:#22d3ee; --good:#37d67a; --warn:#fbbf24; --bad:#ff5d6c;
  --glass:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --glass-solid:rgba(255,255,255,.04);
  --surface:rgba(0,0,0,.18);
  --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --bg-grad:
    radial-gradient(1200px 700px at 15% -10%, #1a2348 0%, transparent 55%),
    radial-gradient(1000px 600px at 110% 10%, #2a1640 0%, transparent 50%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  --radius:22px;
}
:root[data-theme="light"]{
  --bg-0:#e9eefb; --bg-1:#f3f6fd;
  --ink:#16203a; --ink-dim:#586087; --ink-faint:#8b95b3;
  --line:rgba(20,30,70,.10); --line-2:rgba(20,30,70,.18);
  /* dunklere, textsichere Akzente für hellen Hintergrund */
  --accent:#0b8aa3; --good:#15935a; --warn:#b67d07;
  --glass:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  --glass-solid:rgba(255,255,255,.7);
  --surface:rgba(20,30,70,.05);
  --shadow:0 24px 60px -30px rgba(40,55,110,.4);
  --bg-grad:
    radial-gradient(1100px 650px at 12% -10%, #cfe0ff 0%, transparent 55%),
    radial-gradient(900px 560px at 112% 8%, #f3d7ff 0%, transparent 52%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}

/* Portal-Back-Button: arcade-common.css wird NACH dieser Datei geladen, daher
   reicht gleiche Spezifitaet nicht -> mit "body ..." erhoehen, damit unsere
   Regeln gewinnen. Sonst setzt das globale left:12px zusammen mit unserem
   right:12px den Button auf VOLLE BREITE (links+rechts fixiert) und er
   ueberdeckt links die "Quiz"-Schrift.
   Ziel: schmaler Button (Inhaltsbreite), oben rechts, Label immer sichtbar
   (auch mobil). */
body .arcade-back{
  left:auto;
  right:max(12px, env(safe-area-inset-right));
}
body .arcade-back .arcade-back__label{
  position:static; width:auto; height:auto; margin:0;
  clip:auto; overflow:visible; white-space:nowrap;
}
/* Desktop hat keinen oberen Balken -> oben Platz reservieren, damit der
   rechts sitzende Button keinen Inhalt ueberdeckt. */
@media (min-width:801px){ .content{ padding-top:64px; } }
body{
  font-family:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg-grad); background-attachment:fixed;
  min-height:100dvh; -webkit-tap-highlight-color:transparent; overflow-x:hidden;
  transition:background .35s ease, color .25s ease;
}
b{font-weight:700;}

/* ---------- App-Shell ---------- */
.app{display:flex; min-height:100dvh; gap:0;}
.sidebar{
  width:236px; flex:none; padding:20px 16px; display:flex; flex-direction:column; gap:16px;
  background:var(--glass); border-right:1px solid var(--line-2); backdrop-filter:blur(14px);
  position:sticky; top:0; height:100dvh;
}
.side-brand{display:flex; align-items:center; gap:11px; cursor:pointer; padding:4px 6px;}
.logo{width:40px; height:40px; border-radius:12px; flex:none;
  background:conic-gradient(from 210deg,#22d3ee,#a78bfa,#f472b6,#fbbf24,#22d3ee);
  box-shadow:0 8px 26px -8px #22d3ee99;}
.side-brand h1{font-size:20px; font-weight:800; letter-spacing:.2px;}
.side-brand p{font-size:11px; color:var(--ink-faint); margin-top:1px;}

/* Profil-Karte */
.profile{display:flex; gap:12px; align-items:center; background:var(--glass-solid);
  border:1px solid var(--line); border-radius:14px; padding:12px;}
.lvl-badge{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:18px; color:#06121b;
  background:linear-gradient(180deg,#3ee6ff,#16b6d6); box-shadow:0 8px 20px -8px #22d3ee99;}
.lvl-title{font-size:13px; font-weight:700; line-height:1.1;}
.xpbar{height:7px; border-radius:6px; background:var(--line); overflow:hidden; margin:6px 0 3px;}
.xpbar i{display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#a78bfa); transition:width .5s ease;}
.xptext{font-size:10.5px; color:var(--ink-faint);}

/* Nav */
.nav{display:flex; flex-direction:column; gap:4px; margin-top:2px;}
.navlink{display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink-dim);
  background:transparent; border:1px solid transparent; border-radius:11px; padding:11px 12px; transition:.15s;}
.navlink .ic{font-size:16px; width:20px; text-align:center;}
.navlink:hover{background:var(--glass-solid); color:var(--ink);}
.navlink.active{background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(34,211,238,.05));
  color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px;}

/* Hamburger / Mobile-Topbar */
.topbar-m{display:none; position:sticky; top:0; z-index:30; align-items:center; gap:12px;
  padding:12px 16px; background:var(--glass); border-bottom:1px solid var(--line-2); backdrop-filter:blur(14px);}
.hamb{font-size:20px; line-height:1; background:var(--glass-solid); border:1px solid var(--line-2);
  color:var(--ink); border-radius:10px; padding:7px 11px; cursor:pointer;}
.topbar-m .logo{width:30px; height:30px; border-radius:9px;}
.topbar-m b{font-size:16px; font-weight:800;}
.backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40;}

/* ---------- Content / Views ---------- */
.content{flex:1; min-width:0; padding:clamp(16px,3.5vw,34px); display:flex; justify-content:center;}
.view{width:min(680px,100%); animation:fade .35s ease both;}
@keyframes fade{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
.section-title{font-size:14px; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink);
  font-weight:800; margin:24px 2px 13px; display:flex; align-items:center; gap:10px;}
.section-title::before{content:""; width:18px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),#a78bfa); flex:none;}
.section-title:first-child{margin-top:0;}
.lead{color:var(--ink-dim); font-size:14px; line-height:1.55; margin-bottom:18px;}

.card{position:relative; background:var(--glass); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); padding:clamp(18px,3.5vw,28px); overflow:hidden;}

/* ---------- Modi-Raster (Hub) ---------- */
.modes{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (max-width:560px){ .modes{grid-template-columns:1fr;} }
.mode{cursor:pointer; text-align:left; border:1px solid var(--line-2); border-radius:16px;
  background:var(--glass-solid); padding:15px; transition:.16s; display:flex; gap:13px; align-items:center;}
.mode:hover{transform:translateY(-2px); background:var(--glass); border-color:var(--accent);
  box-shadow:0 14px 30px -18px var(--mc,#22d3ee);}
.mode:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.mode .mi{width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:23px;}
.mode .mt{font-weight:800; font-size:15.5px; color:var(--ink); letter-spacing:.2px;}
.mode .ms{font-size:12px; color:var(--ink-dim); margin-top:2px; line-height:1.3;}
.mode .mb{font-size:11px; color:var(--ink-faint); margin-top:4px;}
.mode .mb b{color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:16px; color:#06121b; padding:15px; border-radius:14px;
  background:linear-gradient(180deg,#3ee6ff,#16b6d6); box-shadow:0 14px 30px -12px #22d3eeaa; transition:.16s;}
.btn:hover{filter:brightness(1.06); transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.btn.ghost{background:var(--glass-solid); color:var(--ink); border:1px solid var(--line-2); box-shadow:none; font-weight:600;}
.btn.ghost:hover{background:var(--glass);}
.btn-row{display:flex; gap:10px;}

/* ---------- Play ---------- */
.ptopbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.ptopbar .mtitle{font-weight:700; font-size:15px;}
.ptopbar .mtitle small{display:block; font-weight:500; font-size:11.5px; color:var(--ink-faint);}
.dots{display:flex; gap:7px; margin-top:6px; flex-wrap:wrap;}
.dot{width:9px; height:9px; border-radius:50%; background:var(--line-2); transition:.3s;}
.dot.done{background:var(--good);}
.dot.now{background:var(--accent); box-shadow:0 0 0 4px rgba(34,211,238,.18);}
.rscore{text-align:right; font-size:13px; color:var(--ink-dim);}
.rscore b{color:var(--ink); font-weight:700; font-size:16px; display:block;}
.streak{display:none; font-size:12px; font-weight:700; color:var(--warn); margin-top:3px;}
.streak.on{display:inline-block; animation:pop .3s ease;}

.stage{min-height:300px; display:flex; flex-direction:column; justify-content:center;}
.hint{text-align:center; color:var(--ink-dim); font-size:13.5px; margin-bottom:14px; min-height:18px;}
.hint b{color:var(--ink);}
.countbar{height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin-bottom:18px;}
.countbar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--accent),#a78bfa); border-radius:6px;}

/* swatches */
.swatches{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.swatches.single{grid-template-columns:1fr;}
.sw{border-radius:18px; height:clamp(110px,26vw,150px); position:relative; border:1px solid var(--line-2);
  overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px -22px #000; transition:background-color .1s linear;}
.sw .tag{position:absolute; left:12px; top:11px; font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); opacity:.92;}
.sw.cover{background:repeating-linear-gradient(45deg,#1a2138,#1a2138 12px,#161c30 12px,#161c30 24px)!important;}
.sw.cover .tag{opacity:.5;}

/* sliders */
.sliders{display:flex; flex-direction:column; gap:16px; margin-top:16px;}
.slider .lab{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.slider .lab span{font-weight:700; font-size:13px; letter-spacing:.5px;}
.slider .lab .val{font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-dim); font-weight:600;}
.slider.r .lab span{color:var(--r);} .slider.g .lab span{color:var(--g);} .slider.b .lab span{color:var(--b);}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:10px;
  outline:none; cursor:pointer; background:#1b2238; border:1px solid var(--line);}
.slider.r input{background:linear-gradient(90deg,#2a1418,#ff5d6c);}
.slider.g input{background:linear-gradient(90deg,#102a1c,#37d67a);}
.slider.b input{background:linear-gradient(90deg,#0f1a33,#4d8dff);}
.slider.plain input{background:linear-gradient(90deg,#16203c,#22d3ee);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:#fff; border:3px solid #0b1020; cursor:grab; box-shadow:0 4px 14px rgba(0,0,0,.5); transition:transform .12s;}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.14); cursor:grabbing;}
input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #0b1020; cursor:grab; box-shadow:0 4px 14px rgba(0,0,0,.5);}

/* time hold */
.holdwrap{display:flex; flex-direction:column; align-items:center; gap:18px;}
.holdbtn{width:170px; height:60px; border-radius:16px; border:1px solid var(--line-2); cursor:pointer;
  background:linear-gradient(180deg,#3ee6ff,#16b6d6); color:#06121b; font-weight:800; font-size:15px;
  box-shadow:0 14px 30px -12px #22d3eeaa; user-select:none; touch-action:none;}
.holdbtn.active{filter:brightness(1.1); transform:scale(.98);}

/* shape board */
.board{position:relative; width:100%; aspect-ratio:1/1; max-height:300px; border:1px solid var(--line-2);
  border-radius:16px; background:var(--surface); overflow:hidden; touch-action:none;}
.shape{position:absolute; width:60px; height:60px; border-radius:10px; left:0; top:0;
  background:linear-gradient(135deg,#22d3ee,#a78bfa); box-shadow:0 8px 20px -8px #000;}
.shape.draggable{cursor:grab; box-shadow:0 0 0 2px #fff6, 0 8px 20px -8px #000;}
.shape.draggable:active{cursor:grabbing;}
.shape.target{background:linear-gradient(135deg,#22d3ee,#a78bfa);}  /* gleiche Farbe wie die Ziehform */

/* angle dial */
.dial{width:200px; height:200px; margin:0 auto; border-radius:50%; border:2px solid var(--line-2); position:relative;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 70%); touch-action:none;}
.dial .hand{position:absolute; left:50%; top:50%; height:4px; width:88px; border-radius:4px; transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--ink));}
.dial .hub{position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%);}
.dial.target .hand{background:linear-gradient(90deg,#f472b6,#fbbf24);}
.dial .tick{position:absolute; left:50%; top:8px; width:2px; height:9px; margin-left:-1px; border-radius:2px;
  background:var(--line-2); transform-origin:50% 92px;}
.dial .tick.major{height:15px; background:var(--ink-faint);}
.dial .deg{position:absolute; left:0; right:0; top:60%; text-align:center; font-size:14px; font-weight:800;
  color:var(--ink-dim); font-variant-numeric:tabular-nums;}

/* length */
.lenwrap{display:flex; flex-direction:column; gap:20px; align-items:center;}
.lentrack{position:relative; width:100%; height:70px; display:flex; align-items:center; border:1px solid var(--line-2);
  border-radius:14px; background:var(--surface); padding:0 14px; overflow:hidden;}
.lenticks{position:absolute; left:14px; right:14px; top:50%; height:26px; transform:translateY(-50%); pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 20px);}
.lenbar{position:relative; z-index:1; height:16px; border-radius:8px; background:linear-gradient(90deg,#22d3ee,#a78bfa); transition:width .05s linear;}

/* Zeit: pulsierender Punkt */
.pulsestage{height:180px; display:grid; place-items:center;}
.pulsedot{width:54px; height:54px; border-radius:50%; opacity:.5; transform:scale(.7); transition:opacity .3s;
  background:var(--line-2); border:1px solid var(--line-2);}
.pulsedot.alive{opacity:1; background:radial-gradient(circle at 50% 38%, #bff6ff, #22d3ee);
  box-shadow:0 0 42px 8px rgba(34,211,238,.55); animation:breathe 1.1s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(.7);} 50%{transform:scale(1.28);}}

/* Ton: sichtbare Wellen */
.waves{display:flex; gap:5px; justify-content:center; align-items:center; height:48px; margin-bottom:16px;}
.waves i{width:7px; height:30px; border-radius:4px; transform:scaleY(.3); transform-origin:center; transition:transform .2s;
  background:linear-gradient(180deg,var(--accent),#a78bfa);}
.waves.playing i{animation:wave .55s ease-in-out infinite;}
.waves.playing i:nth-child(2){animation-delay:.08s;}
.waves.playing i:nth-child(3){animation-delay:.16s;}
.waves.playing i:nth-child(4){animation-delay:.24s;}
.waves.playing i:nth-child(5){animation-delay:.12s;}
@keyframes wave{0%,100%{transform:scaleY(.3);} 50%{transform:scaleY(1);}}

/* reaction */
.reaczone{height:230px; border-radius:18px; display:grid; place-items:center; text-align:center; cursor:pointer;
  user-select:none; font-weight:800; font-size:22px; transition:background .08s; border:1px solid var(--line-2);}
.reaczone.wait{background:linear-gradient(180deg,#3a1722,#2a1018); color:#ffb4be;}
.reaczone.go{background:linear-gradient(180deg,#16432a,#0f7a44); color:#eafff2;}
.reaczone.early{background:linear-gradient(180deg,#3a2a17,#2a1f10); color:#ffd9a0;}
.reaczone small{display:block; font-size:13px; font-weight:500; opacity:.8; margin-top:6px;}

/* result */
.result{margin-top:20px; animation:fade .4s ease both;}
.acc{text-align:center; margin-bottom:12px;}
.acc .num{font-size:clamp(44px,12vw,60px); font-weight:800; line-height:1; font-variant-numeric:tabular-nums;}
.acc .pc{font-size:22px; opacity:.7;}
.acc .msg{font-size:14px; color:var(--ink-dim); margin-top:6px;}
.pts{font-size:15px; color:var(--good); font-weight:700; height:20px; margin-top:4px; opacity:0;}
.pts.show{opacity:1; animation:pop .4s ease;}
.detail{text-align:center; font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums;
  display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap;}
.detail b{color:var(--ink); font-weight:600;}
.chip{display:inline-flex; align-items:center; gap:7px;}
.chip i{width:16px; height:16px; border-radius:5px; display:inline-block; border:1px solid var(--line-2);}

/* end */
.endbig{text-align:center; padding:8px 0 4px;}
.stars{font-size:34px; letter-spacing:6px; margin-bottom:8px; color:var(--warn);}
.endbig .score{font-size:clamp(40px,12vw,56px); font-weight:800; line-height:1;}
.endbig .sub{color:var(--ink-dim); font-size:14px; margin-top:6px; line-height:1.5;}
.endbig .pr{margin-top:8px; font-size:13px; color:var(--warn); font-weight:700; min-height:18px;}

/* ---------- Statistik ---------- */
.stat-overview{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px;}
.stat-big{background:var(--glass-solid); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center;}
.stat-big .v{font-size:24px; font-weight:800; color:var(--accent);}
.stat-big .l{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px; margin-top:3px;}
.stat-card{display:flex; align-items:center; gap:13px; background:var(--glass-solid); border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; margin-bottom:10px;}
.stat-card .mi{width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:21px;}
.stat-card .nm{font-weight:700; font-size:14px;}
.stat-card .meta{font-size:12px; color:var(--ink-dim); margin-top:2px;}
.spark{display:flex; align-items:flex-end; gap:3px; height:34px; margin-left:auto;}
.spark i{width:6px; border-radius:3px; background:linear-gradient(180deg,var(--accent),#a78bfa); opacity:.85; min-height:3px;}
.empty{color:var(--ink-faint); font-size:13.5px; text-align:center; padding:20px;}

/* ---------- Einstellungen ---------- */
.setrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.setrow:last-child{border-bottom:none;}
.setrow .st{font-weight:600; font-size:14.5px;}
.setrow .sd{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.switch{width:50px; height:28px; border-radius:20px; background:var(--line-2); position:relative; cursor:pointer; flex:none; transition:.2s; border:none;}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.3);}
.switch.on{background:var(--accent);}
.switch.on::after{left:25px;}
.seg{display:flex; gap:6px;}
.seg button{font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; color:var(--ink-dim);
  background:var(--glass-solid); border:1px solid var(--line-2); border-radius:10px; padding:8px 14px; transition:.15s;}
.seg button.on{background:var(--accent); color:#06121b; border-color:var(--accent);}
.btn.danger{background:linear-gradient(180deg,#ff7a86,#e05661); color:#2a0a0e; box-shadow:0 14px 30px -14px #ff5d6c99;}

/* info */
.info-item{background:var(--glass-solid); border:1px solid var(--line); border-radius:13px; padding:13px 15px; margin-bottom:9px;}
.info-item h4{font-size:14px; margin-bottom:3px;}
.info-item p{font-size:12.5px; color:var(--ink-dim); line-height:1.5;}

/* ---------- FX ---------- */
.hide{display:none !important;}
@keyframes pop{0%{transform:scale(.55); opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1); opacity:1;}}
.acc .num.pop{animation:pop .45s ease;}
.stage.enter{animation:stageIn .34s ease;}
@keyframes stageIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.card.win{animation:winPulse .55s ease;}
@keyframes winPulse{0%,100%{transform:none;} 30%{transform:scale(1.012);}}
#fx{position:fixed; inset:0; pointer-events:none; z-index:50;}
.confetti{position:absolute; width:9px; height:14px; border-radius:2px; will-change:transform,opacity;}
@keyframes drop{to{transform:translateY(110vh) rotate(720deg); opacity:0;}}
.toast{position:fixed; left:50%; top:14%; transform:translateX(-50%) scale(.8);
  background:linear-gradient(180deg,#fbbf24,#f59e0b); color:#3a2400; font-weight:800; font-size:16px;
  padding:11px 20px; border-radius:14px; box-shadow:0 16px 40px -12px #000; opacity:0; pointer-events:none;
  z-index:60; transition:transform .25s cubic-bezier(.2,1.4,.5,1), opacity .25s;}
.toast.show{opacity:1; transform:translateX(-50%) scale(1);}
.flash{position:fixed; inset:0; background:radial-gradient(circle at 50% 45%, #fff, #fff0 70%); opacity:0; pointer-events:none; z-index:55;}
.flash.go{animation:flashA .55s ease;}
@keyframes flashA{0%{opacity:.55;} 100%{opacity:0;}}

/* ---------- Responsive ---------- */
@media (max-width:800px){
  .app{flex-direction:column;}
  .topbar-m{display:flex;}
  .sidebar{position:fixed; left:0; top:0; height:100dvh; z-index:50; width:260px;
    transform:translateX(-100%); transition:transform .25s ease;}
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-open .backdrop{display:block;}
  .content{padding:16px;}
}

/* ============================================================
   Theme-Switch (uiverse.io / mamyapro123) – eingepasst in die Sidebar
   ============================================================ */
.side-foot{align-items:center;}
.foot-label{font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-faint); font-weight:700;}
.side-foot .theme-switch{--toggle-size:27px; margin-top:2px;}

.theme-switch {
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 0.38em;
  --container-light-bg: #5caad4;
  --container-night-bg: #1b1e36;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #f5c518;
  --moon-bg: #d8d4c0;
  --spot-color: #9b9787;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff8e1;
  --clouds-color: #f4f4f4;
  --back-clouds-color: #bacfe0;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width); height: var(--container-height);
  background-color: var(--container-light-bg); border-radius: var(--container-radius);
  overflow: hidden; cursor: pointer; position: relative;
  background-image: linear-gradient(to bottom, var(--container-light-bg) 0%, #4a92bd 100%);
  transition: all var(--transition);
  box-shadow: 0 0 0 2.5px #1a1a1a, 3px 4px 0 2.5px rgba(26, 26, 26, 0.22);
  transform: rotate(-0.7deg); filter: url(#sketchy);
}
.theme-switch__container::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background-image: repeating-linear-gradient(-50deg, transparent, transparent 7px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.04) 8px);
  border-radius: inherit; pointer-events: none;
}
/* unsichtbar, aber per Tab fokussierbar & per Leertaste schaltbar */
.theme-switch__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-switch__checkbox:focus-visible + .theme-switch__container { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-switch__circle-container {
  width: var(--circle-container-diameter); height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1); position: absolute;
  left: var(--circle-container-offset); top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex; transition: var(--circle-transition); pointer-events: none;
}
.theme-switch__circle-container::before {
  content: ""; position: absolute;
  width: calc(var(--circle-container-diameter) + 1.5em); height: calc(var(--circle-container-diameter) + 1.5em);
  left: -0.75em; top: -0.75em; border-radius: 50%;
  background: conic-gradient(transparent 0deg, transparent 8deg, rgba(245, 197, 24, 0.52) 8deg, rgba(245, 197, 24, 0.52) 22deg, transparent 22deg, transparent 53deg, rgba(245, 197, 24, 0.52) 53deg, rgba(245, 197, 24, 0.52) 67deg, transparent 67deg, transparent 98deg, rgba(245, 197, 24, 0.52) 98deg, rgba(245, 197, 24, 0.52) 112deg, transparent 112deg, transparent 143deg, rgba(245, 197, 24, 0.52) 143deg, rgba(245, 197, 24, 0.52) 157deg, transparent 157deg, transparent 188deg, rgba(245, 197, 24, 0.52) 188deg, rgba(245, 197, 24, 0.52) 202deg, transparent 202deg, transparent 233deg, rgba(245, 197, 24, 0.52) 233deg, rgba(245, 197, 24, 0.52) 247deg, transparent 247deg, transparent 278deg, rgba(245, 197, 24, 0.52) 278deg, rgba(245, 197, 24, 0.52) 292deg, transparent 292deg, transparent 323deg, rgba(245, 197, 24, 0.52) 323deg, rgba(245, 197, 24, 0.52) 337deg, transparent 337deg, transparent 360deg);
  animation: rotateSunRays 14s linear infinite; opacity: 1; transition: opacity var(--transition); pointer-events: none; filter: url(#sketchy-sm);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container::before { opacity: 0; }
@keyframes rotateSunRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.theme-switch__sun-moon-container {
  pointer-events: auto; position: relative; z-index: 2;
  width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto;
  border-radius: var(--container-radius); background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset, 0.1em 0.13em 0 0.04em #1a1a1a;
  filter: url(#sketchy-sm) drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden; transition: var(--transition); transform: scale(1);
}
.theme-switch__sun-moon-container:hover { transform: scale(1.1) rotate(5deg); }
.theme-switch__moon {
  transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg);
  border-radius: inherit; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: all var(--transition), transform 0.3s ease; position: relative;
}
.theme-switch__moon:hover { transform: rotate(15deg); }
.theme-switch__spot {
  position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em;
  border-radius: var(--container-radius); background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; transition: background-color 0.3s ease; filter: url(#sketchy-sm);
}
.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.theme-switch__moon:hover .theme-switch__spot { background-color: #7a7f8c; }
.theme-switch__clouds {
  width: 1.25em; height: 1.25em; background-color: var(--clouds-color); border-radius: var(--container-radius);
  position: absolute; bottom: -0.625em; left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25); filter: url(#sketchy-sm);
}
.theme-switch__stars-container {
  position: absolute; color: var(--stars-color); top: -100%; left: 0.312em; width: 2.75em; height: auto; transition: var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
  background-image: linear-gradient(to bottom, var(--container-night-bg) 0%, #252a4a 100%);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { top: 50%; transform: translateY(-50%); }
.theme-switch__container:hover .theme-switch__clouds { transform: translateX(15px) scale(1.02); }
.theme-switch__sun-moon-container::after {
  content: ""; position: absolute; inset: -5px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease;
}
.theme-switch__sun-moon-container:hover::after { opacity: 1; }
.theme-switch__shooting-star { position: absolute; width: 2px; height: 2px; background: white; top: 20%; left: -10%; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__shooting-star-2 { position: absolute; width: 1px; height: 1px; background: white; top: 35%; left: -10%; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__meteor { position: absolute; width: 3px; height: 3px; background: #ffd700; border-radius: 50%; top: -10%; left: 50%; opacity: 0; filter: blur(1px); transition: opacity 0.3s ease; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__shooting-star { animation: shootingStar 2s linear infinite; opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__shooting-star-2 { animation: shootingStar 3s linear infinite 1s; opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__meteor { animation: meteor 4s linear infinite 2s; opacity: 1; }
@keyframes shootingStar { 0% { transform: translateX(0) translateY(0) rotate(45deg); opacity: 1; } 100% { transform: translateX(150px) translateY(150px) rotate(45deg); opacity: 0; } }
@keyframes meteor { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(150px) scale(0.3); opacity: 0; } }
.theme-switch__stars-cluster { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__stars-cluster .star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 0 0 4px 1px white; }
.theme-switch__stars-cluster .star:nth-child(1) { top: 20%; left: 20%; animation: twinkle 1s infinite ease-in-out; }
.theme-switch__stars-cluster .star:nth-child(2) { top: 30%; left: 55%; animation: twinkle 1s infinite ease-in-out 0.3s; }
.theme-switch__stars-cluster .star:nth-child(3) { top: 40%; left: 80%; animation: twinkle 1s infinite ease-in-out 0.6s; }
.theme-switch__stars-cluster .star:nth-child(4) { top: 60%; left: 30%; animation: twinkle 1s infinite ease-in-out 0.9s; }
.theme-switch__stars-cluster .star:nth-child(5) { top: 70%; left: 65%; animation: twinkle 1s infinite ease-in-out 1.2s; }
.theme-switch__aurora {
  position: absolute; top: 0; left: 0; right: 0; height: 20px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.2) 25%, rgba(128, 0, 255, 0.2) 50%, rgba(0, 255, 255, 0.2) 75%, rgba(0, 255, 255, 0) 100%);
  opacity: 0; filter: blur(4px); transform: translateY(-100%); transition: opacity 0.3s ease;
}
.theme-switch__comets { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.theme-switch__comets .comet { position: absolute; width: 2px; height: 2px; background: linear-gradient(90deg, white 0%, transparent 90%); border-radius: 50%; filter: blur(1px); }
.theme-switch__comets .comet:nth-child(1) { top: 30%; left: -10%; animation: cometMove 4s linear infinite; }
.theme-switch__comets .comet:nth-child(2) { top: 50%; left: -10%; animation: cometMove 6s linear infinite 2s; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes cometMove { 0% { transform: translateX(0) translateY(0) rotate(-45deg) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(200px) translateY(200px) rotate(-45deg) scale(0.2); opacity: 0; } }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-cluster { opacity: 1; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__aurora { opacity: 1; animation: auroraWave 8s linear infinite; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__comets { opacity: 1; }
@keyframes auroraWave { 0% { transform: translateY(-100%) translateX(-50%); } 100% { transform: translateY(-100%) translateX(50%); } }

/* ---------- Bewegung reduzieren (Barrierefreiheit) ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}