/* Konzerte – Design wie Watchlist / Stammelf / Football Lab */
:root{
  --bg:#07140f; --ink:#f3f1e7; --muted:#a3b5a6; --soft:#c9d3c8;
  --panel:#0e2219; --panel2:#143024; --line:rgba(243,241,231,.16); --line2:rgba(243,241,231,.32);
  --accent:#ffd84a; --accent-ink:#07140f; --good:#2fbf71; --bad:#e2563c;
  --bgimg:radial-gradient(120% 70% at 50% 0%,#12301f 0%,#07140f 62%);
  --shade:rgba(4,12,9,.72);
  --display:"Schibsted Grotesk",system-ui,sans-serif;
  --disp2:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:62px; --r:10px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1e4; --ink:#12352a; --muted:#4d6a5d; --soft:#35564a;
    --panel:#e2e8d6; --panel2:#d5dec6; --line:rgba(18,53,42,.18); --line2:rgba(18,53,42,.38);
    --accent:#14513a; --accent-ink:#f1efe6; --good:#2f9e63; --bad:#c9402b;
    --bgimg:none; --shade:rgba(238,241,228,.82);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg) var(--bgimg) no-repeat; background-attachment:fixed; color:var(--ink);
  font:16px/1.5 var(--body);
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  overflow-x:hidden;
}
body.locked{overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.center{text-align:center}
.pad{padding:32px 16px}
.small{font-size:.88rem}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.01em}

/* ---------- Kopf ---------- */
#top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{max-width:1180px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:18px}
.brand{font:800 1.7rem/1 var(--disp2); text-transform:uppercase; letter-spacing:.02em; text-decoration:none; flex:none}
.brand span{color:var(--accent)}
.hnav{display:none; gap:4px; flex:1; min-width:0}
.hnav a{font:700 .95rem var(--display); text-decoration:none; padding:8px 12px; border-radius:8px; color:var(--muted); white-space:nowrap}
.hnav a:hover{color:var(--ink)}
.hnav a.on{color:var(--ink); background:var(--panel)}
.userbtn{margin-left:auto; font:700 .9rem var(--display); text-decoration:none; border:2px solid var(--line);
  border-radius:999px; padding:5px 13px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.userbtn.on{border-color:var(--accent)}

/* ---------- Navigation unten ---------- */
#nav{position:fixed; left:0; right:0; bottom:0; z-index:20; background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.nav-in{max-width:640px; margin:0 auto; display:flex}
.nav-in a{flex:1; min-width:0; height:var(--nav-h); display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--muted); font:700 .9rem var(--display); position:relative; white-space:nowrap}
.nav-in a.on{color:var(--ink)}
.nav-in a.on::before{content:""; position:absolute; top:-1px; left:22%; right:22%; height:3px; border-radius:0 0 3px 3px; background:var(--accent)}
.badge{display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; background:var(--accent);
  color:var(--accent-ink); font:800 11px/18px var(--body); text-align:center}
@media (min-width:900px){
  .hnav{display:flex}
  #nav{display:none}
  body{padding-bottom:40px}
}

main{max-width:1180px; margin:0 auto; padding:18px 18px 10px}

/* ---------- Seitenkopf ---------- */
.ph-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:6px 0 16px; flex-wrap:wrap}
.ph-head h1{font:800 clamp(2.4rem,11vw,3.6rem)/.95 var(--disp2); text-transform:uppercase; letter-spacing:.01em}
.ph-head p{margin:6px 0 0; color:var(--muted)}
.stats{display:flex; gap:22px}
.stat b{display:block; font:800 1.9rem/1 var(--disp2); color:var(--accent)}
.stat span{font-size:.8rem; color:var(--muted)}
.sec{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:26px 0 12px}
.sec h2{font:800 1.6rem/1 var(--disp2); text-transform:uppercase; letter-spacing:.02em}
.sec span{color:var(--muted); font-size:.88rem}

/* ---------- Segmente ---------- */
.seg{display:inline-flex; max-width:100%; gap:4px; border:2px solid var(--line); border-radius:var(--r); padding:3px; margin-bottom:16px}
.seg button{border:0; background:none; padding:8px 14px; border-radius:7px; font:700 .95rem var(--display); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.seg button.on{background:var(--ink); color:var(--bg)}
.seg.full{display:flex}
.seg.full button{flex:1}

/* ---------- Knöpfe ---------- */
.btn{font:700 1rem var(--display); border:2px solid var(--line2); background:transparent; color:var(--ink);
  border-radius:6px; padding:10px 16px; min-height:46px; transition:transform .12s, border-color .12s, background .12s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent)}
.btn.primary.on{background:var(--accent); color:var(--accent-ink)}
.btn.block{width:100%}
.btn.big{min-height:54px; font-size:1.1rem}
.btn:disabled{opacity:.4; cursor:default; transform:none}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row > .btn{flex:1 1 0; min-width:0}
@media (prefers-reduced-motion:reduce){.btn,.card .poster{transition:none}.btn:active{transform:none}}

/* ---------- Poster-Raster ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:18px 12px}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:22px 16px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
.card{display:block; width:100%; background:none; border:0; padding:0; text-align:left; min-width:0; align-self:start}
.poster{position:relative; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:var(--panel);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.poster img{width:100%; height:100%; object-fit:cover; display:block}
.poster .ph{padding:10px; font:800 1.05rem/1.05 var(--disp2); text-transform:uppercase; color:var(--muted); text-align:center; word-break:break-word}
.card .poster{transition:transform .15s, box-shadow .15s, border-color .15s}
.card:hover .poster{transform:translateY(-3px); border-color:var(--line2); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.card .t{font:700 .95rem/1.2 var(--display); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .m{font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.pwrap{position:relative}
.tag{position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); background:var(--shade); color:var(--ink);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  font:700 .72rem var(--body); padding:3px 7px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.score{position:absolute; right:6px; top:6px; min-width:34px; height:28px; padding:0 6px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink); font:800 1.05rem/28px var(--disp2); text-align:center}
.empty{padding:34px 16px; text-align:center; color:var(--muted); border:2px dashed var(--line); border-radius:12px}
.empty b{display:block; color:var(--ink); font:800 1.5rem/1.1 var(--disp2); text-transform:uppercase; margin-bottom:6px}
.empty .btn{margin-top:14px; text-decoration:none; display:inline-flex; align-items:center}

/* ---------- Bühne „Was schauen wir heute?" ---------- */
.stage{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:var(--panel);
  padding:22px 18px 18px; margin-bottom:8px; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end}
.stage .wall{position:absolute; inset:0; display:flex; gap:8px; padding:10px; justify-content:flex-end; opacity:.55; pointer-events:none}
.stage .wall .poster{height:100%; aspect-ratio:2/3; flex:none; border:0; transform:rotate(3deg)}
.stage .wall .poster:nth-child(2n){transform:rotate(-2deg) translateY(10px)}
.stage::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--panel) 30%,color-mix(in srgb,var(--panel) 55%,transparent) 70%,transparent),linear-gradient(0deg,var(--panel),transparent 60%); pointer-events:none}
.stage > *:not(.wall){position:relative; z-index:1}
.stage h1{font:800 clamp(2.3rem,10vw,3.8rem)/.92 var(--disp2); text-transform:uppercase; max-width:12ch}
.stage p{margin:10px 0 16px; color:var(--soft); max-width:34ch}
.stage .btn{align-self:flex-start; min-width:220px}
@media (max-width:420px){.stage .btn{align-self:stretch; min-width:0}}

/* ---------- Suche ---------- */
.searchbar{position:sticky; top:59px; z-index:10; padding:4px 0 12px; background:linear-gradient(var(--bg) 75%,transparent)}
.input{width:100%; border:2px solid var(--line); background:var(--panel); border-radius:8px; padding:11px 13px; font-size:16px; min-height:48px}
.input:focus{outline:none; border-color:var(--accent)}
.searchbar .input{font-size:18px; min-height:54px; padding-left:16px}
.list{display:grid; gap:8px}
@media (min-width:900px){.list{grid-template-columns:1fr 1fr}}
.item{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 10px 8px 8px; min-width:0}
.item .thumb{width:52px; flex:none}
.item .thumb .poster{border-radius:6px}
.item .info{flex:1; min-width:0; background:none; border:0; padding:0; text-align:left}
.item .info b{display:block; font:700 1rem var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .btn{flex:none; padding:8px 12px; min-height:40px; font-size:.9rem}
.kind{display:inline-block; font:700 .68rem var(--body); text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line2); border-radius:4px; padding:0 5px; margin-right:6px; vertical-align:1px}
.note{margin:0 0 10px; padding:9px 12px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 8px 8px 0; font-size:.9rem}

/* ---------- Chips / Felder ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:2px solid var(--line); background:transparent; border-radius:999px; padding:6px 13px; font:600 .9rem var(--display);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.field{margin-bottom:14px; min-width:0}
.field label,.lbl{display:block; font:700 .75rem var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:7px}
select.input{appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
@media (min-width:700px){.two{grid-template-columns:repeat(4,1fr)}}

/* ---------- Blatt (Details, Zufall, Abstimmung) ---------- */
#sheet{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.62); display:flex; align-items:flex-end; justify-content:center;
  animation:fade .18s ease-out}
.sheet-in{position:relative; background:var(--bg); width:100%; max-width:680px; max-height:94vh; max-height:94dvh; overflow-y:auto; overflow-x:hidden;
  border-radius:18px 18px 0 0; border:1px solid var(--line); border-bottom:0;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom)); overscroll-behavior:contain}
.sheet-in.anim{animation:up .22s ease-out}
@media (min-width:700px){
  #sheet{align-items:center; padding:24px}
  .sheet-in{border-radius:18px; border-bottom:1px solid var(--line); max-height:90vh; padding:20px 24px 24px}
}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(24px); opacity:.6}}
@media (prefers-reduced-motion:reduce){#sheet,.sheet-in.anim{animation:none}}
.sheet-head{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.sheet-head b{font:800 1.5rem/1 var(--disp2); text-transform:uppercase; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x{border:2px solid var(--line); background:var(--shade); border-radius:999px; padding:5px 14px; font:700 .88rem var(--display); flex:none}

/* Hintergrund aus dem Poster */
.backdrop{position:absolute; left:0; right:0; top:0; height:340px; overflow:hidden; pointer-events:none; z-index:0}
.backdrop img{width:100%; height:100%; object-fit:cover; filter:blur(28px) saturate(1.3); transform:scale(1.25); opacity:.55}
.backdrop::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,var(--bg) 92%)}
.sheet-in > *:not(.backdrop){position:relative; z-index:1}

.dt{display:flex; gap:18px; margin-bottom:16px; align-items:flex-end}
.dt .poster{width:118px; flex:none; box-shadow:0 12px 30px rgba(0,0,0,.45)}
@media (min-width:700px){.dt .poster{width:150px}}
.dt .dm{min-width:0; flex:1}
.dt h2{font:800 clamp(1.9rem,8vw,2.7rem)/.95 var(--disp2); text-transform:uppercase; margin:0 0 8px; word-break:break-word}
.kv{font-size:.92rem; color:var(--soft); margin:2px 0}
.facts{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.facts span{font:600 .78rem var(--body); border:1px solid var(--line2); border-radius:5px; padding:2px 7px; color:var(--soft)}
.club{display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line)}
.club b{font:800 2rem/1 var(--disp2); color:var(--accent)}
.club span{font-size:.88rem; color:var(--muted)}
.overview{margin:0 0 16px; color:var(--soft)}
.sh{font:800 1.25rem/1 var(--disp2); text-transform:uppercase; letter-spacing:.02em; margin:22px 0 10px}
.rate{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; margin:0 0 6px}
.rate button{border:0; background:var(--panel); border-radius:6px; height:44px; padding:0; font:800 1.15rem var(--disp2); min-width:0; transition:background .1s}
.rate button.fill{background:color-mix(in srgb,var(--accent) 30%,var(--panel))}
.rate button.on{background:var(--accent); color:var(--accent-ink)}
.friends{display:grid; gap:6px}
.friends div{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:.95rem}
.friends span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.friends span:last-child{flex:none; color:var(--muted)}
.friends b{font:800 1.2rem var(--disp2); color:var(--accent)}

/* Zufall: Ergebnis */
.reveal{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line); margin:4px 0 14px; min-height:200px}
.reveal .bg{position:absolute; inset:0}
.reveal .bg img{width:100%; height:100%; object-fit:cover; filter:blur(24px) saturate(1.3); transform:scale(1.3); opacity:.5}
.reveal .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--panel),color-mix(in srgb,var(--panel) 40%,transparent))}
.reveal .in{position:relative; display:flex; gap:16px; padding:14px; align-items:center}
.reveal .poster{width:118px; flex:none; box-shadow:0 12px 30px rgba(0,0,0,.45)}
@media (min-width:700px){.reveal .poster{width:150px}}
.reveal .pi{min-width:0; flex:1}
.reveal .lbl{color:var(--accent); margin-bottom:6px}
.reveal h3{font:800 clamp(1.8rem,8vw,2.6rem)/.95 var(--disp2); text-transform:uppercase; word-break:break-word; margin-bottom:8px}
.reveal .btn{margin-top:12px; min-height:40px; padding:7px 14px; font-size:.9rem; background:var(--shade)}
.reveal.spin h3,.reveal.spin .kv{opacity:.55}
.count{font:700 .88rem var(--display); color:var(--muted); margin:2px 0 12px}
.count b{color:var(--ink)}

/* ---------- Abstimmung ---------- */
.polls{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.polls > *, .prof > *, .list > *{min-width:0}
@media (min-width:900px){.polls{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}}
.poll{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
.poll.closed{opacity:.8}
.poll-h{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:4px}
.poll-h h3{font:800 1.6rem/1 var(--disp2); text-transform:uppercase; min-width:0; word-break:break-word}
.pill{flex:none; font:700 .72rem var(--body); text-transform:uppercase; letter-spacing:.06em; border-radius:5px; padding:3px 7px; background:var(--accent); color:var(--accent-ink)}
.pill.off{background:transparent; color:var(--muted); border:1px solid var(--line2)}
.poll .by{font-size:.85rem; color:var(--muted); margin-bottom:12px}
.opt{position:relative; display:flex; align-items:center; gap:12px; width:100%; border:2px solid var(--line); background:var(--bg);
  border-radius:10px; padding:6px 12px 6px 6px; margin-bottom:6px; text-align:left; overflow:hidden; min-height:58px}
.opt .bar{position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb,var(--accent) 14%,transparent); z-index:0; transition:width .3s}
.opt > *:not(.bar){position:relative; z-index:1}
.opt .mini{width:32px; flex:none}
.opt .mini .poster{border-radius:4px}
.opt .mini .ph{font-size:.5rem; padding:2px}
.opt .ot{flex:1; min-width:0}
.opt .ot b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:700 .98rem var(--display)}
.opt .ot span{display:block; font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.opt .n{flex:none; font:800 1.6rem/1 var(--disp2)}
.opt.mine{border-color:var(--accent)}
.opt.win{border-color:var(--good)}
.opt.win .bar{background:color-mix(in srgb,var(--good) 22%,transparent)}
.opt:disabled{cursor:default; opacity:1}
.check{display:flex; align-items:center; gap:12px; background:var(--panel); border:2px solid var(--line); border-radius:10px;
  padding:6px 10px 6px 6px; margin-bottom:6px; min-width:0; cursor:pointer}
.check:has(input:checked){border-color:var(--accent)}
.check .mini{width:30px; flex:none}
.check .mini .ph{font-size:.5rem; padding:2px}
.check input{width:20px; height:20px; flex:none; accent-color:var(--accent); margin-left:auto}
.check span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Anmeldung ---------- */
.auth{max-width:400px; margin:7vh auto 0}
.auth h1{font:800 clamp(3.4rem,16vw,5rem)/.9 var(--disp2); text-transform:uppercase}
.auth h1 span{color:var(--accent)}
.auth p{margin:10px 0 22px}
.auth .input{margin-bottom:10px}
.err{color:var(--bad); font-weight:600; font-size:.92rem; min-height:22px; margin:4px 0 8px}

/* ---------- Profil ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px}
.panel .sh{margin-top:0}
.prof{display:grid; gap:14px}
@media (min-width:900px){.prof{grid-template-columns:1fr 1fr; align-items:start}}

#toast{position:fixed; left:50%; transform:translateX(-50%); z-index:60;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:8px; font:700 .92rem var(--display);
  max-width:calc(100% - 32px); text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (min-width:900px){#toast{bottom:24px}}
.foot{font-size:.8rem; color:var(--muted); text-align:center; margin-top:28px}
.foot a{color:var(--muted)}

/* lange Titel sauber umbrechen */
.dt h2,.reveal h3,.stage h1,.poll-h h3,.ph-head h1{word-break:normal; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
@media (max-width:400px){.nav-in a{font-size:.82rem}.badge{margin-left:3px; padding:0 4px; min-width:16px; font-size:10px; line-height:16px}}

/* ===== Ruhiger Aufbau ===== */
.ph-head{display:block; margin:10px 0 18px}
.ph-head h1{font-size:clamp(2.1rem,9vw,2.8rem)}
.ph-head p{margin:6px 0 0; font-size:.95rem}

/* Tabs als Unterstreichung statt Kasten */
.seg{display:flex; gap:22px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0; margin-bottom:20px}
.seg button{padding:10px 0; border-radius:0; font-size:1rem; position:relative; flex:none}
.seg button.on{background:none; color:var(--ink)}
.seg button.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--accent)}
.seg.full{gap:0}
.seg.full button{flex:1}

/* Leere Zustände ohne Rahmen */
.empty{border:0; padding:8px 0 0; text-align:left}
.empty p{margin:0 0 14px; color:var(--muted)}
.empty .btn{margin-top:0}

/* Bühne ohne Kasten */
.stage{border:0; background:none; padding:6px 0 26px; min-height:0; border-radius:0; margin-bottom:6px; border-bottom:1px solid var(--line)}
.stage::after{display:none}
.stage .wall{display:none}
.stage h1{font-size:clamp(2.2rem,9.5vw,3.2rem)}
.stage p{margin:8px 0 18px; color:var(--muted)}
.stage + .seg{margin-top:18px}

/* Detail: weniger Gewicht */
.sheet-head b{font:700 .8rem var(--body); text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.dt{align-items:flex-start}
.dt h2{font-size:clamp(1.8rem,7.5vw,2.4rem)}
.club{display:block; margin:8px 0 0; padding:0; background:none; border:0; font-size:.9rem; color:var(--muted)}
.club b{font:800 1.4rem/1 var(--disp2); color:var(--accent); margin-right:4px}
.sh{font:700 .78rem var(--body); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:24px 0 10px}
.btn.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.rate{gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.rate button{background:none; border-radius:0; border-left:1px solid var(--line); height:42px; font-size:1.05rem; color:var(--soft)}
.rate button:first-child{border-left:0}
.rate button:hover{background:var(--panel)}
.rate button.on{background:var(--accent); color:var(--accent-ink)}
.link{background:none; border:0; padding:6px 0; font:600 .88rem var(--body); color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.link:hover{color:var(--ink)}
.provs{margin:0; font-weight:600}
.provs .link{margin-left:8px; font-weight:600}
.chips + .link{margin-top:6px}
.friends div{background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:9px 0}
.friends div:last-child{border-bottom:0}
.backdrop img{opacity:.35}

/* Abstimmung */
.poll{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:16px 0 4px}
.poll-h h3{font-size:1.4rem}

/* Profil */
.panel{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 0 6px}

/* Untere Navigation: nichts am Rand */
.nav-in{padding:0 4px}
.nav-in a{font-size:.85rem; padding:0 2px}
@media (max-width:360px){.nav-in a{font-size:.78rem}}
.nav-in .badge{position:absolute; top:9px; right:6px; margin:0}

/* ===== Startseite: voller, ohne Rahmen ===== */
.stage{position:relative; overflow:hidden; border:0; border-bottom:0; border-radius:16px; background:var(--panel);
  padding:0; min-height:0; margin:4px 0 22px}
.stage .wall{display:grid; position:absolute; inset:0; grid-template-columns:repeat(8,1fr); gap:6px; padding:0; opacity:.5; transform:rotate(-6deg) scale(1.35); transform-origin:70% 50%}
.stage .wall .poster{height:auto; aspect-ratio:2/3; border:0; border-radius:6px; transform:none}
.stage .wall .poster:nth-child(2n){transform:translateY(22%)}
.stage::after{display:block; content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,var(--panel) 25%,color-mix(in srgb,var(--panel) 70%,transparent) 55%,color-mix(in srgb,var(--panel) 20%,transparent))}
.stage-in{position:relative; z-index:1; padding:30px 22px 24px}
.stage h1{font-size:clamp(2.4rem,10vw,3.8rem); max-width:14ch}
.stage p{color:var(--soft); margin:10px 0 20px; max-width:30ch}
@media (max-width:600px){.stage .wall{grid-template-columns:repeat(4,1fr); transform:rotate(-6deg) scale(1.5)}
  .stage::after{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 30%,transparent),var(--panel) 62%)}
  .stage-in{padding-top:84px}}
@media (min-width:900px){.stage-in{padding:48px 40px 40px}}

.overview{display:grid; gap:12px; margin-bottom:8px; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.overview{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:stretch}}
.feat,.tile2{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:4px; text-align:left; text-decoration:none;
  background:var(--panel); border:0; border-radius:14px; padding:16px; min-width:0; color:inherit}
.tile2 .lbl,.feat .lbl{color:var(--accent); margin-bottom:4px}
.tile2 > b{font:800 1.5rem/1 var(--disp2); text-transform:uppercase; overflow-wrap:break-word}
.poll-tile .btn{align-self:flex-start; margin-top:10px; display:inline-flex; align-items:center}
.feat{padding:0}
.fbg{position:absolute; inset:0}
.fbg img{width:100%; height:100%; object-fit:cover; filter:blur(26px) saturate(1.3); transform:scale(1.3); opacity:.55}
.fbg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--panel) 10%,color-mix(in srgb,var(--panel) 35%,transparent))}
.fin{position:relative; display:flex; gap:14px; align-items:center; padding:14px}
.fin .poster{width:84px; flex:none; box-shadow:0 10px 24px rgba(0,0,0,.4)}
.ftx{display:flex; flex-direction:column; gap:2px; min-width:0}
.ftx b{font:800 1.7rem/.95 var(--disp2); text-transform:uppercase; overflow-wrap:break-word; margin-bottom:4px}
.acts{display:grid; gap:2px; margin-top:2px}
.act-row{display:flex; align-items:center; gap:10px; background:none; border:0; padding:6px 0; text-align:left; min-width:0; color:inherit}
.act-row .mini{width:30px; flex:none}
.act-row .mini .poster{border-radius:4px}
.act-row .mini .ph{font-size:.45rem; padding:2px}
.at{display:flex; flex-direction:column; min-width:0; font-size:.92rem; line-height:1.3}
.at > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc{color:var(--accent); font:800 1.05rem var(--disp2)}

/* Poster-Reihen */
.shelf{margin-top:8px}
.shelf .sec{margin:22px 0 10px}
.shelf .sec h2{font-size:1.45rem}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:116px; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; margin:0 -18px; padding:2px 18px 8px; scroll-padding:0 18px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
@media (min-width:600px){.rail{grid-auto-columns:150px; gap:16px}}
@media (min-width:1024px){.rail{grid-auto-columns:170px}}
.skel{background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel)); background-size:200% 100%; animation:sk 1.2s linear infinite; border:0}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.sec span{white-space:nowrap; flex:none}

/* Reihen am PC scrollbar: Pfeile + Ziehen */
.rwrap{position:relative}
.rbtn{position:absolute; z-index:3; top:calc(50% - 50px); width:46px; height:46px; border-radius:50%; border:1px solid var(--line2);
  background:color-mix(in srgb,var(--bg) 82%,transparent); color:var(--ink); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.4); padding:0; transition:background .12s, transform .12s}
.rbtn:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.rbtn:active{transform:scale(.94)}
.rbtn.prev{left:-6px}
.rbtn.next{right:-6px}
@media (hover:none){.rbtn{display:none}}
@media (hover:hover){.rail{cursor:grab}.rail.dragging{cursor:grabbing; scroll-snap-type:none}.rail.dragging .card{pointer-events:none}}
.rail img{-webkit-user-drag:none; user-select:none}

/* ===== Neue Funktionen ===== */
/* Tabs scrollbar */
.seg.scroll{overflow-x:auto; scrollbar-width:none; gap:20px; max-width:none}
@media (max-width:899px){.seg.scroll{margin-left:-18px; margin-right:-18px; padding:0 18px; scroll-padding:0 18px}}
.seg.scroll::-webkit-scrollbar{display:none}
.seg .cnt{font-size:.75rem; color:var(--muted); font-weight:600; margin-left:2px}
.seg button.on .cnt{color:var(--accent)}

/* Suche auf der Startseite */
.startsearch{margin:4px 0 14px}
.startsearch .input{min-height:52px; font-size:17px; padding-left:16px; background:var(--panel); border-color:transparent}
.startsearch .input:focus{border-color:var(--accent)}

/* Formulare inline */
.inline-form{display:flex; gap:8px; margin:0 0 6px}
.inline-form .input{flex:1; min-width:0}
.inline-form .btn{flex:none}
textarea.input{resize:vertical; min-height:84px; line-height:1.45}
.dform{margin-top:4px}
.chip.add{border-style:dashed; color:var(--muted)}

/* Fortschritt */
.prog{margin-bottom:10px}
.prog-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.pbar{height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-bottom:6px}
.pbar span{display:block; height:100%; background:var(--accent); border-radius:3px}
.nextep{display:flex; flex-direction:column; gap:3px; background:var(--panel); border-radius:12px; padding:12px 14px; margin:6px 0 4px}
.nextep .lbl{color:var(--accent); margin:0}
.nextep b{font-size:1rem; overflow-wrap:break-word}
.nextep .btn{align-self:flex-start; margin-top:8px}

/* Tagebuch */
.diary{display:grid; gap:0}
.dy{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); min-width:0}
.dy:last-child{border-bottom:0}
.dy-p{width:54px; flex:none; background:none; border:0; padding:0}
.dy-p .ph{font-size:.55rem; padding:3px}
.dy-t{flex:1; min-width:0}
.dy-h{display:flex; gap:8px; align-items:baseline}
.dy-h b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note2{margin:4px 0 0; white-space:pre-line; overflow-wrap:break-word}
.dy .link{flex:none; padding:0}
.small-dy{padding:8px 0}

/* Statistik */
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:6px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--panel); border-radius:14px; padding:14px 16px}
.kpi b{display:block; font:800 2.3rem/1 var(--disp2); color:var(--accent)}
.kpi span{display:block; margin-top:4px; font-size:.85rem; color:var(--muted)}
.charts{display:grid; gap:0 28px; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chart{min-width:0}
.cols{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; height:150px; align-items:end}
.small-cols{grid-template-columns:repeat(10,minmax(0,1fr))}
.col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0}
.cb{width:100%; max-width:28px; background:var(--accent); border-radius:4px 4px 0 0; min-height:0}
.col:hover .cb{filter:brightness(1.15)}
.cv{font-size:.72rem; color:var(--soft); margin-bottom:3px; min-height:1em}
.cl{font-size:.7rem; color:var(--muted); margin-top:5px; white-space:nowrap; border-top:1px solid var(--line); width:100%; text-align:center; padding-top:4px}
.bars{display:grid; gap:9px}
.bar-r{display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 2rem; align-items:center; gap:10px; font-size:.92rem}
.bl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bt{height:10px; background:var(--panel2); border-radius:5px; overflow:hidden}
.bf{display:block; height:100%; background:var(--accent); border-radius:0 4px 4px 0}
.bn{text-align:right; color:var(--soft); font-variant-numeric:tabular-nums}
.rk{font:800 1.3rem var(--disp2); color:var(--muted); width:1.2rem; text-align:center; flex:none}
.act-row .sc{margin-left:auto; flex:none}

/* Reihe im Detail-Blatt */
.rail.in-sheet{margin:0 -18px; padding:2px 18px 6px; grid-auto-columns:104px}
@media (min-width:700px){.rail.in-sheet{margin:0 -24px; padding:2px 24px 6px; grid-auto-columns:118px}}

/* Hover-Statistik auf Postern */
.hov{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; padding:12px;
  border-radius:8px; background:linear-gradient(180deg,rgba(4,12,9,.35),rgba(4,12,9,.94) 55%); color:#f3f1e7;
  opacity:0; transition:opacity .15s; pointer-events:none; text-align:left}
.hv-big{font:800 1.9rem/1 var(--disp2); color:#ffd84a; text-transform:uppercase}
.hv-big small{font-size:1.1rem; color:#c9d3c8}
.hv-l{font:700 .8rem var(--body)}
.hv-r{font-size:.76rem; color:#c9d3c8; line-height:1.3}
.hv-r b{color:#ffd84a; font-weight:800}
.hv-bar{display:block; height:4px; border-radius:2px; background:rgba(243,241,231,.2); overflow:hidden; margin:2px 0 3px}
.hv-bar span{display:block; height:100%; background:#ffd84a}
@media (hover:hover){.card:hover .hov{opacity:1}.card:hover .tag,.card:hover .score{opacity:0}}
.card:focus-visible .hov{opacity:1}
.tag,.score{transition:opacity .15s}
@media (max-width:599px){.hv-big{font-size:1.5rem}}

/* ===== Konzerte ===== */
.poster.sq{aspect-ratio:1/1}
.stage .wall .poster.sq{aspect-ratio:1/1}
.stage-btns{margin-top:2px}
.stage-btns .btn{flex:0 1 auto; min-width:0; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.stage-btns .btn:not(.primary){background:var(--shade)}
@media (max-width:420px){.stage-btns .btn{flex:1 1 100%}}
.big-n{color:var(--accent); font-weight:700}
.ok{color:var(--good); font-weight:700}
.tile2.ask .row{margin-top:10px}
.tile2.ask .btn{flex:0 1 auto; min-height:42px; padding:7px 14px}
.danger-l{color:var(--bad)}
.manual-hint{margin:16px 0 0}
.manual-hint .link{padding:0}
.filter{margin:-6px 0 6px}
.sec.yr{margin:22px 0 12px}
.sec.yr:first-of-type{margin-top:4px}
.sec.yr h2{font-size:1.9rem}

/* Datum als Block */
.dbadge{flex:none; width:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border-radius:8px; background:var(--panel2); padding:6px 2px; line-height:1}
.dbadge b{font:800 1.75rem/1 var(--disp2); color:var(--accent)}
.dbadge span{font:700 .72rem/1.25 var(--body); text-transform:uppercase; letter-spacing:.04em; color:var(--soft)}
.dbadge span:last-child{color:var(--muted); font-weight:600}

/* Auftrittsliste */
.gigs{display:grid; gap:8px}
@media (min-width:900px){.gigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gig{display:flex; align-items:center; gap:12px; background:var(--panel); border-radius:12px; padding:8px 10px 8px 8px; min-width:0}
.gig .info{flex:1; min-width:0; background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:1px; color:inherit}
.gig .info b{font:700 1rem/1.25 var(--display); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gig .info span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gig-m{color:var(--soft)}
.gig .btn{flex:none; padding:8px 12px; min-height:40px; font-size:.9rem}
.gig .btn:disabled{opacity:1}
@media (max-width:360px){.gig{gap:9px}.dbadge{width:50px}.gig .btn{padding:7px 9px; font-size:.85rem}}
.more{margin-top:14px}

/* Suche: Künstler */
button.item{width:100%; text-align:left; color:inherit; font:inherit}
.item .thumb .poster{border-radius:6px}
.item .info{display:flex; flex-direction:column}
.item .pill{flex:none}
.artist-head{display:flex; gap:16px; align-items:center; margin:4px 0 16px}
.artist-head > .poster{width:88px; flex:none; border-radius:10px}
@media (min-width:700px){.artist-head > .poster{width:120px}}
.ah-t{min-width:0}
.ah-t .link{padding:0 0 6px}
.ah-t h1{font:800 clamp(2rem,9vw,3rem)/.95 var(--disp2); text-transform:uppercase; overflow-wrap:break-word}
.filters{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; margin-bottom:16px}
.filters .btn{min-height:48px}
@media (max-width:420px){.filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filters .btn{grid-column:1 / -1}}

/* Detail */
.dt .poster.sq{width:118px}
@media (min-width:700px){.dt .poster.sq{width:150px}}
.club{line-height:1.4}
.club span{color:var(--muted)}
.ticket-c{margin-top:10px}
.set-h{font:700 .78rem var(--body); text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:16px 0 6px}
.setlist{margin:0; padding:0 0 0 2.2em; display:grid; gap:0}
.setlist li{padding:7px 0; border-bottom:1px solid var(--line); overflow-wrap:break-word}
.setlist li:last-child{border-bottom:0}
.setlist li::marker{color:var(--muted); font-variant-numeric:tabular-nums}
.setlist li span{font-weight:600}
.setlist small{display:block; color:var(--muted); font-size:.8rem}
.setlist li.tape{list-style:none; margin-left:-2.2em; padding-left:2.2em; color:var(--muted); font-style:italic}
.setlist li.tape span{font-weight:400}
.sheet-foot{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:22px; padding-top:10px; border-top:1px solid var(--line)}
.friends small{display:block; font-weight:400; white-space:normal}
.two.two-fix{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:360px){.two.two-fix{grid-template-columns:minmax(0,1fr)}}
.sugg{margin-top:8px}
.status-seg{margin:4px 0 6px}

/* Runde */
.people{margin-bottom:6px}
.people button{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; background:none; border:0;
  border-bottom:1px solid var(--line); padding:12px 0; font-size:.95rem; text-align:left; color:inherit}
.people button:last-child{border-bottom:0}
.people button:hover span:first-child{color:var(--accent)}
.people span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700}
.people span:last-child{flex:none; color:var(--muted); font-size:.88rem}
.people b{font:800 1.15rem var(--disp2); color:var(--accent)}
@media (max-width:420px){.people button{flex-direction:column; align-items:flex-start; gap:2px}.people span:last-child{white-space:normal}}
.feed{margin-bottom:10px}
.sheet-in .ph-head{margin-top:0}

/* Statistik */
.bl small{display:block; font-size:.74rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.bar-r{grid-template-columns:minmax(0,9rem) minmax(0,1fr) 2rem}
@media (max-width:380px){.bar-r{grid-template-columns:minmax(0,7rem) minmax(0,1fr) 1.8rem}}
.kpi span{overflow-wrap:break-word}
.stage.nowall .stage-in{padding-top:30px}
@media (min-width:900px){.stage.nowall .stage-in{padding-top:48px}}
.gig .info b{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}

/* =========================================================
   Hochwertiger Auftritt: große Bühne, Bildkacheln, Top 10
   ========================================================= */
#main.enter{animation:pageIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pageIn{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){#main.enter{animation:none}}

/* Platzhalter, wenn es kein Bild gibt */
.ph-bg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px;
  background:radial-gradient(120% 95% at 18% 8%, hsl(var(--h,150) 52% 36%), hsl(calc(var(--h,150) + 45) 48% 13%) 72%);
  color:rgba(255,255,255,.8); font:800 1.1rem/.95 var(--disp2); text-transform:uppercase; text-align:center; word-break:break-word}
.mini .ph-bg,.thumb .ph-bg{font-size:.5rem}
.poster:has(.ph-bg){border-color:transparent}

/* --- Bühne oben (Start) --- */
body[data-r="start"] main{padding-top:0}
.hero{position:relative; width:100vw; margin-left:calc(50% - 50vw); min-height:clamp(470px, 74vh, 660px);
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; margin-bottom:6px}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img,.hero-bg .ph-bg{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; animation:heroIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroIn{from{opacity:0; transform:scale(1.06)}}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 4%,color-mix(in srgb,var(--bg) 78%,transparent) 32%,transparent 62%),
             linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 22%)}
.hero-ph{background:radial-gradient(90% 80% at 75% 10%, hsl(var(--h,150) 50% 26%), var(--bg) 70%)}
.hero-ph:not([style]){background:radial-gradient(90% 80% at 75% 0%, #1d4a2c, var(--bg) 70%)}
.hero-in{position:relative; width:100%; max-width:1180px; margin:0 auto; padding:0 18px 30px}
.hero-lbl{display:inline-block; font:700 .76rem var(--body); text-transform:uppercase; letter-spacing:.18em; color:var(--accent)}
.hero h1{font:800 clamp(3.4rem,17vw,7.4rem)/.84 var(--disp2); text-transform:uppercase; letter-spacing:-.005em;
  margin:10px 0 14px; max-width:11ch; overflow-wrap:break-word; text-shadow:0 6px 40px rgba(0,0,0,.35)}
.hero p{margin:0 0 4px; color:var(--soft); font-size:1.02rem; max-width:46ch}
.hero-n{color:var(--accent); font-weight:700}
.hero-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.hero-btns .btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-width:150px; border-radius:8px}
.btn.glass{background:color-mix(in srgb,var(--ink) 14%,transparent); border-color:transparent; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn.glass:hover{background:color-mix(in srgb,var(--ink) 22%,transparent); border-color:transparent}
@media (max-width:480px){.hero-btns .btn{flex:1 1 100%}}
@media (min-width:900px){
  .hero{min-height:clamp(520px, 72vh, 720px); align-items:center}
  .hero-bg{left:32%}
  .hero::before{background:linear-gradient(90deg,var(--bg) 30%,color-mix(in srgb,var(--bg) 70%,transparent) 42%,transparent 72%),
                            linear-gradient(0deg,var(--bg) 0,transparent 30%),
                            linear-gradient(180deg,color-mix(in srgb,var(--bg) 50%,transparent),transparent 18%)}
  .hero-in{padding:60px 18px 70px}
  .hero p{font-size:1.15rem}
}

/* --- Hinweise unter der Bühne --- */
.nudges{display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin:6px 0 4px; position:relative; z-index:2}
@media (min-width:700px){.nudges{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.nudge{display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; background:color-mix(in srgb,var(--panel) 85%,transparent);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; color:inherit; transition:border-color .15s, background .15s}
a.nudge:hover{border-color:var(--line2); background:var(--panel)}
.nudge-t{display:flex; flex-direction:column; min-width:0}
.nudge-t .lbl{color:var(--accent); margin:0 0 2px}
.nudge-t b{font:800 1.45rem/1 var(--disp2); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nudge .btn{flex:none; min-height:42px; padding:7px 14px}
.nudge .link{flex:none}

/* --- Reihen --- */
.shelf .sec{margin:30px 0 12px}
.shelf .sec h2{font-size:1.55rem}
@media (min-width:900px){.shelf .sec h2{font-size:1.85rem}}
.rail{grid-auto-columns:min(76vw,290px); gap:12px; padding-bottom:14px}
@media (min-width:600px){.rail{grid-auto-columns:290px; gap:14px}}
@media (min-width:1200px){.rail{grid-auto-columns:320px}}
.rbtn{top:calc(50% - 30px)}

/* --- Bildkachel --- */
.tile{position:relative; display:block; width:100%; aspect-ratio:16/10; border:0; padding:0; margin:0; border-radius:10px; overflow:hidden;
  background:var(--panel); text-align:left; color:#f6f4ea; isolation:isolate; min-width:0;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.22);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s}
.tile-img{position:absolute; inset:0; z-index:-1}
.tile-img img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0,transparent 26%,transparent 42%,rgba(0,0,0,.86) 100%)}
.tile-txt{position:absolute; left:12px; right:12px; bottom:10px; z-index:1; display:flex; flex-direction:column; gap:3px}
.tile-txt b{font:800 1.55rem/.9 var(--disp2); text-transform:uppercase; letter-spacing:.005em; overflow-wrap:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 2px 14px rgba(0,0,0,.5)}
.tile-txt span{font:600 .8rem var(--body); opacity:.86; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .tag{z-index:1; left:8px; top:8px; bottom:auto; background:rgba(8,14,11,.62); color:#f6f4ea}
.tile .score{z-index:1; right:8px; top:8px}
@media (hover:hover){
  .tile:hover{transform:translateY(-4px) scale(1.025); box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .tile:hover .tile-img img{transform:scale(1.07)}
}
.tile:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.tile:active{transform:scale(.985)}
.rail.dragging .tile{pointer-events:none}
@media (prefers-reduced-motion:reduce){.tile,.tile-img img{transition:none}}
@media (prefers-color-scheme: light){.tile{box-shadow:0 6px 18px rgba(18,53,42,.18)}}

/* Raster aus Kacheln */
.tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
@media (min-width:1200px){.tgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}}
@media (max-width:599px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tgrid .tile{aspect-ratio:4/5}
  .tgrid .tile-txt b{font-size:1.3rem}
  .tgrid .tile-txt span{font-size:.74rem}
}
.sheet-in .tgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:599px){.sheet-in .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Top 10 mit großen Zahlen --- */
.rail.rail-rank{grid-auto-columns:max-content; gap:6px}
.rank{display:flex; align-items:flex-end; padding-top:6px}
.rank-n{font:800 9.5rem/.74 var(--disp2); letter-spacing:-.08em; color:var(--bg); -webkit-text-stroke:3px var(--muted);
  margin-right:-22px; position:relative; z-index:0; user-select:none; padding-left:4px}
.rank .tile{width:150px; aspect-ratio:3/4; flex:none; z-index:1}
.rank .tile-txt b{font-size:1.2rem}
@media (min-width:600px){.rank-n{font-size:11rem}.rank .tile{width:170px}}

/* Neu in der Runde */
.acts-grid{display:grid; gap:2px 28px}
@media (min-width:900px){.acts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Detail mit großem Bild --- */
@media (min-width:700px){.sheet-in{max-width:820px}}
.banner{position:relative; margin:-16px -18px 0; aspect-ratio:16/10; max-height:420px; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 95% at 18% 8%, hsl(var(--h,150) 52% 30%), hsl(calc(var(--h,150) + 45) 48% 10%) 72%)}
@media (min-width:700px){.banner{margin:-20px -24px 0; aspect-ratio:16/8}}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; z-index:-2; animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both}
.banner::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 2%,color-mix(in srgb,var(--bg) 55%,transparent) 30%,transparent 62%),
             linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%)}
.banner .x{position:absolute; top:14px; right:14px; z-index:2; background:rgba(8,14,11,.55); color:#f6f4ea; border-color:rgba(255,255,255,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.banner-txt{position:absolute; left:18px; right:18px; bottom:6px; z-index:1}
@media (min-width:700px){.banner-txt{left:24px; right:24px; bottom:10px}}
.banner h2{font:800 clamp(2.6rem,12vw,4.6rem)/.86 var(--disp2); text-transform:uppercase; margin:8px 0 0; overflow-wrap:break-word;
  -webkit-hyphens:auto; hyphens:auto; text-shadow:0 4px 30px rgba(0,0,0,.35)}
.dmeta{margin:10px 0 18px}
.kv-big{font-size:1.05rem; color:var(--ink); font-weight:600}
.dmeta .facts{margin-top:10px}
.dmeta .facts:empty{display:none}
.dmeta .club{margin-top:10px}
.dmeta .club b{font:inherit; color:var(--ink); font-weight:700; margin:0}
/* Große Titel: Schriftgröße passt sich dem längsten Wort an, damit nichts mitten im Wort umbricht */
.hero h1{--w:calc(100vw - 36px); font-size:min(clamp(3.4rem,17vw,7.4rem), calc(var(--w) / (var(--n,8) * .66))); overflow-wrap:normal; -webkit-hyphens:manual; hyphens:manual}
@media (min-width:900px){.hero h1{--w:min(62vw,720px); max-width:none}}
.banner h2{--w:calc(min(100vw,820px) - 48px); font-size:min(clamp(2.6rem,12vw,4.6rem), calc(var(--w) / (var(--n,8) * .66))); overflow-wrap:normal; -webkit-hyphens:manual; hyphens:manual}
.nudges{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.nudges{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
@media (min-width:1100px){.nudges{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nav-in .hide-s{display:none}

/* Suche nach Location, Gruppieren */
.smode{margin:0 0 10px}
.filter{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:-6px 0 6px}
.filter .input{flex:1 1 260px; min-width:0}
.filter.no-f{margin-top:-10px}
.grp{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.grp .muted{margin-right:2px}
.grp .chip{padding:5px 12px; font-size:.86rem}
.sec.yr-s h2{font-size:1.45rem; line-height:1.05; min-width:0; overflow-wrap:break-word}
.sec.yr-s span{flex:none}

/* Die 11 für die besten Konzerte */
.rate{grid-template-columns:repeat(10,minmax(0,1fr)) minmax(0,1.25fr)}
.rate button.r11{color:var(--accent); font-weight:800; background:color-mix(in srgb,var(--accent) 10%,transparent); border-left:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
.rate button.r11:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.rate button.r11.on{background:linear-gradient(135deg,#ffe98a,#ffb800 55%,#ff8a00); color:#1a1200; box-shadow:0 0 22px rgba(255,190,40,.45) inset}
.leg{margin:8px 0 0; font:700 .92rem var(--display); color:var(--accent)}
.score.s11{background:linear-gradient(135deg,#ffe98a,#ffb800 55%,#ff8a00); color:#1a1200; box-shadow:0 0 16px rgba(255,184,0,.65); animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 26px rgba(255,184,0,.95)}}
@media (prefers-reduced-motion:reduce){.score.s11{animation:none}}
.small-cols{grid-template-columns:repeat(11,minmax(0,1fr))}
.col.c11 .cb{background:linear-gradient(180deg,#ffd84a,#ff8a00)}
@media (max-width:360px){.rate button{font-size:.92rem}}

/* Location-Bilder */
.vhead{position:relative; overflow:hidden; isolation:isolate; border-radius:16px; min-height:220px; display:flex; align-items:flex-end; margin:4px 0 16px;
  background:radial-gradient(120% 95% at 18% 8%, hsl(var(--h,150) 52% 30%), hsl(calc(var(--h,150) + 45) 48% 10%) 72%)}
.vhead > img,.vhead > .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both}
.vhead::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(4,10,8,.92) 8%,rgba(4,10,8,.45) 55%,rgba(4,10,8,.15))}
.vhead-txt{padding:18px; color:#f6f4ea; min-width:0; width:100%}
.vhead-txt .link{color:rgba(246,244,234,.8); padding:0 0 6px}
.vhead-txt h1{--w:calc(100vw - 72px); font:800 min(clamp(2.2rem,10vw,3.6rem), calc(var(--w) / (var(--n,8) * .66)))/.9 var(--disp2); text-transform:uppercase; overflow-wrap:break-word}
.vhead-txt span{display:block; margin-top:6px; font-size:.95rem; opacity:.85}
@media (min-width:900px){.vhead{min-height:300px}.vhead-txt{padding:28px}.vhead-txt h1{--w:900px}}
.vgroup{position:relative; overflow:hidden; isolation:isolate; border-radius:14px; height:120px; display:flex; align-items:flex-end; margin:26px 0 12px;
  background:radial-gradient(120% 95% at 18% 8%, hsl(var(--h,150) 52% 30%), hsl(calc(var(--h,150) + 45) 48% 10%) 72%)}
.vgroup:first-of-type{margin-top:8px}
.vgroup > img,.vgroup > .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.vgroup::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,10,8,.88),rgba(4,10,8,.35) 70%,rgba(4,10,8,.15))}
.vgroup-txt{display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; padding:12px 16px; color:#f6f4ea; min-width:0}
.vgroup-txt h2{font:800 1.5rem/1 var(--disp2); text-transform:uppercase; min-width:0; overflow-wrap:break-word}
.vgroup-txt span{flex:none; font-size:.88rem; opacity:.85}
@media (min-width:900px){.vgroup{height:150px}.vgroup-txt h2{font-size:1.9rem}}

/* Privat / Beruflich */
.kind-seg{margin:14px 0 4px}
.kind-note{margin:6px 0 0}
.kind-note b{color:var(--ink)}
.kpi-sub{margin:4px 0 0}
.wk-badge{display:inline-block; margin:0 0 6px 10px; font:700 .7rem var(--body); text-transform:uppercase; letter-spacing:.08em;
  background:var(--accent); color:var(--accent-ink); border-radius:5px; padding:2px 7px; vertical-align:2px}
.wk-set{margin-top:12px; min-height:40px; padding:7px 14px; font-size:.9rem; color:#f6f4ea}
button.nudge{width:100%; text-align:left; font:inherit; cursor:pointer}
button.nudge:hover{border-color:var(--line2); background:var(--panel)}
.grp .cnt{font-size:.74rem; opacity:.7; margin-left:2px}
.prof .row .btn{min-height:42px}
/* lange Namen nie mitten im Wort trennen */
.tile{container-type:inline-size}
.tile-txt b{font-size:min(1.55rem, calc((100cqi - 24px) / (var(--n,8) * .62))); overflow-wrap:normal; word-break:normal}
.tgrid .tile-txt b{font-size:min(1.3rem, calc((100cqi - 24px) / (var(--n,8) * .62)))}
@media (min-width:600px){.tgrid .tile-txt b{font-size:min(1.55rem, calc((100cqi - 24px) / (var(--n,8) * .62)))}}
.rank .tile-txt b{font-size:min(1.2rem, calc((100cqi - 24px) / (var(--n,8) * .72)))}
.vhead-txt .wk-badge{display:inline-block; margin:0 0 6px 10px; opacity:1; font-size:.7rem}
.vhead-txt h1{font-size:min(clamp(2.2rem,10vw,3.6rem), calc(var(--w) / (var(--n,8) * .7))); overflow-wrap:normal}

/* Beruflich direkt auf der Kachel umschalten */
.tw{position:relative; min-width:0}
.ktog{position:absolute; left:8px; top:8px; z-index:3; max-width:calc(100% - 64px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:1px solid rgba(255,255,255,.35); background:rgba(8,14,11,.55); color:#f6f4ea; border-radius:6px; padding:4px 9px;
  font:700 .74rem var(--body); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .15s, background .15s}
.ktog:hover{background:rgba(8,14,11,.8); border-color:rgba(255,255,255,.6)}
.ktog.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.tw .tile .tag{top:40px}
@media (hover:hover){
  .tw:not(.is-work) .ktog{opacity:0}
  .tw:hover .ktog,.tw .ktog:focus-visible{opacity:1}
  .tw:not(.is-work):not(:hover) .tile .tag{top:8px}
}
@media (hover:none){.tw:not(.is-work) .ktog{opacity:.75; font-size:.68rem; padding:3px 7px}}
.vg-btn{min-height:32px; padding:4px 12px; font-size:.8rem; margin-left:8px; color:#f6f4ea; vertical-align:1px}
@media (max-width:420px){.vgroup-txt{flex-wrap:wrap}}