/* Musik-Support. Angelehnt an das Atlassian Design System (Jira):
   Farben und Abstaende als Tokens, hell und dunkel. */

:root {
  --surface: #ffffff;
  --surface-sunken: #f7f8f9;
  --surface-raised: #ffffff;
  --surface-hover: #f1f2f4;
  --surface-pressed: #dcdfe4;
  --surface-overlay: #ffffff;
  --text: #172b4d;
  --text-subtle: #44546f;
  --text-subtlest: #626f86;
  --border: #dcdfe4;
  --border-input: #8590a2;
  --brand: #0c66e4;
  --brand-hover: #0055cc;
  --brand-text: #ffffff;
  --selected-bg: #e9f2ff;
  --selected-text: #0c66e4;
  --neutral-bg: #091e420f;
  --neutral-bg-hover: #091e4224;
  --grau-bg: #dcdfe4;
  --grau-text: #44546f;
  --blau-bg: #cce0ff;
  --blau-text: #0055cc;
  --gruen-bg: #baf3db;
  --gruen-text: #216e4e;
  --lila-bg: #dfd8fd;
  --lila-text: #5e4db2;
  --gelb-bg: #f8e6a0;
  --gelb-text: #7f5f01;
  --rot-bg: #ffd5d2;
  --rot-text: #ae2e24;
  --fokus: #388bff;
  --schatten: 0 1px 1px #091e4240, 0 0 1px #091e424f;
  --schatten-hoch: 0 8px 12px #091e4226, 0 0 1px #091e424f;
  --radius: 8px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --topnav-h: 56px;
  --mini-h: 0px;
  --tabs-h: 0px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1d2125;
    --surface-sunken: #161a1d;
    --surface-raised: #22272b;
    --surface-hover: #282e33;
    --surface-pressed: #333b43;
    --surface-overlay: #282e33;
    --text: #b6c2cf;
    --text-subtle: #9fadbc;
    --text-subtlest: #8c9bab;
    --border: #a6c5e229;
    --border-input: #738496;
    --brand: #579dff;
    --brand-hover: #85b8ff;
    --brand-text: #1d2125;
    --selected-bg: #1c2b41;
    --selected-text: #579dff;
    --neutral-bg: #a1bdd914;
    --neutral-bg-hover: #a6c5e229;
    --grau-bg: #454f59;
    --grau-text: #b6c2cf;
    --blau-bg: #09326c;
    --blau-text: #85b8ff;
    --gruen-bg: #164b35;
    --gruen-text: #7ee2b8;
    --lila-bg: #352c63;
    --lila-text: #b8acf6;
    --gelb-bg: #533f04;
    --gelb-text: #f5cd47;
    --rot-bg: #5d1f1a;
    --rot-text: #fd9891;
    --fokus: #85b8ff;
    --schatten: 0 0 0 1px #bcd6f00a, 0 1px 1px #03040442, 0 0 1px #03040480;
    --schatten-hoch: 0 0 0 1px #bcd6f00a, 0 8px 12px #0304045c, 0 0 1px #03040480;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --surface: #1d2125;
    --surface-sunken: #161a1d;
    --surface-raised: #22272b;
    --surface-hover: #282e33;
    --surface-pressed: #333b43;
    --surface-overlay: #282e33;
    --text: #b6c2cf;
    --text-subtle: #9fadbc;
    --text-subtlest: #8c9bab;
    --border: #a6c5e229;
    --border-input: #738496;
    --brand: #579dff;
    --brand-hover: #85b8ff;
    --brand-text: #1d2125;
    --selected-bg: #1c2b41;
    --selected-text: #579dff;
    --neutral-bg: #a1bdd914;
    --neutral-bg-hover: #a6c5e229;
    --grau-bg: #454f59;
    --grau-text: #b6c2cf;
    --blau-bg: #09326c;
    --blau-text: #85b8ff;
    --gruen-bg: #164b35;
    --gruen-text: #7ee2b8;
    --lila-bg: #352c63;
    --lila-text: #b8acf6;
    --gelb-bg: #533f04;
    --gelb-text: #f5cd47;
    --rot-bg: #5d1f1a;
    --rot-text: #fd9891;
    --fokus: #85b8ff;
    --schatten: 0 0 0 1px #bcd6f00a, 0 1px 1px #03040442, 0 0 1px #03040480;
    --schatten-hoch: 0 0 0 1px #bcd6f00a, 0 8px 12px #0304045c, 0 0 1px #03040480;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topnav-h) + 12px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 14px/20px Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: calc(var(--mini-h) + var(--tabs-h) + env(safe-area-inset-bottom));
}
body.mit-player { --mini-h: 72px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
a { color: var(--brand); text-decoration: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
h1 { font-size: 24px; line-height: 28px; font-weight: 653; margin: 4px 0 0; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 653; display: flex; align-items: center; gap: 8px; }
.r { text-align: right; }
.nur-klein { display: none; }

/* ---------- Bausteine ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 3px; border: 0;
  background: var(--neutral-bg); color: var(--text-subtle); font-weight: 500; white-space: nowrap;
  transition: background 0.1s;
}
.knopf:hover { background: var(--neutral-bg-hover); }
.knopf-primaer { background: var(--brand); color: var(--brand-text); }
.knopf-primaer:hover { background: var(--brand-hover); }
.knopf:disabled { opacity: 0.6; cursor: not-allowed; }

.lozenge {
  display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 3px;
  font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
  background: var(--grau-bg); color: var(--grau-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lozenge-blau { background: var(--blau-bg); color: var(--blau-text); }
.lozenge-gruen { background: var(--gruen-bg); color: var(--gruen-text); }
.lozenge-lila { background: var(--lila-bg); color: var(--lila-text); }
.lozenge-gelb { background: var(--gelb-bg); color: var(--gelb-text); }
.lozenge-rot { background: var(--rot-bg); color: var(--rot-text); }
.lozenge-blau-voll { background: #0c66e4; color: #fff; }

.key { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.typ-icon {
  width: 16px; height: 16px; border-radius: 3px; flex: none; display: inline-block;
  background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.5 11.3a1.6 1.6 0 1 1-1-1.48V4.8l6-1.3v6.3a1.6 1.6 0 1 1-1-1.48V6l-4 .87z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.prio-icon { width: 16px; height: 16px; flex: none; }
.prio-zelle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-subtle); white-space: nowrap; }

.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase;
  background: #8590a2; box-shadow: 0 0 0 2px var(--surface);
}
.avatar-gross { width: 32px; height: 32px; font-size: 12px; }
.av-0 { background: #1d7afc; } .av-1 { background: #22a06b; } .av-2 { background: #6e5dc6; } .av-3 { background: #e56910; }
.av-4 { background: #c9372c; } .av-5 { background: #1d9aaa; } .av-6 { background: #ae4787; } .av-7 { background: #b38600; }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); }
.person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 4px; background: var(--surface-sunken); }
.cover-leer { display: grid; place-items: center; color: rgba(255, 255, 255, 0.92); }
.cover-leer svg { width: 42%; height: 42%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.farbe-0 { background: linear-gradient(135deg, #ff7452, #8f1e44); }
.farbe-1 { background: linear-gradient(135deg, #4bce97, #0b5d63); }
.farbe-2 { background: linear-gradient(135deg, #579dff, #3d2a8f); }
.farbe-3 { background: linear-gradient(135deg, #fea362, #b0245c); }
.farbe-4 { background: linear-gradient(135deg, #f5cd47, #c25100); }
.farbe-5 { background: linear-gradient(135deg, #b8acf6, #1f3a8a); }
.farbe-6 { background: linear-gradient(135deg, #60c6d2, #155b33); }
.farbe-7 { background: linear-gradient(135deg, #f87168, #4c1d95); }

.zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 6px; border-radius: 8px; background: var(--neutral-bg); color: var(--text-subtle); font-size: 12px; font-weight: 600; }
.leer { color: var(--text-subtlest); padding: 20px 8px; text-align: center; }
.hinweis { font-size: 12px; color: var(--text-subtlest); }

/* ---------- Obere Leiste ---------- */
.topnav {
  position: sticky; top: 0; z-index: 30; height: var(--topnav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topnav-links { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-switcher { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-subtle); border-radius: 3px; }
.app-switcher svg { width: 20px; height: 20px; }
.produkt { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 653; font-size: 16px; padding: 4px 8px 4px 4px; border-radius: 3px; white-space: nowrap; }
.produkt-logo { width: 24px; height: 24px; }
.topnav-items { display: flex; gap: 4px; margin: 0 8px; }
.topnav-items > * { padding: 0 8px; height: 32px; display: inline-flex; align-items: center; color: var(--text-subtle); font-weight: 500; border-radius: 3px; position: relative; }
.topnav-items .aktiv { color: var(--selected-text); }
.topnav-items .aktiv::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -12px; height: 3px; border-radius: 3px 3px 0 0; background: var(--selected-text); }
.topnav-rechts { display: flex; align-items: center; gap: 12px; flex: none; }
.demo-label { height: 20px; padding: 0 6px; }

/* ---------- Rahmen und Seitenleiste ---------- */
.rahmen { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - var(--topnav-h)); }
.sidebar {
  position: sticky; top: var(--topnav-h); height: calc(100vh - var(--topnav-h) - var(--mini-h)); overflow-y: auto;
  background: var(--surface-sunken); border-right: 1px solid var(--border); padding: 16px 8px; display: flex; flex-direction: column; gap: 2px;
}
.projekt { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.projekt-avatar { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; background: var(--lila-bg); font-size: 17px; }
.projekt-name { font-weight: 653; color: var(--text); }
.projekt-typ { font-size: 12px; color: var(--text-subtlest); }
.sidebar-gruppe { font-size: 11px; font-weight: 653; color: var(--text-subtlest); padding: 8px 8px 4px; letter-spacing: 0.02em; }
.sidebar-link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 3px; color: var(--text-subtle); font-weight: 500; position: relative; }
.sidebar-link svg { width: 18px; height: 18px; }
.sidebar-link:hover { background: var(--neutral-bg); }
.sidebar-link.aktiv { background: var(--selected-bg); color: var(--selected-text); }
.sidebar-link.aktiv::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--selected-text); }
.sidebar-link .zaehler { margin-left: auto; background: var(--blau-bg); color: var(--blau-text); }
.sidebar-fuss { margin-top: auto; font-size: 12px; color: var(--text-subtlest); padding: 16px 8px 4px; border-top: 1px solid var(--border); }

/* ---------- Inhalt ---------- */
.inhalt { padding: 24px 32px 40px; min-width: 0; max-width: 1400px; }
.seitenkopf { margin-bottom: 20px; }
.breadcrumb { font-size: 14px; color: var(--text-subtle); }
.breadcrumb span { color: var(--text-subtlest); margin: 0 4px; }
/* Titel und Pfad in einer Zeile, Titel links: spart eine Zeile (Max, 22.10.). */
#dashboard > .seitenkopf { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; }
#dashboard > .seitenkopf h1 { margin: 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kennzahl { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--schatten); }
.kennzahl b { display: block; font-size: 20px; line-height: 24px; font-weight: 653; color: var(--text); font-variant-numeric: tabular-nums; }
.kennzahl span:not(.kz-icon) { font-size: 12px; color: var(--text-subtlest); }
.kz-icon { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.kz-icon svg { width: 18px; height: 18px; }
.kz-blau { background: var(--blau-bg); color: var(--blau-text); }
.kz-lila { background: var(--lila-bg); color: var(--lila-text); }
.kz-gruen { background: var(--gruen-bg); color: var(--gruen-text); }
.kz-orange { background: var(--gelb-bg); color: var(--gelb-text); }

.raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.spalte-haupt, .spalte-seite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.karte { background: var(--surface-raised); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px; min-width: 0; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* Freigegeben */
.release { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; margin: -8px; border-radius: 6px; cursor: pointer; }
.release:hover { background: var(--surface-hover); }
.release .cover { width: 56px; }
.release-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.release-titel { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-sub { color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Backlog als Jira-Liste */
.suche { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; width: 220px; border-radius: 3px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text-subtlest); }
.suche svg { width: 16px; height: 16px; flex: none; }
.suche input { border: 0; background: none; outline: none; min-width: 0; width: 100%; color: var(--text); }
.suche:focus-within { border-color: var(--fokus); box-shadow: inset 0 0 0 1px var(--fokus); }
.listen-kopf, .vorgang { display: grid; grid-template-columns: 24px 92px minmax(0, 1fr) 140px 112px 112px; gap: 12px; align-items: center; }
.listen-kopf { font-size: 12px; font-weight: 653; color: var(--text-subtlest); padding: 0 8px 8px; border-bottom: 2px solid var(--border); }
.vorgaenge { list-style: none; margin: 0; padding: 0; }
.vorgang { min-height: 48px; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.vorgang:hover { background: var(--surface-hover); }
.vorgang.neu-rein { animation: rein 1.2s ease-out; }
@keyframes rein { from { background: var(--selected-bg); } to { background: transparent; } }
.vorgang-titel { min-width: 0; display: flex; align-items: center; gap: 10px; }
.vorgang-titel .cover { width: 32px; flex: none; }
.vorgang-titel .cover-leer svg { width: 50%; height: 50%; }
.vorgang-text { min-width: 0; }
.vorgang-text b { display: block; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorgang-text span { display: block; font-size: 12px; color: var(--text-subtlest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorgang-meta { display: none; }
.vote {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 3px;
  border: 0; background: var(--neutral-bg); color: var(--text-subtle); font-weight: 600; font-variant-numeric: tabular-nums; transition: background 0.1s, transform 0.1s;
}
.vote svg { width: 16px; height: 16px; }
.vote:hover { background: var(--neutral-bg-hover); }
.vote:active { transform: scale(0.96); }
.vote.an { background: var(--selected-bg); color: var(--selected-text); }
.vote-gross { width: 100%; height: 40px; justify-content: center; font-size: 14px; }

/* Formular */
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.feld-name { font-size: 12px; font-weight: 653; color: var(--text-subtle); }
.pflicht { color: var(--rot-text); }
.feld input, .feld select {
  width: 100%; height: 40px; padding: 0 8px; border-radius: 3px; border: 1px solid var(--border-input);
  background: var(--surface); color: var(--text); font-size: 14px;
}
.feld input:focus, .feld select:focus { outline: none; border-color: var(--fokus); box-shadow: inset 0 0 0 1px var(--fokus); }
.feld-fest { white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 3px; background: var(--neutral-bg); color: var(--text); }
.projekt-mini { font-size: 14px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hilfe { font-size: 12px; color: var(--text-subtlest); margin: -4px 0 12px; }
.form-fuss { display: flex; justify-content: flex-end; }
.formfehler { color: var(--rot-text); font-size: 12px; min-height: 0; margin-bottom: 8px; }
.formfehler:empty { margin: 0; }

/* Meine Tickets */
.mein { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mein:first-child { padding-top: 0; }
.mein:last-child { border-bottom: 0; padding-bottom: 0; }
.mein-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.mein-wunsch { font-weight: 500; overflow-wrap: anywhere; }
.mein-song { font-size: 12px; color: var(--text-subtlest); overflow-wrap: anywhere; }
.pruef-balken { height: 4px; border-radius: 2px; background: var(--neutral-bg); overflow: hidden; margin: 10px 0 6px; position: relative; }
.pruef-balken::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--brand); border-radius: 2px; animation: lauf 1.3s ease-in-out infinite; }
@keyframes lauf { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.pruef-text { font-size: 12px; color: var(--text-subtlest); }
.kommentar { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.kommentar-bot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blau-bg); color: var(--blau-text); }
.kommentar-bot svg { width: 18px; height: 18px; }
.kommentar-kopf { font-size: 12px; color: var(--text-subtlest); }
.kommentar-kopf b { color: var(--text); font-weight: 600; }
.kommentar-text { margin-top: 2px; overflow-wrap: anywhere; }
.mein-fuss { font-size: 12px; color: var(--text-subtlest); margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Zuletzt erledigt */
.erledigt { list-style: none; margin: 0; padding: 0; }
.erledigt li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.erledigt .cover { width: 32px; }
.erledigt .cover-leer svg { width: 50%; height: 50%; }
.erledigt b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erledigt span.sub { display: block; font-size: 12px; color: var(--text-subtlest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Mini-Player ---------- */
.miniplayer {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
  height: calc(var(--mini-h) + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; border-top: 1px solid var(--border); background: var(--surface-overlay); color: var(--text);
  box-shadow: 0 -4px 16px #091e4214;
}
.miniplayer[hidden] { display: none; }
.mini-fortschritt { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--neutral-bg); }
.mini-fortschritt span { display: block; height: 100%; width: 0; background: #1db954; transition: width 0.25s linear; }
.mini-cover { width: 48px; height: 48px; flex: none; }
.mini-cover .cover { width: 48px; border-radius: 4px; }
.mini-cover .cover-leer svg { width: 50%; height: 50%; }
.mini-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mini-titel { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: 13px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-rechts { display: flex; align-items: center; gap: 12px; flex: none; }
.mini-zeit { font-family: var(--mono); font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.mini-pfeil { width: 24px; height: 24px; color: var(--text-subtle); }
.live-dot { display: inline-block; flex: none; width: 8px; height: 8px; aspect-ratio: 1; border-radius: 50%; background: #1db954; margin-right: 6px; animation: puls 1.6s infinite; vertical-align: 1px; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(29, 185, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0); } }

.tabs { display: none; }

/* ---------- Vollbild (laufender Titel) ---------- */
.vollbild { position: fixed; inset: 0; z-index: 50; color: #fff; overflow: hidden; background: #121212; animation: hoch 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vollbild[hidden] { display: none; }
@keyframes hoch { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vb-hintergrund { position: absolute; inset: -20%; filter: blur(60px) saturate(1.3); opacity: 0.75; }
.vb-hintergrund::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 18, 0.15), #121212 78%); }
.vb-hintergrund .cover { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.vb-inhalt > * { flex-shrink: 0; }
.vb-inhalt {
  position: relative; height: 100%; overflow-y: auto; margin: 0 auto; max-width: 560px;
  padding: calc(12px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.vb-kopf { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 24px; }
.vb-zurueck { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; display: grid; place-items: center; }
.vb-zurueck:hover { background: rgba(255, 255, 255, 0.2); }
.vb-zurueck svg { width: 26px; height: 26px; }
.vb-kopf-text { text-align: center; display: flex; flex-direction: column; font-size: 11px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); }
.vb-kopf-text b { font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: #fff; }
.vb-cover { width: min(100%, 52vh); margin: 0 auto 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); border-radius: 8px; }
.vb-cover .cover { border-radius: 8px; }
.vb-titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vb-titelzeile > div { min-width: 0; }
.vb-titel { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vb-kuenstler { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; overflow-wrap: anywhere; }
.vb-titelzeile .lozenge { flex: none; margin-bottom: 6px; }
.vb-balken { flex: none; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.vb-balken span { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; transition: width 0.25s linear; }
.vb-zeiten { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.vb-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0 16px; }
.vb-feld { background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.vb-feld dt { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.vb-feld dd { margin: 4px 0 0; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-feld .avatar { box-shadow: none; width: 20px; height: 20px; font-size: 9px; }
.vb-naechster { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.vb-naechster:empty { display: none; }
.vb-naechster .cover { width: 44px; flex: none; }
.vb-naechster .cover-leer svg { width: 50%; height: 50%; }
.vb-naechster small { display: block; font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.vb-naechster b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-naechster span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-naechster > div { min-width: 0; }
.vb-unten { margin-top: auto; align-self: center; margin-top: 24px; height: 40px; padding: 0 20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: #fff; font-weight: 600; }
.vb-unten:hover { border-color: #fff; }

/* ---------- Vorgang oeffnen ---------- */
.schleier { position: fixed; inset: 0; background: #091e427d; z-index: 40; }
.schleier[hidden], .detail[hidden] { display: none; }
.detail {
  position: fixed; z-index: 41; left: 50%; top: 60px; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--surface-overlay); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten-hoch);
}
.detail-griff { display: none; }
.detail-zu { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 3px; border: 0; background: none; color: var(--text-subtle); display: grid; place-items: center; }
.detail-zu:hover { background: var(--neutral-bg); }
.detail-zu svg { width: 20px; height: 20px; }
.d-breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--text-subtle); font-size: 14px; margin-bottom: 12px; padding-right: 40px; }
.d-haupt { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 16px; }
.d-titel { font-size: 22px; line-height: 28px; font-weight: 653; margin: 0; overflow-wrap: anywhere; }
.d-sub { color: var(--text-subtle); margin-top: 2px; }
.d-status { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.d-status .knopf { height: 32px; }
.d-details { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.d-details-kopf { padding: 10px 12px; font-weight: 653; border-bottom: 1px solid var(--border); }
.d-details dl { margin: 0; padding: 4px 12px 8px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 12px; }
.d-details dt { color: var(--text-subtle); font-size: 13px; font-weight: 600; padding: 8px 0; }
.d-details dd { margin: 0; padding: 6px 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-aktivitaet h3 { font-size: 14px; font-weight: 653; margin: 0 0 8px; }
.d-aktivitaet ul { list-style: none; margin: 0 0 16px; padding: 0; }
.d-aktivitaet li { display: flex; gap: 10px; padding: 6px 0; color: var(--text-subtle); }
.d-aktivitaet li .avatar { width: 24px; height: 24px; }
.d-hinweis { font-size: 12px; color: var(--text-subtlest); text-align: center; margin-top: 8px; }

/* ---------- Flag (Jira-Benachrichtigung) ---------- */
.flag {
  position: fixed; z-index: 60; left: 24px; bottom: calc(24px + var(--mini-h) + var(--tabs-h) + env(safe-area-inset-bottom));
  max-width: min(400px, calc(100vw - 32px)); padding: 14px 16px 14px 44px; border-radius: 3px;
  background: var(--surface-overlay); color: var(--text); box-shadow: var(--schatten-hoch); font-weight: 500;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.flag::before {
  content: ''; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 50%;
  background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.flag.fehler::before { background: #c9372c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 6h2v8h-2zm0 10h2v2h-2z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.flag.zeigen { opacity: 1; transform: none; }

/* ---------- Mittelgross ---------- */
@media (max-width: 1180px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .raster { grid-template-columns: minmax(0, 1fr) 320px; }
  .listen-kopf, .vorgang { grid-template-columns: 24px 88px minmax(0, 1fr) 112px 96px; }
  .listen-kopf span:nth-child(4), .vorgang-melder { display: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  :root { --topnav-h: 52px; --tabs-h: 56px; }
  body.mit-player { --mini-h: 64px; }
  .nur-gross { display: none !important; }
  .nur-klein { display: inline; }
  .nur-gross-flex { display: none !important; }
  .topnav { padding: 0 12px; }
  .app-switcher, .topnav-items { display: none; }
  .produkt { padding-left: 0; }
  .knopf-erstellen { width: 32px; padding: 0; font-size: 20px; font-weight: 400; }
  .inhalt { padding: 16px 12px 24px; }
  .seitenkopf { margin-bottom: 12px; padding: 0 4px; }
  .breadcrumb { font-size: 12px; }
  h1 { font-size: 20px; line-height: 24px; }
  body:not([data-tab='dashboard']) .seitenkopf { display: none; }
  .kennzahlen { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
  .kennzahl { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .kz-icon { width: 24px; height: 24px; }
  .kz-icon svg { width: 14px; height: 14px; }
  .raster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .spalte-haupt, .spalte-seite { gap: 12px; }
  .spalte-seite { display: contents; }
  .karte { padding: 14px 12px; }
  .karte-kopf { flex-wrap: wrap; }
  .suche { width: 100%; height: 36px; }
  .listen-kopf { display: none; }
  .vorgang {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'titel vote' 'meta vote';
    gap: 6px 12px; padding: 10px 4px; min-height: 0;
  }
  .vorgang > .typ-icon, .vorgang > .key, .vorgang > .vorgang-melder, .vorgang > .prio-zelle { display: none; }
  .vorgang-titel { grid-area: titel; }
  .vorgang-titel .cover { width: 40px; }
  .vorgang-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; padding-left: 50px; font-size: 12px; color: var(--text-subtlest); }
  .vorgang-meta .prio-icon { width: 14px; height: 14px; }
  .vorgang .vote { grid-area: vote; flex-direction: column; gap: 0; height: 52px; min-width: 52px; padding: 4px 8px; font-size: 15px; }
  .release { grid-template-columns: 48px minmax(0, 1fr); }
  .release .cover { width: 48px; }
  .release-rechts { display: none; }
  .release-titel { font-size: 15px; }

  .miniplayer {
    left: 8px; right: 8px; bottom: calc(var(--tabs-h) + 8px + env(safe-area-inset-bottom));
    height: 56px; padding: 0 12px 0 8px; border-radius: 8px; border: 0;
    background: #2d3640; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
  .mini-fortschritt { top: auto; bottom: 0; left: 8px; right: 8px; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 1px; overflow: hidden; }
  .mini-fortschritt span { background: #fff; }
  .mini-cover, .mini-cover .cover { width: 40px; height: 40px; }
  .mini-titel { font-size: 14px; }
  .mini-sub { color: rgba(255, 255, 255, 0.7); font-size: 12px; }
  .mini-zeit { color: rgba(255, 255, 255, 0.8); }
  .mini-pfeil { color: #fff; }

  .tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 34; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .tabs button { position: relative; border: 0; background: none; color: var(--text-subtlest); font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .tabs svg { width: 22px; height: 22px; }
  .tabs button.aktiv { color: var(--selected-text); }
  .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: var(--brand-text); font-size: 10px; line-height: 16px; }

  .detail {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 90vh;
    border-radius: 16px 16px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    animation: hoch 0.22s ease-out;
  }
  .detail-griff { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--border-input); margin: 4px auto 14px; opacity: 0.5; }
  .detail-zu { top: 14px; right: 10px; }
  .d-haupt { grid-template-columns: 72px minmax(0, 1fr); }
  .d-titel { font-size: 19px; line-height: 24px; }
  .d-details dl { grid-template-columns: 104px minmax(0, 1fr); }
  .flag { left: 12px; right: 12px; max-width: none; }

  .vb-inhalt { padding-left: 20px; padding-right: 20px; }
  .vb-kopf { margin-bottom: 20px; }
  .vb-cover { width: min(100%, 46vh); }
  .vb-titel { font-size: 22px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Verwaltung ---------- */
.admin .rahmen-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 32px 40px; max-width: 1400px; }
.admin .admin-breit { grid-column: 1 / -1; }
.admin textarea { width: 100%; padding: 8px; border-radius: 3px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font: 13px/1.5 var(--mono); resize: vertical; margin-bottom: 12px; }
.admin .tabelle-scroll { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin th { text-align: left; color: var(--text-subtlest); font-size: 12px; font-weight: 653; padding: 6px 8px; border-bottom: 2px solid var(--border); }
.admin td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin td.intern { color: var(--text-subtle); max-width: 420px; }
.admin .abgelehnt { color: var(--rot-text); font-weight: 600; }
.admin .knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.admin .spotify-zeile { display: flex; flex-direction: column; gap: 8px; }
.admin .spotify-zeile code { font-family: var(--mono); font-size: 12px; color: var(--text-subtle); overflow-wrap: anywhere; }
@media (max-width: 820px) { .admin .rahmen-admin { grid-template-columns: 1fr; padding: 16px 12px; } }
.min0 { min-width: 0; }
.admin .hinweis-klein { color: var(--text-subtlest); font-size: 12px; }
.admin .ticket-id { font-family: var(--mono); font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.admin .regeln-knopf { margin-bottom: 8px; }

/* Katalogsuche im Formular */
.suche-feld { width: 100%; height: 40px; background: var(--surface); }
.feld .suche-feld input { height: 38px; border: 0; box-shadow: none; padding: 0; font-size: 15px; }
.feld .suche-feld input::-webkit-search-cancel-button { cursor: pointer; }
.treffer { list-style: none; margin: 0 0 12px; padding: 0; transition: opacity 0.15s; }
.treffer.laedt { opacity: 0.55; }
.treffer:empty { display: none; }
.treffer-zeile { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.treffer-li:last-child > .treffer-zeile { border-bottom: 0; }
.treffer-zeile .cover { width: 44px; border-radius: 4px; }
.treffer-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treffer-zeile .sub { display: block; font-size: 13px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treffer-info { font-size: 12px; color: var(--text-subtlest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treffer-aktion { flex: none; }
.knopf-wunsch { height: 32px; }
.treffer-leer { padding: 16px 4px; color: var(--text-subtle); text-align: center; font-size: 13px; }
.explizit { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 2px; background: var(--text-subtlest); color: var(--surface); font-size: 10px; font-weight: 700; vertical-align: 1px; }
.kreisel { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: drehen 0.7s linear infinite; margin-right: 6px; }
@keyframes drehen { to { transform: rotate(360deg); } }
.formfehler:not(:empty) { padding: 8px 12px; border-radius: 3px; background: var(--rot-bg, #ffeceb); color: var(--rot-text); font-size: 13px; margin-bottom: 12px; }
@media (max-width: 820px) { .feld-deko { display: none; } }

/* Profil und Einstellungen */
.profil-knopf { border: 0; background: none; padding: 2px; border-radius: 50%; display: grid; place-items: center; }
.profil-knopf:hover .avatar, .profil-knopf:focus-visible .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fokus); }
.profil-knopf:focus-visible { outline: none; }
.einstellungen { width: min(440px, calc(100vw - 32px)); left: auto; right: 16px; transform: none; top: 64px; }
.profil-kopf { display: flex; align-items: center; gap: 14px; margin: 0 40px 20px 0; }
.profil-kopf h2 { font-size: 20px; line-height: 24px; margin: 0; }
.profil-kopf .sub { color: var(--text-subtle); font-size: 13px; }
.avatar-riesig { width: 48px; height: 48px; font-size: 17px; }
.e-abschnitt { font-size: 12px; font-weight: 653; color: var(--text-subtlest); text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 6px; background: var(--neutral-bg); }
.segment button { height: 36px; border: 0; border-radius: 4px; background: none; color: var(--text-subtle); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.segment button svg { width: 16px; height: 16px; }
.segment button:hover { color: var(--text); }
.segment button.an { background: var(--surface-raised); color: var(--selected-text); box-shadow: var(--schatten); font-weight: 600; }
.knopf-breit { width: 100%; height: 40px; justify-content: center; }
.e-hilfe { margin: 10px 0 0; }
.e-text { margin: 0 0 12px; color: var(--text-subtle); }
.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.schalter { appearance: none; flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--border-bold, #8590a2); position: relative; cursor: pointer; transition: background 0.15s; margin: 0; }
.schalter::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.schalter:checked { background: var(--brand, #0c66e4); }
.schalter:checked::after { transform: translateX(16px); }
.schalter:focus-visible { outline: 2px solid var(--brand, #0c66e4); outline-offset: 2px; }
.e-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.feld input:disabled { background: var(--neutral-bg); color: var(--text-subtle); border-color: transparent; }
@media (max-width: 820px) {
  .einstellungen { left: 0; right: 0; width: auto; top: auto; }
}

/* Reihenfolge: "Als Nächstes" ganz oben, Kennzahlen ganz unten */
.karte-naechster { margin-bottom: 20px; }
.inhalt > .kennzahlen { margin: 20px 0 0; }
@media (max-width: 820px) {
  .karte-naechster { margin-bottom: 12px; }
  .inhalt > .kennzahlen { margin-top: 12px; }
}

/* Prio-Liste: feste Zeilen oben, Status-Spalte, laufender Titel mit Zeit */
:root { --sp-key: 88px; --sp-melder: 180px; --sp-prio: 100px; --sp-status: 120px; }
.listen-kopf, .vorgang { grid-template-columns: 24px var(--sp-key) minmax(0, 1fr) var(--sp-melder) var(--sp-prio) var(--sp-status) 60px; }
@media (max-width: 1560px) {
  .listen-kopf, .vorgang { grid-template-columns: 24px var(--sp-key) minmax(0, 1fr) var(--sp-prio) var(--sp-status) 60px; }
  .listen-kopf span:nth-child(4), .vorgang-melder { display: none; }
}
/* Mit Seitenleiste und Seitenkarte bleibt unter 1440 px kaum Platz fuer den
   Titel. Die Status-Spalte geht, fest geplante Zeilen sind ohnehin farbig. */
@media (min-width: 1181px) and (max-width: 1440px) {
  .listen-kopf, .vorgang { grid-template-columns: 24px var(--sp-key) minmax(140px, 1fr) var(--sp-prio) 60px; }
  .listen-kopf span:nth-child(6), .vorgang > .status-zelle { display: none; }
}
.listen-kopf .r { text-align: right; }
/* Spaltenbreite von Hand: Griff am rechten Rand der Kopfzelle */
.listen-kopf [data-spalte] { position: relative; }
.spalten-griff { position: absolute; top: -4px; bottom: 4px; right: -9px; width: 6px; cursor: col-resize; border-radius: 2px; touch-action: none; }
.spalten-griff:hover, .spalten-griff.aktiv { background: var(--fokus); }
@media (max-width: 1180px) { .spalten-griff { display: none; } }
/* Kommentare im Ticket */
.d-kommentar { align-items: flex-start !important; }
.d-kommentar-kopf { font-size: 12px; color: var(--text-subtlest); }
.d-kommentar-kopf b { color: var(--text); font-weight: 600; }
.d-kommentar-text { margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: var(--neutral-bg); color: var(--text); overflow-wrap: anywhere; }
.d-kommentar.vom-bearbeiter .d-kommentar-text { background: color-mix(in srgb, var(--blau-bg) 60%, transparent); }
.status-zelle { min-width: 0; }
.prio-leer { color: var(--text-subtlest); }
.vorgang-fest { position: relative; }
.vorgang-fest::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
.vorgang-laeuft { background: color-mix(in srgb, var(--gruen-bg) 28%, transparent); }
.vorgang-laeuft::before { background: var(--gruen-text); }
.vorgang-eingeplant { background: color-mix(in srgb, var(--blau-bg) 28%, transparent); }
.vorgang-eingeplant::before { background: var(--blau-text); }
.vorgang-eingeplant + .vorgang:not(.vorgang-fest) { border-top: 2px solid var(--border); }
.vote.fest { cursor: default; background: none; color: var(--text-subtlest); }
.vote.fest:hover { background: none; }
.vote.fest:active { transform: none; }
.zeile-fortschritt { display: flex !important; align-items: center; gap: 8px; margin: -2px 0 -6px; padding: 6px 0 6px 2px; overflow: visible !important; }
/* Etwas eingerueckt, damit der Puls nicht am Rand der Zelle abgeschnitten wird */
.zeile-fortschritt .live-dot { margin: 0 2px 0 6px; }
.vorgang-laeuft .vorgang-text { flex: 1; }
.zeile-balken { flex: 1 1 auto; min-width: 60px; max-width: 220px; height: 4px; border-radius: 2px; background: var(--neutral-bg-hover); overflow: hidden; }
.zeile-balken i { display: block; height: 100%; width: 0; background: var(--gruen-text); border-radius: 2px; transition: width 0.25s linear; }
.zeile-zeit { font-size: 12px; color: var(--text-subtle) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.miniplayer { display: none !important; }
@media (max-width: 1180px) {
  .listen-kopf, .vorgang { grid-template-columns: 24px 88px minmax(0, 1fr) 96px 120px 64px; }
}
@media (max-width: 820px) {
  .listen-kopf, .vorgang { grid-template-columns: minmax(0, 1fr) auto; }
  .status-zelle { display: none; }
  .vorgang-meta { flex-wrap: wrap; row-gap: 4px; }
  .vorgang-meta .lozenge { margin-right: 2px; flex: none; }
  .vorgang-fest::before { left: -8px; }
  .zeile-balken { max-width: none; }
}

/* Untere Leiste: To-Dos, Suche (Kreis in der Mitte), Statistik */
.mehr-laden { padding: 14px; text-align: center; color: var(--text-subtlest); font-size: 13px; }
@media (max-width: 820px) {
  /* Statistik: Kennzahlen zuerst, dann meine Tickets und zuletzt gespielt */
  body[data-tab='statistik'] .inhalt { display: flex; flex-direction: column; }
  body[data-tab='statistik'] .inhalt > .kennzahlen { order: -1; margin: 0 0 12px; }
  .tabs { overflow: visible; }
  .tab-suche { color: var(--text-subtle) !important; }
  .tab-kreis {
    width: 56px; height: 56px; margin-top: -30px; margin-bottom: -2px; border-radius: 50%;
    display: grid; place-items: center; background: var(--brand); color: var(--brand-text);
    box-shadow: 0 0 0 5px var(--surface), 0 6px 16px rgba(12, 102, 228, 0.45);
    transition: transform 0.15s ease;
  }
  .tab-kreis svg { width: 26px !important; height: 26px !important; }
  .tab-suche:active .tab-kreis { transform: scale(0.94); }
  .tab-suche.aktiv { color: var(--selected-text) !important; }
  .tab-suche.aktiv .tab-kreis { background: var(--brand-hover); }
}
@media (max-width: 820px) {
  /* Der Kreis unten ist der Weg zur Suche, das Plus oben waere doppelt */
  .knopf-erstellen { display: none; }
}

/* Meine Tickets als schlichte Liste */
.meine-liste { list-style: none; margin: 0; padding: 0; }
.mein-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.mein-zeile:last-child { border-bottom: 0; }
.mein-zeile[data-song] { cursor: pointer; }
.mein-zeile[data-song]:hover { background: var(--surface-hover); }
.mein-zeile .cover { width: 40px; border-radius: 4px; }
.mein-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mein-sub { font-size: 12px; color: var(--text-subtlest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mein-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mein-rechts .prio-zelle { font-size: 12px; }

/* iPhone zoomt in Eingabefelder unter 16 px hinein. Auf dem Handy daher 16 px. */
@media (max-width: 820px) {
  input, select, textarea, .feld input, .feld select, .feld .suche-feld input { font-size: 16px !important; }
}

/* Name: beim ersten Besuch Pflicht, in den Einstellungen aenderbar */
.willkommen { position: fixed; inset: 0; z-index: 55; background: #091e42a8; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.willkommen[hidden] { display: none; }
.willkommen-karte {
  width: min(420px, 100%); background: var(--surface-overlay); border-radius: 8px; padding: 28px 24px 20px;
  box-shadow: var(--schatten-hoch); display: flex; flex-direction: column; gap: 12px; animation: hoch 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.willkommen-karte h2 { margin: 0; font-size: 20px; line-height: 24px; font-weight: 653; }
.willkommen-karte > p { margin: 0; color: var(--text-subtle); }
.willkommen-karte .hilfe { font-size: 12px; text-align: center; }
.willkommen-logo { width: 40px; height: 40px; border-radius: 8px; background: var(--brand); color: var(--brand-text); display: grid; place-items: center; }
.willkommen-logo svg { width: 22px; height: 22px; }
.name-form { display: flex; gap: 8px; }
.name-form input {
  flex: 1; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--border-input); border-radius: 3px;
  background: var(--surface); color: var(--text); font: inherit;
}
.name-form input:focus { outline: none; border-color: var(--fokus); }
.name-form .knopf { height: 36px; }
#n-fehler:not(:empty) { margin-top: 8px; }
@media (max-width: 820px) {
  .willkommen { align-items: end; padding: 0; }
  .willkommen-karte { width: 100%; border-radius: 12px 12px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .name-form input { font-size: 16px; }
}
.willkommen-karte .formfehler:empty { display: none; }
.d-klein { color: var(--text-subtlest); font-size: 12px; }
.treffer-mehr { display: flex; justify-content: center; padding: 12px 0 4px; list-style: none; }

/* Suche am Handy wie in einer App: Leiste direkt unter der Kopfleiste */
.such-abbrechen { display: none; }
@media (max-width: 820px) {
  body[data-tab='erstellen'] .inhalt { padding: 0 0 24px; }
  body[data-tab='erstellen'] #erstellen-karte { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: var(--surface); }
  #erstellen-karte .karte-kopf, #erstellen-karte .feld-name, #f-hilfe { display: none !important; }
  .such-leiste {
    position: sticky; top: var(--topnav-h); z-index: 20; display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .such-leiste .feld { flex: 1; min-width: 0; margin: 0; }
  .such-leiste .suche-feld { height: 40px; border: 0; border-radius: 10px; background: var(--neutral-bg); padding: 0 10px; }
  .such-leiste .suche-feld input, .such-leiste .suche-feld input:focus { background: transparent; box-shadow: none; }
  .such-abbrechen { display: block; flex: none; border: 0; background: none; color: var(--link, var(--brand)); font: inherit; font-size: 16px; padding: 0 2px; }
  #erstellen-karte .formfehler:not(:empty) { margin: 8px 12px 0; }
  #erstellen-karte .treffer { margin: 0; padding: 0 12px; }
  #erstellen-karte .treffer-zeile { padding: 8px 0; gap: 10px; grid-template-columns: 40px 1fr auto; }
  #erstellen-karte .treffer-zeile .cover { width: 40px; }
  .such-leiste .suche-feld:focus-within { border: 0; box-shadow: none; outline: none; }
  body.tippt .tabs { display: none; }
}

/* Meine Tickets in zwei Abschnitten, Verlauf mit Uhrzeit */
.mein-abschnitt { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 653; color: var(--text-subtlest); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 4px; }
.mein-teil + .mein-teil { margin-top: 14px; }
.leer-klein { padding: 10px 4px; font-size: 13px; text-align: left; }
.mein-sub .mein-daumen { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.d-zeit { color: var(--text-subtlest); font-size: 12px; margin-left: 4px; white-space: nowrap; }
.d-aktivitaet li .prio-zelle { display: inline-flex; vertical-align: middle; }

/* Unterseiten: To-Dos, Suche, Statistik. Am Handy ueber die Tabs unten, am
   grossen Bildschirm ueber die Seitenleiste. dashboard-gross gibt es nur dort. */
[data-bereich] { display: none; }
body[data-tab='dashboard'] [data-bereich~='dashboard'],
body[data-tab='erstellen'] [data-bereich~='erstellen'],
body[data-tab='statistik'] [data-bereich~='statistik'] { display: block; }
body[data-tab='statistik'] .kennzahlen[data-bereich] { display: grid; }
body[data-tab='statistik'] .inhalt { display: flex; flex-direction: column; }
body[data-tab='statistik'] .inhalt > .kennzahlen { order: -1; margin: 0 0 20px; }
body[data-tab='statistik'] .seitenkopf { order: -2; }

@media (min-width: 821px) {
  body[data-tab='dashboard'] [data-bereich~='dashboard-gross'] { display: block; }
  .inhalt { max-width: none; }
  .raster { grid-template-columns: minmax(0, 1fr) var(--seite-b, 400px); }
  body:not([data-tab='dashboard']) .spalte-haupt { display: none; }
  body[data-tab='erstellen'] .raster { grid-template-columns: minmax(0, 880px); }
  body[data-tab='statistik'] .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-tab='statistik'] .spalte-seite { display: contents; }
}

/* In Bearbeitung: der laufende Vorgang, gruen gerahmt wie sein Status */
.karte-laeuft { border: 2px solid var(--gruen-rand, #22a06b); box-shadow: 0 0 0 3px color-mix(in srgb, #22a06b 14%, transparent); }
.karte-laeuft .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.laeuft-kopf { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 12px; cursor: pointer; }
.laeuft-kopf .cover { width: 72px; border-radius: 6px; }
.laeuft-titel { font-size: 17px; font-weight: 653; line-height: 22px; overflow-wrap: anywhere; }
.laeuft-sub { color: var(--text-subtle); font-size: 13px; }
.laeuft-fortschritt { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.laeuft-fortschritt .zeile-balken { flex: 1; max-width: none; }
.laeuft-details { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; border-top: 1px solid var(--border); padding-top: 6px; }
.laeuft-details dt { color: var(--text-subtle); font-size: 13px; font-weight: 600; padding: 6px 0; }
.laeuft-details dd { margin: 0; padding: 4px 0; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.laeuft-details .avatar { width: 22px; height: 22px; font-size: 10px; }

/* Letzte Aktivitaet */
.aktivitaet { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; position: relative; overscroll-behavior: contain; }
.aktivitaet li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text-subtle); border-bottom: 1px solid var(--border); }
.aktivitaet li:last-child { border-bottom: 0; }
.aktivitaet li .avatar { width: 24px; height: 24px; font-size: 10px; }
.aktivitaet b { color: var(--text); font-weight: 600; }
.aktivitaet .akt-titel { color: var(--text); cursor: pointer; }
.aktivitaet .akt-titel:hover { text-decoration: underline; }
.aktivitaet .d-zeit { display: block; margin: 1px 0 0; }
.zaehler[hidden] { display: none !important; }

/* Gastgeber verschiebt: Griff links an jeder offenen Zeile */
.vorgang { position: relative; }
body.admin .vorgang { padding-left: 26px; }
.griff {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 20px; height: 32px;
  display: grid; place-items: center; color: var(--text-subtlest); font-size: 14px; letter-spacing: -2px;
  cursor: grab; touch-action: none; user-select: none; border-radius: 3px;
}
.griff:hover { background: var(--neutral-bg); color: var(--text); }
.vorgang.zieht { position: relative; z-index: 5; background: var(--surface-overlay); box-shadow: var(--schatten-hoch); cursor: grabbing; transition: none; }
.d-admin { margin-bottom: 8px; }

.akt-key { font-family: var(--mono); font-size: 11px; color: var(--text-subtlest); white-space: nowrap; }
.admin .nutzer-form { display: flex; flex-direction: column; gap: 4px; }
.admin .nutzer-form .schalter-zeile { margin: 4px 0 12px; }
.admin .nutzer-form .knopf { align-self: flex-start; }
.admin .pw-form { display: flex; gap: 6px; flex-wrap: wrap; }
.admin .pw-form input { height: 32px; padding: 0 8px; border-radius: 3px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); min-width: 160px; }
.admin .knopf-gefahr { background: var(--rot-text); color: #fff; }
.admin #nutzer-status { margin-top: 8px; }
.admin .rahmen-admin[hidden] { display: none; }

/* Gastgeber wischt Treffer nach links */
.treffer-li { list-style: none; }
.wisch { position: relative; overflow: hidden; touch-action: pan-y; }
.wisch-inhalt { position: relative; z-index: 1; background: var(--surface); user-select: none; -webkit-user-select: none; }
.wisch-aktionen { position: absolute; inset: 0 0 1px auto; width: 168px; display: flex; z-index: 0; transition: width 0.15s; }
.wisch-aktionen:has(.voll) { width: 100%; }
.wisch-knopf { flex: 1 1 0; border: 0; font-weight: 600; font-size: 13px; color: #fff; cursor: pointer; }
.wisch-aktionen:has(.voll) .wisch-details { display: none; }
.wisch-details { background: #626f86; }
.wisch-oben { background: var(--brand); }
@media (hover: hover) { .wisch-inhalt { cursor: grab; } }

/* Handy: die Prio-Liste ist das Erste, was man sieht. Ohne Brotkrumen und
   Seitentitel, ohne Karte, volle Breite, zwei Zeilen pro Titel: Titel, darunter
   Prioritaet als Symbol und Kuenstler. Schluessel und Status stehen im Ticket. */
.nur-mobil, .vorgang-text .nur-mobil { display: none; }
@media (max-width: 820px) {
  body[data-tab='dashboard'] .seitenkopf { display: none; }
  body[data-tab='dashboard'] .inhalt { padding-top: 4px; }
  #backlog-karte { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; margin: 0 -12px; }
  #backlog-karte > .karte-kopf { padding: 8px 16px 4px; margin: 0; }
  #backlog-karte .vorgang { padding: 7px 16px; gap: 0 10px; grid-template-areas: 'titel vote'; position: relative; }
  body.admin #backlog-karte .vorgang { padding-left: 30px; }
  #backlog-karte .vorgang-meta { display: none; }
  #backlog-karte .vorgang-fest::before { left: 0; top: 0; bottom: 0; border-radius: 0; }
  .nur-mobil { display: inline-flex; }
  /* Drei Zeilen wie in der Suche: Titel, Kuenstler, Infozeile */
  #backlog-karte .vorgang { padding: 8px 16px; }
  #backlog-karte .vorgang-titel { gap: 12px; }
  #backlog-karte .vorgang-titel .cover { width: 44px; border-radius: 4px; }
  #backlog-karte .vorgang-text b { font-weight: 600; }
  #backlog-karte .vorgang-text > span { font-size: 13px; color: var(--text-subtle); }
  #backlog-karte .vorgang-text > .vorgang-info { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-subtlest); white-space: nowrap; overflow: hidden; }
  .vorgang-info .prio-icon { width: 12px; height: 12px; flex: none; }
  .vorgang-info .live-dot { margin-right: 2px; }
  /* Platz fuer den Puls, sonst schneidet overflow: hidden ihn ab */
  .vorgang-laeuft .vorgang-info { padding: 6px 0 6px 6px; margin: -6px 0 -6px -6px; }
  .vorgang-info .zeile-zeit { display: inline !important; }
  .vorgang-info .zeile-zeit::before { content: '· '; }
  .manuell-text { font-weight: 600; color: var(--lila-text); }
  #backlog-karte .vorgang .vote { flex-direction: row; gap: 5px; height: 34px; min-width: 0; padding: 0 10px; font-size: 14px; }
  #backlog-karte .vorgang .vote svg { width: 15px; height: 15px; }
  /* Laufender Titel: ein richtiger Balken mit grauer Spur unter dem Text.
     Die duenne Linie am Zeilenrand sah aus wie durchgestrichen (Max, 22.10.). */
  #backlog-karte .vorgang-laeuft .zeile-fortschritt { margin: 6px 0 2px; padding: 0; gap: 0; }
  #backlog-karte .vorgang-laeuft .zeile-fortschritt .live-dot, #backlog-karte .vorgang-laeuft .zeile-fortschritt .zeile-zeit { display: none !important; }
  #backlog-karte .vorgang-laeuft .zeile-balken { max-width: none; height: 5px; border-radius: 3px; background: rgba(31, 132, 90, 0.18); }
  #backlog-karte .vorgang-laeuft .zeile-balken i { border-radius: 3px; }
  #backlog-karte .griff { left: 4px; }
}

/* Ticker im laufenden Ticket */
.ticker { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); min-height: 64px; }
.ticker[hidden] { display: none; }
.ticker-eintrag { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; animation: ticker-rein 0.45s ease-out; }
.ticker-eintrag > .avatar { width: 24px; height: 24px; font-size: 9px; }
.ticker-eintrag b { display: block; font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.ticker-eintrag .min0 > span { display: block; font-size: 13px; line-height: 1.4; color: var(--text); font-style: italic; }
@keyframes ticker-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ticker-vb { border-top: 0; margin: 4px 0 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); min-height: 0; }
.ticker-vb .ticker-eintrag b { color: rgba(255, 255, 255, 0.7); }
.ticker-vb .ticker-eintrag .min0 > span { color: #fff; font-size: 14px; }
@media (max-width: 820px) { .vollbild:has(.ticker-vb:not([hidden])) .vb-cover { width: min(100%, 36vh); } }
@media (prefers-reduced-motion: reduce) { .ticker-eintrag { animation: none; } }
.vorgaenge.wird-sortiert .vorgang:not(.zieht) { transition: transform 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .vorgaenge.wird-sortiert .vorgang:not(.zieht) { transition: none; } }

/* Statistik: ganz oben der Weg zur Playlist, die mit der Feier waechst */
.playlist-link {
  align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px; border-radius: 8px;
  background: #1db954; color: #fff; text-decoration: none; order: -1;
}
body[data-tab='statistik'] .playlist-link[data-bereich] { display: flex; }
body[data-tab='statistik'] .playlist-link[hidden] { display: none; }
.playlist-link > svg { width: 28px; height: 28px; flex: none; }
.playlist-link span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.playlist-link b { font-size: 16px; }
.playlist-link small { font-size: 13px; opacity: 0.9; }
.playlist-link .playlist-pfeil { width: 20px; height: 20px; }
.playlist-link:hover { background: #1aa34a; }
.playlist-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 820px) { .playlist-link { margin-bottom: 12px; } }
.admin .playlist-form { margin-top: 12px; align-items: center; }
.admin .playlist-form label { flex-basis: 100%; }

/* Statistik: Ueberschriften kleben beim Scrollen oben, bis die naechste kommt.
   Die Kartenkoepfe unter der Kopfleiste, die Abschnitte darunter. Jeder klebt
   nur innerhalb seines Blocks, deshalb loest der naechste ihn ab. */
#meine-karte .karte-kopf, #geloest-karte .karte-kopf {
  position: sticky; top: var(--topnav-h); z-index: 6; background: inherit;
  margin: -8px 0 4px; padding: 8px 0;
}
#meine, .mein-teil { background: inherit; }
.mein-abschnitt {
  position: sticky; top: calc(var(--topnav-h) + var(--stat-kopf-h, 44px)); z-index: 5;
  background: inherit; margin: 0; padding: 6px 0;
}

/* Gastgeber: laufender Titel im Kopf, Pult im Vollbild */
.kopf-laeuft {
  display: flex; align-items: center; gap: 6px; max-width: 220px; height: 32px; padding: 0 12px;
  border: 0; border-radius: 16px; background: #e3fcef; color: #006644; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kopf-laeuft[hidden] { display: none; }
.kopf-laeuft .live-dot { margin: 0; flex: none; }
.kopf-laeuft-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nur am Handy, als Sprungpunkt fuer Admins. Am Desktop steht der laufende
   Titel ohnehin daneben in der Karte "In Bearbeitung" (Max, 22.10.). */
@media (min-width: 821px) { .kopf-laeuft { display: none !important; } }
@media (max-width: 820px) { .kopf-laeuft { max-width: 150px; } }
.vb-steuerung { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 14px; }
.vb-steuerung[hidden] { display: none; }
.vb-knopf { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; color: #111; display: grid; place-items: center; cursor: pointer; }
.vb-knopf[hidden] { display: none; }
.vb-knopf svg { width: 30px; height: 30px; }
.vb-knopf-klein { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.18); color: #fff; }
.vb-knopf-klein svg { width: 24px; height: 24px; }
.vb-knopf:disabled { opacity: 0.5; }

/* Gerade verschobener Titel bleibt markiert */
.vorgang.markiert:not(.zieht), .vorgang.markiert:not(.zieht):hover { background: #e9f2ff; box-shadow: inset 3px 0 0 var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .vorgang.markiert { background: #1c2b41; } }
:root[data-theme='dark'] .vorgang.markiert { background: #1c2b41; }

/* Verwaltung am Handy: die Reiter bleiben sichtbar, sonst kommt man nicht zu
   den Benutzern. Platz schafft der weggelassene Produktname. Nur auf der
   Verwaltungsseite: .admin traegt auch die Hauptseite, sobald der Gastgeber
   angemeldet ist, und dort verschwand damit das Profil. */
@media (max-width: 820px) {
  .verwaltung .topnav-items { display: flex; margin: 0; gap: 0; }
  .verwaltung .topnav-items > * { padding: 0 8px; font-size: 14px; }
  .verwaltung .topnav-items .aktiv::after { bottom: -10px; }
  .verwaltung .produkt span, .verwaltung .topnav-rechts { display: none; }
}
/* Benutzertabelle am Handy: ein Block pro Konto, Knoepfe darunter */
@media (max-width: 820px) {
  #nutzer, #nutzer tbody, #nutzer tr, #nutzer td { display: block; width: auto; }
  #nutzer tr:first-child, #nutzer td:nth-child(3) { display: none; }
  #nutzer tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  #nutzer td { padding: 2px 0; border: 0; }
  #nutzer td:nth-child(2) { color: var(--text-subtle); font-size: 13px; }
  #nutzer td.knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  #nutzer .pw-form input { flex: 1; min-width: 0; }
}

/* Wischen in der Prio-Liste (Gastgeber). Die Zeile ist ein Raster, also
   wandern alle Kinder ueber --wx; ein Belag (::before) deckt die Aktionen ab. */
@property --wx { syntax: '<length>'; inherits: true; initial-value: 0px; }
.vorgang.wisch { position: relative; overflow: hidden; touch-action: pan-y; }
.vorgang.wisch::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--surface); transform: translateX(var(--wx)); pointer-events: none; }
.vorgang.wisch.markiert::before { background: #e9f2ff; }
:where(.vorgang.wisch > :not(.wisch-aktionen)) { position: relative; }
.vorgang.wisch > :not(.wisch-aktionen) { z-index: 2; transform: translateX(var(--wx)); }
.vorgang.wisch > .wisch-aktionen { z-index: 0; inset: 0 0 0 auto; }
.vorgang.wisch-animiert { transition: --wx 0.2s ease; }
.vorgang.wisch:not(.offen) > .wisch-aktionen { visibility: hidden; }
.vorgang.wisch.zieht > .wisch-aktionen { display: none; }
.vorgang.wisch:hover::before { background: var(--surface-hover); }
.vorgang.wisch > .griff { transform: translate(var(--wx), -50%); }

/* Gastgeber: auch das Cover ist ein Griff */
.cover.griff-bild { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#erstellen-karte .feld-name { display: none; }

/* Album und Kuenstler aus der Suche, dazu das Punkt-Menue am Treffer */
.treffer-aktion { display: flex; align-items: center; gap: 2px; }
.treffer-menue { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--text-subtle); border-radius: 4px; cursor: pointer; }
.treffer-menue svg { width: 18px; height: 18px; }
.treffer-menue:hover { background: var(--surface-hover); color: var(--text); }
.track-menue { position: fixed; z-index: 60; min-width: 180px; padding: 4px 0; background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(9,30,66,.25); }
.track-menue button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.track-menue button:hover { background: var(--surface-hover); }
.track-menue svg { width: 18px; height: 18px; color: var(--text-subtle); }
.menue-leer { display: block; padding: 10px 14px; color: var(--text-subtle); }
.ansicht-kopf { list-style: none; padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ansicht-zurueck { display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px 6px 2px; border: 0; background: none; color: var(--selected-text); font: inherit; cursor: pointer; }
.ansicht-zurueck svg { width: 20px; height: 20px; }
.ansicht-titelzeile { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.ansicht-bild { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; flex: none; }
.ansicht-bild.rund { border-radius: 50%; }
.ansicht-art { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.ansicht-titel { margin: 2px 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.ansicht-link { padding: 0; border: 0; background: none; color: var(--selected-text); font: inherit; cursor: pointer; }
.ansicht-link:hover { text-decoration: underline; }
.alben-reihe { list-style: none; display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x proximity; }
.album-kachel { flex: none; width: 128px; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.album-kachel img, .album-leer { width: 128px; height: 128px; object-fit: cover; border-radius: 6px; background: var(--border); }
.album-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.album-kachel .sub { font-size: 12px; color: var(--text-subtle); }

/* Gastgeber am Desktop: Pult direkt in der Karte "In Bearbeitung" */
.laeuft-steuerung { display: flex; gap: 8px; margin: 12px 0 4px; }
.laeuft-steuerung .knopf { display: inline-flex; align-items: center; gap: 6px; }
.laeuft-steuerung svg { width: 16px; height: 16px; }

/* Aus Spotify hereinziehen: Ablage unten, Luecke in der Prio-Liste */
.fremd-ablage { display: none; }
body.fremd-zieht .fremd-ablage {
  display: flex; align-items: center; gap: 10px; position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 14px 22px; border-radius: 10px; border: 2px dashed var(--brand); background: var(--selected-bg); color: var(--selected-text);
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.25); pointer-events: none; font-size: 15px;
}
body.fremd-zieht .fremd-ablage.in-liste { border-style: solid; background: var(--brand); color: var(--brand-text); }
.fremd-ablage svg { width: 22px; height: 22px; color: #1db954; }
.fremd-ablage.in-liste svg { color: #fff; }
.fremd-luecke {
  position: fixed; z-index: 4; pointer-events: none; border: 2px dashed var(--brand); border-radius: 6px; background: var(--selected-bg);
  transition: top 0.18s ease;
}

/* Gastgeber am PC in der Suche: links suchen, rechts was laeuft und was kommt */
@media (min-width: 1181px) {
  /* Zeile 1 nur so hoch wie die Karte "In Bearbeitung", den Rest der langen
     Trefferliste nimmt Zeile 2. Sonst rutscht die Prio-Liste mit jedem Treffer nach unten. */
  body.admin[data-tab='erstellen'] .raster { grid-template-columns: minmax(0, 1fr) var(--seite-b, 400px); grid-template-rows: auto 1fr; align-items: start; }
  body.admin[data-tab='erstellen'] .spalte-seite { display: contents; }
  body.admin[data-tab='erstellen'] #erstellen-karte { grid-column: 1; grid-row: 1 / span 2; }
  body.admin[data-tab='erstellen'] #laeuft-karte { display: block; grid-column: 2; grid-row: 1; }
  body.admin[data-tab='erstellen'] #seiten-prio-karte { display: block; grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--topnav-h) + 16px); }
}
.seiten-prio { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - var(--topnav-h) - 120px); overflow-y: auto; }
.sp-zeile { display: grid; grid-template-columns: 36px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer; border-radius: 4px; }
.sp-zeile:hover { background: var(--surface-hover); }
.sp-zeile .cover { width: 36px; border-radius: 4px; }
.sp-zeile b, .sp-zeile .min0 > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-zeile b { font-size: 14px; font-weight: 600; }
.sp-zeile .min0 > span { font-size: 12px; color: var(--text-subtle); }
.sp-nr { font-size: 12px; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sp-zeile.fest { background: var(--selected-bg); }
.sp-zeile.fest .sp-nr { font-size: 10px; line-height: 1.1; color: var(--selected-text); }
.sp-zeile.markiert { box-shadow: inset 3px 0 0 var(--brand); background: var(--selected-bg); }
.sp-stimmen { font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.seiten-prio.wird-sortiert .sp-zeile { transition: transform 0.18s ease; }
.treffer-li[draggable='true'] { cursor: grab; }

/* Vorgangsansicht des laufenden Titels: Zeitleiste und Pult */
.d-laeuft { margin: 4px 0 16px; padding: 12px 14px; border: 2px solid #22a06b; border-radius: 6px; background: color-mix(in srgb, #22a06b 6%, var(--surface)); }
.d-laeuft-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.d-laeuft-kopf .live-dot { margin: 0; }
.d-laeuft-zeit { margin-left: auto; color: var(--text-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.d-balken { display: block; max-width: none; height: 6px; border-radius: 3px; margin-top: 10px; }
.d-laeuft .laeuft-steuerung { margin: 12px 0 0; }

/* Prio-Liste bearbeiten: Leiste oben, Kaestchen links an jeder Zeile */
.masse-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; margin: 0 0 8px; border-radius: 6px; background: var(--selected-bg); position: sticky; top: var(--topnav-h); z-index: 8; }
.masse-leiste[hidden] { display: none; }
.masse-alle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.masse-alle input { width: 16px; height: 16px; accent-color: var(--brand); }
.masse-zahl { color: var(--text-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.masse-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.masse-knoepfe .knopf { display: inline-flex; align-items: center; gap: 4px; }
.masse-knoepfe svg { width: 18px; height: 18px; }
.masse-knoepfe .knopf-gefahr { background: var(--surface); color: var(--rot-text); box-shadow: inset 0 0 0 1px var(--rot-text); }
.masse-knoepfe .knopf-gefahr.scharf { background: var(--rot-text); color: #fff; }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }
body.admin .bearbeitet .vorgang { padding-left: 36px; }
#bl-bearbeiten[hidden] { display: none; }
.auswahl-box {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 3px;
  border: 2px solid var(--border-input); background: var(--surface);
}
.vorgang.ausgewaehlt { background: var(--selected-bg); }
.vorgang.ausgewaehlt .auswahl-box { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bearbeitet [data-auswahl] { cursor: pointer; user-select: none; }

/* Griff zwischen Hauptspalte und rechter Spalte */
.raster { position: relative; }
.raster-griff { display: none; }
@media (min-width: 821px) {
  body[data-tab='dashboard'] .raster-griff {
    display: block; position: absolute; top: 0; bottom: 0; right: calc(var(--seite-b, 400px) + 6px); width: 8px; z-index: 6;
    cursor: col-resize; border-radius: 4px; touch-action: none;
  }
}
@media (min-width: 1181px) {
  body.admin[data-tab='erstellen'] .raster-griff {
    display: block; position: absolute; top: 0; bottom: 0; right: calc(var(--seite-b, 400px) + 6px); width: 8px; z-index: 6;
    cursor: col-resize; border-radius: 4px; touch-action: none;
  }
}
.raster-griff:hover, .raster-griff.aktiv { background: var(--fokus); opacity: 0.6; }

/* Zeilen fuer Verlauf, Angepinntes und Playlists, im Stil der Treffer */
.zeile-klick { cursor: pointer; border-radius: 4px; }
.zeile-klick:hover { background: var(--surface-hover); }
.zeile-symbol { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--neutral-bg); color: var(--text-subtle); }
.zeile-symbol svg { width: 22px; height: 22px; }
.treffer-zeile img.cover { width: 44px; height: 44px; object-fit: cover; }
.treffer-zeile img.cover.rund { border-radius: 50%; }
.zeile-x, .zeile-pin { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--text-subtlest); border-radius: 4px; cursor: pointer; font-size: 20px; }
.zeile-x:hover, .zeile-pin:hover { background: var(--neutral-bg); color: var(--text); }
.zeile-pin svg { width: 18px; height: 18px; }
.zeile-pin.an { color: var(--brand); }
.zeile-pfeil { width: 20px; height: 20px; color: var(--text-subtlest); }
.zeile-extern { width: 20px; text-align: center; color: var(--text-subtlest); }
.zeile-mehr { list-style: none; padding: 4px 4px 8px; }
.ansicht-titelzeile .zeile-pin { margin-left: auto; align-self: flex-start; }
.d-balken i { transition: none; }

/* Verwaltung: Bearbeiter der Tickets */
.bearbeiter-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.bearbeiter-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.laeuft-kommentar { display: flex; gap: 10px; margin: 0 0 14px; }
.karte-laeuft .laeuft-kommentar { margin: 12px 0 0; }

/* Springen im laufenden Titel (Gastgeber): grosse Trefferflaeche um den duennen Balken */
.springbar { position: relative; display: flex; align-items: center; flex: 1 1 auto; padding: 8px 0; margin: -8px 0; cursor: pointer; }
.springbar-block { display: flex; margin-top: 2px; }
.springbar .zeile-balken { flex: 1 1 auto; max-width: none; transition: height 0.12s; }
.springbar-block .d-balken { margin-top: 10px; }
.springbar:hover .zeile-balken { height: 6px; }
.springbar:hover .d-balken { height: 8px; }
.spring-tipp { position: absolute; bottom: calc(100% - 4px); transform: translateX(-50%); padding: 2px 6px; border-radius: 3px; background: var(--text, #172b4d); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity 0.12s; white-space: nowrap; }
.springbar:hover .spring-tipp:not(:empty) { opacity: 1; }

/* Verwaltung, Aktivitaet: zuklappbare Karten */
.aufklapp > summary { list-style: none; cursor: pointer; margin: 0; user-select: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary h2 { display: flex; align-items: center; gap: 8px; }
.aufklapp > summary h2::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-right: 4px; }
.aufklapp[open] > summary h2::before { transform: rotate(45deg); }
.aufklapp[open] > summary { margin-bottom: 12px; }
.logs td:first-child { white-space: nowrap; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.logs code { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.logs .log-error code { color: var(--rot-text, #ae2e24); }
.logs .log-warn code { color: var(--gelb-text, #7f5f01); }

/* Seitenleiste eingeklappt: nur noch Symbole (Max, 22.10.). Gemerkt pro Browser. */
.sidebar-klapp { margin-top: auto; border: 0; background: none; font: inherit; cursor: pointer; width: 100%; text-align: left; }
.sidebar-klapp + .sidebar-fuss { margin-top: 8px; }
.sidebar-klapp svg { transition: transform 0.15s; }
@media (min-width: 821px) {
  body.sb-zu .rahmen { grid-template-columns: 56px minmax(0, 1fr); }
  body.sb-zu .sidebar { padding: 16px 6px; }
  body.sb-zu .sb-text, body.sb-zu .projekt > div, body.sb-zu .sidebar-gruppe, body.sb-zu .sidebar-fuss, body.sb-zu .sidebar-link .zaehler { display: none; }
  body.sb-zu .projekt { padding: 4px 0 16px; justify-content: center; }
  body.sb-zu .sidebar-link { justify-content: center; padding: 0; }
  body.sb-zu .sidebar-klapp svg { transform: rotate(180deg); }
}