/* ==== Design-Tokens der TourAPI-Konsole ====
Einzige Datei mit Farb-Rohwerten (Test TestCSS_KeineFarbwerteAusserhalbTokens).
Ebene 1 = Palette: Rohwerte (Hex, Schriften). Nur Ebene 2 greift darauf zu.
Ebene 2 = Semantik: Rollen (--surface, --accent, --ok, --cal-stop ...). Komponenten
und Seiten verwenden AUSSCHLIESSLICH diese Rollen (Test prueft das).
Transparente Schleier und Schatten stehen hier direkt als rgba(), weil
sie selbst Rollen sind und keine Palettenfarbe.
Dunkel = derselbe Rollen-Satz, anders auf Ebene 1 gebunden, EIN Block unter
:root[data-theme="dark"]. data-theme setzt das Kopf-Skript im Layout
immer (gespeicherte Wahl, sonst Systemeinstellung, live nachgefuehrt).
Look and Feel wie Ventus (ta-l6o.174): Palette, Radien, Masse und Schriften sind
die Werte aus ventus_web public/assets/css/app.css (Stand origin/main 25.09.2026,
dort "Design-System des Portals"). Abweichungen nur fuer WCAG AA (Kontrast-Test
TestTokens_KontrastAA): --text-subtle hell dunkler als Ventus (#9ba5b2 = 2,5:1),
Warnschrift hell #8f6009 statt #96650a (auf der Warnflaeche 4,7:1 statt 4,4:1),
--text-muted hell #515b68 statt #636d7a (Marco 28.09., Oberflaechen-Vertrag: AA auf
JEDER Flaeche, auch Zebra ueber Hover und Kalender-Zustaenden; #636d7a hatte dort 4,4
bzw. 3,9:1).
Masse, Schrift, Abstaende, Hoehen, Tiefe: Oberflaechen-Vertrag webadmin/DESIGN-SYSTEM.md
(Abschnitte 1-6, 8). Neue Groesse oder Farbe = Vertragsaenderung.
Ein neues Theme = neue Datei mit denselben Ebene-2-Rollen, Komponenten bleiben
unangetastet. */
/* ---- Ebene 1: Palette ---- */
:root{
/* Neutral hell (Ventus: Seite kuehles Hellgrau, Karten weiss, Text fast schwarz) */
--gray-0:#ffffff; --gray-25:#f6f7f9; --gray-50:#edeff3;
--gray-100:#d7dce3; --gray-200:#bac3ce; --gray-300:#aeb9ca; --gray-350:#9ba7b8;
--gray-450:#66707c; --gray-650:#515b68; --gray-700:#3d4753; --gray-900:#101720;
/* Neutral dunkel */
--night-50:#e8edf4; --night-200:#b3becc; --night-350:#8591a2;
--night-600:#35424f; --night-700:#232e3b; --night-850:#18212c;
--night-900:#131a23; --night-950:#0c1016; --night-990:#090d12;
/* Marke (Ventus-Blau: nur primaere Aktionen, aktive Navigation, wichtige Werte) */
--blue-50:#e3e9fa; --blue-700:#1b3fc4; --blue-800:#16349f;
--blue-300:#89a5ff; --blue-400:#6e90ff; --blue-900:#17233d; --blue-950:#273453;
/* Status (hell: Schrift 4,5:1 auf weiss; dunkel: helle Toene) */
--green-50:#e6f2ec; --green-700:#0b7a4b; --green-400:#3dd68c; --green-950:#1d3d34;
--green-600:#35ad78; --mint-400:#52d69e;
--amber-50:#f7eedc; --amber-600:#c68206; --amber-700:#8f6009; --amber-300:#f6bd62;
--amber-400:#dfa03b; --amber-450:#e0a337; --amber-950:#312b22;
--red-50:#f7e9e8; --red-700:#b3271e; --red-800:#9c2019; --red-300:#ff7b84; --red-350:#ff7166;
--red-400:#d95460; --red-600:#c0392b; --red-950:#3d2528;
--violet-50:#ede8f4; --violet-300:#c3a6ff; --violet-400:#8173df; --violet-700:#6b3fa0; --violet-950:#1a1628;
/* Dashboard-Kopfband (Navy -> Violett) */
--navy-100:#dce4f2; --navy-200:#cbd5e5; --navy-800:#283657; --navy-900:#15213a; --violet-800:#42378f;
/* Suchtreffer-Markierung */
--yellow-100:#fbe7a2; --yellow-950:#3a2c00;
/* Himmel der Anmeldeseite (Ventus login-himmel, Verlauf oben -> Mitte) */
--sky-100:#c9d6f2; --sky-50:#e2e9f8; --sky-900:#0a1120; --sky-800:#121b30;
/* Schriften: IBM Plex, selbst ausgeliefert (fonts.css, OFL 1.1), Systemschriften als Rueckfall */
--font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
/* ---- Ebene 2: Semantik (hell = Standard) ---- */
:root{
--bg:var(--gray-50); --surface:var(--gray-0); --surface-2:var(--gray-25); --surface-hover:var(--gray-50);
/* Seitenleiste wie Ventus: weisse Flaeche, Haarlinie, Menuepunkte als abgerundete
Flaechen, aktiver Punkt = hellblaue Flaeche + blaue Schrift. */
--sidebar:var(--surface); --sidebar-fg:var(--gray-700); --sidebar-muted:var(--text-muted);
--sidebar-hover:var(--surface-2); --sidebar-active:var(--blue-50); --sidebar-active-fg:var(--accent);
--sidebar-border:var(--border); --sidebar-fg-strong:var(--text);
--sidebar-group-edge:rgba(27,63,196,.12);
--border:var(--gray-100); --border-strong:var(--gray-200);
--text:var(--gray-900); --text-muted:var(--gray-650);
/* nur deaktiviert und Dekor (Vertrag 5, Lint COL-3): zwei Lesestufen, --text und --text-muted */
--text-subtle:var(--gray-450);
--accent:var(--blue-700); --accent-2:var(--blue-800); --accent-fg:var(--gray-0); --accent-soft:var(--blue-50);
/* Fokusring: kraeftiger als --accent-soft, damit er auf vollen Masken auffaellt (Ventus --fokus-ring) */
--focus-ring:0 0 0 3px rgba(27,63,196,.28);
--ok:var(--green-700); --ok-soft:var(--green-50); --warn:var(--amber-700); --warn-soft:var(--amber-50);
--warn-edge:var(--amber-600);
--bad:var(--red-700); --bad-soft:var(--red-50);
--info:var(--violet-700); --info-soft:var(--violet-50);
/* abgeleiteter Wert (Editor): zweite Lesestufe, keine eigene Grautonstufe */
--derived-fg:var(--text-muted);
/* Hinweisblase an Symbolknoepfen (Ventus data-hinweis) */
--tooltip-bg:var(--gray-900); --tooltip-fg:var(--gray-0);
--scroll-edge:rgba(16,23,32,.2); /* Randschatten einer waagerechten Scroll-Huelle */
/* Tiefe (Vertrag 6): Rahmen im Seitenfluss, Schatten NUR fuer Schwebendes -
--shadow-pop (Popover, Liste, Flyout, Hinweisblase), --shadow-overlay (Panel, Drawer,
Dialog, schwebende Rueckgaengig-Leiste). Keine weiteren Schatten-Tokens. */
--shadow-pop:0 1px 2px rgba(16,23,32,.06),0 10px 28px -14px rgba(16,23,32,.28);
--shadow-overlay:0 2px 4px rgba(16,23,32,.08),0 24px 60px -24px rgba(16,23,32,.36);
/* Radien wie Ventus: sm Pillen/Marken, Standard Knoepfe/Felder, lg Karten/Dialoge */
--radius-sm:5px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
/* Masse: Seitenleiste, Kopfzeile */
--sidebar-w:236px; --sidebar-w-collapsed:64px; --topbar-h:60px;
/* Schrift (Vertrag 1): sieben Stufen Groesse/Zeile, nur ganze px, Mindestgroesse 11 */
--fs-xs:11px; --lh-xs:16px; /* Versal-Beschriftung, Badge, Zaehler */
--fs-s:12px; --lh-s:16px; /* Feldhinweis, Fehler am Feld, Chip, Brotkrumen, Zeitstempel */
--fs-m:13px; --lh-m:20px; /* Tabellenzelle, Editier-Zelle, Formular-Beschriftung, Meldung */
--fs-base:14px; --lh-base:20px; /* Fliesstext, Feldinhalt, Knopf, Menue, Reiter, Sektionstitel */
--fs-l:16px; --lh-l:24px; /* Panel-, Drawer-, Dialog-Titel, Leerzustand-Titel */
--fs-xl:20px; --lh-xl:28px; /* Record-Titel */
--fs-2xl:24px; --lh-2xl:32px; /* Seitentitel, Kennzahl */
/* Abstand (Vertrag 2): Raster 4 px */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
/* Steuerhoehen (Vertrag 4): Hoehe wird gesetzt, nicht aus Innenabstand + Zeile errechnet.
L = Knopf, Feld, Auswahl, Hotel-Auswahl, Symbolknopf, Suche, Reiter; M = Zeilenknopf,
Editier-Zelle, Knopf in Tabellenzeile/Kopfband/Panelkopf; S = Chip-Knopf. Die Dichte
"kompakt" (base.css) bindet nur --ctl-l, --row-h und --menu-row-h um. */
--ctl-l:40px; --ctl-m:32px; --ctl-s:24px; --row-h:40px; --menu-row-h:36px;
--font-ui:var(--font-sans); --font-head:var(--font-cond); --mono:var(--font-mono);
/* Abdunkelung hinter Drawer/Panel bzw. Bestaetigungs-Dialog */
--backdrop:rgba(16,23,32,.45); --backdrop-dialog:rgba(16,23,32,.46);
/* Dezentes Zebra: halbtransparenter Grauschleier (~5 %), hell wie dunkel korrekt */
--zebra:rgba(128,140,160,.05);
/* Kontingent-Kalender: Zellzustaende (Schleier, wirken auf hell und dunkel) */
--cal-free:rgba(11,122,75,.16); --cal-full:rgba(128,140,160,.16);
--cal-stop:rgba(128,140,160,.28); --cal-req:rgba(198,130,6,.20);
/* Sammel-Stop-Sale: Randmarke */
--stopsale-edge:var(--red-600);
/* Destruktive Aktion im Bestaetigungs-Dialog (Flaeche mit weisser Schrift, beide Themes) */
--danger-solid:var(--red-700); --danger-solid-hover:var(--red-800); --danger-solid-fg:var(--gray-0);
/* Himmelsband der Anmeldeseite (laeuft nach unten in --bg aus) */
--sky-top:var(--sky-100); --sky-mid:var(--sky-50);
/* Suchtreffer im Picker */
--mark-bg:var(--yellow-100); --mark-fg:var(--yellow-950);
/* Audit-Diff: Durchstreichung des alten Werts */
--diff-strike:rgba(150,60,60,.5);
/* Dashboard-Kopfband: immer dunkel, in beiden Themes gleich */
--hero-from:var(--navy-900); --hero-mid:var(--navy-800); --hero-to:var(--violet-800);
--hero-fg:var(--gray-0); --hero-fg-muted:var(--navy-100); --hero-fg-subtle:var(--navy-200);
--hero-ring:rgba(255,255,255,.065);
--signal-ok:var(--mint-400); --signal-ok-glow:rgba(82,214,158,.15);
--signal-warn:var(--amber-300); --signal-warn-glow:rgba(246,189,98,.16);
--signal-bad:var(--red-300); --signal-bad-glow:rgba(255,123,132,.16);
--signal-neutral:var(--gray-300); --signal-neutral-glow:rgba(174,185,202,.14);
/* Dashboard-Bereitschaftsbalken: Segmentfarben */
--seg-ok:var(--green-600); --seg-warn:var(--amber-400); --seg-bad:var(--red-400);
--seg-info:var(--violet-400); --seg-neutral:var(--gray-350);
/* Code-Paneel der Doku (ta-xegg.33, Vertrag 7.16): immer dunkel, in beiden Themen; Kopf mit
Beschriftung etwas heller. Hervorhebung: Schluessel/Kopfname, Zeichenkette, Zahl, Literal
und Methode/Befehl, Kommentar - jede Farbe AA auf Rumpf und Kopf (TestTokens_KontrastAA). */
--code-bg:var(--night-900); --code-kopf:var(--night-850); --code-edge:var(--night-900);
--code-fg:var(--night-50); --code-muted:var(--night-200); --code-comment:var(--night-350);
--code-key:var(--blue-300); --code-string:var(--green-400); --code-number:var(--amber-300);
--code-literal:var(--red-300); --code-method:var(--violet-300);
--code-hover:rgba(232,237,244,.08); /* Kopieren-Knopf im Kopf: Hover-Schleier */
/* HTTP-Methode als Kennzeichen (Endpunkt-Kopf): Rollen der Statusfamilien */
--method-get:var(--ok); --method-get-soft:var(--ok-soft);
--method-post:var(--accent-2); --method-post-soft:var(--accent-soft);
--method-delete:var(--bad); --method-delete-soft:var(--bad-soft);
}
/* ---- Ebene 2: Semantik dunkel ---- */
/* Sidebar-Rollen sind auf --surface/--text/... bezogen und erben aus dem hellen Block;
umgebunden wird nur, was Ventus im Dunkeln anders setzt (aktiver Menuepunkt). */
:root[data-theme="dark"]{
--bg:var(--night-950); --surface:var(--night-900); --surface-2:var(--night-850); --surface-hover:var(--night-850);
--sidebar-fg:var(--night-200); --sidebar-active:var(--blue-950); --sidebar-active-fg:var(--night-50);
--sidebar-group-edge:rgba(110,144,255,.16);
--border:var(--night-700); --border-strong:var(--night-600);
--text:var(--night-50); --text-muted:var(--night-200); --text-subtle:var(--night-350);
--accent:var(--blue-400); --accent-2:var(--blue-300); --accent-fg:var(--night-950); --accent-soft:var(--blue-900);
--focus-ring:0 0 0 3px rgba(110,144,255,.28);
--ok:var(--green-400); --ok-soft:var(--green-950); --warn:var(--amber-450); --warn-soft:var(--amber-950);
--bad:var(--red-350); --bad-soft:var(--red-950);
--info:var(--violet-400); --info-soft:var(--violet-950);
--tooltip-bg:var(--night-990); --tooltip-fg:var(--night-50);
--sky-top:var(--sky-900); --sky-mid:var(--sky-800);
--scroll-edge:rgba(0,0,0,.6);
--shadow-pop:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
--shadow-overlay:0 2px 4px rgba(0,0,0,.45),0 24px 60px -24px rgba(0,0,0,.85);
--code-bg:var(--night-990); --code-kopf:var(--night-950); --code-edge:var(--night-700);
}
/* IBM Plex, selbst ausgeliefert (wie Ventus): keine Anfrage bei Dritten, laeuft ohne Netz
nach draussen. SIL Open Font License 1.1 (assets/fonts/LICENSE-IBMPlex.txt).
Sans ist eine variable Schrift (wght 100-700, EINE Datei je Zeichenbereich); Condensed
fuer Ueberschriften, Gruppenkoepfe, Spaltenkoepfe; Mono fuer Codes, Zahlen, Kennungen.
latin-ext laedt der Browser nur, wenn ein Zeichen daraus auf der Seite steht (TR).
font-display: swap - bis die Datei da ist, steht der Text in der Systemschrift. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url("/static/fonts/plex-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url("/static/fonts/plex-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/plex-cond-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/plex-cond-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600 700;font-display:swap;src:url("/static/fonts/plex-cond-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600 700;font-display:swap;src:url("/static/fonts/plex-cond-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/plex-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 700;font-display:swap;src:url("/static/fonts/plex-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 700;font-display:swap;src:url("/static/fonts/plex-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Grundlage: Reset, Seitentypografie, nackte Elemente (Formularfelder, Buttons, Tabellen).
Nur Rollen aus tokens.css, keine Farbwerte. Formensprache wie Ventus (ta-l6o.174):
IBM Plex, Ueberschriften in der schmalen Fassung, Feld und Knopf gleich hoch,
Radius 8 px, Spaltenkoepfe schmal/versal auf der Abschnittsflaeche. Masse nach dem
Oberflaechen-Vertrag (webadmin/DESIGN-SYSTEM.md), nur Tokens. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* fieldset rahmt nur (nur lesbare Reiter im Abschnittsmodus): ohne Browser-Rahmen und -Abstand,
damit die Felder auf ihrer Rasterkante bleiben (LAY-1/LAY-7). */
fieldset{margin:0;padding:0;border:0;min-width:0}
html{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:var(--fs-base);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Ueberschriften (Vertrag 1, 7.8, 7.11): Seitentitel 24/32, Sektions- und Kartentitel 14/20,
alle 600 in der schmalen Fassung. Nie Browser-Standard (h2 1,5 em, h3 1,17 em). */
h1,h2,h3{font-family:var(--font-head);font-weight:600;color:var(--text)}
h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);letter-spacing:-.01em}
h2,h3{font-size:var(--fs-base);line-height:var(--lh-base)}
b,strong{font-weight:600} /* Browser-Standard 700: Gewichte nur 400/500/600 (TYP-3) */
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
label{display:block;font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted);margin:var(--s-3) 0 var(--s-1);font-weight:500}
/* Feld, Auswahl, mehrzeiliges Feld (Vertrag 7.2/7.3): Hoehe GESETZT (--ctl-l, kompakt 32),
Innenabstand nur waagerecht. Vorher ergab sich die Hoehe aus Innenabstand + Zeile
(35/36,3/37/39/41 px nebeneinander) und die Dichte "kompakt" liess Felder bei 37 stehen. */
input,select,textarea{width:100%;height:var(--ctl-l);padding:0 var(--s-3);line-height:var(--lh-base);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text);font-size:var(--fs-base);font-family:inherit;transition:border-color .18s,box-shadow .18s}
/* mehrzeilig: mindestens zwei Feldhoehen, waechst senkrecht; Schrift und Farbe wie das Feld
(vorher Browser-Standard 13,33 px schwarz, TYP-4) */
textarea{display:block;height:auto;min-height:calc(var(--ctl-l) * 2);padding:var(--s-2) var(--s-3);resize:vertical}
/* Haken/Optionen behalten ihre eigene Groesse (ta-379d): die 100 %-Breite oben machte aus
einem Haken ein zeilenbreites Feld und quetschte seine Beschriftung an den Rand. */
input[type=checkbox],input[type=radio]{width:auto;height:auto;flex:none;padding:0}
input:hover,select:hover,textarea:hover{border-color:var(--text-muted)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
/* Platzhalter sind Beispiele, keine Werte (ta-92wo): gedaempft und kursiv, damit "z. B. 7"
nie wie ein eingetragener Wert aussieht. */
textarea::placeholder,input::placeholder{color:var(--text-muted);font-style:italic;opacity:1}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
/* Knopf (Vertrag 7.1): L = --ctl-l (kompakt 32), innen 16, 14/20 500, Symbolabstand 8. */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--ctl-l);padding:0 var(--s-4);line-height:var(--lh-base);border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);border-radius:var(--radius);font-size:var(--fs-base);font-weight:500;cursor:pointer;font-family:inherit;transition:background-color .18s,border-color .18s,transform .18s}
button:hover,.btn:hover{background:var(--accent-2);border-color:var(--accent-2);text-decoration:none} button:active{transform:scale(.98)}
button.ghost,.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)} button.ghost:hover,.btn.ghost:hover{background:var(--surface-hover);border-color:var(--text-muted)}
button.danger{background:var(--danger-solid);border-color:var(--danger-solid);color:var(--danger-solid-fg)} button.danger:hover{background:var(--danger-solid-hover);border-color:var(--danger-solid-hover)}
button:disabled{opacity:.45;cursor:not-allowed}
/* Steuerung M (--ctl-m 32, auch kompakt): Knopf in Tabellenzeile, Kopfband (auch Support-Leiste)
und Panel-/Drawer-Kopf, Aktionszeile eines Uebersichts-Hinweises (.vu-h-akt), Zeilenknopf,
Editier-Zelle, Zaehlknopf im Editier-Raster (Vertrag 4, 7.1). */
td :is(button,.btn),:is(.side-panel-head,.drawer-head,.dash-card-head,.rec-sect-h,.ed-sect-h,.support-bar,.vu-h-akt) :is(button,.btn),.cnt-btn{height:var(--ctl-m);padding:0 var(--s-3);font-size:var(--fs-m)}
.cell :is(input,select){height:var(--ctl-m)}
/* Tabelle (Vertrag 7.5): Zeile und Kopf --row-h (40, kompakt 32), innen 12, Zelle 13/20,
Kopf im Versal-Stil 11/16 600 +0.06em auf der eingelassenen Flaeche. */
table{width:100%;border-collapse:collapse;font-size:var(--fs-m);line-height:var(--lh-m)}
th,td{height:var(--row-h);text-align:left;padding:0 var(--s-3);border-bottom:1px solid var(--border)}
th{color:var(--text-muted);font-family:var(--font-head);font-weight:600;font-size:var(--fs-xs);line-height:var(--lh-xs);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2)}
tbody tr{transition:background-color .18s} tbody tr:hover{background:var(--surface-hover)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Dichte (Ventus-Umschalter "kompakt", Kopfzeile, data-dichte vom Kopf-Skript): bindet nur
die L-Hoehe, die Tabellenzeile und die Menuezeile um - ALLE L-Steuerungen folgen. */
:root[data-dichte="kompakt"]{--ctl-l:32px;--row-h:32px;--menu-row-h:32px}
/* Umbruch-Grundregeln (ta-7to5.1, Befunde B03/B08 aus ta-wbun): lange Woerter ohne
Trennstelle (Hotel-, Veranstalternamen, Logins) brechen in Ueberschriften und Werten um,
statt die Seite zu verbreitern; Bedienbeschriftungen und Spaltenkoepfe brechen nie
(die Spalte gibt Platz, breite Tabellen scrollen in ihrer Huelle). "anywhere" senkt die
Mindestbreite (Flex/Raster schrumpfen mit), "break-word" nicht (Tabellenspalten mit Codes
werden nicht zeichenweise zerlegt). */
h1,h2,dd{overflow-wrap:anywhere}
button,.btn,th{white-space:nowrap}
/* App-Shell wie Ventus (ta-l6o.174): Seitenleiste (einklappbar, Akkordeon-Gruppen,
Fusszeile mit Impressum/Datenschutz), Kopfzeile (Veranstalter links, Werkzeuge rechts
in zwei Gruppen, Abmelden als runder Knopf), Support-Leiste, "Zuletzt gesehen",
Seitenkopf, Breadcrumbs. Masse nach Oberflaechen-Vertrag (DESIGN-SYSTEM.md 7.11, 7.14;
V1.1 ta-7to5.3): nur Tokens. */
/* ---- Seitenleiste ---- */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--sidebar);color:var(--sidebar-fg);display:flex;flex-direction:column;z-index:30;border-right:1px solid var(--sidebar-border);transition:width .15s ease}
/* Markenzeile so hoch wie die Kopfzeile: Logo und Kopfzeile stehen auf einer Linie. */
.sidebar-brand{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);height:var(--topbar-h);padding:0 var(--s-3) 0 var(--s-5)}
.sidebar .brand{display:flex;align-items:center;min-width:0}
.sidebar .brand:hover{text-decoration:none}
/* Marken-Logo (eingebettete Assets): helle Wortmarke im Light-, monochrome im Dark-Theme.
Umschaltung folgt exakt der Token-Mechanik (data-theme, siehe tokens.css). */
.brand-logo{height:26px;width:auto;display:block}
.brand-logo.dark{display:none}
:root[data-theme="dark"] .brand-logo.light{display:none}
:root[data-theme="dark"] .brand-logo.dark{display:block}
/* Einklapp-Knopf: Symbolknopf M (32 x 32, Symbol 16; Vertrag 7.1, CTL-3). */
.sidebar-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-m);height:var(--ctl-m);padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--sidebar-fg);box-shadow:none}
.sidebar-toggle:hover{background:var(--sidebar-hover);color:var(--sidebar-fg-strong)}
.sidebar-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:var(--s-1) var(--s-3) var(--s-3);scrollbar-width:thin}
.nav-group{margin:0}
/* Gruppenkopf: Versal-Beschriftung, Hoehe 32 - gliedert das Menue, sieht nicht wie ein Ziel aus. */
.nav-group>summary{display:flex;align-items:center;gap:var(--s-2);min-height:var(--ctl-m);margin-top:var(--s-2);padding:0 var(--s-3);list-style:none;cursor:pointer;font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sidebar-muted);border-radius:var(--radius)}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{color:var(--sidebar-fg-strong)}
.nav-group>summary svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-group>summary .nav-chevron{margin-left:auto;opacity:.6;stroke-width:2;transition:transform .15s ease}
.nav-group[open]>summary .nav-chevron{transform:rotate(90deg)}
.nav-group.active>summary{color:var(--accent)}
:root[data-theme="dark"] .nav-group.active>summary{color:var(--sidebar-fg-strong)}
.nav-items{display:flex;flex-direction:column}
/* Orientierungslinie am Unterbaum (2, Einzug 12): sobald die Gruppe offen ist (Klick, Tastatur,
beim Laden), nicht erst mit aktivem Unterpunkt (ta-l6o.240). */
.nav-group[open]>.nav-items{margin-left:var(--s-3);padding-left:var(--s-1);border-left:2px solid var(--sidebar-group-edge)}
/* Menuepunkt: Hoehe --menu-row-h, innen 12, Symbol 16 mit Abstand 8, 14/20 500. */
.nav-item{display:flex;align-items:center;gap:var(--s-2);min-height:var(--menu-row-h);padding:0 var(--s-3);border-radius:var(--radius);color:var(--sidebar-fg);font-weight:500;font-size:var(--fs-base);line-height:var(--lh-base);cursor:pointer;transition:background-color .18s,color .18s}
.nav-item:hover{background:var(--sidebar-hover);text-decoration:none;color:var(--sidebar-fg-strong)}
.nav-item.active{background:var(--sidebar-active);color:var(--sidebar-active-fg)}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .soon{margin-left:auto;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;color:var(--sidebar-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:0 var(--s-2)}
/* Zaehler am Nav-Punkt (offene Entwuerfe, §4.13; Vertrag 7.6): akzentuiert — ein Arbeitsvorrat, kein
Status-Vermerk. Hoehe 20, mindestens 20 breit, 11/16 600 Mono, Pille. */
.nav-item .nav-count,.nav-group>summary .nav-group-count{display:inline-flex;align-items:center;justify-content:center;flex:none;height:20px;min-width:20px;margin-left:auto;padding:0 var(--s-1);font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--accent-fg);background:var(--accent);border-radius:var(--radius-pill)}
/* Zugeklappte Gruppe zeigt den Zaehler ihres Punkts im Kopf (offene Entwuerfe), damit er
nicht mit der Gruppe verschwindet; offen steht er wieder am Punkt selbst. */
.nav-group>summary .nav-group-count+.nav-chevron{margin-left:0}
.nav-group[open]>summary .nav-group-count{display:none}
.nav-group[open]>summary .nav-group-count+.nav-chevron{margin-left:auto}
/* Speichern des Klappzustands gescheitert (ta-ggix): laut in der Leiste, nicht nur in der Konsole. */
.nav-save-fehler{flex:none;margin:var(--s-2) var(--s-3) 0;padding:var(--s-2) var(--s-3);border-radius:var(--radius);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--bad);background:var(--bad-soft)}
/* Fusszeile: Impressum/Datenschutz, Stand, Copyright (gleiche Bausteine wie auf der Anmeldeseite). */
.sidebar-footer{flex:none;padding:var(--s-3) var(--s-4);border-top:1px solid var(--sidebar-border);text-align:center;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-muted)}
.legal-links{display:flex;justify-content:center;gap:var(--s-3);margin-bottom:var(--s-1)}
.legal-links a{color:var(--text-muted);font-size:var(--fs-s);line-height:var(--lh-s);text-decoration:underline;text-underline-offset:2px}
.legal-links a:hover{color:var(--text)}
.app-version{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-muted)}
/* Eingeklappt (Desktop): schmale Symbolleiste, Gruppen klappen als Flyout auf. Zustand je
Person vom Server (data-sidebar am , ta-ggix), sonst localStorage-Erststand. */
@media(min-width:901px){
:root[data-sidebar="collapsed"]{--sidebar-w:var(--sidebar-w-collapsed)}
:root[data-sidebar="collapsed"] .sidebar-brand{justify-content:center;padding:0}
:root[data-sidebar="collapsed"] .sidebar .brand{display:none}
:root[data-sidebar="collapsed"] .sidebar-toggle svg{transform:rotate(180deg)}
:root[data-sidebar="collapsed"] .sidebar-nav{overflow:visible}
:root[data-sidebar="collapsed"] .nav-label,:root[data-sidebar="collapsed"] .nav-chevron,:root[data-sidebar="collapsed"] .nav-item .soon,:root[data-sidebar="collapsed"] .sidebar-footer,:root[data-sidebar="collapsed"] .nav-save-fehler{display:none}
:root[data-sidebar="collapsed"] .nav-group{position:relative}
:root[data-sidebar="collapsed"] .nav-group>summary,:root[data-sidebar="collapsed"] .nav-item{justify-content:center;gap:0;padding-left:0;padding-right:0}
:root[data-sidebar="collapsed"] .nav-group>summary{min-height:var(--menu-row-h);margin-top:0}
:root[data-sidebar="collapsed"] .nav-item .nav-count,:root[data-sidebar="collapsed"] .nav-group>summary .nav-group-count{position:absolute;margin:0;transform:translate(12px,-10px);min-width:16px;padding:0 var(--s-1)}
:root[data-sidebar="collapsed"] .nav-group[open]>.nav-items{position:absolute;left:calc(100% + var(--s-3));top:0;min-width:220px;margin:0;padding:var(--s-1);border:1px solid var(--border);border-radius:var(--radius);background:var(--sidebar);box-shadow:var(--shadow-pop);z-index:40}
:root[data-sidebar="collapsed"] .nav-group[open]>.nav-items .nav-item{justify-content:flex-start;gap:var(--s-2);padding:0 var(--s-3)}
:root[data-sidebar="collapsed"] .nav-group[open]>.nav-items .nav-label{display:inline}
:root[data-sidebar="collapsed"] .nav-group[open]>.nav-items .nav-count{position:static;transform:none;margin-left:auto}
}
/* ---- Kopfzeile (Vertrag 7.14: Hoehe 60, innen 24, Suche und Symbolknoepfe L, Gruppen-Abstand 4,
Gruppentrenner 1 + 12) ---- */
.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);z-index:20;transition:left .15s ease}
/* Veranstalter + Anmeldung links, wie Ventus' Firmenzeile: Name kraeftig, dahinter gedaempft
Benutzer und Rolle; einzeilig, kuerzt mit Ellipse (voller Text im title). */
/* Die Kette schrumpft zuerst (erst die Rolle, dann der Name); Suche und Symbole behalten ihren Platz, der
Abmelde-Knopf bleibt in jeder Breite sichtbar (B01). Kein fester Deckel am Namen (B18). */
.tenant-chip{display:inline-flex;align-items:center;gap:var(--s-2);flex:0 1 auto;min-width:0;white-space:nowrap;font-size:var(--fs-base);line-height:var(--lh-base);color:var(--text)}
.tenant-chip .tc-ico{width:20px;height:20px;fill:none;stroke:var(--text-muted);stroke-width:1.7;flex:none}
.tenant-static{flex:0 1 auto;min-width:0;font-weight:600;font-size:var(--fs-l);line-height:var(--lh-l);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tenant-static.muted{color:var(--text-muted)}
.tenant-chip .tc-sep{color:var(--text-muted);flex:none}
.tenant-chip .role{flex:0 1000 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-m);color:var(--text-muted)}
.topbar .spacer{flex:1 1 0;min-width:0}
.topbar .search{position:relative;flex:0 1 300px;min-width:160px;margin:0}
.topbar .search .search-ico{position:absolute;left:var(--s-3);top:50%;width:16px;height:16px;transform:translateY(-50%);stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
/* Suche = Eingabe L mit Symbol links (innen links 36 = 12 + 16 + 8). */
.topbar .search input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:0 var(--s-3) 0 calc(var(--s-6) + var(--s-1));color:var(--text)}
.topbar .tb-actions{display:flex;align-items:center;gap:var(--s-3);flex:none}
/* Zwei Gruppen mit Haarstrich dazwischen (Ventus): Darstellung | Werkzeuge. */
.tb-gruppe{display:flex;align-items:center;gap:var(--s-1)}
.tb-gruppe+.tb-gruppe{padding-left:var(--s-3);border-left:1px solid var(--border)}
.topbar .tb-logout{margin:0;flex:none}
/* Symbolknopf L (Vertrag 7.1): 40 x 40, Symbol 20. */
.icon-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-l);height:var(--ctl-l);min-height:0;padding:0;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-muted);cursor:pointer}
.icon-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--text-muted)}
.icon-btn svg{flex:none;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* Hell/Dunkel: das Zeichen zeigt die aktuelle Ansicht (EINE Grafik, zwei Gruppen — der
Knopf traegt immer genau ein sichtbares 20-px-Zeichen). */
#theme-toggle .ico-moon{display:none}
:root[data-theme="dark"] #theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] #theme-toggle .ico-moon{display:inline}
/* Abmelden: runder Knopf in der Markenfarbe, beim Ueberfahren rot (Ventus .topbar-logout). */
.icon-btn.tb-logout-btn{border-radius:var(--radius-pill);background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.icon-btn.tb-logout-btn:hover{background:var(--danger-solid);border-color:var(--danger-solid);color:var(--danger-solid-fg)}
/* Hinweisblase an Symbolknoepfen (Vertrag 7.14: 12/16, innen 4/8, Radius 5, Abstand 8, --shadow-pop;
sofort, auch per Tastatur; aria-label bleibt die Beschriftung). */
[data-hinweis]{position:relative}
[data-hinweis]::after{content:attr(data-hinweis);position:absolute;top:calc(100% + var(--s-2));right:0;z-index:60;padding:var(--s-1) var(--s-2);border-radius:var(--radius-sm);background:var(--tooltip-bg);color:var(--tooltip-fg);box-shadow:var(--shadow-pop);font-size:var(--fs-s);font-weight:400;line-height:var(--lh-s);white-space:nowrap;letter-spacing:0;text-transform:none;opacity:0;pointer-events:none;transition:opacity .18s}
[data-hinweis]:hover::after,[data-hinweis]:focus-visible::after{opacity:1}
/* Offenes Panel des Knopfs (Zuletzt gesehen): die Blase wuerde seinen ersten Eintrag verdecken (B20). */
[data-hinweis][aria-expanded="true"]::after{display:none}
.sidebar-toggle[data-hinweis]::after{right:auto;left:0}
.card.hint{margin-bottom:var(--s-4);border-color:var(--accent-soft);background:var(--accent-soft)}
.hamburger{display:none}
.sidebar-backdrop{display:none}
/* Inhalt neben Seitenleiste und unter Kopfzeile: Versatz = deren Masse (Vertrag 0.4). */
.content{margin-left:var(--sidebar-w);padding-top:var(--topbar-h);min-height:100vh;transition:margin-left .15s ease}
/* Support-Modus (Blueprint §3): farbige Kontextleiste, solange der Betreiber im Namen eines Veranstalters arbeitet */
.support-bar{position:sticky;top:var(--topbar-h);z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-2) var(--s-6);background:var(--warn-soft);border-bottom:2px solid var(--warn-edge);color:var(--text);font-size:var(--fs-m);line-height:var(--lh-m)}
.support-bar .sb-label{font-family:var(--font-head);font-weight:600;color:var(--warn);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);line-height:var(--lh-xs)}
.support-bar .sb-code{color:var(--text-muted);font-size:var(--fs-s)}
.support-bar .sb-hint{color:var(--text-muted);flex:1;min-width:180px}
.support-bar .sb-form{margin:0}
.support-bar>b{min-width:0}
/* ---- "Zuletzt gesehen"-Dropdown (Topbar) ---- */
/* Icon-Button in der Topbar togglet ein Panel mit den zuletzt geoeffneten Records
(neueste zuerst, max 10). Reines Progressive Enhancement: ohne JS bleibt das Panel
per [hidden] unsichtbar. */
.recent-wrap{position:relative;display:inline-flex}
.recent-panel{position:absolute;top:calc(100% + var(--s-2));right:0;width:320px;max-width:calc(100vw - var(--s-6));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:var(--s-1);z-index:40;max-height:min(70vh,480px);overflow-y:auto}
.recent-panel[hidden]{display:none}
.recent-empty{padding:var(--s-4) var(--s-3);color:var(--text-muted);font-size:var(--fs-m);line-height:var(--lh-m);text-align:center}
.recent-item{display:flex;align-items:center;gap:var(--s-2);min-height:var(--ctl-l);padding:0 var(--s-3);border-radius:var(--radius);color:var(--text);text-decoration:none;font-size:var(--fs-base);line-height:var(--lh-base);font-weight:500}
.recent-item:hover{background:var(--surface-hover);text-decoration:none}
.recent-ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none;color:var(--text-muted)}
.recent-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Seitenrand 32 (bis 900 px 24, bis 600 px 16). */
.page{max-width:1680px;margin:0 auto;padding:var(--s-5) var(--s-6) var(--s-7)}
/* Brotkrumen 12/16, Abstand 4 zum Titel. */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;color:var(--text-muted);font-size:var(--fs-s);line-height:var(--lh-s);margin-bottom:var(--s-1)}
.breadcrumbs .sep{opacity:.6}
/* Seitenkopf (Vertrag 7.11, LAY-3, B07): EIN Raster fuer alle Seiten. Der Titelblock (erstes Kind)
loest sich auf (display:contents), damit die Aktionen in der Titelzeile stehen: rechts an der
Inhaltskante, mittig zum Titel, ohne Umbruch; Eyebrow darueber, Untertitel darunter. Ein langer
Titel bricht um und schiebt die Aktionen nicht weg. */
.page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-4);align-items:start;margin-bottom:var(--s-5)}
.page-head>:first-child{display:contents}
.page-head>:first-child>*{grid-column:1}
.page-head h1{margin:0;align-self:center}
.page-head .sub{color:var(--text-muted);margin:var(--s-1) 0 0;font-size:var(--fs-base);line-height:var(--lh-base)}
.page-head .eyebrow{font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--s-1)}
.page-head .head-actions{grid-column:2;grid-row:1;align-self:center;justify-content:flex-end}
.page-head:has(>:first-child>.eyebrow) .head-actions{grid-row:2}
.chip.mono{font-family:var(--mono);font-size:var(--fs-s)}
/* ---- Responsive (Shell) ---- */
@media(max-width:900px){
.sidebar{position:fixed;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-overlay)}
body.nav-open .sidebar{transform:translateX(0)}
body.nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:25;background:var(--backdrop)}
.sidebar-toggle{display:none}
.topbar{left:0;padding:0 var(--s-4)} .content{margin-left:0}
.hamburger{display:inline-flex} .topbar .search{flex:1 1 auto;min-width:120px}
.topbar .spacer{display:none}
.tenant-chip .role,.tenant-chip .tc-sep{display:none}
.page{padding:var(--s-5) var(--s-5) var(--s-7)}
}
/* Schmal (Telefon): Kopfzeile zweizeilig (104) — oben Menue, Suche, Symbole, Abmelden; unten der
Veranstalter ueber die volle Breite (kuerzt mit Ellipse, voller Text im title). Die
Dichte-Umschaltung entfaellt (am Telefon ohne Nutzen, Platz fuer die Suche). */
@media(max-width:600px){
:root{--topbar-h:104px}
.topbar{flex-wrap:wrap;align-content:center;gap:var(--s-2);padding:var(--s-2) var(--s-3)}
.topbar .tb-actions{display:contents}
.tb-gruppe{display:contents}
.tb-gruppe+.tb-gruppe{padding-left:0;border-left:0}
.tb-dichte{display:none}
.topbar .search{flex:1 1 0}
.topbar .tb-logout{margin-left:auto}
.tenant-chip{order:1;flex:1 1 100%;max-width:100%}
.tenant-chip .role,.tenant-chip .tc-sep{display:inline}
.tenant-static{max-width:none;min-width:0;flex:0 1 auto}
/* Support-Leiste einzeilig (B16): Kennzeichen, Name (Ellipse), Verlassen; Code und Hinweis
stehen im title der Leiste. */
.support-bar{flex-wrap:nowrap;padding:var(--s-1) var(--s-3);gap:var(--s-2)}
.support-bar .sb-code,.support-bar .sb-hint{display:none}
.support-bar .sb-label{flex:none}
.support-bar>b{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-bar .sb-form{flex:none}
.support-bar .sb-form button{white-space:nowrap}
.page{padding:var(--s-4) var(--s-4) var(--s-6)}
/* Seitenkopf: Aktionen unter dem Titel, linksbuendig, brechen als Ganzes um; ein Knopf
ueberdeckt nie den Titel (Vertrag 7.11, B02/B07). */
.page-head{grid-template-columns:minmax(0,1fr)}
.page-head .head-actions,.page-head:has(>:first-child>.eyebrow) .head-actions{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap;margin-top:var(--s-3)}
}
/* Allgemeine Bausteine: Raster, Karten, Chips/Badges, Meldungen, Tabellen-Werkzeuge,
Server-Grid, Tabs, Leerzustaende. */
/* ---- Components ---- */
/* hidden-Attribut gewinnt immer (ta-l6o.299): sonst macht jede Klassen-/Elementregel mit display
(z. B. textarea{display:block}) ein [hidden]-Element wieder sichtbar. Wer sichtbar schalten
will, entfernt das Attribut - nie per CSS ueberstimmen. */
[hidden]{display:none!important}
.grid{display:grid;gap:var(--s-4)} .grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.testpanel{margin-top:var(--s-4)}
.head-actions{display:flex;gap:var(--s-2);align-items:center}
/* Kontext-Folge der Benutzerliste (§S5): Hinweis-Streifen ueber der Tabelle */
/* eingelassene Flaeche (Vertrag 7.8): Radius 8, innen 12 */
.list-context{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-4);padding:var(--s-2) var(--s-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted)}
.list-context b{color:var(--text);font-weight:600}
.list-context .lc-link{margin-left:auto}
/* Zahl, Datum und Code brechen nicht um (Vertrag 7.5); Zahl rechts, Code in Mono. Datum: Zelle
td.datum oder time. */
.data-table .num{text-align:right;white-space:nowrap}
.data-table :is(td.datum,time){white-space:nowrap}
.data-table .code{font-family:var(--mono);white-space:nowrap}
/* Aktionsspalte (B04-B06, ta-7to5.4): bleibt echte Tabellenzelle (display:flex loeste sie aus
dem Zeilenraster - Zeilenhintergrund endete davor, Inhalt stand in hohen Zeilen oben), Inhalt
rechtsbuendig ohne Umbruch, und klebt rechts in der Scroll-Huelle: breite Listen scrollen
unter ihr durch, die Aktionen bleiben bei jeder Breite sichtbar. Deckende Flaeche je
Zeilenzustand (Zebra = Schleier ueber der Kartenflaeche, Hover). Die Knopfreihe beginnt an
der linken Kante der Spalte (LAY-13, ta-l6o.307): rechtsbuendig schob ein verschieden breiter
Knopf am Ende (Sperren/Entsperren) alle davor je Zeile - so steht jeder Knopf in einer Flucht. */
td.row-actions{white-space:nowrap;text-align:left;position:sticky;right:0;background:var(--surface);transition:background-color .18s}
td.row-actions>*+*{padding-left:var(--s-2)}
/* Formular (Loeschen, Sperren ...) steht in der Knopfreihe der Zelle */
td.row-actions>form{display:inline}
.data-table:has(td.row-actions) thead th:last-child{position:sticky;right:0}
.data-table tbody tr:nth-child(even) td.row-actions{background:linear-gradient(var(--zebra),var(--zebra)),var(--surface)}
.data-table tbody tr:hover td.row-actions{background:var(--surface-hover)}
.data-table tbody tr[data-href]:hover td.row-actions{background:var(--surface-2)}
/* Kante der klebenden Spalte (LAY-15, ta-l6o.307): liegt Inhalt unter ihr (Huelle nicht am Ende
gescrollt, tabellen.js setzt data-rest-rechts/-links), zeigt sie eine Linie 1 px
--border-strong und einen Randschatten --scroll-edge zur verdeckten Seite - Querscrollen bei
Ueberlaengen bleibt erlaubt, aber nie still (vorher lag die Aktionsspalte auf /users ohne
Kante ueber Status/Letzter Login, ein Abzeichen wirkte abgeschnitten). */
[data-rest-rechts] :is(td.row-actions,.data-table:has(td.row-actions) thead th:last-child,.audit-table thead th:last-child,.audit-table tr[data-audit-row]>td:last-child)::before{content:"";position:absolute;inset:0 auto 0 -10px;width:10px;pointer-events:none;background:linear-gradient(var(--border-strong),var(--border-strong)) right/1px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,var(--scroll-edge),transparent) right/10px 100% no-repeat}
[data-rest-links] :is(.vu-mx tr>:first-child,.cal .cal-bucket)::after{content:"";position:absolute;inset:0 -10px 0 auto;width:10px;pointer-events:none;background:linear-gradient(var(--border-strong),var(--border-strong)) left/1px 100% no-repeat,radial-gradient(farthest-side at 0 50%,var(--scroll-edge),transparent) left/10px 100% no-repeat}
/* Abzeichen untereinander (Status mit Zusatz wie "Erstanmeldung offen"): die Spalte wird nicht
breiter als ihr laengstes Abzeichen (ta-l6o.307) */
.data-table td.stapel>.badge{display:flex;width:max-content}
.data-table td.stapel>.badge+.badge{margin-top:var(--s-1)}
/* Abzeichen mit Knopf in einer Zeile, Hinweise darunter je eine Zeile - seit/Fehlversuche
untereinander statt nebeneinander, sonst scrollt die Tabelle bei 1440 quer (ta-at8j.24.23) */
.data-table td.faktor>form{display:inline;padding-left:var(--s-2)}
.data-table td.faktor>.hint{display:block;white-space:nowrap}
/* Detailpfeil = Zeilenknopf M wie im Editor (Vertrag 7.1, CTL-4): 32 x 32, sekundaer, Symbol
16 als SVG; klappt die Detailzeile darunter auf (Audit-Trail, Aenderungen). Vorher 14 x 18
bzw. ein Schriftzeichen ohne Flaeche (Marco M07). Als Link (Aufklapper ohne JS, ?auf=)
ohne Unterstrich. */
.rowchev{appearance:none;width:var(--ctl-m);height:var(--ctl-m);background:var(--surface);border:1px solid var(--border-strong);padding:0;margin:0;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:transform .12s,background-color .18s,border-color .18s;user-select:none}
.rowchev svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rowchev:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--accent);text-decoration:none}
.rowchev:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Detailpfeil als Zeilen-Aktion (a.btn.rowchev, /users): Symbolknopf M statt Text-Knopf; Hinweisblase
links daneben, damit die Tabellen-Huelle sie in der letzten Zeile nicht abschneidet (ta-uprl). */
td.row-actions .btn.rowchev{width:var(--ctl-m);padding:0}
/* Symbolknopf ohne Text hat keine Grundlinie: alle Knoepfe der Zelle mittig, sonst steht er hoeher. */
td.row-actions :is(button,.btn){vertical-align:middle}
td.row-actions [data-hinweis]::after{top:50%;right:calc(100% + var(--s-2));transform:translateY(-50%)}
tr.exp .rowchev{transform:rotate(90deg);color:var(--accent)}
/* Aktions-Regel-Tabelle (Operation/Bezug/Board/Wert/Zimmer) */
/* Spalte Verpflegung so breit wie ihr laengster Eintrag ("RO · Nur Uebernachtung" + Pfeil, TXT-5) */
.arow-h,.arow{display:grid;grid-template-columns:150px 250px 12rem 100px minmax(0,1fr) var(--ctl-m);gap:var(--s-2);align-items:center}
/* Kopf im Versal-Stil (Vertrag 1) */
.arow-h{padding:var(--s-1) 0;font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}
.arow{padding:var(--s-1) 0;border-bottom:1px solid var(--border)}
.arow:last-child{border-bottom:none}
.arow .cell{min-width:0}
/* Wert = Zahl (Editier-Zelle, Vertrag 7.2: Zahl rechts); Textfeld wegen Vorzeichen ("-10") */
.arow .cell>input[data-af=value]{text-align:right;font-variant-numeric:tabular-nums}
.arow .xrow{width:var(--ctl-m);padding:0;justify-self:center;color:var(--bad)}
/* Aktions-Regel im schmalen Rahmen (ta-9jph Telefon, ta-zwf8 Seitenpanel): die sechs
Spalten brauchen ~700 px, das Neu-Panel ist hoechstens 640 px breit. Massgeblich ist
die Breite des Regel-Abschnitts (Container), nicht der Viewport: darunter bricht die
Zeile in vier Reihen um (Operation/x, Bezug, Board ganz, Wert/Zimmer), der Tabellenkopf
entfaellt, jede Zelle traegt ihren Spaltennamen (data-col) selbst. */
.arules-sect{container:arules/inline-size}
@container arules (max-width:780px){
.arule-h{display:none}
.arow[data-arule]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--ctl-m);grid-template-areas:"op op x" "charge charge charge" "board board board" "value rooms rooms";gap:var(--s-2);align-items:end;padding:var(--s-2) 0}
.arow[data-arule]>[data-ac=op]{grid-area:op} .arow[data-arule]>[data-ac=charge]{grid-area:charge}
.arow[data-arule]>[data-ac=board]{grid-area:board} .arow[data-arule]>[data-ac=value]{grid-area:value}
.arow[data-arule]>[data-ac=roomCodes]{grid-area:rooms} .arow[data-arule]>.xrow{grid-area:x;align-self:end}
.arow[data-arule]>[data-col]::before{content:attr(data-col);display:block;font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--s-1);flex:1 1 100%}
}
.testpanel .grid{align-items:start}
@media(max-width:1000px){.grid.two,.grid.cols3{grid-template-columns:1fr}}
/* Karte (Vertrag 7.8): Rahmen 1 / Radius 12 / Flaeche, kein Schatten; ohne Kopfband innen 16,
Titel 14/20 600 mit 12 Abstand zum Inhalt; Untertitel 13/20 gedaempft direkt unter dem Titel. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s-4);box-shadow:none}
.card h2{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-base);line-height:var(--lh-base);font-weight:600;margin:0 0 var(--s-3)}
.card h2:has(+.card-sub){margin-bottom:var(--s-1)}
.card .card-sub{color:var(--text-muted);font-size:var(--fs-m);line-height:var(--lh-m);margin:0 0 var(--s-4)}
.row{display:flex;gap:var(--s-3)}.row>*{flex:1}
/* Breite Arbeitslisten bleiben innerhalb ihrer Karte. Die Tabelle behaelt ihre
lesbare Mindestbreite; nur der eigene, tastaturfokussierbare Bereich scrollt. */
/* contain:inline-size: die Huelle gibt die Breite ihrer (einzeiligen) Tabelle nicht nach aussen
weiter - ein Raster/Flex um sie herum waechst nicht mit, die Seite scrollt nie quer (TXT-2). */
.table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;contain:inline-size}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Im Rumpf einer Sektion (.ed-sect, Rumpf mit Einzug 16 links/rechts per margin) Breite aus dem Platz
zwischen den Einzuegen: 100 % plus Einzug ragte 16 px rechts aus der Karte, letzte Spalte
angeschnitten (LAY-11, ta-h7wz). */
.ed-sect>.table-scroll{width:auto}
/* Tabelle in der Huelle (Vertrag 7.5, LAY-5): jede Zelle einzeilig (Zeilenwechsel nur per
),
keine Spalte wird unter ihren Inhalt gequetscht; reicht der Platz nicht, scrollt die Tabelle
in der Huelle unter der klebenden Aktionsspalte durch. Ausnahme Fliesstext (.fliesstext, ein
Block in der Zelle): 20ch breit, hoechstens 2 Zeilen, Volltext im title des Blocks. */
.table-scroll>.data-table td{white-space:nowrap}
.data-table td>.fliesstext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;width:20ch;max-width:none;white-space:normal}
/* Chip (Vertrag 7.7): Wert, Kennung, Filter - Ecke = Wert/Kennung. Hoehe 24, innen 0/8, 12/16 500,
Radius 5, Rahmen, eingelassene Flaeche, gedaempfte Schrift (Code: Mono 400 --text). Bricht nicht
um (B08); hoechstens so breit wie sein Platz, dann Ellipse - Daten-Chips tragen den vollen Wert
im title (B03). */
.chip{display:inline-block;max-width:100%;height:var(--ctl-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;padding:0 var(--s-2);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:var(--fs-s);line-height:calc(var(--ctl-s) - 2px);font-weight:500}
.chip.mono{font-family:var(--mono);font-weight:400;color:var(--text)}
a.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
/* Badge (Vertrag 7.6): nur Status. Pille, Hoehe 20, innen 0/8, 11/16 600, -soft-Flaeche + Statusschrift */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);height:20px;padding:0 var(--s-2);border-radius:var(--radius-pill);font-weight:600;font-size:var(--fs-xs);line-height:var(--lh-xs);white-space:nowrap;vertical-align:middle}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.bad{background:var(--bad-soft);color:var(--bad)} .badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.info{background:var(--accent-soft);color:var(--accent-2)} .badge.muted{background:var(--surface-2);color:var(--text-muted)}
/* Meldung (Vertrag 7.14, flash und issue): Kartenflaeche, Rahmen 1 + Statuskante links 3, Radius 8,
innen 12/16, 13/20 --text, kein Schatten (im Fluss, Vertrag 6), Abstand darunter 16. Bleibt im
Seitenfluss (verdeckt keine Knoepfe) und stehen, bis die Seite wechselt. Banner (dauerhaft) wie
Meldung auf --warn-soft. */
.flash,.banner,.issue{padding:var(--s-3) var(--s-4);border-radius:var(--radius);margin:0 0 var(--s-4);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text)}
.issue{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--bad)}
.issue b{font-family:var(--mono)}
.issue.warn{border-left-color:var(--warn)}
.flash{display:flex;align-items:flex-start;gap:var(--s-2);background:var(--surface);border:1px solid var(--border);border-left-width:3px}
/* Symbol 16 auf Zeilenmitte der ersten Zeile */
.flash::before{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:calc((var(--lh-m) - 16px) / 2);border-radius:50%;font-size:var(--fs-xs);line-height:1;font-weight:600}
.flash.ok{border-left-color:var(--ok)} .flash.ok::before{content:"\2713";background:var(--ok-soft);color:var(--ok)}
.flash.bad{border-left-color:var(--bad)} .flash.bad::before{content:"!";background:var(--bad-soft);color:var(--bad)}
.banner{background:var(--warn-soft);border:1px solid var(--warn-edge)}
/* Rueckgaengig-Angebot im Flash (§4.13-D4): Textlink-Optik, damit die Meldung eine Meldung bleibt und keine Aktionsleiste wird. */
.flash-undo{display:inline;margin-left:auto;padding-left:var(--s-2)}
.flash-undo button{height:auto;background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
/* Konflikt-Karte (ta-hhjf.3): Meldung --bad mit Titel (Befund-Zusammenfassung 7.14), Liste wer/was/wann
und Aktionszeile (Knoepfe L, Abstand 8) wie das Entwurfs-Banner. */
.konflikt-b{flex:1;min-width:0}
.konflikt-t{margin:0;font-size:var(--fs-base);line-height:var(--lh-base);font-weight:600;color:var(--bad)}
.konflikt-text{margin:var(--s-1) 0 0}
.konflikt-liste{margin:var(--s-1) 0 0;padding-left:var(--s-5)} .konflikt-liste li{margin:var(--s-1) 0}
.konflikt-liste time{white-space:nowrap;font-variant-numeric:tabular-nums}
.konflikt-a{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.eingabe-hinweis{margin:0 0 var(--s-4);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted)}
.side-panel-body>.eingabe-hinweis{margin:0 0 var(--s-3)}
.eingabe-hinweis a{white-space:nowrap}
/* Betrag als Kennzahl (Vertrag 7.14): 24/32 600, Ziffern gleich breit */
.money{font-family:var(--mono);font-weight:600;font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-variant-numeric:tabular-nums;color:var(--text)}
.muted{color:var(--text-muted)} .mono{font-family:var(--mono);overflow-wrap:break-word} .derived{color:var(--derived-fg)}
.kv{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-2) 0}
/* Aktionszeile (Vertrag 7.13): 24 nach dem letzten Feld, Knoepfe Abstand 8; brechen nicht um, die Zeile tut es (ta-7to5.1) */
.section-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5);align-items:center}
.act-hint{color:var(--text-muted);font-size:var(--fs-s);line-height:var(--lh-s)}
/* Haken 16 (Vertrag 7.13) */
.propchk{width:16px;height:16px;padding:0;accent-color:var(--accent)}
.prereq-list{margin:var(--s-2) 0 0;padding-left:var(--s-5);font-size:var(--fs-m);line-height:var(--lh-m)} .prereq-list li{margin:var(--s-1) 0}
.raw-key{font-family:var(--mono);background:var(--surface-2);border:1px dashed var(--warn);color:var(--warn);padding:var(--s-3);border-radius:var(--radius);word-break:break-all;font-size:var(--fs-m);line-height:var(--lh-m)}
/* Feldhinweis (Vertrag 7.13): 12/16 gedaempft, 4 unter dem Feld */
.hint{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);margin-top:var(--s-1)}
.scn-row{display:flex;gap:var(--s-2);align-items:end;margin-bottom:var(--s-2)}.scn-row label{margin:0 0 var(--s-1)}
/* Leerzustand (Vertrag 7.14): Symbol 48 gedaempft, Titel 16/24 600, Text 14/20 gedaempft;
innen 48/24 als Seiteninhalt, 32/16 in Tabelle/Karte (.empty.sm). */
.empty{text-align:center;padding:var(--s-7) var(--s-5);color:var(--text-muted)} .empty svg{width:48px;height:48px;stroke:var(--text-muted);fill:none;stroke-width:1.5;margin-bottom:var(--s-2)}
.empty h3{margin:0 0 var(--s-1);color:var(--text);font-size:var(--fs-l);line-height:var(--lh-l);font-weight:600}
.empty p{margin:0 auto;max-width:44rem}
/* Handlung im Leerzustand: Knopfreihe (Aktionszeile 24 darueber), mittig */
.empty .section-actions{justify-content:center}
/* ---- Editor (dynamische Zimmer/Saisons/Charges) ---- */
.f{margin-bottom:0} .f label{margin:var(--s-2) 0 var(--s-1)}
.f.has-err input,.f.has-err select{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
/* Fehler am Feld (Vertrag 7.2): 12/16 500 --bad, 4 unter dem Feld */
.ferr{color:var(--bad);font-size:var(--fs-s);line-height:var(--lh-s);margin-top:var(--s-1);font-weight:500}
/* Zwischenbeschriftung im Versal-Stil (Vertrag 1) */
.sub-label{font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:var(--s-4) 0 var(--s-2);display:flex;align-items:center;gap:var(--s-2)}
/* Werkzeugleiste ueber einer Tabelle (Vertrag 7.13 Filterleiste): Suche fuellt den Rest, Abstand 8 */
.table-toolbar{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-3)}
.tbl-filter{flex:1 1 16rem;min-width:0;max-width:40rem}
.col-menu{position:relative;margin-left:auto}
/* Spalten-Menue: Knopf L sekundaer (Vertrag 7.1) */
.col-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;height:var(--ctl-l);padding:0 var(--s-4);border:1px solid var(--border-strong);border-radius:var(--radius);font-size:var(--fs-base);line-height:var(--lh-base);font-weight:500;color:var(--text);background:var(--surface);white-space:nowrap}
.col-menu>summary:hover{background:var(--surface-hover);border-color:var(--text-muted)}
.col-menu>summary::-webkit-details-marker{display:none}
.col-pop{position:absolute;right:0;top:calc(100% + var(--s-1));z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:var(--s-2) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);min-width:160px}
.col-pop label{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500;margin:0}
.data-table th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.data-table th[aria-sort=ascending]::after{content:" \2191";color:var(--accent)}
.data-table th[aria-sort=descending]::after{content:" \2193";color:var(--accent)}
.data-table td[hidden],.data-table th[hidden]{display:none}
.data-table tr[data-href]{cursor:pointer}
.data-table tr.row-off td{color:var(--text-muted)} /* stornierte Zeile dezent, aber AA-konform (kein opacity-Kontrastverlust) */
/* --- Server-Grid (Hotels & weitere Listen): Suche/Filter/Sort/Pagination serverseitig ---
Filterleiste (Vertrag 7.13): Suche fuellt den Rest (mindestens 16rem), jede Auswahl auf einer
festen Stufe 12/16/20rem (Filter-Stufe der Hotel-Auswahl 28rem, wenn 20rem nicht reicht); die
Stufe setzt filterStufen() (formulare.js) aus dem laengsten Eintrag + 44. Nie Inhaltsbreite. */
.grid-toolbar{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-4);flex-wrap:wrap}
.gt-search{flex:1 1 24rem;min-width:min(16rem,100%)} /* Grundbreite: Platzhalter der Buchungssuche ganz sichtbar (TXT-4) */
.gt-facet{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500;color:var(--text-muted);max-width:100%}
.gt-facet select{width:12rem;max-width:100%;flex:none}
.gt-facet select[data-stufe="16"]{width:16rem} .gt-facet select[data-stufe="20"]{width:20rem} .gt-facet select[data-stufe="28"]{width:28rem}
.gt-facet select[data-stufe]+.picker{max-width:100%;min-width:0;flex:0 1 auto} /* data-picker (ta-cj7p): Stufe am Picker hinter dem Select */
.gt-facet select[data-stufe="12"]+.picker{width:12rem} .gt-facet select[data-stufe="16"]+.picker{width:16rem} .gt-facet select[data-stufe="20"]+.picker{width:20rem} .gt-facet select[data-stufe="28"]+.picker{width:28rem}
/* bis 600 px (Vertrag 7.13, LAY-8, ta-uk0c.24): jede Facette eine Zeile, Beschriftung ueber dem
Feld, Feld volle Breite - eine Lage fuer alle Facetten der Leiste; Haken-Facette bleibt Zeile. */
@media(max-width:600px){
.grid-toolbar .gt-facet{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:var(--s-1)}
.grid-toolbar .gt-facet:has(>input:is([type=checkbox],[type=radio])){flex-direction:row;align-items:center;gap:var(--s-2)}
.gt-facet>input:not([type=checkbox]):not([type=radio]),.gt-facet select[data-stufe],.gt-facet select,.gt-facet select[data-stufe]+.picker{width:100%;max-width:none}
}
.gt-clear{color:var(--text-muted)}
/* Trefferzahl am rechten Ende der Filterleiste: 12/16 gedaempft, ohne Umbruch */
.gt-count{margin-left:auto;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);white-space:nowrap}
.sorth{display:inline-flex;align-items:center;gap:var(--s-1);color:inherit;text-decoration:none;white-space:nowrap}
.sorth:hover{color:var(--accent)}
.sorth.on{color:var(--accent);font-weight:600}
.grid-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-4);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);flex-wrap:wrap;gap:var(--s-2)}
.gf-pager{display:inline-flex;align-items:center;gap:var(--s-2)}
.gf-count{font-variant-numeric:tabular-nums}
.ghost.off{opacity:.4;pointer-events:none}
.empty.sm{padding:var(--s-6) var(--s-4);text-align:center}
.empty.sm h3{margin:0 0 var(--s-1)}
.data-table tbody tr[data-href]:hover{background:var(--surface-2)}
/* Reiter (Vertrag 7.10): Hoehe 40, innen 12, 14/20 500 gedaempft; aktiv --accent + Unterstrich 2
(Gewicht bleibt, kein Breitensprung); Hover --text auf --surface-2, Radius 8 oben; Leiste mit
Trenner 1, Abstand 16 zum Inhalt; kein Umbruch im Reiter, die Leiste bricht als Ganzes um. */
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 var(--s-4)}
.tab{appearance:none;height:var(--ctl-l);background:none;border:none;border-bottom:2px solid transparent;border-radius:var(--radius) var(--radius) 0 0;padding:0 var(--s-3);margin-bottom:-1px;font:inherit;font-weight:500;font-size:var(--fs-base);line-height:var(--lh-base);color:var(--text-muted);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2)}
.tab:hover{color:var(--text);background:none} /* generischen button:hover-Fill abfangen (kein Leak auf Tabs) */
.tab:hover:not(.active){background:var(--surface-2)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
a.tab,a.tab:hover{text-decoration:none} /* Editor-Reiter sind Links (ta-21mm.1) */
.tabpane[hidden]{display:none}
/* Kontingent-Kalender und Sammel-Stop-Sale. */
/* Kontingent-Kalender (Scheibe 5b) */
.cal-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
/* Hotel-Auswahl nimmt den freien Platz der Zeile (ta-l6o.241): Namen ganz lesbar. */
.cal-controls>form{flex:1 1 22rem;min-width:0;max-width:40rem}
.cal-pick{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.cal-pick-l{flex:none}
.cal-pick .picker{flex:1;min-width:0}
.cal-nav{display:flex;align-items:center;gap:var(--s-3)}
.cal-range{font-weight:600;font-size:var(--fs-base);line-height:var(--lh-base);min-width:190px;text-align:center;font-variant-numeric:tabular-nums}
/* Legende = Chips (Vertrag 7.7, 7.14): Hoehe 24, 12/16, Ecke 5, Rahmen 1; Flaeche = Zellzustand,
Schrift --text (AA auf jedem Zustand, hell und dunkel). */
.cal-legend{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3);font-size:var(--fs-s);line-height:var(--lh-s)}
.cal-leg{display:inline-flex;align-items:center;height:var(--ctl-s);padding:0 var(--s-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-weight:500;white-space:nowrap}
.cal-legnote{color:var(--text-muted);margin-left:auto}
.cal-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.cal{border-collapse:separate;border-spacing:0;font-size:var(--fs-s);line-height:var(--lh-s);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Zelle mindestens 40 breit, Zeile 32 (Vertrag 7.14); Kopf zweizeilig 2 x 16 = 32. */
.cal th,.cal td{height:var(--ctl-m);border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;padding:0 var(--s-1);min-width:40px}
.cal thead th{position:sticky;top:0;background:var(--surface-2);font-weight:600;color:var(--text-muted);line-height:var(--lh-xs);z-index:1}
.cal .cal-wd{display:block;font-weight:500} .cal .cal-dm{display:block}
.cal .cal-bucket{position:sticky;left:0;background:var(--surface-2);text-align:left;padding:0 var(--s-3);font-weight:600;white-space:nowrap;z-index:2}
.cal thead .cal-bucket{z-index:3}
.cal .cal-we{background:var(--surface)}
.cal-free{background:var(--cal-free)}
.cal-full{background:var(--cal-full)}
.cal-over{background:var(--bad-soft);color:var(--bad);font-weight:600}
.cal-stop{background:var(--cal-stop);color:var(--text-muted)}
.cal-req{background:var(--cal-req)}
.cal-x{color:var(--text-muted)}
/* ---- Sammel-Stop-Sale: Vorschau-Aggregat + Ergebnis-Block ---- */
.bulk-stop,.ss-confirm-stop{border-left:3px solid var(--stopsale-edge)}
.bulk-metrics{display:flex;gap:var(--s-6);flex-wrap:wrap;margin:var(--s-3) 0 var(--s-2)}
.bulk-num{font-size:var(--fs-2xl);font-weight:600;line-height:var(--lh-2xl);font-variant-numeric:tabular-nums}
.bulk-lead{font-size:var(--fs-base);line-height:var(--lh-base);margin:0 0 var(--s-3)}
.bulk-rows td.num,.bulk-rows th.num{text-align:right}
.bulk-rows td.bad{color:var(--bad)}
.bulk-list{margin:var(--s-2) 0 0;padding-left:var(--s-5);font-size:var(--fs-m);line-height:var(--lh-m)}
.bulk-ovr{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);font-weight:600}
.bulk-group{margin-top:var(--s-3);font-size:var(--fs-base);line-height:var(--lh-base)}
.bulk-incomplete{border-left:3px solid var(--bad)}
.bulk-counter{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border)}
@media(max-width:600px){
.cal-pick{flex-wrap:wrap}
.cal-pick .picker{flex:1 1 100%}
}
/* Anmeldeseite und Rechtsseiten ohne Anmeldung (Ventus-Anmeldelayout, ta-l6o.174):
Himmelsband oben, Karte mittig, darunter die Fusszeile mit Impressum/Datenschutz,
Stand und Copyright. In der Karte unten: Sprachwahl und Hell/Dunkel. */
.auth-body{display:flex;flex-direction:column;min-height:100vh;position:relative}
.auth-sky{position:absolute;inset:0 0 auto 0;height:min(420px,60vh);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--bg) 100%);z-index:0;pointer-events:none}
.auth-main{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s-7) var(--s-4) var(--s-6)}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s-6)}
.auth-card .brand{display:flex;justify-content:center;margin:0 0 var(--s-2)}
.auth-card .brand-logo{height:72px;margin:0 auto}
.auth-subtitle{margin:0 0 var(--s-4);text-align:center;font-size:var(--fs-xl);line-height:var(--lh-xl);color:var(--text)}
.auth-card form{display:flex;flex-direction:column}
.auth-card label:first-child{margin-top:0}
.auth-card form button{width:100%;margin-top:var(--s-5)}
.auth-card .flash{margin-bottom:var(--s-4)}
.auth-werkzeuge{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--border)}
.auth-lang{display:flex;gap:var(--s-1)}
/* Sprachwahl: Knopf M (32, Klickflaeche 40 breit), 13/20 500 */
.auth-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:var(--ctl-m);padding:0 var(--s-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500}
.auth-lang a:hover{text-decoration:none;color:var(--text);border-color:var(--text-muted)}
.auth-lang a.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.auth-werkzeuge [data-hinweis]::after{top:auto;bottom:calc(100% + var(--s-2))}
.auth-footer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:0 var(--s-4) var(--s-5);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);text-align:center}
/* Rechtsseiten: Karte mit "Schliessen" oben rechts (Ventus .legal-card). */
.legal-card{position:relative;width:100%;max-width:720px;margin:0 auto;padding:var(--s-6);border-radius:var(--radius-lg)}
/* rechts Platz fuer "Schliessen" (absolut, oben rechts) */
.legal-card h1{margin:0 0 var(--s-4);padding-right:calc(var(--s-7) * 2.5)}
.legal-card p{margin:0 0 var(--s-3)}
.legal-close{position:absolute;top:var(--s-5);right:var(--s-5)}
.legal-note{color:var(--text-muted);font-size:var(--fs-m);line-height:var(--lh-m)}
.legal-missing{padding:var(--s-3) var(--s-4);border:1px dashed var(--warn-edge);border-radius:var(--radius);background:var(--warn-soft);color:var(--text)}
.legal-missing b{display:block;margin-bottom:var(--s-1);color:var(--warn)}
.legal-missing p{margin:0;color:var(--text)}
@media(max-width:600px){
.auth-card,.legal-card{padding:var(--s-5) var(--s-4)}
.legal-card h1{padding-right:0;margin-top:var(--s-7)}
.legal-close{top:var(--s-4);right:var(--s-4)}
}
/* Vertrags-Editor: Zimmer/Belegung/Saisons/Charges/Extras, Raster, Detail-Drawer.
Editier-Raster nach Vertrag 7.5 (ta-uk0c.7): Kopf = Versal-Beschriftung ohne Flaeche, Zeile 40
mit Editier-Zellen (32, 7.2) und Zeilenknoepfen (Symbolknopf M 32 x 32, Symbol 16 als SVG),
Spaltenbreiten nach Inhalt. Nur Tokens (Schrift --fs-*, Abstand --s-*, Radius --radius-*). */
.room{margin:0 0 var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--border-strong);background:var(--surface)}
.occ{margin:0 0 var(--s-2);padding:var(--s-3);border:1px solid var(--border);background:var(--surface-2);box-shadow:none}
.room-head,.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-2)}
.room-head strong,.section-head strong{font-size:var(--fs-base);line-height:var(--lh-base);font-weight:600}
/* eingelassene Flaeche (Vertrag 7.8): Radius 8, --surface-2, Rahmen 1, innen 12 */
.card-inner{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-3);margin:var(--s-2) 0}
/* Rasterkoepfe: EIN Versal-Stil (Vertrag 1): 11/16 600 Condensed versal +0.06em, --text-muted.
Kopftext ueber dem Zelltext: Editier-Zelle innen 8. */
.rrow-h,.orow-h,.erow-h,.srow-h,.crow-h,.bm-head .bm-rh,.bm-col{font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.rrow-h,.orow-h,.erow-h,.srow-h{padding:0 0 var(--s-1);border-bottom:1px solid var(--border)}
/* Kopf und Zeilen sind getrennte Raster mit DERSELBEN festen Spurfolge - nur so fluchten die
Spalten (inhaltsabhaengige Spuren wuerden je Raster anders rechnen). */
:is(.rrow-h,.orow-h,.erow-h,.srow-h,.crow-h)>span{padding:0 0 0 var(--s-2);min-width:0}
/* Kopf ueber einer Zahlenspalte steht rechts wie ihre Werte (Vertrag 7.5; Spaltenfolge wie die
grid-template-columns unten): Zimmer-Zaehler, Belegung 1-7, Saison Grundpreis/Folgenacht, Verpflegung
Aufpreis/Alter, Kinder Prozent/Betrag/Alter, Sperren Erwachsene/Kinder. */
:is(.rrow-h>span:is(:nth-child(3),:nth-child(4),:nth-child(5)),.orow-h>span:nth-child(-n+7),.srow-h>span:is(:nth-child(3),:nth-child(4)),.crow-h.crow-board>span:is(:nth-child(2),:nth-child(3),:nth-child(4)),.crow-h.crow-guest>span:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5)),.crow-blocked.crow-h>span:is(:nth-child(1),:nth-child(2))){padding:0 var(--s-2) 0 0;text-align:right}
/* Rasterzeile 40: Editier-Zelle 32 + 4 oben/unten */
.rrow-sum,.orow-sum,.erow-sum,.srow-sum{padding:var(--s-1) 0}
/* Zimmer-Tabelle (Liste) + Reingehen-Detail. Spalte 1 (Zimmer-Code als Positions-Auswahl)
mindestens 12rem (rem, nicht em: Kopf 11 px und Zeile 14 px
muessen dieselbe Spurbreite rechnen): "DZ · Doppelzimmer" steht ganz in der Auswahl, auch bei 390 px (dann scrollt
die Huelle; Vertrag 7.3, TXT-5). */
.rrow-h,.rrow-sum{display:grid;grid-template-columns:minmax(12rem,1.4fr) 170px 78px 78px 78px var(--ctl-m) var(--ctl-m);gap:var(--s-2);align-items:center}
/* Abschnittsmodus, Zimmerliste (C3): Spalte mit fuenf Zeilenknoepfen (nach oben/unten, umbenennen, kopieren, loeschen) vor dem Detailpfeil */
.rrow-h.zl,.rrow-sum.zl{grid-template-columns:minmax(12rem,1.4fr) 170px 78px 78px 78px calc(5 * var(--ctl-m) + 4 * var(--s-1)) var(--ctl-m)}
.zl-akt{display:flex;gap:var(--s-1)}
.rrow{border-bottom:1px solid var(--border)}
.rrow-sum .cell{min-width:0} .rrow-sum .cell input,.rrow-sum .cell select{width:100%}
.roomarea:not(.detail) .rrow-sum{cursor:pointer}
.rrow-det{display:none;padding:var(--s-3) 0 var(--s-1);margin-top:var(--s-2);border-top:1px solid var(--border)}
/* Reingehen-Detailmodus: nur das aktive Zimmer, Liste/Kopf/Add ausgeblendet */
.rooms-detailbar{display:none}
.roomarea.detail .rooms-detailbar{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--border)}
.rooms-detailbar .crumb{font-weight:600;font-size:var(--fs-base);line-height:var(--lh-base)}
.rooms-detailbar .rd-nav{display:inline-flex;gap:var(--s-1);margin-left:auto}
.roomarea.detail .rrow-h{display:none}
.roomarea.detail [data-add="room"]{display:none}
.roomarea.detail .rrow:not(.active){display:none}
.roomarea.detail .rrow.active{border-bottom:none}
/* Kopf des geoeffneten Zimmers: Felder so breit wie ihr Inhalt, bei schmaler Breite umbrechen
statt zu stauchen (390 px: Auswahl und Entfernen-Knopf blieben sonst unter ihrem Mass). */
.roomarea.detail .rrow.active>.rrow-sum{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;padding:0 0 var(--s-1)}
.roomarea.detail .rrow.active>.rrow-sum>.cell{flex:none;max-width:100%}
.roomarea.detail .rrow.active>.rrow-sum .cell select{width:auto;max-width:100%}
.roomarea.detail .rrow.active>.rrow-sum .cnt,.roomarea.detail .rrow.active>.rrow-sum .chev{display:none}
.roomarea.detail .rrow.active>.rrow-det{display:block;border-top:none;margin-top:var(--s-2);padding-top:0}
/* Belegungs-Tabelle (Profile) mit Drill-Down (Kinder-Band/Infants/Sperren im Detail) */
.orow-h,.orow-sum{display:grid;grid-template-columns:repeat(7,minmax(48px,1fr)) var(--ctl-m) var(--ctl-m);gap:var(--s-2);align-items:center}
.orow{border-bottom:1px solid var(--border)}
.orow:last-child{border-bottom:none}
.orow-sum:hover{background:var(--surface-2);border-radius:var(--radius-sm)}
.orow.open .chev{transform:rotate(90deg);color:var(--accent)}
.orow-det{display:grid;gap:var(--s-3);padding:var(--s-2) 0 var(--s-1) var(--s-3);margin:var(--s-1) 0 var(--s-2);border-left:2px solid var(--accent-soft)}
.orow-det[hidden]{display:none}
.crow-blocked{grid-template-columns:1fr 1fr var(--ctl-m)}
/* Extras-Tabelle (Zeile) mit Drill-Down-Drawer (analog Belegung/Saison) */
.erow-h,.erow-sum{display:grid;grid-template-columns:minmax(0,1fr) var(--ctl-m) var(--ctl-m);gap:var(--s-2);align-items:center}
.erow{border-bottom:1px solid var(--border)}
.erow:last-child{border-bottom:none}
.erow-sum .cell{min-width:0}
.erow.drawer-open .chev{color:var(--accent)}
.erow-det{display:flex;flex-direction:column;gap:var(--s-4)}
.erow-det[hidden]{display:none}
/* Saison-Drill-Down-Tabelle: Kopf + dichte Zeile (Zusammenfassung) + Detail. Preisspalten
mindestens 6rem: ein Betrag wie 100.00 steht ganz in der Zelle (TXT-4), auch bei 390 px
(dann scrollt die Huelle). */
.srow-h,.srow-sum{display:grid;grid-template-columns:120px 120px minmax(6rem,1fr) minmax(6rem,1fr) minmax(110px,.9fr) minmax(110px,.9fr) var(--ctl-m);gap:var(--s-2);align-items:center}
.srow{border-bottom:1px solid var(--border)}
.srow-sum .cell{min-width:0} .srow-sum .cell input{width:100%}
.basecells,.basecell{display:contents}
.cnt{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted);text-align:right;padding-right:var(--s-2);font-variant-numeric:tabular-nums}
/* Verpflegung/Kinderpreise als klickbarer Zaehlknopf M (Hoehe, Innenabstand, Schrift aus
base.css) statt stummem Zaehler; Pfeil als SVG 16. */
.cnt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-width:0;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;white-space:nowrap;overflow:hidden}
.cnt-btn .cnt-lbl{overflow:hidden;text-overflow:ellipsis}
.cnt-btn .cnt-chev{display:inline-flex;color:var(--text-muted)}
.cnt-btn:hover{border-color:var(--accent);color:var(--accent)}
.cnt-btn:hover .cnt-chev{color:var(--accent)}
.cnt-btn.cnt-add{color:var(--text-muted);border-style:dashed}
.cnt-btn.cnt-add .cnt-chev{display:none}
/* Zeilenknoepfe (Vertrag 7.1: Symbolknopf M, sekundaer): Detailpfeil und Entfernen gleich
gross (32 x 32, auch kompakt), Symbol 16 als SVG; Entfernen in --bad. Schrumpfen nie. */
.chev,.xrow,.zl-knopf{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-m);height:var(--ctl-m);padding:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;justify-self:center}
.chev svg,.xrow svg,.zl-knopf svg,.cnt-chev svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chev{color:var(--text);transition:transform .18s,background-color .12s,border-color .12s}
.chev:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--accent)}
.srow.open .chev{transform:rotate(90deg);color:var(--accent)}
.xrow{color:var(--bad)}
.xrow:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.srow-det{padding:var(--s-2) 0 var(--s-3) var(--s-3);margin:var(--s-1) 0 var(--s-2) var(--s-1);border-left:2px solid var(--accent-soft);display:grid;gap:var(--s-4)}
.srow-det[hidden]{display:none}
/* Charge-Tabellen (Base/Board/Guest): Kopfzeile + dichte spaltige Zeilen */
.crow{display:grid;gap:var(--s-2);align-items:center;padding:var(--s-1) 0;border-bottom:1px solid var(--border)}
.crow:last-child{border-bottom:none}
.crow-base{grid-template-columns:minmax(120px,200px) 1fr}
/* Spalten nach Inhalt (ta-379d): Auswahl so breit, dass ihr Text lesbar bleibt, Alter/Prozent
schmal; zu schmal -> die Huelle (.ed-scroll) scrollt seitlich statt Werte abzuschneiden.
Bezug (Kinder) 7rem: "erste Nacht" passt mit Zell-Innenabstand 8 ganz hinein. */
.crow-board{grid-template-columns:minmax(150px,1.3fr) 84px 58px 58px minmax(124px,1fr) var(--ctl-m)}
.crow-guest{grid-template-columns:minmax(7rem,.9fr) 60px 76px 58px 58px minmax(124px,1fr) var(--ctl-m)}
/* Board-Preis-Raster (Altersstufe x Verpflegung): Zeilenabstand 8 -> Zeile 40 */
.bmatrix,.gmatrix{display:grid;gap:var(--s-2);align-items:center;margin:var(--s-1) 0}
.bm-row{display:contents}
/* Board-Raster: Spalte 1 = Altersstufe (breitester Name, min. 120px), Spalte 2 = die Zellen
der Zeile in einer eigenen Spur (je Verpflegung 84px). Jede Zeile hat gleich viele Zellen,
also gleich breite Spuren - die Spalten fluchten ohne Spaltenzahl im HTML (CSP, kein
style-Attribut). */
.bmatrix{grid-template-columns:minmax(120px,max-content) max-content}
.bm-cells{display:grid;grid-auto-flow:column;grid-auto-columns:84px;gap:var(--s-2);align-items:center}
.bm-rh{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-age{color:var(--text-muted);font-size:var(--fs-s);line-height:var(--lh-s)}
.bm-col{text-align:center}
.bm-cell,.gm-cell{width:100%;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
/* Platzhalter "0" rechtsbuendig NICHT kursiv (ta-379d): IBM Plex liegt nur aufrecht vor, der
Browser schraegt kuenstlich - die Schraege ragt ueber den Inhaltsrand und wurde abgeschnitten
("0" halb sichtbar). Blass bleibt er (base.css), das unterscheidet ihn vom Wert. */
.bm-cell::placeholder,.gm-cell::placeholder{font-style:normal}
/* Kennzeichen "Sonderzeilen" in der gesperrten 84-px-Zelle: Stufe 11 wie ein Badge, sonst passt
es nicht ganz hinein (test_formular_layout misst den Platzhalter). */
.bm-cell.mx-locked::placeholder,.gm-cell.mx-locked::placeholder{font-size:var(--fs-xs);text-overflow:ellipsis}
/* Kinderpreis-Raster: "Rabatt %" fuer alle Kinder; mit "nach Kindposition staffeln" (PW8)
zusaetzlich 1./2./ab 3. Kind (gm-pos, nur Kinder-Stufen 2..17, sonst gm-na). */
/* Zellen feste, lesbare Breite neben der Beschriftung (nicht an den rechten Rand gezogen). */
.bmatrix,.gmatrix{justify-content:start}
.gmatrix{grid-template-columns:minmax(120px,max-content) 96px}
.gm-wrap.staffel .gmatrix{grid-template-columns:minmax(120px,max-content) repeat(4,84px)}
.gm-wrap:not(.staffel) .gm-pos{display:none}
.gm-na{text-align:center;color:var(--text-muted)}
.gm-staffel{display:inline-flex;gap:var(--s-2);align-items:center;font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text);margin:0 0 var(--s-2);cursor:pointer}
/* Ein vom Server abgelehnter Raster-Wert steht an der Zelle SELBST (die Rasterzeile ist
nur ein Slot) -- roter Rand + Klartext-Liste direkt unter dem Raster (bm-cell-errs/
gm-cell-errs), kein Tooltip-only. Gesperrte Zelle (mx-locked): Altersstufe mit
Sonderzeilen, Werte stehen in den Einzelzeilen. */
.bm-cell.has-err,.gm-cell.has-err{border-color:var(--bad);background:var(--bad-soft)}
.bm-cell-errs,.gm-cell-errs{margin-top:var(--s-1)}
.bm-hint{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);margin:var(--s-1) 0 0}
.bm-hint.warn{color:var(--warn)} .gm-cell.gm-infant{border-color:var(--warn)}
/* Objektpreis (rechen-spez §6.2, PW4): kein Kinderpreis-Raster; Hinweise nur dort. Ein
Altstand mit Kinderpreis-Zeilen bleibt sichtbar, damit er geloescht werden kann. */
[data-calc] .nur-objekt{display:none}
[data-calc="O"] .nur-objekt{display:block}
[data-calc="O"] .gc-body:not(.gc-altstand),[data-calc="O"] .gc-add{display:none}
.bm-cell.mx-locked,.gm-cell.mx-locked{padding-left:var(--s-1);padding-right:var(--s-1);text-align:center;font-style:italic;color:var(--text-muted);background:var(--surface-2);cursor:not-allowed}
.charge-adv{margin-top:var(--s-3)}
.charge-adv>summary{cursor:pointer;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);padding:var(--s-1) 0;user-select:none}
.charge-adv[open]>summary{margin-bottom:var(--s-2)}
/* Kopf auf DEMSELBEN Raster wie die Zeilen (vorher ohne display:grid: alle Koepfe links
zusammengeschoben, ueber den Spalten nichts). */
.crow-h{display:grid;gap:var(--s-2);align-items:end;padding:0 0 var(--s-1)}
.crow .cell{min-width:0}
/* Fehlertext am Feld (Vertrag 7.2): 12/16, Abstand 4 */
.srow-sum .cell .ferr,.crow .cell .ferr{font-size:var(--fs-s);line-height:var(--lh-s);margin-top:var(--s-1)}
/* Editier-Zelle (Vertrag 7.2): Hoehe 32 (base.css), innen 8, 13/20, Radius 5, Rahmen
unsichtbar -> Hover --surface-2 -> Fokus 1 px --accent + 1 px Ring; Zahl rechts und
tabellarisch. FLACH wie eine Datentabelle: der Wert steht im Vordergrund, die Box erscheint
erst bei Hover/Fokus. (Nur .cell; die normalen Formularfelder .f behalten ihre Box.) */
.cell{min-width:0}
.cell input,.cell select{width:100%;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);padding:0 var(--s-2);font-size:var(--fs-m);line-height:var(--lh-m)}
.cell input:is([inputmode=numeric],[inputmode=decimal]),.prop .ctrl input:is([inputmode=numeric],[inputmode=decimal]){text-align:right;font-variant-numeric:tabular-nums}
.cell input:hover,.cell select:hover{background:var(--surface-2)}
.cell input:focus,.cell select:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}
.cell.has-err input,.cell.has-err select{border-color:var(--bad);background:var(--bad-soft)}
.pos-meta .has-err input{border-color:var(--bad);background:var(--bad-soft)}
.cell input:disabled,.cell select:disabled{opacity:.4;background:var(--surface-2);cursor:not-allowed}
.crow:hover,.srow-sum:hover{background:var(--surface-2);border-radius:var(--radius-sm)}
.charge{display:flex;gap:var(--s-2);align-items:flex-end;margin-bottom:var(--s-2)}
.charge .f{flex:1;margin-bottom:0}
.addbtn{margin-left:auto}
.extra{border-left:2px solid var(--border-strong);padding:var(--s-1) 0 var(--s-1) var(--s-3);margin:0 0 var(--s-3)}
.charge .rt-field{flex:1;min-width:90px;display:block}
.charge .rt-field .f{margin-bottom:0}
.restr,.appl{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-3);margin-bottom:var(--s-2);flex-wrap:wrap}
/* Restriktions-/Appliance-Zeile (ta-sky6): Raster statt Flex-Reihe, damit Datums- und
Zahlfelder nie unter ihre lesbare Breite schrumpfen (1280er Drawer: 3 Spalten, Telefon:
1). Der Typ steht allein in Zeile 1 (volle Breite, Beschriftung lesbar), das Entfernen-x
oben rechts auf Hoehe der Beschriftung (der Select behaelt die volle Breite);
ausgeblendete Typ-Felder (display:none) belegen keine Zelle. */
.restr:not(.rrule),.appl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-1) var(--s-3);align-items:end;position:relative}
.restr:not(.rrule)>.f:first-of-type,.appl>.f:first-of-type{grid-column:1/-1}
.restr:not(.rrule)>.xrow,.appl>.xrow{position:absolute;top:var(--s-2);right:var(--s-2)}
.restr:not(.rrule) .rt-field,.appl .rt-field{min-width:0}
.restr:not(.rrule) input,.restr:not(.rrule) select,.appl input,.appl select{width:100%;min-width:0}
.sub-label-restr{margin:var(--s-1) 0 var(--s-2)}
/* Verkaufsregel (M9a): vier Gruppen mit Rolle nebeneinander, bei schmaler Breite untereinander. */
.rrule{align-items:stretch}
.rrule .rr-grp{flex:1 1 200px;min-width:0;border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-1) var(--s-2) var(--s-2);margin:0;display:flex;flex-direction:column;gap:var(--s-2)}
.rrule .rr-grp legend{font-size:var(--fs-s);line-height:var(--lh-s);font-weight:600;padding:0 var(--s-1);color:var(--text-muted)}
.rrule .rr-grp .f{margin-bottom:0}
.rrule > .xrow{align-self:flex-start}
/* ---- Detail-Drawer (Belegung/Saison/Extra): Baustein Seitenpanel/Drawer in
components/overlays.css (Vertrag 7.9). ---- */
/* Leere (zeilenlose) Spaltenkoepfe ausblenden — kein orphaner Tabellenkopf. */
.crow-h.head-empty{display:none}
/* Raster-Tabellen (Zimmer/Belegung/Saisons/Extras) auf schmalen Bildschirmen (ta-jjvg):
eigene waagerechte Scroll-Huelle wie die Datentabellen (ta-h05) - die Seite selbst
scrollt nie seitlich. Zeilen behalten ihre Mindestbreite (Rahmen laufen mit), ein
Schatten am Rand zeigt, dass es seitlich weitergeht. Die Zimmer-Huelle gilt nur in der
Liste; im Detail (Reingehen) tragen die inneren Tabellen ihre eigene Huelle. */
.ed-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ed-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ed-scroll:not(.rooms-scroll)>*,.roomarea:not(.detail) .rooms-scroll>*{min-width:min-content}
.roomarea.detail .rooms-scroll{overflow:visible}
@media(max-width:600px){
.ed-scroll:not(.rooms-scroll),.roomarea:not(.detail) .rooms-scroll{
background:linear-gradient(to right,var(--surface) 30%,transparent) left/24px 100% no-repeat local,
linear-gradient(to left,var(--surface) 30%,transparent) right/24px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,var(--scroll-edge),transparent) left/10px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,var(--scroll-edge),transparent) right/10px 100% no-repeat scroll}
}
/* Rechner "Was gilt?" (ta-at8j.11): Formularzeile bricht um, Spalten wachsen nie ueber die
Seite (Tabellen scrollen in .table-scroll), Vergleich unter 1000px untereinander. */
.wg-form-row{flex-wrap:wrap}
.wg-form-row>.f{flex:1 1 140px;min-width:0}
.wg-form-row input,.wg-form-row select{width:100%;min-width:0}
.wg-vergleich>.wg-spalte,.wg-spalte>.card{min-width:0}
.wg-quelle{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);border:0;padding:0;margin:var(--s-3) 0 0}
.wg-quelle legend{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted);margin-bottom:var(--s-1)}
.wg-urteil{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-3)}
.wg-grund{flex-basis:100%;margin:0}
.wg-rechenweg{width:100%}
/* Pruefliste = Tabelle (Vertrag 7.5): Breite aus der Huelle (.table-scroll>.data-table), Zeilen einzeilig */
.wg-pruef td{vertical-align:top}
/* Altersliste "40,8" ist eine Zahlenliste (Vertrag 7.2 "Zahl"): rechtsbuendig wie ein Zahlfeld; Textfeld, weil
die Ziffern-Tastatur kein Komma hat */
.wg-form-row input[name=ages]{text-align:right;font-variant-numeric:tabular-nums}
.wg-diff,.wg-waswaere{margin:var(--s-4) 0}
.wg-spalte+.wg-spalte{margin-top:0}
@media(max-width:1000px){.wg-vergleich{grid-template-columns:minmax(0,1fr)}}
.wg-naechte td,.wg-naechte th{white-space:nowrap}
/* Formular-Bausteine: Formularraster (Vertrag 7.13), Karte/Sektion mit Kopfband (7.8),
Zebra-Lesehilfe. Nur Tokens. */
/* ---- Formularraster (Vertrag 7.13, ta-uk0c.5): Feldbreite aus dem Raster, nie aus dem Inhalt ----
Beschriftungsspalte 12rem fest (subgrid: alle Zeilen eines Blocks teilen sie, ta-379d),
Feldspalte hoechstens 40rem. Jedes Feld fuellt seine Stufe ganz: voll (Standard), halb
(Zahl, Datum, kurze Auswahl, Code; `.halb` am .ctrl, Zahl und Datum von selbst), Paar
(`.paar`) und Dreiergruppe (`.drei`) mit Teilbeschriftung 12/16 ueber jedem Feld. Die rechte
Haelfte endet auf der Kante der vollen Felder. Vorher Breite nach Inhalt (Zahl 14em, Datum
12em, Text 30em, Auswahl width:auto) - jedes Feld hatte seine eigene rechte Kante. */
.propgrid{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:var(--s-3) var(--s-4);align-items:start}
.propgrid>*{grid-column:1/-1}
.prop{display:grid;grid-template-columns:subgrid;align-items:start}
.prop>.pl{margin:0;padding-top:calc((var(--ctl-l) - var(--lh-m)) / 2);text-align:right;font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500;color:var(--text-muted);overflow-wrap:break-word;hyphens:auto}
/* Gruppenbeschriftung (Paar, Dreiergruppe) auf Feldtext-Hoehe: unter der Teilbeschriftung */
.prop.gruppe>.pl{padding-top:calc(var(--lh-s) + var(--s-1) + (var(--ctl-l) - var(--lh-m)) / 2)}
.prop>.ctrl{min-width:0;max-width:40rem;container:feld/inline-size}
/* Stufe halb: ein kurzes Feld allein steht in der linken Haelfte; Hinweis und Fehler so breit wie das Feld */
.prop>.ctrl>:is(input[inputmode=numeric],input[inputmode=decimal],input[type=date]),
.prop>.ctrl:has(>:is(input[inputmode=numeric],input[inputmode=decimal],input[type=date]))>:is(.hint,.ferr),
.prop>.ctrl.halb>:is(input,select,.picker,.hint,.ferr){width:calc((100% - var(--s-4)) / 2)}
/* Feld, dessen Inhalt nicht in die halbe Feldspalte passt (formStufen, ta-l6o.308):
Stufe voll - allein ueber die ganze Feldspalte, im Paar untereinander */
.prop>.ctrl.halb[data-voll]>:is(input,select,.hint,.ferr){width:100%}
.paar[data-voll]{grid-template-columns:minmax(0,1fr)}
/* Zahlfeld (Vertrag 7.2 "Zahl", LAY-5): rechtsbuendig, Ziffern gleich breit - im Raster und in
jeder Filter-/Rechnerzeile (Textfeld mit inputmode, type=number) */
input:is([inputmode=numeric],[inputmode=decimal],[type=number]){text-align:right;font-variant-numeric:tabular-nums}
.paar,.drei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start}
.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.teil{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
/* Teilbeschriftung 12/16 500 gedaempft, einzeilig, 4 ueber dem Feld; sie umschliesst ihr Feld */
.teil>label{display:flex;flex-direction:column;gap:var(--s-1);margin:0;min-width:0}
.teil-l{font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teil>.ferr,.teil>.hint{margin-top:0}
/* Teilfeld < 9rem: untereinander in Stufe voll (Paar ab 2 x 9rem + 16, Drittel ab 3 x 9rem + 32) */
@container feld (max-width:303px){
.paar{grid-template-columns:minmax(0,1fr)}
.prop>.ctrl>:is(input[inputmode=numeric],input[inputmode=decimal],input[type=date]),
.prop>.ctrl:has(>:is(input[inputmode=numeric],input[inputmode=decimal],input[type=date]))>:is(.hint,.ferr),
.prop>.ctrl.halb>:is(input,select,.picker,.hint,.ferr){width:100%}
}
@container feld (max-width:463px){.drei{grid-template-columns:minmax(0,1fr)}}
.prop>.ctrl .hint{display:block}
.prop>.ctrl>.ferr{margin-top:var(--s-1)}
.prop.has-err>.ctrl :is(input,select),.prop.has-err .pk-box,.teil.has-err :is(input,select){border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
/* Knopfgruppe im Feld (z. B. Vorlagen der offenen Suche): sekundaere Knoepfe, Abstand 8 (7.1) */
/* Offene Suche (ta-at8j.22.8): Vorlagen-Wahl als erster Schritt - je Vorlage ein Knopf (L,
sekundaer) und darunter eine Zeile, fuer wen sie gedacht ist; der Knopf der passenden Vorlage
ist gedrueckt (Flaeche/Rahmen/Schrift wie ein gewaehlter Chip, 7.7). Bis 600 px untereinander. */
.tpl-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.tpl-opt{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.tpl-opt>button{width:100%}
.tpl-opt>button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.tpl-fuer{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted)}
/* Haken an der Feldkante, auf Feldhoehe mittig */
.prop>.ctrl>input[type=checkbox]{margin:calc((var(--ctl-l) - 16px) / 2) 0 0}
/* .pv = Nur-Lese-Wert (Anzeige statt Feld, z. B. "Mein Konto"-Profil), auf Feldtext-Hoehe */
.prop>.pv{min-width:0;padding-top:calc((var(--ctl-l) - var(--lh-base)) / 2);color:var(--text)}
/* Aktionszeile und Hinweis zum ganzen Formular beginnen an der Feldkante (Vertrag 7.13): nach dem
Raster (Beschriftungsspalte + Abstand), nach einer Sektion mit Raster zusaetzlich Rahmen und
Rumpf-Innenabstand der Sektion. Ein Formular-Hinweis reicht hoechstens bis zur Feldspalte. */
.propgrid~.section-actions{padding-left:calc(12rem + var(--s-4))}
.propgrid~.hint{margin-left:calc(12rem + var(--s-4));max-width:40rem}
.ed-sect>.propgrid~.hint{margin-left:calc(var(--s-4) + 12rem + var(--s-4))}
.ed-sect:has(>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4) + 12rem + var(--s-4))}
/* Sektionen in einem Aufklapper (Feinheiten der offenen Suche): die Aktionszeile danach steht
ebenso an der Feldkante. Der Satz aus den Werten unter dem Raster einer Sektion (klartext.css
.satz) beginnt an der Feldkante und ist hoechstens so breit wie die Feldspalte. */
details:has(.ed-sect>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4) + 12rem + var(--s-4))}
.ed-sect>.propgrid~.search-satz{margin:var(--s-3) var(--s-4) 0 calc(var(--s-4) + 12rem + var(--s-4));max-width:40rem}
/* bis 600 px, im Seitenpanel und im Editor-Drawer: Beschriftung ueber dem Feld, eine Spalte */
@media(max-width:600px){
.propgrid{grid-template-columns:minmax(0,1fr)}
.prop{row-gap:var(--s-1)}
.prop>.pl,.prop.gruppe>.pl{text-align:left;padding-top:0}
.prop>.pv{padding-top:0}
.prop>.ctrl>input[type=checkbox]{margin:0}
.propgrid~.section-actions{padding-left:0}
.propgrid~.hint{margin-left:0}
.ed-sect>.propgrid~.hint{margin-left:var(--s-4)}
.ed-sect:has(>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4))}
details:has(.ed-sect>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4))}
.ed-sect>.propgrid~.search-satz{margin-left:var(--s-4)}
.tpl-wahl{grid-template-columns:minmax(0,1fr)}
}
:is(.side-panel,.drawer-open) .propgrid{grid-template-columns:minmax(0,1fr)}
:is(.side-panel,.drawer-open) .prop{row-gap:var(--s-1)}
:is(.side-panel,.drawer-open) :is(.prop>.pl,.prop.gruppe>.pl){text-align:left;padding-top:0}
:is(.side-panel,.drawer-open) .prop>.pv{padding-top:0}
:is(.side-panel,.drawer-open) .prop>.ctrl>input[type=checkbox]{margin:0}
:is(.side-panel,.drawer-open) .propgrid~.section-actions{padding-left:0}
:is(.side-panel,.drawer-open) .propgrid~.hint{margin-left:0}
:is(.side-panel,.drawer-open) .ed-sect>.propgrid~.hint{margin-left:var(--s-4)}
:is(.side-panel,.drawer-open) .ed-sect:has(>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4))}
:is(.side-panel,.drawer-open) details:has(.ed-sect>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4))}
:is(.side-panel,.drawer-open) .ed-sect>.propgrid~.search-satz{margin-left:var(--s-4)}
/* Sektionen eines Formulars stehen bis 1279 px untereinander: die Feldkante laeuft durch (Regel 4) */
.propwrap{display:flex;flex-direction:column;gap:var(--s-4);max-width:calc(52rem + 3 * var(--s-4) + 2px)} /* Beschriftung + Feldspalte + Abstand + Karte innen + Rahmen */
/* ab 1280 px nutzt die Formularkarte die ganze Breite (Vertrag 7.13, LAY-14, ta-l6o.308): die
Sektionen fliessen in zwei gleich breite Spalten, Sektionen einer Zeile gleich hoch; die
Feldkante laeuft je Spalte durch. Sektion mit Tabelle oder `.voll` (sehr viele Felder),
Aktionszeile und Hinweise laufen ueber die volle Breite. */
@media(min-width:1280px){
.propwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;max-width:none}
.propwrap>:not(.ed-sect),.propwrap>.ed-sect:is(.voll,:has(table)){grid-column:1/-1}
/* Beschriftungsspalte 10rem statt 12rem (Planer 30.09.): die Feldspalte bleibt bei 1440 breit
genug fuer Paare nebeneinander; Hinweis, Satz und Aktionszeile folgen der Feldkante. */
.propwrap .propgrid{grid-template-columns:10rem minmax(0,1fr)}
.propwrap .ed-sect>.propgrid~.hint{margin-left:calc(var(--s-4) + 10rem + var(--s-4))}
.propwrap .ed-sect>.propgrid~.search-satz{margin-left:calc(var(--s-4) + 10rem + var(--s-4))}
.propwrap .ed-sect:has(>.propgrid)~.section-actions,
details:has(>.propwrap>.ed-sect>.propgrid)~.section-actions{padding-left:calc(1px + var(--s-4) + 10rem + var(--s-4))}
}
/* ---- Karte/Sektion mit Kopfband (Vertrag 7.8): EIN Baustein fuer Editor-Bereiche, Zimmer-Detail,
Allgemein-Stammdaten und Drawer-Unterbereiche. Rahmen 1 / Radius 12, Kopfband 48 auf der
eingelassenen Flaeche, Titel 14/20 600, Aktionen rechts (Knopf M), Rumpf innen 16. ---- */
.ed-sect{margin:0 0 var(--s-4);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0 0 var(--s-4);background:var(--surface)}
.ed-sect>:not(.ed-sect-h){margin-left:var(--s-4);margin-right:var(--s-4)}
.ed-sect:last-child{margin-bottom:0}
.ed-sect-h{display:flex;align-items:center;gap:var(--s-2);min-height:48px;margin:0 0 var(--s-4);padding:0 var(--s-4);background:var(--surface-2);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ed-sect-t{font-size:var(--fs-base);line-height:var(--lh-base);font-weight:600;color:var(--text)}
/* Einleitungssatz einer Sektion: was sie steuert, mit Beispiel (ta-at8j.22.8) */
.ed-sect>.sect-lede{margin-top:0;margin-bottom:var(--s-4);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text-muted)}
/* Aufklapper mit Sektionen (Feinheiten der offenen Suche): Kopfzeile wie ein Sektionskopf ohne
Rumpf, Pfeil wie die Kapazitaets-Gruppe; offen folgen die Sektionen mit Abstand 16. */
.search-fein>summary{display:flex;align-items:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);font-weight:600;color:var(--text);cursor:pointer;list-style:none}
.search-fein>summary::-webkit-details-marker{display:none}
.search-fein>summary::before{content:"";width:6px;height:6px;border:solid var(--text-muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .12s ease;flex:none;margin:0 var(--s-1)}
.search-fein[open]>summary{margin-bottom:var(--s-4)}
.search-fein[open]>summary::before{transform:rotate(45deg)}
.search-fein>summary:hover{border-color:var(--border-strong)}
.ed-sect-h .addbtn{margin-left:auto}
/* leerer Bereich -> nur die Kopfleiste, kein leerer Rumpf (sect-empty via JS) */
.ed-sect.sect-empty{padding-bottom:0}
.ed-sect.sect-empty>.ed-sect-h{margin-bottom:0;border-bottom:none;border-radius:var(--radius-lg)}
.ed-sect.sect-empty>:not(.ed-sect-h){display:none}
/* in Drawern: Panels per Flex-gap getrennt (kein doppelter Abstand) */
.orow.drawer-open .ed-sect,.srow.drawer-open .ed-sect,.erow.drawer-open .ed-sect{margin:0}
.propwrap .ed-sect{margin:0}
/* ---- Dezentes Zebra: reine Lesehilfe fuer breite Zeilen. Halbtransparenter
Grauschleier (~6%) -> hell wie dunkel korrekt, keine neuen Tokens. Hover
gewinnt darueber (hoehere Spezifitaet, nach dem Zebra notiert). ---- */
.data-table tbody tr:nth-child(even){background:var(--zebra)}
.orow:nth-child(even)>.orow-sum,.srow:nth-child(even)>.srow-sum,.erow:nth-child(even)>.erow-sum{background:var(--zebra)}
.orow>.orow-sum:hover,.srow>.srow-sum:hover,.erow>.erow-sum:hover{background:var(--surface-hover)}
/* Texte mit Formatierung (H3b ta-at8j.23.13): Knopfleiste aus Symbolknoepfen L (7.1) ueber dem
gestalteten Feld; das Feld ist die Eingabe mehrzeilig (7.2) und zeigt den Text so, wie das HTML
ihn darstellt. Ohne JS bleiben beide verborgen, gepflegt wird im Textfeld. Fett hoechstens 600. */
.rt-leiste[hidden],.rt-feld[hidden],.prop>.ctrl>textarea[hidden]{display:none}
.rt-leiste{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-bottom:var(--s-2)}
.rt-leiste .rt-html{margin-left:auto}
/* Hinweisblase ueber dem Knopf: darunter laege sie nach dem Klick auf der ersten Textzeile */
.rt-leiste [data-hinweis]::after{top:auto;bottom:calc(100% + var(--s-2))}
.rt-feld{min-height:calc(var(--lh-base) * 6 + var(--s-2) * 2 + 2px);overflow:auto;resize:vertical;padding:var(--s-2) var(--s-3);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text);font-size:var(--fs-base);line-height:var(--lh-base);overflow-wrap:anywhere;transition:border-color .18s,box-shadow .18s}
.rt-feld:hover{border-color:var(--text-muted)}
.rt-feld:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.rt-feld :is(p,ul,ol){margin:0 0 var(--s-2)}
.rt-feld>:last-child{margin-bottom:0}
.rt-feld :is(ul,ol){padding-left:var(--s-5)}
.rt-feld :is(b,strong){font-weight:600}
.prop.has-err .rt-feld,.prop.has-err>.ctrl>textarea{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
/* Klartext im Vertrags-Editor (ta-at8j.10): Satz statt EDF-Kuerzel in der Extra-Zeile,
im Drawer, an Verkaufsregel und Kinder-Einzelzeile; Wochentag-Chips; Expertenansicht. */
.esatz{min-width:0;font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text);cursor:pointer;padding:0}
.esatz-t{font-weight:600;margin-right:var(--s-1)}
.esatz-x{color:var(--text-muted)}
.esatz.satz-offen .esatz-x,.satz.satz-offen{color:var(--warn);font-style:italic}
/* Klartext-Satz: eingelassene Flaeche mit Statuskante links 3 (Vertrag 6), 13/20 */
.satz{margin:0 0 var(--s-3);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text);background:var(--surface-2);border-left:3px solid var(--accent);padding:var(--s-2) var(--s-3);border-radius:var(--radius)}
.satz-regel{margin:0 0 var(--s-1);flex:1 1 100%}
.rrule{flex-wrap:wrap}
.crow .satz-kind{grid-column:1/-1;margin:0 0 var(--s-1);padding:var(--s-1) var(--s-2);font-size:var(--fs-s);line-height:var(--lh-s)}
/* Zaehlweise des Zimmers (Begriffe der Saetze) unter den Belegungen. */
.satz-zaehlweise{margin:var(--s-2) 0 0;font-size:var(--fs-s);line-height:var(--lh-s);border-left-color:var(--border-strong);color:var(--text-muted)}
/* Wochentag-Chips = bedienbare Chips (Vertrag 7.7): sichtbar 24 hoch, mindestens 32 breit, Ecke 5,
12/16 500; Klickflaeche 32 per ::before; gewaehlt --accent-soft / Rahmen --accent / Schrift
--accent-2. Chips-Reihe Abstand 8. Das Maskenfeld (Formularfeld) nur in der Expertenansicht. */
.wd-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.wd-chip{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.wd-chip input{position:absolute;opacity:0;width:1px;height:1px}
.wd-chip span{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:var(--ctl-s);padding:0 var(--s-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--text-muted);background:var(--surface)}
.wd-chip span::before{content:"";position:absolute;inset:-5px -1px}
.wd-chip input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.wd-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.wd-f .wd-mask{display:none;margin-top:var(--s-1)}
.experte .wd-f .wd-mask{display:block}
/* EDF-Begriffe nur in der Expertenansicht (E7): Kennung als kleiner Chip (Mono 11/16, Ecke 5). */
.edf-k{display:none;font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 var(--s-1);margin-left:var(--s-1);text-transform:none;letter-spacing:0}
.experte .edf-k{display:inline-block}
.expert-toggle{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:auto;font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--text-muted);cursor:pointer}
/* Hotel-Liste: Angebote in Worten. EINE Zeile fester Hoehe (Tabellenzelle 13/20) fuer Platzhalter
und geladene Zelle — Nachladen verschiebt keine Zeile (Zurueck landet an derselben Stelle), die
Spalte macht die Zeilen nicht hoeher; alle Saetze stehen im title. */
.hl-zelle{height:var(--lh-m);overflow:hidden;font-size:var(--fs-m);line-height:var(--lh-m);white-space:nowrap}
/* Die Spalte nimmt nur die Restbreite der Tabelle (Zeilen wie ohne sie); die uebrigen Zellen
brechen nicht um, zu breit scrollt die Tabelle waagerecht (.table-scroll). */
[data-coltable=hotels] th,[data-coltable=hotels] td:not([data-col=angebote]){white-space:nowrap}
[data-coltable=hotels] th[data-col=angebote],[data-coltable=hotels] td[data-col=angebote]{width:100%;max-width:0;min-width:180px}
.hl-angebote{display:flex;gap:var(--s-2);min-width:0}
.hl-angebot{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hl-mehr{flex:none}
.hl-neu{padding:0 var(--s-1);font-size:var(--fs-xs);line-height:var(--lh-xs);min-height:0}
.hl-angebot b{font-weight:600}
.hl-angebot .hl-zi{color:var(--text-muted)}
/* Publizier-Vorschau: Aenderungen in Worten (eingelassene Karte, Radius 8, 13/20). */
.kt-diff{display:flex;flex-direction:column;gap:var(--s-2)}
.kt-row{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-2) var(--s-3);background:var(--surface)}
.kt-kopf{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:baseline;font-size:var(--fs-m);line-height:var(--lh-m)}
.kt-kopf .kt-zi{color:var(--text-muted)}
.kt-satz{margin:var(--s-1) 0 0;font-size:var(--fs-m);line-height:var(--lh-m)}
.kt-satz .kt-lbl{font-weight:600;color:var(--text-muted);margin-right:var(--s-1)}
.kt-alt{text-decoration:line-through;text-decoration-color:var(--bad);color:var(--text-muted)}
/* Seite "Aenderungen" (ta-at8j.12). Jede Zelle hoechstens zwei Zeilen (Vertrag 7.5, LAY-5), die
Liste passt bei 1440 in ihre Karte: Umfang und Saetze sind Fliesstext (.fliesstext, voller
Wortlaut im title und in der Vorschau hinter der Zeile), Name/Code und Wer untereinander. */
.aend-table td{vertical-align:top}
.aend-satz b{font-weight:600}
.aend-obj .mono{white-space:nowrap}
.aend-pruef-zelle a{display:inline-block;margin-top:var(--s-1)}
/* Detailzeile (ta-uk0c.21): unter jeder Zeile eine eigene Zeile ueber die volle Breite mit allen
Saetzen und dem vollen Umfang; der Detailpfeil (Zeilenknopf M) neben "Vorschau" klappt sie auf
(?auf=, wie der Audit-Trail). Er steht in der Pruef-Zelle statt in einer eigenen Spalte: die
Liste passt so auch auf Tuerkisch bei 1440 in die Karte; die negativen Randabstaende halten die
Textzeile 20 hoch (Zeilenhoehe unveraendert). Zebra zaehlt nur die Entwurfszeilen (jede zweite
Zeile ist ihre Detailzeile). */
.aend-pruef-zelle .rowchev{display:inline-flex;vertical-align:middle;margin:calc((var(--lh-m) - var(--ctl-m)) / 2) 0 calc((var(--lh-m) - var(--ctl-m)) / 2) var(--s-2)}
.aend-table tbody tr:nth-child(even){background:transparent}
.aend-table tbody tr:nth-child(4n+3){background:var(--zebra)}
.aend-table tr.exp{background:var(--accent-soft)}
.aend-table tr.aend-det>td{background:var(--surface-2);white-space:normal}
/* width:0 + min-width: die Detailzeile traegt nichts zur Tabellenbreite bei (die Liste passt auch
aufgeklappt bei 1440 in ihre Karte). Sie ist hoechstens so breit wie der sichtbare Teil der
Huelle (100cqi abzueglich Zellen-Innenabstand) und klebt links (sticky): scrollt die Tabelle
schmal (390) quer, bleiben die Saetze ganz im Bild. */
.table-scroll:has(>.aend-table){container-type:inline-size}
.aend-det-in{position:sticky;left:var(--s-3);display:grid;grid-template-columns:minmax(0,80ch) minmax(0,40ch);justify-content:start;gap:var(--s-4);width:0;min-width:min(100%,calc(100cqi - 2 * var(--s-3)));box-sizing:border-box;padding:var(--s-2) 0}
.aend-det-kopf{margin:0 0 var(--s-1);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:600;color:var(--text-muted)}
.aend-det-teil p{margin:0}
.aend-det-saetze{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-1)}
@media (max-width:760px){.aend-det-in{grid-template-columns:minmax(0,1fr)}}
/* Hotel-Liste: Spalte "Entwurf" (wer, seit wann) in der festen Zeilenhoehe der Angebote-Zelle,
schmal: der volle Wortlaut steht im title. */
.hl-entwurf{display:flex;gap:var(--s-2);align-items:center;min-width:0;max-width:22ch}
.hl-entwurf a{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Saetze, die der Server nicht neu berechnen konnte (ta-nw7n): sichtbar nicht aktuell. */
.satz-veraltet{opacity:.55;text-decoration:line-through dotted}
/* Reiter "Uebersicht" im Hotel-Editor (ta-at8j.13): Statusleiste, Vertragsband (SVG mit
Prozent-Koordinaten, keine style-Attribute), Preis-Matrix, Hinweise, Angebote. Nur Rollen
aus tokens.css. */
.vu{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.vu>*{min-width:0}
.vu .ed-sect{margin:0;min-width:0}
/* Scroll-Huellen positioniert: sonst entkommen die absolut gesetzten sr-only-Texte der Tabellen
dem Abschneiden und verbreitern die Seite (390 px). */
.vu .table-scroll{position:relative}
.vu-status{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.vu-chip{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px var(--s-2);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text);text-decoration:none}
.vu-chip-stand{font-weight:600}
.vu-chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.vu-chip.info{background:var(--accent-soft);border-color:transparent;color:var(--accent-2)}
.vu-chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.vu-chip.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.vu-chip a{color:inherit}
.vu-sprung{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-2)}
.vu-sprung-l{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted)}
.vu-sprung a.vu-chip{color:var(--accent-2);font-weight:600}
.vu-sprung a.vu-chip:hover{border-color:var(--accent-2)}
.vu-note{margin:var(--s-1) 0 0;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted)}
/* Vertragsband */
.vb{display:flex;flex-direction:column;gap:var(--s-1)}
.vb-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:var(--s-3);align-items:start}
@media (max-width:600px){.vb-row{grid-template-columns:minmax(0,1fr);gap:0}.vb-achse .vb-l{display:none}}
.vb-l{font-size:var(--fs-s);line-height:var(--lh-s);font-weight:600;color:var(--text);padding-top:var(--s-1);overflow-wrap:anywhere}
.vb-spuren{min-width:0;overflow:hidden}
.vb-svg{display:block;width:100%;height:22px;overflow:hidden}
.vb-achse-svg{height:18px}
.vb-leer{display:block;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);padding-top:var(--s-1)}
.vb-tick{stroke:var(--border)}
.vb-mon{fill:var(--text-muted);font-size:var(--fs-xs)}
.vb-heute{stroke:var(--bad);stroke-width:2}
.vb-bar rect{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1}
.vb-bar text{fill:var(--text);font-size:var(--fs-xs)}
.vb-bar.vb-saison rect{fill:var(--accent-soft);stroke:var(--accent-soft)}
.vb-bar.vb-angebot rect,.vb-bar.vb-freinacht rect{fill:var(--ok-soft);stroke:var(--ok)}
.vb-bar.vb-zuschlag rect,.vb-bar.vb-leistung rect{fill:var(--warn-soft);stroke:var(--warn-edge)}
.vb-bar.vb-entwurf rect{stroke-dasharray:4 3;stroke:var(--accent)}
.vb-bar.vb-regel rect{fill:var(--info-soft);stroke:var(--info)}
.vb-bar.vb-stopsale rect{fill:var(--bad-soft);stroke:var(--bad)}
.vb-bar.vb-request rect{fill:var(--warn-soft);stroke:var(--warn-edge)}
.vb-bar.vb-freesale rect{fill:var(--ok-soft);stroke:var(--ok)}
.vb-bar.vb-kapazitaet rect{fill:var(--surface);stroke:var(--border-strong);stroke-dasharray:3 2}
/* Preis-Matrix und Angebote sind Tabellen (Vertrag 7.5, base.css): Kopf, Zeilenhoehe, 13/20, innen 12.
Mehrzeilige Zellen (Saetze, Varianten) bekommen senkrecht innen 8, damit der Text die Trenner nicht
beruehrt; die Zeilenhoehe bleibt --row-h. */
.vu-mx th,.vu-mx td,.vu-ang th,.vu-ang td{padding:var(--s-2) var(--s-3)}
.vu-mx tbody th,.vu-ang tbody th,.vu-ne tbody th{font-weight:500;color:var(--text);min-width:180px;text-transform:none;letter-spacing:0;font-size:var(--fs-m);line-height:var(--lh-m);background:none}
.vu-mx td.num,.vu-mx th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.vu-mx-blk th{background:var(--surface-2);font-weight:600}
/* Erste Spalte (Posten, Block-Kopf mit Zimmer-Link) klebt links in der Scroll-Huelle: bei 390 px
scrollen die Saisons unter ihr durch, Zeilenname und Zimmer-Link bleiben sichtbar (ta-2ut5).
Deckende Flaeche wie td.row-actions; der Rest des Block-Kopfs ist eine leere Zelle. */
.vu-mx tr>:first-child{position:sticky;left:0;z-index:1}
.vu-mx tbody tr>th:first-child{background:var(--surface)}
.vu-mx tbody tr:not(.vu-mx-blk):hover>th:first-child{background:var(--surface-hover)}
.vu-mx thead th:first-child,.vu-mx tbody tr.vu-mx-blk>:is(th,td){background:var(--surface-2)}
.vu-mx td.vu-leer{color:var(--text-muted)}
.vu-mx td.vu-sonder{color:var(--warn);font-family:var(--font-ui)}
.vu-mx td.vu-aufv{color:var(--text-muted)}
.vu-mx td.vu-geaendert{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.vu-geaendert-muster{display:inline-block;width:12px;height:12px;vertical-align:-2px;background:var(--accent-soft);border:1px solid var(--accent)}
.vu-mx-saetze p,.vu-satz p{margin:0 0 var(--s-1)}
/* Hinweise */
.vu-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
/* Hinweis = Meldung (Vertrag 7.14): innen 12/16, 13/20, Statuskante links 3, Radius 8 */
.vu-h{padding:var(--s-3) var(--s-4);border-left:3px solid var(--border-strong);background:var(--surface-2);border-radius:var(--radius);font-size:var(--fs-m);line-height:var(--lh-m)}
.vu-h-warn{border-left-color:var(--warn-edge);background:var(--warn-soft)}
.vu-h-info{border-left-color:var(--accent);background:var(--accent-soft)}
.vu-h-ok{border-left-color:var(--ok);background:var(--ok-soft)}
/* Aktionszeile eines Hinweises (Kombi-Quittung ta-at8j.25): Knopf + Rechner-Link unter dem Text,
Knoepfe in Steuerhoehe M wie in Sektionskoepfen */
.vu-h-akt{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-2)}
/* Angebote */
.vu-ang th[scope=row]{min-width:150px;font-weight:600}
.vu-ang-t{display:block}
.vu-var{display:block;font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--warn)}
.vu-ang td.vu-zi,.vu-ang th.vu-zi{text-align:center;white-space:nowrap}
.vu-ang td.vu-ja{color:var(--ok);font-weight:600}
.vu-ang td.vu-nein{color:var(--text-muted)}
.vu-ang tr.vu-variante th[scope=row]{padding-left:var(--s-5)}
.vu-satz{min-width:280px}
/* Satz (Vertrag 7.5, LAY-5, ta-owyv): in der Zelle hoechstens 2 Zeilen (auch ueber mehrere
Zimmer-Formen hinweg), daneben der Detailpfeil (Zeilenknopf M); die negativen Randabstaende
halten ihn in der Textzeile (Zeilenhoehe unveraendert). Den ganzen Satz zeigt die Detailzeile
darunter (Muster Aenderungen, ta-uk0c.21): eine Zelle ueber alle Spalten, traegt nichts zur
Tabellenbreite bei (width:0 + min-width in der Huellenbreite) und bleibt im sichtbaren Teil der
Huelle (sticky). Die offene Zeile markiert der gedrehte Pfeil (keine Zeilenflaeche: die
Haekchen in --ok stehen sonst unter AA, COL-1). */
.vu-satz-z{display:flex;align-items:flex-start;gap:var(--s-2)}
.vu-satz-t{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.vu-satz-z .rowchev{flex:none;margin:calc((var(--lh-m) - var(--ctl-m)) / 2) 0}
.vu-ang tr.vu-ang-det>td{background:var(--surface-2);white-space:normal}
.table-scroll:has(>.vu-ang){container-type:inline-size}
.vu-det-in{position:sticky;left:var(--s-3);width:0;min-width:min(100%,calc(100cqi - 2 * var(--s-3)));box-sizing:border-box}
.vu-det-in p{margin:0 0 var(--s-1);max-width:80ch}
.vu-det-in p:last-child{margin-bottom:0}
/* Stammdaten: Zimmerkategorie-Schema, Verpflegungs-/Altersstufen-/Kapazitaets-Zeilen, Vorlagen. */
/* ---- Zimmerkategorie-Schema-Editor (Stammdaten) ---- */
.scheme-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-4);align-items:start}
.scheme-side{position:sticky;top:78px;display:flex;flex-direction:column;gap:var(--s-4)}
.preview-card h2{margin-bottom:var(--s-1)}
.scheme-preview{margin-top:var(--s-3);min-height:44px;display:flex;align-items:center}
.pp-build{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
/* Positionen als Chip (Vertrag 7.7): Hoehe 24, innen 8, Radius 5, Code Mono */
.pp-chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:var(--ctl-s);padding:0 var(--s-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--mono);font-weight:600;font-size:var(--fs-m);line-height:var(--lh-m)}
.pp-eq{color:var(--text-muted);font-weight:600}
.pp-result{font-size:var(--fs-l);line-height:var(--lh-l);font-weight:600;color:var(--accent)}
.prev-note{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);margin-top:var(--s-3)}
.danger-form{margin:0}
button.ghost.danger{background:var(--surface);color:var(--bad);border-color:var(--border-strong)}
button.ghost.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
/* Positions-Werte: kompaktes 3-Spalten-Raster (Kuerzel/Bezeichnung/loeschen) */
.pos-vals-h,.pos-val{grid-template-columns:120px minmax(0,1fr) var(--ctl-m)}
.board-row{grid-template-columns:120px minmax(0,1fr) 190px var(--ctl-m)}
.cap-row{grid-template-columns:minmax(120px,1.4fr) 160px 160px 120px var(--ctl-m)}
/* Kapazitaet je Zimmerkategorie aufklappbar (B16): Kopf = Code + Anzahl Zeitraeume */
.cap-grp{border-bottom:1px solid var(--border)}
.cap-grp>.cap-grp-s{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-1);cursor:pointer;list-style:none}
.cap-grp>.cap-grp-s::-webkit-details-marker{display:none}
.cap-grp>.cap-grp-s::before{content:"";width:6px;height:6px;border:solid var(--text-muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .12s ease;flex:none;margin:0 var(--s-1)}
.cap-grp[open]>.cap-grp-s::before{transform:rotate(45deg)}
.cap-grp>.cap-grp-s:hover{background:var(--surface-2)}
.cap-grp-room{font-weight:600;min-width:0;overflow-wrap:anywhere}
.cap-grp-n{color:var(--text-muted);font-size:var(--fs-s);line-height:var(--lh-s);white-space:nowrap;margin-left:auto}
.cap-grp>.arow.cap-row:last-child{border-bottom:none}
.age-row{grid-template-columns:minmax(120px,1.4fr) 120px 120px var(--ctl-m)}
.ed-sect-note{margin-left:auto;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);font-weight:500}
.cal-scroll{overflow-x:auto;margin-top:var(--s-1)}
/* Zimmer-Code als Positions-Dropdowns (Zimmerkategorie-Schema): Selects nebeneinander */
/* Positions-Auswahl mindestens so breit wie ihr Inhalt (Vertrag 7.3, TXT-5); mehrere
Positionen teilen sich die Zeile und brechen um, statt einander zu stauchen. */
.rc-cell{display:flex;gap:var(--s-1);flex-wrap:wrap;align-items:center}
.rrow-sum .rc-cell .rc-pos{width:auto;flex:1 1 auto;min-width:0;max-width:100%}
.rrow-sum .rc-cell .rc-pos.rc-missing{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.act-hint.bad{color:var(--bad)}
.pos-meta{display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap;margin-left:var(--s-2)}
.pos-meta label{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--text-muted)}
.pos-len{width:74px}
/* "Aus Bestand erzeugen"-Karte (empfohlener Einstieg, dezent hervorgehoben) */
.derive-card{margin-bottom:var(--s-4);border-color:var(--accent)}
.derive-card h3{font-size:var(--fs-base);line-height:var(--lh-base);margin:0 0 var(--s-1)}
.derive-card form{margin:var(--s-2) 0 0}
/* Template-Galerie (Einstieg ohne Doku) */
.intro-card h2{margin-bottom:var(--s-1)}
.tpl-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4);margin:var(--s-4) 0 var(--s-1)}
.tpl-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);text-align:left;transition:border-color .12s ease}
.tpl-card:hover{border-color:var(--accent)}
.tpl-card h3{font-size:var(--fs-base);line-height:var(--lh-base);margin:0}
.tpl-card p{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text-muted);margin:0;flex:1}
.tpl-preview{display:flex;gap:var(--s-1);flex-wrap:wrap;margin:0}
.tpl-pos{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:var(--ctl-s);padding:0 var(--s-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--mono);font-weight:600;font-size:var(--fs-s);line-height:var(--lh-s)}
.tpl-card button{margin-top:auto}
/* ---- Responsive (Schema-Editor) ---- */
@media(max-width:900px){
.scheme-layout{grid-template-columns:1fr} .scheme-side{position:static}
}
/* Kapazitaet auf Telefonbreite (ta-jjvg): die fuenf Spalten passen nicht in 390 px. Die
Zeile bricht in zwei Zeilen um (Zimmerkategorie/x; Von/Bis/Anzahl, ta-uk0c.16: drei
Zeilen sprengten die Hoehengrenze aufgeklappter Listen; Anzahl schmal = s-7 + Luecke + ctl-m = 88 px; Spaltenname daher kurz, DE "Anzahl", EN "Rooms"), der Kopf entfaellt, jede Zelle
traegt ihren Spaltennamen (data-col) selbst - wie die Aktionsregel (ta-9jph). Die
Zimmer-Auswahl bekommt die ganze Zeilenbreite: die Picker-Box (Lupe, Pfeil) braucht
rund 64 px Rahmen, in einer halben Spalte blieb fuer den Wert zu wenig (TXT-4, ta-uk0c.15). */
@media(max-width:600px){
.cap-h{display:none}
.arow.cap-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--s-7) var(--ctl-m);grid-template-areas:"room room room x" "from to count count";gap:var(--s-2);align-items:end;padding:var(--s-2) 0}
.cap-row>[data-cc=room]{grid-area:room} .cap-row>[data-cc=from]{grid-area:from}
.cap-row>[data-cc=to]{grid-area:to} .cap-row>[data-cc=count]{grid-area:count}
.cap-row>.xrow{grid-area:x;align-self:end}
/* Datum ganz lesbar in ~95 px: Kalender-Symbol entfaellt, Antippen oeffnet den Auswahldialog */
.cap-row input[type=date]::-webkit-calendar-picker-indicator{display:none}
/* Innenabstand s-1 statt s-2 (.cell input): '10/29/2026' braucht ~81 px, bei s-2 blieben 75 (TXT-4, ta-tm8z) */
.cap-row input[type=date]{padding:0 var(--s-1)}
.cap-row>[data-col]::before{content:attr(data-col);display:block;font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--s-1)}
/* In einer Gruppe tragen nur die erste Zeile die Spaltennamen (die Felder haben aria-label) */
.cap-grp>.cap-row~.cap-row>[data-col]::before{display:none}
}
/* Hotelstamm Ausstattung (H4 ta-at8j.23.5, Vertrag 7.5 Editier-Raster): je Gruppe eine Tabelle
Merkmal | Vorhanden | Wert | Flughafen | Kosten mit Editier-Zellen (32). Die Merkmal-Spalte
nimmt den Rest, die Feldspalten sind so breit wie ihr Inhalt (Auswahl = laengster Eintrag,
7.3); Wert rechtsbuendig mit Einheit dahinter (feste Spur, die Zahlen fluchten); der Befundtext
bricht in seiner Zelle um. Die Huelle bleibt in der Sektion (Sektion innen 16 links/rechts). */
.ed-sect>.table-scroll:has(>.aus-tab){width:auto}
.aus-tab td.aus-name{width:100%}
.aus-tab td:not(.aus-name){width:1%}
.aus-tab .cell select{width:auto}
.aus-wert{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-1)}
.aus-wert>input{width:7rem}
.aus-einheit{width:var(--s-5);color:var(--text-muted);text-align:left}
.aus-tab input[data-testid$=".bezug"]{width:5rem}
.aus-tab .ferr{white-space:normal;min-width:12rem;max-width:16rem;text-align:left}
/* Bis 600 px zweizeilig (Merkmal oben, Felder darunter): Kopf entfaellt, Vorhanden in voller
Breite, Wert/Flughafen/Kosten paarweise; leere Zellen entfallen. Flughafen und Kosten tragen
ihren Spaltennamen (data-col), Vorhanden und Wert sprechen fuer sich (Auswahl, Einheit). */
@media(max-width:600px){
.aus-tab,.aus-tab tbody{display:block}
.aus-tab thead{display:none}
.aus-tab tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-1) var(--s-2);padding:var(--s-2) 0;border-bottom:1px solid var(--border)}
.aus-tab td,.aus-tab td:not(.aus-name){height:auto;width:auto;padding:0;border:0;min-width:0}
.aus-tab td:empty{display:none}
.aus-tab td.aus-name,.aus-tab td.aus-name+td{grid-column:1/-1;white-space:normal}
.aus-tab .cell select{width:100%}
.aus-wert{justify-content:flex-start}
.aus-wert>input{flex:1;width:auto;min-width:0}
.aus-tab input[data-testid$=".bezug"]{width:100%}
.aus-tab .ferr{min-width:0;max-width:none}
.aus-tab td[data-col]::before{content:attr(data-col);display:block;font-family:var(--font-head);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--s-1)}
}
/* Hotelstamm Bilder (H5b ta-at8j.23.7): je Bild eine Sektion (7.8) in einer geordneten Liste.
Kopf: Griff zum Ziehen, "Bild n", Hauptbild/Zustand, Herkunft, Pfeil-Knoepfe rechts; bricht
auf Telefonbreite um statt zu ragen (LAY-11). Vorschau 4:3 in der Feldspalte (hoechstens
20rem), das Bild darin ganz sichtbar (contain), die Fokusmarke liegt in Prozent darauf. */
.card.bilder-upload{margin-bottom:var(--s-4)} /* Karte zu Karte 16 (Vertrag 7.8) */
.bild-liste{list-style:none;margin:0;padding:0}
.bild-kopf{flex-wrap:wrap;row-gap:var(--s-1);padding-top:var(--s-1);padding-bottom:var(--s-1)}
.bild-griff{display:inline-flex;align-items:center;cursor:grab;color:var(--text-muted)}
.bild-griff svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}
.bild-knoepfe{display:inline-flex;gap:var(--s-2);margin-left:auto}
.bild.zieht{opacity:.5}
.bild-pv{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.bild-vorschau{position:relative;width:100%;max-width:20rem;aspect-ratio:4/3;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bild-vorschau>img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:crosshair}
.bild-platz svg{width:48px;height:48px;stroke:var(--text-muted);fill:none;stroke-width:1.5}
.bild-fokus{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border:2px solid var(--accent-fg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent);pointer-events:none}
.bild-grund{max-width:20rem;color:var(--bad);font-size:var(--fs-s);line-height:var(--lh-s)}
.bild-pv>.hint{font-variant-numeric:tabular-nums}
/* Upload: Fortschrittsbalken und Ergebnis je Datei unter den Feldern, buendig mit der Feldspalte */
.upl-status{margin:var(--s-3) 0 0 calc(12rem + var(--s-4));max-width:40rem}
.upl-balken{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.upl-fuell{height:100%;width:0;background:var(--accent)}
.upl-liste{margin:var(--s-1) 0 0;padding-left:var(--s-4)}
.upl-bad{color:var(--bad)}
@media(max-width:600px){
.upl-status{margin-left:0}
.bild-vorschau{max-width:none}
}
/* Datei-Auswahl (H5b): Knopf (ghost, Vertrag 7.4) mit Zusammenfassung daneben, darunter die
gewaehlten Dateien mit Groesse (Zahlen rechtsbuendig in fester Spur). */
.upl-waehlen{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.upl-gewaehlt{color:var(--text-muted);font-size:var(--fs-m);line-height:var(--lh-m)}
.upl-auswahl{list-style:none;margin:var(--s-2) 0 0;padding:0;max-width:40rem}
.upl-auswahl>li{display:flex;gap:var(--s-3);justify-content:space-between;padding:var(--s-1) 0;border-bottom:1px solid var(--border);font-size:var(--fs-m);line-height:var(--lh-m)}
.upl-name{min-width:0;overflow-wrap:anywhere}
.upl-groesse{flex:none;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Unterreiter Quellen (H7 ta-at8j.23.9): unter jedem Vorschlag die Detailzeile (Muster
tr.aend-det, Vertrag 7.5) mit aktuellem Wert und Vorschlag nebeneinander. Wie die Detailzeile
der Aenderungen traegt sie nichts zur Tabellenbreite bei (width:0 + min-width, sichtbarer Teil
der Huelle) - lange Texte brechen um, die Liste passt in ihre Karte. Texte im Wortlaut mit
ihren Zeilenumbruechen (pre-wrap), nie als HTML gerendert. */
.table-scroll:has(>.quell-tab){container-type:inline-size}
.quell-tab tr.quell-det>td{background:var(--surface-2);white-space:normal}
.quell-vgl{position:sticky;left:var(--s-3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);width:0;min-width:min(100%,calc(100cqi - 2 * var(--s-3)));box-sizing:border-box;padding:var(--s-2) 0}
.quell-wert{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
@media (max-width:760px){.quell-vgl{grid-template-columns:minmax(0,1fr)}}
/* Bild-Vorschlag (H7c-5 ta-at8j.23.23): Vorschau | Aktuell | Vorschlag in einer Zeile, Felder
als rec-kv mit Beschriftung in eigener Breite; schmal untereinander. Herkunft-Karte: kleines
Vorschaubild (32 x 24, passt in die Zeile 40) vor dem Namen einer Bild-Gruppe. */
.quell-vgl.quell-bild{grid-template-columns:minmax(0,12rem) repeat(2,minmax(0,1fr))}
.quell-bild .bild-vorschau{max-width:12rem}
.quell-bild section{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
dl.rec-kv.quell-kv{grid-template-columns:auto minmax(0,1fr)}
dl.rec-kv.quell-kv dd{overflow-wrap:anywhere;white-space:pre-wrap}
.quell-teil-bild{display:inline-flex;align-items:center;gap:var(--s-2)}
.quell-thumb{width:var(--ctl-m);height:var(--ctl-s);object-fit:cover;border:1px solid var(--border);border-radius:var(--radius-sm);flex:none}
@media (max-width:760px){.quell-vgl.quell-bild{grid-template-columns:minmax(0,1fr)}}
/* Hinweis auf offene Vorschlaege am Feld/Bild (ta-at8j.23.25), Ziel in Quellen hervorgehoben */
.vorschlag-hinweis{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--fs-s);line-height:var(--lh-s)}
.quell-tab tr:target>td{background:var(--accent-soft)}
/* Ueberlagerungen und Auswahl: Bestaetigungs-Dialog, Seitenpanel/Drawer (EIN Baustein fuer
"Neu"-Panel und Editor-Detail), Entitaets- und Hotel-Auswahl, Zimmer-Ziel-Chips,
"Erweitert (spaeter)"-Slot, Stepper. Masse nach dem Oberflaechen-Vertrag
(webadmin/DESIGN-SYSTEM.md 7.4, 7.9, 7.14), nur Tokens. */
/* ---- Bestaetigungs-Dialog (ersetzt native confirm), Vertrag 7.14: Breite 440, Radius 12,
innen 24, Symbolflaeche 40, Titel 16/24, Text 14/20, Fuss Knoepfe L rechts ---- */
.cdlg-backdrop{position:fixed;inset:0;background:var(--backdrop-dialog);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--s-4)}
.cdlg-backdrop[hidden]{display:none}
/* schwebt: fest in der Bildmitte (translate getrennt von transform, die Einblendung animiert transform) */
.cdlg{position:fixed;left:50%;top:50%;translate:-50% -50%;width:440px;max-width:calc(100vw - var(--s-6));max-height:calc(100vh - var(--s-6));padding:var(--s-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);overflow:auto;animation:cdlgin .18s ease}
@keyframes cdlgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cdlg-b{display:flex;gap:var(--s-4)}
.cdlg-ic{width:40px;height:40px;border-radius:var(--radius);flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.cdlg-ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2}
.cdlg.danger .cdlg-ic{background:var(--bad-soft)}
.cdlg.danger .cdlg-ic svg{stroke:var(--bad)}
.cdlg h3{margin:0 0 var(--s-1);font-family:var(--font-ui);font-size:var(--fs-l);line-height:var(--lh-l);font-weight:600;color:var(--text)}
.cdlg p{margin:0;color:var(--text-muted);font-size:var(--fs-base);line-height:var(--lh-base)}
.cdlg-f{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5)}
.cdlg-f button{min-width:96px}
/* ---- Seitenpanel und Drawer (Vertrag 7.9): EIN Baustein fuer das "Neu"-Panel und das
Editor-Detail. Rechter Rand, volle Hoehe, schmal 420 / breit 640, Kopf 64 mit Titel 16/24
und Schliessen (Knopf M), Rumpf innen 24 (bis 600 px 16), Fuss mit Knoepfen L. Die Felder
im Panel (Breiten, Paare, Anordnung) regelt der Formular-Baustein (V1.2), hier nur die Huelle.
"Neu"-Panel: