/* variables.css */
/* ============================================================
   FIELDTAKT - CSS VARIABLES v4.0 (K2, tenant v1.21.0)
   ============================================================
   
   Alle Design-Tokens an EINER Stelle - und in EINEM :root-Block (K2: der S6-Block am Ende ist eingearbeitet,
   das alte Blau ist weg). Marke: Field Navy #12314D, Takt Gelb #F2A900, Off-White #F5F6F4, Ink #17212B, Plan Grau #E8EDF1,
   Schrift Inter. --ft-* sind die Markennamen wie in admin.css; --brand-* bleiben als Umbieger fuer die Altregeln.
   Steuerhoehen --ctl-h/-sm/-xs gelten fuer Knopf UND Feld (so fluchten sie), Fokus immer gelb (--focus-ring).
   Farbe aendern? Hier aendern, fertig.
   
   Datei: /assets/css/variables.css
   ============================================================ */

/* tenant v1.467.0 (Ralf 15.10.2026 "jetzt bitte nachziehen"): Markenschrift Inter selbst gehostet (variabel 100-900, SIL OFL, assets/fonts/) -
   vorher nur in --font-family genannt, auf Rechnern ohne Inter erschien Segoe UI. Kein Nachladen bei Google (DSGVO). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }


:root {
    /* === BRAND === */
    /* Marke (S6, seit K2 hier statt in einem zweiten Block) */
    --ft-navy: #12314D;
    --ft-navy-hover: #245C8F;
    --ft-navy-dark: #0F2A44;
    --ft-yellow: #F2A900;
    --ft-off: #F5F6F4;
    --ft-ink: #17212B;
    --ft-grey: #E8EDF1;
    --brand-primary: var(--ft-navy);
    --brand-primary-hover: var(--ft-navy-hover);
    --brand-primary-light: var(--ft-grey);
    --brand-primary-text: var(--ft-navy);   /* Textfarbe der Marke: hell Navy, dunkel Gelb - fuer color:, nie --brand-primary (das ist auf dunklem Grund unsichtbar) */
    --brand-primary-rgb: 18, 49, 77;
    /* Kachel-Icon im Markenton (v1.43.0, .stat-icon.blue): eigenes Paar, weil --brand-primary-light/-text im dunklen Modus
       Gelb werden - dann war die Navy-Kachel von der orangen nicht zu unterscheiden */
    --tile-navy-bg: var(--ft-grey);
    --tile-navy-fg: var(--ft-navy);
    --brand-accent: var(--ft-yellow);
    --brand-accent-rgb: 242, 169, 0;
    /* Bedienelemente: eine Hoehe je Groesse fuer Knopf und Feld, Rand, Rundung, gelber Fokus */
    /* v1.462.0 (Ralf 14.10.2026: "bei 100 % ist alles unuebersichtlich - die bisherigen 90 % sollen das neue 100 % werden"):
       Grundfaktor der Anzeigegroesse. html-zoom = Grundfaktor x persoenliche Anzeigegroesse (Mein Konto, --ui-scale, 1 = 100 %) */
    --ui-scale-base: 0.9;
    --ctl-h: 38px;
    --tab-row-h: 46px;   /* v1.347.0: Hoehe einer Reiter-Reihe (render_tabs) - die Knoepfe rechts fluchten mit der ersten Reihe */
    --ctl-h-sm: 32px;
    --ctl-h-xs: 28px;
    --ctl-border: #C9D3DC;
    --ctl-radius: 8px;
    --focus-ring: 0 0 0 3px rgba(242, 169, 0, 0.4);

    /* === SEMANTIC COLORS === */
    /* Jeweils: Basis (kraeftig) / -light (Hintergrund) / -border / -text (Text auf -light) */
    --success: #16a34a;
    --success-light: #dcfce7;
    --success-border: #bbf7d0;
    --success-text: #166534;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-border: #fde68a;
    --warning-text: #92400e;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --danger-border: #fecaca;
    --danger-text: #991b1b;
    --info: #0891b2;
    --info-light: #e0f2fe;
    --info-border: #bae6fd;
    --info-text: #075985;
    --accent-light: #ede9fe;
    --accent-text: #5b21b6;

    /* === SPACING SCALE === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* === TYPOGRAPHY === */
    --font-family: Inter, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    /* v1.67.0 (Ralf: "alles sehr klein, zu mikromaessig"): Stufen je +1 bis +2 px - Grundschrift 16 px (Web-Standard fuer Arbeitsprogramme, Material Design) */
    --font-xs: 13px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-md: 18px;
    --font-lg: 22px;
    --font-xl: 26px;
    --font-2xl: 32px;
    --line-height: 1.55;

    /* === BORDERS & RADIUS === */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.12);

    /* === LAYOUT === */
    --sidebar-width: 260px;
    --sidebar-collapsed: 68px;
    --nav-top-h: 56px;        /* v1.465.0 Menue oben: Hoehe der Menuezeile (Mein Konto -> Darstellung -> Menue oben) */
    --nav-top-dd-w: 240px;    /* v1.465.0 Menue oben: Mindestbreite eines Aufklappers */
    --nav-top-logo: 26px;     /* v1.465.0 Menue oben: Logo (wie in der Seitenleiste) */
    --nav-top-brand-w: 220px; /* v1.465.0 Menue oben: Firmenname hoechstens so breit, dann ... */
    --nav-top-line: 3px;      /* v1.465.0 Menue oben: gelbe Linie unter der aktiven Gruppe */
    --sidebar-text-strong: #FFFFFF;   /* v1.465.0: Schrift auf der Menue-Flaeche bei Ueberfahren/Name (hell und dunkel gleich) */
    --header-height: 60px;
    --record-col-width: 260px;      /* v1.370.0: Mindestbreite einer Spalte im Kenndaten-Block der gestapelten Akte (14-karte, .ft-record.is-stacked) */
    --ws-insp-width: 320px;         /* v1.373.0: Breite der Eigenschaften-Leiste der Werkstatt (50-bereich-werkstatt, .ws-insp) */
    --side-panel-width: 440px;      /* v1.442.0: Breite des Seitenfensters (17-popup, .ft-modal-side - Suche in fieldtakt) */
    --lb-mark: rgba(242, 169, 0, .38);          /* v1.445.0 PDF-Betrachter (10-symbol): gelb markierte Fundstelle (ft-yellow) */
    --lb-mark-active: rgba(242, 169, 0, .62);
    --lb-pv-bar-height: 48px;
    --lb-pv-side-width: 136px;                  /* v1.447.0 PDF-Betrachter 2: Seitenleiste mit Miniaturen (Bild 96 px + Rand) */
    --lb-pv-menu-width: 240px;                  /* v1.447.0 PDF-Betrachter 2: Menue Drucken / Herunterladen */
    --lb-pv-thumb-sm: 64px;                     /* v1.447.0 PDF-Betrachter 2: Miniatur auf dem Handy */
    --lb-pv-find-min: 120px;                    /* v1.447.0 PDF-Betrachter 2: Suchfeld schrumpft hoechstens bis hier */
    --lb-pv-line: 1px;                          /* v1.447.0 PDF-Betrachter 2: Trennstrich in der Leiste */
    --pdf-paper: #fff;                          /* Papier bleibt auch im Dunkelmodus weiss (PDF wie gedruckt) */
    --pdf-ink: #111;                            /* Schrift auf dem Papier (nur Mustertafel - echte Seiten zeichnet pdf.js) */
    --head-tile-pad: 10px 12px;     /* v1.374.0 (R7): Innenabstand einer Kachel im Aktenkopf - wie die Summe (14-karte, .ft-htile) */

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}


/* ============================================================
   LIGHT THEME (Standard)
   ============================================================ */
[data-theme="light"],
:root {
    --bg: var(--ft-off);
    --bg-subtle: var(--ft-grey);
    --card-bg: #ffffff;
    --text: var(--ft-ink);
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border: #D9E0E7;
    --border-light: var(--ft-grey);
    --hover-bg: var(--ft-grey);

    /* Sidebar */
    --sidebar-bg: var(--ft-navy);
    --sidebar-text: #B7C3CF;
    --sidebar-hover: rgba(255,255,255,0.07);
    --sidebar-active-bg: rgba(242,169,0,0.14);
    --sidebar-active-text: var(--ft-yellow);
    --sidebar-border: rgba(255,255,255,0.06);
    --sidebar-category-text: #8A9AAB;

    /* Overlay */
    --overlay: rgba(18,49,77,0.5);
}


/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
    --bg: #0f172a;
    --bg-subtle: #1e293b;
    --card-bg: #1e293b;
    --text: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border: #334155;
    --border-light: #1e293b;
    --hover-bg: #334155;

    /* Sidebar */
    --sidebar-bg: var(--ft-navy-dark);
    --sidebar-text: #8A9AAB;
    --sidebar-hover: rgba(255,255,255,0.04);
    --sidebar-active-bg: rgba(242,169,0,0.16);
    --sidebar-active-text: var(--ft-yellow);
    --sidebar-border: rgba(255,255,255,0.04);
    --sidebar-category-text: #475569;

    /* Overlay */
    --overlay: rgba(0,0,0,0.6);

    /* Shadows staerker im Dark Mode */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);

    /* === SEMANTIC COLORS (Dark) === */
    /* -light = getönter dunkler Hintergrund, -text = heller Text, -border = dezent */
    --success-light: rgba(34,197,94,0.15);
    --success-border: rgba(34,197,94,0.30);
    --success-text: #4ade80;
    --warning-light: rgba(245,158,11,0.15);
    --warning-border: rgba(245,158,11,0.30);
    --warning-text: #fbbf24;
    --danger-light: rgba(239,68,68,0.15);
    --danger-border: rgba(239,68,68,0.30);
    --danger-text: #f87171;
    --info-light: rgba(14,165,233,0.15);
    --info-border: rgba(14,165,233,0.30);
    --info-text: #38bdf8;
    --accent-light: rgba(139,92,246,0.18);
    --accent-text: #c4b5fd;

    /* Brand-Tint fuer aktive Eintraege (Listen-Nav etc.) */
    --brand-primary-light: rgba(242,169,0,0.18);
    --brand-primary-text: var(--ft-yellow);

    /* Kachel-Icon im Markenton (v1.43.0): helles Blau statt Gelb, sonst gleicht es der orangen Kachel */
    --tile-navy-bg: rgba(36,92,143,0.30);
    --tile-navy-fg: #9CC3E6;
}

/* styles.css */
/* ==========================================================================================================
   styles.css - ERZEUGT aus assets/css/src/*.css durch tools/css_build.php - NICHT VON HAND BEARBEITEN.
   Aendern: den passenden Block in assets/css/src/ bewusst oeffnen (docs/Bausteinkatalog.md), dann php tools/css_build.php
   ========================================================================================================== */

/* ==========================================================================================================
   00-grundlage.css - GRUNDLAGE: Grundlage
   Zweck:   Grundelemente (html, body, Ueberschriften, Links), Hilfsklassen (mt-, mb-, text-, row-, is-), Animationen
   Praefixe: app, color, content, empty, gap, header, is, lang, list, main, mb, mt, row, text, toolbar, ui
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 00-grundlage --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   fieldtakt - Stylesheet der Kunden-App
   ============================================================
   
   Alle Komponenten-Styles. Nutzt variables.css.
   
   Datei: /assets/css/styles.css
   
   INHALT:
   1. Reset & Base
   2. Layout (Sidebar + Main)
   3. Navigation
   4. Content Header & Body
   5. Stat Cards
   6. Cards
   7. Tables
   8. Badges
   9. Buttons
   10. Icons
   11. Forms
   12. Toasts
   13. Modals
   14. Activity List
   15. Empty State
   16. Helpers & Utilities
   17. Responsive
   ============================================================ */
/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: var(--line-height);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection {
    background: var(--brand-primary);
    color: #fff;
}
/* ============================================================
   2. LAYOUT
   ============================================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
}
/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 4px;
}
.lang-switcher a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-md);
    opacity: 0.5;
    transition: all var(--transition-fast);
    background: rgba(255,255,255,0.05);
}
.lang-switcher a:hover {
    opacity: 0.8;
    background: rgba(255,255,255,0.1);
}
.lang-switcher a.active {
    opacity: 1;
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 0 2px var(--brand-primary);
}
/* ============================================================
   4. CONTENT HEADER & BODY
   ============================================================ */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-height);
}
.content-header h1 {
    font-size: var(--font-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    letter-spacing: -0.3px;
}
.content-header h1 .icon { color: var(--brand-primary-text); }
/* v1.116.0 (Ralf): Titel "Nummer / Vorgangsnummer - Betreff" - die Nummer bleibt ganz, der Betreff wird je nach Platz mit ... gekuerzt */
.content-header h1 { min-width: 0; flex: 1 1 auto; }
.content-header.has-attn { flex-wrap: wrap; row-gap: var(--space-sm); }   /* v1.367.0 Achtung-Leiste (19-hinweis .ft-attn) als eigene Reihe im Kopf */
.content-header h1 .ft-title-main { flex: 0 0 auto; white-space: nowrap; }
/* v1.118.0: Status-Pillen im Seitenkopf - 2x2-Feld vor der Belegnummer, nur was zutrifft; Farbe = Dringlichkeit */
.content-header h1 .ft-head-pills { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px 6px; flex: 0 0 auto; }
.content-header h1 .ft-title-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-secondary); }
.header-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.content-body {
    padding: var(--space-lg) var(--space-xl) var(--space-2xl);
    flex: 1;
}
/* v1.43.0: der zweite Behaelter .stat-cards ist entfallen - alle Kacheln kommen aus render_stat_cards()
   (includes/render-stats.php) und stehen in .stat-grid; Icon-Feld, Zahl und Beschriftung siehe .stat-icon weiter unten */
/* === LISTEN-TOOLBAR (Suche + Filter) === */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}
/* K2 (v1.21.0): JEDES Feld im Inhaltsbereich - auch ausserhalb von .form-group (Filterleisten, Tabellen). :where() haelt die
   Spezifitaet bei 0, gezielte Regeln gewinnen weiter (CSS-Muster Abschnitt 6). */
:where(.main-content, .login-card) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) {
    height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm);
}
:where(.main-content, .login-card) :where(textarea) { border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm); padding: 9px 12px; }
:where(.main-content, .login-card) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--ft-yellow); box-shadow: var(--focus-ring); }
@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    to { transform: translateX(110%); opacity: 0; }
}
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}
.empty-state .icon { color: var(--text-muted); margin: 0 auto var(--space-md); }
.empty-state h3 { margin-bottom: var(--space-sm); font-weight: 650; }
.empty-state p { color: var(--text-muted); margin-bottom: var(--space-lg); max-width: 400px; margin-inline: auto; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger); font-weight: 600; }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
.text-sm      { font-size: var(--font-sm); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.text-link {
    color: var(--brand-primary-text);
    text-decoration: none;
    font-size: var(--font-sm);
}
.text-link:hover { text-decoration: underline; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
   COLOR PICKER
   ============================================================ */
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.color-option { cursor: pointer; }
.color-option input { display: none; }
.color-swatch-pick {
    display: block;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all var(--transition-fast);
}
.color-option input:checked + .color-swatch-pick {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px currentColor;
    transform: scale(1.15);
}
/* ============================================================
   TOOLBAR & FILTER
   ============================================================ */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    flex: 1;
}
.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
@media (max-width: 768px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-direction: column; }
  .toolbar-right { justify-content: flex-end; }
  .main-content { margin-left: 0 !important; }
  .content-header { padding: var(--space-md); }
  .content-body { padding: var(--space-md); }
}
.row-highlight td { background: var(--warning-light); }
#ft-modal-frame { flex: 1; border: 0; background: var(--bg); }
form.is-locked input:disabled, form.is-locked select:disabled, form.is-locked textarea:disabled { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }
.row-gap > label.check { margin-right: 14px; }
/* v1.36.1: Helfer .row-gap / .row-between fehlten in der Kunden-App (nur in der Schaltzentrale) - deshalb klebten Knoepfe und
   Haekchen aneinander. Akkordeon-Leiste rechts, Knoepfe .btn-sm wie bei den Berechtigungen. */
.row-gap { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
/* ---- Anlegen-Knopf links an der Ueberschrift (Seitenkopf $createAction, Kartenkopf div.ft-create) - seit v1.45.2 ----
   Ralf 28.09.2026: "Neu anlegen immer links an die Ueberschrift - uebersichtlicher, passt zum Reiter". Die Gruppe steht
   direkt hinter h1/h2; margin-right:auto schiebt alle uebrigen Knoepfe (Zurueck, Zur Planung, Speichern ...) nach rechts. */
.content-header > .ft-create, .card-header > .ft-create { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-left: var(--space-md); margin-right: auto; }
/* ---- Globaler Zurueck-Knopf (app_header.php + includes/Trail.php) - seit v1.52.0: rechts im Seitenkopf, letzter Knopf ---- */
.header-actions .ft-back { white-space: nowrap; }
[data-sortable].is-sorting, [data-sortable].is-sorting * { cursor: grabbing; user-select: none; }
[data-sort-item].is-dragging { border-style: dashed; border-color: var(--tile-navy-fg); opacity: .85; }
/* Hauptbereich darf schmaler werden als sein Inhalt (Flex-Standard min-width:auto gab die volle Breite der Reiter nach oben weiter -
   die Seite wurde breiter als das Fenster); so scrollt die Reiterleiste in sich */
.app-layout > .main-content, .main-content > .content-body { min-width: 0; }
/* ---- Persoenliche Anzeigegroesse (v1.67.0, Mein Konto -> Darstellung, wie im Altsystem): skaliert Schrift, Symbole und Abstaende gleich-
   maessig wie der Browser-Zoom; Wert je Benutzer in user_settings (ui_size 90/100/110/125/140), vom Seitenkopf als --ui-scale gesetzt.
   v1.462.0 (Ralf 14.10.2026): Grundfaktor --ui-scale-base (variables.css, 0.9) - das neue 100 % ist das bisherige 90 % ---- */
html { zoom: calc(var(--ui-scale-base, 1) * var(--ui-scale, 1)); }
.ui-scale-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-scale-pick button { min-width: 64px; }
.ui-scale-pick button.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.ui-scale-pick button[data-scale="90"] { font-size: 13px; }
.ui-scale-pick button[data-scale="110"] { font-size: 16px; }
.ui-scale-pick button[data-scale="125"] { font-size: 18px; }
.ui-scale-pick button[data-scale="140"] { font-size: 20px; }
/* neue Akte: noch nichts zu zeigen */
.content-header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ft-busy-grow { 0% { width: 0; } 100% { width: 92%; } }
@keyframes ft-busy-spin { to { transform: rotate(360deg); } }
.row-custom { background: rgba(255, 193, 7, .04); }
.list-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: .875rem;
    transition: background .15s;
    border-bottom: 1px solid var(--border-light);
}
.list-nav-item:hover  { background: var(--hover-bg); }
.list-nav-item.active { background: var(--brand-primary-light); color: var(--brand-primary-text); font-weight: 600; }
.row-inactive { opacity: .5; }
/* MFR-Import: Drehsymbol waehrend des Laufs */
@keyframes mfrspin { to { transform: rotate(360deg); } }
.text-secondary { color: var(--text-secondary); }
#ft-ws-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--bg-elevated, var(--bg)); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(18,49,77,.10); }
#ft-ws-bar select { max-width: 260px; }
/* v1.278.0 (Ralf: "die Iconauswahl groesser - ist schon sehr klein"): breites Blatt, 26-px-Symbole mit Namen, bis 60 % der Fensterhoehe */
#ft-ws-iconpick { position: fixed; z-index: 60; width: min(620px, calc(100vw - 16px)); background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-md); }
#ft-ws-names { position: fixed; z-index: 60; width: 300px; background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(18,49,77,.18); padding: 12px; }
/* VA3 (v1.269.0): Artikelliste - Varianten eingeklappt unter dem Basisartikel */
[data-expand-caret] { display: inline-flex; vertical-align: middle; margin-right: 4px; color: var(--text-muted); }
[data-expand-caret] svg { transition: transform 0.15s; }
[data-expand-caret].is-open svg { transform: rotate(90deg); }
/* Werkstatt F1 (v1.270.0): Kontextmenue je Block und je Feld (assets/js/layout-edit.js) - Chips je Gruppe, Hell und Dunkel ueber Tokens */
#ft-ws-menu { position: fixed; z-index: 61; width: 340px; max-width: calc(100vw - 16px); background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-sm) var(--space-md) var(--space-md); }
/* v1.465.0 Menue oben (Mein Konto -> Darstellung, includes/render-topnav.php): Seitenrahmen ohne Seitenleiste - Menuezeile oben, Inhalt volle Breite,
   klebende Leisten unterhalb der Menuezeile (--nav-top-h) */
.app-nav-top { flex-direction: column; }
.app-nav-top > .main-content { margin-left: 0; }
.app-nav-top .content-header { top: var(--nav-top-h); }
.app-nav-top .ft-preview-bar, .app-nav-top .ft-record.is-editing .ft-record-head, .app-nav-top .perm-roles-bar { top: var(--nav-top-h); }
.app-nav-top .ft-record-side { top: calc(var(--nav-top-h) + var(--header-height) + var(--space-md)); max-height: calc(100vh - var(--nav-top-h) - var(--header-height) - 2 * var(--space-md)); }

/* ==========================================================================================================
   01-seitenrahmen.css - GRUNDLAGE: Seitenrahmen
   Zweck:   Seitenleiste, Navigation, Seitenkopf, Listenleiste (Suche, Filter, Blaettern oben)
   Praefixe: filter, ft-page, nav, search, sidebar
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 01-seitenrahmen --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    transition: width var(--transition-normal);
    border-right: 1px solid var(--sidebar-border);
}
/* Sidebar Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--sidebar-border);
    min-height: var(--header-height);
}
.sidebar-brand-icon {
    width: 34px; height: 34px;
    background: var(--brand-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-brand-icon .icon svg { stroke: #fff; }
.sidebar-brand-text strong {
    color: #f1f5f9;
    font-size: var(--font-base);
    font-weight: 700;
    display: block;
    letter-spacing: -0.2px;
}
.sidebar-brand-text small {
    color: var(--sidebar-text);
    font-size: var(--font-xs);
    font-weight: 400;
}
.sidebar-brand-text { min-width: 0; }
/* v1.120.1: Leitspruch in eigener Zeile ueber die volle Breite - einzeilig und ganz lesbar */
.sidebar-brand { flex-wrap: wrap; row-gap: 2px; }
.sidebar-brand-tag { flex: 1 0 100%; text-align: center; color: var(--sidebar-text); font-size: 11px; font-weight: 400; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sidebar-brand-tag { display: none; }
.sidebar.collapsed .admin-account { display: none; }
/* Sidebar Toggle */
.sidebar-toggle {
    position: absolute;
    right: -13px;
    top: 22px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    color: var(--text-muted);
}
.sidebar-toggle:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
/* Sidebar Footer */
.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--sidebar-border);
}
.sidebar-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 8px 14px;
}
.sidebar-footer .nav-item.logout:hover {
    background: rgba(220,38,38,0.12);
    color: #f87171;
}
/* ============================================================
   3. NAVIGATION
   ============================================================ */
.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }
/* Nav Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-weight: 450;
    transition: all var(--transition-fast);
    cursor: pointer;
    margin-bottom: 1px;
    white-space: nowrap;
}
.nav-item:hover {
    background: var(--sidebar-hover);
    color: #e2e8f0;
}
.nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}
.nav-item .icon { flex-shrink: 0; }
/* Nav Categories */
.nav-category { margin-bottom: 2px; }
.nav-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--sidebar-category-text);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}
.nav-category-header:hover {
    color: var(--sidebar-text);
    background: var(--sidebar-hover);
}
.nav-category-header .icon { flex-shrink: 0; opacity: 0.6; }
.nav-category-header .chevron-icon {
    margin-left: auto;
    transition: transform var(--transition-fast);
    opacity: 0.4;
}
.nav-category:not(.expanded) .chevron-icon {
    transform: rotate(180deg);
}
.nav-category-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}
/* Waehrend des initialen Ladens keine Animation (verhindert Aufblitzen) */
.sidebar.nav-preload .nav-category-items {
    transition: none;
}
.nav-category.expanded .nav-category-items {
    max-height: 500px;
}
.nav-subitem {
    padding-left: 42px;
    font-size: var(--font-sm);
}
/* Such-Box mit Icon */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    min-width: 220px;
}
.search-box .icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
}
.search-box input {
    width: 100%;
    padding: 9px 12px 9px 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text);
    transition: all var(--transition-fast);
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box input:focus {
    outline: none;
    border-color: var(--ft-yellow);      /* K2 (v1.21.0): Fokus gelb, wie in der Schaltzentrale */
    box-shadow: var(--focus-ring);
}
/* Filter-Tabs (Alle / Kunde / Lieferant / ...) */
.filter-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--card-bg);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.filter-tab:hover {
    background: var(--hover-bg);
    color: var(--text);
}
.filter-tab.active {
    background: var(--brand-primary-light);
    border-color: transparent;
    color: var(--brand-primary-text);
    font-weight: 600;
}
.filter-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
    background: var(--border);
    color: var(--text-secondary);
}
.filter-tab.active .tab-count {
    background: var(--brand-primary);
    color: #fff;
}
/* ============================================================
   SIDEBAR COLLAPSED STATE
   ============================================================ */
.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}
/* v1.124.0 (Bedien-Muster 66): eingeklappt + Maus drueber -> klappt UEBER den Inhalt auf; der Inhalt bleibt, wo er ist */
.sidebar.peek { width: var(--sidebar-width); z-index: 1100; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25); }
.sidebar.peek ~ .main-content { margin-left: var(--sidebar-collapsed); }
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-category-header .chevron-icon,
.sidebar.collapsed .admin-info-text,
.sidebar.collapsed .lang-switcher {
    display: none;
}
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; }
.sidebar.collapsed .sidebar-nav { padding: 12px 6px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-subitem { padding-left: 10px; }
.sidebar.collapsed .nav-category-header { justify-content: center; padding: 9px 10px; }
.sidebar.collapsed .sidebar-footer { padding: 12px 6px; }
.sidebar.collapsed .admin-info { justify-content: center; padding: 10px; }
.sidebar.collapsed .sidebar-toggle { right: -13px; }
.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed);
}
/* Tooltip bei collapsed Sidebar */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sidebar-bg);
    color: #f1f5f9;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    white-space: nowrap;
    z-index: 300;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}
/* Search inline */
.search-inline { display: flex; }
/* Filter Pills */
.filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
}
/* S6 (v1.5.0): Marke fieldtakt - Schrift und Farben seit K2 (v1.21.0) in variables.css */
.sidebar-brand-logo img { width: 26px; height: 26px; display: block; }
.nav-item.active { border-left: 3px solid var(--brand-accent); }
.nav-item.active .icon svg { stroke: var(--brand-accent); }
.nav-pill { margin-left: auto; background: var(--brand-accent); color: var(--brand-primary); font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.sidebar.collapsed .nav-pill { position: absolute; right: 6px; top: 6px; margin: 0; }
/* v1.41.0: Filterpille "nicht verortet" (nur wenn > 0) */
.filter-tab.filter-tab-warn { border-color: var(--danger); color: var(--danger); }
.filter-tab.filter-tab-warn.active { background: var(--danger); color: #fff; }
.sidebar-brand-icon .icon, .login-logo .icon { color: #fff; }
.nav-item.active .icon { color: var(--brand-accent); }
.search-box.is-busy { position: relative; }
.search-box.is-busy::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--brand-accent); border-right-color: transparent; border-radius: 50%; animation: ft-busy-spin .7s linear infinite; }
/* ============================================================
   v1.151.0 SEITENAUFBAU (Ralf 01.10.2026, Bedien-Muster 80) - global fuer jede Seite der Kunden-App:
   Kopf (Titel + Hell/Dunkel/Rechte/Vorschau) -> Kacheln (Filter) -> EINE Leiste: Zurueck, Bearbeiten-Knoepfe, Suchfeld (30 %) -> Inhalt.
   ============================================================ */
.ft-page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.ft-page-bar-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.ft-page-bar > .ft-page-search { flex: 0 1 30%; min-width: 240px; }
@media (max-width: 760px) {
  .ft-page-bar > .ft-page-search { flex: 1 1 100%; }
}
.ft-page-bar-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft-page-bar-right .ft-head-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* v1.173.0 (Bedien-Muster 80): Auswahl-Filter in der Seitenleiste vor der Suche (z. B. Hersteller in der Artikelliste) */
.ft-page-filter { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.ft-page-filter select { min-width: 200px; max-width: 280px; }
.ft-page-filter.is-active select, .ft-page-filter.is-active .ft-combo-input { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
.ft-page-filter.is-active { color: var(--brand-primary); }
.nav-item.logout .nav-version { margin-left: auto; font-size: 11px; opacity: .55; }
/* v1.285.0 (Ralf: Hersteller-Filter "Lupe und aussagekraeftigen Text wie bei der anderen Suche, gleiche Groesse"): Auswahl-Filter im Kleid
   des Suchfelds (.search-box.ft-page-search) - die Such-Auswahl (core.js ft-combo) fuellt das Feld, die Lupe liegt darueber */
.ft-page-filter-search .ft-combo { flex: 1 1 auto; width: 100%; min-width: 0; }
.ft-page-filter-search > .icon { z-index: 1; }
.ft-page-bar:has(> .ft-page-filter-search) > .ft-page-search { flex: 1 1 240px; max-width: 440px; }

/* ============================================================
   v1.465.0 MENUE OBEN (Ralf 14.10.2026: "aufgrund der Anzahl von Menuepunkten ... umstellen koennen auf Menue oben"; Vorschau "passt so")
   Baustein includes/render-topnav.php (ft_topnav), Verhalten core.js FtTopNav. Je Benutzer waehlbar (Mein Konto -> Darstellung).
   Farben wie die Seitenleiste (--sidebar-*), aktive Gruppe gelb unterstrichen, Aufklapper als Karte; Seitenrahmen in 00-grundlage (.app-nav-top).
   ============================================================ */
.nav-top { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: var(--space-xs); height: var(--nav-top-h); padding: 0 var(--space-md);
    background: var(--sidebar-bg); color: var(--sidebar-text); border-bottom: 1px solid var(--sidebar-border); }
.nav-top-brand { display: flex; align-items: center; gap: var(--space-sm); margin-right: var(--space-sm); color: var(--sidebar-text-strong); font-weight: 700; white-space: nowrap; text-decoration: none; min-width: 0; }
.nav-top-brand img { width: var(--nav-top-logo); height: var(--nav-top-logo); display: block; flex-shrink: 0; }
.nav-top-brand-name { max-width: var(--nav-top-brand-w); overflow: hidden; text-overflow: ellipsis; }
.nav-top-items { display: flex; align-items: center; gap: calc(var(--space-xs) / 2); flex: 1; min-width: 0; }
.nav-top-it { position: relative; flex-shrink: 0; }
.nav-top-it[hidden], .nav-top-it.is-over { display: none; }
.nav-top-btn { display: flex; align-items: center; gap: var(--space-sm); height: var(--ctl-h); padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-md); background: none;
    color: var(--sidebar-text); font: inherit; font-size: var(--font-base); font-weight: 450; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
.nav-top-btn:hover, .nav-top-it.open > .nav-top-btn { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-top-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-top-it.active > .nav-top-btn { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; box-shadow: inset 0 calc(-1 * var(--nav-top-line)) 0 var(--brand-accent); }
.nav-top-it.active > .nav-top-btn .icon { color: var(--brand-accent); }
.nav-top-chev { display: inline-flex; opacity: .7; transition: transform var(--transition-fast); }
.nav-top-it.open .nav-top-chev { transform: rotate(180deg); }
.nav-top-btn .nav-pill { margin-left: 0; }
.nav-top-dd { display: none; position: absolute; top: calc(100% + var(--space-xs)); left: 0; min-width: var(--nav-top-dd-w); max-height: calc(100vh - var(--nav-top-h) - var(--space-md)); overflow-y: auto;
    padding: var(--space-xs); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 210; }
.nav-top-it.open > .nav-top-dd { display: block; }
.nav-top-dd-h { display: none; padding: var(--space-sm) var(--space-sm) var(--space-xs); color: var(--text-muted); font-size: var(--font-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nav-top-more .nav-top-dd-h { display: block; }
.nav-top-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-md); color: var(--text); white-space: nowrap; text-decoration: none; }
.nav-top-link .icon { color: var(--text-secondary); flex-shrink: 0; }
.nav-top-link:hover { background: var(--bg-subtle); }
.nav-top-link.active { background: var(--tile-navy-bg); color: var(--brand-primary-text); font-weight: 600; }
.nav-top-link.active .icon { color: var(--brand-primary-text); }
.nav-top-right { display: flex; align-items: center; gap: var(--space-xs); margin-left: var(--space-sm); flex-shrink: 0; }
.nav-top-right .nav-top-dd { left: auto; right: 0; }
.nav-top-icon { position: relative; }
.nav-top-icon .nav-pill { position: absolute; top: calc(var(--space-xs) / 2); right: 0; }
.nav-top-user > .nav-top-btn { padding-left: var(--space-xs); border-radius: var(--radius-full); }
.nav-top-avatar { display: flex; align-items: center; justify-content: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: var(--radius-full);
    background: var(--brand-accent); color: var(--ft-navy); font-size: var(--font-xs); font-weight: 800; flex-shrink: 0; }
.nav-top-who { display: flex; flex-direction: column; line-height: 1.15; text-align: left; color: var(--sidebar-text-strong); font-size: var(--font-sm); }
.nav-top-who small { color: var(--brand-accent); font-size: var(--font-xs); font-weight: 700; letter-spacing: .02em; }
.nav-top-version { margin-left: auto; padding-left: var(--space-md); color: var(--text-muted); font-size: var(--font-xs); }
.nav-top-logout:hover { color: var(--danger); }
@media (max-width: 1100px) {
  .nav-top-brand-name, .nav-top-who { display: none; }
}

/* ==========================================================================================================
   10-symbol.css - BAUSTEIN: Symbol
   Zweck:   Symbole in allen Groessen, Symbol + Abstand + Text (.ft-il), Bilder/Piktogramme klein, Grossansicht, Symbol-Auswahl
   Praefixe: ft-hp, ft-iconfield, ft-iconpick, ft-il, ft-lb, ft-pic, ft-thumb, ft-zoom, icon, icv, sym
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 10-symbol --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

.ft-hp { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 999px; font-size: var(--font-xs); font-weight: 600; line-height: 1.6; letter-spacing: 0; white-space: nowrap; border: 1px solid transparent; }
.ft-hp-neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.ft-hp-info { background: var(--info-light); color: var(--info-text); border-color: var(--info-border); }
.ft-hp-warn { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.ft-hp-danger { background: var(--danger-light); color: var(--danger-text); border-color: var(--danger-border); }
.ft-hp-ok { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); }
/* ============================================================
   10. ICON SYSTEM
   ============================================================ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon svg {
    width: 24px; height: 24px;   /* v1.67.0: Material-Symbole wirken im selben Kasten kleiner - je Stufe +2 px */
    stroke-width: 2;
}
.icon-xs svg { width: 18px; height: 18px; }
/* v1.67.0: xs hatte keine Regel (offener Punkt BED-1) */
.icon-sm svg { width: 20px; height: 20px; }
.icon-lg svg { width: 28px; height: 28px; }
.icon-xl svg { width: 40px; height: 40px; }
/* GLOBALE REGEL "Symbol + Abstand + Text" (v1.302.0, Ralf 05.10.2026: "Icon, Abstand, Text - als feste CSS-Regel global").
   JEDES Symbol vor einem Text nutzt .ft-il (PHP: ft_il(), CatalogImages::label) - keine eigenen Abstaende/margins mehr.
   Eine Zeile, vertikal mittig, Abstand --space-sm, Symbol schrumpft nie, langer Text darf umbrechen ohne unter das Symbol zu laufen.
   .ft-il-ic = fester Kasten 22 px fuer Bilder/Piktogramme (Stil + hell/dunkel wie ueberall); .ft-il-txt = der Text. */
.ft-il { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; max-width: 100%; vertical-align: middle; }
.ft-il > .icon, .ft-il > .ft-il-ic { flex: none; }
.ft-il-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.ft-il-ic img { width: 100%; height: 100%; object-fit: contain; }
.ft-il-ic .icon { color: var(--text-muted); }
.ft-il-txt { min-width: 0; overflow-wrap: break-word; }
/* Icon Picker (Rolle erstellen) */
.icon-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.icon-option { cursor: pointer; }
.icon-option input { display: none; }
.icon-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.icon-option input:checked + .icon-pick {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light);
    color: var(--brand-primary-text);
}
/* ---- Symbol-Wahl (includes/icon-field.php + ftIconPick in core.js) - seit v1.45.0 ----
   Feld: Knopf mit dem aktuellen Symbol. Ebene: ueber dem Popup (Modal 9000), unter der Rueckfrage (#ft-ask 9500). */
.ft-iconfield-btn { gap: var(--space-sm); padding-left: 4px; }
.ft-iconfield-btn .ft-iconfield-ico { width: 28px; height: 28px; }
.ft-iconpick { position: fixed; inset: 0; background: var(--overlay); z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ft-iconpick-box { width: min(620px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--card-bg); color: var(--text); border-radius: var(--radius-lg); padding: 22px 24px 18px; box-shadow: var(--shadow-xl); }
.ft-iconpick-title { margin: 0 0 var(--space-md); font-weight: 700; font-size: var(--font-base); }
.ft-iconpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--space-sm); overflow-y: auto; padding: 2px; }
.ft-iconpick-opt { display: flex; align-items: center; justify-content: center; height: 48px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.ft-iconpick-opt:hover { border-color: var(--tile-navy-fg); color: var(--tile-navy-fg); }
.ft-iconpick-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ft-iconpick-opt.active { border-color: var(--tile-navy-fg); background: var(--tile-navy-bg); color: var(--tile-navy-fg); }
.ft-iconpick-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-md); }
/* v1.395.0 Reiter "Warengruppen-Piktogramme | Symbole" (Baustein filter-tabs) und Piktogramme als Bild in der Kachel */
.ft-iconpick-tabs { margin-bottom: var(--space-sm); }
.ft-iconpick-grid[hidden] { display: none; }
.ft-iconpick-pics .ft-iconpick-opt img { width: 34px; height: 34px; object-fit: contain; }
/* v1.89.0: Suche, Hinweis ohne Treffer, Name des gewaehlten Symbols (Gruppen: includes/icon-groups.php) */
.ft-iconpick-search { height: var(--ctl-h); width: 100%; margin: 0 0 var(--space-md); padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm); }
.ft-iconpick-search:focus-visible { outline: none; border-color: var(--ft-yellow); box-shadow: var(--focus-ring); }
.ft-iconpick-opt[hidden] { display: none; }
.ft-iconpick-none { margin: var(--space-sm) 0 0; color: var(--text-muted); font-size: var(--font-sm); }
.ft-iconpick-sel { flex: 1; min-width: 0; align-self: center; color: var(--text-secondary); font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Symbolsatz nach Bereichen (symbole.php) - seit v1.89.0 ---- */
.sym-search { max-width: 420px; margin-top: var(--space-sm); }
.sym-none { margin-top: var(--space-sm); }
.sym-group[hidden], .sym-tile[hidden] { display: none; }
/* v1.132.0 */
.ft-iconfield-more { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--font-xs); }
.sym-group > .form-section-title .badge { margin-left: 6px; }
.sym-group > .form-section-title .sym-count { font-weight: 400; font-size: var(--font-xs); margin-left: 4px; }
/* v1.130.0: Akkordeon */
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.sym-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); text-align: center; min-width: 0; }
.sym-tile .icon { color: var(--text); }
.sym-label { font-size: var(--font-sm); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.sym-name { font-size: var(--font-xs); color: var(--text-muted); background: none; padding: 0; overflow-wrap: anywhere; }
.ft-thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; overflow: hidden;
    border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--card-bg); vertical-align: middle; }
.ft-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ft-thumb.is-empty { color: var(--text-muted); background: var(--bg-subtle); }
.ft-zoom { position: fixed; z-index: 10001; pointer-events: none; padding: 6px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .08s; }
.ft-zoom.is-on { opacity: 1; }
.ft-zoom img { display: block; max-width: 320px; max-height: 320px; width: auto; height: auto; }
/* ---- Symbole: Material Symbols Outlined (v1.66.0, includes/icons.php, CSS-Muster) - Flaeche statt Strich; Farbe ueber color.
   Die drei alten Strich-Regeln (Seitenleisten-Logo, aktiver Menuepunkt, Login-Logo) bekommen ihre Farbe hier als color. ---- */
.icon svg.mi { fill: currentColor; stroke: none; stroke-width: 0; }
.icv-table td { vertical-align: middle; }
.icv-table .icv-old, .icv-table .icv-new { width: 70px; }
.icv-table .icv-sizes .icon { margin-right: 10px; }
/* Grossansicht (core.js, a[data-lightbox]) */
.ft-lb { position: fixed; inset: 0; z-index: 10050; background: rgba(15, 23, 42, .86); display: flex; align-items: center; justify-content: center; padding: 56px 72px; }
.ft-lb[hidden] { display: none; }
.ft-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.ft-lb-img { max-width: calc(100vw - 144px); max-height: calc(100vh - 150px); object-fit: contain; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.ft-lb-cap { color: #e2e8f0; font-size: var(--font-sm); text-align: center; }
.ft-lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.ft-lb-btn:hover, .ft-lb-btn:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.ft-lb-close { top: var(--space-md); right: var(--space-md); }
/* v1.436.3 (Ralf 13.10.2026): PDF in der Grossansicht (Rahmen statt Bild) und Knopf Herunterladen neben Schliessen */
.ft-lb-dl { top: var(--space-md); right: calc(var(--space-md) * 4); text-decoration: none; }
.ft-lb-dl[hidden], .ft-lb-img[hidden], .ft-lb-pdf[hidden] { display: none; }
.ft-lb-pdf { width: 86vw; height: 84vh; border: 0; border-radius: var(--radius-sm); background: var(--ft-off); box-shadow: var(--shadow-lg); }
.ft-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.ft-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.ft-lb.is-single .ft-lb-prev, .ft-lb.is-single .ft-lb-next { display: none; }
body.ft-lb-open { overflow: hidden; }
/* v1.445.0 PDF-Betrachter in der Grossansicht (pdf.js, core.js ftPdfView): Leiste (Seite, Suchfeld, Treffer, Zoom) + Seiten untereinander,
   Fundstellen gelb markiert (.ft-lb-pv-mark, aktive .is-active). Ralf 13.10.2026: "gefundene Seite 7 ... auf der Seite oeffnen und Stelle markieren" */
.ft-lb-pv { display: flex; flex-direction: column; width: 86vw; height: 84vh; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg); }
.ft-lb-pv[hidden] { display: none; }
.ft-lb-pv-bar { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--lb-pv-bar-height); padding: var(--space-xs) var(--space-md); background: var(--card-bg); color: var(--text); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ft-lb-pv-pg { font-size: var(--font-sm); white-space: nowrap; min-width: 92px; }
.ft-lb-pv-find { display: inline-flex; align-items: center; gap: var(--space-xs); flex: 1 1 160px; min-width: var(--lb-pv-find-min); max-width: 360px; margin-left: auto; color: var(--text-secondary); }   /* v1.447.0: schmaler, damit die Leiste einzeilig bleibt */
.ft-lb-pv-find input { flex: 1; min-width: 0; }
.ft-lb-pv-cnt { font-size: var(--font-sm); color: var(--text-secondary); white-space: nowrap; min-width: 96px; }
.ft-lb-pv-cnt.is-none { color: var(--warning-text); }
.ft-lb-pv-cnt:empty { min-width: 0; }   /* v1.447.0: ohne Suchwort kein Platz fuer die Trefferzahl */
.ft-lb-pv-tools { display: inline-flex; align-items: center; gap: 2px; }
.ft-lb-pv-pages { position: relative; flex: 1; overflow: auto; padding: var(--space-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }   /* v1.447.0: relative - Seitenlage (offsetTop) zaehlt ab hier */
.ft-lb-pv-page { position: relative; flex-shrink: 0; background: var(--pdf-paper); box-shadow: var(--shadow-md); }
.ft-lb-pv-page canvas { display: block; width: 100%; height: 100%; }
.ft-lb-pv-mark { position: absolute; background: var(--lb-mark); border-radius: 2px; pointer-events: none; mix-blend-mode: multiply; }
.ft-lb-pv-mark.is-active { background: var(--lb-mark-active); outline: 2px solid var(--ft-yellow); outline-offset: 1px; }
.ft-lb-pv-msg { padding: var(--space-lg); color: var(--text-secondary); text-align: center; }
@media (max-width: 768px) { .ft-lb { padding: 56px 8px 8px; } .ft-lb-pv { width: 100%; height: 100%; } .ft-lb-pv-find { max-width: none; margin-left: 0; } .ft-lb-pv-side { width: auto; } .ft-lb-pv-th canvas { max-width: var(--lb-pv-thumb-sm); height: auto !important; } }
/* v1.447.0 PDF-Betrachter 2 (Ralf 13.10.2026: "keine Moeglichkeit, die Seite zu drehen ... und keine Druckmoeglichkeit"): Leiste in Gruppen mit
   Trennstrich, Schalter (Seitenleiste, Seitenbreite, Ganze Seite, Alle Seiten) mit .is-on, Hinweisleiste unter der Leiste, Seitenleiste mit
   Miniaturen (aktuelle Seite gelb), Menue fuer Drucken/Herunterladen, Vollbild, unsichtbarer Druckrahmen. Download der Grossansicht liegt bei
   PDF in der Leiste (.ft-lb.is-pv). */
.ft-lb-pv [hidden] { display: none !important; }
.ft-lb.is-pv .ft-lb-dl { display: none; }
.ft-lb-pv-sep { width: var(--lb-pv-line); align-self: stretch; margin: var(--space-xs); background: var(--border); }
.ft-lb-pv-rot, .ft-lb-pv-outs { display: inline-flex; align-items: center; gap: calc(var(--lb-pv-line) * 2); }
.ft-lb-pv-rot .btn:not(.btn-icon) { margin-left: var(--space-xs); }
.ft-lb-pv-tg.is-on { background: var(--hover-bg); color: var(--brand-primary-text); box-shadow: inset 0 0 0 var(--lb-pv-line) var(--border); }
.ft-lb-pv-note { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-xs) var(--space-md); background: var(--card-bg); color: var(--text); border-bottom: var(--lb-pv-line) solid var(--border); font-size: var(--font-sm); }
.ft-lb-pv-body { flex: 1; display: flex; min-height: 0; }
.ft-lb-pv-body .ft-lb-pv-pages { min-width: 0; }
.ft-lb-pv-side { width: var(--lb-pv-side-width); flex-shrink: 0; overflow: auto; padding: var(--space-sm) var(--space-xs); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); background: var(--card-bg); border-right: var(--lb-pv-line) solid var(--border); }
.ft-lb-pv-th { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-xs); border: calc(var(--lb-pv-line) * 2) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--font-xs); cursor: pointer; }
.ft-lb-pv-th:hover, .ft-lb-pv-th:focus-visible { background: var(--hover-bg); outline: none; }
.ft-lb-pv-th.is-active { border-color: var(--ft-yellow); background: var(--hover-bg); color: var(--text); font-weight: 600; }
.ft-lb-pv-th canvas { display: block; background: var(--pdf-paper); box-shadow: var(--shadow-md); }
.ft-lb-pv-thno { display: inline-flex; align-items: center; gap: calc(var(--lb-pv-line) * 2); }
.ft-lb-pv-menuwrap { position: relative; display: inline-flex; }
.ft-lb-pv-menu { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 2; min-width: var(--lb-pv-menu-width); padding: var(--space-xs); display: flex; flex-direction: column; background: var(--card-bg); border: var(--lb-pv-line) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.ft-lb-pv-mi { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--font-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.ft-lb-pv-mi:hover, .ft-lb-pv-mi:focus-visible { background: var(--hover-bg); outline: none; }
.ft-lb-pv:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.ft-lb-pv-printframe { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.ft-pic-dunkel { display: none; }
:root[data-theme="dark"] .ft-pic-hell { display: none; }
:root[data-theme="dark"] .ft-pic-dunkel { display: inline-block; }
/* v1.299.0: Symbole aus dem Symbol-Archiv - Akzent (class="acc", Stil A/B) gelb; in Knoepfen und Pillen passt er sich der Schrift an */
.icon svg .acc { color: var(--ft-yellow); }

/* ==========================================================================================================
   11-knopf.css - BAUSTEIN: Knopf
   Zweck:   Knoepfe: Standard, primaer, Gefahr, zurueckhaltend, nur Symbol, Groessen sm/xs
   Praefixe: btn
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 11-knopf --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ctl-h);           /* K2 (v1.21.0): eine Hoehe fuer Knopf und Feld */
    padding: 0 16px;
    border-radius: var(--ctl-radius);
    font-size: var(--font-sm);
    font-weight: 550;
    font-family: inherit;
    border: 1px solid var(--ctl-border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}
/* K2 (v1.21.0): jeder Knopf faerbt sich beim Ueberfahren - der neutrale fuellt sich mit Navy (dieselbe Familie wie .btn-primary) */
.btn:hover { background: var(--ft-navy); color: #fff; border-color: var(--ft-navy); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.25); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.btn-primary:hover {
    background: var(--brand-primary-hover);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}
.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #15803d; }
.btn-warn    { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.btn-warn:hover { background: var(--warning-border); }
/* K2 (v1.21.0): das eine Knopfsystem der Schaltzentrale - Warnung = Gelb auf Ink, Info; .btn-warn/.btn-ghost/... sind Altnamen bis K10 */
.btn-warning { background: var(--ft-yellow); color: var(--ft-ink); border-color: var(--ft-yellow); }
.btn-warning:hover { background: #D99700; border-color: #D99700; color: var(--ft-ink); }
.btn-info    { background: var(--info); color: #fff; border-color: var(--info); }
.btn-info:hover { background: var(--info-text); border-color: var(--info-text); }
.btn-ghost   { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--hover-bg); }
.btn-sm  { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--font-xs); }
.btn-xs  { height: var(--ctl-h-xs); padding: 0 8px; font-size: var(--font-xs); }
.btn-lg  { height: 44px; padding: 0 22px; font-size: var(--font-base); }
.btn-full { width: 100%; text-align: center; justify-content: center; }
.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-sm);
}
[data-locked] .btn:disabled, [data-locked] .btn.is-locked { opacity: .45; cursor: not-allowed; }
.btn .icon-star-on svg { fill: var(--brand-accent); color: var(--brand-accent); }
/* v1.41.3: Absende-Knopf wartet auf Pflichtfelder */
.btn.btn-waiting, .btn.btn-waiting:hover { opacity: .45; cursor: not-allowed; }
.btn.is-busy { cursor: progress; }
.btn.is-busy > svg, .btn.is-busy > .icon { display: none; }
label.btn > input.ft-sr { position: absolute; }
.btn-group { display: flex; gap: 2px; }
.btn .icon svg .acc, .ft-pill .icon svg .acc { color: inherit; }
/* RS1 (v1.450.0, Ralf 14.10.2026): Wahlschalter - Knopfgruppe mit genau einem gewaehlten Wert (.btn-group.btn-seg, gewaehlt .is-on),
   Farbe des gewaehlten Werts ueber seg-danger / seg-info / seg-ok (sonst Markenfarbe). Erster Einsatz: Stufe 1 der Rechte (Aus / Ansehen / Voll) */
.btn-group.btn-seg { gap: 0; flex: none; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.btn-group.btn-seg .btn { border: 0; border-radius: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-weight: 500; min-width: 72px; justify-content: center; }
.btn-group.btn-seg .btn:first-child { border-left: 0; }
.btn-group.btn-seg .btn.is-on { background: var(--brand-primary); color: #fff; font-weight: 700; }
.btn-group.btn-seg .btn.seg-danger.is-on { background: var(--danger-light); color: var(--danger-text); }
.btn-group.btn-seg .btn.seg-info.is-on { background: var(--info-light); color: var(--info-text); }
.btn-group.btn-seg .btn.seg-ok.is-on { background: var(--success-light); color: var(--success-text); }
fieldset[disabled] .btn-group.btn-seg .btn { cursor: not-allowed; }

/* ==========================================================================================================
   12-formular.css - BAUSTEIN: Formular
   Zweck:   Felder, Auswahl, Haken, Gruppen, Raster, Hilfe auf Klick, Suchauswahl (Combo), Fortschritt
   Praefixe: check, checkbox, form, ft-combo, ft-help, ft-pal, input, progress, pw
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 12-formular --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.119.0: farbige Symbole nach Geldfluss (Einstellungen -> Darstellung; MoneyColors) - Seitenleiste dunkel: helle Toene, Kopf: kraeftige Toene */
/* Einstellungen -> Darstellung: Farbkombinationen zur Auswahl */
.ft-pal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.ft-pal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.ft-pal.is-selected, .ft-pal:has(input:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
.ft-pal input { position: absolute; opacity: 0; pointer-events: none; }
.ft-pal-name { font-weight: 600; }
.ft-pal-demo { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-sm, 13px); color: var(--text-secondary); }
.ft-pal-row { display: inline-flex; align-items: center; gap: 6px; }
.ft-pal-dark { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 8px; border-radius: 6px; background: #1B2A3F; }
.ft-pal-dark-lbl { color: #C9D3E0; font-size: var(--font-xs); }
/* Umbruch an Wortgrenzen, nur ueberlange Woerter werden geteilt */
/* ============================================================
   11. FORMS
   ============================================================ */
.form-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    padding: var(--space-lg);
}
.form-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-section h3 {
    font-size: var(--font-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--space-md);
}
.form-group label, .form-label {   /* .form-label: L5 (v1.146.0), Beschriftung ausserhalb einer .form-group */
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.form-input, .form-select, .form-textarea,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.form-group select,
.form-group textarea {
    padding: 0 12px;
    border: 1px solid var(--ctl-border);
    border-radius: var(--ctl-radius);
    font-size: var(--font-base);
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    height: var(--ctl-h);           /* K2 (v1.21.0): wie der Knopf - so fluchten Feld und Knopf in einer Zeile */
}
.form-textarea, .form-group textarea { height: auto; padding: 9px 12px; }
/* v1.392.0 (Ralf 10.10.2026: "warum ist Preiseinheit gesperrt?" - nur das Auswahlfeld sah gesperrt aus, Preis und Rabatt daneben nicht, obwohl
   alle drei gesperrt waren): gesperrte und nur lesbare Eingabefelder sehen aus wie gesperrte Auswahlfelder (Gewicht wie die Regel oben + Zustand) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):is([disabled], [readonly]),
.form-group textarea:is([disabled], [readonly]) { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}
.form-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    cursor: pointer;
}
.checkbox-inline input { width: 16px; height: 16px; }
/* v1.114.0: Hilfe auf Klick (includes/help.php, Bedien-Muster 58) - ?-Symbol, schwebendes Fenster, kein Hover */
.ft-help-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ft-help { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; line-height: 1; }
.ft-help:hover, .ft-help:focus-visible, .ft-help[aria-expanded="true"] { color: var(--brand-primary-text); }
.ft-help-pop { position: fixed; top: 0; left: 0; z-index: 1200; width: max-content; max-width: min(320px, 80vw); padding: 10px 12px;
  background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: var(--font-sm, 13px); font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; white-space: normal; }
.form-section-sub { grid-column: 1 / -1; font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; padding: 0; margin: 4px 0 0; }
/* ============================================================
   PROGRESS BAR (Limits)
   ============================================================ */
.progress-bar-wrap {
    background: var(--border);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    transition: width 0.3s ease;
}
.progress-bar-fill.danger { background: var(--danger); }
.progress-bar-fill.warning { background: var(--warning); }
/* ============================================================
   PASSWORD GRID (User Edit)
   ============================================================ */
.pw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}
.pw-option {
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}
.pw-option h4 {
    font-size: var(--font-base);
    margin-bottom: var(--space-sm);
}
@media (max-width: 768px) {
  .pw-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: 1fr; }
}
.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon .icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.input-icon .form-input,
.input-icon input {
    padding-left: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    font-size: var(--font-sm);
    min-width: 220px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.input-icon input:focus { border-color: var(--brand-primary); }
@media (max-width: 768px) {
  .input-icon input { min-width: 100%; }
}
label.check input[type="checkbox"] { width: auto; height: auto; }
/* S2 (v1.31.0): Haekchen-Reihen (Rollen) mit Luft - Ralfs Bild aus S1, die Labels klebten aneinander */
.check-list, .row-gap > label.check { display: inline-flex; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* v1.35.0: Suchfeld statt Auswahlliste (ft-combo) und Listen-Suche ohne Neuladen (ft-live) */
.ft-combo-wrap { position: relative; }
.ft-combo-hidden { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; margin: 0; padding: 0; border: 0; }
.ft-combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--bg-card, var(--surface, #fff)); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; margin-top: 2px; }
.ft-combo-item { padding: 8px 12px; cursor: pointer; font-size: var(--font-sm); }
.ft-combo-item:hover, .ft-combo-item.active { background: var(--brand-primary); color: #fff; }
.ft-combo-item.current { font-weight: 600; }
.ft-combo-item.ft-combo-keep { border-top: 1px solid var(--border); color: var(--brand-primary); }
.ft-combo-more { padding: 6px 12px; font-size: var(--font-xs); color: var(--text-muted); }
/* v1.35.0: Suchfeld-Menue (ftCombo) und Listensuche ohne Neuladen */
.ft-combo { position: relative; }
.ft-combo .ft-combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; }
.ft-combo-list { position: absolute; z-index: 1200; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; }
.ft-combo-item { padding: 8px 12px; cursor: pointer; font-size: var(--font-sm); }
.ft-combo-item:hover, .ft-combo-item.active { background: var(--brand-primary); color: #fff; }
.ft-combo-item.current { font-weight: 600; }
.ft-combo-item.ft-combo-new { border-top: 1px solid var(--border); color: var(--brand-primary); font-weight: 600; }
.ft-combo-more { padding: 6px 12px; font-size: var(--font-xs); color: var(--text-muted); }
.ft-combo-input.ft-combo-isnew { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
/* v1.36.0: Formular-Abschnitte als Akkordeon (ftInitSections) - Optik der Rechte-Matrix */
.form-section.ft-acc { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-md); overflow: hidden; }
.form-section.ft-acc > .form-section-title { margin: 0; padding: 10px 14px; background: var(--bg-subtle); border-bottom: 1px solid transparent; cursor: pointer; user-select: none; font-size: var(--font-sm); color: var(--text-primary); }
.form-section.ft-acc > .form-section-title:hover { background: var(--bg-hover); }
.form-section.ft-acc > .form-section-title .accordion-chevron { margin-left: auto; }
.form-section.ft-acc:not(.open) > .form-section-title .accordion-chevron { transform: rotate(-180deg); }
.form-section.ft-acc.open > .form-section-title { border-bottom-color: var(--border); }
.form-section.ft-acc > .form-section-body { padding: var(--space-md) 14px; }
.form-section.ft-acc:not(.open) > .form-section-body { display: none; }
/* v1.38.1 (Ralf): Haekchen ueberall als Schieber wie im Rechtesystem - global, ohne Markup-Aenderung: jedes Kontrollkaestchen
   in label.check oder .form-group zeichnet sich selbst als Schalter (appearance: none). Tabellen-Auswahlkaestchen (data-table)
   bleiben Haekchen. */
label.check input[type="checkbox"], .form-group > input[type="checkbox"], .form-check input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 36px; height: 20px; margin: 0; flex: none; cursor: pointer;
    background: var(--border); border: none; border-radius: var(--radius-full); position: relative; transition: background var(--transition-fast); vertical-align: middle;
}
label.check input[type="checkbox"]::after, .form-group > input[type="checkbox"]::after, .form-check input[type="checkbox"]::after, .checkbox-inline input[type="checkbox"]::after {
    content: ""; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px;
    transition: transform var(--transition-fast); box-shadow: var(--shadow-xs);
}
label.check input[type="checkbox"]:checked, .form-group > input[type="checkbox"]:checked, .form-check input[type="checkbox"]:checked, .checkbox-inline input[type="checkbox"]:checked { background: var(--success); }
label.check input[type="checkbox"]:checked::after, .form-group > input[type="checkbox"]:checked::after, .form-check input[type="checkbox"]:checked::after, .checkbox-inline input[type="checkbox"]:checked::after { transform: translateX(16px); }
label.check input[type="checkbox"]:focus-visible, .form-group > input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242,169,0,.4); }
label.check input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
label.check { gap: 10px; }
.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input[type="checkbox"] { width: 36px !important; height: 20px !important; }
.checkbox-inline input[type="checkbox"] { width: 36px !important; height: 20px !important; }
/* gleiche Kette wie die allgemeine Feldregel (.form-group input:not(...) x5, Zeile ~813) + .ft-locked - sonst verliert sie (CSS-Muster 9) */
.form-group .ft-locked input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) { background: var(--bg-subtle); color: var(--text-secondary); padding-right: 32px; cursor: default; }
/* ---- v1.63.0 (Ralf: "das Dropdown geht ins Nichts - muss ueber den anderen Akkordeon-Block gehen"): der Block darf ueberstehen,
   damit Suchfeld-Menues (.ft-combo-list) und aehnliche Aufklapper ueber den folgenden Bloecken liegen statt abgeschnitten zu werden.
   Die runden Ecken traegt jetzt die Kopfzeile selbst (vorher schnitt overflow:hidden sie zurecht). ---- */
.form-section.ft-acc { overflow: visible; }
.form-section.ft-acc > .form-section-title { border-radius: calc(var(--radius-md) - 1px); }
.form-section.ft-acc.open > .form-section-title { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.form-section.ft-acc .ft-combo-list { z-index: 1200; }
/* ---- v1.64.0 (Ralf): zugeklappte Bloecke ohne leeren Streifen - der Block selbst hat keinen Innenabstand, den traegt der Inhalt ---- */
.form-section.ft-acc { padding: 0; }
/* v1.72.0: gesperrter Akkordeon-Block (kein Bearbeiten-Recht) */
.form-section[data-ro] .ft-ro-pill { margin-left: 8px; font-weight: 500; }
.form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) {
  .form-grid.form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v1.93.0: Reiter Klassifikation - Ebenen nebeneinander, Artikelbild gross, weitere Bilder mit Stern */
.form-grid.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1399px) {
  .form-grid.form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
.form-section.ft-acc > .form-section-title .imp-sec-hide + .accordion-chevron { margin-left: var(--space-sm); }
/* v1.245.0 (Ralf, Bild Zugang-Akte "die Icons sind nicht mittig"): Symbol und Pille in einer Schalter-Zeile auf Textmitte statt auf der
   Grundlinie - gilt global fuer label.check (inline wie flex) und fuer Hinweiszeilen mit Symbol */
label.check { align-items: center; }
label.check > .icon, label.check > .ft-pill, .ft-value-hint > .icon { vertical-align: middle; align-self: center; }
/* v1.277.0 (Ralf-Bild: zugeklappte Akkordeons zeigten unter dem Kopf einen leeren Streifen) - der Innenabstand von .form-section entfaellt
   bei der Akkordeon-Huelle des Maskenbaus; der Inhalt hat seinen Abstand im Akkordeon-Koerper */
.form-section.ft-layout-acc { padding-bottom: 0; }
/* v1.389.1 (Ralf 10.10.2026: "Block Klassifikation abgeschnitten unten!!!"): als letzter Abschnitt seines Formulars verlor das Akkordeon den
   unteren Rand (.form-section:last-of-type, 0,2,0 - steht davor). Gleiches Gewicht, steht spaeter: Rand rundum wie .ft-layout-acc. */
.form-section.ft-layout-acc:last-of-type { border-bottom: 1px solid var(--border); }

/* v1.397.0 BAUSTEIN-VARIANTE "Feldbreite" (Feldbreiten-Konzept, core.js ftFieldWidths): Felder fliessen nebeneinander und teilen sich den Platz
   im Verhaeltnis ihrer Grundbreite in Zeichen (--fw, dynamisch wie order - CSS-Muster 7); kurze Felder mit Hoechstbreite (--fw-max).
   Alles, was kein Feld ist (Titel, Hinweise), nimmt eine eigene Zeile. Unter 700 px untereinander. */
.form-grid.ft-fwrap, .ft-address.ft-fwrap { display: flex !important; flex-wrap: wrap; align-items: flex-start; }
.ft-fwrap .form-group.ft-fw { flex: var(--fw, 20) 1 calc(var(--fw, 20) * 1ch + 28px); min-width: 0; margin-bottom: 0; }   /* auch durch Huellen mit display: contents (Anschrift) */
.ft-fwrap .form-group.ft-fw-max { max-width: calc(var(--fw-max) * 1ch + 28px); }
.ft-fwrap .form-group.ft-fw-full { flex: 1 0 100%; }
.ft-fwrap .form-group.ft-fw-auto { flex: 0 1 auto; max-width: 100%; }
.ft-fwrap .form-group.ft-fw-group { flex: 1 0 auto; max-width: 100%; }   /* v1.398.0: Feldreihe so breit wie ihr Inhalt, waechst mit */   /* v1.397.1: Schalter so breit wie ihr Text */
/* v1.399.1 Variante "Zahlenfeld schmal" (.form-input.ft-in-num): Zahl in einer Tabellenzelle, so breit wie 5 Ziffern - z. B. Einstellungen ->
   Feldbreiten (Ralf: "nicht als Endlosliste, sondern als Block") - nichts ragt aus dem Block */
.form-input.ft-in-num { width: calc(5ch + 26px); padding: 0 8px; text-align: right; }
.ft-fwrap .form-group:not(.ft-fw) { flex: 1 0 100%; }   /* unbekannte Gruppen: eigene Zeile wie bisher */
.ft-fwrap > :not(.form-group):not(input[type="hidden"]) { flex: 1 0 100%; }
@media (max-width: 700px) {
    .ft-fwrap .form-group.ft-fw, .ft-fwrap .form-group.ft-fw-max { flex-basis: 100%; max-width: none; }
}

/* ==========================================================================================================
   13-tabelle.css - BAUSTEIN: Tabelle
   Zweck:   Datentabellen, Zeilen-Hover, Unterzeilen, Ausrichtung nach Spalten-Art, Positionstexte, Blaettern
   Praefixe: data, ft-chain, ft-disc, ft-flag, ft-item, ft-itemflag, ft-litem, ft-pager, ft-pg, ft-sub, ft-var
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 13-tabelle --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   7. TABLES
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-base);
    vertical-align: middle;
}
/* v1.103.0 (Ralf: "Tabelleneintraege verrueckt zur Ueberschrift"): .data-table th (0,1,1) schlug .ta-right (0,1,0) - Kopf links, Werte
   rechts. Ausrichtung gilt jetzt fuer Kopf UND Zellen jeder Tabelle gleich (CSS-Muster, Abschnitt Spezifitaet). */
.data-table th.ta-right, .data-table td.ta-right { text-align: right; }
.data-table th.ta-center, .data-table td.ta-center { text-align: center; }
/* >>> AUSRICHTUNG NACH SPALTEN-ART (v1.306.0, GLOBALE REGEL) - erzeugt aus ListColumns::KIND, geprueft von tools/check_align.php.
   Selektor .data-table th[data-col] (0,2,1) schlaegt .data-table th (0,1,1) und jede Hilfsklasse - Kopf und Zelle gleich stark.
   Zuerst alle Spalten links, danach Zahl (rechts, Ziffern gleich breit) und Merkmal (Mitte). NICHT von Hand aendern: Art in ListColumns::KIND. */
.data-table th[data-col], .data-table td[data-col] { text-align: left; }
.data-table th[data-col="alternativen"], .data-table td[data-col="alternativen"],
.data-table th[data-col="anlagen"], .data-table td[data-col="anlagen"],
.data-table th[data-col="auftraege"], .data-table td[data-col="auftraege"],
.data-table th[data-col="bestand"], .data-table td[data-col="bestand"],
.data-table th[data-col="brutto"], .data-table td[data-col="brutto"],
.data-table th[data-col="einsatzorte"], .data-table td[data-col="einsatzorte"],
.data-table th[data-col="ek"], .data-table td[data-col="ek"],
.data-table th[data-col="ekrabatt"], .data-table td[data-col="ekrabatt"],
.data-table th[data-col="eknetto"], .data-table td[data-col="eknetto"],
.data-table th[data-col="gewicht"], .data-table td[data-col="gewicht"],
.data-table th[data-col="kontakte"], .data-table td[data-col="kontakte"],
.data-table th[data-col="kreditlimit"], .data-table td[data-col="kreditlimit"],
.data-table th[data-col="groesse"], .data-table td[data-col="groesse"],
.data-table th[data-col="listenpreis"], .data-table td[data-col="listenpreis"],
.data-table th[data-col="menge"], .data-table td[data-col="menge"],
.data-table th[data-col="minbestand"], .data-table td[data-col="minbestand"],
.data-table th[data-col="mwst"], .data-table td[data-col="mwst"],
.data-table th[data-col="netto"], .data-table td[data-col="netto"],
.data-table th[data-col="offen"], .data-table td[data-col="offen"],
.data-table th[data-col="pos"], .data-table td[data-col="pos"],
.data-table th[data-col="preis"], .data-table td[data-col="preis"],
.data-table th[data-col="rabatt"], .data-table td[data-col="rabatt"],
.data-table th[data-col="rohertrag"], .data-table td[data-col="rohertrag"],
.data-table th[data-col="setbaubar"], .data-table td[data-col="setbaubar"],
.data-table th[data-col="ueberfaellig"], .data-table td[data-col="ueberfaellig"],
.data-table th[data-col="vk"], .data-table td[data-col="vk"],
.data-table th[data-col="vkrabatt"], .data-table td[data-col="vkrabatt"],
.data-table th[data-col="vpe"], .data-table td[data-col="vpe"] { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th[data-col="bemerkung"], .data-table td[data-col="bemerkung"],
.data-table th[data-col="charge"], .data-table td[data-col="charge"],
.data-table th[data-col="einkaufsartikel"], .data-table td[data-col="einkaufsartikel"],
.data-table th[data-col="lagerartikel"], .data-table td[data-col="lagerartikel"],
.data-table th[data-col="lieferschein"], .data-table td[data-col="lieferschein"],
.data-table th[data-col="provisionsfaehig"], .data-table td[data-col="provisionsfaehig"],
.data-table th[data-col="rabattfaehig"], .data-table td[data-col="rabattfaehig"],
.data-table th[data-col="seriennummer"], .data-table td[data-col="seriennummer"],
.data-table th[data-col="setartikel"], .data-table td[data-col="setartikel"],
.data-table th[data-col="skontofaehig"], .data-table td[data-col="skontofaehig"],
.data-table th[data-col="verkaufsartikel"], .data-table td[data-col="verkaufsartikel"] { text-align: center; }
/* <<< AUSRICHTUNG NACH SPALTEN-ART */
.data-table tbody tr {
    transition: background var(--transition-fast);
}
.data-table tbody tr:hover { background: var(--hover-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tr.ft-ver-me > td { background: var(--info-light); }
/* v1.104.0: kleine Flagge der Korrespondenzsprache (includes/CommLanguage.php) - Grafik, weil Windows Flaggen-Emojis nur als Buchstaben zeigt */
.ft-flag { display: inline-flex; vertical-align: middle; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); margin-left: 6px; }
.ft-flag svg { width: 100%; height: 100%; display: block; }
.ft-flag-code { width: auto; height: auto; padding: 0 4px; font-size: var(--font-xs); font-weight: 700; color: var(--text-muted); box-shadow: 0 0 0 1px var(--border); }
.data-table .row-muted td { opacity: .62; }
tr[data-href] { cursor: pointer; }
/* v1.42.0: Zeilen mit Doppelklick */
tr[data-open] { user-select: none; cursor: pointer; }
tr[data-open] td { cursor: pointer; }
tr[data-open]:hover td { background: var(--hover-bg); }
/* ---- Adressliste: Typ-Symbol vorn, Nummer in einer Flucht mit dem Namen - seit v1.53.0 ---- */
/* alle Zellen an der ERSTEN Textzeile ausrichten - bricht der Name (Symbole) um, bleibt die Nummer auf Hoehe des Namens */
.data-table.co-list td { vertical-align: baseline; }
.data-table .co-typecell { width: 36px; padding-right: 0; text-align: center; white-space: nowrap; }
.data-table .co-nr { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
/* ---- Reihenfolge per Ziehen in Tabellen (T2, SortOrder.php) - seit v1.55.0: schmale Griff-Spalte vorn ---- */
.data-table .sort-handle-cell { width: 28px; padding-right: 0; }
.data-table tr[data-sort-item].is-dragging td { background: var(--hover-bg); }
/* ---- v1.147.0 Beleg-Positionen (Bedien-Muster 76): Vorschaubild mit Grossansicht (ft_thumb, global) und Kennzeichen (ItemFlags) ---- */
.data-table.ft-items td { vertical-align: middle; }
/* Zeilen mit Vorschaubild: alles mittig zum Bild */
.data-table .ft-col-thumb { width: 52px; padding-right: 0; }
.data-table .ft-col-flags { width: 1%; white-space: nowrap; }
.data-table .ft-col-num { width: 8.5rem; }
/* v1.148.0 (Ralf): Menge, Preis, Rabatt gleich breit - die Bezeichnung bekommt den Rest */
.data-table .ft-col-sum { width: 1%; white-space: nowrap; }
.ft-item-link { color: inherit; text-decoration: none; }
.ft-item-link:hover strong { color: var(--brand-primary-text); text-decoration: underline; }
.ft-itemflag { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.ft-itemflag.is-empty { border: 0; }
.ft-itemflag-info { background: var(--info-light); color: var(--info-text); border-color: var(--info-border); }
.ft-itemflag-neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.ft-itemflag-warn { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.ft-itemflag-ok { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); }
a.ft-itemflag.is-link { cursor: pointer; text-decoration: none; transition: box-shadow var(--transition-fast); }
a.ft-itemflag.is-link:hover { box-shadow: 0 0 0 2px currentColor; }
/* ---- Einsatzort-Liste (E1, v1.60.0; E2 v1.61.0 Ralf: "Icon nicht verrueckt, wenn ausklappbar"): das Art-Symbol steht in JEDER Zeile an
   derselben Stelle (links, feste Breite), der Aufklapp-Pfeil kommt nur zusaetzlich dahinter und verschiebt nichts */
.data-table.co-list .co-typecell { text-align: left; width: 48px; }
/* Kontaktliste: jede Zeile einzeilig (Name, Funktionen, Zuordnung) - Flucht wie Adressen */
/* ---- Baustein Blaettern (v1.66.0, includes/render-pagination.php, Bedien-Muster 33) ----
   links Bereich, Mitte Pfeile + hoechstens 7 Zahlen mit "...", rechts "Je Seite"; alle Knoepfe 32 px wie .btn-sm, aktuelle Seite Navy */
.ft-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-md); border-top: 1px solid var(--border); }
.ft-pager-info { font-size: var(--font-sm); color: var(--text-secondary); white-space: nowrap; }
.ft-pager-nav, .ft-pager-nums { display: flex; align-items: center; gap: 4px; }
.ft-pg { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md);
         background: var(--bg-card, #fff); color: var(--text-primary); font-size: var(--font-sm); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); }
a.ft-pg:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.ft-pg-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 600; }
.ft-pg-off { opacity: .4; cursor: default; }
.ft-pg-dots { min-width: 20px; text-align: center; color: var(--text-muted); font-size: var(--font-sm); }
.ft-pager-short { display: none; font-size: var(--font-sm); color: var(--text-secondary); padding: 0 8px; white-space: nowrap; }
.ft-pager-per { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--text-secondary); margin: 0; white-space: nowrap; }
.ft-pager-per select { width: auto; min-width: 72px; height: 32px; padding: 0 8px; }
@media (max-width: 720px) {
  .ft-pager { justify-content: center; }
  .ft-pager-info, .ft-pager-per, .ft-pager-nums { display: none; }
  .ft-pager-short { display: inline; }
}
/* lange Namen im Seitenkopf */
/* v1.68.0: Blaettern im Browser (Akten-Reiter) - dieselben Knoepfe als <button>; verdeckte Eintraege */
button.ft-pg { cursor: pointer; font: inherit; font-size: var(--font-sm); }
button.ft-pg:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
/* Gewicht 0,2,0 reicht - kein !important (CSS-Muster 9) */
.ft-pager-client { border-top: 1px solid var(--border); }
/* G1b (v1.138.0, Bedien-Muster 71): Einstellungen -> Nummernkreise - Gruppenzeile, Kreis mit Symbol, Platzhalter-Knoepfe, Vorschau im Popup */
.data-table tr.ns-group > td { background: var(--bg-subtle); padding-top: 10px; padding-bottom: 6px; font-size: var(--font-sm); }
.ft-chain { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.ft-chain-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ft-chain-title { font-size: var(--font-xs); color: var(--text-secondary); }
.ft-chain-arrow { display: flex; justify-content: center; padding-top: 34px; color: var(--text-muted); }
.ft-chain-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); text-decoration: none; background: var(--card-bg); }
.ft-chain-card:hover { border-color: var(--brand-primary); text-decoration: none; }
.ft-chain-card.is-me { border: 2px solid var(--brand-primary); background: var(--info-light); }
.ft-chain-card .ft-hp { align-self: flex-start; }
.ft-chain-kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-xs); color: var(--text-secondary); }
.ft-chain-meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--font-sm); color: var(--text-secondary); }
@media (max-width: 900px) {
  .ft-chain { grid-template-columns: minmax(0, 1fr); }
  .ft-chain-arrow { transform: rotate(90deg); padding-top: 0; }
}
/* v1.155.0 (Ralf 01.10.2026: "Menge/Preis/Rabatt sind immer gleich breit - FIX - der gesparte Platz ist fuer die Bezeichnung"): feste
   Tabellenaufteilung der Positionen - die Breiten stehen am Kopf, die Bezeichnung (ohne Breite) bekommt den ganzen Rest. Auf schmalen
   Bildschirmen scrollt die Tabelle waagerecht, statt die Bezeichnung zu quetschen. */
.data-table.ft-pos-table { table-layout: fixed; min-width: 960px; }
.data-table.ft-pos-table .sort-handle-cell { width: 36px; }
.data-table.ft-pos-table .ft-col-thumb { width: 64px; }
.data-table.ft-pos-table .ft-col-pos { width: 3.25rem; }
.data-table.ft-pos-table .ft-col-num { width: 7.5rem; }
/* Menge, Preis, Rabatt - alle drei GLEICH */
.data-table.ft-pos-table .ft-col-sum { width: 8.5rem; white-space: nowrap; }
.data-table.ft-pos-table .ft-col-flags { width: 8.5rem; padding-left: var(--space-md); }
.data-table.ft-pos-table td { overflow-wrap: anywhere; }
/* VA1b/VA2 (v1.268.0): Variantenartikel - Tabelle "Nummern einzeln" im Assistenten, Varianten-Wahl im Beleg (Kacheln mit Radio) */
.ft-var-attr { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.ft-var-rows { overflow-x: auto; }
.ft-var-rows input { min-width: 120px; }
.ft-var-pick { margin-top: var(--space-sm); }
.ft-var-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.ft-var-chip { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); cursor: pointer; }
.ft-var-chip:hover { border-color: var(--brand-primary); }
.ft-var-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ft-var-chip.is-sel { border: 2px solid var(--brand-primary); background: var(--bg-subtle); }
.ft-var-chip .ft-var-v { font-weight: 600; }
.ft-var-chip .ft-var-m { font-size: var(--font-xs); color: var(--text-muted); }
/* alles ohne Layout-Klasse (z. B. Schalter der Speichern-Leiste) */
.ft-litem { min-width: 0; }
.ft-litem:has(> table) { overflow-x: auto; }
/* breite Tabelle scrollt in ihrer Zelle */
.ft-litem > .card, .ft-litem > p, .ft-litem > .alert { margin-top: 0; }
/* GLOBALE REGEL "Unterzeilen" (v1.307.0, Ralf 05.10.2026): Unterzeilen (Varianten, kuenftig Set-Bestandteile, Unterpositionen) sind ECHTE
   Tabellenzeilen mit denselben Spalten wie ihre Hauptzeile - <tr class="ft-sub-row" data-sub-of="id"> - nie eine Zeile ueber die ganze Breite.
   Sie erben Spalten-Reihenfolge, ausgeblendete Spalten und die Ausrichtung nach Spalten-Art. Die Bezeichnung steht buendig mit der der
   Hauptzeile: .ft-sub-indent ist ein unsichtbarer Pfeil in genau der Form des Aufklapp-Pfeils. Geprueft von tools/check_align.php. */
.data-table tr.ft-sub-row > td { background: var(--bg-subtle); }
.data-table tr.ft-sub-row:hover > td { background: var(--card-bg); }
.ft-sub-indent { display: inline-flex; vertical-align: middle; margin-right: 4px; visibility: hidden; pointer-events: none; }
/* exakt die Maße von [data-expand-caret] */
/* v1.308.0 Positionstexte im Vorgang: Langtext/Verkaufs-/Einkaufstext unter der Bezeichnung; abgewaehlt = blass + "nicht im Druck".
   Interne Hinweise (nie gedruckt) als rote Einzeile nach der globalen Regel .ft-il: Gefahrenzeichen + Text, auf eine Zeile gekuerzt,
   Maus darueber = ganzer Text (data-tip); im Positions-Popup ganz (.is-full). */
.ft-item-txt { font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }
.ft-item-txt.is-off { opacity: .55; }
.ft-item-intern { display: flex; color: var(--danger); font-size: var(--font-sm); margin-top: 2px; max-width: 60ch; cursor: help; }
.ft-item-intern .icon { color: var(--danger); }
.ft-item-intern .ft-il-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-item-intern.is-full { max-width: none; cursor: default; }
.ft-item-intern.is-full .ft-il-txt { white-space: normal; }
/* v1.309.0 Rabattkette in der Positionsliste: Stufe unter Stufe (40,00 % / 5,00 %), Maus darueber = Gesamtrabatt */
.ft-disc-chain { display: inline-block; line-height: 1.35; cursor: help; }

/* ==========================================================================================================
   14-karte.css - BAUSTEIN: Karte
   Zweck:   Karten mit Kopf, Kennzahl-Karten, Kalkulationskaestchen, Akte (Seitenleiste mit Stammdaten), Summen
   Praefixe: activity, calc, card, ft-record, ft-sum, record, stat
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 14-karte --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   5. STAT CARDS
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    transition: all var(--transition-fast);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon.blue   { background: var(--tile-navy-bg); color: var(--tile-navy-fg); }
/* v1.43.0: eigenes Token-Paar, dunkel nicht mehr gelb */
.stat-icon.green  { background: var(--success-light); color: var(--success); }
.stat-icon.orange { background: var(--warning-light); color: var(--warning); }
.stat-icon.red    { background: var(--danger-light); color: var(--danger); }
.stat-icon.cyan   { background: var(--info-light); color: var(--info); }
.stat-icon.grey   { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
/* v1.43.0: abgeschlossen/archiviert - Rahmen statt Flaeche, sonst im Kartengrund unsichtbar */
/* v1.43.0: kleines Icon-Feld fuer .stat-mini im Reiterkopf einer Akte (render_stat_cards(..., 'mini')) */
.stat-icon.stat-icon-sm {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
}
.stat-value {
    font-size: var(--font-2xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.stat-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 450;
}
.stat-trend {
    font-size: var(--font-xs);
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
/* ============================================================
   6. CARDS
   ============================================================ */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}
.card:last-child { margin-bottom: 0; }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.card-header h2, .card-title {   /* .card-title: L5 (v1.146.0) */
    font-size: var(--font-md);
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.card-body { padding: var(--space-lg); }
.card-body.flush { padding: 0; }
/* ============================================================
   14. ACTIVITY LIST
   ============================================================ */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: flex-start;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon-wrap {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.activity-icon-wrap.green  { background: var(--success-light); color: var(--success); }
.activity-icon-wrap.blue   { background: var(--brand-primary-light); color: var(--brand-primary-text); }
.activity-icon-wrap.orange { background: var(--warning-light); color: var(--warning); }
.activity-icon-wrap.red    { background: var(--danger-light); color: var(--danger); }
.activity-text { font-size: var(--font-sm); line-height: 1.5; }
.activity-text strong { font-weight: 600; }
.activity-meta {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-xs);
    margin-top: 2px;
}
.ft-record-links { margin-top: 6px; }
/* v1.122.0 (Bedien-Muster 65): Summe mit Schieber Netto/Brutto - beide Zahlen gleich gross, nicht fett; Kopfzeile mittig */
.ft-sum { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.ft-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; min-height: 24px; }
.ft-sum-title { font-size: var(--font-xs); color: var(--text-secondary); line-height: 1; }
.ft-sum-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--font-xs); color: var(--text-secondary); line-height: 1; }
.ft-sum[data-mode="net"] .ft-sum-switch > span:first-child, .ft-sum[data-mode="gross"] .ft-sum-switch > span:last-child { color: var(--text-primary); font-weight: 600; }
/* v1.135.0: Schieber "Firma | Privat" - Symbol vor dem Wort, senkrecht mittig; die gewaehlte Seite dunkel und fett (Regel darueber) */
.ft-sum-side { display: inline-flex; align-items: center; gap: 4px; }
.ft-sum-side .icon { flex: none; }
.ft-sum-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-sum-val { display: flex; flex-direction: column; }
.ft-sum-num { font-size: var(--font-lg, 18px); font-weight: 500; }
.ft-sum[data-mode="net"] [data-show="gross"], .ft-sum[data-mode="gross"] [data-show="net"] { display: none; }
.ft-record-sep { margin-top: var(--space-md); }
@media (max-width: 768px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}
.card-body-flush:has(> table.co-list) { overflow-x: auto; }
.record-head .company-header-info { display: block; min-width: 0; }
.record-head .company-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-width: 0; }
.record-head-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.record-head-pills:empty { display: none; }
.record-head .company-header-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; }
.record-head .company-header-actions:empty { display: none; }
/* ---- Akten-Layout (includes/render-record.php) - seit v1.85.0, Ralf 29.09.2026: "Stammdaten immer links, rechts die Reiter" ----
   Bezugsbreite 1536 px (Bedien-Muster 40). Links 380 px, bleibt stehen; rechts die Reiter - brechen in eine zweite Reihe um.
   Unter 1200 px: Karte oben als eine Zeile, "Stammdaten" klappt sie auf. */
.ft-record { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.ft-record-side { position: sticky; top: calc(var(--header-height) + var(--space-md)); max-height: calc(100vh - var(--header-height) - 2 * var(--space-md));
    overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ft-record-main { min-width: 0; }
.ft-record-main > .tab-container { margin-top: 0; }
.ft-record-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); min-height: 52px; }
.ft-record-title { font-weight: 600; color: var(--brand-primary-text); flex: 1 1 auto; }   /* v1.370.0: --brand-primary-text (dunkel Gelb) - vorher im Dunkelmodus unsichtbar */
.ft-record-btns { display: flex; gap: 6px; align-items: center; }
.ft-record-toggle, .ft-record-line { display: none; }
.ft-record-body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.ft-record-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
.ft-record-wide { grid-column: 1 / -1; }
.ft-record-label { font-size: 13px; color: var(--text-secondary); }
.ft-record-value { font-weight: 500; overflow-wrap: anywhere; }
.ft-record-sec { border-top: 1px solid var(--border); padding-top: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.ft-record-sec-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ft-record-sec a { overflow-wrap: anywhere; }
.ft-record-geo { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ft-record-geo .srv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ft-record-geo.ok { color: var(--success); }
.ft-record-geo.ok .srv-dot { background: var(--success); }
.ft-record-geo.no { color: var(--danger); }
.ft-record-geo.no .srv-dot { background: var(--danger); }
.ft-record-note { padding: var(--space-sm); border-radius: var(--radius-md); background: var(--warning-light); color: var(--warning-text); }
.ft-record-meta { font-size: 13px; color: var(--text-secondary); }
/* Formular in der linken Karte: eine Spalte, Abschnitte ohne Rahmen */
.ft-record-form { padding: var(--space-sm) var(--space-md) var(--space-md); }
.ft-record-form .form-grid { grid-template-columns: minmax(0, 1fr); }
.ft-record-form .form-col-span-2 { grid-column: auto; }
.ft-record-form .form-section { margin-bottom: var(--space-sm); }
/* v1.370.0: Umbruch der Reiterleiste steht seit v1.347.0 global in 18-reiter - die Doppelung hier ist entfernt (Bausteinkatalog Abschnitt 7) */
@media (max-width: 1199px) {
  .ft-record { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .ft-record-side { position: static; max-height: none; }
  .ft-record-toggle { display: inline-flex; }
  .ft-record-line { display: block; padding: 0 var(--space-md) var(--space-sm); color: var(--text-secondary); }
  .ft-record-side:not(.is-open) .ft-record-body, .ft-record-side:not(.is-open) .ft-record-btns { display: none; }
  .ft-record-side.is-open .ft-record-line { display: none; }
}
/* v1.85.1 (Ralf): Bearbeiten breiter (520 px), rechts abgeblendet; Matchcode klein, Firmenname darunter; "verortet" rechts im Titel;
   Aktiv als Schieber in der Karte; Firmenname im Formular als Textbox */
.ft-record.is-editing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* v1.123.0 (Ralf): beim Bearbeiten die halbe Breite (vorher 600 px) */
/* v1.117.0: linke Karte einklappbar - eingeklappt bleibt ein schmaler Streifen mit Aufklapp-Knopf (nie beim Bearbeiten) */
.ft-record-expand { display: none; }
/* v1.120.0 (Bedien-Muster 63): im Bearbeiten-Modus klebt der Kartenkopf (Speichern + Abbrechen) oben; der Speichern-Knopf im Formular entfaellt */
.ft-record.is-editing .ft-record-head { position: sticky; top: 0; z-index: 6; background: var(--card-bg); }
.ft-record-form .ft-save-moved { display: none !important; }
@media (min-width: 1025px) {
  /* v1.370.0: Streifen + Aufklappen ueber den Inhalt nur im Layout mit linker Karte - die gestapelte Akte klappt nach oben ein */
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing) { grid-template-columns: 40px minmax(0, 1fr); }
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing):not(.is-peek) .ft-record-side > :not(.ft-record-expand) { display: none; }
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing):not(.is-peek) .ft-record-side { padding: 0; overflow: visible; }
  /* v1.128.0 (Bedien-Muster 66, Baustein FtPeek): eingeklappt + Maus drueber -> Karte klappt UEBER den Inhalt auf, der Inhalt bleibt stehen */
  .ft-record.is-collapsed:not(.is-stacked).is-peek:not(.is-editing) .ft-record-side { width: 380px; z-index: 60; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18); }
  .ft-record.is-collapsed:not(.is-stacked).is-peek:not(.is-editing) .ft-record-expand { display: none; }
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing):not(.is-peek) .ft-record-expand { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 40px; padding: 10px 0; border: 0; background: none; color: var(--text-secondary); cursor: pointer; }
  /* v1.128.0: eingeklappter Streifen ueber die volle Hoehe - Maus auf den Streifen klappt auf; nur der Knopf > oben loest nichts aus (dauerhaft aufklappen) */
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing):not(.is-peek) .ft-record-side { height: calc(100vh - var(--header-height) - 2 * var(--space-md)); cursor: pointer; }
  /* v1.129.0: Hand wie im Menue */
  .ft-record.is-collapsed:not(.is-stacked).is-peek:not(.is-editing) .ft-record-side { cursor: auto; }
  .ft-record.is-collapsed:not(.is-stacked):not(.is-editing) .ft-record-expand:hover { color: var(--brand-primary-text); }
}
@media (max-width: 1024px) {
  .ft-record-collapse { display: none; }
}
/* v1.85.3: 600 statt 520 px (Ralf: "noch ein wenig breiter") */
.ft-record.is-editing > .ft-record-main { opacity: .55; }
.ft-record.is-editing > .ft-record-main:hover, .ft-record.is-editing > .ft-record-main:focus-within { opacity: 1; }
.ft-record.is-editing .ft-record-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-record.is-editing .ft-record-form .form-col-span-2 { grid-column: 1 / -1; }
.ft-record-form .form-group:has(> .ft-name-box) { grid-column: 1 / -1; }
.ft-record-sec-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.ft-record-sec-title .ft-record-geo { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ft-record-small .ft-record-value { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.ft-record-name .ft-record-value { font-size: var(--font-md); font-weight: 600; line-height: 1.35; }
.ft-record-active { display: inline-flex; align-items: center; margin-right: 4px; }
.ft-record-active .check { margin: 0; font-weight: 600; }
@media (max-width: 1199px) {
  .ft-record.is-editing { grid-template-columns: minmax(0, 1fr); }
}
/* v1.85.3: Kommunikation je Zeile - Symbol senkrecht mittig zum Text (vorher leicht versetzt) */
.ft-record-link { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.4; }
.ft-record-link a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-record-ico, .ft-record-link .ft-star { color: var(--text-secondary); display: inline-flex; align-items: center; flex: none; margin: 0; }
.ft-record-link .ft-star { color: var(--brand-accent); }
.ft-record-ico .icon, .ft-record-link .ft-star .icon { display: inline-flex; }
.ft-record-img { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-subtle); }
.ft-record-img img { display: block; width: 100%; max-height: 220px; object-fit: contain; }
/* ---- Akten-Layout rechts: Bloecke als Karten in zwei Spalten statt Akkordeon untereinander (v1.90.0, Konzept Akten-Layout) ----
   Gilt fuer jedes Formular mit Abschnitten im rechten Bereich einer Akte; breite Bloecke (.ft-wide) ueber beide Spalten. Unter 1400 px eine Spalte. */
/* v1.270.0 (F1): :not(.ft-stage-pass) - steht das Formular auf der Maskenbau-Buehne, ordnet die Buehne (sonst gewaenne
   .form-section.ft-wide mit 0,4,1 gegen jede Layout-Breite); :not([hidden]) - ein im Sammel-Lauf verstecktes Formular blieb
   sonst als Raster sichtbar (seine Speichern-Leiste stand allein im eigenen Reiter) */
.ft-record-main form:has(> .form-section):not(.ft-stage-pass):not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.ft-record-main form:has(> .form-section):not(.ft-stage-pass) > :not(.form-section):not([type="hidden"]) { grid-column: 1 / -1; }
.ft-record-main form:has(> .form-section):not(.ft-stage-pass) > .form-section { margin: 0; }
.ft-record-main form:has(> .form-section):not(.ft-stage-pass) > .form-section.ft-wide { grid-column: 1 / -1; }
.ft-record-main .form-section.ft-acc > .form-section-title { cursor: default; }
.ft-record-main .form-section.ft-acc > .form-section-title .accordion-chevron { display: none; }
@media (max-width: 1399px) {
  /* v1.374.0: :not([hidden]) wie oben - sonst gewann die Regel oben (0,4,1) und der Reiterblock blieb auch auf dem Handy zweispaltig */
  .ft-record-main form:has(> .form-section):not(.ft-stage-pass):not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}
/* A3a (v1.90.0): Kalkulation im Reiter Preise */
.calc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.calc-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.calc-val { font-size: var(--font-lg); font-weight: 700; color: var(--brand-primary); white-space: nowrap; }
.calc-lbl { font-size: 13px; color: var(--text-secondary); }
.calc-box.is-neg .calc-val { color: var(--danger); }
.ft-record-price { display: flex; justify-content: space-between; gap: var(--space-sm); }
.ft-record-price.is-muted { color: var(--text-secondary); font-size: 13px; }
@media (max-width: 1199px) {
  .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v1.94.0: Sprach-Umschalter im Reiter Texte des Artikels (ueber die ganze Breite des Formulars) */
.ft-record-main form > .art-langs { margin-bottom: 0; }
/* Namen in Listen: sieht aus wie Text, beim Ueberfahren erkennbar als Link */
.card-footer { display: flex; gap: var(--space-sm); justify-content: flex-end; align-items: center; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); }
.card-danger { border-color: var(--danger); }
.card-danger > .card-header h2, .card-danger > .card-header .card-title { color: var(--danger); }
.card-body-flush:has(> .data-table.ft-pos-table) { overflow-x: auto; }
.card-body.imp-actions { margin-top: 0; border-top: 1px solid var(--border); }
/* v1.158.0 BILD STATT SYMBOL (Bedien-Muster 84, CatalogImages): Bild im Symbolfeld, weiss hinterlegt, ganz sichtbar; Grossansicht beim Ueberfahren */
.stat-icon.stat-img { background: #fff; border: 1px solid var(--border); padding: 2px; overflow: hidden; cursor: zoom-in; }
.stat-icon.stat-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ft-record-btns .btn.is-active { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
/* v1.292.0: Kategorie-Piktogramme aus dem Muster-Archiv (SVG, hell/dunkel) - CategoryIcons::html liefert beide Fassungen,
   das Seitendesign blendet eine aus. Vorschau unter Einstellungen -> Symbole: Haelften fest hell/dunkel, gewaehlter Stil per :has */
.stat-icon.stat-pic { background: transparent; }
.stat-pic img { width: 100%; height: 100%; object-fit: contain; }
/* ---- Akten-Layout UNTEREINANDER (v1.370.0, Ralf 09.10.2026: "das ist manchmal verwirrend - Ueberschrift / Buttonreihe / linker Block /
   Block mit Reitern"; Probe bei den Angeboten, danach global) - Variante des Bausteins: ft_record_open($side, $editing, true) -> .is-stacked.
   Der Kenndaten-Block steht ueber die volle Breite, seine Abschnitte fliessen in Spalten nebeneinander (Hoehen ausgeglichen);
   darunter der Reiter-Block ueber die volle Breite. Einklappen = nur der Kopf mit einer Zeile (eigener Merker, core.js). ---- */
.ft-record.is-stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.ft-record.is-stacked .ft-record-side { position: static; max-height: none; overflow: visible; }
.ft-record.is-stacked .ft-record-expand { display: none; }
.ft-record.is-stacked .ft-record-body:not(.ft-record-form) { display: block; column-width: var(--record-col-width); column-gap: var(--space-xl); column-rule: 1px solid var(--border); }
.ft-record.is-stacked .ft-record-body:not(.ft-record-form) > * { break-inside: avoid; margin: 0 0 var(--space-md); }
.ft-record.is-stacked .ft-record-body:not(.ft-record-form) > .ft-record-sec { border-top: 0; padding-top: 0; }
.ft-record.is-stacked .ft-record-body:not(.ft-record-form) > :last-child { margin-bottom: 0; }
.ft-record.is-stacked .ft-record-collapse .icon { transform: rotate(90deg); }
.ft-record.is-stacked.is-collapsed:not(.is-editing) .ft-record-collapse .icon { transform: rotate(-90deg); }
.ft-record.is-stacked.is-collapsed:not(.is-editing) .ft-record-head { border-bottom: 0; }
.ft-record.is-stacked.is-collapsed:not(.is-editing) .ft-record-body { display: none; }
.ft-record.is-stacked.is-collapsed:not(.is-editing) .ft-record-line { display: block; padding: 0 var(--space-md) var(--space-sm); color: var(--text-secondary); }
/* Bearbeiten: Formular ueber die volle Breite, Abschnitte nebeneinander; der Reiter-Block darunter bleibt abgeblendet (wie bisher) */
.ft-record.is-stacked.is-editing { grid-template-columns: minmax(0, 1fr); }
.ft-record.is-stacked .ft-record-form form:has(> .form-section) { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--record-col-width) * 1.4), 1fr)); gap: var(--space-md) var(--space-xl); align-items: start; }
.ft-record.is-stacked .ft-record-form form:has(> .form-section) > :not(.form-section):not([type="hidden"]) { grid-column: 1 / -1; }
.ft-record.is-stacked .ft-record-form form:has(> .form-section) > .form-section { margin: 0; }
.ft-record.is-stacked .ft-record-form form > .form-actions:not(:has(> :not(.ft-save-moved))) { display: none; }   /* Speichern steht im Kopf - keine leere Zeile */
@media (max-width: 1199px) {
  .ft-record.is-stacked .ft-record-side:not(.is-open) .ft-record-body { display: none; }
  .ft-record.is-stacked .ft-record-side.is-open .ft-record-line { display: none; }
}
/* ---- Aktenkopf aus KACHELN (v1.374.0, R7 Seiten-Schema, Ralf 09.10.2026: "oben der Block immer Kacheln ... Pflichtangaben ... darunter
   Reiterblock"; render-record.php ft_head_tiles) - Variante des Bausteins in der Fassung UNTEREINANDER: der Kopf ist ein 12er-Raster,
   jede Kachel eine Flaeche wie die Summe. Ohne Layout 4 Spalten je Kachel in Lesereihenfolge; Platz aus dem Layout-Teil 'kopf' setzt
   layout.js (--ft-hx/-hy/-hw/-hh), Angaben in der Kachel wie Felder im Block (.ft-lgrid, --ft-fx ...). Unter 900 px untereinander. ---- */
.ft-record.is-stacked .ft-record-body.ft-htiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md);
  column-width: auto; column-rule: none; align-items: stretch; }
.ft-record.is-stacked .ft-record-body.ft-htiles > * { margin: 0; break-inside: auto; }
.ft-htiles > .ft-htile { grid-column: var(--ft-hx, auto) / span var(--ft-hw, 4); grid-row: var(--ft-hy, auto) / span var(--ft-hh, 1); }
.ft-htile { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--head-tile-pad);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); }
.ft-htile[hidden] { display: none; }   /* ausgeblendet (Layout) - sonst gewaenne display: flex gegen [hidden] */
.ft-htile.ft-htile-plain { padding: 0; border: 0; background: none; }
.ft-htile-plain > .ft-sum, .ft-htile-plain > .ft-print-addr { flex: 1 1 auto; margin: 0; }
.ft-htile-title { font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ft-htile-text { font-weight: 500; overflow-wrap: anywhere; }
.ft-htile-grid { row-gap: var(--space-sm); align-items: start; }
.ft-htile-grid > .ft-hpair { grid-column: span 6; min-width: 0; overflow: hidden; }   /* schmale Kachel: nichts ragt in die Nachbar-Angabe */
.ft-hpair > .ft-record-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-hpair .ft-pill { max-width: 100%; }
.ft-htile-grid > .ft-hpair.is-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .ft-htiles > .ft-htile.ft-htile { grid-column: 1 / -1; grid-row: auto; }
}
/* Mit Kacheln bleibt der Kopf bis 700 px offen (sonst unter 1200 px nur die Zeile mit "Stammdaten") - erst auf dem Handy zugeklappt */
@media (min-width: 701px) and (max-width: 1199px) {
  .ft-record.is-stacked .ft-record-side:not(.is-open) .ft-record-body.ft-htiles { display: grid; }
  .ft-record.is-stacked .ft-record-side:has(> .ft-htiles) > .ft-record-line,
  .ft-record.is-stacked .ft-record-side:has(> .ft-htiles) .ft-record-toggle { display: none; }
  .ft-record.is-stacked .ft-record-side:has(> .ft-htiles):not(.is-open) .ft-record-btns { display: flex; }
}
/* ---- Bearbeiten im Kopf (v1.375.0, S1b, Ralf 09.10.2026: "eine Ebene tiefer ... auch hier muessen wir Hand anlegen koennen!", Weg A):
   dieselben Kacheln, aus dem Wert wird ein Eingabefeld (ft_head_input: .ft-hpair-edit mit .form-group fuer Beschriftung und Feld). Der Kopf
   ist selbst das Formular (form.ft-htiles-edit), sein Speichern steht im Kartenkopf (Bedien-Muster 63). Nur-Anzeige-Angaben (Nummer,
   Vorgangsnummer, Leistungszeitraum) leicht zurueckgenommen. 901-1199 px: Kacheln sind schmal - Angaben untereinander (Reihenfolge bleibt).
   Beim Bearbeiten bleibt die Karte auf jeder Breite offen, Speichern/Abbrechen sichtbar (vorher unter 1200 px zugeklappt - Fehler, alle Akten). ---- */
.ft-htiles > .form-actions { display: none; }
.ft-htile-grid > .ft-hpair.ft-hpair-edit { margin: 0; overflow: visible; }   /* Fokus-Ring nicht abschneiden */
.ft-hpair.is-line > .ft-record-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* Betreff: eine Zeile, zu lang mit ... */
.ft-htiles-edit .ft-hpair:not(.ft-hpair-edit) > .ft-record-value { color: var(--text-secondary); }
@media (min-width: 901px) and (max-width: 1199px) {
  .ft-htiles-edit .ft-htile-grid > .ft-hpair, .ft-htiles-edit .ft-htile-grid > .ft-hpair.ft-layout-fpos.ft-layout-fpos { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 1199px) {
  .ft-record.is-editing .ft-record-side:not(.is-open) .ft-record-body.ft-htiles { display: grid; }
  .ft-record.is-editing .ft-record-side:not(.is-open) .ft-record-body.ft-record-form { display: flex; }
  .ft-record.is-editing .ft-record-side:not(.is-open) .ft-record-btns { display: flex; }
  .ft-record.is-editing .ft-record-side > .ft-record-line, .ft-record.is-editing .ft-record-toggle { display: none; }
}
/* ---- Stammdaten-Akten: FORMULAR-BLOECKE ALS KACHELN (v1.379.0, S3 Seiten-Schema, Ralf 10.10.2026: "auch fuer die Bereiche Adresse, Artikel
   usw. - Umstellung auf Kacheln/bearbeiten und der linke Block weg!"): beim Bearbeiten ist das Stammdaten-Formular selbst der Kopf
   (form.ft-htiles-edit, render-record.php ft_head_form_attr), seine Bloecke (.form-section, Anchor::headTiles) sehen aus wie die Kacheln
   der Ansicht - Titel wie .ft-htile-title ohne Symbol, Felder untereinander (Kacheln sind schmal; Felder anordnen folgt mit S3b).
   Der eigene Speichern-Knopf des Formulars steht unsichtbar im Raster - core.js spiegelt ihn in den Kartenkopf (Bedien-Muster 63). ---- */
.ft-htiles > button[type="submit"] { display: none; }
.ft-htiles > .form-section.ft-htile { margin: 0; padding: var(--head-tile-pad); border-bottom: thin solid var(--border); }   /* wie .ft-htile - auch als letzter Block (.form-section:last-of-type) */
.ft-htiles > .form-section.ft-htile > .form-section-title { margin: 0; padding: 0; border: 0; gap: var(--space-xs); flex-wrap: wrap;
  font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ft-htiles > .form-section.ft-htile > .form-section-title > .icon { display: none; }
.ft-htiles > .form-section.ft-htile > .form-section-title .ft-pill { text-transform: none; letter-spacing: 0; }
.ft-htiles > .form-section.ft-htile .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.ft-htiles > .form-section.ft-htile .form-grid > *,
.ft-htiles > .form-section.ft-htile .form-col-span-2 { grid-column: 1 / -1; }   /* auch in durchlaessigen Huellen (Anschrift: .ft-address) - sonst entstuende eine zweite, schmale Spalte */
.ft-htiles > .form-section.ft-htile .form-group { margin: 0; }
/* Handy: "Stammdaten bearbeiten" und Speichern/Abbrechen passen nicht in eine Zeile - die Knoepfe brechen unter den Titel (vorher ragten sie an den Rand) */
@media (max-width: 700px) {
  .ft-record.is-editing .ft-record-head { flex-wrap: wrap; row-gap: var(--space-sm); }
}

/* ==========================================================================================================
   15-kachel.css - BAUSTEIN: Kachel
   Zweck:   Filterkacheln gross/klein, Ebenen-Punkte, Kachel-Dialog - Name einzeilig, eine Kachelhoehe
   Praefixe: ft-lv, ft-lvl, ft-tile, ft-tiles
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 15-kachel --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ---- Filter-Kacheln (includes/render-tiles.php, T1) - seit v1.54.0 ----
   6 je Reihe ("Alle" + hoechstens 5), jede Kachel ein Link, die aktive mit Navy-Rahmen. Popup "Kacheln anpassen": Zeilen zum
   Ziehen (data-sortable, Griff .ft-drag) mit Schieber. */
.stat-grid.ft-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .stat-grid.ft-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stat-grid.ft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ft-tile { color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.ft-tile:hover { border-color: var(--ctl-border); box-shadow: var(--shadow-md); }
.ft-tile.is-active { border-color: var(--tile-navy-fg); box-shadow: inset 0 0 0 1px var(--tile-navy-fg); }
/* v1.152.0: Rahmen 1 px + Innenschatten - die Kachel wird beim Aktivieren nicht hoeher */
.ft-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tiles-bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.ft-tile-row { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin-bottom: 6px; }
.ft-tile-row.is-fixed { background: var(--bg-subtle); color: var(--text-secondary); }
.ft-tile-row .ft-tile-name { flex: 1; }
.ft-tile-row label.check { margin: 0; }
/* ---- v1.70.0: Filter-Kacheln in kleiner Fassung (Akten-Reiter, ft_filter_tiles(..., 'mini')) - klickbar, aktive Kachel mit Rahmen ---- */
a.stat-mini.ft-tile { text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--transition-fast); }
a.stat-mini.ft-tile:hover { border-color: var(--brand-primary); }
a.stat-mini.ft-tile.is-active { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
/* v1.71.0 (Ralf: "im Verhaeltnis zu den grossen mehr platzieren"): kleine Kacheln gleich breit (~2/3 der grossen, halbe Hoehe), die Reihe
   fuellt die Breite - Alle + 6 in einer Reihe bei 1500 px (Alle + 7 schnitt die Namen ab); sehr lange Namen mit "..." (Tooltip); Knopf nur als Symbol */
.ft-tiles-row { display: flex; align-items: flex-start; gap: 8px; }
.ft-tiles-row > .stat-mini-grid.ft-tiles { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));   /* v1.282.0: 145 -> 170 px, laengere Namen lesbar */ gap: 8px; margin: 0; }
.ft-tiles-row a.stat-mini.ft-tile { padding: 8px; gap: 6px; }
.ft-tiles-row a.stat-mini.ft-tile .stat-icon-sm { width: 28px; height: 28px; flex: none; }
.ft-tiles-row a.stat-mini.ft-tile { min-width: 0; }
.ft-tiles-row a.stat-mini.ft-tile > div:last-child { min-width: 0; }
/* v1.282.0 (Ralf: "in der kleinen Kachel ragt der Text ueber den Rand - Federbruch-Fangvorr..."): seit den Stufen-Punkten (v1.161.0) ist
   der Text-Block nicht mehr das letzte Kind - die Regel darueber griff nicht mehr. Jetzt: Text-Block darf schrumpfen, Name endet mit
   "...", der volle Name steht im Tooltip (title der Kachel) */
.ft-tiles-row a.stat-mini.ft-tile > div:not([class*="stat-icon"]) { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ft-tiles-row .stat-mini-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tiles-row .ft-tiles-btn { flex: none; width: 32px; padding: 0; justify-content: center; }
.stat-grid.ft-tiles + .ft-page-bar, .ft-tiles-bar + .stat-grid.ft-tiles { margin-top: 0; }
.ft-tile .ft-tile-body { min-width: 0; flex: 1 1 auto; }
/* v1.316.1: Textblock (feste Klasse, unabhaengig von den Ebenen-Punkten dahinter) nimmt den freien Platz - Voraussetzung fuers Kuerzen */
/* v1.316.0 (Ralf: "wie bei den kleinen Kacheln - lange Namen nicht ueber die Kachel hinaus, aber auch ohne Zeilenumbruch; sonst zwei
   Kachelhoehen, das flackert beim Hin- und Herschalten - simultan im Kundenportal"): Name EINZEILIG mit "...", voller Name als Tooltip
   (title). Ersetzt die Umbruch-Regel aus v1.151.0. Gilt ueber app.css.php auch im Kundenportal (gleiche Funktion ft_tile_html). */
.stat-card.ft-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v1.152.0: Unterebene (Untergruppen) */
/* v1.152.0: Kachelbreite - hoechstens 6 je Reihe (Alle + 5), nie schmaler als 215 px (darunter liefen lange Namen wie
   "teilweise weitergefuehrt" ueber); reicht die Breite nicht, rutschen Kacheln in die naechste Reihe */
.stat-grid.ft-tiles { --tile-gap: var(--space-md); gap: var(--tile-gap); grid-template-columns: repeat(auto-fill, minmax(max(215px, calc((100% - 5 * var(--tile-gap)) / 6)), 1fr)); }
/* v1.161.0 STUFEN-PUNKTE (Bedien-Muster 86, ft_tile_level): Ebene im Baum oben rechts in der Kachel - gefuellt = Ebene, leer = tiefer moeglich */
.ft-tile { position: relative; }
.ft-lvl { position: absolute; top: 8px; right: 9px; display: inline-flex; gap: 3px; padding: 3px; cursor: help; }
.ft-lvl i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.ft-lvl i.on { background: var(--ft-navy); }
[data-theme="dark"] .ft-lvl i.on { background: var(--ft-yellow); }
.stat-mini.ft-tile .ft-lvl { top: 5px; right: 6px; }
.stat-mini.ft-tile .ft-lvl i { width: 6px; height: 6px; }
/* Maskenbau F2 (v1.271.0, Ralf: "bestimmte Bloecke nur noch umswitchen"): Feld-Darstellung "kompakt" - Beschriftung links neben dem Feld
   (Richtung easyWinArt), Schalter-Felder (label.check) bleiben wie sie sind; schmal (unter 700 px) wieder Beschriftung oben */
.ft-lv-kompakt .form-group:has(> label:not(.check)) { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-sm); }
.ft-lv-kompakt .form-group { margin-bottom: var(--space-sm); }
/* v1.273.0: eigene Regel mit Gewicht 0,2,0 - die Abstands-Stufen stehen spaeter und gewinnen */
.ft-lv-kompakt .form-group > label:not(.check) { flex: 0 0 38%; max-width: 38%; margin: 0; }
.ft-lv-kompakt .form-group > label:not(.check) ~ * { flex: 1 1 6rem; min-width: 0; }
/* zu schmale Zelle: Feld rutscht unter die Beschriftung statt zu quetschen */
.ft-lv-kompakt .form-group > label:not(.check) ~ .form-hint { flex: 1 0 100%; }
@media (max-width: 700px) {
  .ft-lv-kompakt .form-group:has(> label:not(.check)) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* v1.373.0: nowrap - sonst rutschte der Hinweis (KW) als 2. Spalte rechts aus dem Feld */
  .ft-lv-kompakt .form-group > label:not(.check) { flex-basis: auto; max-width: none; }
  .ft-lv-kompakt .form-group > label:not(.check) ~ * { flex: 0 0 auto; }   /* v1.373.0 (Handy-Vorschau): untereinander war 6rem die HOEHE - Felder 96 px hoch */
  .ft-lv-kompakt .form-group > label:not(.check) ~ .form-hint { flex: 0 0 auto; }
}
/* v1.281.0 (Ralf 05.10.2026, Kachel-Filter als Pfad): ist eine Kachel gewaehlt, steht oben nur "Alle" und der gewaehlte Pfad (render-tiles.php,
   'narrow') - zwischen den Kacheln ein Pfeil im Abstand der Reihe; die Punkte (Ebene) bleiben wie gehabt */
.stat-grid.ft-tiles-path > .ft-tile { position: relative; }
.stat-grid.ft-tiles-path > .ft-tile + .ft-tile::before { content: "›"; position: absolute; top: 50%; left: calc(-1 * var(--space-md)); width: var(--space-md);
  transform: translateY(-50%); text-align: center; font-size: var(--font-lg); line-height: 1; color: var(--text-muted); pointer-events: none; }
/* v1.282.0 (Ralf: "Alle und Hersteller ... vom Platz her so verteilt wie die grosse Kachel - gleiche Breite/Hoehe, auf den Platz zugeschnitten"):
   zwei kleine Kacheln uebereinander im Platz EINER grossen (erste Zelle der Kachel-Reihe), zusammen so hoch wie die Reihe */
.stat-grid.ft-tiles > .ft-tile-modes { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.ft-tile-modes > a.stat-mini.ft-tile { flex: 1 1 0; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; min-height: 0; padding: 8px 12px; }
.ft-tile-modes > a.stat-mini.ft-tile > div:not([class*="stat-icon"]) { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ft-tile-modes .stat-mini-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid.ft-tiles-path > .ft-tile-modes + .ft-tile { position: relative; }
.stat-grid.ft-tiles-path > .ft-tile-modes + .ft-tile::before { content: "›"; position: absolute; top: 50%; left: calc(-1 * var(--space-md)); width: var(--space-md);
  transform: translateY(-50%); text-align: center; font-size: var(--font-lg); line-height: 1; color: var(--text-muted); pointer-events: none; }

/* ==========================================================================================================
   16-pille.css - BAUSTEIN: Pille
   Zweck:   Status-Pillen in 5 Toenen, Zaehler, alte badge-Klassen
   Praefixe: badge, ft-locked, ft-pill, pill
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 16-pille --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   8. BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}
.badge-success, .badge-active, .badge-confirmed { background: var(--success-light); color: var(--success-text); }
.badge-warning, .badge-trial, .badge-in_progress { background: var(--warning-light); color: var(--warning-text); }
.badge-danger, .badge-suspended, .badge-cancelled { background: var(--danger-light); color: var(--danger-text); }
.badge-info, .badge-open, .badge-planned, .badge-scheduled { background: var(--info-light); color: var(--info-text); }
.badge-neutral, .badge-completed { background: var(--bg); color: var(--text-secondary); }
/* Auftrags-Status: Farbe je semantischer Kategorie. Zuordnung Code -> Kategorie
   in includes/RequestStatus.php. Nutzt die Farb-Tokens -> Light/Dark automatisch. */
.badge-status-new         { background: var(--bg);            color: var(--text-secondary); }
.badge-status-planned     { background: var(--accent-light);  color: var(--accent-text); }
.badge-status-in_progress { background: var(--warning-light); color: var(--warning-text); }
.badge-status-done        { background: var(--success-light); color: var(--success-text); }
.badge-status-closed      { background: var(--info-light);    color: var(--info-text); }
.badge-status-cancelled   { background: var(--danger-light);  color: var(--danger-text); }
.badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.badge-success .badge-dot, .badge-active .badge-dot { background: var(--success); }
.badge-warning .badge-dot, .badge-trial .badge-dot  { background: var(--warning); }
.badge-danger .badge-dot, .badge-suspended .badge-dot { background: var(--danger); }
.badge-info .badge-dot   { background: var(--info); }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}
.pill:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}
.pill.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.pill-sm { padding: 4px 10px; font-size: var(--font-xs); }
.pill-count {
    font-size: var(--font-xs);
    opacity: 0.7;
}
/* PS1 (v1.263.0): Einstellungen -> Status-Anzeigen - Zeilen wie "Spalten festlegen" mit zwei festen Spalten (Ort in der Liste, Akte) */
.ft-pill-row .ft-pill-place { width: 210px; flex: none; }
.ft-pill-row .ft-pill-place select { width: 100%; }
.ft-pill-row .ft-pill-card { width: 60px; flex: none; text-align: center; }
.ft-pill-head { display: flex; align-items: center; gap: var(--space-sm); padding: 0 10px 6px calc(10px + 16px + var(--space-sm)); }
@media (max-width: 560px) {
  .ft-pill-row { flex-wrap: wrap; }
  .ft-pill-row .ft-pill-place { width: auto; flex: 1 1 160px; }
}
/* v1.148.0: Kennzeichen mit Ziel sichtbar anklickbar */
/* ---- Zahlungsbedingungen / Zahlungsarten (v1.57.0) ----
   Gesperrte Werte in der Akte (kommen aus der gewaehlten Bedingung, aendern nur ueber das Zahnrad); Stern = Standard in den Listen */
.ft-locked { position: relative; }
.ft-locked .ico, .ft-locked svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.ft-locked-hint { display: flex; align-items: center; gap: 6px; margin-top: calc(-1 * var(--space-sm)); }
/* v1.85.3 (Ralf, Bedien-Muster 41): Pille mit hinterlegtem Symbol - Symbol vor dem Text, senkrecht mittig (ft_badge) */
.badge.badge-ico { display: inline-flex; align-items: center; gap: 4px; }
.badge.badge-ico > .icon { display: inline-flex; flex: none; }
.badge-xs { font-size: .65rem; padding: .1rem .35rem; margin-left: .3rem; }
/* Wertzeile unter einem Feld (ft_value_hint, Bedien-Muster 58) - zaehlt nicht als Hinweiszeile */
/* ============================================================
   v1.150.0 GLOBALE PILLEN-REGEL (Ralf 01.10.2026, Bedien-Muster 79) - steht bewusst am Ende und gilt fuer JEDE Pille:
   .ft-pill (Baustein StatusPill), .ft-hp (Kopf-Pillen), .badge (Altbestand, z. B. Zaehler in Reitern). Ein Aufbau: Symbol + Text,
   eine Hoehe, eine Schrift, ein Rand, fuenf Toene. Groessen-Varianten (badge-sm, badge-xs) gibt es nicht mehr - nicht neu anlegen.
   ============================================================ */
.ft-pill, .ft-hp, .badge {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    padding: 1px 9px 1px 7px; margin: 0; border-radius: var(--radius-full); border: 1px solid transparent;
    font-size: var(--font-xs); font-weight: 600; line-height: 1.6; letter-spacing: 0; white-space: nowrap;
}
.ft-pill > .icon, .ft-hp > .icon, .badge > .icon { display: inline-flex; flex: none; }
.ft-pill > .icon svg, .ft-hp > .icon svg, .badge > .icon svg { width: 15px; height: 15px; }
.badge.badge-sm, .badge.badge-xs { font-size: var(--font-xs); padding: 1px 9px 1px 7px; margin-left: 0; }
.ft-pill-count, .badge:not([class*="badge-"]) { padding: 1px 8px; }
.ft-pill-ok, .ft-hp-ok, .badge-success, .badge-active, .badge-confirmed, .badge-status-done
    { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); }
.ft-pill-info, .ft-hp-info, .badge-info, .badge-open, .badge-planned, .badge-scheduled, .badge-status-closed
    { background: var(--info-light); color: var(--info-text); border-color: var(--info-border); }
.ft-pill-warn, .ft-hp-warn, .badge-warning, .badge-trial, .badge-in_progress, .badge-status-in_progress
    { background: var(--warning-light); color: var(--warning-text); border-color: var(--warning-border); }
.ft-pill-danger, .ft-hp-danger, .badge-danger, .badge-suspended, .badge-cancelled, .badge-status-cancelled
    { background: var(--danger-light); color: var(--danger-text); border-color: var(--danger-border); }
.ft-pill-neutral, .ft-hp-neutral, .badge-neutral, .badge-completed, .badge-status-new
    { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
.badge-status-planned { background: var(--accent-light); color: var(--accent-text); border-color: var(--accent-light); }

/* ==========================================================================================================
   17-popup.css - BAUSTEIN: Popup und Meldung
   Zweck:   Popup (modal), Rueckfrage, Ladeanzeige, Meldungen (toast)
   Praefixe: ft-ask, ft-busy, ft-modal, modal, toast
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 17-popup --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.38.1: als Schieber ueberschrieben, siehe unten */
/* ============================================================
   12. TOASTS
   ============================================================ */
.toast-container {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 380px;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    font-size: var(--font-sm);
    font-weight: 500;
    animation: toastSlideIn 0.3s ease;
    min-width: 280px;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-success .icon { color: var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-error .icon { color: var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-warning .icon { color: var(--warning); }
.toast-info    { border-left: 3px solid var(--brand-primary); }
.toast-info .icon { color: var(--brand-primary-text); }
.toast.removing { animation: toastSlideOut 0.3s ease forwards; }
/* ============================================================
   12b. RUECKFRAGE (v1.14.0) - eigener Dialog statt Browser-confirm(); Frage fett, Beschreibung normal
   ============================================================ */
.ft-ask { position: fixed; inset: 0; background: var(--overlay); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ft-ask[hidden] { display: none; }
.ft-ask-box { width: min(460px, 100%); background: var(--card-bg); color: var(--text); border-radius: var(--radius-lg); padding: 22px 24px 18px; box-shadow: var(--shadow-xl); }
.ft-ask-title { margin: 0; font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.ft-ask-desc { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.ft-ask-desc[hidden] { display: none; }
.ft-ask-input { width: 100%; margin-top: 12px; }
.ft-ask-input[hidden] { display: none; }
.ft-ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* ============================================================
   13. MODALS
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}
.modal-backdrop.visible { opacity: 1; visibility: visible; }
.modal {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 95%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--transition-normal);
}
.modal-backdrop.visible .modal { transform: none; }
/* v1.310.0: KEIN Rest-transform im offenen Popup - sonst rechnet position:fixed (Hilfe-Blase .ft-help-pop) relativ zum Popup und landet am Bildschirmrand */
/* v1.421.0 (Ralf 11.10.2026 "fehler gleich beheben"): Felder im Popup AUSSERHALB von .form-group (Mengen in Popup-Tabellen: Weiterfuehren,
   Uebernehmen, Verknuepfen, Rest erledigen) - das Popup haengt am body, die Feldregel der Grundlage (:where(.main-content ...)) greift dort nicht;
   sie waren ungestaltet und im Dunkelmodus weiss. Gleiche Werte wie die Grundlage, :where() = Spezifitaet 0 (gezielte Regeln gewinnen). */
:where(.modal) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) {
    height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: var(--font-sm);
}
:where(.modal) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--ft-yellow); box-shadow: var(--focus-ring); }
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 700px; }
.modal-xl { max-width: 900px; }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-size: var(--font-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.modal-close {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    font-size: var(--font-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}
.modal-close:hover { background: var(--hover-bg); color: var(--text); }
.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    max-height: 60vh;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}
.ft-modal { position: fixed; inset: 0; background: rgba(18,49,77,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ft-modal[hidden] { display: none; }
.ft-modal-box { width: min(960px, 100%); height: min(88vh, 900px); background: var(--card-bg); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ft-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--brand-primary-text); }
.ft-modal-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-modal-head button { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }
/* v1.34.0: Popup-Erfassung (data-modal) - Quelle bleibt versteckt; Hauptkontakt als gefuellter Stern */
.ft-modal-src { display: none; }
.modal-body .form-grid { grid-template-columns: 1fr 1fr; }
.modal-body .form-hint { display: block; }
/* v1.35.3 (Ralf): Popup waechst mit dem Inhalt - keine zwei Scrollleisten. Der Hintergrund scrollt als Ganzes, wenn das Fenster
   hoeher als der Bildschirm ist; das Suchfeld-Menue ragt frei aus dem Fenster. */
.modal-backdrop { align-items: flex-start; overflow-y: auto; padding: 5vh 0; }
.modal { max-height: none; overflow: visible; margin: auto 0; }
.modal-body { max-height: none; overflow: visible; }
.modal-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.modal-footer { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.modal-body .form-section.ft-acc { margin-bottom: var(--space-sm); }
/* erbt ODER Zuruecksetzen - nie beides (hidden gegen display:inline-flex) */
/* ---- Ladeanzeige (assets/js/busy.js) - seit v1.84.0, Ralf 29.09.2026: "damit der User weiss, es passiert was" ----
   Balken oben (Takt-Gelb), Kreisel im Knopf und im Suchfeld, Hinweis ueber dem Inhalt ab 400 ms. Gleiche Regeln wie admin.css. */
.ft-busy-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand-accent); z-index: 10000; opacity: 0; pointer-events: none; }
.ft-busy-bar.is-on { opacity: 1; animation: ft-busy-grow 8s cubic-bezier(.1, .7, .3, 1) forwards; }
.ft-busy-bar.is-done { opacity: 0; width: 100%; transition: width .2s, opacity .3s .2s; }
.ft-busy-ov { position: fixed; inset: 0; z-index: 9990; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--brand-primary); font-size: var(--font-md); text-align: center; padding: 24px; }
.ft-busy-ov.is-on { display: flex; }
.ft-busy-spin { will-change: transform; width: 36px; height: 36px; border: 3px solid var(--brand-accent); border-right-color: transparent; border-radius: 50%; animation: ft-busy-spin .8s linear infinite; }
.ft-busy-title { font-weight: 600; }
.ft-busy-hint { font-size: var(--font-sm); color: var(--text-muted); }
.ft-busy-sp { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ft-busy-spin .7s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) {
  /* "weniger Bewegung" (Windows: Animationseffekte aus): Balken steht, Kreisel dreht LANGSAMER statt gar nicht - ein stehender
     Kreis sagt nichts (v1.84.1/v1.123.1, Ralf: "der Kreis dreht sich nicht"). Drehung ueber transform = laeuft auch waehrend des Ladens. */
  .ft-busy-bar.is-on { animation: none; width: 100%; opacity: .8; }
  .ft-busy-spin, .ft-busy-sp, .search-box.is-busy::after { animation-duration: 1.6s; }
}

/* v1.442.0 (GS1, Ralf 13.10.2026 "global suchen ... seitliches Fenster wie ein Chat"): Variante SEITENFENSTER des Popups - klappt rechts auf,
   bleibt beim Seitenwechsel offen (core.js ftSearch), liegt unter Popups und Meldungen. Hell und Dunkel ueber die Variablen. */
.ft-modal-side { position: fixed; top: 0; right: 0; bottom: 0; width: var(--side-panel-width); max-width: 100%; z-index: 8500; display: flex; flex-direction: column;
    background: var(--card-bg); border-left: thin solid var(--border); box-shadow: var(--shadow-xl); font-size: var(--font-sm); }
.ft-modal-side[hidden] { display: none; }
.ft-modal-side-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: thin solid var(--border); }
.ft-modal-side-head h3 { flex: 1; margin: 0; display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-base); }
.ft-modal-side-top { padding: var(--space-sm) var(--space-md); border-bottom: thin solid var(--border); }
.ft-modal-side-top .form-group { margin: 0; }
.ft-modal-side-body { flex: 1; overflow: auto; padding: var(--space-xs) var(--space-md) var(--space-md); }
.ft-modal-side-foot { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: thin solid var(--border); color: var(--text-secondary); font-size: var(--font-xs); }
.ft-modal-side-grp { margin-top: var(--space-md); }
.ft-modal-side-grp > h4 { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-xs); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.ft-modal-side-hit { display: block; padding: var(--space-sm); margin-bottom: var(--space-xs); border: thin solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: inherit; text-decoration: none; }
.ft-modal-side-hit:hover, .ft-modal-side-hit.is-active { border-color: var(--brand-primary-text); text-decoration: none; }
.ft-modal-side-hit-t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-weight: 600; }
.ft-modal-side-hit-s { margin-top: var(--space-xs); color: var(--text-secondary); font-size: var(--font-xs); overflow-wrap: anywhere; }
.ft-modal-side-hit mark { background: var(--warning-light); color: inherit; border-radius: var(--radius-sm); padding: 0 var(--space-xs); }
.ft-modal-side-more { background: none; border: 0; padding: 0; color: var(--brand-primary-text); font-size: var(--font-xs); cursor: pointer; }
.ft-modal-side-empty { margin-top: var(--space-md); color: var(--text-secondary); }
@media (max-width: 768px) { .ft-modal-side { width: 100%; } }

/* H1 (v1.458.0, Ralf 14.10.2026 - Wiedervorlagen-Konzept WV-D "Karte unten rechts + Glocke", Vorschau "passt"): Hinweise.
   Glocke im Seitenkopf mit Zaehler, Tafel darunter (letzte Hinweise, ungelesene fett mit Rand), Karten unten rechts (bleiben stehen, bis
   gelesen; weggeklickt kommen sie wieder). Baustein: includes/render-notify.php, Verhalten core.js "Hinweise", Mustertafel "Hinweise". */
.ft-notify-wrap { position: relative; display: inline-flex; }
.ft-notify-bell { position: relative; }
.ft-notify-badge { position: absolute; top: -0.2rem; right: -0.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; box-shadow: 0 0 0 2px var(--card-bg); border-radius: var(--radius-full); background: var(--danger); color: var(--card-bg); font-size: var(--font-xs); font-weight: 700; line-height: 1.1rem; text-align: center; }
.ft-notify-badge[hidden] { display: none; }
.ft-notify-panel { position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: 900; width: 24rem; max-width: calc(100vw - 2 * var(--space-md)); max-height: 70vh; overflow: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.ft-notify-panel[hidden] { display: none; }
.ft-notify-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--font-sm); }
.ft-notify-item { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); border-left: 3px solid transparent; color: inherit; text-decoration: none; font-size: var(--font-sm); }
.ft-notify-item:hover { background: var(--hover-bg); }
.ft-notify-item.is-unread { border-left-color: var(--brand-primary); }
.ft-notify-item.is-unread .ft-notify-title { font-weight: 600; }
.ft-notify-text { display: flex; flex-direction: column; min-width: 0; }
.ft-notify-meta { color: var(--text-muted); font-size: var(--font-xs); }
.ft-notify-empty { padding: var(--space-md); margin: 0; }
.ft-notify-foot { display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-md); }
.ft-notify-cards { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 950; display: flex; flex-direction: column; gap: var(--space-sm); width: 25rem; max-width: calc(100vw - 2 * var(--space-md)); }
.ft-notify-card { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: toastSlideIn 0.3s ease; }
.ft-notify-card-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) 0 var(--space-md); }
.ft-notify-card-head strong { flex: 1; min-width: 0; }
.ft-notify-card-body { padding: var(--space-xs) var(--space-md) 0; font-size: var(--font-sm); }
.ft-notify-card-meta { padding: var(--space-xs) var(--space-md) 0; color: var(--text-muted); font-size: var(--font-xs); }
.ft-notify-card-foot { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-md); }
@media print { .ft-notify-cards, .ft-notify-panel { display: none !important; } }

/* ==========================================================================================================
   18-reiter.css - BAUSTEIN: Reiter und Akkordeon
   Zweck:   Reiterleiste, Akkordeon, Speicherleiste im Akkordeon
   Praefixe: accordion, ft-acc, tab, tabs
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 18-reiter --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   ACCORDION (global wiederverwendbar)
   ============================================================
   Verwendung:
   <div class="accordion">
     <div class="accordion-item open">
       <button class="accordion-header">
         <span class="accordion-title">Titel</span>
         <span class="accordion-chevron"><svg ...></span>
       </button>
       <div class="accordion-body">Inhalt</div>
     </div>
   </div>
   ============================================================ */
.accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.accordion-item {
    border-bottom: 1px solid var(--border);
}
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-subtle);
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
    transition: background var(--transition-fast);
    text-align: left;
    gap: 8px;
}
.accordion-header:hover {
    background: var(--bg-hover);
}
.accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.accordion-badge {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}
.accordion-chevron {
    display: flex;
    align-items: center;
    transition: transform var(--transition-fast);
    color: var(--text-muted);
}
.accordion-item:not(.open) .accordion-chevron {
    transform: rotate(-180deg);
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.accordion-item.open > .accordion-body {
    max-height: 2000px;
}
/* Varianten */
.accordion-flush {
    border: none;
    border-radius: 0;
}
.accordion-flush .accordion-item {
    border-bottom: 1px solid var(--border-light);
}
.accordion-flush .accordion-item:last-child { border-bottom: none; }
.accordion-flush .accordion-header {
    padding: 10px 16px;
}
/* Kompakt (weniger Padding) */
.accordion-sm .accordion-header {
    padding: 8px 12px;
    font-size: var(--font-xs);
}
.ft-acc-bar { margin-bottom: var(--space-sm); justify-content: flex-end; }
.ft-acc-bar { justify-content: flex-end; margin-bottom: var(--space-md); }
/* ---- Speichern-Leiste (v1.62.0, Bedien-Muster 29, core.js ftInitSaveBar): links Speichern, rechts "Alle auf-/zuklappen" ---- */
.ft-acc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.ft-acc-bar .ft-acc-left { display: flex; align-items: center; gap: var(--space-sm); }
.ft-acc-bar .ft-acc-right { margin-left: auto; }
/* ---- v1.64.0 (Ralf, Bedien-Muster 30): Reiterleiste mit engeren Abstaenden; die Knoepfe rechts stehen fest daneben (nicht absolut).
   v1.347.0 (Ralf 07.10.2026: "wenn die Liste - Icon + Text - zu lang wird, muss ein 2. Zeilenumbruch stattfinden!!!"): reicht der Platz
   nicht, BRICHT der Reiter-Bereich (.tabs-scroll, render_tabs) in eine zweite Reihe um - global in jeder Reiterleiste, kein waagerechtes
   Scrollen und kein weiches Auslaufen mehr (vorher nur in der Akte .ft-record, 14-karte). Ein Reiter selbst bleibt einzeilig (Symbol +
   Name nie getrennt). Die Knoepfe rechts (Zahnrad, Rechte, Schieber) bleiben oben auf Hoehe der ersten Reihe. Die Grundlinie ist ein
   innerer Schatten der Leiste. ---- */
.tabs-bar:has(> .tabs-scroll) { flex-wrap: nowrap; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--border); padding-right: var(--space-sm); gap: var(--space-sm); }
/* die alten Platzhalter fuer absolut gesetzte Knoepfe (components/tabs.css, Gewicht 0,3,0, wird NACH styles.css geladen) gelten hier
   nicht - deshalb hoeher gewichtet (0,4,0, Klasse doppelt), ohne !important */
.tabs-bar.tabs-bar:has(> .tabs-scroll):has(> .tabs-right) { padding-right: var(--space-sm); }
.tabs-bar > .tabs-scroll { display: flex; flex-wrap: wrap; align-items: stretch; align-self: stretch; gap: 0; flex: 1 1 auto; min-width: 0; overflow: visible; }
.tabs-bar > .tabs-scroll > .tab-link { margin-bottom: 0; padding: 12px 8px; gap: 6px; white-space: nowrap; flex: none; min-height: var(--tab-row-h); }
.tabs-bar:has(> .tabs-scroll) > .tabs-right { position: static; flex: none; margin-left: auto; display: flex; gap: 6px; align-items: center; align-self: flex-start; height: var(--tab-row-h); }
.tab-content .ft-pg-hide { display: none; }
/* v1.86.0 (Ralf, Bedien-Muster 42): Reiter "Nur Symbole" - Schieber rechts in jeder Reiterleiste, gemerkt je Benutzer. Der Name bleibt
   fuer Screenreader im Text und erscheint beim Ueberfahren als Tooltip (title). */
.tabs-bar .tabs-right .tabs-mode { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 0; font-size: 13px; white-space: nowrap; color: var(--text-secondary); cursor: pointer; }
.tabs-bar.tabs-icons .tab-link .tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tabs-bar.tabs-bar.tabs-icons > .tabs-scroll > .tab-link { padding-left: 12px; padding-right: 12px; }
.tabs-bar .tabs-right .tab-danger-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0 4px 0 0;
    border: 1px solid transparent; border-radius: var(--radius-md); color: var(--danger); }
.tabs-bar .tabs-right .tab-danger-ico:hover { background: var(--danger-light); border-color: var(--danger-border); color: var(--danger); }
.tabs-bar .tabs-right .tab-danger-ico.active { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
/* v1.86.2 (Ralf): Aktivitaeten als Symbol (Verlauf/Logs) rechts vor dem Muelleimer */
.tabs-bar .tabs-right .tab-side-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0 4px 0 0;
    border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--brand-primary-text); background: var(--card-bg); }   /* v1.373.0: --brand-primary-text - dunkel war das Symbol unsichtbar */
.tabs-bar .tabs-right .tab-side-ico:hover { border-color: var(--brand-primary); }
.tabs-bar .tabs-right .tab-side-ico.active { border-color: var(--brand-accent); box-shadow: inset 0 -3px 0 var(--brand-accent); }
/* v1.93.0 (Ralf: "schlanker"): Schieber neben "Speichern" - [data-savebar] in der Speichern-Leiste, eine Reihe mit dem Knopf */
.ft-acc-bar .ft-acc-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.ft-acc-bar .ft-acc-left > .form-group[data-savebar] { margin: 0; }
.ft-acc-bar .ft-acc-left > .form-group[data-savebar] .check { margin: 0; white-space: nowrap; }
.ft-acc-bar .ft-acc-left > .form-group[data-savebar] .form-hint { display: none; }
/* ---- Maskenbau F1 (v1.270.0, Ralf 05.10.2026: "das ist noch zu grob ... Zeilen und Spalten ... Datenkonsistenz zu 100 %") ----
   BUEHNE: der Reiter-Bereich als EIN 12er-Raster (assets/js/layout.js, ftLayout.stage). Formulare darauf sind nur fuers Auge
   durchlaessig (display: contents) - im DOM bleibt jedes Feld in seinem Formular. Gewichte: Buehnen-Regeln 0,3,0 gegen
   .mt-md / .form-section.ft-acc (0,1,0 / 0,2,0); die Formular-Regeln der Akte schliessen .ft-stage-pass aus (CSS-Muster 9). */
.tab-content.ft-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.tab-content.ft-stage .ft-stage-pass { display: contents; }
.tab-content.ft-stage .ft-stage-pass[hidden] { display: none; }
/* ein loser Knopf wird nicht ueber die Zeile gestreckt */
.tab-content.ft-stage .ft-stage-blk { margin: 0; min-width: 0; }
.tab-content.ft-stage .ft-layout-voll { align-self: stretch; }
.tab-content.ft-stage > .ft-stage-tail, .tab-content.ft-stage .ft-stage-pass > .ft-stage-tail { order: 9999; }
@media (max-width: 1399px) {
  /* schmaler: Vorgabe-Breiten wie bisher ab 1400 px untereinander, eigene Breiten und Zeilen ab 900 px, Felder ab 700 px */
  .tab-content.ft-stage .ft-ldef { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tab-content.ft-stage .ft-stage-blk { grid-column: 1 / -1; grid-row-end: auto; }
}
.tab-content.ft-stage .ft-stage-blk.ft-lmt-kein { margin-top: 0; }
.tab-content.ft-stage .ft-stage-blk.ft-lmt-klein { margin-top: var(--space-xs); }
.tab-content.ft-stage .ft-stage-blk.ft-lmt-mittel { margin-top: var(--space-md); }
.tab-content.ft-stage .ft-stage-blk.ft-lmt-gross { margin-top: var(--space-xl); }
.tab-content.ft-stage .ft-stage-blk.ft-lmb-kein { margin-bottom: 0; }
.tab-content.ft-stage .ft-stage-blk.ft-lmb-klein { margin-bottom: var(--space-xs); }
.tab-content.ft-stage .ft-stage-blk.ft-lmb-mittel { margin-bottom: var(--space-md); }
.tab-content.ft-stage .ft-stage-blk.ft-lmb-gross { margin-bottom: var(--space-xl); }
/* v1.277.0 (Ralf: "Speichern-Button ... alles einheitlich"): Speichern-Leiste je Akte unten (Layout 'speichern': 'unten') - auf der Buehne
   hinter allen Bloecken; Standard bleibt oben (Bedien-Muster 29). In der Werkstatt-Leiste die Auswahl dafuer */
.tab-content.ft-stage .ft-acc-bar.ft-savebar-unten, .ft-acc-bar.ft-savebar-unten { order: 99999; margin: var(--space-md) 0 0; }

/* ==========================================================================================================
   19-hinweis.css - BAUSTEIN: Hinweis
   Zweck:   Hinweis-Kaesten info/erfolg/warnung/fehler
   Praefixe: alert
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 19-hinweis --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   15. ALERTS & EMPTY STATE
   ============================================================ */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: var(--font-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.alert-success { background: var(--success-light); color: var(--success-text); border: 1px solid var(--success-border); }
.alert-error   { background: var(--danger-light); color: var(--danger-text); border: 1px solid var(--danger-border); }
.alert-warning { background: var(--warning-light); color: var(--warning-text); border: 1px solid var(--warning-border); }
.alert-info    { background: var(--info-light); color: var(--info-text); border: 1px solid var(--info-border); }

/* v1.367.0 BAUSTEIN Achtung-Leiste (Ralf 08.10.2026: "muss oben permanent stehen - kann man uebersehen, wenn man gerade abgelenkt war;
   als feste CSS-Regel aufnehmen"): rot, im Seitenkopf (der beim Scrollen festgehalten wird; Umbruch des Kopfs: 00-grundlage .content-header.has-attn) ueber die ganze Breite, beginnt mit "ACHTUNG",
   nicht wegklickbar. Nur ueber ft_attention() / $pageAttention (includes/render-attention.php). */
.ft-attn { flex: 1 0 100%; order: 10; display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 2px solid var(--danger); border-left-width: 0.4rem; border-radius: var(--radius-md); background: var(--danger-light); color: var(--text); font-size: var(--font-sm); line-height: 1.5; }
.ft-attn > .icon { color: var(--danger); flex: 0 0 auto; margin-top: 0.1rem; }
.ft-attn + .ft-attn { margin-top: calc(-1 * var(--space-xs)); }
.ft-attn-body { flex: 1 1 auto; min-width: 0; }
.ft-attn-label { display: inline-block; margin-right: var(--space-xs); padding: 0 var(--space-xs); border-radius: var(--radius-sm); background: var(--danger); color: #fff; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ft-attn-text a { font-weight: 600; }

/* ==========================================================================================================
   20-auswahlkarte.css - BAUSTEIN: Auswahlkarte
   Zweck:   Grosse Auswahlkacheln mit Symbol, Titel und Beschreibung (Rollenwahl, Piktogramm-Stil, Paketwahl) - eine ist gewaehlt
   Praefixe: role
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 20-auswahlkarte --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   ROLE PICKER
   ============================================================ */
.role-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-sm);
}
.role-card {
    cursor: pointer;
    display: block;
}
.role-card input { display: none; }
.role-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    transition: all var(--transition-fast);
    text-align: center;
}
.role-card:hover .role-card-inner { border-color: var(--brand-primary); background: var(--hover-bg); }
.role-card.selected .role-card-inner { border-color: var(--brand-primary); background: var(--brand-primary-light); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); }
.role-icon { font-size: var(--font-xl); display: flex; }
.role-name { font-weight: 600; font-size: var(--font-sm); }
.role-desc { font-size: var(--font-xs); color: var(--text-muted); line-height: 1.3; }
@media (max-width: 768px) {
  .role-picker { grid-template-columns: 1fr 1fr; }
}
/* ---- Rollen einer Adresse (A2, includes/AddressRoles.php) - seit v1.59.0 ----
   Je Rolle eine Zeile: Schieber + Symbol + Name | unsere Nummer | Meine Nr. bei ihm */
.role-grid { display: grid; gap: 6px; }
.role-grid-head, .role-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
/* v1.59.2: halbe Breite (rechte Spalte) */
.role-grid-simple .role-row { grid-template-columns: 1fr; }
.role-row:not(:has(input[type="checkbox"]:checked)) input[type="text"] { opacity: .45; }
/* nicht gewaehlte Rolle: Nummern abgeblendet */
.role-row:not(:has(input[type="checkbox"]:checked)) input[type="text"]:focus { opacity: 1; }
.role-grid-head span { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.role-row label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.role-checks { display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); }
.role-checks label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 720px) {
  .role-grid-head { display: none; }
  .role-row { grid-template-columns: 1fr; }
}
/* v1.225.0: Versionsnummer neben Abmelden (wie Schaltzentrale) */
.role-card-locked { opacity: .45; cursor: not-allowed; }
/* v1.226.0: letzter Admin - andere Rollen gesperrt */
.role-card-locked * { pointer-events: none; }

/* ==========================================================================================================
   21-zeitleiste.css - BAUSTEIN: Zeitleiste
   Zweck:   Tagesverlauf als waagerechter Balken (SVG aus ft_timebar(), includes/render-timebar.php): Auftragszeit, Fahrt, Pause, nicht
            zuordenbare Zeit, Zeit ausserhalb des Arbeitstags - dazu die Legende (ft_timebar_legend). Positionen stehen als SVG-Attribute
            (x/width in Minuten), Farben nur hier aus variables.css.
   Praefixe: ft-timebar, tb
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 21-zeitleiste --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - neu mit tenant v1.494.0 (Serviceauftraege SA3a, Ralf 06.11.2026 SB-E12 "ok hoert sich gut an")
   ========================================================================================================== */

.ft-timebar { display: block; width: 100%; min-width: calc(var(--space-2xl) * 3); height: calc(var(--space-sm) + var(--space-xs)); border-radius: var(--radius-full); overflow: hidden; }
.ft-timebar .tb-bg { fill: var(--border); }
.ft-timebar .tb-tick { fill: var(--card-bg); fill-opacity: .6; }
.ft-timebar .tb-idle { fill: var(--text-muted); fill-opacity: .6; }
.ft-timebar .tb-job { fill: var(--success); }
.ft-timebar .tb-drive { fill: var(--info); }
.ft-timebar .tb-pause { fill: var(--warning); }
.ft-timebar .tb-out { fill: var(--danger); }
.ft-timebar-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--font-xs); color: var(--text-muted); }
.ft-timebar-key { display: inline-flex; align-items: center; gap: var(--space-xs); }
.ft-timebar-key .ft-timebar { width: var(--space-md); min-width: var(--space-md); height: calc(var(--space-sm) + var(--space-xs)); border-radius: var(--radius-sm); }

/* ==========================================================================================================
   50-bereich-werkstatt.css - BEREICH: Werkstatt
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: ft-ws, ws
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 50-bereich-werkstatt --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* Werkstatt L2 (v1.219.0): Bearbeiten-Modus des Maskenbaus direkt auf der Seite (assets/js/layout-edit.js) */
button.ft-ws-open { border: 0; background: none; font: inherit; cursor: pointer; }
/* Knopf traegt den Reiterleisten-Look (.tab-side-ico) */
button.ft-ws-open.active { color: var(--navy, #12314D); }
.ws-ico { width: 15px; height: 15px; fill: currentColor; display: block; }
#ft-ws-bar .ws-name { display: flex; align-items: center; gap: 7px; font-weight: 700; }
#ft-ws-bar .ws-spring { flex: 1; }
#ft-ws-bar .ws-std { color: var(--text-muted); font-size: 13px; }
body.ft-ws-on { padding-bottom: var(--ws-bar-h, 64px); }   /* v1.373.0: Hoehe der Werkstatt-Leiste misst layout-edit.js (sie bricht bei wenig Platz um) */
#ft-ws-bar { left: var(--ws-bar-left, 0); flex-wrap: wrap; row-gap: 6px; }   /* v1.373.0: beginnt rechts neben dem Menue (Wert aus layout-edit.js) - vorher lag ihr Anfang darunter */
body.ft-ws-on .ft-layout-src { display: block; }
/* in der Werkstatt zaehlt der Bearbeiten-Blick, nicht die Huellen-Sperre */
.ws-blk { position: relative; outline: 1px dashed var(--border); outline-offset: 4px; border-radius: 4px; }
.ws-blk-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; padding: 4px 6px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.ws-grip { cursor: grab; display: inline-flex; color: var(--text-muted); padding: 2px; }
.ws-grip:active { cursor: grabbing; }
.ws-t { border: 1px solid var(--border); background: none; color: var(--text); border-radius: 5px; padding: 2px 7px;
  font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ws-t:hover { background: var(--bg-elevated, var(--bg)); border-color: var(--navy, #12314D); }
.ws-t.on { border-color: var(--navy, #12314D); font-weight: 700; }
.ws-t svg { width: 13px; height: 13px; fill: currentColor; }
.ws-moved { color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.ws-dragging { opacity: .55; }
.ws-hiddenblk { opacity: .5; }
.ws-movedblk { opacity: .66; }
.ws-tab-tools { display: inline-flex; gap: 2px; margin-left: 4px; }
.ws-tmove { cursor: pointer; font-weight: 700; color: var(--text-muted); padding: 0 3px; border-radius: 4px; }
.ws-tmove:hover { color: var(--text); background: var(--bg-subtle); }
.ws-tdel { cursor: pointer; font-weight: 700; color: var(--text-muted); padding: 0 4px; border-radius: 4px; }
.ws-tdel:hover { color: var(--danger, #b4232a); background: var(--bg-subtle); }
.ws-tab-ico { cursor: pointer; }
.ws-dropok { outline: 2px solid var(--navy, #12314D); outline-offset: 2px; border-radius: 6px; }
.ws-addtab, .ws-newtab { opacity: .85; }
#ft-ws-iconpick .ws-ip-head { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); }
#ft-ws-iconpick .ws-ip-head input { flex: 1; min-width: 0; }
#ft-ws-iconpick .ws-ip-n { font-size: var(--font-xs); color: var(--text-muted); white-space: nowrap; }
#ft-ws-names .ws-np-head { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0 0 8px; }
#ft-ws-names .ws-np-row { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; }
#ft-ws-names .ws-np-row span { flex: 0 0 96px; color: var(--text-secondary); }
#ft-ws-names .ws-np-row input { flex: 1; }
#ft-ws-names .ws-np-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#ft-ws-iconpick .ws-ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px;
  max-height: min(60vh, 480px); overflow-y: auto; overflow-x: hidden; padding: 2px; }
#ft-ws-iconpick .ws-ip-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 76px;
  padding: 6px 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--text); cursor: pointer; }
#ft-ws-iconpick .ws-ip-i:hover { background: var(--hover-bg); border-color: var(--border); }
#ft-ws-iconpick .ws-ip-i.on { border-color: var(--brand-primary-text); background: var(--brand-primary-light); color: var(--brand-primary-text); }
#ft-ws-iconpick .ws-ip-i svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
#ft-ws-iconpick .ws-ip-name { max-width: 100%; font-size: var(--font-xs); line-height: 1.2; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ft-ws-iconpick .ws-ip-i.on .ws-ip-name { color: inherit; }
.ws-fgrid .ft-lit { position: relative; outline: 1px dotted var(--border); outline-offset: 2px; border-radius: 4px; }
.ws-f-tools { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 11px; }
.ws-fgrid .ft-layout-spacer { min-height: 34px; background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--bg-subtle) 6px, var(--bg-subtle) 12px); }
#ft-ws-menu .ws-m-head { font-weight: 600; font-size: var(--font-sm); padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ft-ws-menu .ws-m-grp { padding: 6px 0 2px; }
#ft-ws-menu .ws-m-lbl { font-size: var(--font-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
#ft-ws-menu .ws-m-chips, #ft-ws-menu .ws-m-acts { display: flex; flex-wrap: wrap; gap: 4px; }
#ft-ws-menu .ws-m-acts { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.ws-chip { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ctl-h-xs); padding: 2px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: var(--bg); color: var(--text); font: inherit; font-size: var(--font-sm); cursor: pointer; }
.ws-chip:hover { border-color: var(--brand-primary-text); background: var(--hover-bg); }
.ws-chip.on { border-color: var(--brand-primary-text); background: var(--brand-primary-light); color: var(--brand-primary-text); font-weight: 600; }
.ws-chip svg { width: 14px; height: 14px; fill: currentColor; }
#ft-ws-bar .ws-hint { color: var(--text-muted); font-size: var(--font-xs); flex: 1 1 0; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* v1.373.0: immer einzeilig - sonst wuchs die Leiste zu einer hohen Spalte */
@media (max-width: 1100px) {
  #ft-ws-bar .ws-hint { display: none; }
}
/* Maskenbau v1.274.0: Code-Namen in der Werkstatt (nur mit Entwickler-Hinweisen) - Knopf </> und Code-Zeile im Menue-Kopf */
.ws-t.ws-code { color: var(--text-muted); }
.ws-t.ws-code:hover { color: var(--brand-primary-text); }
#ft-ws-menu .ws-m-code { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 400; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Maskenbau v1.275.0 (Ralf: "wieder ein Ghost ... Button und Texte geblockt ... Button betaetigt, Popup geht auf"):
   - ein aus diesem Reiter verlegter Block ist in der Werkstatt nur noch seine Hinweis-Zeile ("<Titel> verlegt nach X - zurueckholen")
   - Inhalt der Bloecke ist in der Werkstatt Anschauung: keine Maus (Knoepfe, Popups, Felder loesen nichts aus); die Werkzeuge behalten sie.
     Im Modus "Felder anordnen" ist jedes Element als Ganzes greifbar (das Element selbst hat die Maus, sein Inhalt nicht) */
body.ft-ws-on .ws-movedblk > :not(.ws-blk-tools) { display: none; }
body.ft-ws-on .ws-movedblk { opacity: 1; }
body.ft-ws-on .ws-movedblk > .ws-blk-tools { margin: 0; border-style: dashed; }
body.ft-ws-on .ws-blk > :not(.ws-blk-tools):not(.ws-rz) { pointer-events: none; }   /* v1.371.0: Kanten-Griffe des Raster-Ziehwerks behalten die Maus */
body.ft-ws-on .ws-fields-on .ft-lgrid { pointer-events: auto; }
body.ft-ws-on .ws-fields-on .ft-lgrid .ft-lit > :not(.ws-f-tools) { pointer-events: none; }
body.ft-ws-on .ws-fields-on .ft-lgrid .ft-lit { pointer-events: auto; cursor: grab; }
body.ft-ws-on .ws-blk { cursor: pointer; }
#ft-ws-bar .ws-sb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--text-secondary); }
#ft-ws-bar .ws-sb select { width: auto; }
/* Maskenbau 2 (v1.371.0, Ralf 09.10.2026: "via drag und drop ... via Aussenkante einfach gross ziehen ... auch die Reiter"): RASTER-ZIEHWERK
   (assets/js/grid-drag.js) - nur in der Werkstatt der Pilot-Akten. Ebene ueber dem Raster mit Spalten, freien Stellen und gelbem Platzhalter;
   Kanten-Griffe links/rechts/unten/Ecke; Schild mit der Groesse; schwebende Karte beim Ziehen; Reiter ziehen mit Einfuegestrich.
   Farben und Masse nur aus variables.css (Takt Gelb = --brand-accent). */
.ws-g-host { position: relative; isolation: isolate; }   /* eigene Stapel-Ebene: die hintere Ebene liegt unter den Bloecken, nicht unter der Karte */
.ws-g-host .ws-blk-tools { cursor: grab; touch-action: none; }
@media (max-width: 900px) {
  /* einspaltig (Handy, Tablet hochkant): die Reihenfolge ergibt sich aus dem Raster - hier wird nicht gezogen */
  .ws-g-host .ws-blk-tools { cursor: default; touch-action: auto; }
  .ws-g-host .ws-blk > .ws-rz.ws-rz, .ws-g-host .ws-blk > .ws-g-badge.ws-g-badge { display: none; }
}
@media (max-width: 700px) {
  /* v1.372.0: Felder untereinander - auch die Felder werden hier nicht gezogen */
  .ws-g-host .ft-lit > .ws-rz.ws-rz, .ws-g-host .ft-lit > .ws-g-badge.ws-g-badge { display: none; }
  body.ft-ws-on .ws-g-fields .ft-lgrid .ft-lit.ft-lit { cursor: default; touch-action: auto; }
}
.ws-g-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ws-g-layer.ws-g-back { z-index: -1; }
.ws-g-col { position: absolute; background: rgba(var(--brand-accent-rgb), .06); border-radius: var(--radius-sm); }
.ws-g-free { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--ctl-border); border-radius: var(--radius-md);
  color: var(--text-muted); font-size: var(--font-xs); overflow: hidden; white-space: nowrap; }
.ws-g-free.ws-g-new { border-style: dotted; }
.ws-g-ph { position: absolute; display: flex; align-items: flex-start; justify-content: center; padding-top: var(--space-sm); border: 2px dashed var(--brand-accent); border-radius: var(--radius-md);
  background: rgba(var(--brand-accent-rgb), .14); font-size: var(--font-xs); font-weight: 600;
  transition: left var(--transition-fast), top var(--transition-fast), width var(--transition-fast), height var(--transition-fast); }
.ws-g-ph.is-swap { border-style: solid; }
.ws-g-ph-t { padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--brand-accent); color: var(--ft-ink); line-height: var(--ctl-h-xs); white-space: nowrap; }
.ws-g-ghost { position: fixed; z-index: 2000; pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: var(--ctl-h); padding: 0 var(--space-md); background: var(--card-bg); color: var(--text); border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-weight: 600; opacity: .95; }
.ws-g-ghost-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-g-ghost-s { flex: none; font-weight: 400; font-size: var(--font-xs); color: var(--text-muted); white-space: nowrap; }
.ws-g-item.ws-g-moving { opacity: .4; }
.ws-g-item.ws-g-swap { outline: 2px solid var(--brand-accent); }
.ws-g-item.ws-g-sel { outline: 2px solid var(--brand-accent); }
.ws-g-badge { position: absolute; z-index: 4; bottom: var(--space-sm); right: var(--space-lg); display: none; align-items: center;
  min-height: var(--ctl-h-xs); padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--brand-accent); color: var(--ft-ink);
  font-size: var(--font-xs); font-weight: 600; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ws-g-item.ws-g-sel > .ws-g-badge, .ws-g-item.ws-g-rz > .ws-g-badge { display: inline-flex; }
.ws-rz { position: absolute; z-index: 4; display: none; touch-action: none; }
/* v1.372.0: Griffe je Element (Block ODER Feld) - zeigt der Zeiger auf ein Feld, bleiben die Griffe des Blocks aus */
.ws-g-host .ws-g-item:hover:not(:has(.ws-g-item:hover)) > .ws-rz, .ws-g-item.ws-g-sel > .ws-rz, .ws-g-item.ws-g-rz > .ws-rz { display: block; }
/* v1.372.0: im Raster-Modus ist jedes Feld direkt greifbar (das Element hat die Maus, sein Inhalt nicht - nur die Kanten-Griffe) */
body.ft-ws-on .ws-g-fields .ft-lgrid .ft-lit { pointer-events: auto; cursor: grab; touch-action: none; }
body.ft-ws-on .ws-g-fields .ft-lgrid .ft-lit > :not(.ws-rz) { pointer-events: none; }
.ws-rz-r, .ws-rz-l { top: var(--space-md); bottom: var(--space-md); width: var(--space-md); cursor: ew-resize; }
/* Griffe INNEN an der Kante - Karten und Akkordeons schneiden alles ab, was ueber den Rand ragt (overflow: hidden) */
.ws-rz-r { right: 0; }
.ws-rz-l { left: 0; }
.ws-rz-b { left: var(--space-md); right: var(--space-md); height: var(--space-md); bottom: 0; cursor: ns-resize; }
.ws-rz-br { right: 0; bottom: 0; width: var(--space-md); height: var(--space-md); cursor: nwse-resize; }
.ws-rz::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--brand-accent); border-radius: var(--radius-full); }
.ws-rz-r::after, .ws-rz-l::after { width: var(--space-xs); height: var(--space-xl); }
.ws-rz-b::after { width: var(--space-xl); height: var(--space-xs); }
.ws-rz-br::after { width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-sm); }
.ws-g-tab { cursor: grab; touch-action: none; }
.ws-tab-drag { opacity: .4; }
.ws-tab-ins-before { box-shadow: inset 3px 0 0 var(--brand-accent); }
.ws-tab-ins-after { box-shadow: inset -3px 0 0 var(--brand-accent); }
.ws-g-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
body.ws-g-drag, body.ws-g-drag.ws-g-drag * { cursor: grabbing; user-select: none; }
body.ws-g-drag-ew.ws-g-drag-ew * { cursor: ew-resize; }
body.ws-g-drag-ns.ws-g-drag-ns * { cursor: ns-resize; }
body.ws-g-drag-nwse.ws-g-drag-nwse * { cursor: nwse-resize; }
/* Maskenbau 2, R3 (v1.373.0, Ralf 09.10.2026: "gut, Eigenschaften-Leiste, Handy???"): EIGENSCHAFTEN-LEISTE rechts (fest, volle Hoehe, ueber der
   Werkstatt-Leiste) - die Seite rueckt um ihre Breite nach links, unter 1100 px liegt sie ueber der Seite. Dazu der Geraete-Umschalter in der Leiste
   und die GERAETE-VORSCHAU (Seite im Rahmen der Geraetebreite). Farben und Masse nur aus variables.css. */
.ws-insp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 56; width: var(--ws-insp-width); display: none; flex-direction: column;
  background: var(--card-bg); color: var(--text); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
body.ws-insp-on .ws-insp { display: flex; }
body.ft-ws-on.ws-insp-on { padding-right: var(--ws-insp-width); }
body.ws-insp-on #ft-ws-bar { right: var(--ws-insp-width); }
body.ws-insp-on #ft-ws-bar .ws-hint { display: none; }   /* die Tastaturhilfe steht dann in der Eigenschaften-Leiste (?) */
.ws-bar-l, .ws-bar-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }   /* Gruppen der Werkstatt-Leiste - umgebrochen wird zwischen ganzen Gruppen */
.ws-bar-r { margin-left: auto; }   /* Verwerfen/Speichern stehen immer rechts, auch in einer umgebrochenen Zeile */
.ws-insp-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--border); }
.ws-insp-ttl { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-insp-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-xs); font-weight: 400; color: var(--text-muted); }
.ws-insp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-lg); }
.ws-insp-body .ws-m-grp { padding: var(--space-xs) 0 0; }
.ws-insp-body .ws-m-lbl { margin-bottom: var(--space-xs); font-size: var(--font-xs); font-weight: 600; color: var(--text-muted); }
.ws-insp-body .ws-m-chips, .ws-insp-body .ws-m-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ws-insp-body .ws-m-acts { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.ws-insp-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); padding: var(--space-xs) 0 var(--space-sm); }
.ws-insp-step { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-md); background: var(--bg-subtle); }
.ws-insp-step .ws-insp-lbl { flex: 1 1 auto; min-width: 0; padding-left: var(--space-xs); font-size: var(--font-xs); color: var(--text-muted); }
.ws-insp-step b { min-width: var(--space-lg); text-align: center; font-variant-numeric: tabular-nums; }
.ws-insp-sw { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-xs) 0 0; font-size: var(--font-sm); cursor: pointer; }
.ws-insp-empty { margin: var(--space-sm) 0 0; color: var(--text-muted); font-size: var(--font-sm); }
.ws-insp-head .ws-t[aria-pressed="true"] { background: var(--brand-primary-light); color: var(--brand-primary-text); }
.ws-insp-help { margin-bottom: var(--space-md); }
.ws-insp-keys { margin: var(--space-sm) 0 0; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--font-xs); }
.ws-g-instog[aria-pressed="true"] { background: var(--brand-primary-light); color: var(--brand-primary-text); }
@media (max-width: 1100px) {
  body.ft-ws-on.ws-insp-on { padding-right: 0; }
  body.ws-insp-on #ft-ws-bar { right: 0; }
  .ws-insp { bottom: auto; max-height: 70vh; width: min(var(--ws-insp-width), 92vw); border-bottom: 1px solid var(--border); border-bottom-left-radius: var(--radius-lg); }
}
.ws-g-dev { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ws-g-dev button { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); border: 0; background: none; color: var(--text-secondary); cursor: pointer; }
.ws-g-dev button + button { border-left: 1px solid var(--border); }
.ws-g-dev button.on { background: var(--brand-primary-light); color: var(--brand-primary-text); }
.ws-pv { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: var(--overlay); }
.ws-pv-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--card-bg); color: var(--text); border-bottom: 1px solid var(--border); }
.ws-pv-name { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 600; white-space: nowrap; }
.ws-pv-hint { flex: 1 1 auto; min-width: 0; font-size: var(--font-xs); color: var(--text-muted); }
.ws-pv-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-lg); }
.ws-pv-dev { flex: none; overflow: hidden; border: var(--space-sm) solid var(--ft-ink); border-radius: var(--radius-xl); background: var(--bg); box-shadow: var(--shadow-xl); }
.ws-pv-dev iframe { display: block; border: 0; transform-origin: 0 0; }
body.ws-pv-open { overflow: hidden; }
/* v1.374.0 (R7 Seiten-Schema, Ralf 09.10.2026: "nur innerhalb des Kopfes ... die Pflichtfelder verschieben innerhalb der Kacheln"):
   Aktenkopf aus Kacheln in der Werkstatt (layout-edit.js headInit) - die Kachel ist als Ganzes greifbar, ihre Angaben direkt; der Inhalt
   hat keine Maus (Links fuehren nicht weg). Ausgeblendete Kacheln stehen blass da. */
.ws-head .ws-hk { cursor: grab; touch-action: none; outline: 1px dashed var(--ctl-border); outline-offset: 3px; }
.ws-head .ws-hk:hover { outline-color: var(--brand-primary-text); }
.ws-head .ws-hk * { pointer-events: none; }
.ws-head .ws-hk .ws-g-item, .ws-head .ws-hk .ws-rz { pointer-events: auto; }
.ws-head .ws-hk .ws-g-item { position: relative; cursor: grab; touch-action: none; outline: 1px dotted var(--border); outline-offset: 2px; border-radius: var(--radius-sm); }
.ws-head .ws-hk .ws-g-item:hover { outline-color: var(--brand-primary-text); }
.ws-head .ws-hk.ws-g-sel, .ws-head .ws-hk.ws-g-swap, .ws-head .ws-hk .ws-g-item.ws-g-sel, .ws-head .ws-hk .ws-g-item.ws-g-swap { outline: 2px solid var(--brand-accent); }
.ws-hk-off { opacity: .45; }
@media (max-width: 900px) {
  .ws-head .ws-hk { cursor: default; touch-action: auto; }
  .ws-head .ws-hk > .ws-rz.ws-rz, .ws-head .ws-hk > .ws-g-badge.ws-g-badge { display: none; }
}
@media (max-width: 700px) {
  .ws-head .ws-hk .ws-g-item { cursor: default; touch-action: auto; }
}

/* ==========================================================================================================
   51-bereich-import.css - BEREICH: Import
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: imp
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 51-bereich-import --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   v1.157.0 IMPORT (Ralf 01.10.2026, Bedien-Muster 83) - Kachelseite Einstellungen -> Import und Seite import.php
   ============================================================ */
/* v1.163.0: Bereiche als Akkordeon (globales .form-section.ft-acc) - Titel mit Status und Knoepfen, Felder als Tabelle */
.imp-sec .form-section-title { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.imp-sec-name { font-weight: 700; }
.imp-sec-btns { display: inline-flex; gap: 6px; margin-left: auto; }
.imp-sec.is-coming .form-section-title { color: var(--text-muted); }
.imp-fields td { vertical-align: top; }
.imp-fields td:first-child, .imp-fields th:first-child { white-space: nowrap; width: 1%; padding-right: var(--space-lg); }
.imp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.imp-sum { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.imp-upload { max-width: 560px; }
/* v1.165.0 (Bedien-Muster 88): Import - Schieber, Zuordnung in Bereichen, Hinweise je Zeile, Bilder laden */
.imp-switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-sm) 0 var(--space-md); }
.imp-map td:first-child { width: 40%; }
.imp-map select { width: 100%; max-width: 360px; }
.imp-help-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.imp-note { display: flex; align-items: flex-start; gap: 4px; color: var(--text-secondary); margin-top: 2px; }
.imp-bar { margin: var(--space-sm) 0; }
.imp-bar .progress-bar-fill { width: 0; }
.imp-batch-nums { margin: var(--space-sm) 0; }
.imp-actions[hidden], .table-scroll[hidden] { display: none; }
/* hidden gegen display:flex der Knopfzeile */
.imp-fields .imp-sec-row td { background: var(--bg-subtle); font-weight: 700; }
/* v1.166.0 (Bedien-Muster 89): Import wie die JTL-Ameise - Vorlagen-Leiste, Dateivorschau (zugeordnet = gruen), Standardwert/Praefix je Feld */
.imp-tplbar { border-bottom: 1px solid var(--border); }
.imp-tplform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.imp-tpl-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.imp-tpl-sel { min-width: 260px; max-width: 100%; }
.imp-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.imp-preview th, .imp-preview td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imp-preview th { color: var(--text-muted); }
.imp-col-letter { display: inline-block; min-width: 1.4em; padding: 0 4px; margin-right: 2px; border-radius: var(--radius-sm, 4px); background: var(--bg-subtle); color: var(--text-secondary); font-weight: 700; text-align: center; }
/* v1.167.0: Spaltenbuchstabe wie Excel */
.imp-preview .is-mapped { background: var(--success-light); color: var(--success-text); }
.imp-map tr.is-mapped td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.imp-extra { min-width: 200px; }
/* Zuordnung: keine zweite Scrollleiste im Akkordeon */
.imp-notes { min-width: 260px; }
.imp-def { width: 100%; }
/* v1.168.0-v1.171.0 (Bedien-Muster 89): Vorauswahl, Spaltenauswahl aus/an, Filter "Nur aktive Felder", ausgeblendete Bereiche, Ergebnis-Akkordeon */
.imp-pre { font-size: var(--font-sm); color: var(--text-secondary); }
.imp-pre-val { margin-top: 4px; }
.imp-pre-val[hidden], .imp-col-wrap[hidden], .imp-col-off[hidden], .imp-offbar[hidden] { display: none; }
.imp-col-off { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-style: italic; }
.imp-head-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-left: auto; }
.imp-sec[hidden], .imp-sec.is-off { display: none; }
.imp-offbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.imp-offbar [data-imp-offlist] { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); }
.imp-sec-hide { margin-left: auto; font-size: var(--font-sm); font-weight: 400; color: var(--text-secondary); }
/* Schieber rechts neben dem Pfeil */
.imp-res-tiles { margin-bottom: var(--space-sm); }
.imp-linkbase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
/* v1.172.0: Basis-Link */
.imp-linkbase label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.imp-linkbase input { flex: 1 1 320px; max-width: 560px; }
.imp-res .form-section.ft-acc { margin-bottom: 0; }
/* Ergebnis-Akkordeon fuellt die Karte */
.imp-res .form-section-title { flex-wrap: wrap; }
.imp-res .imp-sec-btns { flex-wrap: wrap; }
.imp-affix { margin-top: 4px; }
.imp-affix summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-sm); color: var(--text-secondary); }
.imp-affix input { width: 100%; margin-top: 4px; }

/* ==========================================================================================================
   52-bereich-gewerke-piktogramme.css - BEREICH: Gewerke Piktogramme
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: cp, ft-cp, ft-cpv, ft-dd, ft-trade
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 52-bereich-gewerke-piktogramme --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.131.0: Einstellungen -> Gewerke - je Gewerk eine Karte mit Haekchen und Vorschau der Anlagentypen */
.ft-trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-sm); }
.ft-trade { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; background: var(--card-bg); }
.ft-trade.is-on, .ft-trade:has(input:checked) { border-color: var(--success-border); background: var(--success-light); }
.ft-trade-head { display: flex; align-items: center; gap: 8px; }
.ft-trade-types { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); }
.ft-trade-types small { margin-left: auto; }
.ft-trade-sites { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: var(--font-sm, 13px); }
/* v1.134.0 */
.ft-trade-area > .form-section-title .ft-pack-switch { margin-left: auto; margin-right: 8px; font-size: var(--font-xs); font-weight: 500; }
/* KP2a (v1.181.0, Kundenportal - Erscheinungsbild): Vorschau der Anmeldeseite des Portals in der linken Karte. BEWUSST feste Farben fuer
   Flaechen und Schrift der Vorschau: sie zeigt die Seite, die die KUNDEN des Betriebs sehen (hell oder dunkel nach Wahl in der Vorschau),
   nicht die Kunden-App - das Thema der App darf sie nicht umfaerben. Haupt-/Akzentfarbe und Schrift auf der Hauptfarbe kommen als
   CSS-Variablen (--cp-main, --cp-accent, --cp-on-main) aus den Einstellungen bzw. live aus assets/js/cportal.js. */
.cp-prev { --cp-bg: #FFFFFF; --cp-page: #F4F6F5; --cp-ink: #17212B; --cp-muted: #5B6878; --cp-line: #C9D3DC;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; font-size: var(--font-xs); line-height: 1.4; color: var(--cp-ink); background: var(--cp-page); }
.cp-prev.is-dark { --cp-bg: #1E2733; --cp-page: #121A24; --cp-ink: #E8EDF1; --cp-muted: #A3AFBD; --cp-line: #3A4757; }
.cp-prev-url { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; background: #E6E9EC; color: #334155; }
.cp-prev-url .icon { color: #15803D; }
.cp-prev-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 230px; }
.cp-prev-brand { background: var(--cp-main); color: var(--cp-on-main); padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.cp-prev-logo { display: flex; align-items: center; min-height: 34px; }
.cp-prev-img { max-height: 34px; max-width: 100%; object-fit: contain; }
.cp-prev-img-pad { background: #FFFFFF; padding: 3px 6px; border-radius: var(--radius-sm); }
.cp-prev-fallback { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: #FFFFFF; color: var(--cp-main); }
.cp-prev-name { font-weight: 800; font-size: var(--font-sm); overflow-wrap: anywhere; }
.cp-prev-sub { opacity: .85; }
.cp-prev-bar { width: 32px; height: 3px; border-radius: 2px; background: var(--cp-accent); margin: 4px 0; }
.cp-prev-welcome { white-space: pre-line; overflow-wrap: anywhere; opacity: .95; }
.cp-prev-form { background: var(--cp-bg); padding: var(--space-md) var(--space-sm); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cp-prev-title { font-weight: 800; font-size: var(--font-sm); margin-bottom: 2px; }
.cp-prev-label { color: var(--cp-muted); font-weight: 600; }
.cp-prev-input { height: 20px; border: 1px solid var(--cp-line); border-radius: var(--radius-sm); }
.cp-prev-input.is-focus { border-color: var(--cp-accent); box-shadow: 0 0 0 1px var(--cp-accent); }
.cp-prev-btn { margin-top: 6px; height: 24px; border-radius: var(--radius-sm); background: var(--cp-main); color: var(--cp-on-main); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cp-prev-link { color: var(--cp-main); font-weight: 600; text-align: center; }
.cp-prev.is-dark .cp-prev-link { color: var(--cp-ink); }
.cp-prev-foot { display: flex; gap: var(--space-sm); padding: 4px 8px; border-top: 1px solid var(--cp-line); background: var(--cp-bg); color: var(--cp-muted); }
.cp-prev-ft { margin-left: auto; }
.cp-logo-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.cp-logo-box { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 56px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #FFFFFF; }
.cp-logo-box.is-dark { background: #1B2430; }
.cp-logo-img { max-height: 44px; max-width: 220px; object-fit: contain; }
.cp-color { display: flex; align-items: center; gap: var(--space-sm); }
.cp-color input[type="color"] { flex: none; width: var(--ctl-h); height: var(--ctl-h); padding: 2px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--card-bg); cursor: pointer; }
.cp-color input[type="text"] { font-family: var(--font-mono); text-transform: uppercase; }
/* v1.285.0: beide Felder gleich breit, schrumpfen gemeinsam statt umzubrechen */
/* v1.289.0: Zahlen des Probelaufs "Kategorien-Muster" (Artikel -> Zahnrad -> Warengruppen) - kleine Kacheln in einer Reihe */
.stat-grid.ft-cp-stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); }
/* v1.290.0: Muster-Auswahl (Artikel -> Zahnrad -> Warengruppen -> Muster) - Bezeichnung + Beschreibung je Muster aus dem Archiv */
.ft-cp-opt { align-items: flex-start; margin-bottom: var(--space-sm); }
.ft-cp-sym { vertical-align: middle; margin-right: var(--space-xs); }
.ft-cpv-picker { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ft-cpv-picker .role-card:has(input:checked) .role-card-inner { border-color: var(--brand-primary); background: var(--brand-primary-light); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); }
.ft-cpv-picker .role-card:not(:has(input:checked)) .role-card-inner { border-color: var(--border); background: var(--card-bg); box-shadow: none; }
.ft-cpv-lead { width: 44px; height: 44px; }
.ft-cpv-lead img { width: 100%; height: 100%; }
.ft-cpv-ex { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); padding: 8px; border-radius: 8px; }
.ft-cpv-ic { display: inline-flex; width: 28px; height: 28px; flex: none; }
.ft-cpv-ic img { width: 100%; height: 100%; }
.ft-cpv-view { display: inline-flex; align-items: center; gap: var(--space-xs); }
.ft-cpv-vbtn input { display: none; }
.ft-cpv-vbtn span { display: inline-block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.ft-cpv-vbtn input:checked + span { background: var(--brand-primary); border-color: var(--brand-primary); color: #FFFFFF; }
/* Ansicht Hell/Dunkel erzwingen: Beispiel-Leisten und Leit-Symbol auf festem Grund, passende Fassung sichtbar */
.ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-cpv-ex { background: #F4F7FB; }
.ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-cpv-ex { background: #0B172B; }
.ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-cpv-lead { background: #0B172B; border-radius: 10px; padding: 4px; }
.ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-cpv-lead { background: #F4F7FB; border-radius: 10px; padding: 4px; }
.ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-pic-hell, :root[data-theme="dark"] .ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-pic-hell { display: inline-block; }
.ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-pic-dunkel, :root[data-theme="dark"] .ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-pic-dunkel { display: none; }
.ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-pic-dunkel, :root[data-theme="dark"] .ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-pic-dunkel { display: inline-block; }
.ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-pic-hell, :root[data-theme="dark"] .ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-pic-hell { display: none; }
.ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-cpv-ex .icon, .ft-cpv:has(input[name="cpv_view"][value="dunkel"]:checked) .ft-cpv-lead .icon { color: #F7FAFF; }
.ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-cpv-ex .icon, .ft-cpv:has(input[name="cpv_view"][value="hell"]:checked) .ft-cpv-lead .icon { color: #0F2D5B; }
/* v1.295.0: Einstellungen -> Gewerke - passendes Kategorie-Muster je Gewerk-Bereich (Name, Anzahl, eingespielt / mit einspielen) */
.ft-trade-pattern { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-sm); font-size: 13px; }
/* v1.296.0: Stil-Vorschau je Gewerk - "Vorschau mit" (select cpv_gw) blendet den Satz ein; gespeichert wird nur der globale Stil */
.ft-cpv .ft-cpv-gset { display: none; }
.ft-cpv:has(select[name="cpv_gw"] option[data-i="0"]:checked) .ft-cpv-g0,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="1"]:checked) .ft-cpv-g1,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="2"]:checked) .ft-cpv-g2,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="3"]:checked) .ft-cpv-g3,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="4"]:checked) .ft-cpv-g4,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="5"]:checked) .ft-cpv-g5,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="6"]:checked) .ft-cpv-g6,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="7"]:checked) .ft-cpv-g7,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="8"]:checked) .ft-cpv-g8,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="9"]:checked) .ft-cpv-g9,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="10"]:checked) .ft-cpv-g10,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="11"]:checked) .ft-cpv-g11,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="12"]:checked) .ft-cpv-g12,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="13"]:checked) .ft-cpv-g13,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="14"]:checked) .ft-cpv-g14,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="15"]:checked) .ft-cpv-g15,
.ft-cpv:has(select[name="cpv_gw"] option[data-i="16"]:checked) .ft-cpv-g16 { display: flex; }
.ft-cpv-gwl { display: inline-flex; align-items: center; gap: var(--space-xs); margin-right: var(--space-md); }
.ft-cpv-gsel { max-width: 420px; }
/* v1.297.0: Kategorien-Muster-Popup (Einstellungen -> Gewerke) - Muster und Aktion als Auswahlkarten; Radio NICHT volle Breite (form-group input) */
.ft-cp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm); margin: var(--space-xs) 0 var(--space-md); }
.ft-cp-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); cursor: pointer; transition: border-color var(--transition-fast); }
.ft-cp-card input[type="radio"] { width: auto; height: auto; margin: 0; flex: none; }
.ft-cp-card:hover { border-color: var(--brand-primary); }
.ft-cp-card:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-light); }
.ft-cp-card.is-danger:has(input:checked) { border-color: var(--danger); }
.ft-cp-card:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.ft-cp-card-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ft-cp-card-txt small { font-size: var(--font-xs); color: var(--text-muted); }
.ft-cp-modes { grid-template-columns: 1fr; }
/* Aktionen untereinander - jede Erklaerung in einer Zeile */
.ft-cp-note { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: var(--brand-primary-light); font-size: 13px; }
/* v1.298.0: Vorschau eines noch nicht installierten Gewerks - Hinweis einblenden (option data-inst="0") */
.ft-cpv .ft-cpv-inst-hint { display: none; margin: 0 0 var(--space-md); flex-wrap: wrap; align-items: center; }
.ft-cpv:has(select[name="cpv_gw"] option[data-inst="0"]:checked) .ft-cpv-inst-hint { display: flex; }
/* v1.301.0: installiertes Gewerk in der Vorschau gewaehlt - "Gewerk entfernen" einblenden (option data-rm="1") */
.ft-cpv .ft-cpv-rm-hint { display: none; margin: 0 0 var(--space-md); flex-wrap: wrap; align-items: center; }
.ft-cpv:has(select[name="cpv_gw"] option[data-rm="1"]:checked) .ft-cpv-rm-hint { display: flex; }
/* v1.301.0: Leiste ueber der Gewerke-Auswahl (Hinweis + "Gewerke uebernehmen") statt der Karte mit Muster-Knopf */
.ft-trade-bar { gap: var(--space-md); align-items: center; }
/* v1.313.0 (R3) Belegrabatt: Schwellen an der Adresse (Verkauf | Einkauf, je 3 Zeilen) und Hinweis "noch X EUR bis +5 %" im Vorgang */
.ft-dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); }
.ft-dd-row { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); }
.ft-dd-row input { flex: 0 1 110px; width: 110px; min-width: 0; }
.ft-dd-row input[name$="[pct]"] { flex: 0 1 70px; width: 70px; }
.ft-dd-row > span { white-space: nowrap; }   /* v1.397.1: "EUR -> +" blieb nicht in der Zeile */
.ft-dd-next { color: var(--brand-primary-text); font-weight: 600; }

/* ==========================================================================================================
   53-bereich-rechte-rollen.css - BEREICH: Rechte Rollen
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: admin, cred, ft-rights, perm, users
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 53-bereich-rechte-rollen --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.120.0: Mein Konto als Zahnrad neben dem Namen */
.admin-account { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--sidebar-text); flex: 0 0 auto; }
.admin-account:hover, .admin-account.active { color: #fff; background: rgba(255, 255, 255, 0.08); }
.admin-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 4px;
}
.admin-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--font-sm);
    flex-shrink: 0;
}
.admin-info-text .admin-name {
    color: #cbd5e1;
    font-size: var(--font-sm);
    font-weight: 500;
    display: block;
}
.admin-info-text .admin-role {
    display: inline-block;
    background: rgba(37,99,235,0.15);
    color: var(--sidebar-active-text);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cred-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.cred-row:last-child { border-bottom: none; }
.cred-label { font-size: var(--font-sm); color: var(--text-secondary); font-weight: 500; }
.cred-value { font-size: var(--font-sm); font-weight: 600; }
/* ============================================================
   PERMISSION MATRIX
   ============================================================ */
/* Rollen-Header-Leiste (ueber den Accordions) */
.perm-roles-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-subtle);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 0;
}
.perm-roles-spacer {
    flex: 1;
    min-width: 180px;
}
.perm-role-col-head {
    width: 100px;
    min-width: 100px;
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* Matrix-Tabelle (innerhalb Accordion-Body) */
.perm-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
    display: block;
}
.perm-matrix tbody {
    display: block;
}
.perm-matrix tbody tr {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}
.perm-matrix tbody tr:last-child {
    border-bottom: none;
}
.perm-matrix tbody tr:hover {
    background: var(--bg-hover);
}
.perm-action-cell {
    flex: 1;
    min-width: 180px;
    padding: 10px 16px;
}
.perm-action-desc {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: 1.3;
    margin-top: 2px;
}
.perm-check-cell {
    width: 100px;
    min-width: 100px;
    text-align: center;
    padding: 8px 6px;
}
.perm-always {
    color: var(--brand-primary-text);
    opacity: 0.5;
}
.perm-yes { color: var(--success); }
.perm-no { color: var(--text-muted); }
/* Permission Toggle Switch */
.perm-toggle {
    display: inline-block;
    cursor: pointer;
}
.perm-toggle input { display: none; }
.perm-toggle-track {
    display: block;
    width: 36px; height: 20px;
    background: var(--border);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
}
.perm-toggle-track::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.perm-toggle input:checked + .perm-toggle-track {
    background: var(--success);
}
.perm-toggle input:checked + .perm-toggle-track::after {
    transform: translateX(16px);
}
/* S1 (v1.30.0): Tabellen mit Pflege in der Zeile - Muster der Schaltzentrale (.users-table, tr.row-edit, td.cell-actions, form.form-inline) */
.users-table td.cell-actions { white-space: nowrap; }
.users-table td.cell-actions form.form-inline { display: inline; margin: 0; }
.users-table .row-muted td { opacity: .62; }
.users-table .row-muted td.cell-actions { opacity: 1; }
.users-table .row-edit td { background: var(--bg-subtle); padding: var(--space-md) var(--space-lg); }
/* ---- Rechte am Ort (includes/render-rights.php, R1) - seit v1.48.0 ---- */
.ft-rights-roles { margin: var(--space-sm) 0 var(--space-md); }
.ft-rights-list { display: flex; flex-direction: column; }
.ft-rights-row { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.ft-rights-row:last-child { border-bottom: 0; }
.ft-rights-row.is-capped { opacity: .55; cursor: not-allowed; }
.ft-rights-text { display: flex; flex-direction: column; gap: 2px; }
.ft-rights-desc { font-size: var(--font-xs); color: var(--text-muted); }
.ft-rights-foot { display: flex; justify-content: flex-end; margin-top: var(--space-md); }
/* v1.449.0 Rechte-Baum (includes/render-rights-tree.php, Ralf 14.10.2026): Seiten nach Menue-Gruppen; Spalten wie die Anker-Tafel */
.ft-rights-tree { display: flex; flex-direction: column; gap: 8px; --anc-col: 104px; --anc-arrow: 36px; }
.ft-rights-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-rights-fs[disabled] .ft-anc-sw, .ft-rights-fs[disabled] .ft-anc-reset { cursor: not-allowed; }
.ft-rights-grp { margin: var(--space-md) 0 0; padding-left: 12px; font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ft-rights-cells { display: contents; }
.ft-rights-body { display: flex; flex-direction: column; gap: 8px; }
.ft-rights-note { border-top: 0; white-space: normal; }
.ft-rights-note .text-muted { white-space: normal; }
.ft-anc-row .ft-rights-text { flex-direction: column; align-items: flex-start; white-space: normal; }
.ft-rights-d1 { --d: 1; }
.ft-rights-page.ft-rights-lv0 .ft-rights-body, .ft-rights-page.ft-rights-lv1 .ft-rights-body { opacity: .6; }   /* RS1 v1.450.0: Stufe 1 deckelt - Stufe 2 blass */
.ft-rights-page.ft-anc-root { font-weight: 600; }
.ft-rights-cap { margin: 0; }

/* ==========================================================================================================
   54-bereich-assistent.css - BEREICH: Assistent
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: ft-wizard, wiz
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 54-bereich-assistent --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.40.0: Assistent (ftInitWizard) - Schrittleiste und Schritte in der Optik des Admin-Portals */
.wiz-head-bar { margin-bottom: var(--space-sm); }
.wiz-steps { display: flex; margin: 4px 0 var(--space-md); }
.wiz-sb { flex: 1; text-align: center; position: relative; padding-top: 34px; font-size: var(--font-xs); color: var(--text-muted); cursor: default; }
.wiz-sb::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--border); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; z-index: 1; }
.wiz-sb::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.wiz-sb:first-child::after { display: none; }
.wiz-sb.active::before { background: var(--brand-primary); }
.wiz-sb.done::before { content: "✓"; background: var(--success); }
.wiz-sb.done { cursor: pointer; }
.wiz-sb.active { color: var(--text-primary); font-weight: 600; }
form.wiz-on .form-section.wiz-hidden { display: none; }
form.wiz-on .form-section.ft-acc > .form-section-title { pointer-events: none; }
form.wiz-on .form-section.ft-acc > .form-section-title .accordion-chevron { display: none; }
.wiz-nav { justify-content: flex-end; margin-top: var(--space-md); }
form.wiz-on .ft-acc-bar { display: none; }
form.ft-wizard .wiz-head-bar { gap: var(--space-lg); }
.wiz-nav { justify-content: space-between; }
.ft-wizard-foot { display: none; }
/* v1.40.4: Schieberleiste des Assistenten - gleicher Abstand wie zwischen den Bloecken (der Block traegt schon margin-bottom) */
.wiz-nav { margin-top: 0; }
.wiz-nav .check { margin: 0; }
/* v1.40.5: Schieber "Assistent" auf der Vollseite - gleicher Abstand zum Kopf und zu den Reitern wie zwischen den Karten */
.ft-wizard-back-row { margin: var(--space-lg) 0; padding-left: 4px; }

/* ==========================================================================================================
   55-bereich-dokumente.css - BEREICH: Dokumente
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: doc, ft-file, ft-print
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 55-bereich-dokumente --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.113.0: Anschriften in der Vorgangskarte in Druckreihenfolge - das Anschriftfeld hervorgehoben */
.ft-print-addr { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); margin-top: 8px; }
.ft-print-addr.ft-print-window { border-color: var(--success-border); background: var(--success-light); }
.ft-print-addr-head { font-size: var(--font-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.ft-print-addr-lines { font-size: var(--font-sm, 13px); line-height: 1.45; }
.ft-print-addr-tools { margin-left: auto; }
.ft-print-addr-tools .btn { padding: 2px 6px; }
/* ---- Bilder & Dokumente (includes/render-documents.php) - seit v1.88.0 (D1): Hochladen mit Ziehen, Bildleiste, Hauptbild ---- */
.doc-drop { margin: var(--space-md); padding: var(--space-md); border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
    display: flex; flex-direction: column; gap: var(--space-sm); transition: border-color var(--transition-fast), background var(--transition-fast); }
.doc-drop.is-over { border-color: var(--brand-accent); background: var(--warning-light); }
.doc-drop-hint { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 500; }
.doc-drop-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.doc-drop-row input[type="file"] { flex: 1 1 260px; min-width: 0; }
.doc-drop-type { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.doc-drop-type select { min-width: 200px; }
.doc-images { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.doc-thumb { position: relative; width: 120px; height: 120px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--text-secondary); }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb:hover { border-color: var(--brand-primary); }
.doc-thumb.is-main { border: 2px solid var(--brand-accent); }
.doc-main-star { position: absolute; top: 4px; right: 4px; display: inline-flex; color: var(--brand-accent); background: rgba(255, 255, 255, .9); border-radius: 50%; padding: 2px; }
.doc-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.doc-name > span:not(.icon):not(.ft-star) { overflow: hidden; text-overflow: ellipsis; }
.doc-pop-img img { max-width: 100%; max-height: 320px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.doc-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* v1.159.0 Vorschau vor dem Hochladen ([data-img-preview], core.js) */
.ft-file-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0; padding: var(--space-sm); border: 1px dashed var(--warning-border); border-radius: var(--radius-md); background: var(--warning-light); }
.ft-file-preview figure { margin: 0; width: 96px; display: grid; gap: 4px; }
.ft-file-preview img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ft-file-preview figcaption { font-size: var(--font-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-file-note { font-size: var(--font-sm); color: var(--warning-text); flex: 1 1 160px; }
/* v1.182.0 (Ralf 03.10.2026): Datei-Felder in Optik und Sprache der App statt des System-Knopfs des Browsers - core.js setzt um jedes
   input[type=file] einen Knopf (.ft-file-btn) und den Dateinamen (.ft-file-name); das echte Feld bleibt verdeckt im Formular (.ft-sr) */
.ft-file { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); max-width: 100%; min-width: 0; }
.ft-file-btn { flex: none; }
.ft-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--font-sm); }
.ft-file.has-file .ft-file-name { color: var(--text); }
.doc-drop-row .ft-file { flex: 1 1 260px; }
/* M1 E-Mail-Ablage (v1.436.0, Ralf 13.10.2026): Popup einer Mail - Kopf (Von/An/Datum), Anhaenge als Pillen, abgeschotteter Rahmen fuer HTML-Mails
   (Mail-Inhalt bringt eigene Farben mit, darum immer heller Grund - auch im Dunkelmodus), Textfassung, Vorschlaege mit Schieber */
.mail-head { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-md); font-size: var(--font-sm); }
.mail-head dt { color: var(--text-secondary); font-weight: 500; }
.mail-head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mail-atts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.mail-atts a { text-decoration: none; }
.mail-frame { display: block; width: 100%; height: 55vh; border: thin solid var(--border); border-radius: var(--radius-md); background: var(--ft-off); }
.mail-text, .doc-text { white-space: normal; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; padding: var(--space-sm) var(--space-md); border: thin solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--font-sm); }
/* v1.452.0 (Ralf 14.10.2026, Preisliste mit Spalten): PDF-Text mit Layout - Spalten bleiben stehen (feste Schriftbreite, kein Umbruch, seitlich scrollen) */
.doc-text { margin: 0; white-space: pre; overflow-wrap: normal; font-family: var(--font-mono); font-size: var(--font-xs); line-height: 1.45; tab-size: 4; }
.mail-alt, .doc-alt { margin-top: var(--space-sm); }
.mail-alt summary, .doc-alt summary { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; color: var(--text-secondary); font-size: var(--font-sm); }
/* v1.438.0 (S3): Dokumente - weitere Akten und Vorschlaege wie bei den Mails (dieselbe Optik) */
.mail-links, .doc-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: var(--space-md) 0 0; font-size: var(--font-sm); }
.mail-links a, .doc-links a { text-decoration: none; }
.mail-sub, .doc-sub { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-md) 0 var(--space-sm); font-size: var(--font-base); }
.mail-prop-group, .doc-prop-group { display: grid; gap: var(--space-xs); }
.mail-prop, .doc-prop { display: flex; align-items: center; gap: var(--space-sm); }

/* ==========================================================================================================
   56-bereich-anmeldung.css - BEREICH: Anmeldung
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: login
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 56-bereich-anmeldung --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: var(--space-lg);
}
.login-container {
    width: 100%;
    max-width: 420px;
}
.login-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.login-header {
    text-align: center;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.login-logo {
    width: 56px; height: 56px;
    background: var(--brand-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}
.login-logo .icon svg { stroke: #fff; }
.login-header h1 {
    font-size: var(--font-xl);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}
.login-header p {
    color: var(--text-muted);
    font-size: var(--font-sm);
}
.login-form {
    padding: 0 var(--space-lg) var(--space-lg);
}
.login-form .form-group { margin-bottom: var(--space-md); }
.login-form .btn { margin-top: var(--space-sm); }
.login-footer {
    text-align: center;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}
.login-footer small {
    display: block;
    margin-top: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--font-xs);
}
.login-footer .lang-switcher {
    justify-content: center;
}
/* weisse Bildmarke im Navy-Kasten */
.login-logo-brand img { width: 40px; height: 40px; display: block; }
/* M2 (v1.6.0): Passwort vergessen */
.login-forgot { text-align: center; margin-top: 12px; font-size: 14px; }
.login-forgot a { color: var(--brand-primary-text); }

/* ==========================================================================================================
   57-bereich-kundenportal.css - BEREICH: Kundenportal
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: kp
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 57-bereich-kundenportal --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ---- Flaggen der Portal-Sprachen (KP10, v1.242.0) - Kunden-App (Zugang-Akte) und Kundenportal (Umschalter). Als CSS statt Emoji, weil Windows
   Flaggen-Emojis nur als Buchstaben zeigt. Die Farben sind die der Flaggen selbst (keine Design-Tokens). Neue Portal-Sprache = eine Zeile hier. ---- */
.kp-flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.kp-flag-de { background: linear-gradient(#000000 0 33.34%, #DD0000 33.34% 66.67%, #FFCE00 66.67%); }
.kp-flag-nl { background: linear-gradient(#AE1C28 0 33.34%, #FFFFFF 33.34% 66.67%, #21468B 66.67%); }
.kp-flag-da { background: linear-gradient(90deg, transparent 0 30%, #FFFFFF 30% 42%, transparent 42%), linear-gradient(transparent 0 42%, #FFFFFF 42% 58%, transparent 58%), #C8102E; }
.kp-flag-en { background: linear-gradient(90deg, transparent 0 43%, #C8102E 43% 57%, transparent 57%), linear-gradient(transparent 0 40%, #C8102E 40% 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 37%, #FFFFFF 37% 63%, transparent 63%), linear-gradient(transparent 0 32%, #FFFFFF 32% 68%, transparent 68%), #012169; }
/* KP10b (v1.243.0): weitere waehlbare Portal-Sprachen (lang/languages.php 'portal') - Farben der Flaggen, Wappen weggelassen */
.kp-flag-fr { background: linear-gradient(90deg, #0055A4 0 33.34%, #FFFFFF 33.34% 66.67%, #EF4135 66.67%); }
.kp-flag-it { background: linear-gradient(90deg, #009246 0 33.34%, #FFFFFF 33.34% 66.67%, #CE2B37 66.67%); }
.kp-flag-es { background: linear-gradient(#AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75%); }
.kp-flag-pt { background: linear-gradient(90deg, #006600 0 40%, #FF0000 40%); }
.kp-flag-pl { background: linear-gradient(#FFFFFF 0 50%, #DC143C 50%); }
.kp-flag-sv { background: linear-gradient(90deg, transparent 0 30%, #FECC02 30% 42%, transparent 42%), linear-gradient(transparent 0 40%, #FECC02 40% 60%, transparent 60%), #006AA7; }
.kp-flag-nb { background: linear-gradient(90deg, transparent 0 30%, #00205B 30% 38%, transparent 38%), linear-gradient(transparent 0 44%, #00205B 44% 56%, transparent 56%),
    linear-gradient(90deg, transparent 0 26%, #FFFFFF 26% 42%, transparent 42%), linear-gradient(transparent 0 36%, #FFFFFF 36% 64%, transparent 64%), #BA0C2F; }
.kp-flag-fi { background: linear-gradient(90deg, transparent 0 30%, #002F6C 30% 42%, transparent 42%), linear-gradient(transparent 0 40%, #002F6C 40% 60%, transparent 60%), #FFFFFF; }
.kp-flag-cs { background: linear-gradient(to bottom right, #11457E 0 50%, transparent 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, #11457E 0 50%, transparent 50%) bottom left / 50% 50% no-repeat,
    linear-gradient(#FFFFFF 0 50%, #D7141A 50%); }
/* KP26 (v1.324.0): Kunden-App, Reiter Startseite (Portal-Werkstatt) - Elementliste links, Vorschau rechts (iframe PC/Handy) */
.kp-ws { display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-lg); }
.kp-ws-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.kp-ws-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: thin solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); }
.kp-ws-ico { display: inline-flex; padding: var(--space-xs); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--brand-primary-text); }
.kp-ws-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kp-ws-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ws-txt > :last-child:not(small):not(strong) { align-self: flex-start; margin-top: var(--space-xs); }
.kp-ws-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-sm); }
.kp-ws-prevbox { display: flex; justify-content: center; background: var(--bg-subtle); }
.kp-ws-prev { width: 100%; height: 48rem; border: thin solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); transition: width .2s; }
.kp-ws-prev.kp-ws-prev-phone { width: 24.375rem; }
@media (max-width: 68.75rem) { .kp-ws { grid-template-columns: minmax(0, 1fr); } }
/* v1.325.0: Zeitfenster der Startseiten-Elemente (Popup) und Vorschau zum Zeitpunkt */
.kp-ws-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--space-md); }
.kp-ws-at { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); }
.kp-ws-at input { height: 2rem; padding: 0 var(--space-xs); border: thin solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font: inherit; font-size: var(--font-sm); }
.kp-ws-img { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.kp-ws-img img { max-width: 10rem; max-height: 5rem; object-fit: cover; border: thin solid var(--border); border-radius: var(--radius-sm); }
/* KP27 (v1.330.0): Seitenwahl (Startseite + Infoseiten) und "Sichtbar fuer" im Element-Popup */
.kp-ws-pages { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.kp-ws-aud { display: flex; flex-direction: column; gap: var(--space-xs); max-height: 12rem; overflow-y: auto; padding: var(--space-sm); border: thin solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--space-md); }
.kp-ws-lgprev { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--bg-subtle); }   /* v1.333.0: Vorschau der Anmeldeseite */
.kp-ws-scale { overflow: hidden; }
.kp-ws-scale .kp-ws-prev { transform-origin: top left; max-width: none; }
.kp-pubreq { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: thin solid var(--border); }   /* v1.340.0: Restposten-Anfragen */
.kp-pubreq:last-child { border-bottom: 0; }
.kp-pubreq-msg { margin: var(--space-xs) 0 0; white-space: pre-line; }
.kp-cl-labels input[type=text] { width: 100%; min-width: 7rem; }   /* v1.343.0 */

/* ==========================================================================================================
   58-bereich-pakete-konto.css - BEREICH: Pakete Konto
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: paket, pakete, pay, settings
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 58-bereich-pakete-konto --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* ---- Konditionen als Stufen-Zeilen (Reiter Kaufmaennisch) - seit v1.59.1: "Skonto 1: [3] % innerhalb [14] Tagen" ---- */
.pay-stages .pay-stage { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 6px; }
.pay-stages .pay-stage[hidden] { display: none; }
.pay-stage-label { min-width: 150px; font-weight: 600; color: var(--text-secondary); }
.pay-num { width: 96px; flex: none; }
/* Einstellungen > Allgemein */
.settings-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-section-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.settings-section .form-actions { padding-top: .5rem; }
.settings-section .form-hint { color: var(--text-muted); font-size: .8rem; margin-top: .25rem; display: block; }
/* v1.228.0/v1.229.0: Pakete-Schaufenster (Einstellungen -> Pakete) - formatierte Beschreibung aus der Schaltzentrale */
.pakete-acc { border: none; border-radius: 0; overflow: visible; }
/* v1.230.0 (Ralf: "einen abstand zwischen den akkordion"): Items als eigene Karten */
.pakete-acc .accordion-item { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-sm); overflow: hidden; }
.pakete-acc .accordion-item:last-child { margin-bottom: 0; }
.pakete-acc .accordion-header { gap: var(--space-sm); }
.pakete-acc .paket-inhalt { padding: var(--space-md) var(--space-lg); }
/* v1.229.0 (Ralf: "zu dicht am rand!!!") */
.pakete-acc .accordion-header .btn { margin-left: auto; }
.pakete-acc .accordion-header .accordion-chevron { margin-left: var(--space-sm); }
.paket-beschreibung p { margin: 0 0 var(--space-sm); }
.paket-beschreibung h4 { margin: var(--space-sm) 0 var(--space-xs); font-size: 0.95rem; }
.paket-beschreibung ul, .paket-beschreibung ol { margin: 0 0 var(--space-sm) 1.2em; }
.paket-preise { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
/* v1.231.0/v1.232.0: Werbetext, LEERZEILE, Kosten-Block, LEERZEILE, Pillen */
.paket-preise-titel { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.paket-preise-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
/* v1.232.0 (Ralf): Preis+Jahrespreis in einer Reihe, Extras in einer Reihe */
.paket-bausteine { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* v1.237.0: Mengen-Limits als Gruppen-Zeilen (ein Symbol je Bereich) + Erklaer-Tooltip */
.paket-lim { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; margin-top: var(--space-xs); }
.paket-lim-zeile { font-size: var(--font-sm); }
.paket-lim-zeile .icon { color: var(--text-muted); vertical-align: -3px; }
/* v1.238.0 (Ralf): schoen mittig wie bei Benutzer/Speicher */
.paket-lim-voll { grid-column: 1 / -1; }
.paket-lim-grp { font-weight: 500; }

/* ==========================================================================================================
   59-bereich-maskenbau.css - BEREICH: Maskenbau
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: ft-anc, ft-layout, ft-lgrid
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 59-bereich-maskenbau --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

.ft-anc-head, .ft-anc-root, .ft-anc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: calc(12px + var(--anc-arrow)); }
.ft-anc-head { padding-left: 12px; font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.ft-anc-root { padding-left: 12px; padding-top: 8px; padding-bottom: 8px; background: var(--bg-subtle); border-radius: var(--radius-md); }
.ft-anc-root.ft-anc-leaf { background: none; border: 1px solid var(--border); font-weight: 600; }
/* Einzelpunkt ohne Unterpunkte (v1.77.0) */
.ft-anc-sec .form-section-title { gap: 12px; }
.ft-anc-sec .form-section-title .ft-anc-label { flex: 1 1 auto; }
.ft-anc-rows { display: flex; flex-direction: column; }
.ft-anc-row { padding-top: 6px; padding-bottom: 6px; padding-left: calc(12px + var(--d, 0) * 20px); border-top: 1px solid var(--border); }
.ft-anc-rows .ft-anc-row { padding-right: calc(var(--anc-arrow) - 3px); }
/* Innenabstand des aufgeklappten Blocks ausgleichen - Spalten buendig mit Titel und Kopf */
.ft-anc-row.k-block { font-weight: 600; background: var(--bg-subtle); }
.ft-anc-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ft-anc-cells { display: grid; grid-template-columns: repeat(3, var(--anc-col)); gap: 8px; flex: none; align-items: center; }
.ft-anc-head .ft-anc-cells span { text-align: center; }
.ft-anc-cell { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 400; grid-column: 1; }
.ft-anc-cell[data-anchor-type="edit"] { grid-column: 2; }
.ft-anc-cell[data-anchor-type="add"] { grid-column: 3; }
.ft-anc-colhead { grid-column: 1; text-align: center; font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.ft-anc-cell .ft-anc-sw { margin: 0; }
.ft-anc-cell.is-inh .ft-anc-sw { opacity: .55; }
.ft-anc-inh { font-size: 12px; color: var(--text-muted); min-width: 28px; }
/* "Vorgabe" (v1.75.0, vorher "erbt") */
.ft-anc-reset { border: 0; background: none; padding: 0; width: 28px; color: var(--brand-primary); cursor: pointer; display: inline-flex; justify-content: center; }
.ft-anc-reset:hover { color: var(--brand-accent); }
.ft-anc-cell [hidden] { display: none; }
/* v1.93.1 / v1.93.2 (Ralf: "warum Optik geaendert?"): die Zeile "uebergeordnet" sieht aus wie jede andere Zeile; "gesperrt" nur als
   kleiner Text an Stelle von "Vorgabe" - sonst keine eigene Optik */
.ft-anc-cell .ft-anc-blk { font-size: 12px; color: var(--warning-text); white-space: nowrap; }
/* Maskenbau L1 (v1.215.0): Huellen und Leerraum des Layout-Registers (assets/js/layout.js, Maskenbau-Konzept 2. Fassung) */
.ft-layout-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06)); background: var(--bg-elevated, var(--bg)); }
.ft-layout-acc { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ft-layout-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: var(--bg-subtle); color: var(--text); padding: 10px 12px; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.ft-layout-acc-head:hover { filter: brightness(0.98); }
.ft-layout-acc-chev { width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
.ft-layout-acc-head[aria-expanded="false"] .ft-layout-acc-chev { transform: rotate(-45deg); }
.ft-layout-acc-body { padding: var(--space-md); }
.ft-layout-acc-body .form-section-title:first-child { display: none; }
/* Titel steht schon im Akkordeon-Kopf */
/* v1.272.0 (Ralf-Bild Preisprobe: Titel doppelt): Karten-Bloecke tragen ihren Titel im card-header - im Akkordeon steht er schon im Kopf.
   Nur Titel = ganzer Kopf weg; hat der Kopf Knoepfe (Artikelbilder: Hochladen), bleiben die Knoepfe stehen */
.ft-layout-acc-body > .card-header:has(> h2:only-child) { display: none; }
.ft-layout-acc-body > .card-header > h2:first-child:not(:only-child) { display: none; }
.ft-layout-spacer { min-height: 1px; }
.ft-layout-voll.ft-layout-card, .ft-layout-voll.ft-layout-acc { height: 100%; display: flex; flex-direction: column; }
.ft-layout-voll.ft-layout-acc .ft-layout-acc-body { flex: 1; }
/* L1b (v1.217.0): Sammel-Lauf eines Quell-Reiters - unsichtbar, bis layout.js aufgeraeumt hat (nur verlegte Bloecke sichtbar) */
.ft-layout-src { display: none; }
.ft-layout-src.ft-layout-src-ready { display: block; }
/* nur solange es Buehnen-Stueck ist */
/* Breite im 12er-Raster (Bloecke und Felder): Start bleibt frei (auto), damit Nachbarn nebeneinander laufen; ft-lbrk = neue Zeile */
/* v1.276.0: Gewicht 0,2,0 - components/tabs.css (laedt NACH styles.css) setzt .form-col-span-2 { grid-column: span 2 } mit 0,1,0 und
   gewann sonst gegen die Layout-Breite (Einstellungen: Firmenname blieb schmal) */
:is(.ft-lgrid, .ft-stage) .ft-lspan-2 { grid-column: auto / span 2; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-3 { grid-column: auto / span 3; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-4 { grid-column: auto / span 4; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-6 { grid-column: auto / span 6; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-8 { grid-column: auto / span 8; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-9 { grid-column: auto / span 9; }
:is(.ft-lgrid, .ft-stage) .ft-lspan-12 { grid-column: auto / span 12; }
:is(.ft-lgrid, .ft-stage) .ft-lbrk { grid-column-start: 1; }
/* Maskenbau 2 (v1.371.0, Ralf 09.10.2026: "Bloecke mittels eines Koordinatensystems verschieben"): Raster mit KOORDINATEN - layout.js
   (ftLayout.gridApply) setzt je Block --ft-gx/--ft-gy/--ft-gw/--ft-gh (errechnete Werte wie order, CSS-Muster 7). Gewicht 0,3,0 gegen
   :is(.ft-lgrid, .ft-stage) .ft-lspan-N (0,2,0), .ft-lrow-N und .tab-content.ft-stage .ft-ldef (0,3,0, steht davor). Erst ab 901 px - darunter
   gilt die Regel der Buehne (einspaltig, Reihenfolge = Lesereihenfolge ueber order). */
@media (min-width: 901px) {
  .ft-stage .ft-layout-pos.ft-layout-pos { grid-column: var(--ft-gx) / span var(--ft-gw); grid-row: var(--ft-gy) / span var(--ft-gh); }
}
/* v1.372.0 (Ralf 09.10.2026: "die einzelnen Felder im Block auch innerhalb verschieben und die Breite veraendern"): dasselbe eine Ebene tiefer -
   Felder im 12er-Raster des Blocks (.ft-lgrid). Eigene Werte --ft-fx/-fy/-fw/-fh (die Werte des Blocks erben sich sonst durch). Gewicht 0,3,0
   gegen :is(.ft-lgrid, .ft-stage) .ft-lspan-N / .ft-lbrk (0,2,0) und .form-col-span-2 (0,1,0, components/tabs.css). Ab 701 px - darunter
   Felder untereinander wie bisher (.ft-lgrid .ft-lit 1 / -1). */
@media (min-width: 701px) {
  .ft-lgrid .ft-layout-fpos.ft-layout-fpos { grid-column: var(--ft-fx) / span var(--ft-fw); grid-row: var(--ft-fy) / span var(--ft-fh); }
}
/* Inhalt eines Blocks (v1.273.0): EIN 12er-Raster fuer Felder, Texte, Knoepfe, Tabellen. Formulare und Formular-Raster darin sind nur
   fuers Auge durchlaessig (.ft-lpass) - Gewicht 0,2,0 gegen .form-grid / .form-grid.form-grid-3 (gleich, steht spaeter) */
.ft-lgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-md); }
.ft-lgrid .ft-lpass { display: contents; }
.ft-lgrid .ft-lpass[hidden] { display: none; }
:where(.ft-lgrid, .ft-lgrid .ft-lpass) > * { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .ft-lgrid .ft-lit { grid-column: 1 / -1; }
}
/* Maskenbau v1.273.0 (Ralf: "Abstaende zur naechsten oberen und unteren Zeile einstellen"): Stufen statt Pixel, nur Tokens.
   Elemente im Block: Gewicht 0,2,0 gegen .form-group / .ft-lv-kompakt .form-group (stehen davor). Bloecke auf der Buehne: 0,4,0 gegen
   .tab-content.ft-stage .ft-stage-blk { margin: 0 } (0,3,0). Im Raster fallen Abstaende nie zusammen - oben und unten addieren sich. */
.ft-lgrid .ft-lmt-kein { margin-top: 0; }
.ft-lgrid .ft-lmt-klein { margin-top: var(--space-xs); }
.ft-lgrid .ft-lmt-mittel { margin-top: var(--space-md); }
.ft-lgrid .ft-lmt-gross { margin-top: var(--space-xl); }
.ft-lgrid .ft-lmb-kein { margin-bottom: 0; }
.ft-lgrid .ft-lmb-klein { margin-bottom: var(--space-xs); }
.ft-lgrid .ft-lmb-mittel { margin-bottom: var(--space-md); }
.ft-lgrid .ft-lmb-gross { margin-bottom: var(--space-xl); }

/* ==========================================================================================================
   60-bereich-stammdaten.css - BEREICH: Stammdaten
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: art, co, cty, ft-address, ft-alt, ft-link, ft-money, ft-tiers, ft-ver, lists, ns, tk, trans, tv
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 60-bereich-stammdaten --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

.ft-money .nav-item.nav-money-in .icon { color: var(--money-in-soft); }
.ft-money .nav-item.nav-money-out .icon { color: var(--money-out-soft); }
.ft-money .content-header h1.ft-money-in > .icon { color: var(--money-in); }
.ft-money .content-header h1.ft-money-out > .icon { color: var(--money-out); }
[data-theme="dark"] .ft-money .content-header h1.ft-money-in > .icon { color: var(--money-in-soft); }
[data-theme="dark"] .ft-money .content-header h1.ft-money-out > .icon { color: var(--money-out-soft); }
/* v1.109.0: Symbole der Verknuepfungen (includes/LinkIcons.php, Bedien-Muster 57) - Farbe = Seite: Adresse gruen, Ort violett, Verbindung grau */
.ft-link-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: var(--font-xs); font-weight: 600; line-height: 1.6; text-decoration: none; border: 1px solid transparent; }
.ft-link-pill:hover { text-decoration: none; filter: brightness(0.97); }
.ft-link-label { display: inline-flex; vertical-align: middle; width: 18px; height: 18px; border-radius: 5px; align-items: center; justify-content: center; }
.ft-link-addr { background: var(--success-light); color: var(--success-text); border-color: var(--success-border); }
.ft-link-site { background: var(--accent-light); color: var(--accent-text); }
.ft-link-conn { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
/* v1.136.0 (Bedien-Muster 69): Versionen eines Vorgangs - Pille im Kopf mit Liste (schwebend wie die Hilfe), gelbe Leiste bei ersetzter Version */
.ft-ver-wrap { margin-left: 8px; }
.ft-ver-btn { cursor: pointer; font: inherit; font-size: var(--font-xs); font-weight: 600; }
.ft-ver-btn:hover, .ft-ver-btn[aria-expanded="true"] { filter: brightness(0.96); }
.ft-ver-pop { padding: 6px; min-width: 300px; }
.ft-ver-pop-title { display: block; padding: 4px 8px 6px; font-size: var(--font-xs); color: var(--text-secondary); }
.ft-ver-row { display: grid; grid-template-columns: max-content max-content 1fr max-content; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm, 6px);
  color: var(--text-primary); text-decoration: none; }
.ft-ver-row:hover { background: var(--bg-subtle); text-decoration: none; }
.ft-ver-row.is-me { background: var(--info-light); }
.ft-ver-no { font-weight: 600; }
.ft-ver-sum { text-align: right; }
.ft-ver-banner { flex-wrap: wrap; }
.ft-ver-banner-text { flex: 1 1 auto; }
.ft-ver-banner-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ft-link-jumps { display: inline-flex; gap: 4px; margin-left: 2px; }
.ft-link-jump { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; }
.ft-link-jump:hover { filter: brightness(0.95); text-decoration: none; }
/* T1 (v1.7.0): Support-Tickets */
.tk-thread { display: flex; flex-direction: column; gap: 12px; }
.tk-msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); }
.tk-kunde { border-left: 4px solid var(--brand-accent); background: var(--warning-light); }
.tk-team { border-left: 4px solid var(--brand-primary); }
.tk-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.tk-body { font-size: 15px; line-height: 1.55; }
.tk-files { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.tk-files a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); text-decoration: none; }
/* v1.39.0: Adresse mit Tipp-Suche (Geocoder::field / ftInitAddress) */
.ft-address { display: contents; }
.ft-address-search { position: relative; }
.ft-address-search .ft-combo-list { top: 100%; }
.ft-address-geo { font-size: var(--font-sm); color: var(--danger); padding: 8px 0; }
.ft-address-geo.ok { color: var(--success); font-family: var(--font-mono, monospace); }
/* ---- Einstellungen Unternehmen (companies/settings.php) - seit v1.44.0 ---- */
.cty-name { display: inline-flex; align-items: center; gap: var(--space-sm); }
.cty-del { border-top: 1px solid var(--border); margin-top: var(--space-md); padding-top: var(--space-md); align-items: flex-end; }
.cty-del .form-group { margin-bottom: 0; }
/* ---- Adressliste (companies/index.php) - seit v1.50.2 ----
   Symbole der gesetzten abweichenden Adressen hinter dem Namen (Tooltip = Rolle: Name), Land als ISO-Kuerzel vor PLZ/Ort. */
.co-roles { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-sm); vertical-align: middle; color: var(--text-muted); }
.co-role { display: inline-flex; cursor: help; }
.co-role:hover { color: var(--tile-navy-fg); }
.co-place { white-space: nowrap; }
.co-cc { display: inline-block; min-width: 24px; font-size: var(--font-xs); font-weight: 600; color: var(--text-muted); letter-spacing: .3px; }
.co-typecell .co-type + .co-type { margin-left: 4px; }
/* A2 (v1.59.0): mehrere Rollen */
.co-type { display: inline-flex; color: var(--text-secondary); cursor: help; }
.co-type:hover { color: var(--tile-navy-fg); }
.co-typecell .co-type { display: inline-block; width: 18px; text-align: center; vertical-align: middle; }
.co-typecell .expand-caret { display: inline-block; margin-left: 4px; color: var(--text-muted); cursor: pointer; vertical-align: middle; }
/* ---- v1.65.0 (global fuer Listen nach Schema, .co-list): Werte wie Nummer, Telefon, E-Mail brechen nie um (td.nw, .co-nr); wird die
   Tabelle breiter als ihre Karte, scrollt sie IN der Karte waagerecht statt die Seite zu verbreitern ---- */
.co-list td.nw, .co-list td.co-nr, .co-list td.co-place { white-space: nowrap; }
/* AR1 (v1.259.0): Alternativartikel im Stammformular - Zeile mit Griff, Direktlink und Entfernen; Reihenfolge per Ziehen */
.ft-alt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-sm); }
.ft-alt-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ft-alt-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-alt-row .ft-drag { cursor: grab; color: var(--text-secondary); display: inline-flex; flex: none; }
.ft-alt-remove { flex: none; }
.ft-alt-empty { margin: 0; }
/* A3b (v1.92.0): Staffelpreise Verkauf und Einkauf nebeneinander unter dem Formular des Reiters Preise */
.ft-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); align-items: start; }
.ft-tiers > .card { margin: 0; }
@media (max-width: 1399px) {
  .ft-tiers { grid-template-columns: minmax(0, 1fr); }
}
.art-image { display: flex; align-items: center; justify-content: center; max-width: 520px; min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); overflow: hidden; }
.art-image img { display: block; max-width: 100%; max-height: 380px; object-fit: contain; }
.art-image-empty { flex-direction: column; gap: var(--space-sm); color: var(--text-secondary); }
.ft-tiers { margin-top: 0; }
.ns-money-in { color: var(--money-in, var(--success-text)); }
.ns-money-out { color: var(--money-out, var(--danger-text)); }
.ns-name { display: inline-flex; align-items: center; gap: 8px; }
.ns-chips { display: inline-flex; gap: 6px; margin-top: 6px; }
.ns-preview { margin: var(--space-sm) 0 var(--space-md); padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-subtle); display: flex; gap: 10px; align-items: center; }
.ns-preview code { font-size: var(--font-md); font-weight: 600; color: var(--brand-primary-text); }
/* ==================================================================
   L5 (v1.146.0): aus Style-Inseln in Seiten uebernommen - EIN Stylesheet. Was in der Seite eine allgemeine Klasse ueberschrieb
   (.search-box, .form-hint, .form-actions), gilt hier nur noch im Bereich der Seite, damit sich sonst nichts aendert.
   ================================================================== */
/* Einstellungen > Uebersetzungen */
.trans-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.trans-filter-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    flex-wrap: wrap;
}
.trans-stats { margin-left: auto; display: flex; gap: .5rem; }
.trans-table-wrap { overflow-x: auto; }
.trans-table { font-size: .875rem; }
.trans-table td { vertical-align: middle; }
.trans-default { max-width: 260px; word-break: break-word; }
.trans-edit-cell { position: relative; }
.trans-display { cursor: pointer; display: block; padding: .2rem .4rem; border-radius: 4px; min-height: 1.5rem; }
.trans-display:hover { background: var(--hover-bg); }
.trans-edit-hint { font-size: .7rem; color: var(--text-muted); display: none; }
.trans-display:hover + .trans-edit-hint { display: block; }
.trans-toolbar .search-box { flex: 1; min-width: 150px; max-width: 260px; }
/* Einstellungen > Listen */
.lists-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    min-height: 400px;
}
.lists-sidebar {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lists-sidebar-header {
    padding: .75rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.lists-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lists-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.lists-content-header h4 { margin: 0; font-size: 1rem; }
/* ============================================================
   v1.154.0 ARTIKELBILDER (Ralf 01.10.2026) - Bildleiste ca. 4 je Reihe, Ziehen am Griff, Bild 1 = Hauptbild; Grossansicht (global)
   ============================================================ */
.art-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-sm); }
@media (min-width: 1200px) {
  .art-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.art-gal-item { position: relative; margin: 0; aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.art-gal-item > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.art-gal-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.art-gal-item:first-child { border-color: var(--warning-border); box-shadow: inset 0 0 0 1px var(--warning-border); }
.art-gal-main { position: absolute; left: 6px; bottom: 6px; display: none; pointer-events: none; }
.art-gal-item:first-child .art-gal-main { display: inline-flex; }
/* Bild 1 - folgt dem Ziehen ohne Neuladen */
.art-gal-drag { position: absolute; top: 6px; left: 6px; display: inline-flex; padding: 2px; border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-secondary); border: 1px solid var(--border); cursor: grab; }
.art-gal-item.is-dragging { opacity: .55; }
.art-gallery-empty { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); }
/* v1.393.0 Bilder auf die Karte ziehen (core.js [data-dropzone] mit data-dropzone-form): Karte hebt sich beim Ueberfahren mit Dateien hervor */
.art-img-drop.is-over { outline: 2px dashed var(--brand-accent); outline-offset: -2px; background: var(--warning-light); }
/* v1.164.0 BAUM-AKKORDEON (Bedien-Muster 87, core.js [data-tree]): Einrueckung je Ebene, Pfeil zum Auf-/Zuklappen, Ebene 1 hinterlegt */
.tv-name { display: flex; align-items: center; gap: 8px; padding-left: calc(var(--tv-d, 0) * 26px); }
.tv-chev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: transform var(--transition-fast); }
.tv-chev:hover, .tv-chev:focus-visible { background: var(--bg-subtle); outline: none; }
.tv-chev.open { transform: rotate(90deg); }
.tv-chev.is-empty { cursor: default; }
.tv-row.tv-d0 > td { background: var(--bg-subtle); }
.tv-row .ft-lvl { position: static; }
/* v1.389.0: Symbol der gewaehlten Warengruppe VOR dem Auswahlfeld (Sichtkontrolle) - Kasten .ft-il-ic (10-symbol), Feld fuellt den Rest */
.art-sel-ic { display: flex; align-items: center; gap: var(--space-sm); }
.art-sel-ic > select { flex: 1; min-width: 0; }

/* ==========================================================================================================
   61-bereich-sonstige.css - BEREICH: Sonstige
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: -
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 61-bereich-sonstige --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-lg);
}
.action-cell {
    white-space: nowrap;
    display: flex;
    gap: 4px;
    align-items: center;
}
/* ============================================================
   16. HELPERS
   ============================================================ */
/* Techniker-Punkt */
.tech-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
/* Skill Tags */
.skill-tag {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent-text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-xs);
    margin: 1px 2px;
}
/* Code Highlight */
code.highlight {
    background: var(--warning-light);
    color: var(--warning-text);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-family: var(--font-mono);
}
/* Flex & Spacing Helpers */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
/* v1.100.0: Zahnrad direkt an einem Listenfeld (includes/ListRegistry.php) - wer die Liste pflegen darf, kommt von hier auf die Pflegeseite */
.ft-list-gear { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--text-muted); }
.ft-list-gear:hover, .ft-list-gear:focus-visible { color: var(--brand-primary-text); }
/* v1.123.0: weitere Anschriften als Sprung-Symbole in der Kopfzeile des Anschriftfelds (LinkIcons::jump) */
/* v1.126.0: Baustein "Feld sperrt Bereich" ([data-locks]) - gesperrter Bereich sichtbar ausgegraut */
fieldset.ft-lock-area { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ft-lock-area[disabled] { opacity: 0.5; }
/* Spinner */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
/* ============================================================
   CREDENTIALS BOX (User Created)
   ============================================================ */
.credentials-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
@media (max-width: 1024px) {
  /* ============================================================
     17. RESPONSIVE
     ============================================================ */
  .dashboard-grid { grid-template-columns: 1fr; }
}
#forgot .hint { font-size: 13px; color: var(--text-muted); margin: 6px 0 10px; }
/* K1 (v1.17.0): Nur Ansicht - Leiste und gesperrte Bereiche (Muster der Schaltzentrale, ro-banner / data-locked) */
.ro-banner { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand-accent); border-radius: var(--radius-md); background: var(--card-bg); color: var(--brand-primary-text); font-size: var(--font-sm); font-weight: 600; }
.ro-banner-danger { border-left-color: var(--danger); color: var(--danger-text); background: var(--danger-light); }
/* v1.23.0: Entwickler-Hinweise (devhints.js) - gepunktete Unterstreichung, damit man sieht, wo ein Tooltip liegt */
.ft-devhint { text-decoration: underline dotted rgba(242,169,0,.6); text-underline-offset: 3px; cursor: help; }
.ft-star { color: var(--brand-accent); display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ft-star .icon, .ft-star svg { fill: var(--brand-accent); }
.ft-live-busy { opacity: .6; transition: opacity .15s; }
.ft-live-busy { opacity: .6; transition: opacity .15s; }
/* v1.42.2: Aufklapp-Pfeil als eigenes Ziel */
.expand-caret { cursor: pointer; padding: 4px 6px; margin-left: -6px; border-radius: 4px; }
.expand-caret:hover { background: var(--border); }
/* ---- Vorschau "Ansicht als ..." (R2, includes/Preview.php + render-rights.php) - seit v1.49.0 ----
   Gelbe Leiste zwischen Seitenkopf und Inhalt, bleibt beim Scrollen oben; ausserhalb von .content-body, damit die
   Nur-Ansicht-Sperre (data-locked) den Knopf "Vorschau beenden" nicht mitsperrt. */
.ft-preview-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
    padding: 10px var(--space-xl); background: var(--warning-light); color: var(--warning-text); border-bottom: 1px solid var(--warning-border); font-size: var(--font-sm); }
.ft-preview-bar form { margin-left: auto; }
/* ---- Matchcode (companies/tabs/tab-stammdaten.php) - seit v1.51.0: tippt sichtbar in Grossbuchstaben (gespeichert wird ohnehin gross) */
.ft-upper { text-transform: uppercase; }
.ft-upper::placeholder { text-transform: uppercase; }
.ft-drag { display: inline-flex; color: var(--text-muted); cursor: grab; touch-action: none; border-radius: var(--radius-sm); }
.ft-drag:focus-visible { outline: 2px solid var(--brand-accent); }
.ft-itemflags { display: inline-flex; gap: 4px; vertical-align: middle; }
.ft-std { display: inline-flex; color: var(--brand-accent); }
.ft-std svg { fill: currentColor; }
.ct-list td { white-space: nowrap; }
/* ---- Akten-Kopf (v1.68.0, Ralf 28.09.2026, Bedien-Muster 35): Name steht oben im Seitenkopf neben dem Symbol; die Kopfkarte darunter ist
   EINE schmale Zeile - Pillen vorn (Aktiv, Art, Funktion, Herkunft), dann die Angaben (Nr., Ort, Zuordnung, Telefon ...). Gilt fuer
   Adresse, Einsatzort, Kontakt und jede kommende Akte (.company-header-card.record-head). ---- */
.company-header-card.record-head { padding: 10px var(--space-md); min-height: 0; }
.company-header-card.record-head:not(:has(.badge, .meta-item, .ft-star)) { display: none; }
/* v1.152.0: Hoehe bleibt gleich */
.rt-head { margin-bottom: var(--space-md); }
/* ---- v1.73.0 / v1.74.0: Rechte-Tafel der Anker als Akkordeon mit Schiebern (Ralf: "Optik wie in den Bloecken") ----
   Feste Spalten: sehen | aendern | ergaenzen (Aktionen: ausfuehren in Spalte 1), Kopf einmal oben; rechts Platz fuer den Akkordeon-Pfeil */
.ft-anchor-panel { display: flex; flex-direction: column; gap: 8px; --anc-col: 104px; --anc-arrow: 36px; }
.ft-name-box { min-height: 60px; resize: vertical; }
/* v1.86.1 (Ralf): Gefahrenzone als roter Muelleimer rechts in der Reiterleiste; schneller Tooltip (data-tip, core.js) nur ohne sichtbaren Namen */
.ft-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ft-tip { position: fixed; z-index: 10001; pointer-events: none; background: var(--brand-primary); color: #fff; font-size: 13px; line-height: 1.3; padding: 5px 9px;
    border-radius: 6px; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; transition: opacity .08s; }
.ft-tip.is-on { opacity: 1; }
.ta-right, input.ta-right { text-align: right; }
/* G2 (v1.139.0, Bedien-Muster 72): Knopfleiste des Belegs (Weiterfuehren), Sperr-Hinweis, Belegkette, Fortschritt je Position */
.ft-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.ft-act { gap: 2px; padding: 0 10px; min-width: var(--ctl-h); justify-content: center; }
/* v1.149.0 Bedien-Muster 78: Aktionsknopf nur mit Symbolen */
.ft-doc-locked { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); background: var(--info-light); color: var(--info-text); border: 1px solid var(--info-border); font-size: var(--font-sm); }
.ft-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ft-bar > span { display: block; height: 100%; background: var(--success); }
/* G3b (v1.141.0): Popup "Positionen uebernehmen" - Tabelle scrollt in sich, schmales Mengenfeld */
.table-scroll { overflow-x: auto; max-height: 60vh; overflow-y: auto; margin-bottom: var(--space-md); }
.ft-input-qty { width: 90px; }
.key-code { font-size: .78rem; background: var(--card-bg); padding: .15rem .4rem; border-radius: 4px; }
/* L5 (v1.146.0): Klassen, die im Markup standen, aber keine Regel hatten (Analyse 01.10.2026). Bewusst schlicht und mit den
   vorhandenen Tokens - Aussehen wie gemeint, ohne neue Farben. */
.link-primary:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }
.inline-form { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.ft-value-hint { font-variant-numeric: tabular-nums; }
.ft-gap-top { margin-top: var(--space-sm); }
.ft-gap-bottom { margin-bottom: var(--space-md); }
/* v1.152.0: rechter Block der Leiste */
.ft-subtiles { margin-top: calc(-1 * var(--space-sm)); margin-bottom: var(--space-md); }
.cat-img-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.table-scroll.imp-map-wrap { max-height: none; overflow-y: visible; }
/* v1.177.0 (Bedien-Muster 90, Spalten global): gruener Haken in Ja/Nein-Spalten der Tabellenlisten (rabattfaehig, Lagerartikel ...) */
.ft-col-ok { display: inline-flex; color: var(--success); vertical-align: middle; }
/* v1.188.0 (PM1 Preismatrix): zwei Eingaben nebeneinander in einer Formularzelle (Preis + Preiseinheit, EK von - bis, Faktor + Rundung) */
.ft-field-row { display: flex; gap: var(--space-sm); align-items: center; }
.ft-field-row > * { flex: 1; min-width: 0; }
.lim-tip { position: relative; cursor: help; }
.lim-tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    background: var(--sidebar-bg);
    color: #f1f5f9;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    width: max-content;
    max-width: 260px;
    z-index: 300;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}
/* PMZ (v1.214.0): fester Feldwert anstelle eines Eingabefelds (z. B. Artikel einer Matrix-Zeile beim Bearbeiten) */
.ft-static { display: flex; align-items: center; gap: var(--space-xs); min-height: 38px; padding: 0 var(--space-sm); border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); }
/* Sammel-Lauf: verstecktes Formular bleibt zu (sonst zeigte contents seinen Inhalt) */
:where(.ft-stage, .ft-stage-pass) > * { grid-column: 1 / -1; }
/* alles ohne Layout-Klasse (Speichern-Leiste, Hinweise) ueber die volle Breite */
:where(.ft-stage, .ft-stage-pass) > .btn { justify-self: start; }
.ft-lrow-2 { grid-row-end: span 2; }
.ft-lrow-3 { grid-row-end: span 3; }
/* E2 (v1.276.0): Karten und Abschnitte der Einstellungen mit Anker (Anchor::begin(..., 'ft-blk', true)) - sie behalten ihr eigenes Aussehen,
   es kommt KEIN .form-section dazu (keine Linie, kein Innenabstand, kein Akkordeon durch core.js); ft-blk-plain = reine Huelle um Bereiche */
.ft-blk { min-width: 0; }
.ft-blk-plain { display: block; }

/* ==========================================================================================================
   62-bereich-mustertafel.css - BEREICH: Mustertafel
   Zweck:   Besonderheiten dieses Bereichs - gestaltet NUR eigene Klassen; Bausteine nur ueber deren Varianten
   Praefixe: ft-mt
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 62-bereich-mustertafel --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.318.0 aus der alten styles.css (Reihenfolge der Regeln unveraendert)
   ========================================================================================================== */

/* v1.318.0 Mustertafel (Bereich): Popup und Meldungen stehen hier statisch im Fluss statt ueber der Seite */
.ft-mt-sec { margin-bottom: var(--space-lg); }
.ft-mt-modal .modal { position: static; transform: none; opacity: 1; visibility: visible; max-width: 520px; box-shadow: var(--shadow-md); }
.ft-mt-toasts { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); max-width: 420px; }
.ft-mt-toasts .toast { position: static; transform: none; opacity: 1; }
.ft-mt-side { margin-top: var(--space-md); }
.ft-mt-side .ft-modal-side { position: relative; z-index: auto; box-shadow: var(--shadow-md); }   /* v1.442.0: Seitenfenster an Ort und Stelle */
.ft-mt-pv { margin-top: var(--space-md); max-width: 720px; }
.ft-mt-pv .ft-lb-pv { width: 100%; height: auto; }   /* v1.445.0: PDF-Betrachter an Ort und Stelle */
.ft-mt-pv .ft-lb-pv-page { width: 100%; padding: var(--space-lg); color: var(--pdf-ink); }
.ft-mt-pv .ft-lb-pv-mark { position: static; }
.ft-mt-notify { margin-top: var(--space-md); align-items: flex-start; }   /* v1.458.0 (H1): Hinweise an Ort und Stelle */
.ft-mt-notify .ft-notify-panel, .ft-mt-notify .ft-notify-cards { position: relative; top: auto; right: auto; bottom: auto; z-index: auto; }

/* ==========================================================================================================
   63-bereich-dokumenteneingang.css - BEREICH: Dokumenten-Eingang
   Zweck:   Dokument-Ansicht (Text wie im Original, Zeilen nach Art eingefaerbt) und "Zeile zerlegen" (Rollen-Auswahl, Wort-Kacheln)
   Praefixe: oi
   STATUS:  GESPERRT (docs/css-sperre.json) - Aenderung nur, wenn dieser Block ausdruecklich geoeffnet wird:
            php tools/css_build.php --open 63-bereich-dokumenteneingang --grund "..."  (danach Bildvergleich neu aufnehmen)
   Katalog: docs/Bausteinkatalog.md - entstanden v1.351.0, v1.352.0 zugeordnete Zeilen hinterlegt, v1.353.0 Rollen-Gruppen und Rueckmeldung (Ralf 08.10.2026: "Zeilen markieren, die er nicht zuordnen kann - optisch
            anzeigen; die Vorschau ungefaehr so aufbereitet wie das Original; eine Zeile noch kleinteiliger zerlegen")
   ========================================================================================================== */

/* Dokument-Ansicht: Festbreitenschrift, Abstaende wie im Original (pdftotext -layout), waagerecht scrollen statt umbrechen */
.oi-doc { font-family: var(--font-mono); font-size: var(--font-xs); line-height: 1.7; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); padding: var(--space-xs) 0; }
.oi-row { display: flex; white-space: pre; min-height: 1.7em; border-left: 0.25rem solid transparent; padding-right: var(--space-md); }
.oi-tx[data-modal] { cursor: pointer; }
.oi-row:hover .oi-tx[data-modal], .oi-tx[data-modal]:focus-visible { text-decoration: underline dotted; outline: none; }   /* v1.355.0 Klick auf den Text = Zeile zerlegen, das Kaestchen links markiert */
.oi-sel, .oi-sel-gap { flex: 0 0 auto; width: 1rem; margin: 0 0.35rem 0 0.4rem; align-self: center; }
.oi-picked { box-shadow: inset 0 0 0 2px var(--text-muted); }
.oi-bulk { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); }
.oi-k-ship { border-left-color: var(--accent-text); background: var(--success-light); }
.oi-ship { font-size: var(--font-sm); line-height: 1.5; padding: var(--space-xs) 0; }
.oi-no { flex: 0 0 auto; width: 4ch; padding-right: 1ch; text-align: right; color: var(--text-muted); user-select: none; }
.oi-tx { flex: 1 0 auto; color: var(--text); }
.oi-marked .oi-no { color: var(--text); font-weight: 700; }
/* Art der Zeile */
.oi-k-pos.oi-t-green, .oi-k-extra.oi-t-green { border-left-color: var(--success); }
.oi-k-pos.oi-t-yellow, .oi-k-extra.oi-t-yellow { border-left-color: var(--warning); }
.oi-k-pos.oi-t-red, .oi-k-extra.oi-t-red { border-left-color: var(--danger); }
/* v1.352.0 (Ralf: "den Bereich, den wir zugeordnet haben, gleich farblich markieren - sonst ist alles rot und der User denkt, er hat etwas
   vergessen"): zugeordnete Zeilen sind hinterlegt - Position (mit Zusatz- und Folgezeilen) gruen, Kopf blau, Kunde gelb; der Rand zeigt die
   Ampel der Position (rot = noch kein Artikel). Rot hinterlegt ist nur noch, was niemandem gehoert. */
.oi-k-pos, .oi-k-extra { background: var(--success-light); }
.oi-k-extra { border-left-style: dotted; }
.oi-k-head { border-left-color: var(--info); background: var(--success-light); }
.oi-k-cust { border-left-color: var(--warning); background: var(--success-light); }   /* v1.354.0 (Ralf: "Bankdaten zugewiesen, aber nicht gruen als erledigt"): jede zugeordnete Zeile gruen hinterlegt, die Art zeigt der Rand */
.oi-k-own .oi-tx, .oi-k-frame .oi-tx { color: var(--text-muted); }
.oi-k-skip .oi-tx { color: var(--text-muted); text-decoration: line-through; }
.oi-k-open { background: var(--danger-light); border-left-color: var(--danger); border-left-style: dashed; }

/* Zeile zerlegen: Rollen-Auswahl */
.oi-palette { display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--space-sm) 0 var(--space-md); }
.oi-pal-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.oi-pal-label { flex: 0 0 6.5rem; font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.oi-pick { font: inherit; font-size: var(--font-xs); padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card-bg); color: var(--text); cursor: pointer; }
.oi-pick:hover { border-color: var(--text-muted); }
.oi-pick.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); font-weight: 700; }
.oi-pick.oi-r-none { background: var(--card-bg); }

/* Zeile zerlegen: Woerter als Kacheln (oben die Rolle klein) */
.oi-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); user-select: none; }
.oi-chip { font-family: var(--font-mono); font-size: var(--font-sm); display: inline-flex; flex-direction: column; align-items: flex-start; padding: 0.15rem 0.5rem 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); cursor: pointer; }
.oi-chip::before { content: attr(data-l); font-family: var(--font-family); font-size: 0.65rem; line-height: 1.3; min-height: 0.85rem; opacity: 0.85; }
.oi-chip:hover { border-color: var(--text-muted); }
.oi-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }
/* Spaltenschema im Gelernten: nur Anzeige */
.oi-chips-static { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; padding: 0; border: 0; background: none; }
.oi-chips-static .oi-chip { cursor: default; font-family: var(--font-family); font-size: var(--font-xs); padding: 0.05rem 0.4rem; }
.oi-chips-static .oi-chip::before { content: none; }

/* v1.353.0 Rueckmeldung: was vor dem Bestaetigen fehlt (Liste), zuletzt geaenderte Zeile, aktive Rolle, Rollen-Akkordeon im Popup */
.oi-check { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--font-sm); }
.oi-check li { display: flex; align-items: center; gap: var(--space-xs); }
.oi-check-ok { color: var(--success-text); }
.oi-check-miss { color: var(--danger-text); }
.oi-check-miss a { color: inherit; text-decoration: underline; }
.oi-just { box-shadow: inset 0 0 0 2px var(--info); }
.oi-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0; }
.oi-current .row-gap { margin-left: auto; }
.oi-tag { display: inline-flex; align-items: center; font-size: var(--font-xs); font-weight: 700; padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-full); }
.oi-pal { margin-bottom: var(--space-sm); }
.oi-pal .oi-pal-group { padding: var(--space-xs) 0; }

/* v1.354.0 Partner finden / neu anlegen (im Ergebnis) */
/* v1.362.0 Dokument mit fester Hoehe (eigene Scrollleiste), Sprung zur Stelle, Zwei-Spalten-Ansicht, grob zuordnen */
.oi-doc { max-height: 65vh; overflow: auto; position: relative; }
.oi-flash { animation: oi-flash 1.8s ease; }
@keyframes oi-flash { 0%, 45% { background: var(--warning-light); } 100% { } }
.oi-todo { display: flex; flex-direction: column; gap: var(--space-xs); }
.oi-todo-item { display: flex; align-items: center; gap: var(--space-xs); width: 100%; text-align: left; font: inherit; font-size: var(--font-sm); color: var(--text); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-light); cursor: pointer; }
.oi-todo-item .oi-todo-txt { flex: 1; }
.oi-todo-yellow { border-color: var(--warning); background: var(--warning-light); }
.oi-todo-item:hover, .oi-todo-item:focus-visible { box-shadow: 0 0 0 2px var(--text-muted); outline: none; }
.oi-bulk-kinds .oi-kb { border-left-width: 0.25rem; }
.oi-kb-head { border-left-color: var(--info); } .oi-kb-cust { border-left-color: var(--warning); } .oi-kb-ship { border-left-color: var(--accent-text); }
.oi-kb-pos { border-left-color: var(--success); } .oi-kb-own, .oi-kb-skip { border-left-color: var(--text-muted); }
.oi-ruler { position: sticky; top: 0; z-index: 2; height: 1.1rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.oi-grip { position: absolute; top: 0.1rem; width: 0.9rem; height: 0.9rem; margin-left: -0.45rem; border-radius: var(--radius-sm); background: var(--info); cursor: col-resize; }
.oi-row.oi-two { padding-right: 0; border-left-width: 0; }
.oi-cell { display: flex; align-items: center; white-space: pre; border-left: 0.25rem solid transparent; }
.oi-cell-l { flex: 0 0 auto; overflow: hidden; border-right: 1px dashed var(--info); }
.oi-cell-r { flex: 1 0 auto; }
/* v1.361.0 verknuepfte Zeilen: Klammer an den Zeilennummern, Art als Marke an der ersten Zeile; ein Popup fuer alle */
.oi-grp .oi-no { box-shadow: inset -3px 0 0 var(--info); }
.oi-grp-first .oi-no { border-top-right-radius: var(--radius-sm); }
.oi-grp-tag { margin-left: var(--space-sm); white-space: normal; }
.oi-gtype { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--border); }
.oi-gline { margin-bottom: var(--space-sm); }
.oi-gline-no { display: block; font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-xs); }
/* v1.359.0 (BE2) Auftrag aus dem Eingang; Einstellung je Kunde (Knopf / automatisch) */
.oi-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.oi-auto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.oi-partner { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.oi-partner h3 { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-md); margin: 0 0 var(--space-xs); }

/* Rollen (am Ende, damit sie Kachel und Auswahl einfaerben): Farbe nach Gruppe - Position blau, Beleg grau unterstrichen, Partner gelb,
   Bank gelb gestrichelt, Lieferadresse grau gepunktet; einzelne Rollen der Position heben sich ab (unsere Nr. gruen, Partner-Nr. violett,
   Bezeichnung mit Rand), ohne Bedeutung durchgestrichen */
.oi-w { border-radius: var(--radius-sm); }
.oi-g-pos { background: var(--info-light); color: var(--info-text); }
.oi-g-head { background: var(--hover-bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--info); }
.oi-g-addr { background: var(--warning-light); color: var(--warning-text); }
.oi-g-bank { background: var(--warning-light); color: var(--warning-text); text-decoration: underline dotted; }
.oi-g-ship { background: var(--hover-bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--warning); }
.oi-r-o { background: var(--success-light); color: var(--success-text); }
.oi-r-c { background: var(--accent-light); color: var(--accent-text); }
.oi-r-t { background: var(--card-bg); color: var(--text); border-color: var(--text-muted); }
.oi-r-x { color: var(--text-muted); text-decoration: line-through; }
.oi-r-none { color: var(--text-muted); }

/* tabs.css */
/* ============================================================
   TABS.CSS - Wiederverwendbare Tab-Komponente v1.0
   ============================================================

   Nutzt variables.css Tokens.
   Einbinden: <link rel="stylesheet" href="/assets/css/components/tabs.css">

   Struktur:
     .tab-container
       .tab-nav
         .tab-btn (.active)
           .tab-icon
           .tab-count
       .tab-content (.active)
         .tab-header
         .tab-readonly-notice

   ============================================================ */


/* === Tab Container === */
.tab-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


/* === Tab Navigation === */
.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--bg-subtle);
    overflow-x: auto;
    overflow-y: hidden;             /* K2.1 (v1.21.1): die Unterstreichung des aktiven Reiters ragte 2px unter die Leiste - overflow-x:auto machte daraus eine senkrechte Scrollleiste */
    padding: 0 var(--space-sm);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.tab-nav::-webkit-scrollbar {
    height: 3px;
}

.tab-nav::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}


/* === Tab Button === */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color var(--transition-fast);
    text-decoration: none;
    font-family: inherit;
    line-height: 1.4;
}

.tab-btn:hover {
    color: var(--text);
    background: rgba(0,0,0,0.02);
}

.tab-btn.active {
    color: var(--brand-primary-text);
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-accent);   /* K2 (v1.21.0): Takt Gelb */
    border-radius: 2px 2px 0 0;
}


/* === Tab Icon === */
.tab-icon {
    font-size: 15px;
    line-height: 1;
}


/* === Tab Count Badge === */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    background: var(--border);
    color: var(--text-secondary);
    line-height: 1;
}

.tab-btn.active .tab-count {
    background: var(--brand-primary-light);
    color: var(--brand-primary-text);
}




/* === Tab Content === */
.tab-content {
    padding: var(--space-lg);
}


/* === Tab Header (Stats + Action Button) === */
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* === Stat Mini Cards (im Tab-Header) === */
.stat-mini-grid {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--card-bg);   /* v1.43.0: Kartengrund statt --bg-subtle, sonst verschwindet das Navy-Icon-Feld */
    border: 1px solid var(--border);
}

.stat-mini-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-mini-label {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.2;
}


/* === Read-Only Hinweis === */
.tab-readonly-notice {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-top: var(--space-lg);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-xs);
}


/* === Timeline (f&uuml;r Aktivit&auml;ten-Tab) === */
.timeline {
    position: relative;
    padding-left: 36px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-lg);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -30px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-dot-primary { border-color: var(--brand-primary); color: var(--brand-primary-text); }
.timeline-dot-success { border-color: var(--success); color: var(--success); }
.timeline-dot-warning { border-color: var(--warning); color: var(--warning); }
.timeline-dot-info    { border-color: var(--info); color: var(--info); }
.timeline-dot-danger  { border-color: var(--danger); color: var(--danger); }

.timeline-body {
    padding-top: 2px;
}

.timeline-time {
    font-size: 13px;
    color: var(--text-muted);
}

.timeline-text {
    font-size: var(--font-xs);
    margin-top: 2px;
}

.timeline-label {
    color: var(--text-muted);
    margin-right: 4px;
}


/* === Function Tags (Kontakte) === */
.fn-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    margin: 1px;
    white-space: nowrap;
}


/* === Empty State === */
.empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--text-muted);
}

.empty-state-icon {
    margin-bottom: var(--space-sm);
    opacity: 0.3;
}

.empty-state p {
    margin: var(--space-sm) 0 var(--space-md);
    font-size: var(--font-xs);
}


/* === Company Header Card === */
.company-header-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.company-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.company-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--brand-primary-light);
    color: var(--brand-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.company-header-meta h2 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.company-header-details {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: 4px;
    flex-wrap: wrap;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 13px;
}

.company-header-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}


/* === Form Extensions (Tab-spezifisch) === */
.form-section {
    margin-bottom: var(--space-lg);
}

.form-section-last {
    margin-bottom: 0;
}

.form-section-title {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-col-span-2 {
    grid-column: span 2;
}

.form-col-span-3 {
    grid-column: span 3;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea,
.form-textarea {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-family: var(--font-family);
    background: var(--card-bg);
    color: var(--text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* v1.392.0 (Ralf 10.10.2026: "warum ist Preiseinheit gesperrt?" - nur das Auswahlfeld sah gesperrt aus, Preis und Rabatt daneben nicht):
   gesperrte Eingabefelder (disabled) sehen jetzt aus wie gesperrte Auswahlfelder */
.form-group input[readonly],
.form-group input[disabled],
.form-group select[disabled],
.form-group textarea[readonly],
.form-group textarea[disabled],
.form-textarea[readonly] {
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint {
    font-size: 13px;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.form-actions-right {
    display: flex;
    gap: var(--space-sm);
}


/* === Toast Notifications === */
.toast {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-xs);
    font-weight: 500;
    transition: opacity 0.3s;
}

.toast-success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.toast-danger {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}


/* === Responsive === */
@media (max-width: 768px) {
    .form-grid,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .form-col-span-2,
    .form-col-span-3 {
        grid-column: span 1;
    }

    .tab-nav {
        gap: 0;
    }

    .tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    .company-header-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .tab-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* K2 (v1.21.0): Tastatur-Fokus gelb, wie ueberall */
.tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* K3 (v1.22.0): Reiter-Baustein render_tabs() - dieselben Klassen wie in der Schaltzentrale (.tabs-bar > .tab-link). Die alten
   .tab-nav/.tab-btn bleiben, bis Einstellungen und Import umgestellt sind (K8/K9), dann fliegen sie in K10. */
.tabs-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-bottom: 2px solid var(--border); background: var(--bg-subtle); padding: 0 var(--space-sm); }
.tab-link { display: inline-flex; align-items: center; gap: 7px; padding: 12px 16px; margin-bottom: -2px; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; font-size: var(--font-xs); font-weight: 500; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); }
.tab-link .icon, .tab-link svg { flex: none; }
.tab-link:hover { color: var(--brand-primary-text); }
.tab-link.active { color: var(--brand-primary-text); border-bottom-color: var(--brand-accent); font-weight: 600; }
.tab-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.tab-link .tab-count { margin-left: 2px; }
.tab-link .tab-count-warn { background: var(--danger-light); color: var(--danger-text); }
/* v1.44.0: .tab-link .tab-lock entfallen (kein Schloss mehr in der Reiterleiste) */
/* v1.44.0: Zahnrad der Kundenakte (Einstellungen Unternehmen) - fest oben rechts in der Leiste, die dafuer Platz freihaelt.
   Als normales Flex-Element rutschte es bei vollen Leisten in eine eigene zweite Zeile; so bleibt es in der ersten Zeile,
   auch wenn Reiter bei schmalem Fenster umbrechen. top = (Reiterhoehe 44px - Knopf 28px) / 2 */
/* v1.48.0 (R1): mehrere Werkzeug-Knoepfe rechts (Zahnrad .tabs-gear, Rechte .tabs-tool, spaeter Vorschau) - die Gruppe steht fest
   oben rechts in der ersten Zeile, die Leiste haelt je Knopf Platz frei; ein Knopf allein wie bisher. */
.tabs-bar:has(.tabs-gear, .tabs-tool) { position: relative; padding-right: 48px; }
.tabs-bar:has(.tabs-right > :nth-child(2)) { padding-right: 84px; }
.tabs-bar:has(.tabs-right > :nth-child(3)) { padding-right: 120px; }
.tabs-right:has(.tabs-gear, .tabs-tool) { position: absolute; right: var(--space-sm); top: 8px; display: flex; gap: 6px; margin-left: 0; }
.tabs-right .tabs-gear, .tabs-right .tabs-tool { color: var(--text-secondary); }
.tab-link-danger { color: var(--danger-text); } .tab-link-danger.active { color: var(--danger-text); border-bottom-color: var(--danger); }
.tabs-right { margin-left: auto; }
.tab-container > .tabs-bar { border-radius: var(--radius-md) var(--radius-md) 0 0; }