/* DJ-Portal – Design im Stil „DJ Greppie“: dunkel, klar, Pink als sparsamer Akzent. Mobil zuerst. */

@font-face {
    font-family: "Outfit";
    src: url("../fonts/outfit-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg: #0b0b0b;
    --surface: #151515;
    --surface-2: #1e1e1e;
    --line: #2c2c2c;
    --text: #f2f2f2;
    --muted: #a6a6a6;
    --pink: #f63f61;
    --pink-hover: #ff5a78;
    --pink-soft: rgba(246, 63, 97, 0.14);
    --on-pink: #000;

    /* Status – immer zusätzlich mit Symbol + Text */
    --ja: #3ecf8e;
    --ja-soft: rgba(62, 207, 142, 0.14);
    --vielleicht: #f5b93a;
    --vielleicht-soft: rgba(245, 185, 58, 0.14);
    --nein: #9a9a9a;
    --nein-soft: rgba(154, 154, 154, 0.12);
    --fehler: #ff6b6b;
    --fehler-soft: rgba(255, 107, 107, 0.1);

    /* Flächen, die früher feste Farben hatten (heller Modus 1.20) */
    --kopf-bg: rgba(11, 11, 11, 0.92);
    --tabbar-bg: rgba(17, 17, 17, 0.97);
    --eingabe-bg: #0f0f0f;
    --kal-tag-bg: #101010;
    --hover-bg: #262626;
    --hover-line: #444;
    --hauch: rgba(255, 255, 255, 0.03);
    --leise: #777;
    --balken-ja: var(--ja);
    --balken-vielleicht: var(--vielleicht);
    --muster: url("../img/muster-pp.svg?v=2");

    --radius: 12px;
    --radius-sm: 8px;
    --font-head: "Outfit", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --header-h: 64px;
    --tabbar-h: 64px;
    --content-max: 1100px;
    color-scheme: dark;
}

/* Heller Modus (1.20, Burkhard 06.11.2026): Standard ist dunkel (kein Attribut). Profil → Darstellung setzt
   data-theme="light" (hell) oder data-theme="auto" (wie das Gerät, dann entscheidet prefers-color-scheme). */
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        --bg: #f7f5f6;
        --surface: #ffffff;
        --surface-2: #f1edef;
        --line: #ddd5da;
        --text: #17131a;
        --muted: #5d5761;
        --pink: #d01f48;
        --pink-hover: #b3183c;
        --pink-soft: rgba(208, 31, 72, 0.10);
        --on-pink: #fff;
        --ja: #11784a;
        --ja-soft: rgba(17, 120, 74, 0.12);
        --vielleicht: #925c00;
        --vielleicht-soft: rgba(214, 145, 20, 0.18);
        --nein: #66616b;
        --nein-soft: rgba(102, 97, 107, 0.12);
        --fehler: #c0262b;
        --fehler-soft: rgba(192, 38, 43, 0.08);
        --kopf-bg: rgba(247, 245, 246, 0.92);
        --tabbar-bg: rgba(255, 255, 255, 0.97);
        --eingabe-bg: #ffffff;
        --kal-tag-bg: #ffffff;
        --hover-bg: #ebe5e8;
        --hover-line: #c4bac0;
        --hauch: rgba(0, 0, 0, 0.02);
        --leise: #8a8490;
    --balken-ja: #2e9e68;
    --balken-vielleicht: #e8a628;
        --muster: url("../img/muster-pp-hell.svg?v=2");
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f7f5f6;
    --surface: #ffffff;
    --surface-2: #f1edef;
    --line: #ddd5da;
    --text: #17131a;
    --muted: #5d5761;
    --pink: #d01f48;
    --pink-hover: #b3183c;
    --pink-soft: rgba(208, 31, 72, 0.10);
    --on-pink: #fff;
    --ja: #11784a;
    --ja-soft: rgba(17, 120, 74, 0.12);
    --vielleicht: #925c00;
    --vielleicht-soft: rgba(214, 145, 20, 0.18);
    --nein: #66616b;
    --nein-soft: rgba(102, 97, 107, 0.12);
    --fehler: #c0262b;
    --fehler-soft: rgba(192, 38, 43, 0.08);
    --kopf-bg: rgba(247, 245, 246, 0.92);
    --tabbar-bg: rgba(255, 255, 255, 0.97);
    --eingabe-bg: #ffffff;
    --kal-tag-bg: #ffffff;
    --hover-bg: #ebe5e8;
    --hover-line: #c4bac0;
    --hauch: rgba(0, 0, 0, 0.02);
    --leise: #8a8490;
    --balken-ja: #2e9e68;
    --balken-vielleicht: #e8a628;
    --muster: url("../img/muster-pp-hell.svg?v=2");
    color-scheme: light;
}
/* Logo: je Darstellung nur eins der beiden Bilder (!important, weil z. B. .kopf-logo img display setzt) */
:root:not([data-theme="light"]):not([data-theme="auto"]) .logo-fuer-hell, :root[data-theme="light"] .logo-fuer-dunkel { display: none !important; }
@media not (prefers-color-scheme: light) { :root[data-theme="auto"] .logo-fuer-hell { display: none !important; } }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .logo-fuer-dunkel { display: none !important; } }

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* Dezentes „pp“-Muster im Hintergrund – wie auf der Visitenkarten-Rückseite schräg gekippt,
   in sehr dunklem Pink. Die Kachel (muster-pp.svg) ist um -45° zurückgedreht, die Fläche hier um +45°. */
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 160vmax;
    height: 160vmax;
    transform: translate(-50%, -50%) rotate(45deg);
    background-image: var(--muster);
    background-repeat: repeat;
    pointer-events: none;
}

h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 300; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; font-weight: 500; }
p { margin: 0 0 1em; }

a { color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--pink-hover); }

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

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
/* hidden-Attribut muss auch gegen Klassen mit eigenem display gewinnen (z. B. .btn), sonst bleiben per JS versteckte Knöpfe sichtbar */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* „Ansehen als“ (Owner, 09.11.2026): Balken unter der Kopfzeile, klebt beim Scrollen */
.ansehen-balken { position: sticky; top: var(--header-h); z-index: 19; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--pink); color: var(--on-pink); font-weight: 600; font-size: 0.95rem; }
.ansehen-balken .btn { background: var(--on-pink); color: var(--pink); border-color: var(--on-pink); }
body.ohne-tabbar .ansehen-balken { top: 0; }

/* ---------- Kopfzeile ---------- */
.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--header-h);
    background: var(--kopf-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.kopf-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    height: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.kopf-logo img { height: 40px; width: auto; display: block; }
.kopf-nav { display: none; gap: 4px; margin-left: auto; align-items: center; }
.kopf-nav a, .kopf-nav button {
    color: var(--text);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.kopf-nav a:hover, .kopf-nav button:hover { background: var(--surface-2); color: var(--text); }
.kopf-nav a[aria-current="page"] { color: var(--pink); background: var(--pink-soft); }
/* Profil-Knopf: Symbol + Name (seit 1.13.2); am Handy wird ein langer Name abgekürzt */
.kopf-user { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 8px; color: var(--muted); font-size: 0.9rem; text-decoration: none; border-radius: 10px; max-width: 46vw; }
.kopf-user svg { flex: 0 0 auto; }
.kopf-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-user:hover, .kopf-user[aria-current="page"] { color: var(--pink); background: var(--pink-soft); }

/* ---------- Tab-Leiste (mobil) ---------- */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: flex;
    background: var(--tabbar-bg);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a, .tabbar button {
    flex: 1;
    height: var(--tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.72rem;
    background: none; border: 0; font-family: inherit; cursor: pointer;
}
.tabbar svg { width: 22px; height: 22px; }
/* Lange Beschriftungen (z. B. „Veranstaltungen“ beim Team-Konto, 1.15) trennen statt überlaufen */
.tabbar a { min-width: 0; text-align: center; line-height: 1.1; hyphens: auto; overflow-wrap: anywhere; }
.tabbar a[aria-current="page"] { color: var(--pink); }

@media (min-width: 860px) {
    body { padding-bottom: 0; }
    .kopf-nav { display: flex; }
    .kopf-user { margin-left: 8px; max-width: none; }
    .tabbar { display: none; }
}

/* ---------- Inhalt ---------- */
main {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px 16px 40px;
}
main.breit { max-width: none; }

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.seitenkopf h1 { margin: 0; }
.eyebrow { color: var(--pink); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }

.karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.karte > :last-child { margin-bottom: 0; }
.karte-akzent { border-left: 3px solid var(--pink); }

.raster { display: grid; gap: 16px; }
@media (min-width: 700px) { .raster-2 { grid-template-columns: 1fr 1fr; } .raster-3 { grid-template-columns: repeat(3, 1fr); } }

.kennzahl { font-family: var(--font-head); font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--hover-line); color: var(--text); background: var(--hover-bg); }
.btn-primaer { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
.btn-primaer:hover { background: var(--pink-hover); border-color: var(--pink-hover); color: var(--on-pink); }
.btn-gefahr { color: var(--fehler); }
.btn-klein { min-height: 36px; padding: 6px 12px; font-size: 0.9rem; }
.btn-voll { width: 100%; }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #000; }
.btn-whatsapp:hover { background: #3ee07a; border-color: #3ee07a; color: #000; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; }

/* ---------- Formulare ---------- */
.feld { margin-bottom: 16px; }
.feld label, .feld .label { display: block; font-weight: 500; margin-bottom: 6px; }
.feld .hilfe { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url],
input[type=number], input[type=time], input[type=date], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: var(--eingabe-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--fehler); }
.fehlertext { color: var(--fehler); font-size: 0.875rem; margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pink); flex: none; }
.wochentage { display: flex; flex-wrap: wrap; gap: 8px; }
.wochentage label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 400;
}
.wochentage input { accent-color: var(--pink); }
.hp { position: absolute; left: -10000px; }

/* ---------- Meldungen ---------- */
.meldung { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid; }
.meldung-ok { background: var(--ja-soft); border-color: rgba(62, 207, 142, 0.4); }
.meldung-fehler { background: var(--fehler-soft); border-color: rgba(255, 107, 107, 0.45); }
.meldung-hinweis { background: var(--vielleicht-soft); border-color: rgba(245, 185, 58, 0.45); }
.meldung ul { margin: 0; padding-left: 18px; }

/* ---------- Listen / Tabellen ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.liste > li:last-child { border-bottom: 0; }
.liste .titel { font-weight: 600; }

.tabelle-wrap { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle th { color: var(--muted); font-weight: 500; font-size: 0.85rem; }

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.badge-pink { background: var(--pink-soft); color: var(--pink); border-color: rgba(246, 63, 97, 0.4); }
.badge-ja { background: var(--ja-soft); color: var(--ja); border-color: rgba(62, 207, 142, 0.4); }
.badge-vielleicht { background: var(--vielleicht-soft); color: var(--vielleicht); border-color: rgba(245, 185, 58, 0.4); }
.badge-nein { background: var(--nein-soft); color: var(--nein); }

details.auf { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
details.auf summary { cursor: pointer; color: var(--muted); }

/* Einstellungen: zugeklappter Abschnitt (z. B. „Meldungen im Portal“) */
.einstellungen-zugeklappt > summary { cursor: pointer; }
.einstellungen-zugeklappt > summary h2 { display: inline; margin: 0; }
.einstellungen-zugeklappt[open] > summary { margin-bottom: 16px; }

.code-link {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem;
    background: var(--eingabe-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 12px; word-break: break-all; margin-bottom: 12px;
}

/* ---------- Gast-Seiten (Login, Registrierung) ---------- */
.gast { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; flex: 1; }
.gast-logo { width: 320px; max-width: 80vw; height: auto; margin-bottom: 28px; }
.gast .karte { width: 100%; max-width: 440px; padding: 28px 24px; }
body.ohne-tabbar { padding-bottom: 0; }

/* ---------- Fußzeile ---------- */
.fuss {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}
.fuss-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 20px 16px;
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
.fuss a { color: var(--muted); }
.fuss .version { opacity: 0.7; font-variant-numeric: tabular-nums; }
.fuss a:hover { color: var(--text); }

/* ---------- Druck ---------- */
@media print {
    :root { --bg: #fff; --text: #000; --muted: #555; --line: #ccc; --surface: #fff; }
    body { background: #fff; color: #000; padding: 0; }
    body::before, .kopf, .tabbar, .fuss, .nicht-drucken { display: none !important; }
}

/* Speichern-Leiste bleibt beim Scrollen sichtbar */
.speichern-leiste { position: sticky; bottom: calc(var(--tabbar-h) + 12px); }
@media (min-width: 860px) { .speichern-leiste { bottom: 16px; } }


/* Uhrzeitfeld (24 h) */
input.uhrzeit { max-width: 110px; font-variant-numeric: tabular-nums; }


/* ---------- Verfügbarkeitsabfrage ---------- */
.termine { list-style: none; margin: 0; padding: 0; }
.termin {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--header-h) + 12px);
}
.termin:last-child { border-bottom: 0; }
.termin-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.termin-datum { font-weight: 600; font-size: 1.05rem; }
.termin-zeit { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.termin-notiz { color: var(--vielleicht); font-size: 0.85rem; width: 100%; }

.antworten { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; }
.antworten button {
    min-height: 48px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--eingabe-bg);
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
}
.antworten button:hover:not(:disabled) { border-color: var(--hover-line); color: var(--text); }
.antworten button:disabled { cursor: not-allowed; opacity: 0.55; }
.antworten button .sym { font-weight: 700; margin-right: 4px; }
/* Umfrage bearbeiten: je Termin die Antworten mit Namen, ohne Zusage abgesetzt (04.11.2026) */
.umfrage-entfernen { border-top: 1px solid var(--line); padding: 8px 0; }
.umfrage-entfernen .badge { margin-right: 4px; }
.umfrage-entfernen.ohne-zusage strong { color: var(--muted); }
/* Umfragen (1.18): Radio-Antworten je Termin im Look der Abfrage-Knöpfe */
.umfrage-termin { border-top: 1px solid var(--line); padding: 10px 0; }
.umfrage-termin .titel { margin-bottom: 6px; }
.umfrage-antworten label { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 0.9rem; text-align: center; }
.umfrage-antworten label input { position: absolute; opacity: 0; width: 0; height: 0; }
.umfrage-antworten label:has(input:checked).ja { background: var(--ja-soft); border-color: var(--ja); color: var(--ja); }
.umfrage-antworten label:has(input:checked).vielleicht { background: var(--vielleicht-soft); border-color: var(--vielleicht); color: var(--vielleicht); }
.umfrage-antworten label:has(input:checked).nein { background: var(--nein-soft); border-color: var(--nein); color: var(--nein); }
.umfrage-antworten label:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
/* Ergebnis je Termin als Balken (06.11.2026): grün = ja, gelb = nur wenn nötig, Rest = nein/offen */
.umfrage-sortierung { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.umfrage-zeile { border-top: 1px solid var(--line); padding: 10px 0; }
.umfrage-zeile.vorne { background: var(--vielleicht-soft); border: 1px solid var(--vielleicht); border-radius: var(--radius-sm); padding: 10px; margin: 6px 0; }
.umfrage-zeile.gewaehlt { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: var(--radius-sm); }
.umfrage-zeile-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.umfrage-zeile summary { list-style: none; cursor: pointer; margin-top: 6px; }
.umfrage-zeile summary::-webkit-details-marker { display: none; }
.umfrage-balken { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--nein-soft); margin-bottom: 6px; }
.umfrage-balken .ja { background: var(--balken-ja); }
.umfrage-balken .vielleicht { background: var(--balken-vielleicht); }
.umfrage-zahlen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.umfrage-namen-zeigen { margin-left: auto; }
.umfrage-namen-zeigen::after { content: " ▾"; }
.umfrage-zeile details[open] .umfrage-namen-zeigen::after { content: " ▴"; }
.umfrage-namen { margin-top: 6px; display: grid; gap: 4px; }
.umfrage-zeile-kopf form.inline { margin-left: auto; }
.umfrage-zeile.deaktiviert, .umfrage-entfernen.deaktiviert { opacity: 0.6; }
.umfrage-deaktiviert { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.umfrage-deaktiviert > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.btn-leise { background: transparent; border-color: transparent; color: var(--muted); }
.btn-leise:hover { color: var(--fehler); border-color: var(--line); background: transparent; }
.antworten button[aria-pressed="true"].ja { background: var(--ja-soft); border-color: var(--ja); color: var(--ja); }
.antworten button[aria-pressed="true"].vielleicht { background: var(--vielleicht-soft); border-color: var(--vielleicht); color: var(--vielleicht); }
.antworten button[aria-pressed="true"].nein { background: var(--nein-soft); border-color: var(--nein); color: var(--text); }
.antworten button[aria-pressed="true"] { font-weight: 600; }
.htmx-request .antworten button { opacity: 0.6; }

.fortschritt { display: flex; align-items: center; gap: 12px; }
.balken { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--pink); }

.status-liste { list-style: none; margin: 0; padding: 0; }
.status-liste li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.status-liste li:last-child { border-bottom: 0; }

.eingabe-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.eingabe-reihe .feld { margin-bottom: 0; }

/* Mottos */
.motto-auswahl { display: grid; grid-template-columns: 1fr; gap: 10px 24px; margin-bottom: 16px; }
@media (min-width: 720px) { .motto-auswahl { grid-template-columns: 1fr 1fr; } }
.motto-check { padding: 8px 0; border-bottom: 1px solid var(--line); }
.motto-beschreibung { display: block; margin-top: 2px; font-weight: 400; }
.motto-zeile { border-bottom: 1px solid var(--line); padding: 10px 0; }
.motto-zeile > summary { cursor: pointer; }
.motto-zeile[open] > summary { margin-bottom: 12px; }
.vorschlag { border-bottom: 1px solid var(--line); padding: 12px 0; }
.vorschlag:last-child { border-bottom: 0; }
.motto-badge { display: inline-block; font-size: 0.8rem; color: var(--pink); border: 1px solid rgba(246, 63, 97, 0.45); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.motto-hinweis { color: var(--muted); margin: 4px 0 8px; }
.termin-gesperrt .antworten { opacity: 0.45; }
.pl-motto { display: block; }
.kal-motto { display: block; font-size: 0.7rem; color: var(--pink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motto-zelle select { max-width: 200px; }
.motto-mark { display: block; font-size: 0.7rem; color: var(--pink); }
.motto-mark.ohne { color: var(--muted); }
input.zahl-kurz { max-width: 90px; }
.tabelle input, .tabelle select { min-height: 40px; }
.verlauf { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.verlauf li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.verlauf li:last-child { border-bottom: 0; }
.verlauf .zeit { color: var(--muted); font-size: 0.8rem; }

/* ---------- Planungstabelle (Admin) ---------- */
.pink { color: var(--pink); }
.link-btn { background: none; border: 0; padding: 0 0 0 6px; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--fehler); }
.planung-wrap { max-height: 78vh; overflow: auto; }
table.planung { border-collapse: separate; border-spacing: 0; }
.planung th, .planung td { border-bottom: 1px solid var(--line); }
.planung thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); vertical-align: bottom; }
.planung .fix { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 190px; border-right: 1px solid var(--line); }
.planung thead .fix { z-index: 3; }
.planung .dj-kopf { text-align: center; min-width: 104px; }
.planung .dj-name { display: block; color: var(--text); font-weight: 600; font-size: 0.85rem; }
.planung .zaehler { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; }
.planung td.zelle { padding: 4px; text-align: center; vertical-align: middle; }
.zelle form { margin: 0; }
.zelle button {
    width: 100%; min-height: 52px; padding: 4px 6px;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    font: inherit; font-size: 0.82rem; line-height: 1.25; cursor: pointer;
    background: transparent; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.zelle button:hover:not(:disabled) { border-color: var(--pink); }
.z-ja button { background: var(--ja-soft); color: var(--ja); }
.z-vielleicht button { background: var(--vielleicht-soft); color: var(--vielleicht); }
.z-nein button { background: var(--nein-soft); color: var(--nein); }
.z-leer button { color: var(--leise); }
.zelle.zugeteilt button { border: 2px solid var(--pink); background: var(--pink-soft); cursor: default; opacity: 1; }
.zelle .eingeteilt { color: var(--pink); font-weight: 700; }
.htmx-request#planung, .htmx-request .planung { opacity: 0.7; }

/* ---------- Plan (Liste / Kalender) ---------- */
.umschalter { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.umschalter a { padding: 7px 16px; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.umschalter a[aria-current="page"] { background: var(--pink-soft); color: var(--pink); }

.plan-liste { list-style: none; margin: 0; padding: 0; }
.plan-liste li { border-bottom: 1px solid var(--line); }
.plan-liste li:last-child { border-bottom: 0; }
.plan-liste a {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    padding: 14px 8px; color: var(--text); text-decoration: none; border-radius: var(--radius-sm);
}
.plan-liste a:hover { background: var(--surface-2); color: var(--text); }
.pl-datum { font-weight: 600; }
.pl-zeit { color: var(--muted); font-size: 0.9rem; text-align: right; font-variant-numeric: tabular-nums; }
.pl-dj { grid-column: 1 / -1; font-family: var(--font-head); font-size: 1.25rem; font-weight: 300; }
.pl-notiz { grid-column: 1 / -1; color: var(--vielleicht); font-size: 0.85rem; }
.plan-liste li.mein a { border-left: 3px solid var(--pink); background: var(--pink-soft); }
.plan-liste li.mein .pl-dj { color: var(--pink); font-weight: 400; }
.plan-liste li.vorbei { opacity: 0.55; }
@media (min-width: 700px) {
    .plan-liste a { grid-template-columns: 170px 130px 1fr; align-items: baseline; }
    .pl-zeit { text-align: left; }
    .pl-dj { grid-column: auto; }
    .pl-notiz { grid-column: 3; }
}

.kalender-karte { padding: 12px; }
.kal-kopf, .kal-tage { display: grid; grid-template-columns: var(--kal-spalten, repeat(7, minmax(0, 1fr))); gap: 4px; }
.kal-kopf div { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 4px 0; }
.kal-tag { min-height: 64px; padding: 4px; border-radius: 6px; background: var(--kal-tag-bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-tag.fremd { opacity: 0.3; }
.kal-tag.heute { border-color: var(--text); }
.kal-nr { font-size: 0.75rem; color: var(--muted); }
.kal-termin {
    display: block; font-size: 0.72rem; line-height: 1.2; padding: 3px 4px; border-radius: 4px;
    background: var(--surface-2); color: var(--text); text-decoration: none;
    overflow: hidden; overflow-wrap: break-word; hyphens: auto;
}
.kal-termin.mein { background: var(--pink); color: var(--on-pink); font-weight: 600; }
.kal-termin.ersatz { outline: 1px dashed var(--vielleicht); }
.kal-termin.veranstaltung { border-left: 3px solid var(--pink); }
@media (min-width: 700px) {
    .kal-tag { min-height: 96px; padding: 6px; }
    .kal-termin { font-size: 0.85rem; padding: 4px 6px; }
}

/* ---------- Historie ---------- */
tr.geaendert td { background: var(--pink-soft); }

/* ---------- Druckansicht ---------- */

/* Aufklappbarer Button (details/summary) */
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }

/* Terminseite (Admin): wer hat sich gemeldet */
.meldung-gruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.meldung-gruppe:last-of-type { border-bottom: 0; }
.meldung-gruppe .badge { min-width: 11.5em; justify-content: flex-start; }
.meldung-gruppe .namen { flex: 1 1 12em; }


/* Breite Karte für Textseiten (Impressum, Datenschutz) */
.gast .karte.karte-breit { max-width: 760px; }
.rechtstext h2 { font-size: 1.6rem; margin-top: 0; }
.rechtstext h3 { margin-top: 1.6em; font-size: 1.1rem; }
.rechtstext p { color: var(--text); }
.rechtstext a { word-break: break-word; }

/* Motto-Wunsch zur Zusage in der Abfrage */
.motto-wunsch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.motto-wunsch label { font-size: 0.875rem; color: var(--muted); margin: 0; }
.motto-wunsch select { flex: 1 1 200px; max-width: 100%; }
.motto-wunsch select.fehlt { border-color: var(--vielleicht); }
.motto-wunsch .motto-hinweis { flex-basis: 100%; color: var(--vielleicht); margin: 0; }
.motto-gespeichert { color: var(--ja); font-weight: 600; margin-left: 6px; }

/* Planung: Stand des Termins in der Datumsspalte (besetzt / Ersatz gesucht / offen) */
.planung th.fix.t-besetzt { background: linear-gradient(var(--ja-soft), var(--ja-soft)), var(--surface); box-shadow: inset 4px 0 0 var(--ja); }
.planung th.fix.t-ersatz { background: linear-gradient(var(--vielleicht-soft), var(--vielleicht-soft)), var(--surface); box-shadow: inset 4px 0 0 var(--vielleicht); }
.planung th.fix.t-offen { box-shadow: inset 4px 0 0 var(--line); }
.planung .stand-symbol { font-weight: 700; margin-right: 6px; }
.planung .t-besetzt .stand-symbol { color: var(--ja); }
.planung .t-ersatz .stand-symbol { color: var(--vielleicht); }
.planung .noch-offen { color: var(--vielleicht); font-weight: 600; }
.nur-offene tr[data-stand="besetzt"] { display: none; }
.plan-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.pdf-handy { display: none; }
.kann-teilen .pdf-handy { display: inline; }
.kann-teilen .pdf-pc { display: none; }
.plan-werkzeuge .check { margin: 0; }

/* Abstimmung über den Plan-Entwurf */
.planung .abst { display: block; margin-top: 4px; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.planung .abst-ja { color: var(--ja); }
.planung .abst-nein { color: var(--pink); }
.zelle.zugeteilt.bestaetigt button { border-color: var(--ja); background: var(--ja-soft); }
.zelle.zugeteilt.bestaetigt .eingeteilt { color: var(--ja); }
.text-nein { color: var(--pink); font-weight: 600; }
.abstimmung-liste .small { margin-top: 2px; }
.abstimmung-liste .im-auftrag { margin-top: 6px; }
.abstimmung-liste .im-auftrag .feld { max-width: 360px; }

/* Mail-Protokoll (nur Owner) */
.mailprotokoll-filter { display: grid; gap: 0 16px; }
.mailprotokoll-filter .feld { margin-bottom: 12px; }
@media (min-width: 700px) { .mailprotokoll-filter { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mailprotokoll-filter { grid-template-columns: repeat(4, 1fr); } }
.mailprotokoll-filter > .aktionen, .mailprotokoll-filter > .feld:has(.check) { grid-column: 1 / -1; }
.mailprotokoll li > div { margin-top: 4px; }
.mailprotokoll .fehlertext { word-break: break-word; }
.seiten { justify-content: center; margin-top: 12px; }

/* Infos: Ablauf am Abend als Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.zeitleiste li:first-child { border-top: 0; }
.zeitleiste .zeit { color: var(--pink); font-weight: 600; font-variant-numeric: tabular-nums; }
.zeitleiste .titel { font-weight: 600; margin-bottom: 4px; }
@media (max-width: 480px) { .zeitleiste li { grid-template-columns: 1fr; gap: 2px; } }
.info-text p { margin: 0 0 8px; }
.info-text p:last-child { margin-bottom: 0; }
.info-text ul, .info-text ol { margin: 4px 0 8px; padding-left: 20px; }
.info-text li { margin: 2px 0; }
.info-zeiten { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.info-zeiten .eingabe-reihe { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.info-zeiten .eingabe-reihe .check { min-width: 7rem; }
.info-zeiten .uhrzeit { max-width: 6rem; }
.karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.karte-kopf h2 { margin: 0; }
.aktion-bild { display: block; max-width: 100%; max-height: 160px; margin-top: 8px; border-radius: 8px; border: 1px solid var(--line); }
input.datum { max-width: 9rem; }

/* Datumsfeld mit Kalender-Knopf (Komponente <x-datum>, Verhalten in js/datum.js) */
.datum-feld { position: relative; display: inline-flex; align-items: stretch; gap: 6px; max-width: 100%; }
.datum-feld input.datum { width: 9rem; flex: 0 1 auto; font-variant-numeric: tabular-nums; }
.datum-feld .datum-knopf-huelle { position: relative; display: inline-flex; flex: 0 0 auto; }
.datum-feld .datum-knopf { min-height: 46px; min-width: 46px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; }
.datum-feld .datum-knopf svg { display: block; }
/* Systemkalender: liegt unsichtbar GENAU über dem Knopf – angetippt wird also das Datumsfeld selbst
   (nur so öffnet das iPhone seinen Kalender); 16px Schrift, damit iOS nicht hineinzoomt */
.datum-feld input.datum-auswahl {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    margin: 0; padding: 0; border: 0; font-size: 16px;
    opacity: 0; cursor: pointer; z-index: 1;
    -webkit-appearance: none; appearance: none; background: transparent; color: transparent;
}
.datum-feld .datum-knopf-huelle:focus-within .datum-knopf { box-shadow: 0 0 0 3px var(--pink-soft); border-color: var(--pink); }

/* Infos: Auswahl des Abends und Block „Der Abend“ */
.abend-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.abend-wahl a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.abend-wahl a[aria-current="page"] { background: var(--pink-soft); color: var(--pink); border-color: rgba(246, 63, 97, 0.4); }
.abend h3 { margin: 18px 0 8px; }
.abend-kopf { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.abend-kopf .titel { font-weight: 600; margin-bottom: 4px; }
.zeitleiste-aktion .titel { color: var(--pink); }
.aktionen-liste .badge { margin-right: 4px; }

/* Planung (veröffentlicht): Entfernen mit „Ersatzsuche starten“ */
details.entfernen { display: inline-block; }
details.entfernen > summary { list-style: none; cursor: pointer; display: inline; }
details.entfernen > summary::-webkit-details-marker { display: none; }
.entfernen-form { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 15rem; white-space: normal; }
.entfernen-form .feld { margin-bottom: 8px; }

/* Abend-Block: Abschnitte deutlich trennen, Aktionen/Specials als eigene Kärtchen mit kleiner Bildvorschau */
.abend-abschnitt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.abend-abschnitt > h3 { margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--muted); }
.aktion-karten { display: grid; gap: 10px; }
.aktion-karte { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--hauch); }
.aktion-karte.ist-special { border-color: rgba(246, 63, 97, 0.45); }
.aktion-karte .aktion-inhalt { flex: 1 1 auto; min-width: 0; }
.aktion-karte .titel { font-weight: 600; margin-bottom: 2px; }
.aktion-vorschau { flex: 0 0 auto; display: block; }
.aktion-vorschau img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
@media (min-width: 640px) { .aktion-vorschau img { width: 120px; height: 120px; } }

/* Abend: Schilder-Leiste „Heute: …“ unter dem Kopf (antippen = zum Kärtchen unter „Heute bewerben“) */
.heute-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.heute-schild { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; color: var(--text, inherit); text-decoration: none; background: var(--hauch); }
.heute-schild.ist-special { border-color: rgba(246, 63, 97, 0.55); color: var(--pink); background: var(--pink-soft); }
.heute-schild .zeit { font-variant-numeric: tabular-nums; opacity: 0.85; }
#ablauf, #bewerben, #ansagen, [id^="aktion-"] { scroll-margin-top: 80px; }

/* Abrechnung */
.abrechnung .betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abrechnung tfoot td { border-bottom: 0; }
.abrechnung tfoot tr.summe td { font-weight: 700; border-top: 2px solid var(--line); }
.abrechnung .check { align-items: center; }
/* Übersicht auf dem Handy: eine Karte je DJ statt breiter Tabelle */
@media (max-width: 640px) {
    .abrechnung-uebersicht thead { display: none; }
    .abrechnung-uebersicht, .abrechnung-uebersicht tbody, .abrechnung-uebersicht tfoot,
    .abrechnung-uebersicht tr, .abrechnung-uebersicht td { display: block; width: 100%; }
    .abrechnung-uebersicht tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .abrechnung-uebersicht td { border: 0; padding: 3px 0; }
    .abrechnung-uebersicht td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
    .abrechnung-uebersicht td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
    .abrechnung-uebersicht td.leer { display: none; }
    .abrechnung-uebersicht tfoot tr.summe td { border-top: 0; }
    .abrechnung-uebersicht tfoot tr.summe { border-top: 2px solid var(--line); }
}

/* Veranstaltung: DJs zum Anhaken, mehrspaltig */
fieldset.feld { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.dj-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; }

/* Unterleiste „Planung“ (Admins) und Rücksprung-Links */
.unterleiste { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: -4px 0 20px; scrollbar-width: none; }
.unterleiste::-webkit-scrollbar { display: none; }
.unterleiste a { padding: 10px 14px; white-space: nowrap; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.unterleiste a:hover { color: var(--text); }
.unterleiste a[aria-current="page"] { color: var(--pink); border-bottom-color: var(--pink); }
.unterleiste-klein { margin-top: -12px; border-bottom: 0; }
.unterleiste-klein a { padding: 6px 12px; font-size: 0.875rem; border-bottom: 0; }
.unterleiste-klein a[aria-current="page"] { background: var(--pink-soft); border-radius: 999px; }
.zurueck { margin: 0 0 8px; font-size: 0.9rem; }
.zurueck a { color: var(--muted); text-decoration: none; }
.zurueck a:hover { color: var(--pink); }

/* Abfrage: „Antworten abschicken“ (Stand über dem Knopf, offene Termine markiert) */
.abschicken { display: grid; gap: 10px; }
.abschick-stand { margin: 0; display: grid; gap: 2px; font-weight: 600; }
.abschick-stand.warnung { color: var(--vielleicht); }
.abschick-stand.bereit { color: var(--ja); }
.abschick-stand .small { font-weight: 400; color: var(--muted); }
.termin-offen { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 10px; }
.rueckfrage { border: 1px solid var(--vielleicht); background: var(--vielleicht-soft); border-radius: 10px; padding: 10px 12px; }
.rueckfrage ul { margin: 6px 0; padding-left: 20px; }
.rueckfrage p { margin: 0; }
.abschick-hinweis { color: var(--vielleicht); margin: 6px 0 0; }

/* Nachrichten: Briefumschlag im Kopf, Postfach, Kasten „Dringend“ (12.10.2026) */
.kopf-post { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; color: var(--muted); border-radius: 10px; }
.kopf-post:hover, .kopf-post[aria-current="page"] { color: var(--pink); background: var(--pink-soft); }
.kopf-post + .kopf-user { margin-left: 8px; }
.post-zahl { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 860px) { .kopf-post { margin-left: 8px; } }
.nachrichten { list-style: none; margin: 0; padding: 0; }
.nachrichten li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nachrichten li:last-child { border-bottom: 0; }
.nachricht-link { display: grid; gap: 2px; min-width: 0; color: var(--muted); text-decoration: none; flex: 1; }
.nachricht-link:hover .nachricht-titel { color: var(--pink); }
.nachricht-titel { color: var(--muted); }
.nachrichten li.ungelesen .nachricht-titel { color: var(--text); font-weight: 700; }
.nachrichten li.ungelesen { box-shadow: inset 3px 0 0 var(--pink); padding-left: 10px; }
.nachricht-text { color: var(--muted); overflow-wrap: anywhere; }
.dringend { border: 1px solid rgba(246, 63, 97, 0.5); background: var(--pink-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.dringend summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; list-style: none; }
.dringend summary::-webkit-details-marker { display: none; }
.dringend-titel { color: var(--pink); font-weight: 700; }
.dringend-erster { color: var(--text); font-size: 0.9rem; min-width: 0; }
.dringend[open] .dringend-erster { display: none; }
.dringend ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.dringend li.kritisch a { font-weight: 600; }
.dringend a { color: var(--text); }
.dringend-start { border-color: rgba(246, 63, 97, 0.5); }
.dringend-start h2 { color: var(--pink); }
.dringend-start ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.dringend-start li.kritisch a { font-weight: 600; }

/* Planung: Bildschirm-Texte */
.bildschirm-liste { display: grid; gap: 10px; margin-bottom: 14px; }
.bildschirm-zeile { display: grid; gap: 8px; grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bildschirm-zeile .feld { margin: 0; }
@media (min-width: 760px) { .bildschirm-zeile { grid-template-columns: 170px 1fr 1.6fr; align-items: end; } }
/* Einheitliche Playlist (1.22) */
.pl-kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.pl-kennzahlen div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.pl-kennzahlen b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pl-kennzahlen small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.pl-chip { font-size: 0.78rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--muted); }
.pl-chip b { color: var(--text); }
.pl-jahrzehnte { display: flex; gap: 6px; align-items: flex-end; height: 70px; margin: 18px 0 14px; padding: 0 4px; }
.pl-balken { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 0.7rem; color: var(--muted); }
.pl-balken span { display: block; width: 100%; background: var(--pink); border-radius: 3px 3px 0 0; opacity: 0.85; min-height: 2px; }
.pl-balken b { color: var(--text); margin-bottom: 2px; }
.pl-balken small { margin-top: 3px; }
.pl-kopfzeile { display: flex; gap: 8px; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0 2px; }
.pl-liste { list-style: none; margin: 0; padding: 0; }
.pl-liste li { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.pl-nr { flex: 0 0 24px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; padding-top: 2px; text-align: right; }
.pl-inhalt { flex: 1; min-width: 0; }
.pl-inhalt b { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.3; overflow-wrap: anywhere; }
.pl-artist { display: block; font-size: 0.8rem; color: var(--muted); }
.pl-hinweis { display: block; font-size: 0.78rem; color: var(--vielleicht); }
.pl-meta { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; gap: 0 10px; font-size: 0.75rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; padding-top: 2px; }
.pl-meta .pl-len { color: var(--text); }
.pl-meta .pl-uhr { color: var(--pink); }
.pl-liste li.entfernt .pl-inhalt, .pl-liste li.entfernt .pl-nr, .pl-liste li.entfernt .pl-meta { opacity: 0.45; text-decoration: line-through; }
.pl-haken { flex: 0 0 auto; padding-top: 2px; }
.pl-haken input { width: 22px; height: 22px; margin: 0; accent-color: var(--pink); }
.pl-leiste { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); padding: 10px 0 4px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
@media (min-width: 860px) { .pl-leiste { bottom: 0; } }
/* Playlist-Auswertung (1.23): BPM-Verlauf, Star des Abends, Fakten, Stundenblöcke */
.pl-abschnitt { font-size: 0.95rem; font-weight: 500; margin: 14px 0 6px; }
.pl-verlauf { display: block; width: 100%; height: auto; max-height: 200px; }
.pl-fakten { display: grid; gap: 4px 20px; grid-template-columns: 1fr; margin-bottom: 8px; }
@media (min-width: 760px) { .pl-fakten { grid-template-columns: 1fr 1fr; } }
.pl-stars { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.pl-stars li { padding: 3px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.pl-liste li.pl-stunde { display: block; border-top: none; padding: 12px 0 4px; font-size: 0.75rem; color: var(--pink); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
/* Bild je Mottoparty (1.21) */
.party-liste { margin: 4px 0 14px; }
.party-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.party-zeile.naechste { background: var(--pink-soft); border-top: none; border-radius: var(--radius-sm); padding: 8px; margin: 0 -8px; }
.party-datum { flex: 0 0 84px; line-height: 1.25; white-space: nowrap; }
.party-motto { flex: 1; }
.party-motto .badge { margin-left: 4px; vertical-align: middle; }
.party-knopf { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.zweitlink { color: var(--muted); text-decoration: underline; white-space: nowrap; }
.design-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ---------- Center-Ansicht (geheimer Link, ohne Login; 16.10.2026) ---------- */
.center { width: 100%; max-width: 900px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.center-kopf { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.center-logo { width: 160px; max-width: 40vw; height: auto; }
.center-kopf h1 { margin: 0 0 4px; }
.center-kopf p { margin: 0; }
.center-monat-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.center-monat-kopf h2 { margin: 0; }
.center-liste .pl-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 8px; }
.center-liste .pl-motto { grid-column: 1 / -1; }
.center-liste li.heute .pl-zeile { border-left: 3px solid var(--pink); background: var(--pink-soft); border-radius: var(--radius-sm); }
@media (min-width: 700px) {
    .center-liste .pl-zeile { grid-template-columns: 170px 110px 1fr auto; align-items: baseline; }
    .center-liste .pl-dj { grid-column: auto; }
    .center-liste .pl-motto { grid-column: auto; text-align: right; }
}

/* --- Abendbericht und Bewertung (1.11) ----------------------------------------------------------------- */
.sterne-eingabe { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.sterne-eingabe button { background: none; border: 0; padding: 0 4px; min-width: 44px; min-height: 44px; font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; }
.sterne-eingabe button.an { color: var(--vielleicht); }
.sterne-eingabe button:hover { color: var(--vielleicht); }
.sterne-eingabe [data-sterne-text] { margin-left: 8px; }
.sterne { color: var(--vielleicht); letter-spacing: 1px; }
.sterne .sterne-leer { color: var(--muted); }
.bericht-werte p { margin-bottom: 10px; }
/* ---------- Etappe A (1.13): Abwesenheit, Planungs-Vorschlag, Fairness ---------- */
.zelle.abwesend button {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128, 128, 128, 0.22) 6px 8px);
    color: var(--muted);
}
.zelle .abwesend-mark { font-weight: 600; }
.zelle .vorschlag-mark {
    display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 4px;
    background: var(--vielleicht-soft); color: var(--vielleicht); font-size: 0.72rem; font-weight: 700;
}
.zelle.zugeteilt.vorschlag button { border-style: dashed; }
.fairness-tabelle td, .fairness-tabelle th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fairness-tabelle td:first-child, .fairness-tabelle th:first-child { text-align: left; }
.fairness-tabelle th a { color: inherit; text-decoration: none; }
.fairness-tabelle th a[aria-current="true"] { color: var(--pink); }
/* Fairness am Handy: Karten statt 14 Spalten, Sortierung als Auswahl; ab 860 px die Tabelle mit sortierbaren Köpfen */
.fairness-tabelle-wrap { display: none; }
.fairness-karten .small { margin-top: 2px; }
@media (min-width: 860px) {
    .fairness-tabelle-wrap { display: block; }
    .fairness-karten, .fairness-sortierung { display: none; }
}
/* ---------- Auswertung der Abende (1.12, nur Owner) ---------- */
.auswertung-kacheln { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .auswertung-kacheln { grid-template-columns: repeat(4, 1fr); } }
.auswertung-kachel { padding: 16px; }
.auswertung-kachel .kennzahl { margin: 6px 0 4px; }
.auswertung-balken { list-style: none; margin: 0; padding: 0; }
.auswertung-balken > li { margin-bottom: 12px; }
.auswertung-balken-kopf { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.auswertung-balken-zeile { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.auswertung-balken-fuell { height: 100%; background: var(--pink); border-radius: 5px; }
.auswertung-mottos > li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.auswertung-verlauf { display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.auswertung-monat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.auswertung-monat-wert { font-size: 0.8rem; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.auswertung-monat-saeule { width: 100%; max-width: 48px; height: 110px; display: flex; align-items: flex-end; }
.auswertung-monat-balken { width: 100%; background: var(--pink); border-radius: 4px 4px 0 0; min-height: 2px; }
.auswertung-monat-balken.unter { background: var(--muted); }
.auswertung-tabelle td, .auswertung-tabelle th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auswertung-tabelle td:first-child, .auswertung-tabelle th:first-child { text-align: left; }
.auswertung-tabelle th a { color: inherit; text-decoration: none; }
.auswertung-tabelle th a[aria-current="true"] { color: var(--pink); }
/* am Handy Karten je DJ, ab 860 px die Tabelle mit sortierbaren Köpfen (wie Fairness) */
.auswertung-tabelle-wrap { display: none; }
.auswertung-karten .small { margin-top: 2px; }
@media (min-width: 860px) {
    .auswertung-tabelle-wrap { display: block; }
    .auswertung-karten { display: none; }
}
.auswertung-patzer { border-color: var(--vielleicht); }
.auswertung-patzer q { font-style: italic; }
/* ---------- Portal als App mit Push (1.13) ---------- */
.push-zustand { font-weight: 600; margin: 8px 0; }
.push-schritte { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: schritt; }
.push-schritte li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; counter-increment: schritt; }
.push-schritte li::before { content: counter(schritt); flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.push-schritt-icon { flex: 0 0 auto; color: var(--muted); display: inline-flex; margin-top: 1px; }
.push-geraete > li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.benachrichtigung-wahl { display: grid; grid-template-columns: 1fr; gap: 4px 12px; align-items: center; }
.benachrichtigung-wahl select { width: auto; max-width: 100%; }
@media (min-width: 700px) { .benachrichtigung-wahl { grid-template-columns: 1fr 180px; } .benachrichtigung-wahl label { margin: 0; } }
.anlaesse-liste { display: grid; gap: 4px; }
@media (min-width: 700px) { .anlaesse-liste { grid-template-columns: 1fr 1fr; } }
.push-hinweis .aktionen { margin-top: 8px; }

/* Feedback-Liste (1.14): Karten am Handy, Tabelle ab 860 px; Kennzeichen als Badges */
.feedback-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; }
.feedback-haken input { width: 18px; height: 18px; accent-color: var(--pink); margin: 0; }
.feedback-status { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.feedback-karte-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.feedback-karte-sterne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; color: var(--muted); }
.feedback-karte-sterne strong { display: block; color: var(--text); font-size: 0.95rem; }
.feedback-tabelle td, .feedback-tabelle th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.feedback-tabelle th a { color: inherit; text-decoration: none; }
.feedback-tabelle th a[aria-current="true"] { color: var(--pink); }
.feedback-tabelle-wrap { display: none; }
.feedback-tabelle .feedback-technik-text { display: none; }
@media (min-width: 860px) {
    .feedback-tabelle-wrap { display: block; }
    .feedback-karten { display: none; }
}
/* Feedback-Liste: Texte im Wortlaut (1.14.4, Häkchen „Texte anzeigen“) */
.feedback-texte-block { margin-top: 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); display: grid; gap: 3px; white-space: normal; }
.feedback-texte-block.mit-technik { border-left-color: var(--pink); }
.feedback-texte-block q { quotes: "„" "“"; white-space: pre-line; overflow-wrap: anywhere; }
.feedback-texte-label { color: var(--muted); font-weight: 600; margin-right: 4px; }
.feedback-tabelle tr.mit-texte td { border-bottom: 0; }
.feedback-tabelle tr.feedback-texte td { white-space: normal; padding-top: 0; }
.feedback-tabelle tr.feedback-texte .feedback-texte-block { margin: 0 0 4px 0; max-width: 80ch; }

/* Detailbewertung des DJs (1.16): Anzeige je Stimme und Eingabe (sehen nur Bahn und Admins, nie der DJ) */
.detailbewertung { margin-top: 8px; }
.detailbewertung-liste li { padding: 4px 0; }
.detailbewertung-eingabe .feld { margin-bottom: 10px; }
.detailbewertung-eingabe .feld + .feld { margin-top: -4px; margin-bottom: 16px; }
details.detailbewertung-auf { margin-top: 6px; }
.auswertung-detail th, .auswertung-detail td { white-space: nowrap; }