:root {
  --bg: #151b28; --karte: #1d2535; --rand: #2b3650; --text: #e8ebf2; --leise: #94a0b8;
  --akzent: #f59e0b; --akzent2: #fbbf24; --rot: #ef4444; --gruen: #34d399;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
body { min-height: 100vh; background: radial-gradient(900px 500px at 80% -10%, rgba(245, 158, 11, .16), transparent 60%), var(--bg); }
main { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
svg { width: 22px; height: 22px; fill: currentColor; display: block; }
[hidden] { display: none !important; }

header { display: flex; align-items: center; gap: 12px; margin: 4px 2px 16px; }
.logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #2a1206; background: linear-gradient(135deg, var(--akzent2), #b45309); flex: none; }
.kopf { flex: 1; min-width: 0; }
h1 { font-size: 20px; margin: 0; }
header p { margin: 1px 0 0; color: var(--leise); font-size: 13px; }
h2 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--leise); margin: 0 0 10px; font-weight: 600; }
.marke { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--rand); color: var(--leise); white-space: nowrap; }
.marke.an { background: rgba(52, 211, 153, .16); color: var(--gruen); }
.marke.aus { background: rgba(239, 68, 68, .16); color: #fca5a5; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.jetzt { display: flex; gap: 14px; align-items: center; }
.jetzt img { width: 112px; height: 63px; object-fit: cover; border-radius: 10px; flex: none; background: #0f1420; }
.info { flex: 1; min-width: 0; }
.titel { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kuenstler { color: var(--leise); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sprung { display: block; width: 100%; margin: 9px 0 0; height: 20px; accent-color: var(--akzent); cursor: pointer; }
.sprung:disabled { cursor: default; opacity: .45; }
.zeiten { display: flex; justify-content: space-between; color: var(--leise); font-size: 11.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; justify-content: space-between; }
.knoepfe { display: flex; align-items: center; gap: 10px; }
button { font: inherit; color: var(--text); background: var(--rand); border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: background .12s, transform .05s; }
button:hover { background: #36435f; }
button:active { transform: scale(.96); }
button:disabled { opacity: .5; cursor: default; }
.knoepfe button { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.knoepfe .gross { width: 58px; height: 58px; background: linear-gradient(135deg, var(--akzent2), var(--akzent)); color: #2a1206; }
.knoepfe .gross svg { width: 28px; height: 28px; }
.laut { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; color: var(--leise); }
.laut input { flex: 1; accent-color: var(--akzent); height: 22px; }
#volz { width: 28px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }

#suchform, #torform { display: flex; gap: 8px; }
input[type=text] { flex: 1; min-width: 0; font: inherit; color: var(--text); background: #121826; border: 1px solid var(--rand); border-radius: 12px; padding: 11px 13px; outline: none; }
input[type=text]:focus { border-color: var(--akzent); }
input.voll { width: 100%; display: block; }
#bib { max-height: 340px; overflow-y: auto; }
#suchform button, #torform button { background: var(--akzent); color: #2a1206; font-weight: 600; }
.hinweis { color: var(--leise); font-size: 13px; margin: 8px 2px 0; min-height: 0; }
.hinweis:empty { display: none; }
.hinweis.fehler { color: #fca5a5; }

.liste { list-style: none; margin: 8px 0 0; padding: 0; }
.liste:empty { display: none; }
.liste li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--rand); }
.liste li:first-child { border-top: 0; }
.liste img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; background: #0f1420; }
.liste .text { flex: 1; min-width: 0; }
.liste .t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .k { font-size: 12px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .d { font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; flex: none; }
.liste button { padding: 7px 10px; font-size: 13px; border-radius: 10px; flex: none; }
.liste button.haupt { background: var(--akzent); color: #2a1206; font-weight: 600; }
.liste li.laeuft .t { color: var(--akzent2); font-weight: 600; }
.liste .nr { width: 20px; text-align: right; color: var(--leise); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }

.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.kopfzeile h2 { margin: 0; }
.schalter { display: flex; gap: 6px; flex-wrap: wrap; }
.schalter button { padding: 6px 11px; font-size: 12.5px; border-radius: 99px; }
.schalter button.an { background: var(--akzent); color: #2a1206; font-weight: 600; }
.liste button.weg { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--leise); }
.liste button.weg:hover { background: rgba(239, 68, 68, .25); color: #fecaca; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border-radius: 99px; padding: 8px 14px; font-size: 13px; }

footer { color: var(--leise); font-size: 12px; text-align: center; margin-top: 18px; }

.meldung { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100% - 32px); background: #0f1420; border: 1px solid var(--rand); color: var(--text); padding: 11px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); z-index: 5; }
.meldung.fehler { border-color: var(--rot); color: #fecaca; }

.tor { position: fixed; inset: 0; background: rgba(10, 14, 22, .88); display: grid; place-items: center; padding: 16px; z-index: 10; }
#torform { flex-direction: column; width: 100%; max-width: 380px; gap: 10px; margin: 0; }
#torform p { margin: 0; color: var(--leise); font-size: 13.5px; }

@media (max-width: 460px) {
  .jetzt img { width: 84px; height: 47px; }
  .liste img { display: none; }
  .steuerung { justify-content: center; }
}