:root{
  /* Farben aus dem Auftritt von Festival und Verein: Säuregelb, Grün, Orange
     und Altrosa auf fast Schwarz. Der Grundton ist warm gehalten, sägemehlig,
     nicht das olivgrüne Militärschwarz des alten Flugplatz-Themas. */
  --ink:#0A0907; --ink2:#141110; --card:#191512; --line:#2C2622; --line2:#443C34;
  --signal:#F3FF02; --green:#37CE8D; --warn:#F2542D; --orange:#FF7600; --rose:#FECECF;
  --text:#EFEAE2; --dim:#B5ABA0; --muted:#8B8177;
  --signal-bg:#2B2C05; --warn-line:#6B3020; --green-line:#1F6047;
  --f-terminal:#F3FF02; --f-radar:#37CE8D; --f-loesch:var(--orange); --f-kies:#FECECF;
  --f-yum:#F56BA8; --f-trancer:#7FB2FF; --f-kultur:#D9D2C4;
  --disp:'Space Grotesk',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace; --body:'Inter',system-ui,sans-serif;
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px);
  /* iOS meldet unten einen Sicherheitsbereich für den Home-Indikator, je nach Gerät
     34px oder mehr. Voll angewandt schwebt die Leiste in der installierten App.
     Gedeckelt auf höchstens 12px sitzt die Beschriftung 20px über dem Rand, egal
     was das Gerät meldet. In Safari ist der Bereich 0, dort ändert sich nichts. */
  --navsafe:min(var(--safeB), 8px);
  --nav:52px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;background:var(--ink);color-scheme:dark}
/* Die Höhe kommt in zwei Stufen, die letzte gültige gewinnt: dvh als dynamische
   Bildschirmhöhe, darüber der zur Laufzeit ermittelte Wert in --appH. Grund: iOS
   meldet in der installierten App dauerhaft eine zu kleine Höhe, am Gerät 812 bei
   874 Bildschirm. assets/app.js erkennt das und setzt --appH auf die Bildschirmhöhe.
   Wichtig dabei: bottom:auto statt inset:0. Sonst würde die Unterkante am gemeldeten
   Sichtbereich kleben und die Höhe hätte keine Wirkung. */
#app{position:fixed;top:0;left:0;right:0;bottom:auto;height:100dvh;height:var(--appH,100dvh);
     display:flex;flex-direction:column;background:var(--ink);color:var(--text);
     font-family:var(--body);touch-action:manipulation}
a{color:inherit}
button{font:inherit}
::-webkit-scrollbar{width:0;height:0}

/* ---------- Kopf ---------- */
header.top{flex:0 0 auto;padding:calc(var(--safeT) + 8px) 13px 5px;background:var(--ink);position:relative}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--line2);
  -webkit-mask:linear-gradient(135deg,#000 25%,#0000 25%) 0 0/10px 10px repeat-x,linear-gradient(225deg,#000 25%,#0000 25%) 0 0/10px 10px repeat-x;
  mask:linear-gradient(135deg,#000 25%,#0000 25%) 0 0/10px 10px repeat-x,linear-gradient(225deg,#000 25%,#0000 25%) 0 0/10px 10px repeat-x}
.top-row{display:flex;align-items:center;gap:10px;padding-bottom:8px}
.badge-id{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1;color:var(--ink);background:var(--signal);border:0;border-radius:3px;padding:6px 8px 5px;letter-spacing:-.01em;cursor:pointer}
.top-txt{flex:1;min-width:0}
.top-txt b{display:block;font-family:var(--disp);font-size:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.1}
.top-txt span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die Messzeile darf umbrechen, sonst schneidet sie genau die Zahlen ab, um die es geht. */
.top-txt span.mess{white-space:normal;overflow:visible;font-size:9px;line-height:1.35;letter-spacing:.02em}
.top-txt span b{display:inline;color:var(--green);font-family:var(--mono);font-size:9.5px;letter-spacing:.05em}

/* ---------- Scrollbereich ---------- */
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 13px calc(var(--nav) + var(--navsafe) + 18px)}
main.nopad{padding-bottom:0;overflow:hidden}
.sticky{position:sticky;top:0;z-index:20;background:var(--ink);padding-top:9px;margin:0 -13px;padding-left:13px;padding-right:13px}

/* ---------- Tage ---------- */
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:7px}
.day{background:var(--ink2);border:1.5px solid var(--line);border-radius:7px;padding:6px 3px;text-align:center;cursor:pointer}
.day em{display:block;font-family:var(--mono);font-size:8.5px;color:var(--muted);font-style:normal;letter-spacing:.08em}
.day strong{display:block;font-family:var(--disp);font-size:21px;font-weight:700;line-height:1.05}
.day[aria-selected="true"]{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.day[aria-selected="true"] em{color:var(--ink);opacity:.7}

/* ---------- Filterzeile ---------- */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin:0 -13px;padding-left:13px;padding-right:13px;scrollbar-width:none}
.chip{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:6px 10px;border-radius:20px;border:1.5px solid var(--line);background:var(--ink2);color:var(--muted);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--text);color:var(--text)}
.chip.k-top[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}
.chip.k-nope[aria-pressed="true"]{border-color:var(--warn);color:var(--warn)}
.chip.k-crew[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.searchwrap{display:flex;gap:6px;padding-bottom:8px}
.search{flex:1;background:var(--ink2);border:1.5px solid var(--line);border-radius:7px;color:var(--text);font-family:var(--mono);font-size:16px;padding:8px 10px}
.search::placeholder{color:var(--muted)}
.count{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;padding-bottom:8px}

/* ---------- Liste ---------- */
.slot{display:grid;grid-template-columns:50px 1fr;gap:8px;margin-bottom:6px}
.time{font-family:var(--mono);font-size:12.5px;font-weight:600;padding-top:10px}
.time small{display:block;font-size:9.5px;color:var(--muted);font-weight:400}
.card{background:var(--card);border:1.5px solid var(--line);border-left-width:5px;border-radius:9px;overflow:hidden}
.card.dim{opacity:.42}
.card-head{width:100%;background:none;border:0;color:inherit;text-align:left;padding:9px 10px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.card-main{flex:1;min-width:0}
.act{font-family:var(--disp);font-size:20px;font-weight:600;line-height:1.12}
.meta{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px;letter-spacing:.02em}
.gen{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.35}
.badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;padding:3px 6px;border-radius:4px;border:1px solid;white-space:nowrap}
.b-top{background:var(--signal);color:var(--ink);border-color:var(--signal);font-weight:600}
.b-passt{color:var(--text);border-color:var(--line2)}
.b-grenz{color:var(--muted);border-color:var(--line2);border-style:dashed}
.b-nope{color:var(--warn);border-color:var(--warn-line)}
.body{padding:0 10px 11px;border-top:1px solid var(--line)}
.body h4{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:10px 0 4px;font-weight:500}
.body p{margin:0;font-size:13px;line-height:1.5}
.why{border-left:2px solid var(--signal);padding-left:9px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lk{font-family:var(--mono);font-size:11px;line-height:1.2;text-decoration:none;border:1.5px solid var(--line2);border-radius:6px;padding:8px 11px;color:var(--text);background:var(--ink2);-webkit-appearance:none;appearance:none;cursor:pointer}
.lk[aria-pressed="true"]{border-color:var(--signal);color:var(--signal);background:var(--signal-bg)}
.lk.play{border-color:var(--green);color:var(--green)}
.player{margin-top:10px;border:1.5px solid var(--line);border-radius:7px;overflow:hidden;background:var(--ink)}
.player iframe{display:block;width:100%;border:0}
.clash{font-family:var(--mono);font-size:9.5px;color:var(--warn);margin-top:5px}
.plan-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:5px;vertical-align:middle}
.crewline{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.who{font-family:var(--mono);font-size:9px;border:1px solid var(--line2);border-radius:11px;padding:2px 7px;color:var(--text)}
.who.me{border-color:var(--signal);color:var(--signal)}
.who.no{border-color:var(--warn-line);color:var(--warn)}
.empty{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:26px 0;text-align:center;line-height:1.7}

/* ---------- Entdecken ---------- */
.swipewrap{height:100%;display:flex;flex-direction:column;padding-bottom:calc(var(--nav) + var(--navsafe) + 8px)}
.swipetop{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:8px 0 6px;font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.06em}
/* Der Stapel braucht eine echte Höhe. Ohne die Zeile fällt die <section> auf
   Inhaltshöhe zurück, .swipewrap{height:100%} greift ins Leere und der Stapel
   wird 0 Pixel hoch. Die Karten liegen absolut darin und verschwinden mit. */
#viewSwipe{height:100%}
.deck{position:relative;flex:1 1 auto;min-height:0;touch-action:pan-y}
.swipecard{position:absolute;inset:0;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:var(--card);border:1.5px solid var(--line);border-left-width:5px;border-radius:14px;padding:14px;display:flex;flex-direction:column;overflow:hidden}
.swipecard.behind{transform:scale(.96) translateY(8px);opacity:.45}
.sc-when{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em}
.sc-name{font-family:var(--disp);font-size:clamp(26px,7.2vw,36px);font-weight:700;line-height:1.02;margin:4px 0 2px}
.sc-genre{font-size:12.5px;color:var(--rose);margin-bottom:7px}
.sc-desc{font-size:13px;line-height:1.45;flex:1 1 auto;min-height:0;overflow:auto}
.sc-tags{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.05em;border:1px solid var(--line2);border-radius:12px;padding:2px 7px;color:var(--muted)}
.tag.hot{border-color:var(--signal);color:var(--signal)}
.tag.cold{border-color:var(--warn-line);color:var(--warn)}
.stamp{position:absolute;top:14px;font-family:var(--disp);font-size:28px;font-weight:700;border:3px solid;border-radius:8px;padding:1px 10px;opacity:0;pointer-events:none;z-index:3}
.stamp.yes{left:13px;color:var(--green);border-color:var(--green);transform:rotate(-12deg)}
.stamp.no{right:13px;color:var(--warn);border-color:var(--warn);transform:rotate(12deg)}
.scplayer{flex:0 0 auto;margin-top:8px;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:var(--ink)}
.scplayer iframe{display:block;width:100%;border:0;height:120px}
.scbar{display:flex;align-items:center;gap:7px;padding:6px 8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.scbar button{background:none;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-family:var(--mono);font-size:10px;padding:9px 10px;cursor:pointer}
.scbar button[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.scbar button:disabled{opacity:.55}
.acts{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding-top:9px}
.act-btn{font-family:var(--disp);font-size:17px;letter-spacing:.05em;padding:13px 6px;border-radius:10px;border:1.5px solid;background:var(--ink2);cursor:pointer}
.act-no{color:var(--warn);border-color:var(--warn-line)}
.act-yes{color:var(--green);border-color:var(--green-line)}
.act-later{color:var(--muted);border-color:var(--line2);font-size:15px;padding-left:18px;padding-right:18px;white-space:nowrap}
/* Das Zurücknehmen sitzt bewusst oben und weit weg von NÖ, SPÄTER und JA.
   Als Knopf in der Reihe wurde es für Überspringen gehalten und hat dabei
   ungewollt Bewertungen gelöscht. */
.swipetop .undo{background:none;border:1px solid var(--line2);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:4px 8px;cursor:pointer}
.swipetop .undo:active{color:var(--text);border-color:var(--text)}
.act-btn:disabled{opacity:.35}

/* ---------- Panels ---------- */
.panel{border:1.5px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;background:var(--ink2)}
.panel h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase;margin:0 0 9px;font-weight:500}
.lead{font-size:12.5px;color:var(--dim);line-height:1.5;margin:8px 0}
.bars{display:flex;flex-direction:column;gap:5px}
.bar{display:grid;grid-template-columns:70px 1fr 28px;align-items:center;gap:7px;font-family:var(--mono);font-size:10px}
.track{height:6px;background:var(--ink2);border-radius:4px;position:relative;overflow:hidden}
.fill{position:absolute;top:0;bottom:0;border-radius:4px}
.num{color:var(--muted);text-align:right}
.reco,.crewrow{display:grid;grid-template-columns:1fr auto;gap:9px;padding:8px 0;border-top:1px solid var(--line);align-items:center}
.reco:first-of-type,.crewrow:first-of-type{border-top:0}
.reco b,.crewrow b{font-family:var(--disp);font-size:18px;font-weight:600;display:block;line-height:1.15}
.reco em,.crewrow em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--muted);display:block;margin-top:2px}
.val{font-family:var(--mono);font-size:11px;color:var(--signal)}
.cnt{font-family:var(--disp);font-size:21px;color:var(--green)}
.cnt.solo{color:var(--muted)}
.field{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:8px;margin-bottom:7px}
.field label{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.field input{background:var(--ink);border:1.5px solid var(--line);border-radius:7px;color:var(--text);font-family:var(--mono);font-size:16px;padding:9px 10px;width:100%}
.warnbox{border:1.5px solid var(--warn-line);border-radius:10px;padding:11px 12px;margin:10px 0;background:var(--ink2)}
.warnbox p{margin:0;font-size:12.5px;line-height:1.5;color:var(--dim)}
.warnbox b{color:var(--text)}
.lk-warn{border-color:var(--warn);color:var(--warn)}
.msg{font-family:var(--mono);font-size:10px;margin-top:8px;color:var(--muted);line-height:1.6}
.msg.ok{color:var(--green)} .msg.err{color:var(--warn)}

/* ---------- Bottom-Navigation ---------- */
nav{position:absolute;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,1fr);
    background:rgba(10,9,7,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding-bottom:var(--navsafe)}
nav button{background:none;border:0;color:var(--muted);padding:9px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav span{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em}
nav button[aria-selected="true"]{color:var(--signal)}
nav .pip{position:absolute;top:5px;right:calc(50% - 22px);width:6px;height:6px;border-radius:50%;background:var(--green)}
nav button{position:relative}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}