/* RBS 6 — Studio Noir. Shared design system for every application view. */
:root{--bg:#0c0e0d;--bg2:#151815;--text:#f4f6ef;--mute:#a8afa5;--mute2:#a0a89c;--pink:#d2ff5a;--lila:#a9d745;--zyan:#c7e7c0;--verlauf:linear-gradient(110deg,#d2ff5a,#bce747);--verlauf-weit:var(--verlauf);--auf-verlauf:#172007;--card:#181c18;--r:16px;--r-innen:12px;--r-klein:8px;--glut:none;--schatten:0 12px 30px #0003}
body{background:var(--bg);font-size:16px;line-height:1.6}h1,h2,h3{line-height:1.12;letter-spacing:-.035em}button,input,select,textarea{font-size:1rem}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d2ff5a;outline-offset:4px}.hint,.kicker,.minibtn,.reiter button,.nav-main button{font-size:.875rem}.kicker{color:#c8dbb3;letter-spacing:.12em}.topbar{background:#101310f5;border-bottom:1px solid #ffffff12;padding:16px 32px;gap:28px;box-shadow:none}.brand{font-size:18px}.brand-mark{width:42px;height:42px;border-radius:10px;color:#172007;font-size:12px;box-shadow:none}.nav-main button.on{background:#d2ff5a;color:#172007;box-shadow:none}.nav-main button{border-radius:8px}.btn{border-radius:9px;box-shadow:none}.btn-amber{color:#172007}.btn-ghost{border:1px solid #ffffff24;background:transparent}.drop{background:#20251f;border:1px solid #ffffff20}.page{max-width:1320px;padding:36px 32px 80px;margin:auto}.page>h2{font-size:clamp(2rem,4vw,3rem)}.card,.leerkasten{background:#171b17;border:1px solid #ffffff15;border-radius:16px;box-shadow:none}.leerkasten{padding:32px;line-height:1.8}.leerkasten b{font-size:1.25rem;color:#f4f6ef}.reiter{gap:6px;background:#161a15;border-radius:12px;padding:5px}.reiter button{border-radius:8px}.reiter button.on,.reiter button[aria-selected=true]{background:#d2ff5a;color:#172007;box-shadow:none}input,select,textarea{background:#10140f;color:#f4f6ef;border:1px solid #3a4235;border-radius:9px}input::placeholder,textarea::placeholder{color:#929b8d}.form{padding:30px}.form h3{font-size:1.7rem}.form input{min-height:50px}.form label{font-size:.875rem}.studio{background:transparent}.studio-kopf{border-bottom:1px solid #ffffff18;padding-bottom:24px;margin-bottom:24px}.sk-titel h2{font-size:2.5rem}.modus{background:#1c211a;border:1px solid #ffffff18;box-shadow:none}.modus-knopf.an{background:#d2ff5a;color:#172007;box-shadow:none}.sk-fertig{background:#d2ff5a;color:#172007;border-radius:9px;box-shadow:none}.booth{background:#121811;border:1px solid #39432f;border-radius:18px;box-shadow:none}.booth-oben,.booth-unten{background:#151d12}.booth-buehne{background:linear-gradient(180deg,#192415,#10170e)}.booth-text{color:#f4f6ef}.studio-pane .card,.fx-grid>div{border-radius:12px}.schub,.schub-innen{background:#171d15;color:#f4f6ef}.feed-gitter{gap:22px}.feedkopf{margin:10px 0 24px}.feedkopf h2{font-size:2rem}.song-kachel{border-radius:14px;background:#181e16;border:1px solid #ffffff14;box-shadow:none}.transport{background:#131b10;border-top:1px solid #52633a}.session-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.session-intro h1{font-size:clamp(2.5rem,5vw,4.7rem);margin:14px 0 12px}.session-intro p{color:var(--mute);margin:0}.session-tag{font-size:.75rem;letter-spacing:.15em;border:1px solid #697957;border-radius:30px;padding:10px 17px;white-space:nowrap;color:#d2ff5a}.session-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:22px}.quick-booth,.quick-writing{border-radius:18px;min-width:0;padding:30px;border:1px solid #ffffff20}.quick-booth{background:linear-gradient(90deg,#10190eea,#10190edb),url('/bilder/booth.jpg') center/cover}.quick-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.75rem;color:#b3bea9;flex-wrap:wrap}.quick-top .kicker{font-size:.75rem}.quick-booth h2{font-size:clamp(2.5rem,4.2vw,4.6rem);color:#d2ff5a;margin:36px 0 10px}.quick-sub{color:#bcc8b3}.quick-booth canvas{width:100%;height:96px;display:block;margin:20px 0}.quick-transport{display:flex;align-items:center;justify-content:space-between;gap:20px}.quick-transport time{font:700 2.3rem var(--font);font-variant-numeric:tabular-nums}.quick-record{border:0;background:#d2ff5a;color:#172007;padding:16px 20px;border-radius:10px;font-weight:700;min-height:56px}.quick-record[aria-pressed=true]{background:#ff817b;color:#240b09}.quick-record span{margin-right:8px}.quick-note,.session-privacy{font-size:.8125rem;color:#a8b3a0}.quick-writing{background:#191e16;display:flex;flex-direction:column}.quick-writing h2{font-size:1.7rem;margin:24px 0}.quick-writing textarea{width:100%;flex:1;min-height:200px;resize:vertical;background:transparent;border:0;border-top:1px solid #ffffff15;border-bottom:1px solid #ffffff15;padding:20px 0;line-height:2}.writing-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;font-size:.75rem;color:#b4bead}.writing-bottom .btn{font-size:.8125rem;padding:10px}.session-next{margin:38px 0 22px}.session-next h2{font-size:1.7rem;margin:0 0 8px}.session-next p{margin:0;color:var(--mute)}.session-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.session-card{text-align:left;padding:26px;border:1px solid #ffffff20;border-radius:14px;background:#171b15;color:var(--text);transition:border-color .2s,transform .2s}.session-card:hover{border-color:#b7d37d;transform:translateY(-3px)}.session-card h3{font-size:1.45rem;margin:22px 0 12px}.session-card p{color:var(--mute);font-size:.875rem;min-height:44px}.card-action{display:block;margin-top:24px;color:#d2ff5a;font-size:.875rem;font-weight:600}.session-privacy{margin-top:26px}.skip-session{position:fixed;left:16px;top:-100px;z-index:999;background:#d2ff5a;color:#172007;padding:12px}.skip-session:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#quickResult audio{width:100%;margin:20px 0 12px}#quickError{color:#ffb8b1;font-size:.875rem}#page-login>h2,#page-login>p{text-align:center}#page-login .grid3{display:grid;grid-template-columns:1fr 1fr;gap:24px}.view-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid #ffffff18}.view-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0}.view-heading p{color:var(--mute);margin:0}.view-heading .kicker{font-size:.75rem}#page-beats,#page-liga,#page-charts,#page-chat,#page-profil{min-height:70vh}
@media(min-width:1100px){body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .topbar{position:fixed;inset:0 auto 0 0;width:230px;flex-direction:column;align-items:stretch;padding:28px 20px;z-index:50;border-right:1px solid #ffffff14}.topbar .brand{flex-shrink:0}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .nav-main{display:block;margin-top:30px}body[data-view] #navApp{gap:8px!important}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) #navApp{flex-direction:column}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .nav-main button{text-align:left;width:100%;padding:13px 16px}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .page{margin-left:230px;max-width:none;padding:40px}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .brand{flex-wrap:wrap}body[data-view]:not([data-view=landing]):not([data-view=login]):not([data-view=neues-passwort]) .drop{left:0;right:auto;top:auto;bottom:50px}}
@media(max-width:820px){.topbar{padding:12px 16px;gap:12px}.brand{font-size:14px}.brand-mark{width:36px;height:36px}.page{padding:26px 18px 100px}.session-grid{grid-template-columns:1fr}.session-intro{align-items:start}.session-tag{display:none}.quick-booth,.quick-writing{padding:22px}.session-cards{grid-template-columns:1fr}.session-card p{min-height:0}.quick-transport{gap:12px}.quick-record{padding:14px;font-size:.875rem}.quick-transport time{font-size:1.8rem}#page-login .grid3{grid-template-columns:1fr}.view-heading{align-items:start;flex-direction:column}.writing-bottom{flex-wrap:wrap}.sk-titel h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--akzent:#d2ff5a}.songkachel{background:#181d16;border:1px solid #ffffff18;border-radius:16px;box-shadow:none;overflow:hidden}.songkachel .beitrag-kopf{padding:18px}.songkachel .unten{padding:20px}.beitrag-bild,.profilbild,.chatbild{background:#35472a;color:#e8ffcd;box-shadow:none}.songkachel .abspielen{background:#d2ff5a;color:#172007;box-shadow:none}.beatkachel,.beatzeile{background:#191f16;border:1px solid #ffffff16;border-radius:12px;box-shadow:none}.beatzeile.gewaehlt{background:#29351f;border-color:#9cbc67}.beat-genre.an{background:#d2ff5a;color:#172007;box-shadow:none}.beatmeta,.beatlizenz,.beat-genre{font-size:.875rem}.paarung{background:#192016;border:1px solid #ffffff18;box-shadow:none;border-radius:12px}.paarung.offen{background:#25301c;border-color:#91ac60}.paarung .wer,.paarung .punkte{font-size:.875rem}.turniersieger{background:#29391d;border:1px solid #789651;box-shadow:none}.chat-liste,.chat-raum{background:#171d14;border:1px solid #ffffff18;box-shadow:none;border-radius:14px}.chatperson.an{background:#34452a;box-shadow:none}.chatname b{font-size:.9375rem}.chatname small{font-size:.8125rem}.chat-eingabe{padding:16px;border-top:1px solid #ffffff16}.profilkopf{padding:28px;background:#1c2517;border:1px solid #ffffff18;border-radius:16px}.profilkopf .zeile{font-size:.875rem}.liga-list>div{border-radius:12px}.schub-inhalt{background:#171d15}.fxchip,.fxwahl{background:#20291a;border-color:#ffffff1a}.fxchip-name,.fxwahl-text strong{font-size:.875rem}.fxwahl.drin .fxwahl-tun{color:#172007}.btn.btn-warn{background:#ffb020;color:#211402}.fuss-recht{border-top:1px solid #ffffff15;background:#0c0e0d}.fuss-recht button{font-size:.875rem}.minibtn{min-height:44px}.studio-pane textarea{line-height:1.8}.quick-record:hover{filter:brightness(1.06)}
@media(max-width:580px){.chat-zwei{grid-template-columns:1fr;height:auto}.chat-liste{max-height:180px}.chat-raum{min-height:380px}.profilkopf{padding:20px}.session-intro h1{font-size:2.6rem}.quick-booth h2{font-size:2.7rem}.quick-writing h2{font-size:1.5rem}}