@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{
  --bg-main:#121016;--bg-section:#1E132A;--bg-card:#2C1A3D;--bg-card-hover:#362248;
  --accent:#441678;--accent-hover:#6E44A3;--accent-bright:#8C5CD6;--done:#9b59d4;
  --text-primary:#F2F2F2;--text-secondary:#B8B8C2;--text-muted:#7A7A88;
  --border-subtle:rgba(138,92,214,0.15);--border-card:rgba(138,92,214,0.10);--success:#4ADE80;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-main);color:var(--text-primary);line-height:1.5;display:flex;flex-direction:column;min-height:100vh;}
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--border-subtle);background:rgba(18,16,22,0.95);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);max-width:420px;margin:0 auto;width:100%;}
.logo{display:flex;align-items:center;gap:7px;}
.logo .mark{width:26px;height:26px;object-fit:contain;display:block;}
.logo span{font-size:0.9rem;font-weight:500;letter-spacing:0.04em;color:var(--text-primary);}
.icon-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;}
.icon-btn svg{width:20px;height:20px;}
.screen{flex:1 1 auto;padding:18px 16px 80px;position:relative;overflow-x:hidden;max-width:420px;margin:0 auto;width:100%;}
.screen-title{font-size:1.15rem;font-weight:600;margin-bottom:4px;padding-left:12px;}
.screen-sub{color:var(--text-secondary);font-size:0.82rem;margin-bottom:16px;padding-left:12px;}
.hero{position:relative;border-radius:18px;padding:22px 20px 20px;background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border:1px solid rgba(140,92,214,0.32);}
.hero-label{font-size:0.66rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:10px;}
.hero h2{font-size:1.18rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:6px;}
.hero p{color:var(--text-secondary);font-size:0.84rem;margin-bottom:18px;max-width:230px;}
.hero-play-row{display:flex;align-items:center;gap:14px;}
.play-circle{width:54px;height:54px;border-radius:50%;flex:0 0 auto;background:var(--accent);border:1px solid rgba(140,92,214,0.45);display:flex;align-items:center;justify-content:center;}
.play-circle svg{width:21px;height:21px;color:#fff;margin-left:3px;}
.hero-meta{display:flex;flex-direction:column;gap:2px;}
.hero-meta .dur{font-size:0.8rem;font-weight:500;color:var(--text-primary);}
.hero-meta .by{font-size:0.74rem;color:var(--text-muted);}
.hero-dismiss{margin-top:16px;font-size:0.74rem;color:var(--text-muted);}
.hero-dismiss b{color:var(--text-secondary);font-weight:500;cursor:pointer;}
.hero-link{color:var(--text-secondary);font-weight:500;cursor:pointer;}
.hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hero-toggle{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:0;display:flex;align-items:center;}
.hero-toggle .chev{width:18px;height:18px;}
.hero-strip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border:1px solid rgba(140,92,214,0.32);}
.hs-play{width:38px;height:38px;border-radius:50%;background:var(--accent);border:1px solid rgba(140,92,214,0.45);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.hs-play svg{width:14px;height:14px;color:#fff;margin-left:2px;}
.hs-text{display:flex;flex-direction:column;flex:1 1 auto;}
.hs-text b{font-size:0.85rem;font-weight:600;}
.hs-text span{font-size:0.74rem;color:var(--text-muted);}
.intro-cards{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.icard{background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border:1px solid var(--border-card);border-radius:14px;padding:16px 16px 14px;}
.icard-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.icard-ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;background:rgba(140,92,214,0.18);display:flex;align-items:center;justify-content:center;color:var(--accent-bright);}
.icard-ic svg{width:19px;height:19px;}
.icard h3{font-size:0.98rem;font-weight:600;}
.icard p{color:var(--text-secondary);font-size:0.82rem;margin-bottom:10px;}
.icard a{font-size:0.8rem;font-weight:500;color:var(--accent-bright);text-decoration:none;}
.ch-list{display:flex;flex-direction:column;gap:8px;}
.ch-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid rgba(140,92,214,0.22);border-radius:14px;background:rgba(255,255,255,0.02);}
.ch-name{flex:1 1 auto;font-size:0.88rem;font-weight:600;display:flex;align-items:center;gap:6px;}
.badge{font-size:0.66rem;font-weight:500;padding:3px 9px;border-radius:999px;color:var(--text-secondary);background:rgba(255,255,255,0.05);border:1px solid var(--border-subtle);white-space:nowrap;}
.badge.live{color:var(--accent-bright);background:rgba(140,92,214,0.16);border-color:rgba(140,92,214,0.45);}
@keyframes badge-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(140,92,214,0);}50%{opacity:0.6;box-shadow:0 0 6px 2px rgba(140,92,214,0.28);}}
.badge.pulse{animation:badge-pulse 1.5s ease-in-out infinite;}
.badge.done-day{color:#4ADE80;background:rgba(74,222,128,0.10);border-color:rgba(74,222,128,0.32);}
.badge.missed-joker{color:#F87171;background:rgba(248,113,113,0.10);border-color:rgba(248,113,113,0.28);}
.chev{color:var(--text-muted);width:16px;height:16px;flex:0 0 auto;}
.fb{width:14px;height:14px;color:var(--accent-bright);flex:0 0 auto;vertical-align:middle;}
.chx{border:1px solid rgba(140,92,214,0.32);background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border-radius:14px;padding:16px;margin-bottom:12px;}
.chx-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;}
.chx-head b{font-size:0.9rem;font-weight:600;flex:1;display:flex;align-items:center;gap:6px;}
.chx-desc{color:var(--text-secondary);font-size:0.82rem;line-height:1.55;margin-bottom:14px;}
.todayrow{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;}
.todaytag{background:var(--accent);color:var(--text-primary);font-size:0.6rem;font-weight:500;padding:3px 7px;border-radius:4px;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.todaytext{color:var(--text-secondary);font-size:0.8rem;line-height:1.5;}
.todaytext b{color:var(--text-primary);font-weight:600;}
.barmeta{display:flex;justify-content:space-between;margin-bottom:6px;}
.barmeta span{color:rgba(255,255,255,0.42);font-size:0.7rem;}
.pbar{display:flex;gap:3px;height:7px;width:100%;margin-bottom:12px;}
.pbar i{flex:1 1 0;height:7px;border-radius:2px;min-width:0;}
.pb-done{background:var(--done);}
.pb-today{background:rgba(255,255,255,0.25);}
.pb-next{background:rgba(255,255,255,0.09);}
.pb-grey{background:rgba(255,255,255,0.06);}
.pb-missed{background:rgba(248,113,113,0.50);}
.chprog{width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;margin-bottom:12px;overflow:hidden;}
.chprog-fill{height:100%;background:var(--done);border-radius:2px;}
.pbar-phases{display:flex;gap:6px;width:100%;margin-bottom:10px;}
.pbar-phase{flex:1 1 0;display:flex;flex-direction:column;gap:4px;}
.pbar-phase-bar{height:8px;border-radius:3px;width:100%;background:rgba(255,255,255,0.06);}
.pbar-phase-bar.pp-active{background:linear-gradient(to right,var(--accent) 22%,rgba(255,255,255,0.06) 22%);}
.pbar-phase-label{font-size:0.6rem;color:rgba(255,255,255,0.28);text-align:center;}
.jrow{display:flex;align-items:center;gap:7px;margin-bottom:13px;}
.jdot{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(140,92,214,0.40);display:flex;align-items:center;justify-content:center;color:var(--accent-bright);flex:0 0 auto;transition:all 0.2s ease;cursor:pointer;}
.jdot:hover{color:#fff;border-color:rgba(255,255,255,0.6);}
.jdot-success{border-color:rgba(74,222,128,0.4) !important;color:#4ade80 !important;cursor:default;pointer-events:none;}
.jdot svg{width:8px;height:8px;}
.jtext{color:var(--text-secondary);font-size:0.72rem;}
.missed{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;background:rgba(160,50,50,0.10);border:1px solid rgba(200,80,80,0.18);border-radius:11px;margin-bottom:14px;}
.missed .warn{color:rgba(255,130,130,0.55);width:15px;height:15px;flex:0 0 auto;margin-top:1px;}
.missed .mt{color:rgba(255,170,170,0.7);font-size:0.74rem;line-height:1.5;flex:1;}
.missed .mt b{color:rgba(255,200,200,0.85);font-weight:500;}
.joker-btn{background:rgba(160,50,50,0.15);color:rgba(255,170,170,0.85);border:1px solid rgba(200,80,80,0.25);border-radius:9px;padding:7px 12px;font-size:0.72rem;display:inline-flex;align-items:center;gap:5px;white-space:normal;text-align:center;flex:0 0 auto;max-width:90px;cursor:pointer;font-family:inherit;transition:all 0.2s ease;}
.joker-btn:hover{color:#fff;border-color:rgba(255,255,255,0.4);background:rgba(160,50,50,0.25);}
.joker-btn svg{width:11px;height:11px;}
.joker-btn:hover svg{fill:#fff;}
.nowplay{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;background:rgba(68,22,120,0.22);border:1px solid rgba(140,80,220,0.35);border-radius:12px;margin-bottom:12px;}
.npl{color:#c9a8ff;font-size:0.66rem;letter-spacing:0.04em;margin-bottom:3px;}
.npt{color:var(--text-primary);font-size:0.82rem;font-weight:500;}
.wave{display:flex;align-items:center;gap:2px;height:18px;}
.wave span{display:block;width:3px;background:var(--accent-hover);border-radius:2px;animation:ch-wave 0.8s ease-in-out infinite alternate;}
.wave span:nth-child(1){height:6px;animation-delay:0s;}
.wave span:nth-child(2){height:14px;animation-delay:0.1s;}
.wave span:nth-child(3){height:10px;animation-delay:0.2s;}
.wave span:nth-child(4){height:16px;animation-delay:0.05s;}
.wave span:nth-child(5){height:8px;animation-delay:0.15s;}
@keyframes ch-wave{from{opacity:0.35;}to{opacity:1;}}
.aprog{margin-top:10px;margin-bottom:11px;}
.atrack{height:3px;background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden;}
.atrack i{display:block;height:3px;background:var(--accent-hover);border-radius:2px;width:0%;}
.atime{display:flex;justify-content:space-between;margin-top:5px;}
.atime span{color:rgba(255,255,255,0.3);font-size:0.68rem;}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.play-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:0.82rem;font-weight:500;font-family:inherit;display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.play-btn svg{width:12px;height:12px;}
.start-btn{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.65);border:1px solid rgba(255,255,255,0.13);border-radius:10px;padding:9px 16px;font-size:0.82rem;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;width:100%;}
.pause-btn{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.65);border:1px solid rgba(255,255,255,0.13);border-radius:10px;padding:9px 16px;font-size:0.82rem;font-family:inherit;display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.pause-btn svg{width:13px;height:13px;}
.cta-hint{color:rgba(255,255,255,0.25);font-size:0.7rem;margin-left:10px;}
.auto-hint{color:var(--text-muted);font-size:0.68rem;margin-top:10px;}
.chips{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.chip{font-size:0.74rem;padding:5px 12px;border-radius:999px;border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;}
.chip.on{background:rgba(140,92,214,0.16);border-color:rgba(140,92,214,0.45);color:var(--accent-bright);}
.sess-group{margin-bottom:18px;}
.sess-group h4{font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:10px;}
.sess-list{display:flex;flex-direction:column;gap:12px;}
.scard{background:linear-gradient(150deg,rgba(110,68,163,0.50) 0%,var(--bg-card) 74%);border:1px solid rgba(140,92,214,0.30);border-radius:14px;padding:15px 16px;position:relative;}
.scard:hover, .scard:focus-within{z-index:20;}
.scard-main{display:flex;align-items:center;gap:14px;width:100%;}
.scard-body{flex:1 1 auto;min-width:0;}
.scard-body .t{font-size:0.96rem;font-weight:600;display:flex;align-items:center;gap:8px;}
.scard-body .min, .sub-row .min, .cta-row .min{font-size:0.7rem;color:#cbaefa;background:rgba(140,92,214,0.15);border:1px solid rgba(140,92,214,0.25);padding:2px 8px;border-radius:999px;}
.scard-body .d{color:var(--text-secondary);font-size:0.79rem;margin-top:6px;}
.play-circle{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background:var(--accent);border:1px solid rgba(140,92,214,0.45);display:flex;align-items:center;justify-content:center;}
.play-circle svg{width:16px;height:16px;color:#fff;margin-left:2px;}
.pause-circle{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background:var(--accent-hover);border:1px solid rgba(140,92,214,0.5);display:flex;align-items:center;justify-content:center;}
.pause-circle svg{width:15px;height:15px;color:#fff;}

/* Aufklapper für Sessions-Versionen */
.expander{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding:9px 12px;background:rgba(140,92,214,0.09);border:1px solid rgba(140,92,214,0.22);border-radius:10px;color:var(--text-secondary);font-size:0.75rem;width:100%;font-family:inherit;cursor:pointer;}
.expander .exn{color:var(--accent-bright);font-weight:500;}
.expander svg{width:15px;height:15px;color:var(--accent-bright);flex:0 0 auto;}
.inner-panel{margin-top:11px;background:rgba(140,92,214,0.10);border:1px solid rgba(140,92,214,0.22);border-radius:10px;padding:11px 12px;}
.inner-handle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--accent-bright);font-size:0.75rem;font-weight:500;padding:0 0 11px 0;margin-bottom:11px;border-bottom:1px solid rgba(140,92,214,0.15);cursor:pointer;font-family:inherit;}
.inner-handle svg{width:15px;height:15px;flex:0 0 auto;}
.sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;}
.sub-row + .sub-row{border-top:1px dashed rgba(140,92,214,0.15);}
.sub-row .sl{flex:1 1 auto;min-width:0;}
.sub-row .sn{font-size:0.88rem;color:var(--text-primary);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sub-row .sd{font-size:0.75rem;color:var(--text-secondary);margin-top:4px;line-height:1.4;}
.mini-play{width:32px;height:32px;border-radius:50%;background:var(--accent);border:1px solid rgba(140,92,214,0.45);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}
.mini-play svg{width:12px;height:12px;color:#fff;margin-left:1px;}

/* Bottom Nav */
.botnav{flex:0 0 auto;display:flex;border-top:1px solid var(--border-subtle);background:rgba(18,16,22,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:100;padding-bottom:env(safe-area-inset-bottom);max-width:420px;width:100%;}
.botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 12px;color:var(--text-secondary);text-decoration:none;font-size:0.66rem;font-weight:500;}
.botnav a svg{width:22px;height:22px;}
.botnav a.on{color:var(--accent-bright);}

/* Awards */
.awards{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-subtle);}
.awards-lbl{font-size:0.64rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;}
.awards-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:center;}
.awards-col{display:flex;flex-direction:column;gap:20px;align-items:center;}
.award-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.star-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.awards-aborted{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:4px;}
.awards-note{font-size:0.58rem;color:rgba(255,255,255,0.16);text-align:center;margin-top:16px;line-height:1.5;}
.award-icon-wrap{position:relative;display:inline-flex;}
.award-count{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;}
.mt-18{margin-top:18px;}

/* Gradient-Variante für stärkere Betonung */
.strong-grad .chx{background:linear-gradient(150deg,rgba(110,68,163,0.76) 0%,var(--bg-card) 50%) !important;}
.strong-grad .icard{background:linear-gradient(150deg,rgba(110,68,163,0.72) 0%,var(--bg-card) 50%) !important;}
.strong-grad .hero{background:linear-gradient(150deg,rgba(100,45,170,0.55) 0%,var(--bg-card) 50%) !important;}
.strong-grad .nowplay{background:linear-gradient(150deg,rgba(100,30,180,0.55) 0%,rgba(44,26,61,0.95) 50%) !important;}

/* Daygrid / Fortschrittsbalken */
.daygrid, .daygrid-lg, .desk-bars-7, .desk-bars-14 { text-align:center; margin-bottom:12px; width:100%; line-height:0; font-size:0; }
.daygrid-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; width: 100%; }
.daygrid i { display:inline-block; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.08); margin:1.5px; }
.daygrid-bars i { display:block; width:100%; height:9px; border-radius:3px; background:rgba(255,255,255,0.08); margin:0; }
.daygrid-lg i{display:inline-block;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,0.08);margin:1.5px;}
.desk-bars-7 i{display:inline-block;width:112px;height:13px;border-radius:4px;background:rgba(255,255,255,0.08);margin:2.5px;}
.desk-bars-14 i{display:inline-block;width:55px;height:13px;border-radius:4px;background:rgba(255,255,255,0.08);margin:2.5px;}
.dg-done{background:var(--done) !important;}
.dg-today{background:rgba(255,255,255,0.28) !important;}

/* Stars */
.star-gold{fill:#F5C518;stroke:rgba(200,140,0,0.4);stroke-width:0.5;}
.star-fade{fill:rgba(255,255,255,0.13);stroke:rgba(255,255,255,0.06);stroke-width:0.5;}
.star-num{position:absolute;font-size:0.82rem;font-weight:700;color:#1a0a2e;line-height:1;}
.award-name{font-size:0.64rem;color:var(--text-secondary);text-align:center;max-width:62px;line-height:1.3;}
.award-name-lg{font-size:0.8rem;max-width:none;}
.award-aborted-name{opacity:0.6;}
.award-fade-txt{font-size:0.58rem;color:rgba(255,255,255,0.22);text-align:center;max-width:62px;line-height:1.3;}

/* Feedback-Zeile */
.feedback-line{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:14px;background:rgba(255,255,255,0.02);}
.fb-ic{width:34px;height:34px;border-radius:10px;background:rgba(140,92,214,0.14);display:flex;align-items:center;justify-content:center;color:var(--accent-bright);flex:0 0 auto;}
.fb-ic svg{width:18px;height:18px;}
.fb-text{display:flex;flex-direction:column;flex:1;}
.fb-text b{font-size:0.88rem;font-weight:600;}
.fb-text span{font-size:0.77rem;color:var(--text-muted);}
.fb-arrow{color:var(--text-muted);}
.fb-arrow svg{width:16px;height:16px;}

/* Settings */
.settings-top{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--border-subtle);}
.settings-bottom{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-top:1px solid var(--border-subtle);margin-top:24px;margin-bottom:24px;}
.back-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
.back-btn svg{width:22px;height:22px;}
.settings-top .stitle, .settings-bottom .stitle{font-size:1rem;font-weight:600;}
.scard2{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:18px;margin-bottom:14px;}
.scard2 h2{font-size:1.02rem;font-weight:600;margin-bottom:6px;}
.scard2 p.desc{color:var(--text-secondary);font-size:0.81rem;margin-bottom:14px;}
.scard2.accentcard{border-color:rgba(140,92,214,0.50);background:linear-gradient(150deg,rgba(110,68,163,0.25) 0%,rgba(255,255,255,0.04) 50%);}
.scard2.danger{border-color:rgba(248,113,113,0.3);}
.scard2.danger h2{color:#F87171;}
.scard-plain{background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle);border-radius:12px;padding:18px;margin-bottom:14px;}
.scard-plain h2{font-size:1.02rem;font-weight:600;margin-bottom:6px;}
.scard-plain p.desc{color:var(--text-secondary);font-size:0.81rem;margin-bottom:14px;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:0.76rem;color:var(--text-secondary);margin-bottom:6px;}
.field input{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:10px;padding:11px 13px;color:var(--text-primary);font-family:inherit;font-size:0.86rem;}
.field input:disabled{opacity:0.5;}
.sbtn{background:rgba(255,255,255,0.06);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 18px;font-size:0.84rem;font-family:inherit;cursor:pointer;}
.sbtn.full{width:100%;}
.sbtn.accent{background:var(--accent);border-color:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.sbtn.accent svg{width:15px;height:15px;}
.logout-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,0.04);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:12px;padding:13px;font-size:0.86rem;font-family:inherit;cursor:pointer;margin-bottom:14px;}
.logout-btn svg{width:16px;height:16px;}
.danger-btn{width:100%;background:rgba(248,113,113,0.1);color:#F87171;border:1px solid rgba(248,113,113,0.3);border-radius:10px;padding:11px 18px;font-size:0.84rem;font-family:inherit;cursor:pointer;}
.sfoot{margin-top:18px;text-align:center;color:var(--text-muted);font-size:0.74rem;line-height:1.7;}
.sfoot a{color:var(--text-muted);text-decoration:none;}

/* Desktop Rail */
.desk-settings{max-width:960px;}
.rail-foot a.on{background:rgba(140,92,214,0.16);color:var(--text-primary);}
.rail{flex:0 0 220px;border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:22px 16px;background:rgba(30,19,42,0.4);}
.rail .logo{margin:4px 8px 28px;}
.rail-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.rail-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;text-decoration:none;color:var(--text-secondary);font-size:0.92rem;font-weight:500;}
.rail-nav a svg{width:20px;height:20px;}
.rail-nav a.on{background:rgba(140,92,214,0.16);color:var(--text-primary);}
.rail-foot{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border-subtle);padding-top:14px;}
.rail-foot a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:11px;text-decoration:none;color:var(--text-muted);font-size:0.88rem;}
.rail-foot a svg{width:18px;height:18px;}
.desk-main{flex:1;padding:26px 38px 34px;overflow:hidden;}
.desk-main .screen-title{font-size:1.4rem;}
.desk-hero{display:flex;gap:20px;align-items:center;border-radius:18px;padding:20px 24px;background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border:1px solid rgba(140,92,214,0.32);}
.desk-hero .play-circle{width:38px;height:38px;}
.desk-hero .play-circle svg{width:16px;height:16px;}
.desk-hero h2{font-size:1.2rem;font-weight:600;margin-bottom:4px;}
.desk-hero p{color:var(--text-secondary);font-size:0.85rem;max-width:430px;}
.desk-hero .hero-label{margin-bottom:8px;}
.desk-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.desk-ch{margin-top:0;}

/* Auth & Login */
.auth-card{max-width:400px;width:100%;margin:auto;padding:32px 28px;background:linear-gradient(150deg, rgba(110,68,163,0.30) 0%, var(--bg-section) 50%);border:1px solid var(--border-subtle);border-radius:18px;box-shadow: 0 8px 32px rgba(0,0,0,0.25);}
.pw-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
.pw-wrapper input { width: 100%; padding-right: 40px; margin-bottom: 0 !important; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; transition: color 0.2s; outline: none; }
.pw-toggle:hover { color: var(--text-primary); }
.pw-toggle svg { width: 18px; height: 18px; }
.auth-error{color:#F87171;font-size:0.82rem;margin-top:8px;padding:10px 13px;background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.22);border-radius:8px;}
.auth-success{color:#4ADE80;font-size:0.82rem;margin-top:8px;padding:10px 13px;background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.22);border-radius:8px;}
.spinner{width:32px;height:32px;border:3px solid rgba(140,92,214,0.25);border-top-color:var(--accent-bright);border-radius:50%;animation:spin 0.8s linear infinite;margin:20px auto;}
.btn-spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;}
.mini-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-main);}

/* =========================================
   Responsive Layout Switcher
   ========================================= */
.desktop-view { display: none; }
.mobile-view { display: flex; flex-direction: column; min-height: 100vh; }

@media (min-width: 850px) {
  body { background: var(--bg-main); display: flex; align-items: center; justify-content: center; padding: 20px; }
  .mobile-view { display: none; }
  .desktop-view {
    display: flex;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    min-height: 600px;
    height: 80vh;
  }
}

/* V2 Einblend-Animationen */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.screen-title, .screen-sub, .hero, .hero-strip, .icard, .feedback-line, .ch-accordion-item, .sess-group, .scard {
  animation: slideUpFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
.screen-title { animation-delay: 0.05s; }
.screen-sub { animation-delay: 0.1s; }
.hero, .hero-strip { animation-delay: 0.1s; }
.icard:nth-child(1) { animation-delay: 0.15s; }
.icard:nth-child(2) { animation-delay: 0.25s; }
.feedback-line { animation-delay: 0.3s; }

.ch-accordion-item:nth-child(1), .scard:nth-child(1) { animation-delay: 0.1s; }
.ch-accordion-item:nth-child(2), .scard:nth-child(2) { animation-delay: 0.18s; }
.ch-accordion-item:nth-child(3), .scard:nth-child(3) { animation-delay: 0.26s; }
.ch-accordion-item:nth-child(4), .scard:nth-child(4) { animation-delay: 0.34s; }
.ch-accordion-item:nth-child(5), .scard:nth-child(5) { animation-delay: 0.42s; }

.sess-group:nth-child(1) { animation-delay: 0.1s; }
.sess-group:nth-child(2) { animation-delay: 0.18s; }
.sess-group:nth-child(3) { animation-delay: 0.26s; }

/* Sessions Playing-States */
.inner-panel.playing-panel { background: #1D112C; border-color: rgba(140,80,220,0.35); }
.sub-row.playing-row { align-items: center; }
.scard.playing { background: rgba(68,22,120,0.22); border-color: rgba(140,80,220,0.35); }
.npl-sm { color: #c9a8ff; font-size: 0.6rem; letter-spacing: 0.04em; margin-bottom: 2px; }
.aprog-sm { margin-top: 7px; }
.mini-pause { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-hover); border: 1px solid rgba(140,92,214,0.5); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.mini-pause svg { width: 12px; height: 12px; color: #fff; }

/* ============================================
   Audio Slider
   ============================================ */
.audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  touch-action: none; /* verhindert Drag-Abbruch auf Mobile bei vertikalem Verrutschen (V1-Fix) */
  margin: 0;
  padding: 0;
  background-image: linear-gradient(90deg, var(--accent-hover), var(--accent-hover));
  background-size: var(--value, 0%) 100%;
  background-repeat: no-repeat;
}
.audio-slider::-webkit-slider-runnable-track { width: 100%; height: 3px; background: transparent; border: none; }
.audio-slider::-moz-range-track { width: 100%; height: 3px; background: transparent; border: none; }
.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 11px;
  width: 11px;
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
  border: none;
  cursor: pointer;
  margin-top: -4px;
}
.audio-slider::-moz-range-thumb {
  height: 11px;
  width: 11px;
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
  border: none;
  cursor: pointer;
}

/* Challenge-Slider: reine Fortschrittsanzeige, kein Vorscrubben.
   Knopf unsichtbar + nicht interaktiv (Tag muss vollständig gehört werden). */
.ch-slider { pointer-events: none; cursor: default; }
.ch-slider::-webkit-slider-thumb { opacity: 0; width: 0; height: 0; box-shadow: none; }
.ch-slider::-moz-range-thumb { opacity: 0; width: 0; height: 0; box-shadow: none; border: none; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* --- Mobile Hero Responsive Styles --- */
.mobile-hero-container {
  text-align: center;
  margin-bottom: 12px;
  margin-top: 4px;
}
.mobile-hero-logo {
  width: 150px;
  height: 150px;
  margin-bottom: 0;
  display: inline-block;
}
.mobile-hero-title {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0;
}
#hero-container-mobile,
#hero-container-desktop {
  position: relative;
}
.collapsed-icon-wrapper {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 21px;
  z-index: 10;
}
.collapsed-icon-wrapper-desk {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 23px;
  z-index: 10;
}

@media (max-width: 380px) {
  .mobile-hero-container {
    margin-bottom: 0px;
  }
  .mobile-hero-logo {
    width: 125px;
    height: 125px;
  }
  .mobile-hero-title {
    font-size: 1.4rem;
  }
  .collapsed-icon-wrapper {
  margin-bottom: 8px;
  }
  .icard-acc {
    padding: 12px 12px 0 12px !important;
  }
  .icard-acc-header {
    margin-bottom: 8px !important;
  }
  .icard-acc-content {
    margin-bottom: 12px !important;
  }
  .icard-acc-footer {
    margin: 0 -12px !important;
  }
  .icard-acc-link {
    padding: 10px 12px !important;
  }
  .intro-cards-mobile {
    margin-top: 12px !important;
    gap: 8px !important;
  }
}
.intro-cards-mobile {
  margin-top: 20px;
}
.icard-acc {
  padding: 16px 16px 0 16px !important;
}
.icard-acc-header {
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 12px;
}
.icard-acc-content {
  display: none;
  margin-bottom: 16px;
}
.icard-acc-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0 -16px;
}
.icard-acc-link {
  text-decoration: none;
  display: block;
  padding: 12px 16px;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box { background: linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%); border: 1px solid rgba(140,92,214,0.32); border-radius: 18px; padding: 24px; max-width: 420px; width: 100%; transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.05); border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: background 0.2s; }
.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.modal-close svg { width: 12px; height: 12px; }
.modal-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; padding-right: 32px; }
.modal-desc { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 20px; line-height: 1.5; }
.modal-textarea { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; color: var(--text-primary); font-family: inherit; font-size: 0.86rem; min-height: 120px; resize: vertical; margin-bottom: 16px; }
.modal-textarea:focus { outline: none; border-color: var(--accent-bright); }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
.modal-btn { padding: 10px 18px; border-radius: 10px; font-size: 0.84rem; font-weight: 500; font-family: inherit; cursor: pointer; border: none; }
.modal-btn.cancel { background: transparent; color: var(--text-secondary); }
.modal-btn.cancel:hover { color: var(--text-primary); }
.modal-btn.submit { background: var(--accent); color: #fff; }
.modal-btn.submit:hover { background: var(--accent-hover); }

/* Custom Tooltip */
.ui-tooltip{position:relative;display:inline-flex;}
.ui-tooltip.force-show::after{content:attr(data-tip);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:var(--bg-section);color:var(--text-primary);padding:5px 9px;border-radius:6px;font-size:0.75rem;font-weight:500;white-space:nowrap;border:1px solid var(--border-subtle);box-shadow:0 4px 12px rgba(0,0,0,0.5);pointer-events:none;z-index:100;animation:tt-fade 0.2s ease forwards;}
@media (hover: hover) {
  .ui-tooltip:hover::after{content:attr(data-tip);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:var(--bg-section);color:var(--text-primary);padding:5px 9px;border-radius:6px;font-size:0.75rem;font-weight:500;white-space:nowrap;border:1px solid var(--border-subtle);box-shadow:0 4px 12px rgba(0,0,0,0.5);pointer-events:none;z-index:100;animation:tt-fade 0.2s ease forwards;}
}
.sess-info-wrapper .sess-info-popup{position:absolute;top:100%;left:0;width:100%;min-width:270px;margin-top:2px;background:var(--bg-section);color:var(--text-primary);padding:10px 12px;border-radius:8px;font-size:0.75rem;font-weight:400;text-align:left;line-height:1.45;border:1px solid var(--border-subtle);box-shadow:0 4px 12px rgba(0,0,0,0.5);pointer-events:none;z-index:100;opacity:0;visibility:hidden;transition:opacity 0.2s ease, margin-top 0.2s ease, visibility 0.2s ease;}
.sess-info-wrapper.force-show .sess-info-popup{opacity:1;visibility:visible;margin-top:6px;}
@media (hover: hover) { .sess-info-wrapper:hover .sess-info-popup{opacity:1;visibility:visible;margin-top:6px;} }
@keyframes tt-fade{from{opacity:0;margin-top:2px;}to{opacity:1;margin-top:6px;}}

/* Info Page & Info Link */
.info-link{display:block;text-align:center;margin-top:18px;padding:10px;color:var(--text-muted);font-size:0.78rem;text-decoration:none;border-top:1px solid var(--border-subtle);}
.info-link span{color:var(--accent-bright);}
.ip-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border-subtle);}
.ip-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
.ip-back svg{width:22px;height:22px;}
.ip-title{font-size:1rem;font-weight:600;}
.ic-list{display:flex;flex-direction:column;}
.ic-card{padding:14px 0;border-bottom:1px solid var(--border-subtle);}
.ic-card:last-child{border-bottom:none;}
.ic-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ic-name{font-size:0.92rem;font-weight:600;}
.ic-min{font-size:0.68rem;color:#cbaefa;background:rgba(140,92,214,0.15);border:1px solid rgba(140,92,214,0.25);padding:2px 8px;border-radius:999px;}
.ic-desc{font-size:0.8rem;color:var(--text-secondary);line-height:1.55;margin:4px 0 8px;}
.ic-wann-label{font-size:0.63rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;}
.ic-wann{font-size:0.77rem;color:var(--text-secondary);line-height:1.5;}

/* Responsive Session Version Labels */
.exn-short { display: none; }
@media (max-width: 370px) {
  .exn-full { display: none !important; }
  .exn-short { display: inline !important; }
  .expander { font-size: 0.68rem; padding: 9px 10px; }
}

/* Settings Calendar */
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.month-nav-btn { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-card); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.month-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.month-nav-btn:disabled { opacity: 0.3; cursor: default; }
.month-nav-label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; justify-items: center; margin: 0 auto 16px; max-width: 280px; }
.cal-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cal-dot.on { background: var(--accent-bright); border-color: var(--accent-bright); }
.cal-dot.today { border: 2px solid rgba(255,255,255,0.85); }
.cal-dot.future { background: transparent; border: 1px dashed rgba(255,255,255,0.35); color: var(--text-muted); }
.cal-dot.empty { visibility: hidden; }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 11px; color: var(--text-muted); margin-bottom: 18px; }
.cal-legend.mobile-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; justify-items: start; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.leg-dot.on { background: var(--accent-bright); border-color: var(--accent-bright); }
.leg-dot.today { border: 2px solid rgba(255,255,255,0.85); }
.leg-dot.future { background: transparent; border: 1px dashed rgba(255,255,255,0.35); }

.prog-low { background: rgba(255,255,255,0.25) !important; }
.prog-mid { background: var(--accent) !important; }
.prog-high { background: var(--success) !important; }