/*
 * LabelDB v2 – Gestaltung
 *
 * Farben der Panda Group: Petrol #04959A, Weinrot/Bordeaux #990033, Schwarz #000000,
 * dazu Rosa #FFCCDB (Akzent #DEBCE0). Abgeleitete Töne sind so gewählt, dass Text mindestens
 * WCAG AA erreicht (4,5:1) und Farbpunkte als Grafik mindestens 3:1 gegen den Hintergrund:
 * Petrol auf Weiß hat nur 3,6:1, deshalb sind Links und Schaltflächen dunkler (petrol-600/700).
 *
 * Aufbau für weitere Designs und einen Dark Mode: Palette (Grundtöne) und daraus abgeleitete
 * Rollen (z. B. --status-…, --row-…) stehen in :root. Ein weiteres Design überschreibt diese
 * Variablen, z. B. unter :root[data-theme="dark"]; die Regeln darunter verwenden nur Variablen.
 */
:root {
    --petrol: #04959a;
    --petrol-600: #077c81;   /* Schaltflächen, Weiß darauf 5,0:1 */
    --petrol-700: #066a6e;   /* Links auf Weiß 6,4:1 */
    --petrol-800: #05575a;   /* Überschriften-Akzent, aktive Navigation */
    --petrol-300: #8fd0d2;   /* Petrol mittel (pastell); Text darauf 10,0:1 */
    --petrol-soft: #dff1f2;  /* Petrol hell; petrol-800 darauf 7,2:1 */
    --petrol-tint: #eef6f6;
    --wine: #990033;         /* Löschen, Fehler; Weiß darauf 8,7:1 */
    --wine-700: #7a0029;
    --wine-soft: #f8e3e9;    /* Bordeaux pastell; wine-700 darauf 9,2:1 */
    --rose: #ffccdb;         /* Rosa; wine-700 darauf 8,0:1 */
    --rose-accent: #debce0;  /* Akzent (Warte auf Antwort); wine-700 darauf 6,7:1 */
    --rose-700: #c2456f;     /* Rand rosa Farbpunkte, auf Weiß 4,8:1 */
    --rose-tint: #fff1f5;    /* Rosa sehr hell: Faktenzeile, Zeile „heute“. Text 15,9:1, --muted 5,0:1, Links 5,8:1, wine-700 10,3:1 */
    --rose-soft: #ffe3ea;    /* Rosa hell: Hover im Segmentschalter. Text 14,4:1, wine-700 9,4:1, muted 4,6:1 */
    --rose-800: #b40e40;     /* Rosa dunkel (Überschriftenton): auf Weiß 6,8:1, auf Rosa-Tint 6,2:1, auf Rosa 4,9:1, Weiß darauf 6,8:1 */
    --muted-light: #8a9799;  /* Leere Felder (Bezeichnung und Strich): 3,0:1 auf Weiß, 2,8:1 auf Rosa-Tint – bewusst unter AA, weil der Wert nur „leer“ sagt; der Umschalter blendet sie aus */
    --black: #000000;
    --text: #111c1d;
    --muted: #5c6c6e;        /* auf Weiß 5,5:1 */
    --bg: #f4f7f7;
    --surface: #ffffff;
    --border: #d5dfe0;
    --border-strong: #b9c7c9;
    --petrol-200: #bfe0e2;   /* Rand Hinweis */
    --wine-200: #efc4d0;     /* Rand Fehlermeldung */
    --rose-300: #f5a3bc;     /* Rand Warnung */
    --rose-accent-700: #9c62a0; /* Rand Punkte im Akzent, auf Weiß 4,5:1 */
    /* Erfolg Petrol (petrol-800 auf petrol-soft 7,2:1), Warnung Rosa (wine-700 auf Rosa 8,0:1) */
    --ok-text: var(--petrol-800);  --ok-soft: var(--petrol-soft);  --ok-border: var(--petrol-300);
    --warn-text: var(--wine-700);  --warn-soft: var(--rose);       --warn-border: var(--rose-300);
    --gray-text: #3f4d4f; --gray-soft: #e9eeee;

    /* Status (GEMA, Plakate): Hintergrund, Text, Rand des Farbpunkts.
       Text auf Hintergrund ≥ 6,7:1 außer Petrol voll (Schwarz 5,8:1); Ränder auf Weiß ≥ 4,5:1,
       auf den Zeilenfarben (heute, Hover) ≥ 4,0:1. */
    --status-neutral-bg: var(--gray-soft);  --status-neutral-fg: var(--gray-text);  --status-neutral-ring: var(--muted);
    --status-petrol-light-bg: var(--petrol-soft); --status-petrol-light-fg: var(--petrol-800); --status-petrol-light-ring: var(--petrol-700);
    --status-petrol-mid-bg: var(--petrol-300);  --status-petrol-mid-fg: var(--text);  --status-petrol-mid-ring: var(--petrol-700);
    --status-petrol-full-bg: var(--petrol);     --status-petrol-full-fg: var(--black); --status-petrol-full-ring: var(--petrol-700);
    --status-rose-bg: var(--rose);              --status-rose-fg: var(--wine-700);     --status-rose-ring: var(--rose-700);
    --status-accent-bg: var(--rose-accent);     --status-accent-fg: var(--wine-700);   --status-accent-ring: var(--rose-accent-700);
    --status-wine-light-bg: var(--wine-soft);   --status-wine-light-fg: var(--wine-700); --status-wine-light-ring: var(--wine);
    --status-wine-full-bg: var(--wine);         --status-wine-full-fg: #ffffff;        --status-wine-full-ring: var(--wine-700);

    /* Listen: Zeile heute in Rosa-Tint (Text 15,9:1; Punktränder dort: neutral 5,0:1, Petrol 5,8:1,
       Rosa 4,4:1, Rosa-Akzent 4,1:1, Bordeaux 8,0:1 – alle ≥ 3:1), Zeile unter dem Mauszeiger, Monatszeile */
    --row-today: var(--rose-tint);
    --today-bar: var(--rose-800);              /* Balken links an der Zeile heute, 6,2:1 */
    --badge-today-bg: var(--rose-800);         /* „heute“: Weiß darauf 6,8:1 */
    --badge-today-fg: #ffffff;
    --filter-active-bg: var(--rose);           /* aktiver Eintrag im Segmentschalter: wine-700 darauf 8,0:1 */
    --filter-active-fg: var(--wine-700);
    --filter-hover-bg: var(--rose-soft);
    --stripe-a: var(--petrol);                 /* Streifen oben an der Kopfbox: 60 % / 40 % */
    --stripe-b: var(--rose);
    --pattern-dot: var(--rose-accent);         /* Punktmuster im Datumsblock; Text darauf: wine-700 6,7:1, Tag in rose-800 4,0:1 (große Schrift ≥ 3:1) */
    --row-hover: var(--petrol-tint);
    --row-hover-plain: #fafcfc;   /* Zeile unter dem Mauszeiger in einfachen Tabellen */
    --row-group: var(--bg);
    --filter-hover-fg: var(--wine-700);        /* Text im Segmentschalter und in der Sprungleiste unter dem Mauszeiger */
    --date-block-fg: var(--wine-700);          /* Datumsblock: Monat und Wochentag */
    --date-block-day: var(--rose-800);         /* Datumsblock: Tag */

    /* Schaltflächen und Gefahr: bleiben in beiden Designs Petrol bzw. Bordeaux mit Weiß */
    --button-bg: var(--petrol-600);  --button-hover-bg: var(--petrol-700);  --button-fg: #ffffff;
    --danger-bg: var(--wine);        --danger-hover-bg: var(--wine-700);    --danger-fg: #ffffff;
    /* Fehler: Text an Feldern und Pflichtstern, Fläche und Rand der Meldung, Text darauf */
    --error-text: var(--wine);  --error-soft: var(--wine-soft);  --error-border: var(--wine-200);  --error-strong: var(--wine-700);
    --ink: #111c1d;                            /* dunkler Text auf hellen Statusflächen, in beiden Designs */
    /* Pfeil der Auswahlfelder (muted) */
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235c6c6e' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --panda-filter: none;                      /* Panda: im Dunkeln invertiert (CSS, kein neues Bild) */

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(5, 87, 90, .06), 0 4px 16px rgba(5, 87, 90, .06);
    --header-h: 3.5rem;
    color-scheme: light;
}

/*
 * Dunkles Design aus Petrol, Bordeaux und Rosa, bei gewähltem „Dunkel“ (data-theme vom Server).
 * Es gibt keine Variante nach der Systemeinstellung mehr (Nutzerentscheidung: nur hell und dunkel).
 * tests/Ui/ThemeCssTest.php prüft die Kontraste. Kontraste (WCAG AA, Text ≥ 4,5:1, Grafik ≥ 3:1), auf Fläche #16282a:
 * Text 13,0:1 · Überschriften 14,3:1 · muted 7,0:1 · Links 8,6:1 · petrol-800 10,2:1 (auf Petrol-Soft 7,9:1)
 * · Bordeaux-Text 4,7:1 (auf Bordeaux-Soft 5,0:1) · Rosa-Text 9,1:1 (auf Rosa-Tint 10,1:1)
 * · Grau-Text auf Grau-Soft 8,3:1 · Ringe der Farbpunkte: Petrol 8,6:1, Rosa 4,4:1, Akzent 5,5:1,
 * Bordeaux 4,7:1, neutral 7,0:1 (auf der Zeile „heute“ ≥ 4,8:1) · Balken heute 10,1:1
 * · Weiß auf Schaltflächen 5,0:1 (Petrol) und 8,7:1 (Bordeaux). Helle Statuschips (Rosa, Akzent,
 * Petrol voll und mittel) bleiben mit dunklem Text wie im hellen Design.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --petrol-700: #5fd3d7;
    --petrol-800: #8fe0e3;
    --petrol-soft: #123d3f;
    --petrol-tint: #10292b;
    --petrol-200: #1f5557;
    --wine-soft: #3a1220;
    --wine-200: #5a1f33;
    --rose-tint: #2b1620;
    --rose-soft: #3a1a28;
    --rose-300: #8a3a55;
    --rose-700: #d9608a;
    --rose-accent-700: #b98cbc;
    --muted-light: #6f8385;
    --black: #f4f8f8;
    --text: #e6eeee;
    --muted: #9fb3b5;
    --bg: #0f1a1b;
    --surface: #16282a;
    --border: #2a3d3f;
    --border-strong: #3d5456;
    --gray-text: #c5d3d4;
    --gray-soft: #243536;
    --warn-text: #ffb3c8;  --warn-soft: #3a1a28;  --warn-border: #8a3a55;
    --status-petrol-mid-fg: var(--ink);
    --status-petrol-full-fg: #000000;
    --status-wine-light-fg: #ffb3c8;  --status-wine-light-ring: #e0668a;
    --status-wine-full-ring: #e0668a;
    --today-bar: #ffb3c8;
    --row-hover-plain: #1c3133;
    --pattern-dot: #5a3a5c;
    --filter-hover-fg: #ffb3c8;
    --date-block-fg: #ffb3c8;
    --date-block-day: #ffccdb;
    --button-hover-bg: #066a6e;
    --error-text: #e0668a;  --error-strong: #ffb3c8;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239fb3b5' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --panda-filter: invert(1);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

a { color: var(--petrol-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-800); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

h1, h2, h3 { color: var(--black); line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin: 0; font-weight: 650; }
h2 { font-size: 1.1rem; margin: 0 0 .9rem; font-weight: 650; }
h3 { font-size: 1rem; margin: 0 0 .4rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* ---------- Kopfzeile ---------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(4, 149, 154, .12);
}
.topbar-inner {
    display: flex; align-items: center; gap: 1.25rem;
    max-width: 1280px; margin: 0 auto; padding: 0 1rem; min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--black); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.brand img { width: 2.25rem; height: 2.25rem; display: block; filter: var(--panda-filter); }
.brand .brand-sub { color: var(--petrol-700); font-weight: 600; }
.mainnav { display: flex; gap: .15rem; flex: 1; min-width: 0; }
.mainnav a {
    display: inline-block; padding: .45rem .7rem; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.mainnav a:hover { background: var(--petrol-tint); color: var(--petrol-800); }
.mainnav a.is-active { background: var(--petrol-soft); color: var(--petrol-800); box-shadow: inset 0 -2px 0 var(--petrol); }
.topbar-right { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.tenant-switch select { padding: .35rem 1.8rem .35rem .6rem; font-weight: 600; color: var(--petrol-800); background-color: var(--petrol-tint); border-color: transparent; }
/* Designwahl: Sonne und Mond als Schaltflächen; die aktive in Petrol hervorgehoben */
.theme-switch { display: inline-flex; gap: .15rem; padding: .15rem; border: 1px solid var(--border); border-radius: 999px; }
.theme-switch .theme-button { margin: 0; padding: .3rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); line-height: 0; }
.theme-switch .theme-button:hover { background: var(--petrol-tint); color: var(--petrol-800); }
.theme-switch .theme-button.is-active { background: var(--petrol-soft); color: var(--petrol-800); }
.theme-switch svg { width: 1.15rem; height: 1.15rem; display: block; }
.auth-tools { display: flex; justify-content: flex-end; margin: -1rem -.75rem .25rem 0; }
.tenant { font-weight: 600; color: var(--petrol-800); padding: .35rem .6rem; background: var(--petrol-tint); border-radius: var(--radius-sm); }
.session { color: var(--muted); white-space: nowrap; }
.session strong { color: var(--text); font-weight: 600; }
.nav-toggle { display: none; margin: 0; padding: .4rem .55rem; background: transparent; color: var(--text); border: 1px solid var(--border); }
.nav-toggle svg { display: block; width: 1.25rem; height: 1.25rem; }

/* ---------- Inhalt ---------- */
.content { padding: 1.5rem 1rem 3rem; max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head .eyebrow { margin: 0 0 .2rem; font-size: .85rem; color: var(--muted); }
.page-head .eyebrow a { color: var(--muted); }
.page-head .subtitle { margin: .3rem 0 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.page-actions .button, .page-actions button { margin-top: 0; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.card + .card, section + section { margin-top: 1.25rem; }
.card h2:first-child { margin-top: 0; }
.narrow { max-width: 440px; margin: 2rem auto; }
.form-card { max-width: 760px; }
.stack > * + * { margin-top: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: start; }
/* Im Raster trägt nur der Spaltenabstand; danach folgt der übliche Abstand zwischen Karten */
.grid-2 > .card, .grid-2 > section { margin-top: 0; }
.grid-2 + * { margin-top: 1.25rem; }

/* ---------- Meldungen ---------- */
.flash { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid transparent; }
.flash-success { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-border); }
.flash-warning { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-border); }
.flash-error { background: var(--error-soft); color: var(--error-strong); border-color: var(--error-border); }
/* Meldungen der Schnellwechsel (Turbo Streams): unten rechts über dem Inhalt, blenden nach einigen Sekunden aus */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: .5rem; max-width: min(28rem, calc(100vw - 2rem)); pointer-events: none; }
.toasts .toast { margin: 0; box-shadow: var(--shadow); pointer-events: auto; animation: toast-out .4s ease 6s forwards; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .toasts .toast { animation-duration: .01s; animation-delay: 8s; } }
.notice { padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--petrol-tint); border: 1px solid var(--petrol-200); color: var(--petrol-800); margin-bottom: 1rem; }
.empty { color: var(--muted); padding: 1.25rem; text-align: center; }

/* ---------- Schaltflächen ---------- */
button, .button {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: 1rem; padding: .5rem 1rem;
    border: 1px solid var(--button-bg); border-radius: var(--radius-sm);
    background: var(--button-bg); color: var(--button-fg);
    font: inherit; font-weight: 600; line-height: 1.3;
    text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { background: var(--button-hover-bg); border-color: var(--button-hover-bg); color: var(--button-fg); }
.button-secondary, button.secondary { background: var(--surface); color: var(--petrol-800); border-color: var(--border-strong); }
.button-secondary:hover, button.secondary:hover { background: var(--petrol-tint); color: var(--petrol-800); border-color: var(--petrol-600); }
button.danger, .button-danger { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger-fg); }
button.danger:hover, .button-danger:hover { background: var(--danger-hover-bg); border-color: var(--danger-hover-bg); }
button.link {
    margin: 0; padding: 0; background: none; border: 0;
    color: var(--petrol-700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
}
button.link:hover { background: none; color: var(--petrol-800); }
button.link.danger { color: var(--error-text); }
.button-row { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin: 1.25rem 0 0; }
.button-row .button, .button-row button { margin-top: 0; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border-strong); display: flex; justify-content: flex-end; }
.danger-zone button { margin-top: 0; }
form.inline { display: inline; }

/* ---------- Tabellen ---------- */
.table-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--petrol-tint); border-bottom-color: var(--border-strong); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover-plain); }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }
td.actions { text-align: right; white-space: nowrap; }
td.actions a { color: var(--muted); font-weight: 500; }
td.actions a:hover { color: var(--petrol-800); }
/* Tabellenbaustein (templates/table) */
/* Desktop: Kopf der Übersichtslisten (.table-wrap > .data-table) bleibt unter der fixierten Kopfzeile
   stehen. Dafür kein seitliches Scrollen im Rahmen (sonst greift sticky nicht); die Ecken des Rahmens
   übernimmt der Kopf selbst. Eingebettete Tabellen (z. B. „Nächste Gigs“ auf der Startseite) bleiben
   unverändert: Ihr Rahmen scrollt seitlich, ein fixierter Kopf läge dort über den Zeilen.
   Am Handy (siehe unten) scrollt der Rahmen seitlich, der Kopf ist dort nicht fixiert. */
@media (min-width: 901px) {
    .table-wrap:has(> .data-table) { overflow: visible; }
    .table-wrap > .data-table thead th { position: sticky; top: var(--header-h); z-index: 4; box-shadow: inset 0 -1px 0 var(--border-strong); }
    .table-wrap > .data-table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
    .table-wrap > .data-table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
}
.data-table th a.sort { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; font-weight: inherit; }
.data-table th a.sort:hover { color: var(--petrol-800); }
.data-table th a.sort.is-active { color: var(--petrol-800); }
.sort-indicator { font-size: .7rem; opacity: .55; }
.sort.is-active .sort-indicator { opacity: 1; }
.data-table .col-status, .data-table .col-check { text-align: center; width: 1%; white-space: nowrap; }
.data-table td.col-status, .data-table td.col-check { padding-top: .45rem; padding-bottom: .45rem; vertical-align: middle; }
.data-table .col-check form { display: inline; }
.data-table th.col-tools { width: 1%; text-align: right; padding: .3rem .5rem; }
.table-tool { margin: 0; padding: .3rem .45rem; background: var(--surface); color: var(--petrol-800); border-color: var(--border-strong); }
.table-tool:hover { background: var(--petrol-tint); color: var(--petrol-800); border-color: var(--petrol-600); }
.table-tool svg { display: block; width: 1rem; height: 1rem; }
.data-table tbody tr[data-href] { cursor: pointer; }
.data-table tbody tr[data-href]:hover td { background: var(--row-hover); }
.data-table tr.is-past td { color: var(--muted); }
.data-table tr.is-today td { background: var(--row-today); }
.data-table tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--today-bar); }
.badge.today { margin-left: .35rem; background: var(--badge-today-bg); color: var(--badge-today-fg); font-size: .72rem; }
.data-table .group-row th { padding: .35rem .8rem; background: var(--row-group); color: var(--petrol-800); font-size: .85rem; font-weight: 650; border-bottom-color: var(--border); }
.pager { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: .9rem; }
.pager-count { margin: 0; color: var(--muted); }
.pages { display: flex; gap: .2rem; flex-wrap: wrap; }
.pages a, .pages strong, .pages .gap { min-width: 2rem; padding: .25rem .55rem; border-radius: var(--radius-sm); text-align: center; text-decoration: none; }
.pages a:hover { background: var(--petrol-tint); }
.pages strong { background: var(--button-bg); color: var(--button-fg); }
.per-page { display: flex; gap: .5rem; align-items: center; }
.per-page label { margin: 0; color: var(--muted); white-space: nowrap; }
.per-page select { width: auto; padding-top: .3rem; padding-bottom: .3rem; }
.table-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
.legend-item { display: inline-flex; gap: .35rem; align-items: center; }
.legend-sep { margin-left: .75rem; }
.popover { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; margin: auto; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 10px 40px rgba(5, 87, 90, .25); }
.popover::backdrop { background: rgba(17, 28, 29, .3); }
.column-list { margin: 0; padding: 0; list-style: none; }
.column-list li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.column-list .move { display: flex; gap: .3rem; }
.icon-button { justify-content: center; min-width: 2.1rem; margin: 0; padding: .2rem .5rem; background: var(--surface); color: var(--petrol-800); border-color: var(--border-strong); }
.icon-button:hover { background: var(--petrol-tint); color: var(--petrol-800); border-color: var(--petrol-600); }
.icon-button:disabled { opacity: .35; cursor: default; background: var(--surface); border-color: var(--border-strong); }
.popover .reset { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--border-strong); }
.popover .reset .help-text { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

table.channels { background: transparent; }
table.channels td { padding: .3rem .5rem .3rem 0; border-bottom-color: var(--border); }
table.channels td:first-child { color: var(--muted); width: 7rem; white-space: nowrap; }
/* Der Wert steht auf einer Zeile (Spalte so breit wie der Inhalt); am Handy bricht er um, damit die Tabelle nicht über die Karte hinausragt */
table.channels:not(.assignments) td:nth-child(2) { width: 1%; white-space: nowrap; }
/* Kommentarspalte nimmt den Rest, damit Wert und Kommentar beieinander stehen und die Aktionen rechts */
table.channels td.muted { width: 100%; }
/* Zuordnungen (Kontakt → Locations): erste Spalte ist ein Name, keine Art */
table.channels.assignments td:first-child { color: inherit; width: auto; white-space: normal; }

/* ---------- Filter ---------- */
.filter { display: inline-flex; gap: .15rem; padding: .2rem; background: var(--gray-soft); border-radius: 999px; }
.filter a, .filter strong { padding: .25rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .92rem; }
.filter a { color: var(--gray-text); }
.filter a:hover { color: var(--filter-hover-fg); background: var(--filter-hover-bg); }
.filter strong { background: var(--filter-active-bg); color: var(--filter-active-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.filter-form { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.25rem; }
.filter-form label { margin: 0; color: var(--muted); }

/* ---------- Kennzeichen ---------- */
.badge, .gema, .priority, .poster-status {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none;
}
/* GEMA: offen Bordeaux pastell, eingereicht Petrol, blockiert Bordeaux */
.gema-0 { --bgc: var(--status-wine-light-bg); --fg: var(--status-wine-light-fg); --ring: var(--status-wine-light-ring); }
.gema-1 { --bgc: var(--status-petrol-full-bg); --fg: var(--status-petrol-full-fg); --ring: var(--status-petrol-full-ring); }
.gema-2 { --bgc: var(--status-wine-full-bg); --fg: var(--status-wine-full-fg); --ring: var(--status-wine-full-ring); }
/* Ticket-Priorität: niedrig und normal neutral, hoch Rosa, Notfall Bordeaux */
.priority-1, .priority-2 { --bgc: var(--status-neutral-bg); --fg: var(--status-neutral-fg); --ring: var(--status-neutral-ring); }
.priority-3 { --bgc: var(--status-rose-bg); --fg: var(--status-rose-fg); --ring: var(--status-rose-ring); }
.priority-4 { --bgc: var(--status-wine-full-bg); --fg: var(--status-wine-full-fg); --ring: var(--status-wine-full-ring); }
.badge.gray { background: var(--gray-soft); color: var(--gray-text); }
.yes { color: var(--petrol-800); font-weight: 600; }
.no { color: var(--muted); }
/* Plakatstatus (Nutzerentscheidung): In Auftrag gegeben neutral, Verpackt Petrol hell,
   Verschickt Petrol mittel, Abgeschlossen Petrol voll, Warte auf Material Rosa,
   Warte auf Antwort Rosa-Akzent, Nachbestellung Bordeaux */
.poster-status:hover { filter: brightness(.94); }
.poster-status-1 { --bgc: var(--status-neutral-bg); --fg: var(--status-neutral-fg); --ring: var(--status-neutral-ring); }
.poster-status-2 { --bgc: var(--status-petrol-light-bg); --fg: var(--status-petrol-light-fg); --ring: var(--status-petrol-light-ring); }
.poster-status-3 { --bgc: var(--status-petrol-mid-bg); --fg: var(--status-petrol-mid-fg); --ring: var(--status-petrol-mid-ring); }
.poster-status-4 { --bgc: var(--status-rose-bg); --fg: var(--status-rose-fg); --ring: var(--status-rose-ring); }
.poster-status-5 { --bgc: var(--status-accent-bg); --fg: var(--status-accent-fg); --ring: var(--status-accent-ring); }
.poster-status-6 { --bgc: var(--status-petrol-full-bg); --fg: var(--status-petrol-full-fg); --ring: var(--status-petrol-full-ring); }
.poster-status-7 { --bgc: var(--status-wine-full-bg); --fg: var(--status-wine-full-fg); --ring: var(--status-wine-full-ring); }
/* Ticketstatus: Eingetragen Rosa (offen, braucht Aufmerksamkeit), Behoben Petrol voll, Abgelehnt Bordeaux hell, Derzeit nicht möglich Rosa-Akzent */
.ticket-status-1 { --bgc: var(--status-rose-bg); --fg: var(--status-rose-fg); --ring: var(--status-rose-ring); }
.ticket-status-2 { --bgc: var(--status-petrol-full-bg); --fg: var(--status-petrol-full-fg); --ring: var(--status-petrol-full-ring); }
.ticket-status-3 { --bgc: var(--status-wine-light-bg); --fg: var(--status-wine-light-fg); --ring: var(--status-wine-light-ring); }
.ticket-status-4 { --bgc: var(--status-accent-bg); --fg: var(--status-accent-fg); --ring: var(--status-accent-ring); }
/* Kennzeichen in Statusfarbe; Links behalten die Textfarbe auch beim Überfahren */
.badge, .gema, .priority, .poster-status, a.poster-status:hover { background: var(--bgc); color: var(--fg); }

/* Farbpunkte: Farbe des Status, Rand in einer dunkleren Abstufung (≥ 3:1 gegen den Hintergrund) */
.dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; vertical-align: middle; background: var(--bgc, transparent); box-shadow: inset 0 0 0 2px var(--ring, var(--muted)); }
.dot-none { background: transparent; box-shadow: none; border: 2px dashed var(--muted); }
.dot-link { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; border-radius: 50%; }
.dot-link:hover { background: var(--petrol-soft); }

/* ---------- Detailseiten ---------- */
.details { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .55rem 1.5rem; margin: 0; }
.details dt { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .15rem; }
.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Gefüllte Werte etwas kräftiger; leere Felder (Bezeichnung und Strich) hell, klein und ohne Versalien */
.details dd.is-filled, .fact.is-filled dd { font-weight: 500; }
.details dt.is-empty { color: var(--muted-light); text-transform: none; letter-spacing: 0; font-size: .82rem; }
.details dd.is-empty { color: var(--muted-light); font-size: .85rem; }
.fact.is-empty dt, .fact.is-empty dd { color: var(--muted-light); }
.fact.is-empty dd { font-weight: 400; font-size: .9rem; }
.quantities { display: inline-flex; flex-wrap: wrap; gap: 0 .9rem; }
.qty-pair.is-empty { color: var(--muted-light); font-size: .9em; }
.qty-pair.is-filled { font-weight: 500; }
/* Umschalter „Leere Felder ausblenden“: die Seite bekommt die Klasse hide-empty */
.hide-empty .details .is-empty, .hide-empty .facts .is-empty, .hide-empty .qty-pair.is-empty { display: none; }
.hide-empty .details:not(:has(.is-filled))::after { content: "Keine Angaben."; grid-column: 1 / -1; color: var(--muted-light); }
.details dd a { overflow-wrap: anywhere; }
.contact-card { margin: .75rem 0; padding: 1rem; }
.contact-card h3 { margin: 0 0 .25rem; }
.contact-card h3 a { text-decoration: none; }
.actions-row { margin: .6rem 0 0; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
details.add { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .75rem; }
details.add summary { cursor: pointer; color: var(--petrol-700); font-weight: 600; list-style: none; }
details.add summary::-webkit-details-marker { display: none; }
details.add summary::before { content: "+"; display: inline-block; width: 1.3rem; height: 1.3rem; margin-right: .5rem; text-align: center; line-height: 1.3rem; border-radius: 50%; background: var(--petrol-soft); color: var(--petrol-800); }
details.add[open] summary::before { content: "–"; }
details.add form { margin-top: .5rem; }
.version { margin: .75rem 0; }
.gema-file { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.gema-kind + .gema-kind { margin-top: 1.25rem; }
.upload-form { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.upload-form > div { flex: 0 1 26rem; margin: 0; min-width: 0; }
.upload-form button { margin-top: 0; }
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.images figure { margin: 0; }
.images img { display: block; width: 100%; height: 170px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-soft); }
.images figcaption { font-size: .9em; margin-top: .3rem; }
.status-switch { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.status-switch label { margin: 0; }
.status-switch button { margin-top: 0; }
table.poster-orders .status-switch button { padding: .25rem .6rem; }
/* Plakatstatus als Auswahlfeld in der Statusfarbe (Pfeil in der Textfarbe) */
.status-switch .status-select {
    width: auto; padding: .2rem 1.9rem .2rem .7rem; border: 1px solid var(--ring); border-radius: 999px;
    background-color: var(--bgc); color: var(--fg); font-weight: 600; font-size: .9rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1rem) 55%, calc(100% - .7rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat;
}
.status-switch .status-select:hover { filter: brightness(.96); }
/* Plakatstatus als Chip-Reihe (Radio-Gruppe): gewählt = Statusfarbe mit Haken, übrige weiß mit Farbpunkt */
.status-heading { font-size: .85rem; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 .5rem; }
.status-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.status-chips label { position: relative; margin: 0; }
.status-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.status-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .8rem .25rem .6rem; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font-size: .9rem; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap;
}
.status-chip:hover { border-color: var(--ring); background: var(--petrol-tint); }
.status-chip .dot { background: var(--bgc); box-shadow: inset 0 0 0 2px var(--ring); }
.status-chips input:checked + .status-chip { background: var(--bgc); color: var(--fg); border-color: var(--ring); font-weight: 650; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ring); }
.status-chips input:checked + .status-chip .dot { display: none; }
.status-chips input:checked + .status-chip::before { content: "✓"; }
.status-chips input:focus-visible + .status-chip { outline: 2px solid var(--petrol); outline-offset: 3px; }
.status-chips-form + .help-text { margin-bottom: 1rem; }
.status-chips-form { margin-bottom: 1rem; }
/* Kopfbox der Detailseiten */
.head-box { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.head-box::before { content: ""; display: block; height: .35rem; background: linear-gradient(90deg, var(--stripe-a) 0 60%, var(--stripe-b) 60% 100%); }
.head-main { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.1rem 1.25rem 1rem; }
.head-main .page-head { flex: 1; min-width: 0; margin: 0; }
.head-main .page-head > div:first-child { flex: 1 1 20rem; min-width: 0; }
.head-main .page-actions { flex: none; }
.head-box h1 { font-size: 1.7rem; }
.head-block { flex: none; }
.date-block {
    min-width: 5.5rem; text-align: center; padding: .55rem .75rem; border: 1px solid var(--rose-300); border-radius: var(--radius-sm);
    background-color: var(--rose-tint); background-image: radial-gradient(var(--pattern-dot) 1.2px, transparent 1.3px); background-size: 9px 9px;
    color: var(--date-block-fg);
}
.date-block span { display: block; }
.date-block .day { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--date-block-day); }
.date-block .month { margin-top: .25rem; font-size: .85rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.date-block .weekday { font-size: .8rem; }
.image-block img { display: block; width: 5.5rem; height: 5.5rem; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-soft); }
.head-box .subtitle { margin: .1rem 0 0; color: var(--text); }
.head-box .subtitle a { font-weight: 600; text-decoration: none; }
.head-box .subtitle a:hover { text-decoration: underline; }
.head-box .eyebrow a { text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.5; text-decoration: none; background: var(--bgc, var(--status-neutral-bg)); color: var(--fg, var(--status-neutral-fg)); }
a.chip:hover { color: var(--fg, var(--status-neutral-fg)); filter: brightness(.96); text-decoration: underline; }
.chip .dot { width: .65rem; height: .65rem; background: var(--surface); }
.chip-on { --bgc: var(--status-petrol-light-bg); --fg: var(--status-petrol-light-fg); }
.chip-rose { --bgc: var(--status-rose-bg); --fg: var(--status-rose-fg); }
.head-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; padding: .75rem 1.25rem .85rem; border-top: 1px solid var(--border); background: var(--rose-tint); }
.facts { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .4rem 1.5rem; margin: 0; min-width: 0; }
.fact dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fact dd { margin: 0; overflow-wrap: break-word; }
.fact dd .muted { font-weight: 400; }
.empty-toggle { margin: 0; display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.empty-count { font-size: .85rem; color: var(--muted); }
.page-tools { display: flex; justify-content: flex-end; margin: -.5rem 0 .75rem; }
/* Sprungleiste der Gig-Detailseite: klebt unter der Kopfzeile, aktiver Abschnitt in Rosa */
.jumpbar { position: sticky; top: var(--header-h); z-index: 10; display: flex; gap: .25rem; align-items: center; padding: .4rem .5rem; margin: 0 0 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow-x: auto; }
.jumpbar a { padding: .3rem .8rem; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.jumpbar a:hover { background: var(--filter-hover-bg); color: var(--filter-hover-fg); }
.jumpbar a.is-active { background: var(--filter-active-bg); color: var(--filter-active-fg); }
.jumpbar .spacer { flex: 1; min-width: .5rem; }
.jumpbar .empty-toggle { padding: 0 .5rem; }
/* Bereiche paarweise, gleich hoch; ein weiteres Paar (z. B. Setlist und Mitschnitte) kommt als weiteres .section-pair dazu */
.section-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
.section-pair > .section { margin-top: 0; min-width: 0; }
/* knapp unter der Leiste, aber noch über der Linie des Scroll-Spy (Leistenunterkante + 24px) */
.section { scroll-margin-top: calc(var(--header-h) + 3.25rem); }
.section h2 { display: flex; align-items: center; gap: .6rem; }
.section h2::before { content: ""; flex: none; width: .5rem; height: 1.1rem; border-radius: 3px; background: var(--petrol); }
.section.rose h2::before { background: var(--rose); box-shadow: inset 0 0 0 1px var(--rose-700); }
.section h2 .count { font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--gray-soft); padding: .05rem .55rem; border-radius: 999px; }
.section h2 .section-actions { margin-left: auto; font-size: .9rem; font-weight: 500; }
.contact-line + .contact-line { margin-top: .5rem; }
.contact-channels { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: .9rem; }
/* GEMA: Dateien als Plätze, je eine Zeile */
.gema-comment { margin-top: 1rem; }
.file-slots { margin-top: 1.25rem; display: grid; gap: .5rem; }
.file-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .6rem .75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.file-slot.is-filled { border-style: solid; background: var(--petrol-tint); }
.file-slot .kind { font-weight: 600; min-width: 7.5rem; }
.file-slot .file-name { overflow-wrap: anywhere; }
.file-slot form.inline { margin-left: auto; }
.file-slot .upload-form { flex: 1 1 14rem; margin-left: auto; justify-content: flex-end; }
.file-slot .upload-form > div { flex: 1 1 10rem; }
.empty-toggle button.link { font-size: .85rem; color: var(--muted); }
.empty-toggle button.link:hover { color: var(--petrol-800); }
/* Listenbaustein: Mengenspalten, Filterformular, Suche */
.qty { text-align: right; }
.qty-empty { color: var(--muted); }
.mobile-meta { display: none; }
.date-line { white-space: nowrap; }
.gig-link { display: inline-flex; vertical-align: middle; margin-left: .35rem; padding: .1rem; border-radius: var(--radius-sm); color: var(--muted); }
.gig-link:hover, .gig-link:focus-visible { color: var(--petrol-800); background: var(--petrol-soft); }
.gig-link svg { width: .95rem; height: .95rem; display: block; }
.has-tip { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.table-filters { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; margin: 0; }
.table-filters label { margin: 0; color: var(--muted); }
.table-filters select { padding-top: .35rem; padding-bottom: .35rem; }
.table-filters input[type=search] { width: 15rem; max-width: 100%; padding-top: .35rem; padding-bottom: .35rem; }
.table-filters button { margin-top: 0; padding: .35rem .8rem; }
.search-clear { font-size: .9rem; }
/* Wisch-Hinweis: Der Rahmen blendet an der Seite aus, zu der es weitergeht (scroll-hint) */
.table-wrap.can-scroll-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.table-wrap.can-scroll-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.table-wrap.can-scroll-left.can-scroll-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
/* Lieferadresse: Empfänger als erste Zeile; dezenter Hinweis, wenn sie von der Location abweicht (wie der Datumsblock: hell wine-700 auf Rosa-Tint 10,3:1, dunkel Rosa-Text auf Rosa-Tint 10,1:1) */
.recipient { font-weight: 600; }
.delivery-differs { display: inline-block; margin-top: .3rem; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--rose-tint); color: var(--date-block-fg); border: 1px solid var(--rose-300); }
/* Plakatseite: aktuelle Version als Formular. Mengen in einer Zeile, Lieferadresse mit der Adresse der
   Location daneben; „Speichern (neue Version)“ wird erst bei einer Änderung aktiv (dirty-form). */
.version-meta { margin: .75rem 0 1rem; font-size: .85rem; color: var(--muted); }
.poster-edit { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.quantities-row > div { flex: 1 1 5.5rem; min-width: 5.5rem; }
.poster-edit .row > div, .delivery-fields > div { margin-bottom: 1rem; }
.delivery-fields .status-heading { margin-top: 1.25rem; }
.delivery-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 1.25rem; align-items: start; margin-top: .5rem; }
.location-check { padding: .75rem .9rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }
.location-check p { margin: 0 0 .5rem; }
.poster-edit .form-actions button[disabled] { opacity: .5; cursor: not-allowed; }
.poster-edit.is-dirty .form-actions button { box-shadow: 0 0 0 3px var(--petrol-soft); }
/* Verlauf der früheren Versionen */
table.versions td { vertical-align: top; }
table.versions td:nth-child(1) { white-space: nowrap; }

/* ---------- Formulare ---------- */
label { display: block; margin: 0 0 .3rem; font-weight: 500; color: var(--text); }
label.required::after { content: " *"; color: var(--error-text); }
form > div, .form-card form > div { margin-bottom: 1rem; }
/* Zusammengesetzte Felder (Formular, Adresse, Mengen) stehen in einem Container mit ID; ihre Zeilen haben denselben Abstand wie die obere Ebene */
form div[id] > div { margin-bottom: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=time], input[type=search], textarea, select {
    padding: .5rem .65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=time], input[type=search], textarea { width: 100%; }
/* Auswahlfelder füllen die Breite nur in Formularen; in Filterleisten, Kopfzeile und Seitengröße bleiben sie so breit wie ihr Inhalt */
select { width: auto; max-width: 100%; }
.form-card select, .card form select, .status-switch select, .popover select { width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--petrol); outline: 2px solid rgba(4, 149, 154, .25); outline-offset: 0; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error-text); }
select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem; }
input[type=file] { width: 100%; padding: .45rem 0; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--button-bg); vertical-align: middle; }
textarea { min-height: 5.5rem; resize: vertical; }
.help-text { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.form-errors { margin: .35rem 0 0; padding: 0; list-style: none; color: var(--error-text); font-size: .9rem; }
form > .form-errors { margin-bottom: 1rem; padding: .6rem .8rem; background: var(--error-soft); color: var(--error-strong); border-radius: var(--radius-sm); }
.checkbox-row { display: flex; align-items: center; gap: .55rem; }
.checkbox-row label { margin: 0; }
fieldset { margin: 0 0 1.25rem; padding: 1rem 1rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
legend { padding: 0 .4rem; font-weight: 600; color: var(--petrol-800); }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 10rem; }
.form-actions { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.form-actions button, .form-actions .button { margin-top: 0; }
.collection-item { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px dashed var(--border); }
.collection-item > div { display: flex; gap: .75rem; flex-wrap: wrap; flex: 1; }
.collection-item > div > div, form .collection-item div[id] > div { flex: 1; min-width: 9rem; margin: 0; }
.collection-item button.link { padding-bottom: .55rem; }
.autocomplete { position: relative; margin-bottom: 1rem; }
/* Gig-Formular in Abschnitten (<details>): breiter, damit Datum/Einlass/Beginn und Preise nebeneinander passen */
.gig-form { max-width: 980px; }
.form-section { margin: 0 0 .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.form-section.has-errors { border-color: var(--error-border); }
.form-section > summary { display: flex; align-items: baseline; gap: .75rem; padding: .7rem .9rem; cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary::before { content: ""; flex: none; align-self: center; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.form-section[open] > summary::before { transform: rotate(45deg); }
.form-section > summary:hover { background: var(--petrol-tint); }
.form-section > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; }
.form-section .section-title { font-weight: 600; color: var(--petrol-800); }
.form-section.has-errors .section-title { color: var(--error-strong); }
.form-section .section-hint { margin-left: auto; text-align: right; font-size: .8rem; color: var(--muted); }
.form-section .section-hint.is-filled { color: var(--petrol-800); font-weight: 600; }
.form-section .section-body { padding: .25rem .9rem .1rem; border-top: 1px solid var(--border); }
.form-section .section-body > :first-child { margin-top: 1rem; }
.form-section .section-body > div { margin-bottom: 1rem; }
.form-section .section-body > div:empty { margin: 0; }
.form-section fieldset { margin-bottom: 1rem; }
.form-section .row > div { min-width: 12rem; }
/* Checkbox neben einem Eingabefeld auf dessen Höhe */
.row > .row-checkbox { display: flex; align-items: flex-end; padding-bottom: .65rem; }
.row > .row-checkbox > div { margin: 0; }
label .weekday { margin-left: .35rem; font-weight: 400; color: var(--muted); }
/* Hoteladresse zweizeilig: Straße breit, Hausnummer schmal; PLZ schmal, Stadt breit */
.address-line-1 > div:first-child { flex: 3; }
.address-line-1 > div:last-child, .address-line-2 > div:first-child { flex: 1; min-width: 7rem; }
.address-line-2 > div:nth-child(2) { flex: 3; }
/* Warnung unter dem Datum (Gig desselben Künstlers am selben Datum): Rosa, nicht blockierend */
.same-day-warning { display: flex; gap: .6rem; align-items: flex-start; margin: -.25rem 0 1rem; padding: .55rem .8rem; background: var(--rose-tint); border: 1px solid var(--rose-300); border-radius: var(--radius-sm); color: var(--warn-text); font-size: .9rem; }
.same-day-warning a { color: var(--warn-text); }
.same-day-icon, .location-info-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-top: .05rem; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.same-day-icon { background: var(--rose-800); color: #ffffff; }
/* Infokasten zur gewählten Location */
.location-info { display: flex; gap: .6rem; align-items: flex-start; margin: -.25rem 0 1rem; padding: .55rem .8rem; background: var(--petrol-tint); border: 1px solid var(--petrol-200); border-radius: var(--radius-sm); color: var(--petrol-800); font-size: .9rem; line-height: 1.5; }
.location-info-icon { background: var(--button-bg); color: var(--button-fg); font-style: italic; font-family: Georgia, serif; }
.location-info .qty-empty { color: var(--muted); }
/* Fußzeile klebt unten; scroll-padding, damit Felder beim Anspringen nicht darunter liegen */
html { scroll-padding-bottom: 5rem; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; margin: 1rem -1.25rem -1.25rem; padding: .9rem 1.25rem; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .25); }
.sticky-actions .actions-hint { margin-left: auto; font-size: .85rem; }
.autocomplete-results { position: absolute; z-index: 10; left: 0; right: 0; margin: .2rem 0 0; padding: .25rem 0; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 16rem; overflow-y: auto; }
.autocomplete-results li { padding: 0; }
.autocomplete-results li.muted { padding: .4rem .7rem; }
.autocomplete-results [role=option] { padding: .45rem .7rem; cursor: pointer; color: var(--text); }
.autocomplete-results [role=option]:hover, .autocomplete-results [role=option].is-active { background: var(--petrol-tint); color: var(--petrol-800); }
.autocomplete-results [role=option].is-active { box-shadow: inset 3px 0 0 var(--petrol); }

/* ---------- Anmeldung, Start, Fehler ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 400px; text-align: center; padding: 2rem 1.75rem; }
.auth-card img { width: 6rem; height: 6rem; margin-bottom: .5rem; filter: var(--panda-filter); }
.auth-card h1 { margin-bottom: .25rem; }
.auth-card .subtitle { color: var(--muted); margin-bottom: 1.25rem; }
.auth-card form { text-align: left; }
.auth-card button { width: 100%; justify-content: center; }
.auth-foot { margin-top: 1rem; color: var(--muted); font-size: .85rem; }
/* Startseite: „Nächste Gigs“ und „Offen“ nebeneinander, darunter die Kacheln */
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.home-grid > .section { margin: 0; }
.next-gigs-wrap { margin: 0 -1.25rem -1.25rem; overflow-x: auto; }
.next-gigs { width: 100%; }
.next-gigs td, .next-gigs th { padding-top: .5rem; padding-bottom: .5rem; }
.open-counts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.open-counts a { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); border: 1px solid var(--border); }
.open-counts a:hover { border-color: var(--petrol); background: var(--petrol-tint); }
/* Zahl: offen = Rosa mit Bordeaux (8,0:1, dunkel Rosa-Tint mit Rosa-Text 10,1:1), nichts offen = gedämpft */
.open-number { flex: none; min-width: 2.4rem; padding: .15rem .45rem; border-radius: 999px; text-align: center; font-size: 1.1rem; font-weight: 700; background: var(--filter-active-bg); color: var(--filter-active-fg); }
.open-counts .is-zero .open-number { background: var(--gray-soft); color: var(--gray-text); }
.open-counts .is-zero .open-label { color: var(--muted); }
.open-label .muted { font-size: .85rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tile { display: block; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.tile:hover { border-color: var(--petrol); color: var(--petrol-800); }
.tile strong { display: block; font-size: 1.05rem; margin-bottom: .2rem; color: var(--petrol-800); }
.tile span { color: var(--muted); font-size: .9rem; }
.error-page { text-align: center; padding: 3rem 1rem; }
.error-page img { width: 7rem; height: 7rem; opacity: .9; filter: var(--panda-filter); }
.error-page .code { font-size: 3rem; font-weight: 700; color: var(--petrol-800); margin: .5rem 0 0; letter-spacing: -.02em; }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
    .topbar-inner { flex-wrap: wrap; gap: .75rem; padding: .5rem 1rem; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .mainnav, .topbar-right { display: none; flex: 0 0 100%; width: 100%; }
    .topbar.is-open .mainnav { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); padding-top: .5rem; }
    .topbar.is-open .mainnav a { padding: .6rem .5rem; }
    .topbar.is-open .topbar-right { display: flex; flex-wrap: wrap; justify-content: space-between; padding: .5rem 0 .25rem; border-top: 1px solid var(--border); margin-left: 0; }
    .content { padding: 1rem .75rem 2.5rem; }
    h1 { font-size: 1.35rem; }
    .details { grid-template-columns: 1fr; gap: .15rem; }
    .details dt { margin-top: .6rem; }
    .details dt:first-child { margin-top: 0; }
    .card { padding: 1rem; }
    .page-actions { width: 100%; }
    .filter { max-width: 100%; overflow-x: auto; }
    .legend-sep { margin-left: 0; flex-basis: 100%; }
    table.channels td.actions { white-space: normal; }
    /* Handy: weniger seitliches Scrollen – Stadt unter dem Datum, Mengen in einer Zeile */
    .col-desktop-only { display: none; }
    .jumpbar { margin-left: -.25rem; margin-right: -.25rem; }
    .section-pair { grid-template-columns: minmax(0, 1fr); }
    .delivery-grid { grid-template-columns: minmax(0, 1fr); }
    .quantities-row > div { flex-basis: 30%; min-width: 0; }
    /* Designwahl am Handy: Fingergröße 44 × 44 px */
    .theme-switch .theme-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .theme-switch svg { width: 1.3rem; height: 1.3rem; }
    .auth-tools { margin: -.25rem -.25rem .5rem 0; }
    .home-grid { grid-template-columns: minmax(0, 1fr); }
    .next-gigs-wrap { margin: 0 -1rem -1rem; }
    /* Handy: Datum und „heute“ dürfen umbrechen, Stadt unter die Location */
    .next-gigs .date-line { white-space: normal; }
    .next-gigs td, .next-gigs th { padding-left: .5rem; padding-right: .5rem; }
    .form-section > summary { flex-wrap: wrap; }
    .form-section .section-hint { flex-basis: 100%; margin-left: 1.25rem; text-align: left; }
    /* Handy: die Fußzeile klebt nicht, sie würde ein Viertel des Bildschirms verdecken */
    .sticky-actions { position: static; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; box-shadow: none; }
    .sticky-actions .actions-hint { flex-basis: 100%; margin-left: 0; }
    /* Dateiplatz: Hochladen-Knopf unter der Dateiauswahl */
    .file-slot .upload-form { flex-direction: column; align-items: stretch; flex-basis: 100%; }
    .file-slot .upload-form > div { flex: 0 0 auto; }
    .file-slot .upload-form button { align-self: flex-start; }
    .head-main { flex-wrap: wrap; gap: .9rem; padding: 1rem; }
    .head-box h1 { font-size: 1.35rem; }
    .head-foot { padding: .7rem 1rem .8rem; }
    .data-table th, .data-table td { padding-left: .5rem; padding-right: .5rem; }
    .mobile-meta { display: block; color: var(--muted); font-size: .85rem; }
    .mobile-meta > span { display: block; }
    .mobile-qty { margin-top: .1rem; }
    .status-switch .status-select { font-size: .8rem; padding-left: .55rem; padding-right: 1.6rem; background-position: calc(100% - .9rem) 55%, calc(100% - .6rem) 55%; }
    .data-table th.col-tools { padding-left: .25rem; padding-right: .25rem; }
    .table-filters input[type=search] { width: 100%; }
    table.channels:not(.assignments) td:nth-child(2) { width: auto; min-width: 6rem; white-space: normal; overflow-wrap: anywhere; }
}
@media print {
    .topbar, .page-actions, .danger-zone, details.add, .button-row, .col-tools, .per-page, .pages { display: none; }
}