:root{
  --bg:#1B1F24;
  --side:#171A1E;
  --panel:#20252B;
  --raised:#262C34;
  --hover:#2A3038;
  --line:#333A43;
  --line-2:#44505C;
  --ink:#E8EAED;
  --ink-2:#C4CBD2;
  --muted:#9AA3AD;
  --faint:#6B7480;
  --amber:#F0B23C;
  --amber-ink:#1B1F24;
  --amber-soft:#3A3222;
  --amber-text:#F0D9A8;
  --blue:#6FA8DC;
  --blue-soft:#24323F;
  --blue-text:#BFD8EE;
  --red-soft:#3A2420;
  --red-line:#A85A4A;
  --red-text:#E7A497;
  --wave:#4A5561;
  --wave-off:#3A444F;
  --wave-hover:#7C8794;
  --star:#F0B23C;
  --star-line:#6B5526;
  --highlight:#F0B23C;
  --chip-on-count:#5A4415;
  --row-hover:#1F242A;
  --use-text:#9FC0DE;
  --note-line:#6B5526;
  --auto-line:#4D6E8C;
  --player:#111417;
  --coral:var(--amber);
  --coral-soft:var(--amber-soft);
  --coral-text:var(--amber-text);
  --coral-ink:var(--amber-ink);
  --logo-1:#F0B23C;
  --logo-2:#6FA8DC;
  --ui:"Schibsted Grotesk", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --playerh:74px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg{flex:none}

/* ---------- Kopfzeile */
.top{display:flex;align-items:center;gap:24px;padding:12px 20px;border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;flex-direction:column;gap:3px;min-width:210px}
.brand .word{font-weight:800;font-size:23px;letter-spacing:-.01em;line-height:1}
.lanes{display:flex;gap:3px}
.lanes i{display:block;height:3px}
.lanes i:nth-child(1){width:32px;background:var(--logo-1)}
.lanes i:nth-child(2){width:16px;background:var(--logo-2)}
.lanes i:nth-child(3){width:44px;background:var(--ink)}
.search{flex:1;max-width:760px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:6px;background:var(--raised);border:1px solid var(--line-2)}
.search:focus-within{border-color:var(--amber)}
.search svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.search input{flex:1;border:0;outline:none;background:transparent;font-size:15px}
.search input::placeholder{color:var(--faint)}
.top-actions{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:6px;border:1px solid var(--amber);background:var(--amber);color:var(--amber-ink);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.btn:hover{background:#FFC55A}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2);font-weight:500}
.btn.ghost:hover{background:var(--hover);color:var(--ink)}
.btn.danger{background:transparent;color:var(--red-text);border-color:var(--red-line);font-weight:500}
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);text-decoration:none;font-size:16px;line-height:1}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.star.on{color:var(--star);border-color:var(--star-line)}

/* ---------- Raster */
.app{flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr);padding-bottom:var(--playerh)}
.app.has-detail{grid-template-columns:248px minmax(0,1fr) 360px}

/* ---------- Linke Spalte */
.side{background:var(--side);border-right:1px solid var(--line);overflow:auto;padding:16px 12px;display:flex;flex-direction:column;gap:22px}
.side h2{margin:0 0 6px;padding:0 8px;font-size:12px;font-weight:500;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button,.uses button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;color:var(--ink-2)}
.nav button:hover,.uses button:hover{background:var(--hover);color:var(--ink)}
.nav button.on{background:var(--hover);color:var(--ink);font-weight:600}
.nav button:focus-visible,.uses button:focus-visible{outline:2px solid var(--amber)}
.count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;font-weight:400}
.nav .sep{height:1px;background:var(--line);margin:8px 6px}
.side-block{display:flex;flex-direction:column;gap:6px}
.lib{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;background:var(--panel);border:1px solid var(--line)}
.lib span{display:flex;flex-direction:column}
.lib small{font-size:12px;color:var(--muted)}
.lib.soon{background:transparent;border-style:dashed;color:var(--muted)}
.lib.soon strong{font-weight:500}
.uses{display:flex;flex-direction:column;gap:1px}
.uses button.in{background:var(--amber-soft);color:var(--amber-text);font-weight:600}
.uses button.in .count{color:var(--amber-text)}
.uses button.out{background:var(--red-soft);color:var(--red-text);text-decoration:line-through}
.side-foot{margin-top:auto;font-size:11.5px;color:var(--faint);padding:10px 8px 0;border-top:1px solid var(--line)}

/* ---------- Mitte */
.main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 22px 8px}
.fbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-size:13.5px}
.fbtn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5}
.fbtn:hover{background:var(--hover)}
.fbtn.active{border-color:var(--amber);background:var(--amber-soft);color:var(--amber-text);font-weight:600}
.fbtn.open{box-shadow:0 0 0 2px rgba(240,178,60,.35)}
.reset{all:unset;cursor:pointer;font-size:13px;color:var(--muted);padding:6px 4px;margin-left:4px;text-decoration:underline;text-underline-offset:3px}
.reset:hover{color:var(--ink)}

.dropdown{position:absolute;z-index:20;top:58px;left:22px;width:min(560px,calc(100% - 44px));max-height:60vh;overflow:auto;padding:14px;border-radius:8px;background:var(--raised);border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px}
.dropdown[hidden]{display:none}
.dd-search{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:5px;background:var(--bg);border:1px solid var(--line)}
.dd-search input{flex:1;border:0;outline:none;background:transparent}
.dd-hint{font-size:12px;color:var(--muted)}
.dd-group{display:flex;flex-direction:column;gap:6px}
.dd-group h3{margin:0;font-size:12px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:8px}
.dd-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.dd-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.dd-row input[type=number],.dd-row input[type=text]{width:70px;height:30px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);padding:0 8px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;padding:3px 10px;font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
.chip:hover{border-color:var(--muted);color:var(--ink)}
.chip.on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:600}
.chip.out{background:var(--red-soft);border-color:var(--red-line);color:var(--red-text);text-decoration:line-through}
.chip .c{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.chip.on .c{color:var(--chip-on-count)}
.chip.fam{border-style:dashed}

.quick{display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap;padding:0 22px 8px;min-height:30px}
.quick .ql{font-size:12px;color:var(--muted);margin-right:4px}
.quick .chip{flex:none}

.listhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 22px 10px;border-bottom:1px solid var(--line)}
.listhead h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.listhead .sub{color:var(--muted);font-size:13px}
.listhead .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.listhead .desc{flex-basis:100%;color:var(--ink-2);font-size:13px;max-width:80ch}
select{height:32px;border:1px solid var(--line-2);border-radius:6px;background:var(--raised);padding:0 8px;font-size:13px}

.list{overflow:auto;flex:1;min-height:0;padding:0 14px 30px}
.row{display:grid;grid-template-columns:34px minmax(200px,1.3fr) minmax(120px,1fr) 104px 46px auto;gap:14px;align-items:center;padding:9px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.row:hover{background:var(--row-hover)}
.row.sel{background:var(--panel);box-shadow:inset 3px 0 0 var(--amber)}
.play{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;color:var(--ink)}
.play svg{width:11px;height:11px;fill:currentColor}
.play .i-pause{display:none}
.play:hover{border-color:var(--amber);color:var(--amber)}
.play.cur{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.play.playing .i-play{display:none}
.play.playing .i-pause{display:block}
.play[disabled]{opacity:.35;cursor:not-allowed}
.tt{min-width:0;display:flex;flex-direction:column;gap:3px}
.t{font-weight:600;font-size:15px;white-space:nowrap;display:flex;align-items:baseline;min-width:0}
.t .tn{overflow:hidden;text-overflow:ellipsis;min-width:0}
.t .id,.t .famb{flex:none}
.t .id{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted);margin-left:6px}
.rtags{display:flex;gap:4px 10px;font-size:12px;white-space:nowrap;overflow:hidden}
.rtags button{all:unset;cursor:pointer;color:var(--muted)}
.rtags button:hover{color:var(--amber)}
.rtags button.u{color:var(--use-text)}
.rtags.auto button{font-style:italic}
.rtags .none{color:var(--faint)}
.mini{height:30px;width:100%}
.meta{font-size:12px;color:var(--muted);font-family:var(--mono);line-height:1.35}
.len{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}
.row .star{width:28px;height:28px;border:0}
.row .addlist,.row [data-list-rm]{width:28px;height:28px;border:0;color:var(--muted)}
.row .addlist:hover{color:var(--amber)}
.empty{padding:60px 24px;color:var(--ink-2);max-width:56ch}
.empty h3{font-size:18px;margin:0 0 6px;color:var(--ink)}

/* Alben-Raster */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:16px 8px}
.acard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.acard:hover{border-color:var(--line-2);background:var(--raised)}
.acard:focus-visible{outline:2px solid var(--amber)}
.acard{padding:0;overflow:hidden;gap:0}
.acover{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--raised)}
.acover.none{display:grid;place-items:center}
.ameta{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.hcover{width:44px;height:44px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-right:12px}
.dcovers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.dcovers:empty{display:none}
.dcover{all:unset;cursor:pointer;width:64px;height:64px;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.dcover img{width:100%;height:100%;object-fit:cover;display:block}
.dcover:focus-visible{outline:2px solid var(--amber)}
.acard .lanes2{display:flex;gap:3px;align-items:flex-end;height:26px}
.acard .lanes2 i{display:block;width:6px;border-radius:1px}
.acard strong{font-size:15px}
.acard small{color:var(--muted);font-size:12px}

/* ---------- Detailspalte */
.detail{display:none;background:var(--panel);border-left:1px solid var(--line);overflow:auto;min-height:0}
.has-detail .detail{display:block}
.dhead{padding:16px 20px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.dnav{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dnav .grow{flex:1}
.dhead .id{font-family:var(--mono);font-size:12px;color:var(--amber)}
.dhead h2{margin:2px 0 0;font-size:24px;font-weight:800;line-height:1.15}
.dhead .sub{margin-top:4px;color:var(--muted);font-size:13px}
.dsec{padding:14px 20px;border-bottom:1px solid var(--line)}
.dsec h3{margin:0 0 10px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.dsec h3 small{font-weight:400;color:var(--muted)}
.vrow{display:grid;grid-template-columns:30px 1fr auto auto;gap:8px;align-items:center;padding:3px 0}
.vrow .play{width:26px;height:26px}
.vrow .play svg{width:9px;height:9px}
.vrow .lbl{font-family:var(--mono);font-size:12px}
.vrow .lbl small{font-family:var(--ui);color:var(--red-text);margin-left:6px}
.vrow.cur .lbl{color:var(--amber)}
.facts{display:grid;grid-template-columns:112px 1fr;gap:6px 10px;margin:0;font-size:13px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;word-break:break-word}
.note{background:var(--amber-soft);border:1px solid var(--note-line);border-radius:6px;padding:8px 10px;font-size:13px;color:var(--amber-text);margin-top:10px}
.tagbox{display:flex;flex-direction:column;gap:12px}
.group-l{font-size:12px;color:var(--muted);margin-bottom:5px}
.tagbox .chip{padding:2px 9px;font-size:12px}
.fam{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:start;margin-bottom:6px}
.fam-l{font-size:11.5px;color:var(--faint);padding-top:3px}
textarea{width:100%;min-height:54px;border:1px solid var(--line-2);border-radius:6px;padding:7px 9px;background:var(--bg);resize:vertical}
.saved{font-size:12px;color:var(--muted);margin-left:auto;font-weight:400}
.autobox{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--blue-soft);border:1px dashed var(--auto-line);border-radius:6px;padding:9px 11px;margin:0 0 12px;font-size:12.5px;color:var(--blue-text)}
.alblist{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto}
.alblist label{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.hint{font-size:12px;color:var(--muted)}

/* ---------- Player */
.player{position:fixed;left:0;right:0;bottom:0;height:var(--playerh);background:var(--player);border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(180px,300px) 1fr auto auto;gap:18px;align-items:center;padding:0 20px;z-index:30}
.pbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center}
.pbtn[disabled]{background:var(--wave);cursor:default}
.pbtn svg{width:18px;height:18px;fill:currentColor}
.pbtn .i-pause{display:none}
.player.is-playing .pbtn .i-pause{display:block}
.player.is-playing .pbtn .i-play{display:none}
.pinfo{min-width:0}
.ptitle{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptitle small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted);margin-left:6px}
.pversions{display:flex;gap:4px;margin-top:5px;overflow-x:auto;scrollbar-width:none}
.pversions button{flex:none;border:1px solid var(--line-2);background:transparent;border-radius:4px;padding:1px 7px;font-size:10.5px;font-family:var(--mono);color:var(--ink-2)}
.pversions button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pversions button[disabled]{opacity:.4;cursor:not-allowed}
.pwave canvas{width:100%;height:40px;display:block;cursor:pointer}
.ptime{font-size:12.5px;color:var(--amber)}
.pside{display:flex;gap:6px}

.toast{position:fixed;left:50%;bottom:calc(var(--playerh) + 16px);transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:40}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1400px){
  .app.has-detail .row{grid-template-columns:34px minmax(180px,1.3fr) minmax(100px,1fr) 46px auto}
  .app.has-detail .row .meta{display:none}
}
@media (max-width:1100px){
  .app,.app.has-detail{grid-template-columns:200px minmax(0,1fr)}
  .detail{position:fixed;right:0;top:0;bottom:var(--playerh);width:min(380px,100vw);z-index:25;box-shadow:-8px 0 24px rgba(0,0,0,.4)}
  .top-actions{display:none}
}
.menu-btn,.scrim{display:none}
@media (max-width:1100px){
  .row{grid-template-columns:34px minmax(150px,1.3fr) minmax(70px,1fr) 84px 42px auto;gap:10px}
  .app.has-detail .row{grid-template-columns:34px minmax(150px,1.3fr) minmax(70px,1fr) 42px auto}
}

/* ---------- Handy (iPhone & Co.) */
@media (max-width:760px){
  :root{--playerh:92px}
  .top{flex-wrap:wrap;gap:10px 12px;padding:10px 12px calc(10px);padding-top:calc(10px + env(safe-area-inset-top))}
  .menu-btn{display:inline-grid;width:44px;height:44px;border:0;margin-left:-6px}
  .menu-btn svg{width:22px;height:22px}
  .brand{min-width:0}
  .brand .logo .mark{width:26px;height:26px}
  .brand .logo .word{font-size:22px}
  .top-actions{display:flex;margin-left:auto}
  .top-actions > :not(#themeBtn):not(#lockBtn):not(#filmTop):not(#userBtn):not(#userMenu){display:none}
  #lockName{display:none}
  .lock-btn{height:44px;padding:0 12px}
  #themeName{display:none}
  .theme-btn{height:44px;padding:0 12px}
  .search{order:5;flex:1 1 100%;max-width:none;height:44px}
  .search input{font-size:16px}
  .search input::placeholder{font-size:15px}

  .app,.app.has-detail{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(310px,86vw);z-index:35;transform:translateX(-102%);transition:transform .22s ease;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:8px 0 30px rgba(0,0,0,.45)}
  .app.nav-open .side{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(5,9,18,.55);z-index:34}
  .app.nav-open .scrim{display:block}
  .side .nav button,.side .uses button{min-height:44px}

  .filterbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:10px 12px 6px;-webkit-overflow-scrolling:touch}
  .filterbar::-webkit-scrollbar,.quick::-webkit-scrollbar{display:none}
  .filterbar > *{flex:none}
  .filterbar button{min-height:40px}
  .dropdown{position:fixed;left:8px;right:8px;width:auto;top:116px;max-height:calc(100dvh - 116px - var(--playerh) - 16px)}
  .dd-row input[type=number],.dd-row input[type=text],.dd-search input{font-size:16px}
  .chip{padding:7px 12px;font-size:13.5px}
  .quick{overflow-x:auto;scrollbar-width:none;padding:0 12px 8px}
  .listhead{padding:6px 12px 10px}
  .listhead h1{font-size:20px}
  .list{padding:0 4px 30px}

  .row,.app.has-detail .row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"play tt star" "play mini len";gap:4px 10px;padding:10px 8px}
  .row > .play{grid-area:play;width:40px;height:40px}
  .row > .tt{grid-area:tt}
  .row > .mini{grid-area:mini;height:22px}
  .row > .meta{display:none}
  .row > .len{grid-area:len;align-self:center}
  .row > .ract{grid-area:star;justify-self:end}
  .row .ract .star{width:40px;height:40px;font-size:18px}
  .row .ract .addlist{width:36px;height:36px}
  .agrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px 8px}

  .detail{width:100vw;top:0;z-index:36;box-shadow:none;padding-top:env(safe-area-inset-top)}
  .detail .icon-btn{width:40px;height:40px}

  .player{height:calc(var(--playerh) + env(safe-area-inset-bottom));padding:8px 12px calc(8px + env(safe-area-inset-bottom));grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"btn info side" "wave wave wave";gap:4px 12px;align-items:center}
  .player .pbtn{width:44px;height:44px}
  .player > .pinfo{grid-area:info}
  .player > .pside{grid-area:side}
  .player > .pside .icon-btn{width:40px;height:40px}
  .player > .pwave{grid-area:wave}
  .pwave canvas{height:24px}
  .player > .ptime{display:none}
  .app{padding-bottom:calc(var(--playerh) + env(safe-area-inset-bottom))}
  .toast{bottom:calc(var(--playerh) + 16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.erk{font-style:normal;color:var(--highlight);opacity:.85;cursor:help}
.mini[data-seek]{cursor:pointer;display:block}
.mini.pending{background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 4px);height:2px;align-self:center;opacity:.6}
svg.mini[data-seek]:hover path:first-of-type{stroke:var(--wave-hover)}
.peak-status{color:var(--amber);font-size:11px;padding-bottom:0}
.peak-status[hidden]{display:none}
.peak-status{margin-top:auto}
.peak-status:not([hidden]) + .side-foot{margin-top:0;border-top:0;padding-top:4px}

/* ---------- Farbkonzept „Nacht“: Nachtblau #101827, Cyan #27D3D8, Koralle #FF6B4A, Off-White #F4F1EA */
:root[data-theme="nacht"]{
  --bg:#101827; --side:#0C1320; --panel:#162036; --raised:#1C2840; --hover:#22304B;
  --line:#25324A; --line-2:#3A4A66;
  --ink:#F4F1EA; --ink-2:#D6D2C8; --muted:#9BA5B6; --faint:#6C778B;
  --amber:#27D3D8; --amber-ink:#101827; --amber-soft:#123A45; --amber-text:#AEEFF1;
  --blue:#8FB4E8; --blue-soft:#18263D; --blue-text:#C9DBF4;
  --red-soft:#3B1E1E; --red-line:#FF6B4A; --red-text:#FFB3A2;
  --wave:#3A4A63; --wave-off:#2E3B52; --wave-hover:#6F7E98;
  --star:#FF6B4A; --star-line:#7A3527; --highlight:#FF6B4A;
  --chip-on-count:#0B4F55; --row-hover:#16213A; --use-text:#9FC4F0;
  --note-line:#1E6B73; --auto-line:#3E5A80; --player:#0A101C;
  --logo-1:#27D3D8; --logo-2:#FF6B4A;
  --coral:#FF6B4A; --coral-soft:#3A2129; --coral-text:#FFB09D; --coral-ink:#101827;
}
/* ---------- Farbkonzept „Hell“: Off-White als Fläche, Nachtblau als Schrift */
:root[data-theme="hell"]{
  --bg:#F4F1EA; --side:#ECE8DE; --panel:#FBF9F5; --raised:#FFFFFF; --hover:#E6E1D5;
  --line:#DDD7CA; --line-2:#C6BFAF;
  --ink:#101827; --ink-2:#2B3445; --muted:#5D6677; --faint:#8A90A0;
  --amber:#14A9AE; --amber-ink:#FFFFFF; --amber-soft:#D3F2F2; --amber-text:#0A5F63;
  --blue:#2F6FB5; --blue-soft:#E3ECF7; --blue-text:#1E4F86;
  --red-soft:#FCE4DD; --red-line:#FF6B4A; --red-text:#B53A20;
  --wave:#C2C8D2; --wave-off:#D3D7DE; --wave-hover:#8C95A6;
  --star:#FF6B4A; --star-line:#F3B8A9; --highlight:#E2522F;
  --chip-on-count:#E3FAFA; --row-hover:#EEEAE0; --use-text:#2F6FB5;
  --note-line:#9ADCDD; --auto-line:#9BB7DA; --player:#101827;
  --logo-1:#14A9AE; --logo-2:#FF6B4A;
  --coral:#E5522F; --coral-soft:#FCE1D8; --coral-text:#B23A1C; --coral-ink:#FFFFFF;
}
/* Player bleibt im hellen Konzept nachtblau, damit er sich absetzt */
:root[data-theme="hell"] .player{--ink:#F4F1EA; --ink-2:#D6D2C8; --bg:#101827; --muted:#9BA5B6; --faint:#6C778B; --line:#25324A; --line-2:#3A4A66; --raised:#1C2840; --hover:#22304B; --wave:#3A4A63; --wave-off:#2E3B52; --amber:#27D3D8; --amber-ink:#101827; color:var(--ink)}
.theme-btn{display:inline-flex;align-items:center;gap:7px}
.theme-btn .sw{display:inline-flex;gap:2px}
.theme-btn .sw i{width:9px;height:9px;border-radius:50%;display:block}

/* ---------- Logo „Fundlupe“: Lupe mit Wellenform + Schriftzug Space Grotesk */
:root{--logo-ink:var(--ink);--logo-cyan:#27D3D8}
:root[data-theme="hell"]{--logo-cyan:#1BB4B9}
.brand .logo{display:flex;align-items:center;gap:9px;color:var(--logo-ink)}
.brand .logo .mark{width:30px;height:30px;flex:none}
.brand .logo .word{font-family:"Space Grotesk",var(--ui);font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1}

/* ---------- Zugehörige Titel */
.famb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px 1px 5px;border-radius:999px;font-size:11px;font-weight:600;font-family:var(--mono);color:var(--amber);background:var(--amber-soft);vertical-align:2px;line-height:1.5}
.famb svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.famb:hover,.famb.open{background:var(--amber);color:var(--amber-ink)}
.famb:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.famrows{margin:0 0 6px 22px;border-left:2px solid var(--amber);background:color-mix(in srgb,var(--amber) 4%,transparent)}
.row.sub{border-bottom-color:transparent}
.famrow .famlink{all:unset;cursor:pointer;display:flex;flex-direction:column;min-width:0;color:var(--ink)}
.famrow .famlink small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.famrow .famlink:hover{color:var(--amber)}
.famsearch{display:flex;margin-top:10px}
.famsearch input{flex:1;height:34px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);padding:0 10px;color:var(--ink)}
.famhits{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.famhit{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:5px;font-size:13px}
.famhit small{font-family:var(--mono);color:var(--muted)}
.famhit:hover,.famhit:focus-visible{background:var(--hover)}
@media (max-width:760px){
  .famrows{margin-left:10px}
  .famsearch input{font-size:16px;height:40px}
  .famhit{padding:10px 8px}
  .famb{padding:3px 8px 3px 6px}
}

/* ---------- Playlisten bei den Alben */
.agroup{margin:18px 8px 0;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.kindtag{font-size:11px;font-weight:600;color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:2px 8px;vertical-align:4px;margin-left:6px}
.alb-h{font-size:11px;font-weight:600;color:var(--muted);margin:6px 0 2px}
.alb-h:first-child{margin-top:0}
.quick:empty{display:none}
.backbtn{display:inline-flex;align-items:center;gap:4px;padding-left:8px}
.backbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.listhead .backbtn + h1{margin-left:4px}
@media (max-width:760px){.listhead .backbtn{flex-basis:auto}}

/* ---------- Vor / Zurück neben dem Play-Knopf */
.pctl{display:flex;align-items:center;gap:6px}
.pskip{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center}
.pskip svg{width:16px;height:16px;fill:currentColor}
.pskip:hover:not([disabled]){background:var(--hover);color:var(--ink)}
.pskip[disabled]{opacity:.35;cursor:default}
.pskip:focus-visible{outline:2px solid var(--amber)}
@media (max-width:760px){
  .player > .pctl{grid-area:btn;gap:2px}
  .pskip{width:40px;height:40px}
}

/* ---------- Admin / Benutzer */
.hidden{display:none!important}
body:not(.admin) .admin-only{display:none!important}
.lock-btn{display:inline-flex;align-items:center;gap:7px}
.lock-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lock-btn .i-open{display:none}
.lock-btn.on{color:var(--amber-text);background:var(--amber-soft);border-color:var(--amber)}
.lock-btn.on .i-open{display:block}.lock-btn.on .i-lock{display:none}
.nav-h{display:block;padding:2px 10px 0;font-size:11px;font-weight:600;color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
.chip.ro{cursor:default}
.chip.ro:hover{border-color:var(--line-2);color:var(--ink-2)}
.ro-g{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.ro-albs{display:flex;flex-wrap:wrap;gap:6px}
/* Tempo & Tonart prüfen */
.bksec{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.bksec h3 small.bk-open{color:var(--highlight)}
.bk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.bk-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.bk-row input,.bk-row select{height:34px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 8px;font:inherit}
.bk-row input{width:76px}
.btn.sm{height:34px;padding:0 10px;min-width:34px}
.linkish{all:unset;cursor:pointer;color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.bksec .hint{font-size:12px;color:var(--muted)}
@media (max-width:760px){.bk-row input,.bk-row select{font-size:16px;height:40px}}
.bk-none{gap:6px!important;align-items:center;display:inline-flex}
.bk-row .bk-none input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--amber)}
.bk-row input:disabled,.bk-row select:disabled{opacity:.45}

/* ---------- Anpassung anfragen */
.reqhint{margin-top:8px;font-size:12px;color:var(--faint)}
.reqlink{all:unset;cursor:pointer;font-size:12px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.reqlink:hover{color:var(--amber)}
.reqlink:focus-visible{outline:2px solid var(--amber)}
.reqbox{margin-top:10px;padding:12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.reqhead{display:flex;justify-content:space-between;align-items:center}
.reqf{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);flex:1}
.reqf em{font-style:normal;color:var(--faint)}
.reqf textarea,.reqf input{border-radius:5px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);padding:7px 9px;font:inherit;font-size:13px}
.reqf textarea{min-height:70px;resize:vertical}
.reqrow{display:flex;gap:10px;flex-wrap:wrap}
.reqbox .btn{align-self:flex-start}
.reqlist{display:flex;flex-direction:column;gap:10px;padding:14px 8px}
.reqcard{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px 14px}
.reqcard.done{opacity:.55}
.reqtop{display:flex;align-items:center;gap:12px}
.reqmain{flex:1;min-width:0}
.reqmain .id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.reqmeta{font-size:12px;color:var(--muted);margin-top:2px}
.reqmeta strong{color:var(--amber-text)}
.reqtext{margin:8px 0 0 44px;font-size:13.5px;color:var(--ink-2);white-space:pre-wrap}
@media (max-width:760px){.reqf textarea,.reqf input{font-size:16px}.reqtext{margin-left:0}}

/* ---------- Koralle als Hervorhebung (Farbkonzept Nacht/Hell) */
.nav button.on{box-shadow:inset 3px 0 0 var(--coral)}
.row.sel{box-shadow:inset 3px 0 0 var(--coral)}
.rtags button.u{color:var(--coral-text)}
.rtags button.u:hover{color:var(--coral)}
.uses button.in{background:var(--coral-soft);color:var(--coral-text)}
.uses button.in .count{color:var(--coral-text)}
.famb{color:var(--coral-text);background:var(--coral-soft)}
.famb:hover,.famb.open{background:var(--coral);color:var(--coral-ink)}
.famrows{border-left-color:var(--coral);background:color-mix(in srgb,var(--coral) 5%,transparent)}
.kindtag{color:var(--coral-text);background:var(--coral-soft)}
.nav-h{color:var(--coral)}
.reqmeta strong{color:var(--coral-text)}
.reqlink:hover{color:var(--coral)}

/* ---------- Filmprojekte (MusicMatcher) – bewusst abgesetzt von der Musiksuche */
.films-block{border:1px solid var(--line);border-radius:8px;padding:10px 6px 6px;background:color-mix(in srgb,var(--coral) 4%,transparent)}
.films-block h2{display:flex;align-items:center;gap:8px}
.mm-tag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--coral-text);background:var(--coral-soft);border-radius:999px;padding:1px 7px}
.film-new{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;margin:2px 4px 6px;padding:8px 10px;border-radius:6px;border:1px dashed var(--coral);color:var(--coral-text);font-weight:600;font-size:13px}
.film-new:hover{background:var(--coral-soft)}
.film-new:focus-visible{outline:2px solid var(--coral)}
.film-new svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.film-nav .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.film-nav button{min-width:0}
.film-empty{padding:2px 10px 4px;font-size:12px}
.app.filmmode .filterbar,.app.filmmode #quick{display:none}
.filmlist{display:flex;flex-direction:column;gap:8px;padding:14px 8px}
.filmcard{all:unset;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.filmcard:hover{border-color:var(--line-2);background:var(--raised)}
.filmcard .ft{font-weight:700;font-size:15px}
.filmcard .fm{grid-column:1;font-size:12px;color:var(--muted)}
.filmcard .fs{grid-row:1;grid-column:2;font-size:12px;color:var(--amber);text-align:right}
.filmcard .fs.st-fehler,.filmcard .fs.st-abgebrochen{color:var(--coral)}
.filmcard .fd{grid-column:2;font-size:11px;color:var(--faint);text-align:right}
.filmstatus{margin:16px 8px;padding:16px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);display:flex;flex-direction:column;gap:10px;max-width:640px}
.filmstatus.err{border-color:var(--coral)}
.filmstatus .btn{align-self:flex-start}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .4s}
.filmres{padding:12px 8px 30px}
.filmsum{font-size:13px;color:var(--ink-2);margin-bottom:12px}
.timeline{position:relative;height:34px;border-radius:6px;background:var(--raised);border:1px solid var(--line);overflow:hidden}
.timeline .seg{position:absolute;top:5px;bottom:5px;border-radius:2px}
.seg.kd,.tl-legend i.kd{background:var(--amber)}
.seg.hh,.tl-legend i.hh{background:var(--slate)}
.seg.unsure,.tl-legend i.unsure{background:repeating-linear-gradient(135deg,var(--slate) 0 3px,transparent 3px 6px);border:1px solid var(--slate)}
.seg.kd.unsure{background:repeating-linear-gradient(135deg,var(--amber) 0 3px,transparent 3px 6px);border-color:var(--amber)}
.seg.unk,.tl-legend i.unk{background:var(--coral)}
.tl-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:4px}
.tl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--muted)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.tl-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;box-sizing:border-box}
.tl-legend em{font-style:normal;color:var(--faint)}
.cuelist{display:flex;flex-direction:column;margin-top:6px}
.cue{display:grid;grid-template-columns:30px 98px 98px 54px minmax(180px,1fr) 100px 150px;gap:10px;align-items:center;padding:7px 6px;border-bottom:1px solid var(--line);font-size:13px}
.cue.head{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cue .mono{font-family:var(--mono);font-size:12px}
.cue .ct{display:flex;align-items:center;gap:8px;min-width:0}
.cue .ct > span:last-child{min-width:0}
.cue .ct small{display:block;font-size:11px;color:var(--faint)}
.cue .ct .id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cue .noplay{display:inline-block;width:32px}
.cue.unk .ct{color:var(--coral-text)}
.cue.unsure{background:color-mix(in srgb,var(--amber) 6%,transparent)}
.cue .cs{font-size:12px;color:var(--muted)}
.filmform{display:flex;flex-direction:column;gap:14px;padding:14px 8px 40px;max-width:820px}
.filmform section{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:12px}
.filmform section.soon{opacity:.6}
.filmform h3{margin:0;font-size:15px;display:flex;align-items:center;gap:10px}
.filmform h3 em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.stepn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--coral);color:var(--coral-ink);font-size:12px;font-weight:700}
.ff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.ff-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.ff-grid label.wide{grid-column:1/-1}
.ff-grid input,.filedrop{height:36px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 10px;font:inherit;font-size:14px}
.ff-q{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.ff-q > span{flex-basis:100%;font-size:12px;color:var(--muted)}
.ff-q label{display:flex;align-items:center;gap:6px}
.filedrop{display:flex;align-items:center;height:54px;border-style:dashed;cursor:pointer;color:var(--muted)}
.filedrop input{position:absolute;opacity:0;width:1px;height:1px}
.filedrop:hover{border-color:var(--amber);color:var(--ink)}
.filmform .btn{align-self:flex-start}
@media (max-width:760px){
  .cue{grid-template-columns:24px 1fr auto;grid-template-areas:"n t s" "n tc tc";font-size:13px}
  .cue.head{display:none}
  .cue > :nth-child(1){grid-area:n}.cue > :nth-child(5){grid-area:t}.cue > :nth-child(7){grid-area:s}
  .cue > :nth-child(2){grid-area:tc}.cue > :nth-child(3),.cue > :nth-child(4),.cue > :nth-child(6){display:none}
  .ff-grid input{font-size:16px}
}

/* Kennzahlen Filmprojekt: eigene Library = Hauptfarbe, Hush Hush gleichrangig in Blaugrau */
:root{--slate:#7E93B4}
:root[data-theme="hell"]{--slate:#8A9BB8}
.fstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.fstat{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:6px;padding:9px 12px;background:var(--panel);display:flex;flex-direction:column;gap:2px;min-width:0}
.fstat span{font-size:11px;color:var(--muted)}
.fstat strong{font-size:16px}
.fstat small{font-size:11px;color:var(--faint)}
.fstat.kd{border-left-color:var(--amber)}
.fstat.hh{border-left-color:var(--slate)}
.fstat.unk{border-left-color:var(--coral)}
.fstat.all{border-left-color:var(--ink-2)}
.cue.unsure{background:color-mix(in srgb,var(--slate) 8%,transparent)}
@media (max-width:760px){.fstats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Musikliste aus Film: oben rechts, getrennt von der Suche */
.film-top{display:inline-flex;align-items:center;gap:7px}
.film-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.film-top.on{color:var(--coral-text);border-color:var(--coral);background:var(--coral-soft)}
.film-top .ft-b{font-size:11px;font-weight:700;font-family:var(--mono);color:var(--coral-ink);background:var(--coral);border-radius:999px;padding:1px 7px}
.film-top .ft-b[hidden]{display:none}
@media (max-width:1100px){.top-actions{display:flex}.top-actions > #reload,.top-actions > a{display:none}}
@media (max-width:760px){
  .top-actions > :not(#themeBtn):not(#lockBtn):not(#filmTop):not(#userBtn):not(#userMenu){display:none}
  .film-top .ft-l{display:none}
  .film-top{height:44px;padding:0 12px}
}
/* Kopf-Knöpfe auf Tablet und Handy kompakt (nur Symbole) */
@media (max-width:1100px){
  .film-top .ft-l,#lockName,#themeName{display:none}
  .top-actions{gap:6px}
}
@media (max-width:760px){
  .top{flex-wrap:wrap}
  .top-actions{gap:4px;margin-left:auto}
  .top-actions .btn{height:40px;padding:0 9px}
  .brand .logo .word{font-size:20px}
  .brand .logo .mark{width:24px;height:24px}
  .menu-btn{width:40px;height:40px}
}

/* Bibliotheken */
.libs{display:flex;flex-direction:column;gap:6px}
.lib.own{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.lib input:disabled+span{opacity:.7}
.libcard{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.libcard.hhcard{background:transparent}
.libtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.libtop .reqmeta{word-break:break-all}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--line);color:var(--ink-2);white-space:nowrap}
.pill.fertig{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.pill.läuft,.pill.wartet{background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral-text,var(--coral))}
.pill.fehler{background:var(--coral);color:var(--coral-ink,#fff)}
.pbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--coral);transition:width .4s}
.libstats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.libstats b{color:var(--ink);font-weight:600}
.libstats .muted{color:var(--muted)}
.colmaps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.colmap{border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;color:var(--muted)}
.colmap b{color:var(--ink);font-weight:600}
.pruef summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--coral-text,var(--coral))}
.pgrp{margin-top:10px}
.pgrp h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pgrp h4 small{font-weight:400}
.pitem{font-size:13px;padding:3px 0;border-bottom:1px dashed var(--line);color:var(--ink-2);word-break:break-word}
.libacts{display:flex;gap:8px;flex-wrap:wrap}
.libnew{border-color:var(--amber)}
.reqf.short{flex:0 0 140px}
.picker{border:1px solid var(--line-2);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.ppath{display:flex;align-items:center;gap:8px}
.ppath code{font-size:12px;color:var(--ink);word-break:break-all}
.pdirs{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto}
.pdir{all:unset;cursor:pointer;font-size:13px;color:var(--ink);padding:4px 9px;border-radius:5px;border:1px solid var(--line)}
.pdir:hover{border-color:var(--amber)}

/* Konto / Zugänge */
.top-actions{position:relative}
.user-btn{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;letter-spacing:.02em;flex:none}
.user-btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.user-btn[hidden]{display:none}
.user-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:250px;background:var(--raised);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column}
.um-who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column}
.um-who small{color:var(--muted);font-size:12px}
.um-item{all:unset;cursor:pointer;padding:9px 10px;border-radius:5px;font-size:13.5px}
.um-item:hover{background:var(--hover)}
.um-pw{display:flex;flex-direction:column;gap:8px;padding:8px 10px}
.um-pw label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.um-pw em{font-style:normal;color:var(--faint)}
.um-pw input{height:34px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 9px;font:inherit}
.linkbox{display:flex;gap:8px}
.linkbox input{flex:1;min-width:0;height:34px;border-radius:5px;border:1px solid var(--amber);background:var(--bg);color:var(--ink);padding:0 9px;font:12.5px var(--mono,monospace)}
.lock-btn[hidden],.btn[hidden]{display:none!important}
.user-menu[hidden]{display:none!important}

/* Grunddaten */
.stamm{padding:12px 8px 40px;display:flex;flex-direction:column;gap:12px}
.stamm-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stamm-tools input{flex:1;min-width:220px;height:36px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);padding:0 10px;font:inherit}
.stamm-t{width:100%;border-collapse:collapse;font-size:13px}
.stamm-t th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line-2)}
.stamm-t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.stamm-t tbody tr[data-view]{cursor:pointer}
.stamm-t tbody tr[data-view]:hover,.stamm-t tbody tr[data-view]:focus{background:var(--hover);outline:none}
.stamm-t .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.stamm-t .dot.on{background:var(--amber)}
.stamm-t.vers input{width:100%;height:32px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 8px;font:inherit;font-size:12.5px}
.stamm-t.vers td:nth-child(1){width:16%}.stamm-t.vers td:nth-child(3){width:14%}.stamm-t.vers td:nth-child(4),.stamm-t.vers td:nth-child(5){width:44px;text-align:center}.stamm-t.vers td:last-child{width:40px}
.stamm-t.verlauf td{font-size:12.5px;color:var(--ink-2)}
.stamm-t.verlauf td:first-child{white-space:nowrap;color:var(--muted)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.sgrid input:disabled{opacity:.45}
.sinl{display:flex;gap:8px;align-items:center}
.sinl input:not([type=checkbox]){flex:1;min-width:0}
.sinl .bk-none{flex:none;font-size:12.5px;color:var(--ink-2);display:inline-flex;gap:5px;align-items:center}
.sinl .bk-none input{width:15px;height:15px;accent-color:var(--amber)}
.stamm-edit textarea{min-height:60px}
.sh{margin:10px 0 0;font-size:14px}
.sticky-save{padding:12px 0 0;border-top:1px solid var(--line);align-items:center}
@media (max-width:760px){.stamm-t .hide-s{display:none}}

/* Rechte: was ein Zugang nicht darf, wird gar nicht erst angezeigt */
body.no-download #pDl, body.no-download a[href*="dl=1"], body.no-download a[href*="merkliste.csv"]{display:none!important}
body.no-merkliste .star, body.no-merkliste #pStar, body.no-merkliste [data-view="merk"]{display:none!important}
body.no-anfragen .reqhint, body.no-anfragen .reqbox{display:none!important}
body.no-film #filmTop{display:none!important}
.rechte{display:flex;flex-direction:column;gap:6px}
.recht{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink)}
.recht input{width:16px;height:16px;accent-color:var(--amber)}
.pill.kd{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.stamm-t tbody tr[data-lib-sel]{cursor:pointer}
.stamm-t tbody tr[data-lib-sel]:hover,.stamm-t tbody tr.sel{background:var(--hover)}
.lvers{display:flex;flex-direction:column;gap:6px}
.lver{display:flex;align-items:center;gap:10px}
.lver .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lup input[type=text]{height:34px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 9px;font:inherit;min-width:220px}
.filebtn{cursor:pointer;display:inline-flex;align-items:center}

/* Eigene Playlists */
.icon-btn.addlist svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.listmenu{position:fixed;z-index:80;width:260px;background:var(--raised);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;max-height:60vh;overflow:auto}
.lm-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 8px}
.lm-item{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px;border-radius:5px;font-size:13.5px}
.lm-item:hover{background:var(--hover)}
.lm-item small{margin-left:auto;color:var(--faint)}
.lm-check{width:14px;color:var(--amber);font-weight:700}
.lm-empty{padding:8px;color:var(--muted);font-size:13px}
.lm-new{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line);margin-top:4px}
.lm-new input,.inl{flex:1;min-width:0;height:32px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 9px;font:inherit;font-size:13px}
.inl{width:220px;flex:none;height:36px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lcard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.lcard:hover,.lcard:focus-visible{border-color:var(--amber)}
.lname{font-weight:600;font-size:15px}
.lcard small{color:var(--muted);font-size:12px}
.ldesc{font-size:12.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lform{margin-top:10px;max-width:760px}
.lform textarea{min-height:60px}
body.no-merkliste .addlist{display:none!important}

.ract{display:flex;align-items:center;gap:2px;justify-content:flex-end}
@media (max-width:760px){.user-btn{width:40px;height:40px}.user-menu{position:fixed;right:8px;left:8px;top:64px;min-width:0}}
.uses-h{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:10px 0 4px 10px}
.uses-h:first-child{margin-top:0}
.noteb{margin-left:6px;font-size:12px;color:var(--amber);cursor:help}
.mynote{width:100%;min-height:64px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:8px 10px;font:inherit;font-size:13px;resize:vertical}

/* Einsatz links: abgesetzter Kasten, kompakte Einträge, Thema cyan / Funktion koralle */
.side-block.einsatz{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 6px 8px;gap:2px}
.side-block.einsatz h2{color:var(--ink);font-weight:600;font-size:12.5px;margin-bottom:2px}
.einsatz .uses{gap:0}
.einsatz .uses button{padding:3px 8px;font-size:12.5px;line-height:1.35;border-radius:4px}
.einsatz .uses .count{font-size:11px;color:var(--faint)}
.einsatz .uses button span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--logo-cyan);opacity:.55}
.einsatz .uses button[data-func] span:first-child::before{background:var(--coral)}
.einsatz .uses button.in span:first-child::before{opacity:1}
.einsatz .uses button[data-use].in{background:color-mix(in srgb,var(--logo-cyan) 16%,transparent);color:var(--ink)}
.einsatz .uses button[data-use].in .count{color:var(--ink-2)}
.einsatz .uses-h{margin:8px 0 2px 8px;font-size:10.5px;font-weight:600}
.einsatz .uses-h:first-child{margin-top:2px}
.einsatz .uses-h.use{color:var(--logo-cyan)}
.einsatz .uses-h.func{color:var(--coral)}
@media (max-width:760px){.side .einsatz .uses button{min-height:36px;font-size:14px}}

/* Bibliotheken links: schmale Zeilen statt Kästen */
.libs{display:flex;flex-direction:column;gap:0}
.libline{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:4px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.libline:hover{background:var(--hover)}
.libline input{width:14px;height:14px;margin:0;accent-color:var(--logo-cyan);flex:none}
.libline .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libline.own .ln{color:var(--ink);font-weight:500}
.libline .count{font-size:11px;color:var(--faint)}
.libline input:disabled + .ln{opacity:.6}
.side-block[hidden]{display:none!important}
@media (max-width:760px){.libline{min-height:36px;font-size:14px}}
/* Schließen-Kreuz nicht unter dem Scrollbalken verstecken */
.detail{scrollbar-gutter:stable}
.dnav{padding-right:8px}
.dnav .btn{height:30px;padding:0 9px;font-size:12.5px;white-space:nowrap}
.dnav .icon-btn{flex:none}
.dnav .grow{flex:1;min-width:0}
.dnav{gap:4px;flex-wrap:wrap}
.dnav .btn{padding:0 7px}
/* Detailfenster: Platz für die eingeblendete Scrollleiste (macOS), Kopfzeile bricht nicht über den Rand */
.detail .dhead{padding-right:30px}
.dnav{flex-wrap:nowrap;gap:5px;padding-right:0}
.dnav .btn{padding:0 8px;font-size:12px}
.dnav .grow{min-width:0}
.dnav #dClose{flex:none}
.mmnote{margin-top:8px;padding:9px 12px;border-radius:6px;background:color-mix(in srgb,var(--logo-cyan) 12%,transparent);color:var(--ink-2);font-size:13px}
.mmnote.err{background:color-mix(in srgb,var(--coral) 14%,transparent)}