/* Design-Einstellungen: hier Farben, Schrift und Abstände ändern */
:root{--bg:#eef1f7;--ink:#17203a;--mut:#5d6786;--card:#fff;--line:#d5dbea;--acc:#2f4bff;--on:#fff;--hi:#ffd84a;--ok:#1e9e5a;--bad:#d93a4a;--r:14px}
[data-theme=dark]{--bg:#0f1430;--ink:#e9edff;--mut:#98a3c9;--card:#171e44;--line:#2a3366;--acc:#7b8cff;--on:#0f1430}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 "Bahnschrift","Segoe UI",system-ui,sans-serif;transition:background .4s,color .4s}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;animation:drift 26s ease-in-out infinite alternate;
 background:radial-gradient(40% 40% at 20% 20%,color-mix(in srgb,var(--acc) 26%,transparent),transparent),radial-gradient(35% 35% at 80% 75%,color-mix(in srgb,var(--hi) 28%,transparent),transparent)}
@keyframes drift{to{transform:translate(6%,-5%) rotate(6deg) scale(1.08)}}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:20px clamp(16px,4vw,48px)}
.logo{margin:0;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:800;letter-spacing:-.03em;display:flex;gap:.05em}
.logo span{display:inline-block;animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both}
.logo span:nth-child(2){animation-delay:.12s}.logo span:nth-child(3){animation-delay:.24s;background:linear-gradient(transparent 58%,var(--hi) 58% 92%,transparent 92%);padding:0 .2em;transform:rotate(-2deg)}
@keyframes rise{from{opacity:0;transform:translateY(.8em) rotate(4deg)}}
.right,#who{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
main{flex:1;width:100%;max-width:980px;margin:0 auto;padding:8px clamp(16px,4vw,32px) 32px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:10px;padding:9px 16px;background:var(--acc);color:var(--on);font-weight:700;transition:transform .15s,box-shadow .2s,filter .2s}
button:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 35%,transparent)}
button:active{transform:scale(.96)}
button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
button.del{background:transparent;color:var(--bad);padding:4px 10px;border:1.5px solid var(--bad)}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
input,select{background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
input:focus,select:focus{border-color:var(--acc);outline:0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.tabs button{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card,.folder,.row,.login,fieldset{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r)}
.folder{border-left:10px solid hsl(var(--h) 80% 55%);padding:18px;text-align:left;color:var(--ink);font-size:1.1rem;box-shadow:none}
.folder small{display:block;color:var(--mut);font-weight:400}
.folder:hover{transform:translateY(-4px) rotate(-.6deg)}
.row{display:flex;gap:12px;align-items:center;padding:10px 14px;margin:0 0 8px;flex-wrap:wrap}
.row .grow{flex:1;min-width:140px}.row small{color:var(--mut);display:block}
.row img{width:48px;height:48px;object-fit:cover;border-radius:8px}
.row a{color:var(--ink);font-weight:700}
.bar{height:14px;background:var(--line);border-radius:9px;overflow:hidden;flex:2;min-width:120px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--hi));border-radius:9px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.login{max-width:420px;margin:8vh auto;padding:28px;display:grid;gap:14px;animation:rise .6s .3s both}
.login h2,main h2{margin:0;letter-spacing:-.02em}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;align-items:center}
fieldset{padding:14px;margin:0 0 12px;display:grid;gap:8px}
.opt{display:flex;gap:8px;align-items:center}.opt .o,.q{flex:1}
.choice{text-align:left;background:var(--card);color:var(--ink);border:1.5px solid var(--line);display:block;width:100%;margin:6px 0}
.choice.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,var(--card))}
.choice.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 25%,var(--card))}
.choice.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 25%,var(--card))}
.empty{color:var(--mut);padding:24px;border:1.5px dashed var(--line);border-radius:var(--r);text-align:center}
#player{position:sticky;bottom:0;padding:10px clamp(16px,4vw,48px);background:var(--card);border-top:1.5px solid var(--line);display:flex;gap:14px;align-items:center;flex-wrap:wrap;animation:rise .4s both}
#player iframe{width:320px;height:180px;border:0;border-radius:10px}#player audio{flex:1;min-width:200px}
footer{padding:14px;text-align:center}footer button{font-size:.8rem;padding:4px 12px;opacity:.7}
dialog{border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);width:min(460px,92vw);padding:22px}
dialog::backdrop{background:rgba(10,14,40,.55);backdrop-filter:blur(4px)}dialog[open]{animation:rise .3s both}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;z-index:9;animation:rise .3s both}
@media(prefers-reduced-motion:reduce){*,::before{animation:none!important;transition:none!important}}
.banner{background:var(--hi);color:#17203a;border-radius:var(--r);padding:12px 16px;margin:0 0 18px;font-weight:700;animation:rise .5s both}
.chip{background:color-mix(in srgb,var(--acc) 16%,var(--card));border-radius:20px;padding:2px 12px;font-size:.85rem;white-space:nowrap}
.date{min-width:84px}.dim{opacity:.55}.tag{color:var(--bad);font-weight:700}
dialog{width:min(760px,94vw);max-height:90vh}dialog .tabs{margin-bottom:14px}dialog h3{margin:18px 0 8px}
.tools label{display:flex;gap:6px;align-items:center}input[type=number]{width:110px}
.wide{flex:1;min-width:220px}
.hid{display:none}