/* ========================== Basel Tram · Polished ========================== */
:root{
  --bg:#0a0b1a;        /* Background */
  --bg-2:#0f1230;
  --surface:#121637;   /* Cards */
  --surface-2:#191e49; /* Header/Table head */
  --text:#f4f6ff;      /* Body text */
  --text-strong:#ffffff; /* Headlines on dark */
  --muted:#98a3c9;
  --border:#2b3270;
  --accent-1:#7afcff;  /* ice blue */
  --accent-2:#b97aff;  /* violet */
  --accent-3:#ff59c7;  /* pink */
  --tram:#00a86b;      /* Drämmli Grün */
  --ok:#5bd9a6;
  --shadow:0 10px 28px rgba(0,0,0,.32);
  --radius:16px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fbfbfe;
    --bg-2:#f2f4ff;
    --surface:#ffffff;
    --surface-2:#f6f8ff;
    --text:#0b1430;
    --text-strong:#0b1430;
    --muted:#5a6a8f;
    --border:#d8def0;
    --shadow:0 10px 22px rgba(16,28,66,.08);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans";
  letter-spacing:.2px;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:var(--accent-1); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1120px; margin:0 auto; padding:20px clamp(16px,3.5vw,28px); }

/* A11y helpers */
.skip-link{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:var(--surface); color:var(--text); border-radius:10px; border:1px solid var(--border); z-index:9999; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }

/* ========================== Header / Hero ========================== */
header{
  position:sticky; top:0; z-index:10;
  background: color-mix(in oklab,var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:0; /* Linie unter der Suche entfernt */
}
.brand{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; padding-block:8px 2px; }
.badge{
  position:relative; width:40px; height:40px; border-radius:12px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface-2) 90%, transparent),
    color-mix(in oklab, var(--surface) 82%, transparent)
  );
  border:1px solid color-mix(in oklab,var(--accent-2) 42%, var(--border));
  box-shadow: 0 1px 8px rgba(0,0,0,.18);
  display:grid; place-items:center; overflow:hidden;
}
.badge::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none; }
.badge .eq{ height:20px; gap:4px; }
.badge .eq span{ width:4px; height:8px; box-shadow:0 0 6px rgba(122,252,255,.45); }

h1{
  font-size:clamp(24px,3vw,36px);
  margin:0 0 4px; line-height:1.15; letter-spacing:.2px; color:var(--text-strong);
  text-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 22px color-mix(in oklab, var(--accent-2) 45%, transparent);
}
.sub{ color:var(--muted); font-size:14px; margin:0; }

.stats{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.stat{ background: linear-gradient(180deg, color-mix(in oklab,var(--surface) 96%, transparent), color-mix(in oklab,var(--surface-2) 88%, transparent)); padding:8px 12px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); }
.stat b{ color:var(--ok); margin-right:6px; }

/* ========================== Accent line ========================== */
.tramline{ position:relative; height:12px; margin:14px 0 0; border-radius:999px; overflow:hidden; --bar-speed: 14s; background: linear-gradient(90deg, var(--accent-3) 0%, var(--accent-2) 20%, var(--accent-1) 40%, var(--tram) 60%, var(--accent-2) 80%, var(--accent-3) 100%); background-size: 200% 100%; background-repeat: repeat-x; animation: bar-sweep var(--bar-speed) linear infinite; box-shadow:0 0 14px rgba(0,168,107,.28), 0 0 10px rgba(122,252,255,.18); }
.tramline::after{ content:""; position:absolute; inset:1px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); mix-blend-mode:screen; pointer-events:none; }
@keyframes bar-sweep{ from { background-position: 200% 50%; } to { background-position: 0% 50%; } }

/* ========================== Search block ========================== */
.stage{ margin-top:14px; padding:18px; border-radius:var(--radius); background:linear-gradient(180deg, color-mix(in oklab,var(--surface) 94%, transparent), color-mix(in oklab,var(--surface-2) 92%, transparent)); border:1px solid var(--border); box-shadow:0 10px 36px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04); }
.toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.search{ position:relative; flex:1 1 460px; max-width:820px; }
.search input[type="search"]{ width:100%; padding:15px 48px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); outline:none; transition:box-shadow .18s ease,border-color .18s ease, transform .06s ease; }
.search input[type="search"]::placeholder{ color:color-mix(in oklab,var(--muted) 88%, transparent); }
.search input[type="search"]:focus{ box-shadow:0 0 0 4px color-mix(in oklab,var(--accent-1) 28%, transparent); border-color: color-mix(in oklab,var(--accent-1) 55%, var(--border)); }
.search input[type="search"]:active{ transform:translateY(1px); }
.search .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.85; }
.search .clear{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); padding:6px; border-radius:10px; cursor:pointer; }
.search .clear:hover{ color:var(--text); background: color-mix(in oklab,var(--accent-2) 18%, transparent); box-shadow:0 0 18px rgba(185,122,255,.25); }
.hint{ color:var(--muted); font-size:12px; }
kbd{ font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:6px; }

/* ========================== Results ========================== */
.results-head{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.results-head .right{ color:var(--muted); font-size:13px; }
.status{ margin-top:6px; color:var(--muted); font-size:13px; min-height:18px; }

.tablewrap{
  max-height:65vh;                 /* Desktop-Begrenzung – BLEIBT */
  overflow:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  position:relative;
}
.tablewrap[aria-busy="true"]::after{
  content:"Lade Katalog…"; position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.22));
  color:var(--muted); font-size:14px;
}
table{ width:100%; border-collapse:collapse; }
caption{ caption-side:top; }
thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2); border-bottom:1px solid var(--border); text-align:left; padding:10px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
tbody td{ padding:10px; border-bottom:1px solid color-mix(in oklab,var(--border) 60%, transparent); }
tbody tr:hover{ background: color-mix(in oklab,var(--accent-2) 14%, transparent); }
.col-num{ width:64px; text-align:right; color:var(--muted); }
.col-year{ width:80px; text-align:right; }

.empty{ display:none; padding:22px; color:var(--muted); }
.empty strong{ color:var(--text); }

/* Equalizer global */
.eq{ display:flex; gap:3px; align-items:flex-end; height:16px; }
.eq span{ display:block; width:3px; border-radius:2px; background: linear-gradient(180deg, var(--accent-1), var(--accent-3)); height:6px; animation: bounce 1s ease-in-out infinite; box-shadow:0 0 8px rgba(122,252,255,.5); }
.eq span:nth-child(2){ animation-delay:.1s; }
.eq span:nth-child(3){ animation-delay:.2s; }
.eq span:nth-child(4){ animation-delay:.3s; }
.eq span:nth-child(5){ animation-delay:.4s; }
@keyframes bounce{ 0%,100%{height:6px} 50%{height:16px} }

/* Skeleton while loading */
.skeleton-row td{ position:relative; overflow:hidden; height:40px; }
.skeleton-row td::before{ content:""; position:absolute; inset:10px; border-radius:8px; background: linear-gradient(90deg, color-mix(in oklab,var(--surface-2) 65%, transparent) 0%, color-mix(in oklab,var(--surface-2) 85%, transparent) 50%, color-mix(in oklab,var(--surface-2) 65%, transparent) 100%); transform:translateX(-100%); animation:shimmer 1.2s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* Responsive tweaks */
@media (max-width:720px){
  .brand{ grid-template-columns:auto 1fr; gap:12px; }
  .col-year, th#thYear{ display:none; }
  .wrap{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .tramline{ background-position:0% 50% !important; }
}

/* ========================== CTA & Feintuning ========================== */

/* Linie unter der Suchleiste – sicherheitshalber alle Varianten ausblenden */
main > hr{ display:none !important; }
.section::before, .results-separator{ display:none !important; }

/* Nur die Ergebnisliste darf scrollen */
#tablewrap{ overscroll-behavior: contain; will-change: max-height; }

/* Floating Wunschbox CTA – mittig unten (Basis) */
:root{ --fab-space: 92px; }
.wish-fab{
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 1000;
  transition: transform .22s ease, opacity .18s ease;
}
.wish-fab.is-hidden{
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.wish-fab .wish-note{ color: var(--muted); font-size: 12px; max-width: 360px; }
.wish-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; text-decoration:none;
  padding:.7rem 1rem; border-radius:12px; color:#fff;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 8px 26px rgba(124,58,237,.25);
}
.wish-btn:hover{ filter:saturate(1.06); }

/* >>> Mobile-Only Addons (Desktop bleibt 1:1) <<< */
@media (max-width: 900px){
  /* Header kompakter */
  .wrap{ padding:16px; }
  header .brand{ gap:12px; }
  header .stats{ margin-top:8px; }
  header .stage{ margin-top:10px; padding:14px; }
  .search input[type="search"]{ padding:12px 44px; font-size:15px; }
  /* Tipps mobil komplett ausblenden */
  .hint, .tips, .search-tip, .tip-row, .hint-row, .search .help, .search .hint { display:none !important; }

  /* Liste: statt max-height eine exakte Höhe; wird per JS in --resultsH gesetzt */
  .tablewrap{
    max-height:none !important;
    height: var(--resultsH, 60vh) !important;
  }

  /* Nur die Liste bekommt unten Platz, damit der FAB nichts verdeckt */
  #tablewrap{
    padding-bottom: calc(var(--fab-space) - 18px);
    scroll-padding-bottom: calc(var(--fab-space) - 18px);
  }

  /* FAB etwas kompakter */
  .wish-fab{
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px; padding: 10px 12px;
    max-width: calc(100% - 24px);
  }
  .wish-btn{ padding:.6rem .9rem; font-size:14px; }
  .wish-note{ font-size:12px; }
}
/* === Fix 1: durchgehender Hintergrund (Header transparent) === */
header{
  /* Glas-Effekt abschalten und keine eigene Fläche einfärben */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* === Fix 2+3: Mobile optimieren (weniger Abstände, kleinere Trefferzeile) === */
@media (max-width: 900px){

  /* Tram-Linie schlanker + näher an die Suche */
  .tramline{
    height: 6px !important;
    margin: 8px 0 0 !important;
  }

  /* Suchkarte kompakter */
  header .stage{
    margin-top: 8px !important;
    padding: 10px 12px !important;
  }

  /* Abstände zum Ergebnisbereich reduzieren */
  .results-head{
    margin-top: 8px !important;
    font-size: 12px !important;   /* Treffer-Zeile kleiner */
    line-height: 1.2 !important;
  }
  .results-head .right{           /* ms/Performance rechts noch kleiner */
    font-size: 11px !important;
  }

  /* Liste rückt näher, ohne Weißraum zwischen Suchkarte und Tabelle */
  .status{ margin-top: 4px !important; }

  /* Ergebnisliste füllt den Screen besser (Resthöhe kommt weiterhin aus JS) */
  #tablewrap{
    padding-top: 4px !important;
  }
}


/* === Authoritative toggles to avoid duplicates === */
.title-mobile, .sub-mobile, .label-mobile, .note-mobile, .word-songs { display: none !important; }
@media (max-width: 960px){
  .title-full, .sub-full, .label-full, .note-full, .word-katalog { display: none !important; }
  .title-mobile, .sub-mobile, .label-mobile, .note-mobile, .word-songs { display: inline !important; }
  .brand h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}



/* Ensure desktop shows full phrase */
.word-songs{ display:inline !important; }
.word-katalog{ display:inline !important; }

@media (max-width: 960px){
  /* Mobile: keep only 'Songs' */
  .word-katalog{ display:none !important; }
  .word-songs{ display:inline !important; }
}


/* sitewide legal link */
.legal-link{position:fixed;right:12px;bottom:10px;z-index:9999;font-size:12px;opacity:.7}
.legal-link a{text-decoration:none;border-bottom:1px dotted currentColor}
.legal-link:hover{opacity:1}