/* Gemeinsame Design-Basis für alle app/public/*.html-Seiten. Jede Seite bleibt eine
   eigenständige Einzeldatei (kein Templating/Framework, siehe CLAUDE.md) — dieses File wird
   nur per <link> eingebunden.

   Optik: Event OS in Trade-Republic-Nähe — Schwarz/Grau/Weiß, fette Typo, viel Luft,
   wenig Chrom. Rollenfarben und Bedeutungsvokabular bleiben unverändert.
   Kein externer Font (CSP ohne font-src).

   Zwei Layout-Familien:
   - .auth-card  = zentrierte Box auf Login/Registrierung/Passwort-Seiten.
   - .card/.card-h/.card-b = Inhalts-Panels im App-Shell (Konto/Admin/Cockpit). */

/* ---------- Breakpoints: die EINE Stelle ----------
   Drei Layouts, zwei Grenzen — und keine dritte:

     Handy     bis 767px      @media (max-width:767px)
     Tablet    768 – 1024px   @media (min-width:768px) and (max-width:1024px)
     Desktop   ab 1025px      @media (min-width:1025px)

   „Handy und Tablet" zusammen heisst (max-width:1024px), „ab Tablet"
   (min-width:768px). Andere Zahlen unterhalb von 1025 gibt es nicht.

   Warum das hier als Kommentar steht und nicht als Variable: CSS wertet in
   `@media` keine Custom Properties aus, und einen Build-Schritt gibt es in
   diesem Projekt nicht. Die Zahl MUSS also in jeder Regel ausgeschrieben
   stehen. Damit sie trotzdem nicht auseinanderläuft:
   - JavaScript fragt die Breite nur über `MEDIA` aus /lib/ui.js ab,
   - `mobile.test.js` liest alle Seiten und Stylesheets und weist jede andere
     Breite zurück.
   Vorher standen allein in operations.html dreizehn verschiedene Werte
   zwischen 560 und 1280.

   Werte AB 1025 (1180 in der ADL-Abrechnung, 1280 im Advancing) verfeinern den
   Desktop und sind erlaubt.

   ZIELGRÖSSEN hängen nicht an der Breite, sondern am Eingabegerät:
   `(pointer:coarse)`. Ein Tablet im Querformat ist 1180px breit, bekommt also
   das Desktop-Layout — und wird trotzdem mit dem Finger bedient. */

:root{
  /* Dark: neutrales Schwarz statt blauem Navy */
  --bg:#0a0a0a; --bg-elev:#111111; --bg-card:#161616; --bg-card-2:#1e1e1e;
  --border:#2a2a2a; --border-soft:#222222;
  --text:#f5f5f5; --dim:#a3a3a3; --faint:#8c8c8c;
  --accent:#4d7cff; --accent-soft:#1a1f2e;
  --master:#f3b73c; --social:#ff5d8f; --staff:#4d7cff; --artwork:#a78bfa; --admin:#2dd4bf;
  --live:#fb7185; --good:#34d399;
  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --confirm-bg:var(--bg-card); --confirm-border:var(--border);
  /* Anker für JS-generierte color-mix()-Farben (landing.html) */
  --mix-fg:#ffffff; --mix-bg:#111111;
  --shadow-card:none;
  --shadow-card-hover:0 8px 28px rgba(0,0,0,.45);
  --topbar-bg:rgba(10,10,10,.88);
  --skeleton-1:var(--bg-card-2); --skeleton-2:#2a2a2a;
  /* Primärknöpfe: hell auf dunkel (invertierte Pille) */
  --btn-fg:#0a0a0a; --btn-border:#f5f5f5; --btn-primary-bg:#f5f5f5;
  --ok-text:#6ee7b7;
  --amber-text:#fcd34d; --rose-text:#fda4b4;
  --deals-bg:linear-gradient(180deg,#1c1407,#15110a); --deals-border:#3a2a0c;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
  --radius-table:0;
  /* EINE Abstands-Skala für das ganze Werkzeug. Werte dazwischen (13, 18, 22)
     sind der Grund, warum Karten in einer Reihe unterschiedlich wirken,
     obwohl sie gleich gebaut sind. Nichts ausserhalb dieser sieben Stufen. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  /* Seitenmass: Breite der Seitenleiste und Polster des Inhalts — hier EINMAL,
     damit Leiste, Kopf und Inhalt dieselbe Kante teilen. */
  /* --side-w-tablet war 200px: auf einem 820px-Tablet hochkant ein VIERTEL der
     Breite für Navigation, der Kalender bekam 620px und presste sieben Spalten
     auf je 85px. Erst eine Schiene mit Symbol UND Beschriftung (84px), dann —
     auf Wunsch des Betreibers ein- und ausklappbar — eine reine Symbol-Schiene
     mit 64px. Die Beschriftungen kommen beim Ausklappen zurück; nebenbei sind
     die Einträge dadurch alle exakt gleich hoch (vorher 45 ODER 55px, je
     nachdem ob die Beschriftung umbrach). */
  --side-w:280px; --side-w-tablet:64px; --page-x:var(--sp-5);
  /* Kartenkante statt Schatten (Hausregel) und ein Aufhellen fürs Überfahren. */
  --card-border:var(--border-soft);
  --card-hover:var(--bg-card-2);
  --hover-ms:150ms;
}

/* Light: Arbeitsfläche wie Figma-Vorschau — Weißraum, graue Flächen, schwarze Pillen.
   Rollen-/Statusfarben bleiben. Dark ist Default; Anti-FOUC setzt data-theme vor Paint. */
:root[data-theme="light"]{
  --bg:#ffffff; --bg-elev:#ffffff; --bg-card:#f5f5f5; --bg-card-2:#eeeeee;
  --border:#e5e5e5; --border-soft:#f0f0f0;
  --text:#0a0a0a; --dim:#525252; --faint:#5c5c5c;
  --accent:#2f5fe0; --accent-soft:#eceff3;
  --mix-fg:#0a0a0a; --mix-bg:#ffffff;
  --shadow-card:none;
  --shadow-card-hover:0 8px 24px rgba(0,0,0,.08);
  --topbar-bg:rgba(255,255,255,.9);
  --skeleton-1:#eeeeee; --skeleton-2:#f5f5f5;
  --btn-fg:#ffffff; --btn-border:#0a0a0a; --btn-primary-bg:#0a0a0a;
  --ok-text:#0f9d63;
  --amber-text:#8a6100; --rose-text:#c01f3f;
  --deals-bg:linear-gradient(180deg,#fff7e6,#fdf1d6); --deals-border:#e6cf94;
  --confirm-bg:var(--bg-elev); --confirm-border:var(--border);
  /* Hell: --border-soft (#f0f0f0) verschwindet auf der Kartenfläche (#f5f5f5).
     Die Kante braucht hier den kräftigeren Wert, sonst ist die Karte randlos. */
  --card-border:var(--border);
  --card-hover:#e9e9e9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Die Bildlaufleiste bekommt IMMER ihren Platz, auch auf kurzen Seiten. Ohne
   das springt der ganze Inhalt beim Bereichswechsel um die Breite der Leiste
   (unter Windows 15px) zur Seite, sobald eine Ansicht kürzer ist als das
   Fenster — der häufigste Grund für „das verrutscht". */
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ---- Formularfelder ---- */
label{display:block;font-size:11px;color:var(--faint);font-weight:600;margin:0 0 6px}
input,select,textarea{width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:13.5px;padding:9px 11px;outline:none;
  transition:border-color .14s ease,background-color .14s ease}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input:disabled{opacity:.7}
.field{margin-bottom:14px}

/* ---- Passwort-Auge (bisher 5-fach dupliziert) ---- */
.pw-row{position:relative}
.pw-row input{padding-right:44px}
.pw-toggle{position:absolute;right:4px;top:4px;bottom:4px;width:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--faint);cursor:pointer;border-radius:6px;padding:0;line-height:0}
.pw-toggle svg{display:block}
.pw-toggle:hover{color:var(--text)}
.pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- Status-/Fehlertexte ---- */
.err{font-size:12.5px;color:var(--live);min-height:1.4em;margin-top:10px}
.msg{font-size:12.5px;margin-top:10px;min-height:1.3em}
.msg.ok{color:var(--ok-text)}
.msg.err{color:var(--live)}
.hint{font-size:11.5px;color:var(--faint);margin-top:18px;text-align:center}
.hint a{color:var(--accent);text-decoration:none}
.empty{color:var(--faint);font-style:italic;padding:22px 16px;font-size:13px;text-align:center}

/* Ladeplatzhalter (Shimmer) — statt bloßem „Lädt …"-Text */
.skeleton{position:relative;overflow:hidden;background:var(--skeleton-1);border-radius:8px;min-height:14px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--skeleton-2),transparent);animation:hb-shimmer 1.3s infinite}
@keyframes hb-shimmer{100%{transform:translateX(100%)}}

/* ---- Auth-Shell: zentrierte Box für Login/Registrierung/Passwort-Flows ---- */
body.auth-shell{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-card{position:relative;width:100%;max-width:360px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-card)}
.theme-toggle.corner{position:absolute;top:14px;right:14px}
.auth-card.wide{max-width:420px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand .dot{width:11px;height:11px;border-radius:50%;
  background:conic-gradient(from 0deg,#f3b73c,#ff5d8f,#4d7cff,#a78bfa,#f3b73c)}
.auth-brand b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.auth-card h1{font-size:22px;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.auth-card .sub{font-size:12.5px;color:var(--dim);margin:0 0 18px}
.auth-card button[type=submit]{cursor:pointer;width:100%;margin-top:6px;background:var(--btn-primary-bg);
  border:1px solid var(--btn-border);color:var(--btn-fg);border-radius:var(--radius-pill);padding:11px 16px;font-weight:700;
  font-size:13.5px;font:inherit;transition:filter .14s ease,opacity .14s ease}
.auth-card button[type=submit]:hover{filter:brightness(1.06)}
.auth-card button[type=submit]:disabled{opacity:.5;cursor:wait}
@media (max-width:767px){
  /* Safe-Area: auf einem iPhone im Querformat läge die Karte sonst unter der
     Kerbe. `max()` lässt den normalen Rand stehen, wo es keine gibt. */
  body.auth-shell{min-height:100dvh;
    padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px))
            max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .auth-card{padding:18px}
}

/* ---- App-Shell: Topbar + Karten-Layout (Konto/Admin/Cockpit) ---- */
.topbar{position:sticky;top:0;z-index:10;background:var(--topbar-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft)}
.topbar-inner{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--master)}
.spacer{flex:1}
.navlink{font-size:12px;font-weight:600;color:var(--dim);border:1px solid var(--border);border-radius:8px;padding:6px 12px;
  transition:color .14s ease,border-color .14s ease}
.navlink:hover{color:var(--accent);border-color:var(--accent)}
/* Theme-Umschalter (☀/☾) — gleiche Optik wie .navlink, quadratisch */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--dim);
  font-size:15px;line-height:1;cursor:pointer;font:inherit;transition:color .14s ease,border-color .14s ease}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:20px;margin:22px 0 4px}
.sub{color:var(--dim);font-size:13px;margin:0 0 20px}

/* Einheitliche Bereichs-Navigation (Cockpit/Operations/Admin/Konto): segmentierte
   Leiste direkt unter der Topbar, aktiver Bereich in Akzentfarbe. Auf schmalen
   Displays horizontal scrollbar statt Umbruch. */
.area-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;
  padding:8px 0 0;margin-bottom:4px}
.area-nav:empty{display:none}
.area-nav a{flex:none;font-size:12.5px;font-weight:600;color:var(--dim);
  padding:7px 14px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  transition:color .14s ease,background-color .14s ease,border-color .14s ease}
.area-nav a:hover{color:var(--text);background:var(--bg-card-2)}
.area-nav a.on{color:var(--btn-fg);background:var(--btn-primary-bg);border-color:var(--btn-border)}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;
  box-shadow:var(--shadow-card)}
.card-h{padding:12px 16px;border-bottom:1px solid var(--border-soft);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.card-b{padding:16px}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row .field{flex:1;min-width:140px;margin-bottom:0}

.btn{cursor:pointer;background:var(--bg-card-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);
  padding:9px 16px;font-weight:700;font-size:13px;white-space:nowrap;font:inherit;
  transition:filter .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease}
.btn:hover{filter:brightness(1.05)}
.btn.primary,.btn-primary{background:var(--btn-primary-bg);border-color:var(--btn-border);color:var(--btn-fg);
  border-radius:var(--radius-pill)}
.btn:disabled{opacity:.5;cursor:wait}
.btn-danger{cursor:pointer;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.3);color:var(--live);
  border-radius:8px;padding:6px 12px;font-weight:700;font-size:11.5px;font:inherit;
  transition:background-color .14s ease}
.btn-danger:hover{background:rgba(251,113,133,.22)}
.btn-danger:disabled{opacity:.4;cursor:default}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--faint);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border-soft)}
td{padding:8px 10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
/* Zahlen und Zeiten — tabular + Mono für Geld/Uhrzeit (Klubwerkzeug-Optik) */
.nums,.num,td.num,th.num,.money,td.money,th.money,.time,td.time,th.time,.mono{
  font-variant-numeric:tabular-nums}
.money,td.money,th.money,.time,td.time,th.time,.mono{font-family:var(--font-mono)}
td.num,th.num,td.money,th.money{text-align:right}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

.badge{display:inline-flex;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.b-active{background:rgba(52,211,153,.12);color:#6ee7b7;border-color:rgba(52,211,153,.3)}
.b-expired{background:var(--bg-card-2);color:var(--faint);border-color:var(--border)}
.b-revoked{background:rgba(251,113,133,.12);color:#fda4b4;border-color:rgba(251,113,133,.3)}

.toast-region{position:fixed;right:16px;bottom:16px;z-index:100;display:grid;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--bg-card-2);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:10px;padding:10px 13px;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:13px}
.toast.err{border-left-color:var(--live)}

/* ---------- Modal (lib/modal.js) ----------
   Der Rumpf scrollt, Kopf und Fußleiste stehen fest — bei einem Formular mit
   sechs Abschnitten darf „Speichern" nicht unter dem Falz verschwinden.
   Höhe auf 88vh begrenzt, damit auf einem Laptop noch Kontext sichtbar bleibt. */
dialog.modal{color:var(--text);background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:0;width:min(560px,calc(100vw - 28px));max-width:none;
  max-height:88vh;overflow:hidden;box-shadow:0 26px 80px rgba(0,0,0,.55)}
dialog.modal.wide{width:min(880px,calc(100vw - 28px))}
dialog.modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.modal-form{display:flex;flex-direction:column;max-height:88vh}
.modal-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px;
  border-bottom:1px solid var(--border-soft)}
.modal-h h3{margin:0;font-size:16px}
.modal-h .sub{margin:3px 0 0;font-size:12.5px;color:var(--dim)}
.modal-h .icon-btn{margin-left:auto;flex:none;background:transparent;border:1px solid var(--border);
  border-radius:8px;color:var(--dim);cursor:pointer;padding:5px 9px;line-height:1}
.modal-h .icon-btn:hover{color:var(--text)}
.modal-b{padding:16px 18px;overflow-y:auto;flex:1;min-height:0}
.modal-f{display:flex;align-items:center;gap:8px;padding:12px 18px;
  border-top:1px solid var(--border-soft);background:var(--bg-elev)}
.modal-f .modal-error{flex:1;font-size:12.5px;color:var(--live);min-width:0}
.modal-restored{margin:0 0 14px;padding:8px 11px;border-radius:8px;font-size:12.5px;
  background:var(--accent-soft);border:1px solid var(--border)}
.linklike{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  text-decoration:underline;font:inherit}
/* Abschnittsgliederung innerhalb eines Modals */
.modal-sec{margin:0 0 18px}
.modal-sec:last-child{margin-bottom:0}
.modal-sec > h4{margin:0 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.modal-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.modal-grid .span2{grid-column:1/-1}
.modal-field > span{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
.modal-field > .modal-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px}
.modal-label-row .modal-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.modal-hint-inline{font-size:11px;color:var(--faint);text-align:right;font-weight:400;text-transform:none;letter-spacing:0;white-space:nowrap}
/* Ein ganzer Satz steht UNTER dem Feld, linksbündig zur Eingabe darüber.
   Rechts neben dem Label brach er um und schob die Eingabe eine Zeile tiefer —
   in einer mehrspaltigen Zeile standen die Felder dann nicht mehr bündig. */
.modal-hint-below{display:block;margin:5px 0 0;font-size:11px;color:var(--faint);
  font-weight:400;text-transform:none;letter-spacing:0;line-height:1.35}
/* Felder oben ausrichten: ein Feld mit Hinweis darunter darf die Nachbarn in
   derselben Zeile nicht mitstrecken. */
.modal-grid{align-items:start}
.modal-field{align-content:start}
.modal-hint{margin:5px 0 0;font-size:11.5px;color:var(--faint)}
.modal-check{display:flex;gap:8px;align-items:center;margin:10px 0 0;font-size:13px;cursor:pointer}
.modal-check input{width:auto;margin:0}
/* Modal-Eingaben etwas runder — näher an den Pillen, ohne fremdes Skin. */
dialog.modal .modal-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
dialog.modal .modal-field select,
dialog.modal .modal-field textarea{border-radius:12px}
.event-templates{display:flex;flex-wrap:wrap;gap:7px}
.event-templates button{font:inherit;font-size:12.5px;border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;color:var(--dim);background:transparent;cursor:pointer}
.event-templates button:hover{color:var(--text)}
.event-templates button.on,
.event-templates button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.flyer-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.flyer-row .btn{white-space:nowrap}
.cat-pills .cat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
  vertical-align:middle;flex-shrink:0}
/* Stage-Pills: ausgewählt invertiert (Screenshot), Kapazität leicht */
.stage-pills label:has(input:checked){background:var(--text);border-color:var(--text);color:var(--bg)}
.stage-pills label:has(input:checked) span{color:var(--bg)}
.stage-pills em{font-style:normal;font-weight:400;opacity:.72;margin-left:.15em}
.stage-pills b{font-weight:650}
.modal-f .btn.primary{background:var(--btn-primary-bg);border-color:var(--btn-border);color:var(--btn-fg);
  border-radius:var(--radius-pill);font-weight:700;padding:10px 18px}
.modal-f .btn.primary:hover{filter:brightness(1.06)}
/* Eine Entscheidung zwischen zwei Wegen — Radiokästchen bleiben im DOM
   (Formularsemantik, Tastatur, Screenreader), anklickbar ist die ganze Zeile. */
.modal-choice{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:10px 12px;
  border:1px solid var(--border);border-radius:9px;margin:0 0 9px;font-size:13px}
.modal-choice small{color:var(--faint);font-size:11.5px}
.modal-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.modal-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.modal-warn{margin:0 0 12px;padding:8px 11px;border-radius:8px;font-size:12.5px;
  border:1px solid var(--border);color:var(--dim)}
/* Mehrfachauswahl als Pillen: Kästchen bleibt im DOM (Formularsemantik,
   Tastatur, Screenreader), sichtbar ist das Etikett. */
/* Line-up-Zeilen im Anlege-Formular: Künstler · Beginn · Bühne · Gage.
   Der Name bekommt den Platz, der übrig bleibt — er ist das Feld, das man
   liest; die drei anderen sind so breit, wie ihr Inhalt braucht. Unter 560px
   stapeln sie, sonst fiele der Name auf zwei Zeichen zusammen. */
.act-rows{display:grid;gap:7px}
.act-row{display:grid;gap:7px;grid-template-columns:minmax(0,1fr) 110px 130px 130px;align-items:center}
@media (max-width:767px){ .act-row{grid-template-columns:minmax(0,1fr)} }
.pill-set{display:flex;flex-wrap:wrap;gap:7px}
.pill-set label{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12.5px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:var(--dim)}
.pill-set input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill-set input:checked + span{color:var(--text)}
.pill-set label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.pill-set label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Modal als Bodenblatt: Handy UND Tablet ----------
   Unten angedockt, oben abgerundet — der Daumen liegt unten, und der
   angeschnittene Hintergrund sagt, dass man noch im Zusammenhang steht.
   Bis zur Breakpoint-Vereinheitlichung galt das nur bis 640px; auf dem Tablet
   stand das Formular als schwebende 740px-Box mitten im Bild, „Speichern"
   am oberen Ende der Daumenreichweite.
   `dvh` statt `vh` ist hier KEINE Feinheit: `100vh` ist auf dem Handy die
   Höhe OHNE Adressleiste, also grösser als der sichtbare Bereich — die
   Fußleiste mit "Speichern" landete darunter. `vh` bleibt als Rückfall für
   Browser ohne `dvh` davor stehen. */
@media (max-width:1024px){
  dialog.modal,dialog.modal.wide{width:100vw;max-width:100vw;border-radius:16px 16px 0 0;border:0;
    margin:0 auto;inset:auto 0 0 0;
    max-height:92vh;max-height:92dvh}
  .modal-form{max-height:92vh;max-height:92dvh}
  /* Die Fußleiste über den Home-Indikator heben, sonst liegt "Speichern"
     unter dem Balken, mit dem man das Gerät bedient. */
  .modal-f{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .modal-f .btn{min-height:44px}
}
/* Auf dem Tablet ist das Blatt nicht bildschirmbreit: ein Formular über 1024px
   läse sich wie eine Tabelle. Es bleibt unten angedockt und steht mittig. */
@media (min-width:768px) and (max-width:1024px){
  dialog.modal{width:min(640px,100vw)}
  dialog.modal.wide{width:min(920px,100vw)}
}

@media (max-width:767px){
  .topbar-inner{gap:7px}
  .navlink{padding:8px 10px}
  .card-b{padding:12px}
  .card-b > .table-scroll{margin:-12px -12px 0;width:calc(100% + 24px)}
  .row{align-items:stretch}
  .row .field{min-width:100%}
  .row > .btn{width:100%}
  .btn-danger{padding-top:10px;padding-bottom:10px}
}

/* ---------- Tabellen als Kartenliste (Handy) ----------
   `table.hb-cards` setzt `autoCardTables()` aus /lib/ui.js, zusammen mit der
   Spaltenüberschrift je Zelle (`data-l`). Eine Zeile wird eine Karte: das
   erste Feld ist die Überschrift der Karte (E-Mail, Name, Abend — das, wonach
   man sucht), die übrigen stehen als „Beschriftung · Wert" darunter, die
   Aktionen zuletzt in einer eigenen Reihe.
   Umgebaut wird NUR die Darstellung; Zellen, Knöpfe und Listener bleiben
   dieselben — dasselbe Vorgehen wie bei der Skizzentabelle in operations.html.
   Auf dem Tablet bleibt es eine Tabelle, dort mit weniger Spalten (je Seite). */
@media (max-width:767px){
  table.hb-cards,table.hb-cards tbody{display:block;width:100%}
  table.hb-cards thead{display:none}
  table.hb-cards tr{display:block;padding:11px 12px;border-bottom:1px solid var(--border-soft)}
  table.hb-cards tr:last-child{border-bottom:0}
  /* `!important` nur gegen die `style="white-space:nowrap"` der Aktionszellen:
     in einer Tabelle hält das die Knöpfe in einer Zeile, in einer 350px-Karte
     schöbe es sie aus dem Bild. */
  table.hb-cards td{display:flex;align-items:baseline;gap:10px;border:0;padding:3px 0;
    min-width:0;white-space:normal !important;text-align:left;word-break:break-word}
  table.hb-cards td::before{content:attr(data-l);flex:0 0 96px;font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  table.hb-cards td:first-child{font-size:14px;font-weight:700;padding-bottom:5px}
  table.hb-cards td:first-child::before{display:none}
  /* Spalte ohne Überschrift = Aktionen: eigene Reihe, Knöpfe brechen um. */
  table.hb-cards td[data-l=""]{flex-wrap:wrap;gap:6px;padding-top:8px}
  table.hb-cards td[data-l=""]::before{display:none}
  table.hb-cards td[data-l=""]:empty{display:none}
  .table-scroll:has(> table.hb-cards){overflow-x:visible}
}

/* ---------- Zielflächen: mindestens 44px unter dem Finger ----------
   Hing bis hierher allein an der Breite (bis 640px). Gemessen auf dem Tablet:
   im Admin-Bereich 61 von 62 Zielen unter 44px, im Konto 20 von 25, im
   Anfrage-Formular 20 von 24 — die Knöpfe standen bei 33px. Dieselbe Lehre wie
   in operations.html: die Grösse gehört ans EINGABEGERÄT. Eine Maus bleibt
   unberührt, auch in einem schmalen Fenster ab 768px.
   Kästchen und Radioknöpfe sind ausgenommen — ihre Trefferfläche ist das
   Label drumherum, und 44px hohe Kästchen wären keine mehr. */
@media (max-width:767px),(pointer:coarse){
  .btn,.btn-danger,.navlink,select,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){min-height:44px}
  .btn-danger,.navlink{display:inline-flex;align-items:center;justify-content:center}
  .theme-toggle{width:44px;height:44px}
  .area-nav a{min-height:44px;display:inline-flex;align-items:center}
  .pw-row input{padding-right:52px}
  /* Füllt das Feld in der Höhe: mit 4px Abstand oben und unten blieben 36px. */
  .pw-toggle{width:44px;top:0;bottom:0;right:0}
  /* 16px verhindert, dass iOS beim Hineintippen in das Feld zoomt. */
  input,select,textarea{font-size:16px}
  .event-templates button{min-height:44px}
  /* Kleine Textlinks am Seitenrand („← Zurück zum Login", die Fusszeile der
     Rechtsseiten, der Datenschutzhinweis unter einem Formular) standen bei
     15–17px Höhe. Die Schrift bleibt, die Fläche wächst. */
  a.back,.legal-foot a,.privacy a,.hint a{display:inline-flex;align-items:center;min-height:44px}
  /* „Login" ist fünf Buchstaben breit — 31px. */
  .legal-foot a{min-width:44px;justify-content:center}
  /* Ein Textknopf MITTEN im Satz darf die Zeile nicht auf 44px strecken: er
     bekommt eine unsichtbare Trefferfläche statt einer Mindesthöhe. */
  .linklike{position:relative}
  .linklike::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:767px){
  /* Ein ganzer Satz als Hinweis NEBEN dem Label (`white-space:nowrap`) drückte
     das Label auf 60px — „Flyer / Artwork-URL" brach nach jedem Wort um. Auf
     dem Handy steht der Hinweis unter dem Label. */
  /* Kein erzwungener Umbruch: ein einzelnes Wort („optional") passt weiter
     neben das Label und bleibt dort als Marke rechts stehen — nur was nicht
     in die Zeile passt, rutscht darunter. */
  .modal-label-row{flex-wrap:wrap}
  .modal-hint-inline{white-space:normal;text-align:left}
}

/* Pflichtangaben-Zeile (§ 5 DDG, Art. 13 DSGVO).
   EINE Regel für alle Seiten statt je Seite eine eigene: die Anbieter-
   kennzeichnung muss "ständig verfügbar" sein, und eine Fußzeile, die auf
   jeder Seite anders aussieht, wird beim nächsten Umbau auf einer davon
   vergessen. Bewusst statisches HTML ohne JavaScript — sie muss auch dann
   dastehen, wenn ein Skript der Seite scheitert.
   `margin-top:auto` wirkt nur in einem Flex-Elternteil und stört sonst nicht. */
.legal-bar{margin:28px auto 0;padding:12px 18px 18px;max-width:1180px;width:100%;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  border-top:1px solid var(--border-soft);font-size:11.5px;color:var(--faint)}
.legal-bar a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.legal-bar a:hover,.legal-bar a:focus-visible{color:var(--text);border-bottom-color:var(--border)}
@media (max-width:767px),(pointer:coarse){ .legal-bar a{display:inline-flex;align-items:center;min-height:44px} }
/* Safe-Area: die Zeile ist das Letzte auf der Seite und läge auf einem iPhone
   sonst unter dem Home-Indikator. */
.legal-bar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}

/* Bewegung reduzieren, wenn das Betriebssystem es verlangt (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}