/* ── Into the Madness 2026 — Timetable ───────────────────── */

:root{
  color-scheme:dark;          /* Regler & Scrollbalken dunkel */
  --bg:#0a0710;
  --bg-2:#120c1c;
  --card:#171025;
  --card-2:#1e1531;
  --line:#2c2142;
  --text:#f4f0fb;
  --muted:#a495c2;
  --dim:#7d6e9c;
  --accent:#ff3d7f;
  --ok:#4ade80;
  --warn:#fbbf24;
  --danger:#fb5d5d;
  --radius:14px;
  --pad:16px;
  --min:1.9px;              /* Pixel pro Minute im Raster */
  /* Kondensiert fürs Raster (passt mehr Künstlernamen in schmale Spalten),
     blockig für Wortmarke, Uhr und laufendes Set. */
  --font:"Barlow Semi Condensed","Roboto Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(255,61,127,.16), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(124,77,255,.16), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.45;
  padding-bottom:32px;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent)}

/* ── Kopfzeile ───────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) var(--pad) 12px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:11px;height:34px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),#a855f7 55%,#22d3ee);
  box-shadow:0 0 18px rgba(255,61,127,.55);
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{
  font-family:var(--font-display);
  font-size:1.04rem;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-text small{color:var(--muted);font-size:.76rem}

.clock{text-align:right;flex:0 0 auto}
.clock time{
  display:block;font-family:var(--font-display);font-size:1.36rem;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1;
}
.clock small{color:var(--dim);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em}
.clock.is-sim time{color:var(--warn)}
.clock.is-sim small{color:var(--warn)}

/* ── Statusleiste ────────────────────────────────────────── */
.status-strip{
  margin:0 var(--pad) 12px;padding:9px 13px;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;background:rgba(255,255,255,.035);
  font-size:.83rem;color:var(--muted);
}
.status-strip:empty{display:none}
.status-strip b{color:var(--text);font-weight:600}
.link-btn{
  background:none;border:none;padding:0;margin-left:4px;font:inherit;
  color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;
}
.link-btn:hover{color:var(--text)}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs{
  display:flex;gap:5px;padding:0 var(--pad);
  position:sticky;top:0;z-index:30;
  padding-top:6px;padding-bottom:10px;
  background:linear-gradient(180deg,var(--bg) 62%,rgba(10,7,16,0));
}
.tab{
  flex:1;min-width:0;padding:10px 5px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font:inherit;font-size:.82rem;font-weight:600;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s,color .15s,border-color .15s;
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,#2a1a3d,#20142f);
  color:var(--text);border-color:#4a3468;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.tab-count{
  background:var(--accent);color:#fff;border-radius:999px;
  font-size:.7rem;padding:0 6px;min-width:19px;font-variant-numeric:tabular-nums;
}

main{padding:0 var(--pad)}
.hint{color:var(--dim);font-size:.8rem;margin:2px 0 12px}

/* ── Stage-Karten (Jetzt) ────────────────────────────────── */
.stage-cards{display:grid;gap:13px}
@media(min-width:720px){.stage-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1160px){.stage-cards{grid-template-columns:repeat(3,1fr)}}

.scard{
  --c:var(--accent);
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  overflow:hidden;position:relative;
}
.scard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);
}
.scard-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px 0;
}
.scard-name{
  font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c);
}
.scard-state{
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 8px;
  white-space:nowrap;
}
.scard-state.live{
  color:#fff;border-color:transparent;background:var(--c);font-weight:700;
}
.scard-body{padding:9px 15px 15px}

.now-artist{
  font-family:var(--font-display);
  font-size:1.22rem;line-height:1.24;margin:4px 0 6px;letter-spacing:-.005em;
  overflow-wrap:anywhere;
}
.now-artist.idle{font-family:var(--font);color:var(--dim);font-weight:600;font-size:1.06rem}
.now-time{
  color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
}
.now-left{color:var(--c);font-weight:700}

.bar{
  height:7px;border-radius:999px;background:rgba(255,255,255,.09);
  overflow:hidden;margin:11px 0 0;
}
.bar>i{
  display:block;height:100%;border-radius:999px;background:var(--c);
  transition:width .5s linear;
}
@media(prefers-reduced-motion:reduce){.bar>i{transition:none}}

.next{
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.next-label{
  font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  flex:0 0 auto;
}
.next-artist{font-weight:600;font-size:.96rem;overflow-wrap:anywhere}
.next-meta{color:var(--muted);font-size:.79rem;font-variant-numeric:tabular-nums}
.next.none .next-artist{color:var(--dim);font-weight:500}

.star{color:var(--warn);font-size:.9em}

/* ── Raster (Timetable) ──────────────────────────────────── */
.grid-scroll{
  overflow:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);-webkit-overflow-scrolling:touch;
}
.grid{
  display:grid;position:relative;
  grid-template-columns:52px repeat(var(--stages),minmax(126px,1fr));
  min-width:max-content;
}
.gh{
  position:sticky;top:0;z-index:6;
  background:#150e22;border-bottom:1px solid var(--line);
  padding:9px 6px;text-align:center;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gc,var(--text));
  box-shadow:inset 0 -2px 0 var(--gc,transparent);
}
.gh.corner{left:0;z-index:8;box-shadow:none;background:#150e22}
.gcol{position:relative;border-left:1px solid var(--line)}
.gaxis{
  position:sticky;left:0;z-index:5;background:#150e22;
  border-right:1px solid var(--line);
}
.gtick{
  position:absolute;left:0;right:0;
  font-size:.66rem;color:var(--dim);font-variant-numeric:tabular-nums;
  padding-left:6px;transform:translateY(-.5em);
}
.gline{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.05)}
.gline.hour{border-top-color:rgba(255,255,255,.1)}

.gset{
  position:absolute;left:3px;right:3px;
  border-radius:9px;padding:5px 7px;overflow:hidden;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 15%,#180f28);
  color:var(--text);text-align:left;font:inherit;
  display:flex;flex-direction:column;gap:1px;
  transition:background .13s,border-color .13s;
}
.gset:hover{background:color-mix(in srgb,var(--c) 26%,#180f28)}
.gset:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.gset .a{
  font-size:.82rem;font-weight:600;line-height:1.18;
  overflow:hidden;overflow-wrap:anywhere;
}
.gset .t{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.gset.picked{
  background:color-mix(in srgb,var(--c) 40%,#180f28);
  border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;
}
.gset.picked .a::after{content:" ★";color:var(--warn)}
.gset.past{opacity:.42}
.gset.live{
  box-shadow:0 0 0 2px var(--c), 0 0 18px color-mix(in srgb,var(--c) 55%,transparent);
  z-index:3;
}

.nowline{
  position:absolute;left:0;right:0;height:2px;background:var(--accent);
  z-index:4;pointer-events:none;box-shadow:0 0 10px var(--accent);
}
.nowline::before{
  content:"";position:absolute;left:0;top:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--accent);
}

/* ── Plan ────────────────────────────────────────────────── */
.plan-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.btn{
  border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:10px;padding:8px 13px;font:inherit;font-size:.83rem;font-weight:600;
  cursor:pointer;transition:background .14s,border-color .14s;
}
.btn:hover{background:var(--card-2);border-color:#4a3468}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-danger:hover{border-color:var(--danger);color:var(--danger)}

.empty{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:30px 20px;text-align:center;color:var(--muted);
}
.empty h3{margin:0 0 7px;color:var(--text);font-size:1.02rem}
.empty p{margin:0;font-size:.87rem}

.plan-list{display:grid;gap:9px}
.pitem{
  --c:var(--accent);
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:11px;padding:11px 13px;background:var(--card);
}
.pitem.past{opacity:.5}
.pitem.live{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--card))}
.ptime{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pmain{min-width:0}
.partist{font-weight:600;font-size:1.04rem;line-height:1.25;overflow-wrap:anywhere}
.pstage{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.pbadge{
  font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:2px 7px;white-space:nowrap;
}
.pbadge.live{background:var(--c);color:#fff;font-weight:700}
.pbadge.clash{background:rgba(251,93,93,.16);color:var(--danger);border:1px solid rgba(251,93,93,.42)}
.premove{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:1.15rem;line-height:1;padding:4px 6px;border-radius:8px;
}
.premove:hover{color:var(--danger);background:rgba(251,93,93,.1)}

.clash-note{
  border:1px solid rgba(251,93,93,.35);background:rgba(251,93,93,.09);
  color:#ffc9c9;border-radius:11px;padding:10px 13px;margin:0 0 13px;font-size:.83rem;
}
.plan-gap{
  text-align:center;color:var(--dim);font-size:.72rem;
  letter-spacing:.07em;padding:1px 0;
}

.foot{
  padding:22px var(--pad) 8px;text-align:center;
  color:var(--dim);font-size:.74rem;
}
.foot p{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Freunde ─────────────────────────────────────────────── */
.join{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:16px;display:grid;gap:7px;margin:0 0 14px;
}
.join h3{margin:0;font-size:1.02rem}
.join p{margin:0 0 4px;color:var(--muted);font-size:.85rem}
.join label{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.join input{
  width:100%;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);
  font:inherit;font-size:.95rem;
}
.join input:focus{outline:2px solid var(--accent);outline-offset:1px}
.join .btn{margin-top:5px}
.join-msg{font-size:.8rem;color:var(--muted);min-height:1.2em}

.crew-list{display:grid;gap:9px}
@media(min-width:720px){.crew-list{grid-template-columns:repeat(2,1fr)}}

.citem{
  --c:var(--line);
  border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:11px;padding:11px 13px;background:var(--card);
  display:grid;gap:5px;
}
.citem.live{background:color-mix(in srgb,var(--c) 11%,var(--card))}
.chead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cname{font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.cyou{
  margin-left:7px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:1px 6px;
  font-weight:600;vertical-align:middle;
}
.cnow,.cnext{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;font-size:.88rem}
.cnext{padding-top:5px;border-top:1px solid var(--line)}
.cartist{font-weight:600;overflow-wrap:anywhere}
.cstage{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.cmeta{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.cidle{color:var(--dim);font-size:.86rem}