/* ============================================================
   app.css — Denty Tool · Haupt-Stilblatt
   ============================================================
   Stand 22.10.2026 (Audit Welle 1, Maßnahme 3): Bis dahin stand dieser
   Block als <style> in index.html. Er ist 1:1 hierher gezogen; index.php
   stempelt die Adresse wie jedes Skript, Caddy cacht sie ein Jahr. Die Reihenfolge
   im Dokument ist dieselbe geblieben (der <link> steht an der Stelle des alten
   <style>), die Kaskade ändert sich also nicht.
   Die Schrift „Kalam“ (@font-face) steht weiter INLINE in index.html: Deren
   url(...) bekommt nur dort einen Stempel (index.php).
   ============================================================ */
    /* ============================================================
       CSS VARIABLEN — Light / Dark Mode
       ============================================================ */
    :root {
      --surface-0:       #f5f5f5;
      --surface-1:       #efefef;
      --surface-2:       #ffffff;
      --text-primary:    #111111;
      --text-secondary:  #444444;
      --text-muted:      #888888;
      --text-accent:     #1a56db;
      --text-danger:     #c81e1e;
      --text-success:    #057a55;
      --text-pro:        #5521b5;
      --border:          rgba(0,0,0,0.10);
      --border-strong:   rgba(0,0,0,0.18);
      --border-accent:   #1a56db;
      --border-danger:   #f98080;
      --border-accent:   #3b82f6;
      --bg-accent:       #ebf5ff;
      --bg-danger:       #fdf2f2;
      --bg-success:      #f3faf7;
      --bg-pro:          #edebfe;
      --bg-warning:      #fef3cd;
      --text-warning:    #8b5e00;
      --border-warning:  #f0c040;
      --fill-accent:     #1a56db;
      --fill-accent-hover: #1e429f;
      --font-sans:       system-ui, -apple-system, sans-serif;
      --font-mono:       ui-monospace, 'Cascadia Code', monospace;
      --radius:          8px;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --surface-0:       #111827;
        --surface-1:       #1f2937;
        --surface-2:       #374151;
        --text-primary:    #f9fafb;
        --text-secondary:  #d1d5db;
        --text-muted:      #9ca3af;
        --text-accent:     #60a5fa;
        --text-danger:     #f87171;
        --text-success:    #34d399;
        --text-pro:        #a78bfa;
        --border:          rgba(255,255,255,0.10);
        --border-strong:   rgba(255,255,255,0.18);
        --border-accent:   #60a5fa;
        --border-danger:   #f87171;
        --bg-accent:       #1e3a5f;
        --bg-danger:       #4c1919;
        --bg-success:      #064e3b;
        --bg-pro:          #2e1065;
        --bg-warning:      #4a3600;
        --text-warning:    #facc15;
        --border-warning:  #a16207;
        --fill-accent:     #3b82f6;
        --fill-accent-hover: #60a5fa;
      }
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-sans);
      color:       var(--text-primary);
      background:  var(--surface-0);
      font-size:   14px;
      line-height: 1.5;
    }

    input, select, textarea, button {
      font-family: inherit;
      font-size:   inherit;
      color:       inherit;
    }

    input, select, textarea {
      background:  var(--surface-2);
      border:      0.5px solid var(--border-strong);
      border-radius: var(--radius);
      padding:     0 10px;
      height:      34px;
      outline:     none;
      width:       100%;
      -webkit-tap-highlight-color: transparent;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--border-accent);
    }
    textarea { height: auto; padding: 8px 10px; resize: vertical; }

    button {
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    button::-moz-focus-inner, select::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    /* ============================================================
       APP-SHELL
       ============================================================ */
    .app {
      display:        flex;
      flex-direction: column;
      height:         100vh;
      min-height:     700px;
    }

    /* Topbar */
    .topbar {
      background:    var(--surface-2);
      border-bottom: 0.5px solid var(--border);
      padding:       10px 16px;
      display:       flex;
      align-items:   center;
      justify-content: space-between;
      flex-shrink:   0;
    }
    .logo {
      display:     flex;
      align-items: center;
      gap:         8px;
      font-size:   15px;
      font-weight: 500;
    }
    .logo i    { color: var(--text-accent); font-size: 20px; }
    .logo span { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
    /* App-Logo in Topbar/Login. Austauschbar: einfach
       frontend/assets/app-logo.png ersetzen. Fehlt die Datei, springt per
       onerror der Schriftzug mit Zahn-Icon ein (.logo-fallback). */
    .app-logo       { height: 30px; width: auto; object-fit: contain; display: block; }
    .app-logo-login { height: auto; width: 200px; margin: 0 auto 2px; }
    .logo-fallback  { display: flex; align-items: center; gap: 8px;
                      font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .mono      { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

    /* Tab-Navigation */
    .tab-nav {
      display:       flex;
      flex-wrap:     wrap;   /* schmales Fenster: zweite Zeile statt seitlich raus */
      background:    var(--surface-1);
      border-bottom: 0.5px solid var(--border);
      flex-shrink:   0;
      padding:       0 16px;
    }
    .tab-btn {
      display:       flex;
      align-items:   center;
      gap:           6px;
      padding:       10px 16px;
      font-size:     13px;
      cursor:        pointer;
      text-decoration: none;   /* Reiter sind Links (tabLinkKlick, app.js) */
      border:        none;
      background:    none;
      color:         var(--text-muted);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space:   nowrap;  /* Beschriftung nicht mitten im Wort umbrechen */
    }
    .tab-btn:hover { color: var(--text-primary); }
    .tab-btn.active {
      color:         var(--text-accent);
      border-bottom-color: var(--border-accent);
      font-weight:   500;
    }
    .ib-nav-badge {
      background:    var(--bg-danger);
      color:         var(--text-danger);
      font-size:     11px;
      padding:       1px 6px;
      border-radius: 10px;
      margin-left:   2px;
    }
    .ib-filter-bar { display: flex; gap: 4px; }
    .ib-filter-btn {
      padding:       6px 12px;
      font-size:     12px;
      border:        0.5px solid var(--border);
      background:    var(--surface-2);
      color:         var(--text-secondary);
      border-radius: var(--radius);
      cursor:        pointer;
    }
    .ib-filter-btn.active {
      background:    var(--bg-accent);
      color:         var(--text-accent);
      border-color:  var(--border-accent);
    }

    /* Views */
    .view         { display: none; flex: 1; overflow: hidden; flex-direction: column; }
    .view.active  { display: flex; }

    /* ============================================================
       OPTIONEN-TAB
       ============================================================ */
    /* scrollbar-gutter: Platz fuer die Scrollleiste immer reservieren.
       Sonst aendert sich die nutzbare Breite je nach Untertab, die
       zentrierte .opt-wrap rutscht mit — die linke Kante sprang beim
       Tabwechsel um 6 px hin und her. */
    .opt-inner        { flex:1; overflow-y:auto; padding:20px 24px; scrollbar-gutter:stable; }
    /* Seitlicher Abstand, damit die gerahmten Kästen darin nicht mit
       ihren runden Ecken am Fensterrand kleben — dieselben 12 px wie
       in der Auftragsansicht (.auftrag-content). */
    .abr-sr-inner     { flex:1; overflow-y:auto; padding:0 12px 16px; }
    /* ⚠ DOPPELTE EINRÜCKUNG (Chris, 18.08.2026): .stats bringt selbst
       12px seitliches Polster mit — gedacht für die Aufträge, wo die
       Kacheln direkt im Bereich liegen. In Abrechnung und Sammelrechnung
       stecken sie zusätzlich in .abr-sr-inner mit denselben 12px, standen
       also 24px tief und damit doppelt so weit innen wie die Tabelle
       darunter. Hier nimmt das äußere Polster den Platz, das innere
       entfällt. */
    .abr-sr-inner .stats { padding-left: 0; padding-right: 0; }
    /* ⚠ LEERES KIND KOSTET TROTZDEM PLATZ (Chris, 18.08.2026): .abr-wrap
       ist ein Flex-Stapel mit 14px Abstand. Der Nacharbeit-Kasten ist
       meistens leer (Höhe 0) — als Flex-Kind zählt er trotzdem, und der
       Abstand dahinter schob die Kacheln 14px tiefer als in den
       Aufträgen. Sichtbar wird er erst, wenn er Inhalt bekommt. */
    #abr-nacharbeit:empty { display: none; }
    /* Breiter, damit alle Optionen-Untertabs (Ebene 1 UND 2) in eine Reihe
       passen; bei schmalem Fenster brechen sie in die zweite Zeile. Die
       Formulare bleiben schmal (opt-section unten gedeckelt). */
    .opt-wrap         { max-width:1080px; margin:0 auto; }
    .opt-sub-nav      { display:flex; flex-wrap:wrap; gap:4px; border-bottom:0.5px solid var(--border); margin-bottom:20px; }
    /* Die Untertab-Leiste bleibt beim Scrollen oben stehen. Die
       Optionen-Bereiche sind lang; ohne das scrollt man erst wieder
       hoch, nur um den Bereich zu wechseln. Scrollcontainer ist
       .opt-inner mit 20 px Innenabstand oben — deshalb top:-20px plus
       eigener Innenabstand, sonst blitzt der Inhalt darueber durch.
       Bewusst der ganze Pfad statt nur "#view-optionen .opt-sub-nav":
       Akteure und Kommunikation haengen ganze Ansichten ein, die ihre
       EIGENE Leiste derselben Klasse mitbringen (Logistik, Material,
       Tech-Kom …). Die sitzt in einem anderen Scrollbereich und wurde
       von der breiten Regel falsch angeheftet — 20 px zu hoch. */
    #view-optionen > .opt-inner > .opt-wrap > .opt-sub-nav {
      position:sticky; top:-20px; z-index:6;
      background:var(--surface-0); padding-top:20px; margin-top:-20px;
    }
    /* Ebene 3: die Leiste einer eingehaengten Ansicht. Sie klebt an der
       Oberkante IHRES Scrollbereichs (.card-tab-inner, oben ohne
       Innenabstand) — nicht an der der Optionen. */
    #view-optionen .akt-pane .card-tab-inner > .inner-wrap > .opt-sub-nav {
      position:sticky; top:0; z-index:4;
      background:var(--surface-0); padding-top:0; margin-top:0;
    }
    /* Einheitliche Formularspalte aller Optionen-Untertabs. max-width
       heisst: schrumpft mit dem Fenster mit; die Tab-Leisten brechen
       dabei per flex-wrap in die zweite Zeile um. */
    #view-optionen .opt-section { max-width:720px; }
    .opt-sub-btn      { padding:7px 14px; font-size:13px; cursor:pointer;
                        border:0.5px solid transparent; background:none; color:var(--text-secondary);
                        border-radius:var(--radius) var(--radius) 0 0; }
    .opt-sub-btn.active { border-color:var(--border) var(--border) var(--surface-2);
                          color:var(--text-primary); background:var(--surface-2); font-weight:500; }
    .opt-pane         { display:none; flex-direction:column; gap:16px; }
    .opt-pane.active  { display:flex; }
    .logistik-pane        { display:none; flex-direction:column; gap:16px; }
    .logistik-pane.active { display:flex; }
    .material-pane        { display:none; flex-direction:column; gap:16px; }
    .material-pane.active { display:flex; }
    /* Pill-Optik der Sub-Tabs in Logistik + Material (siehe Chat-Screenshot) */
    #view-logistik .opt-sub-nav, #view-material .opt-sub-nav, #view-kosten .opt-sub-nav,
    #view-techkom .opt-sub-nav, #view-praxkom .opt-sub-nav { border-bottom:none; gap:8px; }
    .logistik-sub-btn, .material-sub-btn, .kosten-sub-btn, .techkom-sub-btn, .praxkom-sub-btn {
      padding:6px 14px; font-size:13px; cursor:pointer;
      border:0.5px solid var(--border-strong); background:var(--surface-2);
      color:var(--text-secondary); border-radius:20px; }
    .logistik-sub-btn:hover, .material-sub-btn:hover, .kosten-sub-btn:hover, .techkom-sub-btn:hover, .praxkom-sub-btn:hover { background:var(--surface-1); }
    .logistik-sub-btn.active, .material-sub-btn.active, .kosten-sub-btn.active, .techkom-sub-btn.active, .praxkom-sub-btn.active {
      background:var(--surface-1); color:var(--text-primary);
      border-color:var(--text-muted); font-weight:500; }
    .techkom-pane        { display:none; flex-direction:column; gap:16px; }
    .techkom-pane.active { display:flex; }
    .praxkom-pane        { display:none; flex-direction:column; gap:16px; }
    .praxkom-pane.active { display:flex; }
    .kosten-pane        { display:none; flex-direction:column; gap:16px; }
    .kosten-pane.active { display:flex; }

    /* ── Monthly Statement (monthly.js) ─────────────────────────────
       Unterreiter in derselben Pillen-Optik wie Kosten/Logistik; die
       Karten und Tabellen nutzen die vorhandenen Bausteine
       (.pv-native-table, .tab-kasten, .tv-badge, .month-nav). */
    #view-monthly .opt-sub-nav { border-bottom:none; gap:8px; }
    .ms-sub-btn {
      padding:6px 14px; font-size:13px; cursor:pointer;
      border:0.5px solid var(--border-strong); background:var(--surface-2);
      color:var(--text-secondary); border-radius:20px; }
    .ms-sub-btn:hover { background:var(--surface-1); }
    .ms-sub-btn.active {
      background:var(--surface-1); color:var(--text-primary);
      border-color:var(--text-muted); font-weight:500; }
    .ms-pane        { display:none; flex-direction:column; gap:16px; }
    .ms-pane.active { display:flex; }

    .ms-leiste  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 12px; }
    .ms-karte   { background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px;
                  padding:14px 16px; margin-bottom:14px; }
    .ms-kopf    { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
    .ms-kopf-knoepfe { display:flex; gap:6px; }
    .ms-titel   { font-weight:500; font-size:14px; }
    .ms-warn    { display:flex; gap:8px; align-items:flex-start; margin:10px 0; padding:8px 10px; font-size:13px;
                  background:var(--bg-warning); color:var(--text-warning); border-radius:8px; }
    .ms-zaehler { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:12px 0; }
    .ms-zaehler > div { background:var(--surface-1); border-radius:8px; padding:8px 12px; }
    .ms-zaehler b     { display:block; font-size:20px; font-weight:500; }
    .ms-zaehler span  { font-size:12px; color:var(--text-secondary); }
    .ms-gruen { color:var(--text-success); }
    .ms-rot   { color:var(--text-danger); }
    .ms-gelb  { color:var(--text-warning); }
    .ms-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; }
    .ms-chip  { font-size:12px; padding:3px 10px; border-radius:99px; cursor:pointer;
                border:0.5px solid var(--border-strong); background:transparent; color:var(--text-secondary); }
    .ms-chip.on { background:var(--bg-accent); color:var(--text-accent); border-color:var(--border-accent); }
    .ms-r { text-align:right; white-space:nowrap; }
    .ms-kreuz { width:30px; text-align:center; }
    .ms-rf-notiz { width:100%; min-width:160px; }
    .btn .ms-rf-n { display:inline; }
    .ms-i { display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center;
            justify-content:center; font-size:13px; font-weight:500; }
    .ms-i.ok    { background:var(--bg-success); color:var(--text-success); }
    .ms-i.abw   { background:var(--bg-danger);  color:var(--text-danger); }
    .ms-i.frage { background:var(--bg-warning); color:var(--text-warning); }
    .ms-i.versand { background:var(--surface-1); color:var(--text-secondary); border:0.5px solid var(--border-strong); }
    .aa-toolbar       { display:flex; align-items:center; justify-content:space-between; }
    .aa-newrow        { display:none; align-items:center; gap:8px; background:var(--surface-1);
                        border:0.5px solid var(--border-accent); border-radius:var(--radius); padding:8px 10px; }
    .aa-newrow input  { flex:1; }
    .aa-list          { border:0.5px solid var(--border); border-radius:var(--radius); max-height:360px; overflow-y:auto; }
    .aa-row           { display:flex; align-items:center; justify-content:space-between; padding:8px 12px;
                        font-size:13px; color:var(--text-primary); border-bottom:0.5px solid var(--border); }
    .aa-row:last-child { border-bottom:none; }
    .opt-section-lbl  { font-size:11px; color:var(--text-muted); font-weight:500;
                        text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
    .opt-section      { display:flex; flex-direction:column; gap:8px; }
    .opt-fr2          { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    /* E-Mail-Texte-Editor (Optionen -> E-Mail), siehe mail-vorlagen.js */
    /* Zweite Sub-Tab-Ebene innerhalb von Optionen -> Allgemein.
       Bewusst Pillen statt Reiter: zwei gleich aussehende Reiterleisten
       direkt übereinander wären nicht auseinanderzuhalten. */
    .opt-sub2-nav        { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
    /* Die Pillen-Leiste klebt direkt unter der Reiterleiste der ersten
       Ebene. Deren Hoehe steht nicht fest — bei schmalem Fenster brechen
       die Reiter in die zweite Zeile um — deshalb wird sie gemessen und
       als --opt-nav1-h gesetzt (optNavHoeheMessen in abrechnung-data.js);
       der Wert hier ist nur der Rueckfall, falls das Messen ausfaellt.
       Die 20 px sind der Innenabstand von .opt-inner: die erste Leiste
       klebt mit top:-20px, ihre Unterkante liegt deshalb 20 px hoeher,
       als ihre Hoehe allein vermuten laesst.

       Es gibt ZWEI Bauarten der zweiten Ebene: .opt-sub2-nav in
       Allgemein, E-Mail & Mahnwesen und Arbeitsarten — und .akt-sub-nav
       in Backup & Sonstiges, Akteure und Kommunikation. Beide gehoeren
       hierher, sonst klebt die Leiste nur in einem Teil der Bereiche. */
    #view-optionen .opt-pane > .opt-sub2-nav,
    #view-optionen .opt-pane > .akt-sub-nav {
      position:sticky; top:calc(var(--opt-nav1-h, 54px) - 20px); z-index:5;
      background:var(--surface-0); padding:6px 0; margin-top:-6px;
    }
    /* ── Einfassung der Optionen (Wunsch Chris, 14.08.2026) ────────
       Der letzte Bereich, der noch ohne Kasten war — Aufträge,
       Abrechnung, Jumbos, Positionen, Praxis- und Technikeransicht sind
       seit dem 13.08. eingefasst (770aefb, 0e4c5df, 5c9a3d4, 27a0e7f).

       ⚠ DER KASTEN BEGINNT UNTER DEN REITERN, nicht darüber. Beide
       Leisten kleben beim Scrollen (siehe die sticky-Regeln weiter oben:
       Ebene 1 bei top:-20px, Ebene 2 darunter). Läge der Rahmen um sie
       herum, bliebe die Leiste zwar stehen, die Kastenoberkante würde
       aber darunter wegscrollen — die Leiste löste sich optisch vom
       Rahmen. So scrollt der Kasten sauber unter den Leisten weg, genau
       wie die Karten in der Verwaltung.

       Fünf Bauarten, deshalb fünf Ziele:
         .opt-sub2-pane  — Allgemein, E-Mail & Mahnwesen, Arbeitsarten
         .akt-pane       — Akteure, Kommunikation (eingehängte Ansichten)
         .bk-pane        — Backup & Sonstiges (eigene Klasse, siehe dort)
         .bn-pane        — Benutzer (eigene Klasse, siehe dort)
         die Ansicht selbst — Order-Form und Support haben keine zweite
                              Ebene, dort gibt es nichts dazwischen.

       box-sizing ist global border-box: Der Innenabstand vergrößert die
       gemessene Höhe von .akt-pane (100vh - 210px) also nicht. */
    #view-optionen .opt-sub2-pane.active,
    #view-optionen .akt-pane.active,
    #view-optionen .bk-pane.active,
    #view-optionen .bn-pane.active,
    #view-optionen #opt-pane-orderform.active,
    #view-optionen #opt-pane-support.active {
      background:    var(--surface-2);
      border:        0.5px solid var(--border);
      border-radius: var(--radius);
      padding:       16px;
    }

    /* Pillengroesse identisch zu den Sub-Tabs der eingehaengten Ansichten
       (.logistik-/.material-/.kosten-/.techkom-/.ablg-sub-btn), damit in
       Optionen nicht zwei Groessen direkt uebereinander stehen. */
    .opt-sub2-btn        { padding:6px 14px; font-size:13px; cursor:pointer;
                           border:0.5px solid var(--border-strong); background:var(--surface-2);
                           color:var(--text-secondary); border-radius:20px; }
    .opt-sub2-btn:hover  { background:var(--surface-1); }
    .opt-sub2-btn.active { background:var(--surface-1); color:var(--text-primary);
                           border-color:var(--text-muted); font-weight:500; }
    .opt-sub2-pane        { display:none; flex-direction:column; gap:16px; }
    .opt-sub2-pane.active { display:flex; }
    /* Akteure (Optionen -> Akteure) + Kommunikation: Pillen-Sub-Tabs (eigene
       Klassen, damit optSubTab2 sie nicht mit-togglet) + eingehaengte
       Top-Views (Praxen/Patient/Technik bzw. Scanner/Logistik/…). */
    .akt-sub-nav          { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
    .akt-sub-btn          { padding:6px 14px; font-size:13px; cursor:pointer; border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-secondary); border-radius:20px; }
    .akt-sub-btn:hover    { background:var(--surface-1); }
    .akt-sub-btn.active   { background:var(--surface-1); color:var(--text-primary); border-color:var(--text-muted); font-weight:500; }
    .akt-pane             { display:none; }
    .akt-pane.active      { display:block; height:calc(100vh - 210px); }
    .opt-embedded-view    { display:flex !important; height:100%; }
    /* Eingehaengte Ansicht auf dieselbe linke Kante wie die Pillen daruber
       ziehen: ihre eigene zentrierte Spalte (.card-tab-inner .inner-wrap,
       720 px mittig) wird hier linksbuendig gestellt und das aeussere
       Polster entfernt. Ohne das sprang der Inhalt ~124 px nach rechts.
       Die 720 px bleiben — nur zentriert wird nicht mehr. */
    .akt-pane .card-tab-inner            { padding:0 0 20px; }
    .akt-pane .card-tab-inner .inner-wrap { margin-left:0; margin-right:0; }
    /* Titel der eingehaengten Ansicht ausblenden — die aktive Pille daruber
       sagt bereits, wo man ist. Die Aktionen daneben (Suche, "Neue Praxis")
       bleiben stehen. Im eigenen Top-Tab bleibt der Titel unberuehrt. */
    .akt-pane .card-tab-top > h2         { display:none; }
    /* Sub-Tab-Leiste der eingehaengten Ansicht auf denselben Abstand wie
       die Pillenleisten daruber (statt der 20 px der Ebene-1-Reiter). */
    .akt-pane .opt-sub-nav               { margin-bottom:16px; }
    /* ── Ablage-Tab: eigene Pillen-Sub-Tabs (Beispielrechnung + Links).
       Eigene Klassen (.ablg-*) statt .opt-sub2-*, damit optSubTab2()
       (Optionen) diese Buttons nicht mit-togglet. */
    /* Ablage folgt exakt dem Sub-Tab-Muster von Logistik/Material:
       .card-tab-inner > .inner-wrap > .opt-sub-nav (Pillen, links-bündig
       in der zentrierten inner-wrap-Spalte). */
    /* ZUGANG ZUR APP — Block im Praxis-/Techniker-Formular (zugang.js).
       Abgesetzt gerahmt, weil hier etwas anderes passiert als in den
       Stammdaten darüber: Es entsteht ein Benutzerkonto. */
    .zugang-block   { border:1px solid var(--border-accent); border-radius:10px; padding:12px 13px;
                      background:color-mix(in srgb, var(--border-accent) 6%, transparent); }
    .zugang-laedt   { font-size:12px; color:var(--text-muted); }
    .zugang-erkl    { font-size:12px; color:var(--text-muted); line-height:1.5; margin:0 0 10px; }
    .zugang-hinweis { font-size:11.5px; color:var(--text-muted); line-height:1.5; margin:9px 0 0; }
    .zugang-zeile   { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
    .zugang-zeile > div { flex:1; min-width:150px; }
    .zugang-zeile label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
    .zugang-zeile input { width:100%; padding:6px 9px; font-size:13px; box-sizing:border-box;
                          border:0.5px solid var(--border-strong); border-radius:6px;
                          background:var(--surface-2); color:var(--text-primary); }
    .zugang-da      { display:flex; align-items:center; justify-content:space-between; gap:10px;
                      flex-wrap:wrap; font-size:12.5px; color:var(--text-success); }
    #view-ablage .opt-sub-nav { border-bottom:none; gap:8px; }
    /* Die Ablage-Spalte ist standardmäßig auf 720px gedeckelt (Lesebreite
       für Fließtext). Die Beispielrechnung ist eine sechsspaltige Tabelle
       und braucht etwas mehr — aber nicht die volle Bildschirmbreite,
       sonst stehen die Spalten weit auseinander (Wunsch Chris,
       12.08.2026: kompakt, aber fünfstellige Beträge ohne Scrollen). */
    #view-ablage .card-tab-inner > .inner-wrap { max-width:900px; }
    .ablg-sub-btn        { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; font-size:13px; cursor:pointer;
                           border:0.5px solid var(--border-strong); background:var(--surface-2);
                           color:var(--text-secondary); border-radius:20px; font-family:inherit; }
    .ablg-sub-btn i      { font-size:15px; }
    .ablg-sub-btn:hover  { background:var(--surface-1); }
    .ablg-sub-btn.active { background:var(--surface-1); color:var(--text-primary);
                           border-color:var(--text-muted); font-weight:500; }
    .ablg-pane           { display:none; }
    .ablg-pane.active    { display:block; }
    /* Kacheln unter Ablage -> Vorlage Email: je eigener Text eine.
       auto-fill statt auto-fit, damit eine einzelne Kachel nicht über
       die volle Breite läuft. */
    .es-kachel-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
                           gap:12px; margin-top:4px; }
    .es-kachel           { background:var(--surface-2); border:0.5px solid var(--border);
                           border-radius:12px; padding:14px 16px; cursor:pointer;
                           display:flex; flex-direction:column; gap:6px; position:relative; }
    /* Papierkorb oben rechts, immer sichtbar (nur Admin, siehe esRenderKacheln) */
    .es-kachel-weg       { position:absolute; top:8px; right:8px; width:28px; height:28px; padding:0;
                           display:flex; align-items:center; justify-content:center; cursor:pointer;
                           border:0.5px solid var(--border); border-radius:var(--radius);
                           background:transparent; color:var(--text-muted); }
    .es-kachel-weg:hover { color:var(--text-danger); border-color:var(--border-danger); background:var(--bg-danger); }
    .es-kachel:hover     { border-color:var(--text-muted); background:var(--surface-1); }
    .es-kachel-name      { font-size:14px; font-weight:500; }
    .es-kachel-sub       { font-size:12px; color:var(--text-muted); }
    /* Anhangzeile im Sende-Fenster */
    .es-anh              { display:flex; align-items:center; gap:10px; padding:6px 8px;
                           border-radius:var(--radius); background:var(--surface-1); margin-bottom:6px; }
    .es-anh-name         { font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .es-anh-groesse      { font-size:12px; color:var(--text-muted); }
    .es-anh-weg          { font-size:16px; color:var(--text-muted); cursor:pointer; }
    .es-anh-weg:hover    { color:var(--text-danger); }
    /* Abwurffläche über dem ganzen Fensterkörper. absolute statt fixed:
       Das Fenster ist der Bezugsrahmen, nicht der Bildschirm. */
    #es-korpus           { position:relative; }
    #es-drop             { position:absolute; inset:8px; z-index:20;
                           border:2px dashed var(--border-accent); border-radius:12px;
                           background:var(--bg-accent); color:var(--text-accent);
                           display:flex; flex-direction:column; align-items:center;
                           justify-content:center; gap:8px; pointer-events:none; }
    #es-drop.hidden      { display:none; }
    /* ── Links (Ablage → Links, auch Praxis/Techniker-Ansicht), links.js ── */
    .lk-wrap        { max-width:840px; margin:0 auto; padding:18px 16px 60px; }
    .lk-head        { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
    .lk-title       { font-size:17px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
    .lk-title i     { color:var(--text-accent); }
    .lk-lock        { font-size:12px; color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; background:var(--surface-1); padding:4px 10px; border-radius:20px; }
    .lk-addform     { margin:14px 0 6px; padding:12px; border:0.5px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface-1); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .lk-addform input, .lk-addform select { height:32px; border:0.5px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--text-primary); padding:0 10px; font-size:13px; font-family:inherit; }
    .lk-in-title    { flex:1; min-width:150px; }
    .lk-in-url      { flex:2; min-width:200px; }
    .lk-grp         { margin-top:16px; }
    .lk-grp-h       { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
    .lk-row         { display:flex; align-items:center; gap:12px; padding:9px 12px; border:0.5px solid var(--border); border-radius:var(--radius); background:var(--surface-2); margin-bottom:8px; }
    .lk-row:hover   { border-color:var(--border-strong); }
    .lk-drag        { color:var(--text-muted); cursor:grab; font-size:16px; flex:0 0 auto; }
    .lk-fav         { width:30px; height:30px; border-radius:7px; background:var(--bg-accent); color:var(--text-accent); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
    .lk-main        { flex:1; min-width:0; }
    .lk-t           { font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary); }
    .lk-u           { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .lk-act         { display:flex; gap:4px; flex:0 0 auto; }
    .lk-ico         { width:30px; height:30px; border-radius:7px; border:0.5px solid transparent; background:transparent; color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
    .lk-ico:hover   { background:var(--surface-1); border-color:var(--border); color:var(--text-secondary); }
    .lk-ico.del:hover { color:var(--text-danger); }
    .lk-editrow     { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:9px 12px; border:0.5px solid var(--border-accent); border-radius:var(--radius); background:var(--surface-1); margin-bottom:8px; }
    .lk-editrow input, .lk-editrow select { height:32px; border:0.5px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--text-primary); padding:0 10px; font-size:13px; font-family:inherit; }
    .lk-empty       { color:var(--text-muted); font-size:13px; padding:24px 4px; text-align:center; }
    /* Ablage → Dokumente (dokumente.js) — Aufbau wie Links, dazu Ordner-Kasten und Ablagefläche */
    .dk-ordner      { margin:14px 0 12px; padding:10px 12px; border:0.5px solid var(--border); border-radius:var(--radius); background:var(--surface-1); }
    .dk-lbl         { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:6px; }
    .dk-lbl span    { text-transform:none; letter-spacing:0; }
    .dk-drop        { margin:0 0 14px; padding:14px; border:1.5px dashed var(--border-strong); border-radius:var(--radius); text-align:center; color:var(--text-secondary); font-size:13px; cursor:pointer; }
    .dk-drop:hover, .dk-drop.dk-drop-an { border-color:var(--border-accent); background:var(--bg-accent); }
    .dk-bearbeiten  { border-color:var(--border-accent); background:var(--surface-1); gap:8px; }
    .dk-endung      { font-family:var(--font-mono); font-size:13px; color:var(--text-muted); flex:0 0 auto; }
    .dk-zeile       { cursor:pointer; }
    .dk-zeile:hover { background:var(--surface-1); }
    .dk-zeile:focus-visible { outline:2px solid var(--border-accent); outline-offset:-2px; }
    .dk-sym         { width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto; }
    .lk-dragover    { border-color:var(--border-accent) !important; background:var(--bg-accent); }
    /* ── Kalender-Gitter (Woche/Monat), kalender-grid.js ── */
    .kg-wrap        { display:flex; flex-direction:column; min-height:0; height:100%; font-family:var(--font-sans); }
    .kg-head        { display:flex; align-items:center; gap:10px; padding:6px 2px 10px; flex-wrap:wrap; }
    .kg-nav         { display:flex; align-items:center; gap:6px; }
    .kg-navbtn      { width:30px; height:30px; border-radius:var(--radius); border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .kg-navbtn:hover{ background:var(--surface-1); }
    .kg-label       { font-size:15px; font-weight:600; min-width:170px; text-align:center; color:var(--text-primary); }
    .kg-today       { height:30px; padding:0 12px; border-radius:var(--radius); border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-secondary); font-size:13px; cursor:pointer; }
    .kg-today:hover { background:var(--surface-1); }
    .kg-modeseg     { display:flex; border:0.5px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
    .kg-modebtn     { height:30px; padding:0 14px; border:0; background:var(--surface-2); color:var(--text-secondary); font-size:13px; cursor:pointer; border-right:0.5px solid var(--border); font-family:inherit; }
    .kg-modebtn:last-child { border-right:0; }
    .kg-modebtn.active     { background:var(--bg-accent); color:var(--text-accent); font-weight:500; }
    .kg-sp          { flex:1; }
    .kg-add         { height:30px; padding:0 12px; border-radius:var(--radius); border:0.5px solid var(--fill-accent); background:var(--fill-accent); color:#fff; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .kg-dow         { display:grid; grid-template-columns:repeat(7,1fr); border-left:0.5px solid var(--border); border-top:0.5px solid var(--border); background:var(--surface-1); }
    .kg-dow span    { padding:6px 8px; font-size:11px; font-weight:600; color:var(--text-muted); border-right:0.5px solid var(--border); }
    .kg-grid        { display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:minmax(92px,1fr); border-left:0.5px solid var(--border); flex:1; min-height:0; overflow:auto; }
    .kg-cell        { border-right:0.5px solid var(--border); border-bottom:0.5px solid var(--border); padding:5px 6px; position:relative; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
    .kg-cell.kg-dim { background:var(--surface-1); }
    .kg-cell.kg-td  { outline:2px solid var(--border-accent); outline-offset:-2px; }
    .kg-dn          { font-size:12px; color:var(--text-secondary); font-weight:600; align-self:flex-start; }
    .kg-cell.kg-td .kg-dn { background:var(--fill-accent); color:#fff; min-width:22px; height:22px; padding:0 5px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
    .kg-plus        { position:absolute; top:4px; right:5px; color:var(--text-muted); font-size:15px; opacity:0; cursor:pointer; }
    .kg-cell:hover .kg-plus { opacity:1; }
    .kg-chip        { font-size:11px; padding:2px 6px; border-radius:5px; border:0.5px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; line-height:1.5; }
    .kg-chip-priv   { background:var(--surface-2); color:var(--text-secondary); border-color:var(--border-strong); }
    .kg-chip-priv i { color:var(--text-accent); font-size:11px; }
    .kg-more        { font-size:10.5px; color:var(--text-muted); }
    .kg-week        { display:grid; grid-template-columns:repeat(7,1fr); border-left:0.5px solid var(--border); border-top:0.5px solid var(--border); flex:1; min-height:0; overflow:hidden; }
    .kg-wcol        { border-right:0.5px solid var(--border); display:flex; flex-direction:column; min-height:0; }
    .kg-wch         { padding:6px 8px; text-align:center; border-bottom:0.5px solid var(--border); background:var(--surface-1); font-size:11px; color:var(--text-muted); }
    .kg-wch b       { display:block; font-size:16px; color:var(--text-primary); }
    .kg-wch.kg-td b { color:var(--text-accent); }
    .kg-wbody       { flex:1; padding:6px; display:flex; flex-direction:column; gap:4px; overflow:auto; cursor:pointer; }
    .kg-legend      { display:flex; gap:12px; flex-wrap:wrap; padding:8px 4px 2px; font-size:12px; color:var(--text-secondary); }
    .kg-legend .kg-dot { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:1px; }
    .kg-empty       { color:var(--text-muted); font-size:13px; padding:30px 4px; text-align:center; }
    /* Termin-Modal */
    .kg-modal-bg    { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
    .kg-modal       { background:var(--surface-2); border-radius:12px; border:0.5px solid var(--border-strong); width:420px; max-width:100%; box-shadow:0 8px 30px rgba(0,0,0,.28); }
    .kg-mh          { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:0.5px solid var(--border); }
    .kg-mh h3       { font-size:15px; font-weight:600; margin:0; }
    .kg-mx          { background:none; border:0; color:var(--text-muted); cursor:pointer; font-size:18px; }
    .kg-mb          { padding:16px; display:flex; flex-direction:column; gap:11px; }
    .kg-mb label    { font-size:12px; color:var(--text-secondary); display:flex; flex-direction:column; gap:4px; }
    .kg-mb input, .kg-mb textarea { border:0.5px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--text-primary); padding:7px 10px; font-size:13px; font-family:inherit; }
    .kg-row2        { display:flex; gap:10px; }
    .kg-row2 label  { flex:1; }
    .kg-mf          { display:flex; gap:8px; justify-content:space-between; align-items:center; padding:12px 16px; border-top:0.5px solid var(--border); }
    /* ── Produktionsbalken über die Kästen (Woche/Monat), kalender-grid.js ── */
    .kg-month       { border-left:0.5px solid var(--border); border-top:0.5px solid var(--border); flex:1; min-height:0; overflow:auto; }
    .kg-weekview    { display:flex; flex-direction:column; flex:1; min-height:0; border-left:0.5px solid var(--border); border-top:0.5px solid var(--border); overflow:auto; }
    .kg-wkhead      { display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-1); border-bottom:0.5px solid var(--border); }
    .kg-wrow        { position:relative; }
    .kg-wrow-cells  { display:grid; grid-template-columns:repeat(7,1fr); }
    /* Kasten neu strukturiert: Kopfzeile (Tag + „+") · darunter Termine
       (per margin-top unter dem Balkenbereich). Überschreibt die alte
       .kg-cell/.kg-plus-Definition weiter oben. */
    .kg-cell        { border-right:0.5px solid var(--border); border-bottom:0.5px solid var(--border); padding:4px 6px; overflow:hidden; display:block; }
    .kg-dn-row      { display:flex; align-items:flex-start; justify-content:space-between; height:16px; }
    .kg-cell-body   { display:flex; flex-direction:column; gap:3px; }
    .kg-plus        { position:static; opacity:0; color:var(--text-muted); font-size:15px; cursor:pointer; }
    .kg-cell:hover .kg-plus { opacity:1; }
    .kg-lane        { position:absolute; left:0; right:0; top:18px; pointer-events:none; z-index:1; }
    .kg-bar         { position:absolute; height:20px; border-radius:5px; font-size:11px; line-height:19px; padding:0 7px;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:auto; cursor:pointer;
                      border:0.5px solid #e0a800; background:#ffd21f; color:#5a4300; }
    .kg-bar:hover   { filter:brightness(1.1); }
    .kg-bar .ti     { font-size:11px; vertical-align:-1px; }
    .kg-bar.cont-l  { border-top-left-radius:0; border-bottom-left-radius:0; }
    .kg-bar.cont-r  { border-top-right-radius:0; border-bottom-right-radius:0; }
    .kg-bar-more    { position:absolute; right:4px; font-size:10.5px; color:var(--text-secondary); background:var(--surface-2); border:0.5px solid var(--border); padding:0 5px; border-radius:5px; pointer-events:none; }
    .kg-dot-bar     { background:#ffd21f; border:0.5px solid #e0a800; }
    .kg-dot-priv    { background:var(--surface-2); border:0.5px solid var(--border-strong); }
    .kg-dot-liefer  { background:#ffd21f; border:0.5px solid #e0a800; }
    /* Liefertermin-Chip (Monatsansicht), greller Gelbton */
    .kg-liefer      { font-size:11px; padding:2px 7px; border-radius:5px; background:#ffd21f; color:#5a4300;
                      border:0.5px solid #e0a800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                      cursor:pointer; font-weight:500; }
    .kg-liefer i    { font-size:11px; vertical-align:-1px; }
    /* Markierte Aufträge (Flagge "Besonderer Fall"): lila wie im Auftrags-Tab (#8A33C4) */
    .kg-liefer.kg-markiert, .kg-bar.kg-markiert { background:#8A33C4; border-color:#6d2699; color:#fff; }
    .kg-liefer.kg-markiert .kg-nr { color:#fff; }
    .kg-dot-markiert { background:#8A33C4; border:0.5px solid #6d2699; }
    /* Zwei Zeilen: Name, darunter die vollständige Auftragsnummer (kalender-grid.js, orderNr) */
    .kg-liefer      { line-height:1.25; }
    /* "Alle Aufträge zeigen": die Zeilen wachsen mit dem vollsten Tag, sonst füllen sie die Höhe wie bisher */
    /* minmax(max-content,auto): die Zeile ist mindestens so hoch wie ihr vollster Tag (ein reines minmax(92px,auto)
       wächst bei fester Containerhöhe nicht); gibt es Platz übrig, füllen die Zeilen ihn wie bisher. */
    .kg-grid.kg-alle { grid-auto-rows:minmax(max-content,auto); }
    .kg-grid.kg-alle .kg-cell { min-height:92px; }
    .kg-cnt         { font-size:10.5px; font-weight:500; color:var(--text-accent); margin-left:4px; }
    .kg-opt         { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; cursor:pointer; padding:4px 10px; border:0.5px solid var(--border-strong); border-radius:var(--radius); color:var(--text-secondary); }
    .kg-opt.on      { border-color:var(--border-accent); background:var(--bg-accent); color:var(--text-accent); }
    .kg-opt input   { width:auto; margin:0; }
    .kg-liefer-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .kg-nr          { font-family:var(--font-mono); font-weight:400; font-size:10.5px; }
    /* 1 Zeile: der Name wird gekürzt, die Nummer bleibt immer ganz stehen */
    .kg-liefer-name.kg-ein { display:flex; gap:4px; align-items:center; }
    .kg-liefer-name.kg-ein .kg-ln { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .kg-liefer-name.kg-ein .kg-nr { flex:none; }
    /* Auto: Nummer neben dem Namen, wenn sie dort Platz hat; sonst bricht sie in die zweite Zeile um */
    .kg-liefer-name.kg-auto { display:flex; flex-wrap:wrap; column-gap:5px; align-items:baseline; white-space:normal; overflow:visible; }
    .kg-liefer-name.kg-auto .kg-ln { flex:0 1 auto; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .kg-liefer-name.kg-auto .kg-nr { flex:none; }
    /* Bindestrich zwischen Name und Nummer; Strich und Nummer bleiben zusammen, damit sie gemeinsam umbrechen */
    .kg-nrg { display:inline-flex; gap:4px; flex:none; }
    .kg-sep { opacity:.75; }
    .kg-liefer-name.kg-umbruch .kg-sep { display:none; }
    .kg-liefer .kg-nr { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .kg-liefer:hover{ filter:brightness(1.05); }
    /* Implantat-Katalog (Optionen -> Arbeitsarten & mehr -> Implantate),
       Variante A: links Hersteller (suchbar), rechts deren Systeme.
       Siehe implantate-katalog.js. */
    .ik-bar           { display:flex; align-items:center; gap:10px; }
    .ik-search        { flex:1; display:flex; align-items:center; gap:6px; height:32px; padding:0 10px;
                        border:0.5px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); }
    .ik-search .ti    { color:var(--text-muted); font-size:15px; }
    .ik-search input  { flex:1; border:none; outline:none; background:none; height:auto; padding:0;
                        font-size:13px; color:var(--text-primary); }
    .ik-split         { display:grid; grid-template-columns:230px 1fr; gap:12px; }
    .ik-col           { border:0.5px solid var(--border); border-radius:var(--radius); overflow:hidden;
                        display:flex; flex-direction:column; min-height:240px; }
    .ik-colhead, .ik-rhead { padding:8px 12px; border-bottom:0.5px solid var(--border); background:var(--surface-1);
                        display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-muted);
                        text-transform:uppercase; letter-spacing:.04em; }
    .ik-rhead b       { font-size:12.5px; font-weight:500; color:var(--text-primary); text-transform:none; letter-spacing:0; }
    .ik-col-scroll    { overflow-y:auto; max-height:360px; }
    .ik-hrow          { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px;
                        cursor:pointer; border-bottom:0.5px solid var(--border); color:var(--text-primary); }
    .ik-hrow:last-child { border-bottom:none; }
    .ik-hrow:hover    { background:var(--surface-1); }
    .ik-hrow.sel      { background:var(--bg-accent); color:var(--text-accent); font-weight:500; }
    .ik-hname         { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ik-hc            { font-size:11px; color:var(--text-muted); }
    .ik-hrow.sel .ik-hc { color:var(--text-accent); }
    .ik-hdot          { width:8px; height:8px; border-radius:50%; background:#e0a52c; flex-shrink:0; }
    .ik-hdot-grau     { background:var(--text-muted); }
    .ik-hrow.fix      { color:var(--text-muted); cursor:default; font-style:italic; }
    .ik-hdel          { opacity:0; }
    .ik-hrow:hover .ik-hdel { opacity:1; }
    .ik-srow          { display:flex; align-items:center; justify-content:space-between; padding:8px 12px;
                        font-size:13px; border-bottom:0.5px solid var(--border); }
    .ik-srow:last-child { border-bottom:none; }
    .ik-empty         { padding:16px; text-align:center; color:var(--text-muted); font-size:12px; }
    /* m/w-Umschalter (Patient-Geschlecht) im Auftrag, links vor Titel.
       Segmentiert, gleiche Höhe wie die Eingabefelder daneben. */
    .gender-toggle    { display:flex; height:34px; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; }
    .gt-opt           { flex:1; min-width:0; border:none; background:var(--surface-2); color:var(--text-muted);
                        font-size:13px; line-height:1; cursor:pointer; font-family:inherit; padding:0; }
    .gt-opt + .gt-opt { border-left:0.5px solid var(--border-strong); }
    .gt-opt:hover     { background:var(--surface-1); }
    .gt-opt.active    { background:var(--fill-accent); color:#fff; font-weight:500; }
    /* Verfügbarkeits-Wochentage (Optionen -> Support) */
    .sc-tage          { display:flex; gap:6px; flex-wrap:wrap; }
    .sc-tag           { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-secondary);
                        border:0.5px solid var(--border-strong); border-radius:16px; padding:4px 10px; cursor:pointer; }
    .sc-tag input     { width:14px; height:14px; margin:0; cursor:pointer; }
    /* Anklickbare Anhänge im Versanddialog (email-versand.js) */
    .ev-anhang        { display:inline-flex; align-items:center; gap:4px; margin:2px 4px 2px 0;
                        padding:2px 8px; border-radius:20px; cursor:pointer; font-size:11.5px;
                        background:var(--bg-accent); color:var(--text-accent); }
    .ev-anhang:hover  { filter:brightness(0.95); text-decoration:underline; }
    /* Textblöcke-Editor: Seitenvorschau mit Ablagestellen (textbloecke.js).
       Die Vorschau ist bewusst eine Skizze des Aufbaus, kein Druckbild —
       sie zeigt die Reihenfolge der Bestandteile, nicht Millimeter. */
    /* Textblöcke-Fenster: Typenliste | Editor | Vorschau. Unter 1400 px
       rutscht die Vorschau unter den Editor, statt ihn zu quetschen. */
    /* Vorschau-Spalte breit (22.10.2026, Festlegung Chris): Das echte PDF füllt die
       Spaltenbreite — bei 440 px stand es bei ~70 % und war nicht lesbar. Der Editor
       wird dafür schmaler (Blockfelder brechen um). */
    /* ⚠ ".mv-grid.tb-grid", nicht ".tb-grid": .mv-grid steht weiter unten mit
       demselben Gewicht und gewann bisher — die Spalten waren immer 200px | 1fr,
       die Vorschau rutschte als dritter Eintrag in eine 200 px schmale Zelle. */
    /* Breite der Vorschau frei ziehbar (textbloecke.js, tbTrennerInit): Der Trenner
       setzt --tb-vorschau-w in px; ohne Wert gilt die Vorgabe 1fr : 1,7fr. */
    .mv-grid.tb-grid  { grid-template-columns:190px minmax(0,1fr) var(--tb-vorschau-w, minmax(0,1.7fr)); align-items:start; }
    .tb-trenner       { position:absolute; left:-12px; top:0; bottom:0; width:8px; cursor:col-resize;
                        border-radius:4px; touch-action:none; z-index:2; }
    .tb-trenner::after { content:''; position:absolute; left:3px; top:0; bottom:0; width:2px;
                         border-radius:1px; background:var(--border-strong); }
    .tb-trenner:hover, .tb-trenner.on { background:var(--bg-accent); }
    .tb-trenner:hover::after, .tb-trenner.on::after { background:var(--border-accent); }
    @media (max-width:1400px) { .mv-grid.tb-grid { grid-template-columns:200px minmax(0,1fr); }
                                .tb-trenner { display:none; }
                                .tb-vorschau-spalte { grid-column:1 / -1; } }
    .tb-vorschau-spalte { position:sticky; top:0; min-width:0; }
    .tb-vorschau-kopf { display:flex; align-items:center; justify-content:space-between; gap:8px;
                        margin-bottom:6px; font-size:13px; }
    .tb-vorschau-hinweis { font-size:11px; color:var(--text-muted); line-height:1.5; margin-bottom:6px; }
    .tb-vorschau-rahmen { background:var(--surface-1); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:8px; overflow:hidden;
                        display:flex; justify-content:center; }
    /* Das Blatt behält seine echten 595 px und wird verkleinert: Schriftgrößen
       und Umbrüche stimmen so mit der Dokumentvorschau überein. */
    .tb-vorschau      { zoom:0.66; pointer-events:none; }
    .tb-vorschau .pdf-page { box-shadow:0 0 0 0.5px #ccc; }
    /* Echtes PDF (textbloecke.js, tbPdfZeichnen): füllt den Rahmen, Höhe nach Fenster. */
    .tb-vorschau-pdf  { width:100%; height:calc(92vh - 230px); min-height:520px; border:0; background:#fff; }
    .tb-seg           { display:inline-flex; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; font-size:12px; }
    .tb-seg button    { border:0; background:none; padding:3px 10px; cursor:pointer;
                        color:var(--text-secondary); font-size:12px; }
    .tb-seg button.on { background:var(--bg-accent); color:var(--text-accent); }
    .tb-pflicht-badge { font-size:10px; padding:1px 6px; border-radius:10px; margin-left:4px;
                        background:var(--bg-warning); color:var(--text-warning); }
    .tb-geerbt        { border:0.5px dashed var(--border-strong); border-radius:var(--radius);
                        padding:8px 10px; margin-bottom:6px; font-size:11px; color:var(--text-secondary);
                        display:flex; align-items:flex-start; gap:8px; }
    .tb-seite         { background:var(--surface-2); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:18px 20px; }
    .tb-doc-kopf      { display:flex; justify-content:space-between; align-items:flex-start; font-size:12px; }
    .tb-doc-trenner   { height:1px; background:var(--border); margin:8px 0 10px; }
    .tb-doc-adresse   { font-size:11px; color:var(--text-muted); line-height:1.5; margin-bottom:12px; }
    .tb-doc-tabelle   { background:var(--surface-1); border-radius:var(--radius); padding:10px 12px; margin:10px 0 6px; }
    .tb-doc-zeile     { display:flex; justify-content:space-between; font-size:11px;
                        color:var(--text-secondary); padding:2px 0; }
    .tb-doc-kopfzeile { color:var(--text-muted); border-bottom:0.5px solid var(--border);
                        padding-bottom:4px; margin-bottom:5px; }
    .tb-doc-hinweis   { font-size:11px; color:var(--text-muted); font-style:italic; padding:2px 0; }
    .tb-doc-summe     { display:flex; justify-content:flex-end; gap:14px; font-size:12px;
                        font-weight:500; padding:6px 12px 12px 0; }
    .tb-doc-fuss      { font-size:10px; color:var(--text-muted); text-align:center; }
    .tb-stelle        { border:1px dashed var(--border-strong); border-radius:var(--radius);
                        padding:6px; margin:10px 0; }
    .tb-stelle-ueber  { border-color:var(--border-accent); background:var(--bg-accent); }
    .tb-stelle-leer   { display:flex; align-items:center; justify-content:space-between; gap:10px;
                        font-size:11px; color:var(--text-muted); padding:2px 4px; }
    .tb-block         { display:flex; align-items:flex-start; gap:8px; background:var(--bg-accent);
                        border:0.5px solid var(--border-accent); border-radius:var(--radius);
                        padding:8px 10px; margin-bottom:6px; }
    .tb-block-inaktiv { opacity:.55; }
    .tb-block-offen   { background:var(--surface-1); border-color:var(--border-strong); }
    .tb-griff         { color:var(--text-accent); font-size:16px; cursor:grab; margin-top:1px; flex-shrink:0; }
    .tb-block-titel   { font-size:11px; color:var(--text-accent); margin-bottom:3px; font-weight:500; }
    .tb-block-text    { font-size:11px; color:var(--text-accent); line-height:1.5;
                        white-space:pre-wrap; word-break:break-word; }
    .tb-block-aktion  { color:var(--text-accent); font-size:15px; cursor:pointer; flex-shrink:0; }
    /* Länderansicht mit "Standard-Blöcke mitanzeigen": graue Standardzeilen,
       Einfügestellen dazwischen, Schalter über der Seite. */
    .tb-block-standard { background:var(--surface-1); border-color:var(--border-strong); }
    .tb-block-standard .tb-block-titel { color:var(--text-secondary); }
    .tb-block-standard .tb-block-text  { color:var(--text-secondary); }
    .tb-block-standard .tb-griff       { color:var(--text-muted); }
    .tb-einfuegen     { display:flex; align-items:center; gap:6px; height:18px; margin:0 0 4px;
                        color:var(--text-muted); font-size:11px; cursor:pointer; opacity:.55; }
    .tb-einfuegen::before, .tb-einfuegen::after { content:''; flex:1; border-top:0.5px dashed var(--border-strong); }
    .tb-einfuegen:hover { opacity:1; color:var(--text-accent); }
    .tb-landschalter  { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5;
                        background:var(--surface-1); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:7px 10px; margin-bottom:12px; }
    .tb-landschalter input { margin-top:3px; }
    .tb-ph-leiste     { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
    /* Die rechte Fußzeilenspalte auch im Eingabefeld rechtsbündig —
       so sieht man beim Tippen, wie es auf dem Papier aussieht. */
    textarea.tb-rechts { text-align:right; }
    /* Vorschaufläche des Laborlogos in den Optionen. Seitenverhältnis
       etwa wie im Briefkopf (30 × 16 mm), damit man gleich sieht, wie
       es dort wirkt. */
    /* Bühne: der Briefkopf im Maßstab des Papiers, 595 px auf 210 mm —
       derselbe Maßstab wie die Dokumentvorschau. Sie bleibt immer gleich
       groß; die Regler verstellen nur die Zelle darin. Vorher änderte
       der Regler die Anzeigefläche selbst, wodurch der Bezugspunkt
       fehlte und man die Wirkung nicht beurteilen konnte. */
    /* 170 px = 60 mm: Reicht bis unter die dritte Zeile der
       Empfängeranschrift (44,7 mm + 3 x 4,55 mm = 58,4 mm). */
    .logo-buehne      { position:relative; width:595px; max-width:100%; height:170px;
                        background:#fff; border:0.5px solid var(--border);
                        border-radius:var(--radius); overflow:hidden; }
    .logo-zelle       { position:absolute; border:1px dashed #6f9fd8; border-radius:2px;
                        display:flex; align-items:center; justify-content:center;
                        overflow:hidden; background:repeating-conic-gradient(#f4f4f4 0% 25%, #fff 0% 50%) 50%/10px 10px; }
    .logo-zelle img   { width:100%; height:100%; object-fit:contain; display:block; }
    .logo-zelle span  { font-size:10px; color:#999; }
    .logo-info-block  { position:absolute; text-align:right; }
    .lb-titel         { font-size:13px; font-weight:700; color:#1a56db; line-height:1; margin-top:-1.7px; }
    .lb-zeilen        { font-size:10px; color:#444; margin-top:4.2px; line-height:10.2px; }
    .logo-grenze      { position:absolute; left:0; right:0; border-top:1px dotted #d06a6a; }
    .logo-anschrift   { position:absolute; font-size:10px; color:#111; line-height:12.9px; }
    .mv-grid          { display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start; }
    .mv-typ           { padding:7px 10px; font-size:13px; border-radius:var(--radius); cursor:pointer;
                        color:var(--text-secondary); display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .mv-typ:hover     { background:var(--surface-1); }
    .mv-typ.active    { background:var(--surface-2); border:0.5px solid var(--border);
                        color:var(--text-primary); font-weight:500; }
    /* Anklickbare Auftragsnummer (auftragsordner.js): sichtbar als
       Klickziel, aber ohne die Zeile zu einem Linkteppich zu machen —
       unterstrichen erst beim Darueberfahren. */
    .ao-nr             { cursor: pointer; text-decoration: none; }
    .ao-nr:hover       { text-decoration: underline; color: var(--text-accent); }
    /* Auftragsliste (Festlegung Chris, 09.11.2026): Unterstreichung bleibt dauerhaft, dazu das Kopier-Symbol. */
    /* On hold (onhold.js, Festlegung Chris, 09.11.2026): Dialoge, Popup, Zeitzeile im Status-Feld */
    .oh-bg       { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.45);
                   display: flex; align-items: center; justify-content: center; padding: 16px; }
    .oh-box      { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px;
                   padding: 16px 18px; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; }
    .oh-kopf     { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .oh-kopf h3  { margin: 0; font-size: 15px; font-weight: 500; }
    .oh-pill     { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 10px;
                   font-size: 11px; font-weight: 500; background: #2B2F36; color: #fff; white-space: nowrap; }
    .oh-sub      { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .oh-lbl      { display: block; font-size: 12px; color: var(--text-secondary); margin: 8px 0 3px; }
    .oh-box input[type=date], .oh-box input[type=text] { width: 100%; }
    .oh-hinweis  { font-size: 12px; color: var(--text-secondary); margin-top: 10px; }
    .oh-fehler   { font-size: 12px; color: var(--text-danger); min-height: 16px; margin-top: 6px; }
    .oh-zeile    { font-size: 13px; margin: 4px 0; }
    .oh-knoepfe  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
    .oh-knoepfe.oh-spalte { flex-direction: column; align-items: stretch; }
    .oh-pz       { padding: 9px 0; border-bottom: 0.5px solid var(--border); }
    .oh-pz-text  { min-width: 0; }
    .oh-pz-k     { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .oh-faellig  { color: var(--text-danger); font-weight: 500; }
    .status-ts .oh-ts, .oh-ts { font-size: 10px; white-space: nowrap; }
    /* Spalten "Termine" und "Rechnung" der Auftragsliste (Festlegung Chris, 09.11.2026) */
    .tm-zelle          { white-space: nowrap; line-height: 1.45; }
    .tm-zelle > span   { display: flex; align-items: center; gap: 6px; font-size: 12px; }
    /* Farben (Chris, 09.11.2026): Eingang und Liefer komplett schwarz, Wunsch komplett grau. Das Warndreieck
       bei später Lieferung behält seine Warnfarbe — es ist ein Signal, kein Text. */
    .tm-k              { min-width: 46px; color: var(--text-primary); font-size: 11px; }
    .tm-eingang, .tm-liefer { color: var(--text-primary); }
    .tm-wunsch, .tm-wunsch .tm-k, .tm-wunsch .wunsch-zelle,
    .tm-wunsch .wunsch-zelle.wunsch-warn { color: var(--text-muted); font-weight: 400; }
    .tm-wunsch .wunsch-zelle.wunsch-warn i { color: var(--text-warning); }
    .tm-re-nr          { font-size: 11px; color: var(--text-muted); }
    .tm-leer           { color: var(--text-muted); }
    .col-fix-del       { width: 34px; text-align: center; }
    /* Auftrags-ID und Arbeits-ID in der Liste (Chris, 09.11.2026): Kopier-Symbol dauerhaft, unterstrichen nur
       beim Überfahren (kommt aus .ao-nr:hover). Der Zwischenstand "dauerhaft unterstrichen" ist zurückgenommen. */
    .ao-nr-fest        { text-underline-offset: 2px; }
    .ao-kopier-sym     { font-size: 12px; margin-left: 4px; color: var(--text-muted); vertical-align: -1px; text-decoration: none; display: inline-block; }
    .ao-nr-fest:hover .ao-kopier-sym { color: var(--text-accent); }
    /* Hinweiszeile unter der Auftragsnummer im Detailfenster: sagt, dass
       der Klick den Ordnerpfad kopiert und in welcher Form (Windows/
       Linux). Kurz gehalten — die erste Spalte von .dh-row1 ist 190 px. */
    .dh-nr-hinweis     { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted);
                         margin-top: 2px; line-height: 1.3; white-space: nowrap; }
    .dh-nr-hinweis i   { font-size: 11px; vertical-align: -1px; margin-right: 2px; }
    .dh-nr-hinweis-fehlt { color: var(--text-warning); }
    .mv-dot           { width:6px; height:6px; border-radius:50%; background:var(--text-accent); flex-shrink:0; }
    /* Passwort sichtbar machen (passwort-auge.js). Der Wrapper ist der
       Positionsanker; das Feld bekommt rechts Platz, damit die Schrift
       nicht unter dem Auge verschwindet. */
    .pw-wrap          { position:relative; display:inline-block; }
    .pw-wrap > input  { width:100%; padding-right:30px; }
    .pw-auge          { position:absolute; right:2px; top:0; bottom:0; width:28px;
                        display:flex; align-items:center; justify-content:center;
                        border:none; background:none; padding:0; cursor:pointer;
                        color:var(--text-muted); }
    .pw-auge:hover    { color:var(--text-primary); }
    .pw-auge i        { font-size:16px; }
    .mv-ph            { font-size:11px; font-family:var(--font-mono); padding:2px 7px; border-radius:20px;
                        background:var(--bg-accent); color:var(--text-accent); cursor:pointer;
                        white-space:nowrap; flex-shrink:0; }
    .mv-ph:hover      { filter:brightness(0.95); }
    /* Platzhalterliste im E-Mail-Text-Editor: nach Herkunft gruppiert,
       je Zeile Marke + Beispielwert + Kopier-Symbol (19.08.2026). Eine
       blanke Reihe aus über dreißig Marken sagt nicht, was herauskommt. */
    .mv-ph-gruppe     { font-size:10px; color:var(--text-muted); letter-spacing:.04em;
                        text-transform:uppercase; margin:10px 0 4px; }
    .mv-ph-gruppe:first-child { margin-top:0; }
    .mv-ph-raster     { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:2px 14px; }
    .mv-ph-zeile      { display:flex; align-items:center; gap:6px; min-width:0;
                        padding:2px 4px; border-radius:var(--radius); cursor:pointer; }
    .mv-ph-zeile:hover { background:var(--surface-1); }
    .mv-ph-bsp        { font-size:11px; color:var(--text-muted); overflow:hidden;
                        text-overflow:ellipsis; white-space:nowrap; }
    .mv-ph-kopie      { font-size:12px; color:var(--text-muted); margin-left:auto; flex-shrink:0; padding:2px; }
    .mv-ph-kopie:hover { color:var(--text-primary); }
    /* Muss die :hover-Regel darüber schlagen — der Zeiger steht beim
       Quittieren noch auf dem Symbol. */
    .mv-ph-kopie.mv-ph-kopiert { color:var(--text-success); }
    /* Bausteine der Filterregeln (filterregel-hilfe.js) — dieselbe Pille
       wie in den E-Mail-Texten, aber in beschrifteten Gruppen: Eine
       blanke Reihe beantwortet nicht, was welcher Baustein sucht. */
    .fr-bausteine        { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:5px; }
    .fr-bausteine-gruppe { margin-top:10px; padding-left:9px; border-left:2px solid var(--border); }
    .fr-bausteine-titel  { font-size:12px; font-weight:500; color:var(--text-primary); margin-bottom:2px; }
    .opt-fr3          { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
    .opt-lbl          { font-size:12px; color:var(--text-secondary); display:block; margin-bottom:3px; }
    .opt-seg          { display:flex; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; width:100%; }
    .opt-seg-btn      { flex:1; padding:8px 12px; font-size:13px; cursor:pointer; border:none;
                        background:none; color:var(--text-secondary);
                        display:flex; flex-direction:column; gap:2px; text-align:left; }
    .opt-seg-btn + .opt-seg-btn     { border-left:0.5px solid var(--border-strong); }
    .opt-seg-btn:not(.active):hover { background:var(--surface-1); }
    .opt-seg-btn.active             { background:var(--fill-accent); color:#fff; font-weight:500; }
    .opt-seg-btn.active .opt-seg-sub{ color:rgba(255,255,255,0.75); }
    .opt-seg-sub      { font-size:11px; color:var(--text-muted); font-weight:400; }
    .opt-backup-info  { background:var(--surface-1); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:10px 12px;
                        display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .opt-save-row     { display:flex; justify-content:flex-end; padding-top:4px; }
    /* Der Speichern-Knopf laeuft beim Scrollen mit und klebt unten am
       Rand — vorher stand er am Ende eines langen Formulars und wurde
       schlicht uebersehen (Aenderungen gingen dadurch verloren).
       Gegenstueck zur oben klebenden Tab-Leiste; bottom:-20px deckt
       den Innenabstand des Scrollcontainers mit ab. */
    #view-optionen .opt-save-row {
      position:sticky; bottom:-20px; z-index:5;
      align-items:center; gap:10px;
      background:var(--surface-0);
      border-top:0.5px solid var(--border);
      padding:10px 0 20px; margin-bottom:-20px;
    }
    /* Mahnwesen ist ein KURZER Kasten: Die klebende Leiste (grauer Grund,
       Linie, -20 px unten) ist für lange Formulare gebaut, die unter ihr
       weiterlaufen. Hier ragte sie unten über die Kartenkante hinaus und
       ignorierte die runden Ecken (Chris, 08.10.2026: "Design kaputt").
       Also ein schlichter Knopf rechts unter dem Formular. */
    #view-optionen #opt-pane2-mahnwesen .opt-save-row {
      position:static; background:transparent; border-top:none;
      padding:4px 0 0; margin-bottom:0;
    }
    /* Meldungszeilen im Speicherort-Block (cloud-speicher.js): eine
       Zeile, die auf einen Blick sagt, ob die Ablage erreichbar ist. */
    .cs-meldung        { display:flex; align-items:flex-start; gap:9px; padding:10px 12px;
                         border-radius:6px; font-size:13px; line-height:1.45; }
    .cs-meldung + .cs-meldung { margin-top:8px; }
    .cs-meldung i      { font-size:16px; flex-shrink:0; margin-top:1px; }
    .cs-meldung a      { color:inherit; }
    .cs-meldung .cs-rechts { margin-left:auto; font-size:11px; opacity:0.75;
                         font-family:var(--font-mono); white-space:nowrap; }
    .cs-ok             { background:var(--bg-success); border:0.5px solid var(--text-success);
                         color:var(--text-success); }
    .cs-warn           { background:var(--bg-warning); border:0.5px solid var(--border-warning);
                         color:var(--text-warning); }
    .cs-fehler         { background:var(--bg-danger);  border:0.5px solid var(--border-danger);
                         color:var(--text-danger); }
    /* Hinweis links in der Leiste: erscheint, sobald im Optionen-Tab
       etwas eingegeben wurde, und verschwindet nach dem Speichern. */
    .opt-save-hint        { margin-right:auto; font-size:11px; color:var(--text-muted); }
    .opt-save-hint.hidden { display:none; }

    /* ============================================================
       ABRECHNUNG-TAB
       ============================================================ */
    .abr-inner        { flex:1; overflow-y:auto; padding:20px 24px; }
    .abr-wrap         { display:flex; flex-direction:column; gap:14px; }
    /* Flex-Zeile für #abr-ue-wrap (Rechnungsübersicht) + #abr-detail-wrap
       (nimmt #detail auf, wenn abrUeOpenRow() eine Rechnung öffnet).
       #abr-ue-wrap schrumpft dabei (min-width:0 ist Pflicht, sonst
       verhindert der Tabelleninhalt jedes Zusammenschieben). */
    /* Kein gap: Ein leerer Detailbereich (Breite 0) kostete sonst 14 px
       Breite und schob die Sprung-Knöpfe in der Abrechnung gegenüber der
       Monatsaufstellung nach links. Der Abstand steht jetzt als margin am
       GEÖFFNETEN Detailbereich (.abr-detail-wrap:has(...) unten). */
    .abr-content      { display:flex; align-items:flex-start; }
    .abr-content > #abr-ue-wrap { flex:1; min-width:0; }
    /* Echtes Reinrutschen (Festlegung Chris, 14.09.2026 — Mockup
       freigegeben): die Wrap-Breite animiert von 0 auf 720px, sobald sie
       ein sichtbares #detail enthält. Weil #abr-detail-wrap ein festes
       Flex-Geschwister von #abr-ue-wrap ist (flex-shrink:0), quetscht
       genau diese Breitenänderung die Tabelle daneben im selben Zug mit
       zusammen — keine eigene Animation dafür nötig, das erledigt der
       Browser über den Flex-Neuaufbau bei jedem Zwischenschritt der
       CSS-Transition. #detail bleibt bei seiner normalen festen Breite
       (.detail-Basisregel oben, 720px) und füllt die Wrap-Breite genau
       aus, sobald die fertig ist. */
    .abr-detail-wrap  { width:0; margin-left:0; flex-shrink:0; overflow:hidden; transition:width 220ms ease-out, margin-left 220ms ease-out; }
    .abr-detail-wrap:has(#detail:not(.hidden)) { width:720px; margin-left:14px; }
    .abr-form-narrow  { max-width:680px; margin:0 auto; width:100%; }
    .abr-card         { background:var(--surface-2); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:14px 16px; }
    .abr-sec-lbl      { font-size:11px; color:var(--text-muted); font-weight:500;
                        text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
    .abr-fr2          { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .abr-fr3          { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
    .abr-lbl          { font-size:12px; color:var(--text-secondary); display:block; margin-bottom:3px; }
    .type-seg         { display:flex; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; }
    .type-btn         { flex:1; padding:10px 14px; border:none; background:var(--surface-2);
                        color:var(--text-secondary); font-size:13px; cursor:pointer;
                        display:flex; flex-direction:column; gap:0; text-align:left;
                        line-height:1.4; min-height:56px; }
    .type-btn + .type-btn       { border-left:0.5px solid var(--border-strong); }
    .type-btn:not(.active):hover{ background:var(--surface-1); }
    .type-seg .type-btn.active,
    .type-seg .type-btn.active:hover,
    .type-seg .type-btn.active:focus { background:var(--fill-accent) !important; color:#fff !important; }
    .type-sub         { font-size:11px; color:var(--text-muted); margin-top:3px;
                        white-space:normal; line-height:1.45; }
    .type-seg .type-btn.active .type-sub { color:rgba(255,255,255,0.78) !important; }
    .abr-pos-tbl      { width:100%; border-collapse:collapse; font-size:13px; }
    .abr-pos-tbl th   { background:var(--surface-1); padding:7px 10px; text-align:left;
                        font-size:11px; font-weight:500; color:var(--text-secondary);
                        border-bottom:0.5px solid var(--border); }
    .abr-pos-tbl td   { padding:6px 10px; border-bottom:0.5px solid var(--border); vertical-align:middle; }
    .abr-pos-tbl tr:last-child td { border-bottom:none; }
    .abr-rb-row       { display:flex; align-items:center; gap:8px; padding:8px 10px;
                        background:var(--surface-1); border-radius:var(--radius);
                        border:0.5px solid var(--border); }
    .abr-rb-toggle    { display:flex; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
    .abr-rb-opt       { padding:3px 10px; font-size:12px; border:none; background:none;
                        color:var(--text-secondary); cursor:pointer; height:28px; }
    .abr-rb-opt.active{ background:var(--fill-accent); color:#fff; }
    .abr-sum-row      { display:flex; justify-content:flex-end; gap:24px; font-size:13px; padding:3px 0; }
    .abr-sum-row.total{ font-weight:500; font-size:14px; border-top:0.5px solid var(--border);
                        padding-top:8px; margin-top:4px; }
    .abr-action-row   { display:flex; justify-content:flex-end; gap:8px; padding-bottom:8px; }

    /* Monatsnavigator (Sammelrechnung) */
    .sr-mnav          { display:flex; align-items:center; border:0.5px solid var(--border-strong);
                        border-radius:var(--radius); overflow:hidden; height:34px; flex-shrink:0; }
    .sr-mnav-btn      { width:30px; height:34px; display:flex; align-items:center;
                        justify-content:center; background:var(--surface-1); border:none;
                        cursor:pointer; color:var(--text-secondary); font-size:16px; }
    .sr-mnav-btn:hover{ background:var(--surface-2); color:var(--text-primary); }
    .sr-mnav-lbl      { padding:0 12px; font-size:13px; font-weight:500; color:var(--text-accent);
                        background:var(--bg-accent); border-left:0.5px solid var(--border);
                        border-right:0.5px solid var(--border); white-space:nowrap; height:34px;
                        display:flex; align-items:center; min-width:130px;
                        justify-content:center; cursor:pointer; }

    /* Auftrag-Zeilen Sammelrechnung */
    .abr-sr-row       { display:flex; align-items:center; gap:10px; padding:9px 12px;
                        border:0.5px solid var(--border); border-radius:var(--radius);
                        margin-bottom:6px; background:var(--surface-2); }
    .abr-sr-row.abr-sr-checked { background:var(--bg-accent); border-color:var(--border-accent); }

    /* ============================================================
       PDF-VORSCHAU MODAL
       ============================================================ */
    .pdf-overlay      { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
                        z-index:200; align-items:center; justify-content:center; }
    .pdf-overlay.open { display:flex; }
    .pdf-modal        { background:var(--surface-2); border-radius:12px; width:760px;
                        max-width:96vw; max-height:92vh; display:flex; flex-direction:column;
                        border:0.5px solid var(--border); transition:width .15s ease; }
    .pdf-modal.pdf-dual { width:1500px; }
    /* Echte PDF-Vorschau (21.10.2026): Der Rahmen zeigt das erzeugte PDF, die HTML-Blätter
       bleiben im Hintergrund erhalten (Rückfall), sind aber ausgeblendet. */
    .pdf-body.pdf-echt-an { padding:0; background:var(--surface-0); align-items:stretch; }
    .pdf-body.pdf-echt-an > .pdf-page,
    .pdf-body.pdf-echt-an > .pdf-spalte { display:none !important; }
    .pdf-echt         { border:0; background:#fff; width:100%; }
    .pdf-body.pdf-echt-an > .pdf-echt { display:block !important; height:calc(92vh - 150px); min-height:520px; }
    .pdf-toolbar      { display:flex; align-items:center; justify-content:space-between;
                        padding:12px 16px; border-bottom:0.5px solid var(--border);
                        background:var(--surface-1); flex-shrink:0; border-radius:12px 12px 0 0; }
    .pdf-toolbar-title{ font-size:13px; font-weight:500; }
    /* align-items:flex-start ist PFLICHT, nicht Geschmack (01.09.2026).
       Ohne die Angabe gilt der Vorgabewert "stretch": Der Browser
       streckt das Blatt auf die Höhe dieses Kastens und macht seine
       Höhe damit FEST. Ist der Inhalt höher, wächst das Blatt nicht mit
       — es staucht stattdessen seine eigenen Bausteine. Am laufenden
       Frontend nachgemessen: Der Abstandhalter unter dem Briefkopf fiel
       von 164 px auf 0 (der Text stand dann auf Logo und Anschrift),
       danach lief der Rest bis zu 733 px unter den Blattrand.
       Aufgefallen an Auftrag "2 202608089" mit sieben Materialzeilen. */
    .pdf-body         { overflow-y:auto; flex:1; padding:24px; background:var(--surface-0);
                        display:flex; justify-content:center; align-items:flex-start; }
    /* position:relative, damit Anschriftfeld und Rücksendeangabe
       absolut auf ihrer DIN-Position sitzen können (siehe
       slVorschauKopfHtml in speicherort.js). 595 px stellen 210 mm dar. */
    .pdf-page         { background:#fff; width:595px; min-height:842px; padding:40px 48px;
                        font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#222;
                        flex-shrink:0; position:relative;
                        /* Für die Fußzeile: Sie soll unten sitzen, nicht direkt
                           unter dem Inhalt. Der Inhalt darüber wächst, die
                           Fußzeile bleibt am Blattende — wie im Druck. */
                        display:flex; flex-direction:column; }
    /* Die Fußzeile setzt ihren Abstand selbst (margin-top:auto, siehe
       tbFussSpaltenHtml). Diese Regel bleibt als Rückfall, falls eine
       Fußzeile ohne eigene Angabe gezeichnet wird.
       Nach dem Seitenumbruch (pdf-seiten.js) sitzt sie absolut auf
       fester Höhe — dann greift weder das eine noch das andere. */
    .pdf-page > .pdf-fuss { margin-top:auto; }
    /* Zweite Hälfte des Stauch-Schutzes: Kein Baustein darf kleiner
       gerechnet werden, als er ist. Betrifft auch Blätter, die nicht
       im .pdf-body hängen (Textblock-Editor). */
    .pdf-page > *     { flex-shrink:0; }
    /* Eine Spalte je Vorschau-Dokument: Der .pdf-body stellt Rechnung
       und Konformitätserklärung NEBENEINANDER, Folgeblätter gehören
       aber UNTER ihr Ausgangsblatt (siehe psSpalteFuer). */
    .pdf-spalte       { display:flex; flex-direction:column; align-items:center;
                        gap:16px; flex-shrink:0; }
    /* "Seite x von y" — 6 mm über der Blattkante, also unterhalb der
       Fußzeile, die bei 12 mm endet. Gleiche Lage wie slSeitenzahlen()
       im PDF. */
    .pdf-seitenzahl   { position:absolute; font-size:6.5px; color:#8c8c8c; }
    /* Nichts darf über die Blattbreite hinauslaufen — sonst wandert die
       Betragsspalte aus dem sichtbaren Bereich. */
    .pdf-page table   { table-layout:fixed; width:100%; }
    /* Kopf auf der DIN-Kopfzone: absolut gesetzt, damit seine Unterkante
       nicht von der Logohöhe abhängt. Sonst rutscht die blaue Linie in
       die Empfängeranschrift, die auf fester Position steht. */
    .pdf-din-kopf     { position:absolute; left:48px; right:48px;
                        margin-bottom:0 !important; padding-bottom:0 !important;
                        border-bottom:none !important; }
    .pdf-din-rueck    { position:absolute; font-size:6.5px; color:#777; line-height:1.3;
                        padding-bottom:1.5px; border-bottom:0.5px solid #bbb;
                        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pdf-din-anschrift{ position:absolute; font-size:11px; line-height:1.45; color:#111; }
    /* Zahlungsreferenz rechts neben dem Anschriftfeld (Rechnung und
       Monatsaufstellung): Hinweis 7 pt grau, Beschriftung 8 pt, Nummer
       11 pt fett — die Grundlinien liegen im PDF (slPdfKopf) bei
       +3,5 / +7,5 / +12,3 mm unter der Anschrift-Oberkante; hier über
       Zeilenhöhen in px nachgebildet (1 mm = 2,833 px). */
    .pdf-din-zahlref  { position:absolute; right:48px; text-align:right; white-space:nowrap; }
    .pdf-zr-hinweis   { font-size:7.5px; color:#777; line-height:11px; }
    .pdf-zr-label     { font-size:8.5px; color:#444; line-height:11.3px; }
    .pdf-zr-nr        { font-size:12px; font-weight:700; color:#111; line-height:13.6px;
                        font-variant-numeric:tabular-nums; }
    .pdf-page-konf    { padding:32px 22px !important; }
    .pdf-hdr          { display:flex; justify-content:space-between; align-items:flex-start;
                        margin-bottom:28px; padding-bottom:14px; border-bottom:2px solid #1a56db; }
    .pdf-labor-name   { font-size:13px; font-weight:700; color:#1a56db; margin-bottom:4px; }
    .pdf-labor-addr   { font-size:10px; color:#666; line-height:1.6; }
    .pdf-nr-blk       { text-align:right; }
    /* Titel und Angabenblock sind auf die Maße des PDF umgerechnet.
       Die Vorschauseite ist 595 px breit und stellt 210 mm dar, ein
       Millimeter sind also 2,833 px.

       Vorher standen hier 16 px und 11 px mit Zeilenabstand 1,7 — der
       Block war dadurch 25,8 mm hoch statt 16,3 mm wie im Druck. Neben
       diesem zu hohen Block wirkte das Logo zu klein, obwohl es im PDF
       genau passte.

       Titel 13 pt = 13 px; die 1,7 px nach oben rücken die Oberkante
       der Großbuchstaben auf 0, bündig mit dem Logo. Angaben 8 pt bei
       3,6 mm Zeilenabstand = 10,2 px; 10 px Schriftgröße bleibt dabei
       lesbar. Unterkante damit bei 16,4 mm. */
    .pdf-belegart     { font-size:13px; font-weight:700; color:#1a56db;
                        line-height:1; margin-top:-1.7px; }
    .pdf-nr-info      { font-size:10px; color:#444; margin-top:4.2px; line-height:10.2px; }
    .pdf-recv         { margin-bottom:22px; }
    .pdf-recv-lbl     { font-size:9px; color:#999; text-transform:uppercase;
                        letter-spacing:.08em; margin-bottom:4px; }
    .pdf-recv-addr    { font-size:11px; line-height:1.7; }
    /* minmax(0,1fr) statt 1fr: Rasterspalten haben von Haus aus
       min-width:auto — ein langer Herstellername oder eine lange
       Adresse würde die Spalte über den Seitenrand hinausdrücken statt
       umzubrechen. Im PDF bricht jsPDF ohnehin um; ohne diese Zeile
       liefen Vorschau und Druck auseinander. */
    .pdf-ref-blk      { background:#f5f7fa; border-radius:4px; padding:8px 12px;
                        margin-bottom:20px; display:grid;
                        grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
    .pdf-ref-item     { min-width:0; }
    .pdf-ref-item label { font-size:9px; color:#999; text-transform:uppercase;
                          letter-spacing:.06em; display:block; margin-bottom:2px; }
    .pdf-ref-item span  { font-size:11px; color:#222; font-weight:500;
                          display:block; white-space:normal;
                          word-break:break-word; overflow-wrap:break-word; }
    /* Chips neben dem Patienten in der Detailansicht (Fertigung, Digital Scan,
       Fertigstellung — detail.js fertigungChipsHtml). */
    .pat-chips-zeile  { display:flex; align-items:center; justify-content:space-between;
                        gap:6px 12px; flex-wrap:wrap; }
    .fz-chips         { display:inline-flex; gap:6px; flex-wrap:wrap; }
    .fz-chip          { display:inline-flex; align-items:center; gap:4px; font-size:11px;
                        font-weight:400; padding:2px 9px; border-radius:12px; white-space:nowrap; }
    .fz-chip i        { font-size:13px; }
    .fz-blau          { background:var(--bg-accent);  color:var(--text-accent); }
    .fz-amber         { background:var(--bg-warning); color:var(--text-warning); }
    .fz-gruen         { background:var(--bg-success); color:var(--text-success); }
    .fz-grau          { background:var(--surface-1); color:var(--text-secondary); border:0.5px solid var(--border); }
    .pdf-ptbl         { width:100%; border-collapse:collapse; margin-bottom:16px; }
    .pdf-ptbl th      { background:#f0f4ff; padding:6px 8px; font-size:10px; font-weight:700;
                        color:#1a56db; border-bottom:1px solid #d0d8f0; text-align:left; }
    /* ⚠ SPALTENÜBERSCHRIFTEN BRECHEN NIE UM (01.09.2026, gemeldet von
       Chris: in der Mengenspalte stand "Meng" und darunter "e").
       Ursache gemessen: "Menge" braucht bei 10 px/700 genau 31,7 px,
       die Zelle bot innen 29,0 px — es fehlten 2,7 px. Die Zeile
       darüber gilt seit dem Initial Commit, der Umbruch war also nie
       neu; er fiel nur nie auf.
       Eine umgebrochene Überschrift macht die Kopfzeile dreizeilig und
       schiebt die ganze Tabelle nach unten — auf einem Blatt, dessen
       Umbruch auf den Millimeter vermessen ist, ist das teuer.
       ▫ Die Materialtabelle der Konformitätserklärung (detail.js)
       setzt white-space:normal INLINE auf jede Kopfzelle und bleibt
       davon unberührt — dort ist Umbrechen ausdrücklich gewollt, weil
       eine zerrissene Chargennummer nicht mehr eindeutig wäre. */
    .pdf-ptbl thead th { white-space: nowrap; }
    .pdf-ptbl th:last-child,.pdf-ptbl td:last-child { text-align:right; }
    /* Umbrechen statt abschneiden.
       Die App hat eine globale Regel  td { white-space:nowrap;
       overflow:hidden; text-overflow:ellipsis; max-width:180px }  — für
       Bildschirmtabellen richtig, auf einem Blatt Papier falsch: Lange
       Patientennamen endeten dort mit "…". Alle vier Angaben müssen
       ausdrücklich zurückgenommen werden; word-break allein genügt
       nicht, solange white-space:nowrap gilt. */
    .pdf-ptbl td, .pdf-page td {
      padding:        6px 8px;
      font-size:      11px;
      border-bottom:  0.5px solid #eee;
      white-space:    normal;
      overflow:       visible;
      text-overflow:  clip;
      max-width:      none;
      word-break:     break-word;
      overflow-wrap:  break-word;
      vertical-align: top;
    }
    /* Belege und Monatsaufstellung: Zeilenhöhe wie im PDF (21.10.2026).
       Das PDF setzt 8-pt-Zeilen mit 2 mm Innenabstand = 7,25 mm (20,5 px); die
       Vorschau war mit 28,5 px je Zeile so viel höher, dass sie VIEL früher auf
       ein zweites Blatt umbrach als das gedruckte PDF. Schriftgröße bleibt
       lesbar, nur der Innenabstand folgt dem Druck. */
    .pdf-ptbl-kompakt td { padding:2px 8px; line-height:16.5px; }
    .pdf-ptbl-kompakt th { padding:4px 8px; }
    .pdf-page th      { white-space:normal; overflow:visible; text-overflow:clip;
                        max-width:none; word-break:break-word; }
    .pdf-sum-blk      { margin-left:auto; width:230px; }
    .pdf-sum-row      { display:flex; justify-content:space-between; padding:3px 0; font-size:11px; }
    .pdf-sum-total    { display:flex; justify-content:space-between; font-weight:700;
                        font-size:13px; border-top:2px solid #1a56db; padding-top:6px; margin-top:4px; }
    .pdf-zv           { margin-top:20px; font-size:10px; color:#444; line-height:1.7;
                        border-top:0.5px solid #ddd; padding-top:12px; }
    .pdf-footer       { margin-top:28px; padding-top:10px; border-top:0.5px solid #ddd;
                        font-size:9px; color:#888; display:grid;
                        grid-template-columns:1fr 1fr; gap:8px; }
    @media print {
      @page { size: A4; margin: 0; }
      body * { visibility: hidden; }
      .pdf-overlay, .pdf-overlay * { visibility: visible; }
      .pdf-overlay    { position: absolute; inset: 0; background: none; display: block; margin: 0; }
      .pdf-toolbar    { display: none; }
      #pdf-doc-actions-panel { display: none; }
      .pdf-body       { padding: 0; background: #fff; overflow: visible; }
      .pdf-modal      { border: none; border-radius: 0; max-height: none; width: auto; }
      .pdf-page       { width: 210mm; min-height: 297mm; padding: 14mm 17mm; box-shadow: none; }
      /* Der übliche Weg druckt ein echtes jsPDF-Dokument
         (pdfDruckeEchtesPdf). Nur wenn das fehlschlägt, druckt der
         Browser dieses HTML — dann soll jedes Blatt auch ein Blatt
         Papier sein statt eines fortlaufenden Bandes. */
      .pdf-spalte     { display: block; }
      .pdf-page + .pdf-page,
      .pdf-spalte + .pdf-spalte { break-before: page; page-break-before: always; }
    }

    /* ============================================================
       E-MAIL-VERSAND — DIALOG & BADGE (email-versand.js)
       ============================================================ */
    .ev-overlay       { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
                        z-index:210; align-items:center; justify-content:center; }
    .ev-overlay.open  { display:flex; }
    /* 900 px, orientiert an den übrigen Fenstern: Belege 1120,
       Textblöcke und E-Mail Texte je 1100, kleine Dialoge 460 bis 680.
       Bei 520 waren Textfeld und Anhangsliste zu gedrängt. */
    .ev-modal         { background:var(--surface-2); border-radius:12px; width:900px;
                        max-width:94vw; max-height:90vh; overflow-y:auto;
                        border:0.5px solid var(--border); padding:20px; }
    /* Links die Eingabefelder, rechts Anhänge und Versandkonto. Beides
       stand vorher klein unter den Knöpfen, wo man es übersah — gerade
       die Anhangsliste ist wichtig, weil sie zeigt, was mitgeht. */
    .ev-grid          { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px;
                        align-items:start; }
    .ev-seite         { display:flex; flex-direction:column; gap:12px; min-width:0; }
    .ev-kasten        { background:var(--surface-1); border:0.5px solid var(--border);
                        border-radius:var(--radius); padding:10px 12px; font-size:12px;
                        line-height:1.6; word-break:break-word; }
    .ev-kasten-lbl    { font-size:11px; color:var(--text-muted); font-weight:500;
                        margin-bottom:5px; }
    @media (max-width: 900px) {
      .ev-grid        { grid-template-columns:minmax(0,1fr); }
    }
    .ev-modal-head     { display:flex; align-items:center; justify-content:space-between;
                        margin-bottom:14px; }
    .ev-modal-title    { font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; }
    .ev-row            { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
    .ev-row label      { font-size:11px; color:var(--text-muted); font-weight:500; }
    .ev-row input, .ev-row textarea { border:0.5px solid var(--border-strong); border-radius:var(--radius);
                        padding:7px 9px; font-size:12.5px; font-family:inherit; background:var(--surface-1);
                        color:var(--text-primary); }
    /* Mehr Höhe, seit der Dialog breiter ist: Das Textfeld teilt sich
       die Zeile nicht mehr mit Anhängen und Konto. */
    .ev-row textarea   { resize:vertical; min-height:230px; line-height:1.5; }
    .ev-last           { font-size:11px; color:var(--text-muted); margin-bottom:10px; }
    /* Auswahlliste an An/Cc (Wunsch Chris, 29.09.2026) und Liste der
       verwendeten Adressen unter dem Text. */
    .ev-combo          { position:relative; display:flex; }
    .ev-combo input    { flex:1; min-width:0; padding-right:34px; }
    .ev-combo-btn      { position:absolute; right:0; top:0; bottom:0; width:32px; border:none;
                        border-left:0.5px solid var(--border); background:none; padding:0;
                        color:var(--text-secondary); cursor:pointer; border-radius:0 var(--radius) var(--radius) 0; }
    .ev-combo-btn:hover{ background:var(--surface-2); color:var(--text-primary); }
    .ev-dd             { display:none; position:absolute; left:0; right:0; top:100%; margin-top:2px;
                        max-height:190px; overflow:auto; z-index:20; background:var(--surface-2);
                        border:0.5px solid var(--border-strong); border-radius:var(--radius); }
    .ev-dd.offen       { display:block; }
    .ev-dd-zeile       { display:flex; justify-content:space-between; gap:8px; padding:7px 10px;
                        font-size:12.5px; cursor:pointer; }
    .ev-dd-zeile:hover { background:var(--surface-1); }
    .ev-dd-zeile small, .ev-adr-zeile small { color:var(--text-muted); font-size:11px; white-space:nowrap; }
    .ev-dd-leer        { padding:8px 10px; font-size:12px; color:var(--text-muted); }
    .ev-adr-zeile      { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px;
                        border-top:0.5px solid var(--border); }
    .ev-adr-zeile:first-child { border-top:0; }
    .ev-adr-text       { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
    .ev-adr-text:hover { color:var(--text-accent); }
    .ev-adr-del        { border:none; background:none; padding:2px 5px; border-radius:4px;
                        color:var(--text-muted); cursor:pointer; }
    .ev-adr-del:hover  { color:var(--text-danger); background:var(--bg-danger); }
    .ev-hint           { font-size:11px; color:var(--text-muted); background:var(--bg-warning);
                        border:0.5px solid #F0C040; border-radius:6px; padding:7px 10px; margin-bottom:12px; }
    .ev-actions        { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
    .ev-badge          { display:inline-flex; align-items:center; gap:4px; font-size:10.5px;
                        color:var(--text-muted); background:var(--surface-1); border:0.5px solid var(--border);
                        border-radius:20px; padding:2px 8px; white-space:nowrap; }
    .ev-badge.ev-warn  { color:var(--text-danger); background:var(--bg-danger); border-color:var(--border-danger); }

    /* ============================================================
       BATCH-RG ABWEICHUNGS-EDITOR (abrechnung.js: abrBatchOpenAbweichung)
       ============================================================ */
    .abrb-overlay      { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
                        z-index:210; align-items:center; justify-content:center; }
    .abrb-overlay.open { display:flex; }
    .abrb-modal        { background:var(--surface-2); border-radius:12px; width:560px;
                        max-width:94vw; max-height:90vh; overflow-y:auto;
                        border:0.5px solid var(--border); padding:20px; }
    .abrb-modal-head    { display:flex; align-items:flex-start; justify-content:space-between;
                        gap:12px; margin-bottom:6px; }
    .abrb-title         { font-size:14px; font-weight:500; line-height:1.4; }
    .abrb-hint          { font-size:11px; color:var(--text-muted); margin-bottom:12px; }
    .abrb-rows          { display:flex; flex-direction:column; }
    .abrb-row           { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px;
                        align-items:center; padding:7px 0; border-bottom:0.5px solid var(--border); }
    .abrb-row-label     { font-size:12.5px; color:var(--text-primary); }
    .abrb-row select, .abrb-row input[type="date"] {
                        height:30px; border-radius:var(--radius); border:0.5px solid var(--border-strong);
                        font-size:12px; padding:0 6px; background:var(--surface-1); color:var(--text-primary); }
    /* Zeile, deren Auftrag sich nicht laden liess: sichtbar zurueck-
       genommen und mit gesperrten Feldern. Sie soll erkennbar NICHT
       bedienbar aussehen — bis zum 15.08.2026 sah sie aus wie jede
       andere, verwarf die Eingabe aber stillschweigend. */
    .abrb-row-fehlt              { opacity:0.65; }
    .abrb-row-fehlt select,
    .abrb-row-fehlt input[type="date"] { cursor:not-allowed; background:var(--surface-2); }
    .abrb-actions       { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

    /* ============================================================
       STATISTIK-KACHELN
       ============================================================ */
    /* Die Kacheln tragen ihren Rahmen selbst (.stat) — die Leiste
       darum braucht deshalb weder Fläche noch Trennlinie. Sie rückt auf
       dieselben 12 px ein wie die Kästen darunter; sonst stünden die
       Kacheln breiter als alles, was ihnen folgt. */
    .stats {
      display:               grid;
      grid-template-columns: repeat(5, 1fr);
      gap:                   6px;
      padding:               12px 12px 0;
      flex-shrink:           0;
    }
    .stat            { background: var(--surface-2); border-radius: var(--radius); padding: 7px 10px; border: 0.5px solid var(--border); }
    .stat .sv        { font-size: 17px; font-weight: 500; line-height: 1; }
    .stat .sl        { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* ============================================================
       TOOLBAR
       ============================================================ */
    /* Die Leisten und Listen sitzen in gerahmten Kästen mit runden
       Ecken statt randlos im Fenster zu kleben (Wunsch Chris,
       13.08.2026). Vorbild ist .kv-tabelle in der Kundenverwaltung —
       dieselbe Einfassung, 0.5px und --radius. */
    .toolbar {
      background:    var(--surface-1);
      border:        0.5px solid var(--border);
      border-radius: var(--radius);
      margin:        12px 12px 0;
      padding:       8px 16px;
      display:       flex;
      flex-direction: column;
      gap:           7px;
      flex-shrink:   0;
    }
    .toolbar-row1 {
      display:               flex;
      align-items:           center;
      gap:                   6px;
      padding-bottom:        8px;
      border-bottom:         0.5px solid var(--border);
    }
    .toolbar-row1-fields {
      display:               flex;
      align-items:           center;
      flex-wrap:             wrap;
      gap:                   6px;
      min-width:             0;
    }
    .toolbar-row2 {
      display:         flex;
      align-items:     center;
      justify-content: flex-start;
      gap:             10px;
    }

    /* Suchfeld */
    .sw   { position: relative; }
    .sw i {
      position:  absolute;
      left:      8px;
      top:       50%;
      transform: translateY(-50%);
      color:     var(--text-muted);
      font-size: 14px;
      pointer-events: none;
    }
    .sw input { padding-left: 28px; }

    /* Suchfeld: x-Button zum Leeren (gilt für alle Suchfelder im Projekt) */
    .search-clear-btn {
      position:        absolute;
      top:             50%;
      right:           6px;
      transform:       translateY(-50%);
      width:           18px;
      height:          18px;
      border:          none;
      background:      transparent;
      border-radius:   50%;
      display:         none;
      align-items:     center;
      justify-content: center;
      cursor:          pointer;
      color:           var(--text-muted);
      padding:         0;
    }
    .search-clear-btn:hover { background: var(--surface-1); color: var(--text-primary); }
    .search-clear-btn i     { font-size: 11px; pointer-events: none; }
    input.has-x-clear       { padding-right: 26px !important; }

    /* Buttons */
    .btn {
      height:        34px;
      padding:       0 12px;
      font-size:     13px;
      border-radius: var(--radius);
      cursor:        pointer;
      display:       inline-flex;
      align-items:   center;
      gap:           5px;
      border:        0.5px solid var(--border-strong);
      background:    var(--surface-2);
      color:         var(--text-primary);
      white-space:   nowrap;
    }
    .btn:disabled {
      opacity: 0.5;
      cursor:  not-allowed;
    }
    .btn:hover        { background: var(--surface-1); }
    .btn-accent       { background: var(--fill-accent); border-color: var(--fill-accent); color: #fff; }
    .btn-accent:hover { background: var(--fill-accent-hover); }
    .btn-sm           { height: 28px; padding: 0 9px; font-size: 12px; }
    .btn-danger       { color: var(--text-danger); border-color: var(--border-danger); }
    .btn-danger:hover { background: var(--bg-danger); }

    /* Eilaufträge Checkbox-Label */
    .eil-label {
      display:     flex;
      align-items: center;
      gap:         6px;
      font-size:   13px;
      cursor:      pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ============================================================
       MONATS-NAVIGATOR
       ============================================================ */
    .month-nav {
      display:       flex;
      align-items:   center;
      height:        34px;
      box-sizing:    border-box;
      border:        0.5px solid var(--border-strong);
      border-radius: var(--radius);
      overflow:      hidden;
      flex-shrink:   0;
    }
    .month-nav-btn {
      height:          34px;
      width:           32px;
      display:         flex;
      align-items:     center;
      justify-content: center;
      background:      var(--surface-2);
      border:          none;
      cursor:          pointer;
      color:           var(--text-secondary);
      font-size:       14px;
      flex-shrink:     0;
    }
    .month-nav-btn:hover { background: var(--surface-1); color: var(--text-primary); }
    .month-nav-label {
      height:          34px;
      display:         flex;
      align-items:     center;
      justify-content: center;
      padding:         0 14px;
      font-size:       13px;
      font-weight:     500;
      background:      var(--bg-accent);
      color:           var(--text-accent);
      border-left:     0.5px solid var(--border);
      border-right:    0.5px solid var(--border);
      cursor:          pointer;
      white-space:     nowrap;
      min-width:       140px;
      user-select:     none;
      gap:             6px;
    }
    .month-nav-label:hover   { filter: brightness(.96); }
    .month-nav-label.inactive { background: var(--surface-2); color: var(--text-secondary); font-weight: 400; }
    /* Hülle um das Praxis-Karussell in den Werkzeugleisten. Die früheren
       Sprung-Knöpfe daneben (.tb-nav-gruppe, .tb-abr-btn) sind am
       07.10.2026 in die Zeilen gewandert (.sprung-btn) und ihr CSS ist
       entfernt. */
    .praxis-nav-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .toolbar-row2  { flex-wrap: wrap; row-gap: 6px; }
    /* Monatsschalter im Fenster: volle Feldbreite und feste Höhe wie die
       Felder daneben. Die Monatsfläche behält das Blau der Werkzeugleiste
       (--bg-accent / --text-accent), damit sie sich in das übrige Design
       einfügt; nur der Zeigerwechsel entfällt, weil sie hier nichts
       auslöst. */
    .month-nav.mn-feld            { width: 100%; }
    .month-nav.mn-feld .month-nav-label {
      flex:   1;
      cursor: default;
    }
    .month-nav.mn-feld .month-nav-label:hover { filter: none; }
    .tb-accent-select {
      height:          34px;
      border-radius:   var(--radius);
      border:          0.5px solid var(--border-accent);
      color:           var(--text-accent);
      background:      var(--surface-2);
      padding:         0 10px;
      font-size:       12px;
    }
    /* Zeitraum-Karussell (Aufträge): „Heute" springt auf den laufenden
       Monat, das Menü wählt das Raster. Bewusst ein Wort statt eines
       ✕ — ein Kreuz liest sich wie „Filter entfernen", und genau das
       soll es nicht mehr geben (Entwurf abgestimmt 10.08.2026). */
    .month-nav-heute {
      border:0; background:none; cursor:pointer; padding:0 9px; height:24px;
      border-radius:999px; font-size:12px; color:var(--text-accent);
      border-left:0.5px solid var(--border); margin-left:2px;
    }
    .month-nav-heute:hover { background:var(--surface-1); }
    /* position:fixed und beim Öffnen an den Seitenkörper gehängt: Das
       Karussell selbst hat overflow:hidden (dafür ist es rund), ein
       Menü darin wäre abgeschnitten. Die Lage wird aus der Position des
       Labels gerechnet — siehe zrMenuUmschalten(). */
    .zr-menu {
      position:fixed; z-index:9000; min-width:190px; padding:5px;
      background:var(--surface-2); border:0.5px solid var(--border-strong);
      border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.16);
    }
    .zr-e {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:7px 10px; border-radius:6px; cursor:pointer; font-size:13px;
    }
    .zr-e:hover  { background:var(--surface-1); }
    .zr-e.aktiv  { background:var(--bg-accent); color:var(--text-accent); font-weight:500; }
    .zr-e small  { color:var(--text-muted); font-weight:400; }
    .zr-e.aktiv small { color:var(--text-accent); }
    .zr-trenn    { height:1px; background:var(--border); margin:4px 0; }

    /* Trennzeile in der Auftragstabelle: Darunter stehen Aufträge, die
       nicht in den eingestellten Zeitraum fallen, aber noch laufen.
       Zugeklappt als Vorgabe; Klick öffnet und schließt. */
    tr.zr-trennzeile > td {
      background:var(--surface-1); cursor:pointer; padding:6px 10px !important;
      border-top:0.5px solid var(--border-strong); border-bottom:0.5px solid var(--border);
    }
    tr.zr-trennzeile:hover > td { background:var(--bg-accent); }
    .zr-trenn-txt {
      font-size:12px; font-weight:600; color:var(--text-secondary);
      display:inline-flex; align-items:center; gap:5px;
    }
    .zr-trenn-hinweis { font-size:11px; color:var(--text-muted); margin-left:10px; }
    tr.zr-ausserhalb > td { background:var(--surface-1); }
    tr.zr-ausserhalb:hover > td { background:var(--bg-accent); }

    /* Fixierte Fußzeilen (Festlegung Chris, 13.10.2026 — Mockup freigegeben).
       Nur am Rechner; am Handy bleibt die Kartendarstellung (responsive.css).
       · Aufträge: Die Trennzeile "Noch offen aus anderen Zeiträumen (N)" bleibt
         beim Scrollen am unteren Rand der Tabelle stehen (.table-area scrollt
         selbst, die Kopfzeile klebt oben schon). Aufgeklappt klebt sie, bis man
         zu ihr hinscrollt, danach läuft sie mit. Rahmenlinie als box-shadow,
         weil border-collapse die Linie einer klebenden Zelle nicht mitnimmt.
       · Abrechnung / Monatsaufstellung: Zeile mit Anzahl und Summe (tfoot) klebt
         unten im Tabellenkasten. Der Kasten bekommt seine Höhe von
         kastenHoeheBinden() (abrechnung.js) über --kasten-max und scrollt
         selbst; die Zelle braucht einen eigenen Hintergrund, weil die Zeilen
         sonst durch sie hindurch zu sehen wären. */
    @media (min-width: 768px) and (pointer: fine) {
      tr.zr-trennzeile > td { position: sticky; bottom: 0; z-index: 1; box-shadow: inset 0 0.5px 0 var(--border-strong); }
      .abr-ue-kasten, .sr-list-kasten, .prov-kasten { max-height: var(--kasten-max, none); overflow: auto; }
      .abr-ue-kasten thead th, .sr-list-kasten thead th, .prov-kasten thead th { box-shadow: inset 0 -0.5px 0 var(--border-strong); }
      .abr-ue-kasten tfoot td, .sr-list-kasten tfoot td, .prov-kasten tfoot td {
        position: sticky; bottom: 0; z-index: 2; background: var(--surface-1);
        box-shadow: inset 0 0.5px 0 var(--border-strong);
      }
    }

    .month-clear {
      display:         inline-flex;
      align-items:     center;
      justify-content: center;
      width:           15px;
      height:          15px;
      border-radius:   50%;
      background:      var(--fill-accent);
      color:           #fff;
      font-size:       9px;
      flex-shrink:     0;
    }

    /* ============================================================
       SPALTEN-HINWEIS
       ============================================================ */
    .col-order-info {
      font-size:     11px;
      color:         var(--text-muted);
      padding:       5px 14px;
      background:    var(--surface-1);
      border:        0.5px solid var(--border);
      border-radius: var(--radius);
      margin:        8px 12px 0;
      display:       flex;
      align-items:   center;
      gap:           5px;
      flex-shrink:   0;
    }

    /* ============================================================
       AUFTRÄGE-BEREICH: TABELLE + DETAIL
       ============================================================ */
    /* Gemeinsame Einfassung für Listen, die per JavaScript entstehen
       und deshalb keinen eigenen Container im HTML haben (Abrechnung,
       Sammelrechnung, Belegfenster). Trug vorher nur ein inline
       overflow-x:auto. Gleiche Optik wie .table-area und .kv-tabelle. */
    .tab-kasten { overflow-x: auto; background: var(--surface-1);
                  border: 0.5px solid var(--border); border-radius: var(--radius); }

    .auftrag-content { flex: 1; display: flex; overflow: hidden; padding: 12px; gap: 12px; }

    /* ⚠ DETAIL ÜBER DIE VOLLE HÖHE, WIE IN DER ABRECHNUNG (Wunsch Chris,
       29.09.2026 — Mockup freigegeben; Breitenlogik unverändert).
       Bisher begann der Detailbereich erst UNTER Kacheln und Menüzeilen
       (neben der Tabelle in .auftrag-content). Jetzt steht er rechts über
       die ganze Höhe, Kacheln, Menüzeilen und Tabelle bleiben in der
       linken Spalte und rücken zusammen — derselbe Aufbau wie
       .abr-content in der Abrechnung.

       UMGESETZT ALS RASTER OHNE UMBAU DES HTML: #view-auftraege wird ab
       768 px ein Raster, .auftrag-content löst sich mit display:contents
       auf (Tabelle und Detail werden direkte Rasterzellen), und das
       Detail überspannt alle Zeilen der zweiten Spalte. Die Umhänge von
       #detail (Abrechnung, Kalender, Beleg-Fenster) merken sich ihren
       Elternteil und setzen ihn dort wieder ein — sie bleiben heil.
       Unter 768 px gilt unverändert die Flex-Spalte (Detail als Vollbild,
       siehe responsive.css).

       Spalte 2 ist 0 breit, solange das Detail zu ist, und wächst beim
       Öffnen auf 732 px (720 Detail + 12 Rand). Das Detail bleibt 720 px
       breit und ragt beim Rutschen rechts aus der Spalte — der Bereich
       schneidet ab (overflow:hidden), es "rutscht herein" wie in der
       Abrechnung. Am Tablet (768–1023) teilen sich Liste (mind. 240 px)
       und Detail (mind. 380 px) den Platz wie bisher. */
    @media (min-width: 768px) and (pointer: fine) {
      #view-auftraege.active {
        display:               grid;
        grid-template-columns: minmax(0, 1fr) 0;
        grid-template-rows:    auto auto auto minmax(0, 1fr);
      }
      #view-auftraege.active:has(#detail:not(.hidden)) {
        grid-template-columns: minmax(0, 1fr) 732px;
      }
      #view-auftraege > #stats           { grid-column: 1; grid-row: 1; }
      #view-auftraege > .toolbar         { grid-column: 1; grid-row: 2; }
      #view-auftraege > .col-order-info  { grid-column: 1; grid-row: 3; }
      #view-auftraege > .auftrag-content { display: contents; }
      #view-auftraege .table-area        { grid-column: 1; grid-row: 4; margin: 12px; min-height: 0; }
      #view-auftraege #detail            { grid-column: 2; grid-row: 1 / -1; margin: 12px 12px 12px 0;
                                           width: 720px; min-width: 0; max-width: none; min-height: 0; }
    }
    @media (min-width: 1024px) {
      #view-auftraege.active { transition: grid-template-columns 220ms ease-out; }
    }
    @media (min-width: 768px) and (max-width: 1023px) and (pointer: fine) {
      #view-auftraege.active:has(#detail:not(.hidden)) {
        grid-template-columns: minmax(240px, 1fr) minmax(392px, 732px);
      }
      #view-auftraege #detail { width: auto; min-width: 380px; }
    }
    /* ⚠ Der Rahmen sitzt am Scrollbereich, nicht an der Tabelle: An der
       Tabelle würde er mitscrollen und die Linie liefe unter der
       stehenden Kopfzeile durch. Kein overflow:hidden für die runden
       Ecken — das schaltet position:sticky an den Spaltenüberschriften
       ab. */
    .table-area      { flex: 1; overflow: auto; background: var(--surface-1);
                       border: 0.5px solid var(--border); border-radius: var(--radius); }

    /* Tabelle */
    table           { width: 100%; border-collapse: collapse; font-size: 13px; }
    /* 164 px: Platz für Badge + die Symbol-Spalte (.status-cell-raster); vorher 140 */
    th[data-key="status"], td[data-key="status"] { width: 164px; max-width: 164px; }
    thead th {
      background:    var(--surface-1);
      border-bottom: 0.5px solid var(--border-strong);
      padding:       8px 10px;
      text-align:    left;
      font-weight:   500;
      font-size:     11px;
      color:         var(--text-secondary);
      position:      sticky;
      top:           0;
      z-index:       2;
      white-space:   nowrap;
      user-select:   none;
    }
    thead th.dragging  { opacity: .35; }
    thead th.drag-over { border-left: 2px solid var(--border-accent); }
    .th-inner    { display: flex; align-items: center; gap: 4px; }
    .drag-handle { cursor: grab; color: var(--text-muted); font-size: 13px; opacity: .45; }

    /* Feste Spalten: laufende Nummer + Beleg-Icons (nicht Teil von colOrder) */
    .col-fix-nr    { width: 56px; min-width: 56px; text-align: center; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
    /* Flagge "besonderer Fall" direkt neben der Zeilennummer (06.10.2026,
       Festlegung Chris). Aus: blass, erst beim Überfahren der Zeile gut
       sichtbar. An: Violett — Eil trägt Rot, Praxisfarbe den Balken. */
    .col-fix-nr .nr-zahl { display: inline-block; min-width: 14px; }
    .such-treffer { background: var(--bg-warning); color: inherit; border-radius: 2px; padding: 0 1px; }
    .nr-techid.such-grund { color: var(--text-accent); }
    tr.such-status .zr-trenn-txt i { margin-right: 4px; }
    .nr-techid { font-size: 11px; color: var(--text-muted, #8a8a8a); line-height: 1.2; margin-top: 1px; }
    .nr-flagge     { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
                     width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; cursor: pointer;
                     color: var(--text-muted); opacity: .35; font-size: 13px; }
    tbody tr:hover .nr-flagge { opacity: .75; }
    .nr-flagge:hover { opacity: 1 !important; background: var(--bg-accent); }
    .nr-flagge:focus-visible { outline: 2px solid var(--border-accent); opacity: 1; }
    .nr-flagge.an  { color: #8A33C4; opacity: 1; background: color-mix(in srgb, #8A33C4 14%, transparent); }
    tbody tr.markiert > td { background: color-mix(in srgb, #8A33C4 8%, transparent); }
    /* Versandprotokoll (versandprotokoll.js, 06.10.2026) */
    .vp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
    /* #vp-host schlägt die allgemeine Regel für select/input (volle Breite) */
    #vp-host .vp-suche { width: auto; min-width: 180px; flex: 1 1 180px; max-width: 280px; }
    .vp-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
    .vp-chip { border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 3px 10px; font-size: 12px;
               background: var(--surface-2); color: var(--text-secondary); cursor: pointer; }
    .vp-chip.an { background: var(--bg-accent); color: var(--text-accent); border-color: var(--border-accent); }
    #vp-host .vp-wahl { width: auto; min-width: 130px; font-size: 12px; padding: 4px 8px; }
    .vp-summe { font-size: 11px; color: var(--text-secondary); margin: 0 0 4px; }
    .vp-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
    .vp-tabelle th { text-align: left; font-weight: 500; font-size: 11px; color: var(--text-secondary);
                     padding: 5px 6px; border-bottom: 0.5px solid var(--border); }
    .vp-tabelle td { padding: 6px; border-bottom: 0.5px solid var(--border); vertical-align: middle;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vp-zeile { cursor: pointer; }
    .vp-zeile:hover td { background: var(--surface-1); }
    .vp-zeile.sel td { background: var(--bg-accent); }
    .vp-zeile:focus-visible { outline: 2px solid var(--border-accent); outline-offset: -2px; }
    .vp-zeit { color: var(--text-secondary); }
    .vp-st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
    .vp-st.ok { background: var(--bg-success); color: var(--text-success); }
    .vp-st.er { background: var(--bg-danger); color: var(--text-danger); }
    .vp-st.wa { background: var(--bg-warning); color: var(--text-warning); }
    .vp-st.gr { background: var(--surface-1); color: var(--text-secondary); border: 0.5px solid var(--border-strong); }
    .vp-kopie { font-size: 14px; vertical-align: middle; color: var(--text-secondary); }
    .vp-warn { color: var(--text-danger); }
    .vp-kopie.vp-warn { color: var(--text-warning); }
    .vp-leise { color: var(--text-muted); }
    .vp-leer { padding: 18px 8px; font-size: 12px; color: var(--text-secondary); text-align: center; }
    .vp-karte { margin-top: 12px; padding: 12px 14px; border: 0.5px solid var(--border-strong); border-radius: var(--radius);
                background: var(--surface-1); max-width: 640px; }
    .vp-karte-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
    .vp-karte-kopf b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vp-zu { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 16px; }
    .vp-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 5px 12px; font-size: 12px; }
    .vp-kv > span:nth-child(odd) { color: var(--text-secondary); }
    .vp-kv > span:nth-child(even) { overflow-wrap: anywhere; }
    .vp-mono { font-family: var(--font-mono); font-size: 11px; }
    .vp-hinweis { margin-top: 10px; padding: 7px 10px; border: 0.5px dashed var(--border-strong); border-radius: var(--radius);
                  font-size: 11px; color: var(--text-secondary); }
    /* Info an den Zahnarzt (fallinfo.js, 06.10.2026): EIN Kasten im Detailbereich
       (Kopfzeile + Feld) und Symbol neben dem Status. Cyan = das Petrol des
       Hauses (Angenommen) — bewusst nicht das Warngelb: Es ist eine Aufgabe,
       kein Fehler. Türkis nur, solange der Beileger noch gedruckt werden muss
       (.fi-offen), sonst neutral. */
    /* Zeile "Praxis | Info an den Zahnarzt" im Labor-Detail: beide Kästen
       gleich hoch (Flex-Zeilen strecken ihre Kinder) und oben/unten bündig.
       Umbruch über flex-basis statt Media Query — gemessen wird der Platz
       im Detailbereich (720 px, bei engem Fenster ab 380 px), nicht der
       Schirm; zwei Spalten ab ca. 510 px, sonst untereinander. */
    .fi-praxis-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
    .fi-praxis-zeile > .arzt-card-sm { flex: 1 1 200px; min-width: 0; }
    .fi-praxis-zeile > .fi-block     { flex: 1.5 1 300px; min-width: 0; margin: 0; }
    .arzt-lbl { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase;
                letter-spacing: .04em; margin-bottom: 3px; }
    .fi-block { margin: 10px 0; padding: 8px 10px; border: 0.5px solid var(--border);
                border-radius: var(--radius); background: var(--surface-2); }
    .fi-block.fi-offen { border-color: #9BDDEA; background: #DFF4F9; }
    .fi-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 5px;
               font-size: 12px; color: var(--text-secondary); }
    .fi-kopf > b { font-weight: 500; }
    .fi-block.fi-offen .fi-kopf { color: #05616F; }
    .fi-stand { flex: 1; min-width: 0; }
    .fi-block .fi-text { margin: 0; background: var(--surface-2); }
    /* Symbol hinter dem Zeitstempel der Statuszelle (status.js, fallinfo.js):
       cyan = Beileger offen, grau = gedruckt. Ein Knopf, kein Text — die Spalte
       ist schmal. */
    .status-ts { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
    .fi-chip { display: inline-flex; align-items: center; justify-content: center; flex: none;
               width: 18px; height: 18px; padding: 0; font-size: 12px; cursor: pointer;
               border: 0.5px solid #9BDDEA; border-radius: 50%; background: #DFF4F9; color: #05616F; }
    .fi-chip:hover { border-color: #0AB6D1; }
    .fi-chip-ok { border-color: var(--border); background: var(--surface-1); color: var(--text-muted); }
    /* Status-Zelle der Auftragsliste MIT Symbol (status.js, statusCellHtml): zwei Spalten.
       Links Badge über Zeitstempel (118 px: das breiteste Badge, "Qualitätsprüfung", ist 115 px),
       rechts die Symbole untereinander — Anprobe auf der Badge-Zeile, "Info an den Zahnarzt" auf
       der Zeitzeile. Feste linke Breite = die Symbole stehen in jeder Zeile an derselben Stelle.
       Die Spalte "Produktstatus" ist deshalb 164 px breit (data.js, ALL_COLS). */
    /* ⚠ ".status-cell.status-cell-raster": .status-cell (weiter unten) setzt display:flex und würde
       bei gleicher Gewichtung gewinnen, weil es später steht. */
    .status-cell.status-cell-raster { display: grid; grid-template-columns: 118px 18px; column-gap: 6px;
                                      row-gap: 3px; align-items: center; }
    /* Feste Plätze, damit nichts verrutscht, wenn die Zeitzeile ausgeblendet ist (Karte am Handy,
       responsive.css): Anprobe oben rechts, "Info an den Zahnarzt" darunter. */
    .status-cell-raster .status-select-wrap { grid-area: 1 / 1; justify-self: start; }
    .status-cell-raster .status-ts          { grid-area: 2 / 1; }
    .status-sym { display: flex; align-items: center; justify-content: center; min-height: 1px; }
    .status-sym-anp { grid-area: 1 / 2; }
    .status-sym-fi  { grid-area: 2 / 2; }
    /* Anprobe-Symbol: gleiche Größe wie .fi-chip (18 px, Kreis), Warnfarbe wie der Chip "Anprobe" im Detail. */
    .anp-chip { display: inline-flex; align-items: center; justify-content: center; flex: none;
                width: 18px; height: 18px; padding: 0; font-size: 12px; cursor: default;
                border: 0.5px solid var(--border-warning); border-radius: 50%;
                background: var(--bg-warning); color: var(--text-warning); }
    /* Praxis-Liste: Info vom Labor als Zeile direkt unter dem Auftrag
       (fallinfo.js). Beide Zeilen tragen denselben cyanfarbenen Balken links
       und denselben Grund, damit die Info eindeutig zum Auftrag darüber
       gehört — dazu nennt sie Nummer und Patient noch einmal. */
    .pv-native-table tbody tr.pv-hat-info > td,
    .pv-native-table tbody tr.pv-fi-zeile > td { background: color-mix(in srgb, #0AB6D1 9%, transparent); }
    .pv-native-table tbody tr.pv-hat-info > td:first-child,
    .pv-native-table tbody tr.pv-fi-zeile > td:first-child { box-shadow: inset 4px 0 0 #0AB6D1; }
    .pv-native-table tbody tr.pv-hat-info { border-bottom: none; }
    .pv-fi-zeile > td { padding: 2px 10px 10px 14px !important; }
    .pv-fi-kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #05616F; margin-bottom: 4px; }
    .pv-fi-kopf > span { flex: 1; min-width: 0; }
    .pv-fi-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--text-primary); }
    /* Info vom Labor im Detailfenster der Praxis: derselbe cyanfarbene Balken
       wie in der Liste; leer = unsichtbar. */
    .fi-detail-praxis:empty { display: none; }
    .fi-detail-praxis { margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid #0AB6D1;
                        border-radius: var(--radius); background: color-mix(in srgb, #0AB6D1 9%, transparent); }
    tbody tr.markiert.sel > td,
    tbody tr.markiert:hover > td { background: transparent; }
    /* min-width statt width (08.09.2026): Sobald die Tabelle breiter als
       ihr Rahmen ist, drückt der Browser eine bloße width auf 62 px
       zusammen — gemessen, auch bei geschlossenem Detailbereich. Dann
       stapelten sich RG, SR und „+" dreizeilig. 112 px halten RG und SR
       (42 + 40 px) nebeneinander; das „+" rutscht wie bisher beim „+N"
       in die zweite Zeile. */
    .col-fix-beleg { width: 112px; min-width: 112px; text-align: left; white-space: nowrap; }
    .beleg-btn-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .beleg-typ-badge {
      display: inline-flex; align-items: center; gap: 3px; position: relative;
      padding: 3px 7px 3px 6px; border-radius: 20px; border: none;
      font-size: 10.5px; font-weight: 600; line-height: 1; cursor: pointer;
    }
    .beleg-typ-badge i { font-size: 12px; }
    .beleg-typ-badge:hover { filter: brightness(0.94); }
    .beleg-typ-badge-n {
      position: absolute; top: -4px; right: -4px; min-width: 12px; height: 12px; padding: 0 2px;
      border-radius: 50%; background: var(--fill-accent); color: #fff;
      font-size: 8px; font-weight: 700; line-height: 12px; text-align: center;
    }
    .beleg-quick-btn-add {
      width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; border: 0.5px dashed var(--border-strong); background: none;
      color: var(--text-muted); cursor: pointer; font-size: 13px;
    }
    .beleg-quick-btn-add:hover { background: var(--surface-1); color: var(--text-secondary); }
    .beleg-rest-badge {
      padding: 3px 8px; border-radius: 20px; border: 0.5px solid var(--border-strong);
      background: var(--surface-1); color: var(--text-secondary); font-size: 10.5px; font-weight: 600;
      line-height: 1; cursor: pointer;
    }
    .beleg-rest-badge:hover { background: var(--surface-0); }
    .beleg-typ-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
    .bt-popover {
      position: fixed; z-index: 160; background: var(--surface-2); border: 0.5px solid var(--border);
      border-radius: 10px; box-shadow: var(--shadow-popover, 0 8px 24px rgba(0,0,0,.12));
      width: 220px; max-height: 260px; overflow-y: auto; padding: 4px;
    }
    .bt-pop-head { font-size: 11px; font-weight: 500; color: var(--text-muted); padding: 6px 8px 4px; }
    .bt-choice-row {
      display: flex; align-items: center; justify-content: space-between; padding: 8px 4px;
      font-size: 13px; cursor: pointer; border-bottom: 0.5px solid var(--border);
    }
    .bt-choice-row:last-child { border-bottom: none; }
    .bt-choice-row:hover { background: var(--surface-1); }
    .bt-choice-row .mono { font-family: var(--font-mono); }

    /* Dateien-Modul (dateien.js): Tabellen-Badge, Popover-Inhalt,
       Drag&Drop-Sektion im Detailbereich */
    .col-fix-dateien { width: 56px; text-align: left; white-space: nowrap; }
    /* Sehr schmale Spalte "Techniker gesehen" links neben dem Produktstatus.
       Header = Werkzeug- + Augen-Icon; Zelle = grünes Häkchen wenn gesehen. */
    .col-fix-techgesehen { width: 34px; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
    .col-fix-techgesehen .th-inner { justify-content: center; gap: 2px; }
    .col-fix-techgesehen i.tg-check { color: #2D6600; font-size: 16px; }
    /* Gegenstück RECHTS neben dem Produktstatus: je Modul ein Zeichen,
       wenn dazu etwas per E-Mail automatisch übernommen wurde
       (auftraege.js, autoBadgesHtml). Breiter als die Nachbarspalte,
       weil hier bis zu fünf Zeichen nebeneinander stehen können. */
    /* Platzhalter-Chips im Sende-Fenster (email-senden.js,
       esRenderPlatzhalter). Schmal und einfarbig — sie sind eine
       Nachschlageliste, kein Bedienelement, das um Aufmerksamkeit
       konkurriert. */
    .es-ph {
      font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1;
      padding: 4px 7px; border: 0.5px solid var(--border-strong); border-radius: var(--radius);
      background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
    }
    .es-ph:hover { background: var(--surface-2); color: var(--text-primary); }
    .col-fix-automatik { width: 62px; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
    .col-fix-automatik .th-inner { justify-content: center; }
    .auto-badges { display: inline-flex; align-items: center; gap: 3px; color: var(--text-accent); }
    .auto-badges i { font-size: 14px; }
    .dt-badge {
      display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px;
      border-radius: 20px; border: 0.5px solid var(--border-strong); background: var(--surface-1);
      color: var(--text-secondary); font-size: 10.5px; font-weight: 600; line-height: 1; cursor: pointer;
    }
    .dt-badge:hover { background: var(--surface-0); }
    .dt-badge i { font-size: 12px; }
    /* Digital-Scan-Symbol neben der Büroklammer (dateien.js, dtBadgeHtml) */
    .dt-scan { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 5px; background: var(--bg-accent); color: var(--text-accent); vertical-align: middle; }
    .dt-scan i { font-size: 13px; }
    .dt-pop-loading, .dt-file-list-empty { padding: 10px 6px; color: var(--text-muted); font-size: 12px; }

    .dt-file-row {
      display: flex; align-items: center; gap: 8px; padding: 7px 4px;
      border-bottom: 0.5px solid var(--border); font-size: 12.5px;
    }
    .dt-file-row:last-child { border-bottom: none; }
    .dt-file-icon { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
    .dt-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .dt-file-name:hover { color: var(--text-accent); }
    .dt-file-meta { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
    /* .dt-file-action ist am 01.09.2026 entfallen — sie kleidete den
       Papierkorb in der kompakten Dateizeile, und der ist raus
       (Begruendung in dtZeileKompakt, dateien.js). Der Papierkorb der
       Detailansicht traegt .dt-karte-del und bleibt. */

    .dt-upload-label {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      width: 100%; margin-top: 8px; height: 30px; border-radius: var(--radius);
      border: 0.5px solid var(--border-strong); font-size: 12px; color: var(--text-secondary);
      cursor: pointer; box-sizing: border-box;
    }
    .dt-upload-label:hover { background: var(--surface-1); }
    .dt-upload-label i { font-size: 14px; }

    .dt-dropzone {
      border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
      padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px;
      margin-bottom: 10px; cursor: pointer; background: var(--surface-1);
    }
    .dt-dropzone:hover, .dt-dropzone.over { background: var(--surface-0); border-color: var(--border-accent); }
    .dt-dropzone i { font-size: 20px; display: block; margin: 0 auto 4px; }
    .dt-file-list { display: flex; flex-direction: column; }

    .dt-staged-row {
      display: flex; align-items: center; gap: 8px; padding: 6px 8px;
      border: 0.5px solid var(--border); border-radius: var(--radius);
      margin-bottom: 6px; font-size: 12px;
    }
    .dt-staged-row i.ti-file { font-size: 15px; color: var(--text-muted); }
    .dt-staged-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dt-staged-size { color: var(--text-muted); font-size: 11px; }
    .dt-staged-remove {
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      display: flex; padding: 2px; border-radius: var(--radius);
    }
    .dt-staged-remove:hover { color: var(--text-danger); background: var(--surface-1); }

    /* Große Datei-Karten (Detailbereich + Auftrag-Modal): Vorschau,
       Checkbox-Auswahl, E-Mail-Versand-Button */
    .dt-sel-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
    .dt-sel-count { font-size: 11px; color: var(--text-muted); }
    .dt-karten-liste { display: flex; flex-direction: column; gap: 10px; }

    /* Herkunftsmeldung (Abholordner oder Inbox) — kleiner Kasten ueber
       der ersten Datei (dateien.js: dtHerkunftHinweisHtml()). Nur
       admin/mitarbeiter, nur wenn Dateien da sind. */
    .dt-herkunft-hinweis {
      display: flex; align-items: flex-start; gap: 9px;
      background: var(--bg-warning); border: 0.5px solid var(--border-warning);
      border-radius: var(--radius); padding: 9px 11px; margin-bottom: 10px;
      font-size: 12px; line-height: 1.5; color: var(--text-warning);
    }
    .dt-herkunft-hinweis i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .dt-karte {
      display: flex; gap: 12px; align-items: flex-start; position: relative;
      border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px;
    }
    .dt-karte-check { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; margin: 0; z-index: 1; }
    .dt-karte-preview {
      position: relative;
      width: 110px; height: 90px; border-radius: 6px; background: var(--surface-1);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      overflow: hidden; cursor: pointer;
    }
    .dt-karte-preview i { font-size: 34px; color: var(--text-muted); }
    .dt-karte-freigabe-icon i, .dt-karte-download-icon i, .dt-karte-mail-icon i, .dt-karte-ordner-icon i { font-size: 9px !important; color: inherit !important; }
    .dt-karte-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .dt-karte-freigabe-icon, .dt-karte-download-icon, .dt-karte-mail-icon, .dt-karte-ordner-icon {
      position: absolute; width: 16px; height: 16px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; padding: 0; z-index: 2;
    }
    .dt-karte-freigabe-icon { top: 4px; right: 4px; background: var(--bg-accent); border: 0.5px solid var(--border-accent); color: var(--text-accent); }
    .dt-karte-freigabe-icon-leer { background: var(--surface-2); border: 0.5px dashed var(--border-strong); color: var(--text-muted); }
    .dt-karte-freigabe-icon-klickbar { cursor: pointer; }
    .dt-karte-freigabe-icon-klickbar:hover { filter: brightness(0.95); }
    span.dt-karte-freigabe-icon { pointer-events: none; }
    .dt-karte-download-icon {
      bottom: 4px; right: 4px; background: var(--surface-2); border: 0.5px solid var(--border-strong);
      color: var(--text-secondary); cursor: pointer;
    }
    .dt-karte-download-icon:hover { background: var(--surface-1); }
    /* Briefumschlag links neben dem Download-Icon — gleiche Optik. */
    .dt-karte-mail-icon {
      bottom: 4px; right: 24px; background: var(--surface-2); border: 0.5px solid var(--border-strong);
      color: var(--text-secondary); cursor: pointer;
    }
    .dt-karte-mail-icon:hover { background: var(--surface-1); }
    /* Kopier-Knopf links neben dem Briefumschlag — gleiche Optik.
       Legt den Ordnerpfad in die Zwischenablage (dateien.js:
       dtOrdnerPfadKopieren) und quittiert kurz mit einem Häkchen;
       hieß bis 06.09.2026 „Im Windows-Ordner zeigen“. */
    .dt-karte-ordner-icon {
      bottom: 4px; right: 44px; background: var(--surface-2); border: 0.5px solid var(--border-strong);
      color: var(--text-secondary); cursor: pointer;
    }
    .dt-karte-ordner-icon:hover { background: var(--surface-1); }
    .dt-karte-ordner-icon-ok { background: var(--bg-success); border-color: var(--text-success);
                               color: var(--text-success); }

    /* Ergebnis der Ablage — bleibt stehen, bis es geschlossen wird.
       Eine flüchtige Meldung reicht nicht: Man will nach dem Ablegen
       wissen, wohin geschrieben wurde, und meist gleich dorthin. */
    .sl-ablage-kasten {
      position:      fixed;
      right:         18px;
      bottom:        18px;
      z-index:       400;
      width:         360px;
      max-width:     calc(100vw - 36px);
      background:    var(--surface-2);
      border:        0.5px solid var(--border-strong);
      border-radius: 10px;
      box-shadow:    0 6px 24px rgba(0,0,0,.18);
      padding:       12px 14px;
      color:         var(--text-primary);
    }

    .dt-lightbox-ov {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.82);
      display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
    }
    .dt-lightbox-ov img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: default; }
    .dt-pdf-toolbar { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 2; }
    .dt-pdf-toolbar button {
      background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 13px;
      padding: 8px 14px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 6px;
    }
    .dt-pdf-toolbar button:hover { background: rgba(255,255,255,.22); }
    /* Grosser Druckknopf unter der Vorschau des Beilegers (dateien.js,
       dtPdfLightboxBlobOeffnen mit onPrint): feste Farbe, mittig am oberen Rand. */
    .dt-pdf-print-gross { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2;
      display: flex; align-items: center; gap: 8px; padding: 8px 24px; border: none; border-radius: 24px;
      background: #0AB6D1; color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; }
    .dt-pdf-print-gross:hover { background: #089cb3; }
    /* Schmales PDF-Fenster (z.B. Kosten-PDF-Lightbox) -- feste Breite
       einer DIN-A4-Seite (210mm bei 96dpi ~= 794px), Hoehe folgt der
       A4-Proportion (210:297), nach oben durch die Fensterhoehe
       begrenzt. */
    .bm-kosten-pdf-frame { width: min(794px, 92vw); aspect-ratio: 210 / 297; height: auto; max-height: calc(100vh - 80px); max-width: none; border: none; border-radius: 6px; background: #fff; cursor: default; }
    /* Dieselbe A4-Breite fuer die Datei-Lightbox im Detailfenster
       (dtPdfLightboxOeffnen() in dateien.js) -- eigene Klasse statt
       .lg-pdf-frame zu aendern, damit die Logistik-PDF-Ansicht (die
       weiterhin volle Breite nutzen soll) unangetastet bleibt. */
    .dt-pdf-frame { width: min(794px, 92vw); aspect-ratio: 210 / 297; height: auto; max-height: calc(100vh - 80px); max-width: none; border: none; border-radius: 6px; background: #fff; cursor: default; }
    .lg-pdf-frame { width: calc(100vw - 80px); height: calc(100vh - 80px); max-width: none; border: none; border-radius: 6px; background: #fff; cursor: default; }

    /* ── Freie PDF-Fenster (dtPdfFensterOeffnen() in dateien.js) ────────
       Angehängte PDFs eines Auftrags öffnen NICHT mehr als abdunkelnde
       Lightbox, sondern als verschiebbares Fenster (winmgr) — mehrere
       nebeneinander, damit man zwei Seiten vergleichen und daneben am
       Auftrag weiterarbeiten kann (Festlegung Chris, 17.08.2026).
       Geschlossen wird nur über das ✕; beim Sprung auf einen anderen
       Auftrag räumt winCloseAll() sie weg.
       KEIN Backdrop, keine Abdunklung — den Rahmen macht .win-frei. */
    .dt-pdfwin {
      display: flex; flex-direction: column; overflow: hidden;
      background: var(--surface-2); border-radius: 10px;
    }
    /* Kopf: Titel links, Knöpfe rechts, bei schmalem Fenster umbrechen
       (Fenster-Konvention, siehe winmgr.js) — sticky, damit das ✕ auch
       bei kleiner Höhe erreichbar bleibt. */
    .dt-pdfwin-kopf {
      position: sticky; top: 0; z-index: 2; flex-shrink: 0;
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 10px; background: var(--surface-2); border-bottom: 0.5px solid var(--border);
    }
    .dt-pdfwin-titel {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
    }
    .dt-pdfwin-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
    .dt-pdfwin-knoepfe button {
      background: var(--surface-1); border: 0.5px solid var(--border); color: var(--text-primary);
      font-size: 12px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
      display: flex; align-items: center; gap: 5px;
    }
    .dt-pdfwin-knoepfe button:hover { background: var(--surface-0); }
    .dt-pdfwin-knoepfe .dt-pdfwin-x { padding: 4px 8px; font-size: 14px; }
    /* Der Inhalt wächst mit der Fensterhöhe: flex:1 + min-height:0, kein
       max-height (Fenster-Konvention). */
    .dt-pdfwin-body { flex: 1; min-height: 0; display: flex; background: #525659; }
    .dt-pdfwin-body iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
    /* Bildfenster: derselbe Rahmen wie beim PDF (dt-pdfwin), nur der
       Inhalt ist ein Bild statt eines Rahmens. Es füllt das Fenster so
       weit wie möglich, OHNE seine Proportion zu verlieren — deshalb
       object-fit: contain und keine feste Größe (Chris, 18.08.2026). */
    /* Drehknoepfe + Statuswort im Bildfenster (dtBildDrehenAnbinden in
       dateien.js). Es gibt keinen Speichern-Knopf: Das Drehen speichert
       selbst, das Wort daneben sagt, wie weit es ist. */
    .dt-bildwin-dreh { padding: 4px 8px !important; font-size: 14px !important; }
    .dt-bildwin-drehstatus {
      font-size: 11px; color: var(--text-secondary); align-self: center;
      white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    }
    .dt-bildwin-drehstatus.dt-drehstatus-ok     { color: var(--success, #1D9E75); }
    .dt-bildwin-drehstatus.dt-drehstatus-fehler { color: var(--danger, #E24B4A); }
    .dt-pdfwin-body.dt-bildwin-body { align-items: center; justify-content: center; padding: 6px; }
    .dt-pdfwin-body.dt-bildwin-body img {
      max-width: 100%; max-height: 100%; width: auto; height: auto;
      object-fit: contain; display: block; user-select: none;
    }
    /* Videofenster (dtVideoFensterOeffnen in dateien.js): schwarzer Grund, das Video füllt das Fenster,
       ohne seine Proportion zu verlieren. */
    .dt-pdfwin-body.dt-videowin-body { background: #000; align-items: center; justify-content: center; }
    .dt-videowin-body video { width: 100%; height: 100%; object-fit: contain; background: #000; outline: none; }
    .dt-pdfwin-hinweis {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
      color: #fff; font-size: 13px; padding: 16px; text-align: center;
    }
    .lg-pdf-thumb {
      width: 30px; height: 30px; border-radius: 6px; background: var(--surface-1);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      border: 0.5px solid var(--border);
    }
    .lg-pdf-thumb:hover { background: var(--surface-0); }
    .lg-pdf-thumb i { font-size: 16px; color: var(--text-danger); }
    /* Tracking-Zelle im Logistik-Verlauf: Nummer zum Abgleichen in
       Festbreitenschrift, darunter ein sichtbarer Knopf zur Sendungs-
       verfolgung (ein reiner Textlink geht in der Tabelle unter). */
    .lg-track-nr  { font-family: var(--font-mono); font-size: 11.5px;
                    color: var(--text-secondary); word-break: break-all; }
    .lg-track-btn { margin-top: 4px; text-decoration: none; display: inline-flex;
                    align-items: center; gap: 5px; white-space: nowrap; }
    .lg-track-btn:hover { background: var(--surface-1); }
    /* Papierkorb am Zeilenende der Verlaufstabellen (verlauf.js).
       Zurückhaltend grau, erst beim Überfahren rot — Löschen soll
       greifbar, aber nicht das Auffälligste in der Zeile sein. */
    .vl-del        { border: none; background: none; cursor: pointer; padding: 4px 6px;
                     border-radius: 6px; color: var(--text-muted); line-height: 1; }
    .vl-del i      { font-size: 16px; }
    .vl-del:hover  { background: var(--bg-danger); color: var(--text-danger); }
    .dt-lightbox-close {
      position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
      background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 18px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .dt-lightbox-close:hover { background: rgba(255,255,255,.22); }

    .ob-breadcrumb { padding: 8px 20px; font-size: 12px; color: var(--text-secondary); background: var(--surface-1); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .ob-breadcrumb span.ob-crumb { cursor: pointer; color: var(--text-accent); }
    .ob-breadcrumb span.ob-crumb:hover { text-decoration: underline; }
    /* Sprung zu einem beliebigen Pfad — vor allem Netzfreigaben, die
       die Laufwerksliste nicht anbieten kann. Maße bewusst aus dem
       Bestand: Eingabefelder und .btn sind beide 34 hoch, der
       seitliche Abstand ist derselbe wie bei der Breadcrumb darunter. */
    .ob-goto { padding: 10px 20px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; gap: 6px; }
    .ob-goto input { flex: 1; font-family: var(--font-mono); font-size: 12px; }
    /* Erste Seite des Auswahldialogs: die Quellen. Bewusst groesser als
       eine Ordnerzeile — es ist eine Entscheidung, keine Navigation. */
    .ob-quelle       { display:flex; align-items:center; gap:12px; padding:13px 16px;
                       border-bottom:0.5px solid var(--border); cursor:pointer; }
    .ob-quelle:hover { background: var(--surface-1); }
    .ob-quelle-sym   { width:34px; height:34px; border-radius:8px; background:var(--bg-accent);
                       color:var(--text-accent); display:flex; align-items:center;
                       justify-content:center; flex-shrink:0; }
    .ob-quelle-sym i { font-size:18px; }
    .ob-quelle-text b    { display:block; font-size:13px; }
    .ob-quelle-text span { font-size:11px; color:var(--text-muted); }
    .ob-quelle-pfeil { margin-left:auto; color:var(--text-muted); }
    /* Ausgegraut statt versteckt: Der eigene PC ist eine berechtigte
       Erwartung — die Antwort "geht hier nicht, und darum" ist besser
       als ein fehlender Eintrag. */
    .ob-quelle-aus       { opacity:0.45; cursor:not-allowed; }
    .ob-quelle-aus:hover { background:none; }

    /* Kopfzeile des Browsers: zurueck zur Quellenauswahl links, der
       Ausweg "von Hand eintippen" rechts und klein — er ist die
       Ausnahme, nicht der Weg. */
    .ob-kopfzeile    { display:flex; align-items:center; gap:10px; padding:9px 20px 0; }
    .ob-kopfzeile .ob-crumb { cursor:pointer; color:var(--text-accent); font-size:12px; }
    .ob-kopfzeile .ob-crumb:hover { text-decoration:underline; }
    .ob-tippen       { margin-left:auto; font-size:11px; color:var(--text-muted); text-decoration:none; }
    .ob-tippen:hover { text-decoration:underline; }
    /* "Eine Ebene hoeher" — dasselbe Muster wie im Explorer. */
    .ob-row-hoch     { color:var(--text-secondary); }
    .ob-row-hoch i   { color:var(--text-secondary); }
    /* Eigene Zeile fuer den gewaehlten Ordner: Neben den Knoepfen wurde
       er abgeschnitten, sobald der Pfad etwas laenger war. */
    .ob-auswahl      { display:flex; align-items:baseline; gap:8px; padding:10px 20px 0; min-width:0; }
    .ob-auswahl-lbl  { font-size:11px; color:var(--text-muted); flex-shrink:0; }
    .ob-auswahl-pfad { font-family:var(--font-mono); font-size:12px; color:var(--text-primary);
                       overflow-wrap:anywhere; }

    .ob-liste { padding: 8px 12px; max-height: 320px; overflow-y: auto; }
    .ob-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; font-size: 13px; }
    .ob-row:hover { background: var(--surface-1); }
    .ob-row.ob-row-selected { background: var(--bg-accent); color: var(--text-accent); font-weight: 500; }
    .ob-row i { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
    .ob-row.ob-row-selected i { color: var(--text-accent); }
    .ob-row-neu { color: var(--text-secondary); border-top: 0.5px solid var(--border); margin-top: 4px; padding-top: 10px; }
    .opt-ordner-btn { border-radius: var(--radius); transition: color .12s; color: var(--text-secondary); }
    .opt-ordner-btn:hover { color: var(--text-accent); background: var(--bg-accent); }

    .dt-stl-ov {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.82);
      display: flex; align-items: center; justify-content: center; padding: 40px;
    }
    #dt-stl-canvas-wrap { width: 100%; height: 100%; position: relative; cursor: grab; }
    #dt-stl-canvas-wrap:active { cursor: grabbing; }
    #dt-stl-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
    .dt-stl-hint {
      position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
      font-size: 12px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.1);
      padding: 5px 12px; border-radius: 20px; pointer-events: none;
    }
    .dt-karte-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
    .dt-karte-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dt-karte-meta { font-size: 11px; color: var(--text-muted); }
    /* "In Ablage übernehmen" — kleiner Textbutton auf Chat-Karten
       (admin/mitarbeiter), macht die Chat-Datei zum regulären Upload. */
    .dt-karte-move-btn { align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: center;
                         gap: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer;
                         border: 0.5px solid var(--border-strong); border-radius: var(--radius);
                         background: var(--surface-1); color: var(--text-secondary); }
    .dt-karte-move-btn i { font-size: 13px; }
    .dt-karte-move-btn:hover { background: var(--surface-0); color: var(--text-primary); border-color: var(--border-accent); }
    .dt-freigabe-row { display: flex; gap: 8px; margin-bottom: 10px; }
    .dt-sicht-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px;
                    border: 0.5px solid var(--border-strong); border-radius: var(--radius);
                    background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
    .dt-sicht-btn i { font-size: 13px; }
    .dt-sicht-btn:hover { background: var(--surface-0); color: var(--text-primary); border-color: var(--border-accent); }
    .dt-karte-del { font-size: 16px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
    .dt-karte-del:hover { color: var(--text-primary); }
    /* Knopfreihe der Order-Form (dateien.js: dtOrderformKnoepfeHtml) —
       herunterladen, bearbeitete Fassung hochladen, wieder automatisch
       erzeugen. Der frühere Stift "lokal öffnen" ist am 19.08.2026
       entfallen: Er öffnete die Datei auf dem Rechner des BACKENDS. */
    .dt-of-aktionen   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .dt-of-aktionen .dt-karte-move-btn { align-self: auto; margin-top: 0; }
    .dt-karte-hand    { font-size: 10px; font-weight: 500; white-space: nowrap;
                        background: var(--bg-warning); color: var(--text-warning);
                        border: 0.5px solid var(--border-warning); border-radius: 20px; padding: 2px 8px; }
    /* Herkunfts-Kennzeichen der Mail-Poller (dateien.js:
       dtHerkunftBadgeHtml) — erste Zeile der Info-Spalte, direkt neben
       der Vorschau. align-self: flex-start, damit die Pille nur so
       breit wird wie ihr Text und nicht über die ganze Spalte läuft
       (die Info-Spalte ist ein flex-column-Container).
       Die Farben sind die des Notiz-Chats (.nz-badge-techkom /
       .nz-badge-praxkom, weiter unten) — dieselbe Herkunft, dieselbe
       Farbe, egal an welcher Stelle der App. */
    .dt-karte-quelle  { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
                        font-size: 10px; font-weight: 500; white-space: nowrap;
                        border-radius: 20px; padding: 2px 8px; }
    .dt-karte-quelle i { font-size: 11px; }
    .dt-karte-quelle-techkom { background: var(--bg-pro);     color: var(--text-pro);
                               border: 0.5px solid var(--text-pro); }
    .dt-karte-quelle-praxkom { background: var(--bg-warning); color: var(--text-warning);
                               border: 0.5px solid var(--border-warning); }
    .dt-email-btn {
      width: 100%; margin-top: 12px; height: 34px; display: flex; align-items: center;
      justify-content: center; gap: 6px; border-radius: var(--radius);
      border: 0.5px solid var(--border-strong); font-size: 12.5px; color: var(--text-secondary);
      cursor: pointer; background: none; box-sizing: border-box;
    }
    .dt-email-btn:hover { background: var(--surface-1); }
    .dt-email-btn i { font-size: 15px; }

    .row-del-btn {
      width: 20px; height: 20px; padding: 0; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius); border: none; background: none;
      color: var(--text-danger); cursor: pointer; font-size: 13px;
    }
    .row-del-btn:hover { background: var(--bg-danger); }

    tbody tr            { border-bottom: 0.5px solid var(--border); cursor: pointer; }
    tbody tr:hover      { background: var(--bg-accent); }
    tbody tr.sel        { background: var(--bg-accent); box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 8px 1px rgba(55,138,221,0.3); position: relative; z-index: 1; }
    tbody tr.eil td:first-child { border-left: 3px solid var(--border-danger); }
    td {
      padding:       7px 10px;
      vertical-align: middle;
      white-space:   nowrap;
      overflow:      hidden;
      text-overflow: ellipsis;
      max-width:     180px;
    }

    /* Sprung-Knöpfe in den Zeilen (Aufträge → Abrechnung → Monatsaufstellung).
       Seit 07.10.2026 in der Zeile statt in der Werkzeugleiste; ersetzen die
       früher hier stehende Prio-Spalte (Symbole, der Name steht im Tooltip).
       ⚠ Als PILLE gebaut wie die Beleg-Plaketten (.beleg-typ-badge): Radius
       20 px, ohne Rand, Pastellfüllung, Symbol in der Textfarbe (Festlegung
       Chris, 07.10.2026, Variante A mit Grün). Die Farbe sagt, WOHIN der
       Pfeil führt — dieselben Farben wie die Belegplaketten:
         Abrechnung        grün    (Geld, Erledigtes)
         Aufträge          violett (wie KV)
         Monatsaufstellung türkis  (wie SR) */
    .sprung-zelle { white-space: nowrap; }
    /* Schmalste Spalte, die nichts anschneidet (Chris, 07.10.2026): nur 4 px
       Innenabstand statt 10 px; die Breite setzt der Kopf (ALL_COLS in
       data.js, ABR_COLS und die Kopfzellen in abrechnung.js) = Pillenbreite
       + Abstand + 1 px Reserve: eine Pille 43 px → 52, zwei Pillen mit 4 px
       Lücke 90 px → 100. */
    td[data-key="sprung"], td.sprung-zelle,
    th[data-key="sprung"], th.sprung-kopf { padding-left: 4px; padding-right: 4px; }
    /* Der Ziehgriff bleibt überall sichtbar wie bei den anderen Spalten
       (Chris, 08.10.2026). Der Kopf (Griff + "Sprung" + 4 px Abstand je
       Seite) misst 61 px; deshalb ist die Spalte in Aufträgen 63 px breit
       (ALL_COLS in data.js), nicht 52 px wie die Pille (43 px) es bräuchte. */
    /* Abrechnung: Zwei Pillen NEBENEINANDER, Pillen UNVERÄNDERT (Chris,
       07.10.2026: "Knöpfe nicht stapeln, Pillen gleich lassen, nur die Spalte
       schmaler"). Zwei Pillen sind je 43 px = 86 px; die Spalte kann nie
       schmaler sein als das. Stellschrauben sind nur noch der Zellenabstand
       (2 px statt 4 px) und die Lücke zwischen den Pillen (2 px statt 4 px). */
    .abr-ue-kasten td[data-key="sprung"],
    .abr-ue-kasten th[data-key="sprung"] { padding-left: 2px; padding-right: 2px; }
    .abr-ue-kasten td[data-key="sprung"] .sprung-btn + .sprung-btn { margin-left: 2px; }
    .sprung-btn {
      display:         inline-flex;
      align-items:     center;
      justify-content: center;
      gap:             1px;
      padding:         3px 8px;
      border:          none;
      border-radius:   20px;
      line-height:     1;
      cursor:          pointer;
    }
    .sprung-btn i     { font-size: 13px; }
    .sprung-btn:hover { filter: brightness(0.94); }
    .sprung-ziel-abrechnung { background: #E8F3DC; color: #2D6600; }
    .sprung-ziel-auftraege  { background: #EEEDFE; color: #3C3489; }
    .sprung-ziel-sr         { background: #DDF4F2; color: #0B5F5B; }
    .sprung-zelle .sprung-btn + .sprung-btn { margin-left: 4px; }

    /* Eil-Tag */
    .eil-tag {
      display:       inline-flex;
      align-items:   center;
      gap:           3px;
      background:    var(--bg-danger);
      color:         var(--text-danger);
      border:        0.5px solid var(--border-danger);
      padding:       1px 6px;
      border-radius: 20px;
      font-size:     10px;
      font-weight:   500;
    }

    /* VITA-Chips */
    .vita-pair    { display: inline-flex; align-items: center; gap: 3px; }
    .vita-chip    {
      display:       inline-flex;
      align-items:   center;
      gap:           4px;
      padding:       1px 5px;
      border-radius: 20px;
      font-size:     10.5px;
      font-weight:   500;
      border:        0.5px solid rgba(0,0,0,.12);
    }
    .vita-dot-sm  { width: 11px; height: 11px; border-radius: 50%; border: 0.5px solid rgba(0,0,0,.15); flex-shrink: 0; }

    /* Status-Zelle */
    .status-cell        { display: flex; flex-direction: column; gap: 3px; }
    .status-ts          { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
    .status-select-wrap { position: relative; display: inline-flex; align-items: center; }
    .status-badge {
      display:       inline-flex;
      align-items:   center;
      padding:       2px 8px;
      border-radius: 20px;
      font-size:     11px;
      font-weight:   500;
      white-space:   nowrap;
      cursor:        pointer;
      user-select:   none;
    }
    .status-badge::after    { content: '▾'; margin-left: 4px; font-size: 9px; opacity: .7; }
    .status-inline-sel      { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none;
                              appearance: none; -webkit-appearance: none; -moz-appearance: none;
                              background: none; -webkit-tap-highlight-color: transparent; }

    /* Typ-Dropdown in der Rechnungsübersicht: gleiche Overlay-Technik, aber Optionen NICHT
       auf font-size:0/color:transparent setzen — natives Dropdown muss lesbar bleiben */
    .typ-inline-sel         { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none;
                              appearance: none; -webkit-appearance: none; -moz-appearance: none;
                              background: none; -webkit-tap-highlight-color: transparent; }

    /* Auftragsart-Badges */
    .art-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 20px; font-size: 11px; border: 0.5px solid var(--border); }
    .art-k  { background: #EAF3DE; color: #27500A; border-color: #C0DD97; }
    .art-ik { background: #E6F1FB; color: #0C447C; border-color: #B5D4F4; }
    .art-p  { background: #EEEDFE; color: #3C3489; border-color: #CECBF6; }
    .art-i  { background: #E1F5EE; color: #085041; border-color: #9FE1CB; }
    .art-s  { background: #FAEEDA; color: #633806; border-color: #FAC775; }
    .art-t  { background: #FBEAF0; color: #72243E; border-color: #F4C0D1; }
    .art-g  { background: #FAECE7; color: #712B13; border-color: #F5C4B3; }
    .art-a  { background: #EAF3DE; color: #27500A; border-color: #C0DD97; }

    /* ============================================================
       ABRECHNUNG: RECHNUNGSÜBERSICHT
       ============================================================ */
    /* Die beiden Leisten bilden EINEN Kasten: die obere rundet oben, die
       untere unten, und die Linie dazwischen ist die Trennung — wie
       .toolbar-row1/row2 in der Auftragsansicht. Zwei einzeln gerahmte
       Kästchen übereinander sähen aus, als gehörten sie nicht zusammen. */

    /* Abstand zu den Kacheln darüber (Meldung Chris, 18.08.2026: in
       Abrechnung und Sammelrechnung klebte die Leiste an den Kacheln).
       .stats bringt unten BEWUSST kein Polster mit (padding: 12px 12px 0)
       — in der Auftragsansicht entsteht der Abstand durch den .toolbar
       darunter, der margin: 12px 12px 0 hat. Hier folgt stattdessen diese
       Leiste ohne eigene Margin, also waren es 0 px (gemessen).
       ⚠ Bewusst NICHT margin-bottom auf .stats: Die Klasse steckt auch in
       der Auftragsansicht, dort kämen 12 + 12 = 24 px heraus und der
       bereits richtige Bereich wäre kaputt. Der Nachbarschafts-Selektor
       greift nur, wo Kacheln unmittelbar über dieser Leiste stehen. */
    .stats + .abr-ue-toolbar1 { margin-top: 12px; }

    .abr-ue-toolbar1 {
      display:       flex;
      align-items:   center;
      gap:           8px;
      padding:       10px 16px;
      background:    var(--surface-1);
      border:        0.5px solid var(--border);
      border-radius: var(--radius) var(--radius) 0 0;
      flex-wrap:     wrap;
    }
    .abr-ue-toolbar2 {
      position:      relative;
      display:       flex;
      align-items:   center;
      gap:           8px;
      padding:       8px 16px;
      background:    var(--surface-1);
      border:        0.5px solid var(--border);
      border-top:    none;
      border-radius: 0 0 var(--radius) var(--radius);
      margin-bottom: 12px;
      flex-wrap:     wrap;
    }
    .abr-ue-chip {
      font-size:     11px;
      font-weight:   500;
      padding:       4px 12px;
      border-radius: 20px;
      cursor:        pointer;
      border:        0.5px solid;
      background:    var(--surface-2);
      flex-shrink:   0;
      user-select:   none;
    }
    .abr-ue-dd {
      position:      absolute;
      top:           36px;
      left:          0;
      background:    var(--surface-2);
      border:        0.5px solid var(--border-strong);
      border-radius: 8px;
      box-shadow:    var(--shadow-md);
      min-width:     200px;
      z-index:       20;
      display:       none;
      padding:       4px;
    }
    .abr-ue-dd.open { display: block; }
    .abr-ue-dd-item {
      display:       flex;
      align-items:   center;
      gap:           8px;
      padding:       7px 10px;
      border-radius: 6px;
      cursor:        pointer;
      font-size:     12px;
    }
    .abr-ue-dd-item:hover { background: var(--surface-1); }
    .abr-ue-dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

    /* ============================================================
       BELEG-MODAL (Einzelrechnung / KV / Erstattung / Kulanz / Reklamation)
       ============================================================ */
    .beleg-modal-box  { background: var(--surface-2); border-radius: 12px; border: 0.5px solid var(--border);
                        width: 1120px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column;
                        overflow: hidden; }
    .bm-mh            { padding: 10px 14px; border-bottom: 0.5px solid var(--border); display: flex;
                        align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
    .bm-mh-l          { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .bm-title         { font-size: 13px; font-weight: 500; }
    .bm-nr            { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
                        background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 6px;
                        padding: 2px 9px; white-space: nowrap; }
    .bm-mh-r          { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .bm-status-chip   { padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 500; white-space: nowrap; }
    .bm-sc-entwurf    { background: var(--bg-pro); color: var(--text-pro); }
    .bm-sc-saved      { background: var(--bg-success); color: var(--text-success); }
    .bm-mh2           { padding: 6px 14px; border-bottom: 0.5px solid var(--border); display: flex;
                        align-items: center; gap: 8px; flex-shrink: 0; }
    .bm-pos-group     { display: flex; align-items: center; border: 0.5px solid var(--border-accent);
                        border-radius: 6px; overflow: hidden; background: var(--bg-accent); }
    .bm-pos-group-lbl { font-size: 11px; color: var(--text-accent); font-weight: 500; padding: 0 8px; white-space: nowrap; }
    .bm-pos-group button        { border: none; border-radius: 0; background: none; height: 26px; width: 24px;
                        padding: 0; justify-content: center; border-left: 0.5px solid var(--border-accent); }
    .bm-pos-group button:hover  { background: var(--surface-2); }
    .bm-pos-group button:disabled { opacity: .35; cursor: default; }
    .bm-mh2-sep       { width: 0.5px; height: 20px; background: var(--border-strong); flex-shrink: 0; }
    .dup-badge        { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px;
                        font-size: 10px; font-weight: 500; background: var(--bg-warning); color: var(--text-warning);
                        border: 0.5px solid var(--border-warning); white-space: nowrap; }
    .uebernommen-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 20px;
                        font-size: 10px; font-weight: 500; background: var(--bg-accent); color: var(--text-accent);
                        border: 0.5px solid var(--border-accent); white-space: nowrap; }
    .bm-dup-hint      { display: none; align-items: center; gap: 8px; padding: 9px 16px; font-size: 12px;
                        background: var(--bg-warning); color: var(--text-warning); border-bottom: 0.5px solid var(--border-warning); }
    .bm-gated .bm-dup-hint { display: flex; }
    .bm-xml-warn      { display: none; align-items: center; gap: 8px; padding: 9px 16px; font-size: 12px;
                        background: var(--bg-danger); color: var(--text-danger); border-bottom: 0.5px solid var(--border-danger); }
    .bm-xml-warn button { margin-left: auto; flex-shrink: 0; }
    .da-panel         { padding: 12px 16px; background: var(--surface-1); border-top: 0.5px solid var(--border);
                        border-bottom: 0.5px solid var(--border); }
    .da-panel-lbl     { font-size: 11px; color: var(--text-muted); text-transform: uppercase;
                        letter-spacing: .04em; margin-bottom: 6px; }
    .da-check-row     { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; }
    .da-check-row input { width: 15px; height: 15px; cursor: pointer; }
    .da-confirm-btn   { margin-top: 8px; width: 100%; justify-content: center; }
    #sl-toast         { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 8px;
                        padding: 10px 16px; border-radius: var(--radius);
                        font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(6px);
                        transition: opacity .2s, transform .2s; pointer-events: none;
                        z-index: 999; max-width: 360px; }
    #sl-toast.show    { opacity: 1; transform: translateY(0); }
    #sl-toast i       { font-size: 16px; flex-shrink: 0; }
    #sl-toast.ok      { background: var(--bg-success); color: var(--text-success); border: 0.5px solid var(--text-success); }
    #sl-toast.err     { background: var(--bg-danger);  color: var(--text-danger);  border: 0.5px solid var(--text-danger); }
    #sl-toast.info    { background: var(--bg-accent);  color: var(--text-accent);  border: 0.5px solid var(--text-accent); }
    #sl-toast.warn    { background: var(--bg-warning); color: var(--text-warning); border: 0.5px solid var(--text-warning); }
    /* Variante "D" der Speicher-Bestätigung (slFeldHaken(), speicherort.js)
       — Häkchen direkt neben einem autosave-Feld ohne eigenen Speichern-
       Knopf (Auftragsnotiz, Techniker-Zuweisung, Status-Wechsel). */
    .sl-feld-haken    { display: inline-block; margin-left: 6px; font-size: 15px; color: var(--text-success);
                        opacity: 0; transition: opacity .2s; vertical-align: middle; }
    .sl-feld-haken.show { opacity: 1; }
    .bm-gated #bm-btn-kopieren,
    .bm-gated .bm-footer { opacity: .4; pointer-events: none; }
    .bm-gated #bm-belegtyp { border-color: var(--border-warning); box-shadow: 0 0 0 3px var(--bg-warning); }
    .bm-meta          { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;
                        border-bottom: 0.5px solid var(--border); flex-shrink: 0; }
    .bm-meta-row      { display: grid; grid-template-columns: 0.9fr 0.75fr 0.6fr 0.95fr 0.95fr 0.95fr; gap: 8px; }
    .bm-meta-row2     { display: grid; grid-template-columns: 2.4fr 0.6fr 1fr; gap: 8px; }
    .bm-meta-row2.has-xml { grid-template-columns: 1.8fr 0.6fr 0.6fr 1fr; }
    .bm-mf label      { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
    .bm-mf input, .bm-mf select { width: 100%; height: 30px; border: 0.5px solid var(--border); border-radius: 6px;
                        padding: 0 8px; background: var(--surface-2); font-size: 12px; box-sizing: border-box; }
    .bm-ro-field      { width: 100%; height: 30px; border: 0.5px solid var(--border); border-radius: 6px;
                        padding: 0 8px; background: var(--surface-2); font-size: 12px; cursor: pointer;
                        display: flex; align-items: center; justify-content: space-between; gap: 6px;
                        color: var(--text-primary); box-sizing: border-box; overflow: hidden; }
    .bm-ro-field:hover { border-color: var(--border-strong); background: var(--surface-1); }
    .bm-ro-field-required { border: 1.5px solid var(--border-danger); }
    .bm-ro-field span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .bm-ro-field i    { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
    .bm-rabatt-wrap   { display: flex; align-items: stretch; height: 30px; border: 0.5px solid var(--border);
                        border-radius: 6px; background: var(--surface-2); overflow: hidden; box-sizing: border-box; }
    .bm-rabatt-wrap:focus-within { border-color: var(--border-accent); }
    .bm-rabatt-wrap input { flex: 1; min-width: 0; height: 100%; border: none; border-radius: 0;
                        padding: 0 0 0 8px; font-size: 12px; background: none; text-align: right; }
    .bm-rabatt-pct    { display: flex; align-items: center; padding: 0 4px 0 3px; font-size: 12px;
                        color: var(--text-muted); flex-shrink: 0; }
    .bm-rabatt-steppers { display: flex; flex-direction: column; border-left: 0.5px solid var(--border);
                        width: 18px; flex-shrink: 0; }
    .bm-rabatt-steppers button { flex: 1; border: none; border-radius: 0; height: auto; padding: 0;
                        background: none; display: flex; align-items: center; justify-content: center;
                        color: var(--text-muted); cursor: pointer; }
    .bm-rabatt-steppers button:first-child { border-bottom: 0.5px solid var(--border); }
    .bm-rabatt-steppers button:hover { background: var(--surface-1); color: var(--text-accent); }
    .bm-rabatt-steppers button i    { font-size: 10px; }
    .bm-rabatt-steppers button:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
    .bm-rabatt-steppers button:disabled:hover { background: none; }
    .bm-matauch-wrap  { height: 30px; border: 0.5px solid var(--border); border-radius: 6px;
                        background: var(--surface-2); display: flex; align-items: center; justify-content: center;
                        box-sizing: border-box; }
    .bm-matauch-wrap input { width: 14px; height: 14px; cursor: pointer; }
    .bm-xml-field     { width: 100%; height: 30px; border: 0.5px solid var(--border-strong); border-radius: 6px;
                        padding: 0 8px; background: var(--surface-1); font-size: 12px; box-sizing: border-box;
                        font-family: var(--font-mono); color: var(--text-primary); }
    .bm-xml-field:disabled { background: var(--surface-2); color: var(--text-secondary); cursor: default; }
    .bm-pos-head      { padding: 0 16px; flex-shrink: 0; border-bottom: 0.5px solid var(--border-strong);
                        background: var(--surface-1); }
    .bm-pos-head table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
    .bm-pos-head th   { padding: 6px 8px; text-align: left; color: var(--text-muted); font-weight: 500;
                        font-size: 11px; white-space: nowrap; }
    .bm-pos-head th.r { text-align: right; }
    .bm-pos-area      { padding: 0 16px 12px 16px; overflow-y: auto; flex: 1; min-height: 0;
                        scrollbar-width: none; -ms-overflow-style: none; }
    .bm-pos-area::-webkit-scrollbar { display: none; }
    .bm-pos-area table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
    .bm-pos-area th, .bm-pos-area td { padding: 6px 8px; border-bottom: 0.5px solid var(--border);
                        text-align: left; white-space: nowrap; overflow: hidden; font-size: 12px; }
    .bm-pos-area th   { color: var(--text-muted); font-weight: 500; font-size: 11px; }
    .bm-pos-area td.r, .bm-pos-area th.r { text-align: right; }
    .bm-pos-area tbody tr     { cursor: pointer; }
    .bm-pos-area tbody tr.sel { background: var(--bg-accent); }
    .bm-ci            { width: 100%; border: 0.5px solid transparent; background: transparent; padding: 4px 6px;
                        border-radius: 5px; font-size: 12px; }
    .bm-ci:hover, .bm-ci:focus { border-color: var(--border); background: var(--surface-1); }
    .bm-ci:read-only  { color: var(--text-muted); cursor: default; }
    .bm-ci:read-only:hover, .bm-ci:read-only:focus { border-color: transparent; background: transparent; }
    .bm-ci.r          { text-align: right; }
    .bm-art-badge     { display: inline-flex; align-items: center; justify-content: center; width: 22px;
                        height: 22px; border-radius: 6px; font-size: 11px; font-weight: 500; }
    .bm-art-badge.k   { background: #EAF3DE; color: #27500A; }
    .bm-art-badge.p   { background: #E6F1FB; color: #0C447C; }
    .bm-art-badge.m   { background: #FAEEDA; color: #633806; }
    .bm-art-badge.l   { background: #EEEDFE; color: #3C3489; }
    .bm-del-x         { border: none; background: none; color: var(--text-danger); padding: 2px; height: auto;
                        outline: none; -webkit-tap-highlight-color: transparent; }
    .bm-del-x:hover   { background: var(--bg-danger); }
    .bm-add-row-btn   { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px;
                        color: var(--text-accent); cursor: pointer; border-top: 0.5px solid var(--border);
                        background: none; width: 100%; border-radius: 0; border-left: none; border-right: none;
                        border-bottom: none; }
    .bm-add-row-btn:hover { background: var(--bg-accent); }
    .bm-footer        { padding: 10px 16px; border-top: 0.5px solid var(--border); flex-shrink: 0;
                        background: var(--surface-1); }
    .bm-sum-grid      { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; border: 0.5px solid var(--border);
                        border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--surface-2); }
    .bm-sum-cell      { padding: 7px 10px; display: flex; flex-direction: column; gap: 2px;
                        border-right: 0.5px solid var(--border); }
    .bm-sum-cell:last-child { border-right: none; }
    .bm-sum-cell label { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase;
                        letter-spacing: .04em; }
    .bm-sum-cell .val { font-size: 13px; font-weight: 500; }
    .bm-sum-cell-rabatt          { background: #EAF3DE; }
    .bm-sum-cell-rabatt label    { color: #27500A; }
    .bm-sum-cell-rabatt .val     { color: #27500A; }
    .bm-sum-cell-aufschlag        { background: var(--bg-danger); }
    .bm-sum-cell-aufschlag label  { color: var(--text-danger); }
    .bm-sum-cell-aufschlag .val   { color: var(--text-danger); }
    .bm-kosten-pdfs   { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
    .bm-kosten-pdf-icon { width: 19px; height: 19px; border-radius: 5px; display: flex; align-items: center;
                        justify-content: center; cursor: pointer; border: none; padding: 0; flex-shrink: 0; }
    .bm-kosten-pdf-icon i { font-size: 11px; }
    .bm-kosten-pdf-icon:hover { filter: brightness(0.92); }
    .bm-action-row    { display: flex; justify-content: space-between; align-items: center; }
    .bm-unsaved-hint  { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

    /* Leer-State */
    .empty-state   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 8px; color: var(--text-muted); }
    /* „Keine Aufträge gefunden" stand IMMER unter der Tabelle: render()
       setzt zwar die Klasse .hidden, aber die gab es als Regel nirgends
       — display:flex oben gewann. Bei langen Listen fiel es nie auf,
       weil man so weit nicht scrollte (gefunden 10.08.2026 beim
       Zeitraum-Umbau, als die Liste kurz wurde). */
    .empty-state.hidden { display: none; }
    .empty-state i { font-size: 32px; }

    /* ============================================================
       DETAILBEREICH
       ============================================================ */
    /* Rundum gerahmt wie die Tabelle daneben. Im freien Fenster
       (winmgr, z. B. Kalender) wird der Rahmen von .win-frei ohnehin
       per !important durch Ring und Schatten ersetzt, in der rechts
       angedockten Auftrag-Leiste über dem Beleg-Fenster
       (.bm-auftrag-slide) durch deren eigenen — beide bleiben
       unberührt. */
    .detail        { width: 720px; flex-shrink: 0; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow-y: auto; position: relative; }
    .detail.hidden { display: none; }
    .dh            { padding: 12px 14px; border-bottom: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
    .dh h3         { font-size: 13px; font-weight: 500; }
    .dh-row1       { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 8px; }
    .dh-close-btn  { width: 26px; height: 26px; padding: 0; flex-shrink: 0; border: none; background: none;
                     display: flex; align-items: center; justify-content: center; cursor: pointer;
                     color: var(--text-muted); border-radius: var(--radius); }
    .dh-close-btn i { font-size: 17px; }
    .dh-close-btn:hover { color: var(--text-primary); background: var(--surface-1); }
    .dh-row2       { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 8px; min-height: 30px; }
    /* flex-wrap als Sicherheitsnetz: reicht die Breite nicht (schmaler
       Bildschirm, größere Schrift, künftig ein weiterer Button), rutscht
       der letzte Button in eine zweite Zeile statt abgeschnitten zu
       werden. .dh-row2 wächst dabei automatisch mit. */
    .dh-row2-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .dh-rechnung-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
                        color: var(--text-accent); background: var(--bg-accent); border: 0.5px solid var(--border-accent);
                        border-radius: 20px; padding: 4px 10px; cursor: pointer; }
    .dh-rechnung-badge:hover { filter: brightness(0.96); }
    .xbtn          { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; display: flex; padding: 3px; border-radius: var(--radius); }
    .xbtn:hover    { color: var(--text-primary); background: var(--surface-1); }
    .db            { padding: 14px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
    .df label      { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; display: block; }
    .df .dv        { font-size: 13px; }
    .df-row2       { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .df-row3       { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
    /* Auftragsart | Kiefer | Material | Zahnfarbe(n) — wie .df-row3, nur
       ein Feld mehr (Kiefer, 29.09.2026). Bewusst KEINE Telefon-
       Sonderregel, aus demselben Grund wie bei .df-row3 (siehe
       responsive.css): dieselbe Zeile baut auch die PDF-Vorschau
       (detail.js, zahnschemaDetailHtml('-pdf')), und Media Queries
       messen den Schirm, nicht die Vorschauseite. */
    .df-row4       { display: grid; grid-template-columns: 1fr 0.7fr 1fr 1.4fr; gap: 10px; }
    .el-card       { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 8px 10px; display: flex; align-items: center; }
    .el-half       { flex: 1; display: flex; align-items: center; gap: 8px; }
    .el-half > i   { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
    .el-half label { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; }
    .el-half .dv   { font-size: 13px; font-weight: 500; }
    .el-sep        { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; margin: 0 12px; }
    .el-half.el-breit { flex: 1.6; }
    /* Wunschdatum in der Datumskarte (Detail): gelber Grund + Warndreieck, wenn das Lieferdatum danach liegt */
    .el-half.el-warn  { background: var(--bg-warning); border-radius: var(--radius); padding: 4px 8px; margin: -4px 0; }
    .el-half.el-warn i, .el-half.el-warn .dv { color: var(--text-warning); }

    /* Wunschdatum in Tabellen (Aufträge-Tab des Labors, Liste der Praxis): Datum, bei Abweichung gelb mit Dreieck */
    .wunsch-zelle     { font-size: 12px; white-space: nowrap; }
    .wunsch-zelle.wunsch-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--text-warning); font-weight: 500; }
    .wunsch-zelle i   { font-size: 13px; }
    .wunsch-leer      { color: var(--text-muted); }
    /* Formular: Lieferdatum und Wunschdatum mit gelbem Rand, wenn das Lieferdatum nach dem Wunsch liegt (modals.js, lieferWarnung) */
    input.feld-warn   { border-color: var(--border-warning); box-shadow: 0 0 0 1px var(--border-warning); }
    /* Haken "Wunschdatum-Spalte" in der Leiste über der Auftragstabelle */
    .col-toggle       { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; cursor: pointer; white-space: nowrap; }
    .col-toggle input[type="checkbox"] { margin: 0; width: 14px; height: 14px; min-width: 0; padding: 0; flex: 0 0 auto; }
    .el-versand    { font-size: 11px; color: var(--text-secondary); margin-top: 1px; overflow-wrap: anywhere; }
    .el-half > div { min-width: 0; }
    .el-versand a  { color: var(--text-accent); text-decoration: none; }
    .el-versand a:hover { text-decoration: underline; }
    .el-versand a i { font-size: 11px; color: inherit; }
    .el-dauer      { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 4px; }

    /* ---- Datumskarte: Breitenstufen + "Im Haus" (detail.js, eingangLieferHtml; Chris, 11.11.2026) ----
       Die Karte richtet sich nach der Breite IHRES Bereichs (Container-Query), nicht nach dem Bildschirm:
       der Detailbereich ist am Desktop 720 px, am Tablet 380–732 px breit.
         ab 500 px   große Symbole links vom Block, volle Daten
         400–499 px  kompakt: kleine Symbole links der Überschrift
         unter 400   eine Zeile, Jahr zweistellig; "Im Haus" ersetzt den Rücktransport
       Beide Schreibweisen stehen im HTML (.d-v/.d-k, .l-v/.l-k, .v-lang/.v-kurz, .ihd-v/.ihd-k), das
       CSS blendet eine aus. Ohne Container-Query-Unterstützung bleibt es bei der breiten Form.
       ⚠ Gemessen (Browser, 380 px): in der schmalsten Stufe schneidet nichts ab — vor einer
       Änderung an Abständen oder Schriftgrößen neu messen. */
    .el-cq                       { container-type: inline-size; }
    .el-card .el-z               { display: contents; }
    .el-card .d-k, .el-card .l-k, .el-card .v-kurz, .el-card .el-kl, .el-card .ihd-k { display: none; }
    .el-card .el-rt .dv          { white-space: nowrap; }
    .el-card .el-ihs             { display: none; align-items: center; gap: 4px; margin-left: 10px; color: #6A3F1C; }
    .el-card .el-ihs i           { font-size: 18px; color: #8B5A2B; }
    .el-card.el-sym .el-ihs      { display: inline-flex; }
    .el-card.el-sym .el-ihz      { display: none; }
    .el-card .el-ihz .dv         { color: #6A3F1C; }
    .el-card .el-ihz .el-half > i { color: #8B5A2B; }
    /* Mit vier Zellen (.el-w) bekommt die UPS-Nummer unter 640 px keinen Platz mehr
       (sie bräche auf drei Zeilen um) — dort steht "UPS · Nr. ↗" und das Im-Haus-Datum ohne Jahr. */
    @container (max-width: 639px) {
      .el-card.el-w .v-lang      { display: none; }
      .el-card.el-w .v-kurz      { display: block; }
      .el-card .ihd-v            { display: none; }
      .el-card .ihd-k            { display: inline; }
    }
    @container (max-width: 499px) {
      .el-card .el-half > i      { display: none; }
      .el-card .el-kl            { display: inline; font-size: 11px; vertical-align: -1px; margin-right: 3px; }
      .el-card .el-sep           { margin: 0 8px; }
      .el-card .el-half          { gap: 0; }
      .el-card .el-half .dv      { font-size: 12.5px; }
      .el-card .el-ihs i         { font-size: 13px; }
      .el-card .ihd-v            { display: none; }
      .el-card .ihd-k            { display: inline; }
    }
    @container (max-width: 399px) {
      .el-card                   { padding: 8px; }
      .el-card .d-v, .el-card .l-v, .el-card .v-lang { display: none; }
      .el-card .d-k, .el-card .l-k { display: inline; }
      .el-card .v-kurz           { display: block; }
      .el-card .el-sep           { margin: 0 4px; }
      .el-card .el-half label    { letter-spacing: .01em; }
      .el-card .el-half.el-breit { flex: 1.25; }
      .el-card .el-ihs           { display: none !important; }
      .el-card.el-hatih .el-rt   { display: none; }
      .el-card.el-hatih .el-ihz  { display: contents; }
      .el-card.el-hatih .el-ihz .el-half { flex: 1.25; }
    }
    /* Verlauf des Lieferdatums (Protokoll, liefer_log) — nur Labor */
    .el-verlauf-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .el-status-badge { cursor: default; }
    .el-status-badge::after { content: none; }
    .el-status-ts { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-right: 6px; }
    .el-status-ts:empty { display: none; }
    .el-verlauf-btn { background: none; border: none; padding: 2px 0; font-size: 11px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
    .el-verlauf-btn:hover { color: var(--text-primary); }
    .el-verlauf-body { margin-top: 4px; border-top: 0.5px solid var(--border); }
    .el-v-zeile    { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0; border-bottom: 0.5px solid var(--border); font-size: 12px; color: var(--text-primary); }
    .el-v-zeit     { color: var(--text-muted); font-size: 11px; min-width: 96px; }
    .el-v-quelle   { color: var(--text-accent); font-size: 11px; }
    .el-v-leer     { font-size: 12px; color: var(--text-secondary); padding: 6px 0; line-height: 1.5; }
    .df-patient-xml { margin: 14px 0; padding: 14px 0; border-top: 0.5px dashed var(--border-strong); border-bottom: 0.5px dashed var(--border-strong); }
    .pdf-page .df-patient-xml { margin: 16px 0; padding: 16px 0; }
    .df-xml        { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .da            { padding: 10px 14px; border-top: 0.5px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; }
    .arzt-card-sm  { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
    .av            { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-pro); color: var(--text-pro); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; flex-shrink: 0; }

    /* Status-Timeline */
    .st-timeline      { display: flex; flex-direction: column; }
    .st-item          { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
    .st-track         { display: flex; flex-direction: column; align-items: center; width: 16px; flex-shrink: 0; }
    .st-dot           { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid; flex-shrink: 0; margin-top: 3px; }
    .st-dot.is-latest { width: 14px; height: 14px; margin-top: 2px; box-shadow: 0 0 0 3px rgba(0,0,0,.1); }
    .st-line          { width: 2px; background: var(--border); min-height: 14px; margin-top: 3px; flex: 1; }
    .st-content       { flex: 1; }
    .st-label         { font-size: 12px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .st-aktuell       { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
    .st-date          { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

    /* ============================================================
       PRAXEN / TECHNIKER KARTEN-VIEW
       ============================================================ */
    .card-tab-inner      { flex: 1; overflow: auto; padding: 20px 24px; }
    .card-tab-inner .inner-wrap { max-width: 720px; margin: 0 auto; }
    .card-tab-top        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .card-tab-top h2     { font-size: 15px; font-weight: 500; }
    .cards-grid          { display: flex; flex-direction: column; gap: 10px; }
    /* Untertabs im Inbox-Tab. BEWUSST eigene Klassen statt der
       .opt-sub2-* aus den Optionen: Die setzen display:flex mit
       Spaltenrichtung, wodurch .card-tab-top und #ib-list als
       Flex-Elemente behandelt werden und ihre Breite verlieren. Hier
       braucht es schlichte Blöcke. */
    /* ── DASHBOARD (dashboard.js) — Startseite aller drei Rollen.
       Kennzahlen oben als Sprungmarken, darunter Arbeitslisten in
       Karten. Zwei Spalten, ab schmalem Fenster einspaltig. */
    /* Tageszeit-Färbung: beginnt an der Kopfzeile und läuft nach unten
       weich aus. Liegt als Pseudo-Element hinter dem Inhalt, damit die
       Karten darauf schweben. */
    .db            { display: flex; flex-direction: column; gap: 14px; position: relative; }
    .db::before    { content: ''; position: absolute; left: -24px; right: -24px; top: -20px; height: 780px;
                     pointer-events: none; z-index: 0; border-radius: 0 0 24px 24px; }
    /* ⚠ NUR das Dashboard, NICHT ".db > *": Der Detail-Rumpf (#dbody)
       heißt ebenfalls .db — mit der breiten Regel bekam dort jedes Kind
       einen Stapel-Kontext (z-index:1), der die frei schwebenden
       Chat-Fenster (winmgr, z-Band 90) einsperrte: Sie lagen unter dem
       sticky Tabellenkopf (z 2). Gemessen am 25.08.2026 per
       elementFromPoint. Die Tageszeit-Klassen trägt nur das Dashboard. */
    .db-morgen > *, .db-tag > *, .db-abend > * { position: relative; z-index: 1; }
    .db-morgen::before { background: linear-gradient(180deg, rgba(250,199,117,.34) 0%, rgba(250,214,150,.22) 22%, rgba(250,238,218,.12) 55%, rgba(250,238,218,0) 100%); }
    .db-tag::before    { background: linear-gradient(180deg, rgba(133,183,235,.30) 0%, rgba(165,203,240,.20) 22%, rgba(230,241,251,.11) 55%, rgba(230,241,251,0) 100%); }
    .db-abend::before  { background: linear-gradient(180deg, rgba(127,119,221,.28) 0%, rgba(160,153,232,.19) 22%, rgba(238,237,254,.10) 55%, rgba(238,237,254,0) 100%); }


    /* Kopfbereich des Dashboards: Begrüßung links, Spruch in der Mitte,
       Wetter rechts.
       ⚠ Hieß bis 12.08.2026 .db-kopf — denselben Namen trägt weiter
       unten der Kopf einer Dashboard-KARTE. Bei gleicher Spezifität
       gewinnt die spätere Regel: Diese Leiste bekam dadurch das Polster
       und den Trennstrich der Kartenköpfe statt der eigenen Angaben. */
    .db-kopfleiste { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                     flex-wrap: wrap; padding: 16px 18px; border-radius: 16px;
                     background: var(--surface-2);
                     box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
    .db-gruss      { font-size: 21px; font-weight: 500; line-height: 1.25; }
    .db-datum      { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
    .db-wetter     { display: flex; align-items: center; gap: 12px; padding: 8px 14px;
                     border-radius: 12px; background: var(--surface-1); }
    .db-wetter i   { font-size: 28px; color: var(--text-accent); }
    .db-grad       { font-size: 21px; font-weight: 500; line-height: 1; }
    .db-ort        { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

    /* Hinweisband „Mails zurückgewiesen" (dashboard.js, dbZurueckBandHtml) */
    .db-zurueck    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
                     border: 0.5px solid var(--border-danger); border-radius: 14px;
                     background: var(--bg-danger); color: var(--text-danger); font-size: 13px; }
    .db-zurueck > i { font-size: 18px; }
    .db-zurueck > span { flex: 1; min-width: 200px; }
    .db-kacheln    { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
    .db-k          { background: var(--surface-2); border-radius: 14px; padding: 13px 15px; cursor: pointer;
                     box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
                     transition: transform .12s ease, box-shadow .12s ease; }
    .db-k:hover    { transform: translateY(-2px);
                     box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.09); }
    .db-k-v        { font-size: 24px; font-weight: 500; line-height: 1.1; }
    .db-k-l        { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
    .db-k-s        { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    /* ---- Erklär-Modus (erklaer-modus.js) -------------------
       Eigene Ebene ÜBER der Oberfläche: Die Zeichen liegen fix im
       Fenster und werden bei Scrollen/Größenänderung neu gesetzt. So
       verschiebt der Modus kein einziges Layout. */
    #em-huelle     { position: fixed; inset: 0; z-index: 2900; pointer-events: none; }
    .em-zeichen    { position: fixed; width: 20px; height: 20px; border-radius: 999px;
                     background: var(--fill-accent); color: #fff; border: 0; cursor: pointer;
                     font: 700 12px/1 var(--font-mono, monospace); display: flex;
                     align-items: center; justify-content: center; pointer-events: auto;
                     box-shadow: 0 2px 9px rgba(0,0,0,.32); padding: 0; }
    .em-zeichen:hover { background: var(--fill-accent-hover); }
    #em-blase      { position: fixed; width: 240px; background: var(--text-primary);
                     color: var(--surface-2); border-radius: 9px; padding: 10px 12px;
                     font-size: 12.5px; line-height: 1.45; pointer-events: auto;
                     box-shadow: 0 10px 26px rgba(0,0,0,.35); z-index: 2901; }
    #em-blase strong { display: block; margin-bottom: 3px; }

    /* ---- Assistent im Hilfe-Fenster (support.js) ----------- */
    .sh-frage      { margin-bottom: 14px; }
    .sh-frage label{ display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
    .sh-frage-feld { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
                     border: 1px solid var(--border-accent); border-radius: 10px; padding: 9px 11px;
                     box-shadow: 0 0 0 3px var(--bg-accent); }
    .sh-frage-feld i     { color: var(--text-muted); font-size: 16px; }
    .sh-frage-feld input { border: 0; background: transparent; color: var(--text-primary);
                     font: inherit; font-size: 13px; width: 100%; outline: none; }
    .sh-treffer    { display: block; width: 100%; text-align: left; margin-top: 7px; padding: 9px 11px;
                     background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 9px;
                     cursor: pointer; font: inherit; }
    .sh-treffer:hover { border-color: var(--border-accent); background: var(--bg-accent); }
    .sh-treffer-t  { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .sh-treffer-s  { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
    .sh-frage-leer { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
    .sh-frage-quelle { margin-top: 8px; font-size: 11px; color: var(--text-muted);
                     display: flex; align-items: center; gap: 5px; }

    /* ---- Handbuch (handbuch.js) ---------------------------- */
    .hb-wrap       { display: flex; height: 60vh; min-height: 340px; max-height: 560px; }
    .hb-seite      { width: 210px; flex: none; border-right: 0.5px solid var(--border);
                     padding: 10px; overflow-y: auto; background: var(--surface-1); }
    .hb-find       { display: flex; align-items: center; gap: 6px; background: var(--surface-2);
                     border: 0.5px solid var(--border); border-radius: 7px; padding: 5px 8px;
                     margin-bottom: 9px; }
    .hb-find i     { color: var(--text-muted); font-size: 15px; }
    .hb-find input { border: 0; background: transparent; color: var(--text-primary);
                     font: inherit; font-size: 12.5px; width: 100%; outline: none; padding: 2px 0; }
    .hb-grp        { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                     color: var(--text-muted); margin: 12px 0 4px; padding: 0 6px; }
    .hb-item       { display: block; width: 100%; text-align: left; border: 0; background: transparent;
                     font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
                     padding: 6px 8px; border-radius: 6px; }
    .hb-item:hover { background: var(--surface-2); color: var(--text-primary); }
    .hb-item[aria-current="true"] { background: var(--bg-accent); color: var(--text-accent); font-weight: 500; }
    .hb-leer       { font-size: 12.5px; color: var(--text-muted); padding: 10px 6px; line-height: 1.5; }
    .hb-haupt      { flex: 1; min-width: 0; padding: 16px 20px; overflow-y: auto; background: var(--surface-2); }
    .hb-crumb      { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
    .hb-haupt h3   { font-size: 17px; margin: 0 0 5px; font-weight: 500; }
    .hb-ein        { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.55;
                     max-width: 62ch; }
    .hb-stp        { display: flex; gap: 11px; margin-bottom: 11px; font-size: 13px; line-height: 1.5;
                     max-width: 62ch; }
    .hb-stp-n      { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--bg-accent);
                     color: var(--text-accent); display: flex; align-items: center; justify-content: center;
                     font-size: 11px; font-weight: 600; }
    .hb-tipp       { display: flex; gap: 9px; background: var(--bg-warning); color: var(--text-warning);
                     border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
                     margin-top: 13px; max-width: 62ch; }
    .hb-tipp i     { font-size: 16px; flex: none; }
    .hb-fuss       { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 13px;
                     border-top: 0.5px solid var(--border); }
    @media (max-width: 700px) {
      .hb-wrap     { flex-direction: column; height: auto; max-height: 70vh; }
      .hb-seite    { width: auto; border-right: 0; border-bottom: 0.5px solid var(--border); max-height: 150px; }
    }

    /* ---- Geführter Rundgang (rundgang.js) ------------------
       Der Scheinwerfer ist ein einziges Element: Der abgedunkelte Rest
       entsteht aus seinem Schlagschatten (0 0 0 9999px). Das spart eine
       zweite Ebene und lässt das hervorgehobene Element unberührt —
       kein Klon, kein z-index-Streit mit den freien Fenstern. */
    #rg-spot       { position: fixed; z-index: 3000; border-radius: 9px; pointer-events: none;
                     box-shadow: 0 0 0 3px var(--fill-accent, #1a56db),
                                 0 0 0 9999px rgba(6, 11, 22, .58);
                     transition: left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1),
                                 width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1); }
    #rg-spot::after{ content: ""; position: absolute; inset: -3px; border-radius: 11px;
                     border: 2px solid var(--fill-accent, #1a56db);
                     animation: rg-ring 2s ease-out infinite; }
    @keyframes rg-ring { 0% { transform: scale(1); opacity: .85 }
                         70% { transform: scale(1.12); opacity: 0 }
                         100% { opacity: 0 } }
    @media (prefers-reduced-motion: reduce) {
      #rg-spot, #rg-spot::after, #rg-blase { transition: none; animation: none; }
    }
    #rg-blase      { position: fixed; z-index: 3001; width: 310px; background: var(--surface-2);
                     border: 0.5px solid var(--border-strong); border-radius: 13px; padding: 14px;
                     box-shadow: 0 14px 38px rgba(0,0,0,.28);
                     transition: left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1); }
    #rg-blase::before { content: ""; position: absolute; width: 13px; height: 13px;
                     background: var(--surface-2); border-left: 0.5px solid var(--border-strong);
                     border-top: 0.5px solid var(--border-strong); transform: rotate(45deg);
                     left: 26px; top: -7.5px; }
    #rg-blase.rg-hoch::before { top: auto; bottom: -7.5px; transform: rotate(225deg); }
    .rg-schritt    { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--text-accent); }
    .rg-titel      { font-size: 15px; font-weight: 500; margin: 4px 0 5px; }
    .rg-text       { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .rg-fuss       { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
    .rg-punkte     { display: flex; gap: 4px; flex: 1; }
    .rg-punkte i   { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong);
                     transition: width .2s, background .2s; }
    .rg-punkte i.rg-an { background: var(--fill-accent); width: 16px; }

    /* ---- Erste Schritte (erste-schritte.js) ----------------
       Sitzt zwischen Begrüßung und Kacheln und sieht bewusst NICHT
       aus wie eine db-Karte: Sie ist kein Bericht über den Betrieb,
       sondern eine Aufgabe, die einmal abgearbeitet wird und dann
       verschwindet. Der leichte Farbverlauf setzt sie ab, ohne zu
       schreien. */
    .es-karte      { background: var(--surface-2); border-radius: 14px; overflow: hidden;
                     box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); }
    /* Der Gruß am allerersten Tag. Steht ÜBER dem Kopf und trägt
       dieselbe Farbfläche weiter, damit es eine Karte bleibt und nicht
       zwei aufeinandergestapelte wirkt. Er verschwindet von selbst,
       sobald der erste Punkt erledigt ist — siehe erste-schritte.js. */
    .es-gruss      { padding: 13px 16px 0; font-size: 13.5px; line-height: 1.55;
                     color: var(--text-secondary);
                     background: linear-gradient(120deg, var(--bg-accent), transparent 70%); }
    .es-gruss + .es-kopf { padding-top: 10px; }
    .es-kopf       { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
                     background: linear-gradient(120deg, var(--bg-accent), transparent 70%);
                     border-bottom: 0.5px solid var(--border); }
    .es-kopf-text  { flex: 1; min-width: 0; }
    .es-titel      { font-size: 15px; font-weight: 500; }
    .es-sub        { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
    .es-aus        { flex-shrink: 0; }
    /* Ring aus zwei Farben — kein Bild, keine Bibliothek. Die Aussparung
       in der Mitte ist ein zweiter Kreis in der Flächenfarbe. */
    .es-ring       { flex: none; width: 54px; height: 54px; border-radius: 50%;
                     display: grid; place-items: center; position: relative;
                     background: conic-gradient(var(--fill-accent) var(--es-p,0%), var(--border) 0); }
    .es-ring::after{ content: ""; position: absolute; inset: 5px; border-radius: 50%;
                     background: var(--surface-2); }
    .es-ring b     { position: relative; z-index: 1; font-size: 13px; font-weight: 500;
                     color: var(--text-accent); font-variant-numeric: tabular-nums; }
    .es-liste      { display: flex; flex-direction: column; }
    .es-z          { display: flex; align-items: center; gap: 11px; padding: 10px 16px;
                     border-bottom: 0.5px solid var(--border); font-size: 13px; }
    .es-z:last-child { border-bottom: none; }
    .es-z-fertig   { opacity: .55; }
    .es-z-fertig .es-z-titel { text-decoration: line-through; }
    .es-tick       { flex: none; width: 20px; height: 20px; border-radius: 50%;
                     border: 1.5px solid var(--border-strong); display: grid; place-items: center;
                     font-size: 12px; color: transparent; }
    .es-z-fertig .es-tick { background: var(--text-success); border-color: var(--text-success);
                     color: #fff; }
    .es-z-text     { flex: 1; min-width: 0; }
    .es-z-titel    { font-weight: 500; }
    .es-z-sub      { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
    /* Der Weg steht klein und grau daneben — er ist Auskunft, nicht
       Aufforderung. Auf schmalen Bildschirmen fällt er weg, damit
       Titel und Knopf nebeneinander bleiben. */
    .es-weg        { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
    @media (max-width: 720px) { .es-weg { display: none; } }
    .es-hin        { flex-shrink: 0; }
    /* Alles erledigt — nur im Fenster zu sehen (Hilfe → Erste Schritte),
       auf dem Dashboard verschwindet die Karte in diesem Zustand. Grün
       statt blau: Der Kopf berichtet dann einen Zustand und fordert
       nichts mehr. */
    .es-kopf-fertig { background: linear-gradient(120deg, var(--bg-success), transparent 70%); }
    .es-ring-fertig { background: conic-gradient(var(--text-success) var(--es-p,0%), var(--border) 0); }
    .es-ring-fertig b { color: var(--text-success); }
    /* Im Fenster trägt die Karte schon den Rahmen des Modals — ein
       zweiter Schatten darin sähe wie eine Karte in einer Karte aus. */
    #es-modal-body .es-karte { box-shadow: none; border-radius: 0; }
    #es-modal-body { padding: 0; }

    .db-reihe      { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
    @media (max-width: 900px) { .db-reihe { grid-template-columns: minmax(0,1fr); } }
    .db-karte      { background: var(--surface-2); border-radius: 14px; overflow: hidden;
                     box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
                     transition: box-shadow .12s ease; }
    .db-karte:hover { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.09); }
    .db-kopf       { display: flex; align-items: center; justify-content: space-between;
                     padding: 10px 14px; border-bottom: 0.5px solid var(--border); }
    .db-titel      { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
    .db-titel i    { font-size: 16px; color: var(--text-secondary); }
    .db-mehr       { font-size: 12px; color: var(--text-accent); cursor: pointer; }
    .db-z          { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
                     border-bottom: 0.5px solid var(--border); font-size: 13px; }
    .db-z:last-child { border-bottom: none; }
    .db-z[role=button] { cursor: pointer; }
    .db-z[role=button]:hover { background: var(--surface-1); }
    .db-z-haupt    { flex: 1; min-width: 0; }
    .db-z-haupt b  { font-weight: 500; }
    .db-z-sub      { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .db-pill       { font-size: 11px; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
                     background: var(--surface-1); color: var(--text-secondary); }
    .db-zahl       { font-size: 13px; font-weight: 500; min-width: 26px; text-align: right; }
    .db-eur        { font-family: var(--font-mono); font-size: 12px; }
    .db-leer       { padding: 14px; font-size: 12px; color: var(--text-muted); }
    .db-links      { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .db-link       { font-size: 12px; border: 0.5px solid var(--border-strong); border-radius: 20px;
                     padding: 5px 12px; color: var(--text-secondary); cursor: pointer;
                     display: inline-flex; align-items: center; gap: 5px; }
    .db-link:hover { background: var(--surface-1); }
    .db-cta        { display: flex; align-items: center; justify-content: center; gap: 6px;
                     margin: 12px 14px; height: 36px; border-radius: var(--radius);
                     background: var(--fill-accent); color: #fff; font-size: 13px; cursor: pointer; }
    .db-cta:hover  { background: var(--fill-accent-hover); }
    /* Labor-Webseite steht fest an erster Stelle im Schnellzugriff. */
    .db-link.fest  { border-color: var(--border-accent); color: var(--text-accent); background: var(--bg-accent); }
    /* Kachel „Aus dem Labor" (Blog) */
    .db-blog       { display: flex; gap: 13px; padding: 14px 15px; align-items: flex-start; cursor: pointer; }
    .db-blog:hover { background: var(--surface-1); }
    .db-blog-icon  { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-accent);
                     display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .db-blog-icon i { font-size: 20px; color: var(--text-accent); }
    .db-blog-titel { font-size: 13px; font-weight: 500; }
    .db-blog-hinweis { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
    .db-neu        { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px;
                     border-radius: 20px; background: var(--bg-accent); color: var(--text-accent);
                     margin-left: 7px; vertical-align: 1px; }
    /* Tagesspruch in der Kopfleiste, zwischen Begrüßung und Wetter
       (Wunsch Chris, 12.08.2026). Wechselt täglich.
       Die Drehung sitzt am inneren <span>, nicht am Kasten: Ein
       gedrehter Flex-Abschnitt zerrt an der Zeilenhöhe der Nachbarn,
       ein gedrehtes Inline-Element nicht. */
    .db-spruch     { flex: 1; min-width: 180px; text-align: center; padding: 0 8px; }
    .db-spruch span { display: inline-block; transform: rotate(-2.5deg);
                      font-family: 'Kalam', 'Segoe Script', cursive;
                      font-size: 17px; line-height: 1.4; color: var(--text-accent); }
    /* Urheber bei einem Zitat mit Namen: kleiner, in gedeckter Farbe. */
    .db-spruch .db-spruch-autor { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
    /* Schmaler Bildschirm: Der Spruch rückt unter Begrüßung und Wetter,
       statt sich zwischen ihnen zu quetschen. flex-basis:100% erzwingt
       im umbrechenden Flex-Kasten die eigene Zeile. */
    @media (max-width: 760px) {
      .db-spruch      { flex-basis: 100%; order: 3; padding-top: 4px; }
      .db-spruch span { font-size: 16px; }
    }

    .ib-sub-nav          { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    /* Gleiche Pillengroesse wie die Untertabs in Optionen, Logistik und
       Ablage (6/14 px bei 13 px) — Inbox war als einziger Bereich eine
       Nummer kleiner. */
    .ib-sub-btn          { padding: 6px 14px; font-size: 13px; cursor: pointer;
                           border: 0.5px solid var(--border-strong); background: var(--surface-2);
                           color: var(--text-secondary); border-radius: 20px;
                           display: inline-flex; align-items: center; font-family: inherit; }
    .ib-sub-btn:hover    { background: var(--surface-1); }
    .ib-sub-btn.active   { background: var(--surface-1); color: var(--text-primary);
                           border-color: var(--text-muted); font-weight: 500; }
    .ib-pane             { display: none; }
    .ib-pane.active      { display: block; }
    /* Inbox: Untertab-Leiste (mit Suchfeld), Filterzeile und Spaltenüberschriften
       bleiben beim Scrollen stehen (22.10.2026, Wunsch Chris). Scrollbereich ist
       .card-tab-inner mit 20 px Innenabstand oben — deshalb dieselbe Technik wie bei den
       Optionen (top:-20px, padding-top:20px, margin-top:-20px). Die beiden Höhen
       für die Staffelung misst inbox.js (ibStickyMessen) in --ib-nav-h/--ib-top-h.
       ⚠ Kein overflow auf den Tabellen oder ihren Hüllen: Das schaltet sticky ab. */
    #view-inbox .ib-sub-nav { position: sticky; top: -20px; z-index: 6; background: var(--surface-0);
                              padding-top: 20px; margin-top: -20px; align-items: center; }
    #view-inbox .ib-pane .card-tab-top { position: sticky; top: calc(var(--ib-nav-h, 56px) - 20px); z-index: 5;
                              background: var(--surface-1); margin-bottom: 0; padding: 2px 0 12px;
                              box-sizing: border-box; min-height: 48px; }
    #view-inbox .ib-pane thead th { position: sticky; z-index: 4;
                              top: calc(var(--ib-nav-h, 56px) + var(--ib-top-h, 40px) - 20px); }
    /* Suchmodus (inbox.js, ibSucheAnwenden): Mit Suchtext stehen die Untertabs MIT Treffern
       als Blöcke untereinander, alle anderen fehlen — auch der zuletzt geöffnete, wenn er
       keine Treffer hat. Ohne Suchtext gilt wieder nur .ib-pane.active. */
    #view-inbox.ib-suche-an .ib-pane { display: none; }
    #view-inbox.ib-suche-an .ib-pane.ib-hat-treffer { display: block; margin-bottom: 14px; }
    #view-inbox .ib-pane { scroll-margin-top: calc(var(--ib-nav-h, 56px) - 20px); }
    #view-inbox .ib-block-treffer { font-size: 13px; color: var(--text-muted); font-weight: 400; }
    #view-inbox.ib-suche-an .ib-sub-btn.ib-ohne-treffer { opacity: .5; cursor: default; }
    /* Trefferzahl am Reiter bei aktiver Suche (inbox.js, ibSucheAnwenden). */
    #view-inbox .ib-treffer { margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 10px; line-height: 16px;
                              font-weight: 500; background: var(--bg-accent); color: var(--text-accent); }
    #view-inbox .oo-tab { overflow: visible; }
    #view-inbox #ib-logistik-liste > div { overflow: visible !important; }
    /* Provision (provision.js): Praxis-Chips im Empfänger-Fenster, Stillgelegt-Marke */
    /* Empfängerfarbe: Name als helle Pille (Variante A, Chris 13.10.2026) — gleiche Bauart
       wie die Praxis-Pillen (.px-pille): Punkt, Rand und Tönung in der Farbe, Schrift dunkel. */
    .prov-pille          { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; box-sizing: border-box;
                           vertical-align: middle; white-space: nowrap; border-radius: 999px; padding: 2px 12px 2px 9px;
                           font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-primary);
                           border: 1px solid var(--c, var(--border-strong));
                           background: color-mix(in srgb, var(--c, #888) 14%, var(--surface-2)); }
    .prov-pille-punkt    { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #888); flex: none; }
    .prov-pille-name     { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    /* Schalter netto/brutto im Gutschrift-Entwurf (provision-gutschrift.js) */
    .prov-schalter       { display: inline-flex; max-width: 220px; border: 0.5px solid var(--border-strong); border-radius: 8px; overflow: hidden; vertical-align: middle; }
    .prov-schalter button { border: 0; background: var(--surface-2); color: var(--text-primary); padding: 6px 16px; font-size: 13px; cursor: pointer; }
    .prov-schalter button + button { border-left: 0.5px solid var(--border-strong); }
    .prov-schalter button.on { background: var(--fill-accent); color: #fff; }
    .prov-farbwahl       { display: flex; gap: 8px; flex-wrap: wrap; }
    .prov-farbpunkt      { width: 24px; height: 24px; border-radius: 50%; background: var(--c); cursor: pointer; display: inline-block; }
    .prov-farbpunkt.sel  { outline: 2px solid var(--text-primary); outline-offset: 2px; }
    .prov-kasten table   { width: 100%; }
    .prov-kasten th, .prov-kasten td { padding: 7px 10px; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
    .prov-kasten tr.prov-sub td { background: var(--surface-0); color: var(--text-secondary); font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
    .prov-tag            { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--surface-1); color: var(--text-muted); white-space: nowrap; }
    .prov-tag-ok         { background: var(--bg-success); color: var(--text-success); }
    .prov-tag-bereit     { background: var(--bg-accent); color: var(--text-accent); }
    .prov-tag-storno     { background: var(--bg-danger); color: var(--text-danger); }
    .prov-kasten tr.prov-frei td { background: color-mix(in srgb, var(--fill-accent) 9%, var(--surface-2)); }
    .prov-kasten tr.prov-sec td { font-size: 11px; color: var(--text-muted); padding: 3px 10px 3px 38px; border-bottom: none; }
    .prov-kasten tr.prov-neu input { width: 100%; font-size: 12px; padding: 2px 6px; box-sizing: border-box; }
    .prov-kasten tr.prov-neu input.r { text-align: right; }
    .prov-satz           { width: 56px; text-align: right; padding: 2px 6px; font-size: 13px; }
    .chip-prov           { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-accent); color: var(--text-accent); border-radius: 6px; padding: 3px 8px; font-size: 12px; }
    .tag-inaktiv         { font-size: 11px; font-weight: 400; color: var(--text-muted); background: var(--surface-1); border-radius: 6px; padding: 1px 6px; }
    .entity-card         { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .entity-card:hover   { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    .entity-card-main    { padding: 14px 16px; display: flex; align-items: flex-start; gap: 14px; }
    .entity-avatar       { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
    .entity-info         { flex: 1; min-width: 0; }
    .entity-name         { font-size: 14px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tech-standard-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 20px;
                            background: var(--bg-accent); color: var(--text-accent); font-size: 10.5px; font-weight: 600; }
    .tech-standard-badge i { font-size: 11px; }
    .entity-meta         { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; }
    .entity-meta span    { display: flex; align-items: center; gap: 3px; }
    .entity-actions      { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
    /* Standard-Kennzeichen der Versandkonten: steht an derselben Stelle
       wie der Knopf „Als Standard" bei den übrigen Konten — gefüllter
       Stern = ist es, leerer Stern = wird es auf Klick. Vorher gab es
       den Stern NUR bei den Nicht-Standard-Konten; er sah aus wie eine
       Markierung, war aber ein Knopf, und wanderte beim Umschalten
       (gemeldet von Chris, 10.08.2026). */
    .mk-std              { display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
                           border-radius:6px; font-size:12px; font-weight:500; white-space:nowrap;
                           background:var(--bg-accent); color:var(--text-accent);
                           border:0.5px solid var(--text-accent); }
    .entity-card-extra   { border-top: 0.5px solid var(--border); padding: 10px 16px; background: var(--surface-1); display: flex; flex-wrap: wrap; gap: 6px; }
    .za-tag              { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 12px; background: var(--surface-2); border: 0.5px solid var(--border); color: var(--text-secondary); }

    .ph-inline-hist       { display: none; border-top: 0.5px solid var(--border); padding: 4px 16px 12px; }
    .ph-inline-hist.open  { display: block; }
    .ph-hist-table        { width: 100%; border-collapse: collapse; font-size: 12px; }
    .ph-hist-table th     { text-align: left; font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 6px 6px 4px; }
    .ph-hist-table td     { padding: 6px; border-top: 0.5px solid var(--border); }
    .ph-hist-row          { cursor: pointer; }
    .ph-hist-row:hover td { background: var(--bg-accent); }
    .ph-hist-row-match td { background: var(--bg-accent); font-weight: 500; }
    .ph-ov                { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 150; }
    .ph-modal             { background: var(--surface-2); border-radius: 12px; border: 0.5px solid var(--border); width: 520px; max-width: 92%; max-height: 80vh; display: flex; flex-direction: column; }
    .ph-modal-head        { padding: 14px 18px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .ph-modal-head h3     { font-size: 14px; font-weight: 500; }
    .ph-modal-body        { padding: 8px 18px 16px; overflow-y: auto; }
    /* Badge „schon mehrfach behandelt" — steht direkt neben dem
       Patientennamen (Tabelle und Detailansicht). Pillenform, bewusst
       etwas größer als eine reine Zahl, damit man es als anklickbar
       erkennt. Erscheint erst ab zwei Behandlungen (patienten.js). */
    .ph-badge             { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500;
                            padding: 3px 10px; border-radius: 20px; background: #EAF3DE; color: #27500A;
                            line-height: 1.35; cursor: pointer; white-space: nowrap; margin-left: 8px;
                            vertical-align: 1px; transition: background .12s ease; }
    .ph-badge:hover       { background: #C0DD97; }
    .ph-badge i           { font-size: 14px; }
    .auftraege-badge     { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; background: var(--bg-accent); color: var(--text-accent); border: 0.5px solid var(--border-accent); }
    .id-pill             { font-family: var(--font-mono); font-size: 10px; background: var(--fill-accent); color: #fff; padding: 2px 7px; border-radius: 4px; font-weight: 600; }

    /* ============================================================
       MODAL
       ============================================================ */
    .modal-bg        { display: flex; align-items: flex-start; justify-content: center; padding: 30px 20px; background: rgba(0,0,0,.45); position: fixed; inset: 0; z-index: 100; overflow-y: auto; overflow-anchor: none; }
    .modal-bg.hidden { display: none; }

    /* Der Detailbereich als rechts angedockte Leiste über dem Beleg-
       Fenster (bmAuftragOeffnen() in abrechnung.js) — dieselbe Optik/
       Breite wie das Detail im Aufträge-Tab (.detail Basisregel oben),
       nur fest rechts angepinnt statt in der Tabellenzeile, und mit
       Rutsch-Übergang beim ersten Öffnen (Festlegung Chris, 14.09.2026:
       "von rechts kommt der Auftrag, der von der rechten Seite
       reinrutscht — genau so wie bei Auftrag"). Das Element bleibt an
       seinem Platz im DOM — es bekommt nur diese Klasse; die Startposition
       fürs Reinrutschen setzt bmAuftragOeffnen() per Inline-Style.

       ⚠ KEINE eigene Abdunklung (Festlegung Chris, 14.09.2026: "das
       Rechnungsfenster ist abgedunkelt, das soll nicht sein"). Ein
       vorheriger Anlauf nutzte hier denselben riesigen box-shadow-Trick
       wie im zentrierten Auftrag-Modal (#modal) — der legt sich aber
       über ALLES, was hinter der Leiste liegt, also auch über das
       Beleg-Fenster daneben, das ja gleichzeitig sichtbar bleiben soll.
       Nur noch ein schmaler Schlagschatten an der linken Kante hebt die
       Leiste vom Beleg-Fenster ab; für den Rest des Bildschirms sorgt
       ohnehin schon .modal-bg (Beleg-Fenster) für die Abdunklung.

       z-index bewusst 100, nicht höher: gleichauf mit .modal-bg. Bei
       Gleichstand entscheidet die Reihenfolge im Dokument — #detail
       steht nach dem Beleg-Fenster (liegt also darüber), aber vor dem
       Auftrag-Modal #modal (liegt also darunter). Genau so soll es
       sein: "Bearbeiten" öffnet das Auftragsfenster über allem. */
    /* ⚠ KEIN height:100vh (Bug, Chris 14.09.2026: "das Detailfenster
       muss so bleiben wie es hineingekommen ist und nicht plötzlich
       größer springen") — die Höhe stand vorher fest auf volle
       Bildschirmhöhe, dadurch wuchs die Leiste beim Umhängen von
       .abr-content (natürliche Inhaltshöhe) sichtbar auf. Jetzt nur
       noch max-height als Sicherheitsnetz gegen besonders lange
       Aufträge; die eigentliche Höhe bleibt wie beim Andocken die
       natürliche Inhaltshöhe (.detail-Basisregel, overflow-y:auto
       greift nur, wenn der Inhalt wirklich über max-height hinausragt). */
    .detail.bm-auftrag-slide {
      position: fixed; top: 0; right: 0; margin: 0;
      width: 720px; max-width: calc(100vw - 40px); max-height: 100vh;
      z-index: 100; border-radius: 0; border: none; border-left: 0.5px solid var(--border);
      box-shadow: -8px 0 24px rgba(0,0,0,.18);
      transition: transform .25s ease;
    }
    /* Rechnungsfenster bleibt unverändert, rückt aber auf breiten
       Schirmen etwas nach links, damit es sich mit der rechts
       angedockten Auftrag-Leiste (720 px) nicht überlappt. Unter
       1280 px bleibt es zentriert — dort ist ohnehin kein Platz für
       beides nebeneinander, das Auftrag-Panel liegt dann einfach
       sichtbar darüber (wie zuvor beim schwebenden Fenster). */
    @media (min-width: 1280px) and (pointer: fine) {
      #beleg-modal-ov.bm-auftrag-offen { padding-right: 760px; }
    }
    /* Freies Fenster: verschieb-/größenveränderbar, OHNE Abdunklung.
       Ring + Schatten (Variante 4) heben es klar vom Hintergrund ab.
       Geometrie/Position setzt winmgr.js inline; die Größenänderung
       läuft über eigene, unsichtbare Griffe an allen Rändern/Ecken
       (winmgr.js, .win-rsz) statt über das alte CSS resize:both (das
       nur die Ecke unten rechts bot). */
    .win-frei {
      box-shadow: 0 0 0 1px var(--border-strong), 0 16px 44px rgba(0,0,0,.26) !important;
      border: none !important;
      border-radius: 12px;
    }
    /* Resize-Griffe: unsichtbare Trefferzonen an den Fensterrändern.
       position:fixed wird von winmgr.js gesetzt + fortlaufend platziert. */
    .win-rsz { background: transparent; touch-action: none; }
    /* Durchsichtige Schicht über ALLEM, solange ein Fenster gezogen oder in der Größe geändert wird
       (winmgr.js, winSchildAn): fängt die Maus auch über PDF-Rahmen ab, sonst geht das Loslassen verloren. */
    .win-schild { position: fixed; inset: 0; z-index: 2147483000; background: transparent; }
    body.win-bewegt, body.win-bewegt * { user-select: none !important; -webkit-user-select: none !important; }
    /* Freie Fenster scrollen als Ganzes, wenn der Inhalt bei kleinem
       Fenster nicht mehr passt (ihr Kopf bleibt per sticky oben). */
    .detail.win-frei, .modal.win-frei, .beleg-modal-box.win-frei { overflow: auto; }
    /* Beleg-Positionsbereich: Mindesthöhe (kollabiert sonst bei kurzem
       Fenster auf 0 -> Positionen unsichtbar/unscrollbar) und ein
       SICHTBARER Scrollbalken (die Basis-CSS blendet ihn aus). */
    .beleg-modal-box.win-frei .bm-pos-area { min-height: 120px; scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; }
    /* WICHTIG: sobald ::-webkit-scrollbar definiert ist, zeichnet der
       Browser die Standard-Scrollbar nicht mehr — Daumen + Track müssen
       daher explizit gestylt werden, sonst bleibt sie unsichtbar. */
    .beleg-modal-box.win-frei .bm-pos-area::-webkit-scrollbar { display: block; width: 12px; }
    .beleg-modal-box.win-frei .bm-pos-area::-webkit-scrollbar-track { background: transparent; }
    .beleg-modal-box.win-frei .bm-pos-area::-webkit-scrollbar-thumb {
      background: var(--text-muted); border-radius: 6px;
      border: 3px solid transparent; background-clip: content-box;
    }
    /* Schließen-X im Beleg-Kopf oben rechts fixieren, damit es beim
       Umbruch der Kopf-Buttons nicht mit nach unten rutscht. .bm-mh ist
       (per Sticky) positioniert und dient als Bezug. Rechts Platz
       freihalten, damit Titel/Buttons nicht unter das X laufen. */
    .beleg-modal-box.win-frei > .bm-mh { padding-right: 42px; }
    /* Die zweite Leiste bekommt DASSELBE rechte Polster (Festlegung
       Chris, 18.08.2026: "aligne den Speichern-Knopf mit dem oberen
       Knopf rechts"). Ohne das endete sie bei 14 px, die Leiste
       darüber wegen des freigehaltenen X-Platzes aber bei 42 px —
       "Speichern" stand damit 28 px weiter rechts als "Vorschau"
       darüber. Wer das Polster oben ändert, ändert es hier mit. */
    .beleg-modal-box.win-frei > .bm-mh2 { padding-right: 42px; }
    .beleg-modal-box.win-frei .bm-close-x { position: absolute; top: 7px; right: 12px; z-index: 3; }
    /* Modal-Backdrop als freies Fenster: keine Abdunklung. WICHTIG:
       position:static UND z-index:auto, damit der Backdrop KEINEN eigenen
       Stapel-Kontext bildet — sonst säße die .modal-Box darin gefangen und
       könnte per z-index nicht mit den anderen Fenstern (Body-Ebene)
       stapeln (Bring-to-front / Vordergrund).
       z-index:auto ist zwingend, weil manche Backdrops (z.B.
       #beleg-modal-ov) FLEX-ITEMS von #app-root (.app = display:flex) sind:
       ein Flex-Item mit z-index bildet einen Stapel-Kontext AUCH bei
       position:static. Ohne das Zurücksetzen läge der Backdrop bei z-index
       100 und verdeckte body-Ebene-Fenster wie den Positionen-Picker.
       Der Backdrop wird so zum 0-hohen Flow-Element (die .modal-Box ist
       ohnehin position:fixed, out of flow). Die Box selbst macht winmgr
       per Inline-Styles zum Fenster. */
    .modal-bg.win-frei-bg, .ev-overlay.win-frei-bg { position: static; z-index: auto; background: transparent; overflow: visible; padding: 0; }
    /* Kopf des freien Fensters (bis einschließlich erstem Trennstrich)
       bleibt beim Scrollen oben stehen — sonst scrollt das Schließen-
       Kreuz weg. Deckender Hintergrund, damit Inhalt nicht durchscheint. */
    .win-frei > .dh, .win-frei > .mh, .win-frei > .bm-mh, .win-frei > .ev-modal-head {
      position: sticky; top: 0; z-index: 2; background: var(--surface-2);
    }
    /* Dasselbe für die ANGEDOCKTE Detailansicht (Wunsch Chris,
       17.08.2026): Titel, Rechnungs-Zeichen und die Knopfleiste
       (Bearbeiten · Beleg anlegen · Auftragszettel · MDR) bleiben beim
       Scrollen im Auftrag stehen — bisher galt das nur, wenn das Detail
       als freies Fenster lief. `.detail` scrollt selbst (overflow-y:auto),
       deshalb klebt der Kopf an dessen Oberkante.
       z-index 3, nicht 2: Im Detailkörper stehen sticky Tabellenköpfe
       (z-index 1) und Leisten (bis 2) — der Kopf muss über allen liegen. */
    .detail > .dh {
      position: sticky; top: 0; z-index: 3; background: var(--surface-2);
    }
    /* Beleg-Fenster: wird es zu schmal, brechen die Kopf-Buttons in eine
       zweite Zeile um, statt zu überlappen (rechte Gruppe rutscht unter
       den Titel; innerhalb der Gruppe dürfen die Buttons ebenfalls
       umbrechen). */
    .win-frei > .mh, .win-frei > .bm-mh, .win-frei > .ev-modal-head { flex-wrap: wrap; }
    /* Im freien Fenster dürfen die Knöpfe dieser Leiste umbrechen.
       flex-shrink/white-space halten dabei die Beschriftungen
       zusammen — ein Knopf, der auf "Als Jumbo / speichern" umbricht,
       ist schlechter lesbar als einer in der zweiten Zeile.
       (Speichern sitzt seit 18.08.2026 in der Leiste darunter, ganz
       rechts — siehe #bm-btn-save in .bm-mh2.) */
    .win-frei > .bm-mh > .bm-mh-r { flex-wrap: wrap; justify-content: flex-end; }
    .win-frei > .bm-mh > .bm-mh-r > .btn { flex-shrink: 0; white-space: nowrap; }
    .win-frei > .bm-mh > .bm-mh-l { min-width: 0; overflow: hidden; }
    /* Fußzeile (Speichern/Abbrechen) bleibt beim Scrollen im stark
       verkleinerten Fenster unten sichtbar — Gegenstück zum sticky Kopf.
       Deckender Hintergrund + der eigene border-top trennen sie klar vom
       darunter durchscrollenden Inhalt. */
    .win-frei > .mf {
      position: sticky; bottom: 0; z-index: 2; background: var(--surface-2);
    }
    .modal           { background: var(--surface-2); border-radius: 12px; border: 0.5px solid var(--border); width: 580px; max-width: 100%; display: flex; flex-direction: column; }
    .mh              { padding: 14px 18px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .mh h2           { font-size: 14px; font-weight: 500; }
    .mb              { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: calc(90vh - 110px); }
    .mf              { padding: 10px 18px; border-top: 0.5px solid var(--border); display: flex; justify-content: flex-end; gap: 6px; flex-shrink: 0; }

    /* Formular-Layouts */
    .fr              { display: flex; flex-direction: column; gap: 4px; }
    /* Badge + Zeitstempel unter dem Produktstatus-Feld im Auftrag-Modal
       (befüllt von modalStatusFeldFuellen(), modals.js) */
    .f-status-info   { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 2px; }
    .f-status-ts     { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
    /* Das Badge dient hier nur der Anzeige — der ▾-Pfeil aus
       .status-badge::after würde Klickbarkeit suggerieren. */
    .f-status-info .status-badge::after { content: none; }
    .fr label        { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .xml-check-icon        { position: absolute; right: 8px; font-size: 16px; line-height: 1; pointer-events: none; display: none; }
    .xml-check-icon.xml-check-ok,
    .xml-check-icon.xml-check-bad { display: flex; }
    .xml-check-icon.xml-check-ok   { color: var(--text-success); }
    .xml-check-icon.xml-check-bad { color: var(--text-danger); }
    .fg              { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    /* Eingangs-/Lieferdatum im Auftrag-Modal: zwei schmale Felder (150 px)
       statt je der halben Breite, rechts daneben die Fertigung (Umschalter,
       auf Höhe der Eingabefelder). Bewusst umbrechend statt festem
       Raster: Ist das Modal zu schmal (Tablet), rutscht der Umschalter in
       eine eigene Zeile, statt aus dem Kasten zu ragen. Am Telefon siehe
       responsive.css (dort wieder ein Raster mit zwei gleichen Spalten). */
    .fg-termine      { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; }
    .fg-termine > .fr { flex: 0 0 106px; min-width: 0; }
    .fg-termine #f-fertigung .gt-opt { padding-left: 6px; padding-right: 6px; }
    .fg-termine input[type="date"] { box-sizing: border-box; width: 100%; min-width: 0; padding-left: 8px; padding-right: 4px; font-size: 13px; }
    /* Fertigung: nur so breit wie die beiden Seiten (Breite nach Inhalt),
       damit sie neben das Lieferdatum in dieselbe Zeile passt; reicht der
       Platz nicht, rutscht sie eine Zeile nach unten (flex-wrap). */
    .fg-termine > #fr-fertigung, .fg-termine > #fr-scanart { flex: 0 1 auto; min-width: 0; }
    .fg-termine #f-scanart .gt-opt { padding-left: 6px; padding-right: 6px; }
    /* Die zwei Häkchen (Digital Scan / Fertigstellung) stehen nebeneinander am Ende
       der Terminzeile und füllen den Rest; Mitte auf Höhe der Eingabefelder. */
    .fg-flags        { flex: 1 1 auto; display: flex; gap: 8px; justify-content: flex-end; align-items: center; height: 34px; }
    .fg-flags .omwst-check { padding-bottom: 0; font-size: 13px; gap: 4px; }
    /* Hinweis zum Lieferdatum (Paketautomatik / Fristwarnung, modals.js): EIGENE Zeile unter
       der ganzen Terminzeile, Schriftgröße wie .tv-sub. Stand früher in der 106-px-Spalte des
       Lieferdatums und schob das Feld nach oben (die Zeile richtet unten aus: 7 px ohne Text,
       bis 78 px mit Text). Ohne Text kein Platzbedarf. Farbe: Akzent, die Fristwarnung setzt
       sie in modals.js auf var(--text-warning). */
    .fg-termine > .fg-hinweis { flex: 1 0 100%; font-size: 12px; line-height: 1.4; color: var(--text-accent); margin-top: 2px; }
    .fg-termine > .fg-hinweis:empty { display: none; }
    .fg-addr         { display: grid; grid-template-columns: 1.8fr 0.75fr 1.2fr; gap: 10px; }
    /* Auftragsart · Kiefer · Material: Kiefer ist schmal (OK/UK/OK+UK), Auftragsart
       bekommt den Platz (Chris, 10.11.2026). Nur diese Zeile nutzt .fg-3. */
    .fg-3            { display: grid; grid-template-columns: minmax(0, 2.2fr) 96px minmax(0, 1.2fr); gap: 12px; }
    .row-id-anrede-titel { display: grid; grid-template-columns: 140px 140px 100px 1fr; gap: 10px; align-items: end; }
    .praxisname-row  { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
    .sect-label      { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 6px; border-bottom: 0.5px solid var(--border); }
    .omwst-check     { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; white-space: nowrap; cursor: pointer; font-size: 13px; color: var(--text-secondary); }
    .omwst-check input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--fill-accent); }
    /* Fertigung im Auftrag-Modal: Der Umschalter trägt die Designvorlage des
       m/w-Schalters (.gender-toggle / .gt-opt) UNVERÄNDERT — Höhe, Rand,
       Rundung, Schrift, Blau der aktiven Seite. Die Regeln des m/w-Schalters
       bleiben unangetastet; hier stehen nur Ergänzungen, die ausschließlich
       für #f-fertigung gelten: Die Seiten tragen lange Texte ("Sofort
       fertigstellen"), der m/w-Schalter nur einen Buchstaben — deshalb
       knapper Innenabstand, kein Umbruch, Text ausdrücklich mittig und eine
       Breite nach Inhalt statt der ganzen Spalte. */
    #f-fertigung, #f-scanart { width: max-content; align-self: flex-start; }
    #f-scanart.scan-fehlt { border-color: var(--border-danger); }
    #f-fertigung .gt-opt, #f-scanart .gt-opt { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
                           text-align: center; padding: 0 10px; white-space: nowrap; }

    /* Praxis-Block im Auftrag-Modal */
    .praxis-block       { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
    .praxis-block-label { font-size: 10px; font-weight: 600; color: var(--text-accent); text-transform: uppercase; letter-spacing: .06em; }

    /* Postadresse */
    .postaddr-wrap         { border-radius: var(--radius); overflow: hidden; border: 1.5px solid #378ADD; }
    .postaddr-header       { padding: 8px 14px; background: #1a5fa8; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .postaddr-header-left  { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
    .pa-btn                { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); color: #fff; font-weight: 500; }
    .pa-btn:hover          { background: rgba(255,255,255,.28); }
    .postaddr-textarea     { width: 100%; min-height: 110px; padding: 14px 16px; background: #EBF4FF; color: #0a2540; font-size: 13px; line-height: 1.9; font-family: var(--font-sans); border: none; outline: none; resize: vertical; display: block; height: auto; }
    .postaddr-textarea:focus { background: #dbeeff; }

    /* ID-Felder */
    .id-field-row { display: flex; align-items: center; gap: 8px; }
    .id-badge     { background: var(--fill-accent); color: #fff; border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; font-family: var(--font-mono); }

    /* Zahnarzt-Liste */
    .za-edit-row       { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); }
    .za-edit-row input { flex: 1; background: transparent; border: none; outline: none; height: auto; padding: 0; }

    /* ============================================================
       VITA-FARBWÄHLER
       ============================================================ */
    .vita-section        { display: flex; flex-direction: column; gap: 6px; }
    .vita-previews       { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--surface-1); border-radius: var(--radius); border: 0.5px solid var(--border); }
    .vita-preview-slot   { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
    .vita-preview-circle { width: 38px; height: 38px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
    .vita-preview-label  { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
    .vita-preview-name   { font-size: 12px; font-weight: 500; min-height: 16px; }
    .vita-divider        { width: 1px; height: 52px; background: var(--border); flex-shrink: 0; }
    .tooth-preview-slot  { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1.4; }
    .vita-grid           { display: flex; flex-wrap: wrap; gap: 4px; }
    .vita-btn            { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; font-size: 12px; font-weight: 500; position: relative; background: none; }
    .vita-btn .vita-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
    .vita-btn:hover      { border-color: var(--border-strong); }
    .vita-btn.sel1       { box-shadow: 0 0 0 2.5px var(--border-accent); }
    .vita-btn.sel2       { box-shadow: 0 0 0 2.5px #7F77DD; }
    .vita-badge-v        { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; border: 1.5px solid var(--surface-2); }
    .vb1                 { background: var(--fill-accent); }
    .vb2                 { background: #7F77DD; }

    /* ============================================================
       FDI-ZAHNSCHEMA
       ============================================================ */
    .zs-colors      { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
    .zs-color-btn   { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px;
                      font-size: 10px; border-radius: 16px; background: var(--surface-2);
                      color: var(--text-primary); border: 0.5px solid var(--border-strong); cursor: pointer; }
    .zs-color-btn.active { border: 2px solid var(--fill-accent); }
    .zs-dot         { width: 9px; height: 9px; border-radius: 50%; border: 0.5px solid var(--border-strong); flex-shrink: 0; }
    /* Trennt die Befund-Knöpfe (färben den Zahn) von den Markierungen
       (stehen als Kürzel an der Ziffer) — siehe ZS_MARKER in data.js. */
    .zs-marker-sep  { width: 1px; height: 20px; background: var(--border-strong); align-self: center; margin: 0 4px; }
    .zs-chart-frame { overflow: hidden; background: var(--surface-2); border-radius: 8px; border: 0.5px solid var(--border); }
    /* --- Implantat-Sonderfelder (je Implantatkrone eine Zeile) --- */
    .zs-imp-wrap    { margin-top: 10px; border: 0.5px solid var(--border); border-radius: 8px;
                      padding: 10px 12px; background: var(--surface-1); }
    .zs-imp-title   { font-size: 11px; font-weight: 600; color: var(--text-muted);
                      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
    /* Je Implantatkrone eine Zeile — alle 5 Felder nebeneinander. */
    .zs-imp-row     { padding: 9px 0; border-top: 0.5px solid var(--border); }
    .zs-imp-row:first-of-type { padding-top: 0; border-top: none; }
    /* Durchmesser-Spalte 88px -> 104px (18.09.2026, Chris: Zahl mit zwei
       Kommastellen wurde im Feld abgeschnitten) — Platz für ⌀-Symbol,
       eine Zahl wie „12,50" und die Einheit „mm" nebeneinander. */
    .zs-imp-grid    { display: grid; grid-template-columns: 38px 1fr 1.3fr 104px 1fr; gap: 7px; align-items: end; }
    .zs-imp-zcol    { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .zs-imp-znum    { height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .zs-imp-fld     { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .zs-imp-fld > span, .zs-imp-zcol > span { font-size: 11px; color: var(--text-muted);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .zs-imp-fld select, .zs-imp-fld input { width: 100%; min-width: 0; height: 32px; font-size: 12px; padding: 0 7px; }
    .zs-imp-diam    { display: flex; align-items: center; gap: 4px; height: 32px; background: var(--surface-2);
                      border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 0 8px; min-width: 0; }
    .zs-imp-diam .zs-imp-sym  { font-size: 13px; color: var(--text-muted); }
    .zs-imp-diam input { border: none; height: auto; padding: 0; text-align: right; background: transparent; }
    .zs-imp-diam input:focus { border: none; }
    .zs-imp-diam .zs-imp-unit { font-size: 11px; color: var(--text-muted); }
    /* Read-only-Anzeige der Implantat-Angaben (Detail/Vorschau) —
       Variante "Gold-Akzentleiste": dezente Box, goldene Kante links in
       der Implantatkronen-Farbe (#e0a52c). */
    .detail-imp       { margin-top: 8px; background: var(--surface-1);
                        border: 0.5px solid var(--border); border-left: 3px solid #e0a52c;
                        border-radius: 0 var(--radius) var(--radius) 0; padding: 9px 12px; }
    .detail-imp-title { font-size: 11px; font-weight: 600; color: var(--text-secondary);
                        text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
                        display: flex; align-items: center; gap: 5px; }
    .detail-imp-title .ti { font-size: 14px; color: #e0a52c; }
    .detail-imp-row   { font-size: 12px; color: var(--text-primary); padding: 2px 0; }
    .detail-imp-zahn  { font-weight: 500; }
    .detail-imp-sep   { color: var(--text-muted); }
    /* ============================================================
       POSITIONEN-MODUL (Auftrag ↔ Positionen)
       ============================================================ */
    .pos-section       { display: flex; flex-direction: column; gap: 4px; }
    .pos-row           { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
                         border-radius: var(--radius); background: var(--surface-2);
                         border: 0.5px solid var(--border); font-size: 13px; }
    .pos-row-label     { flex: 1; }
    .pos-row-price     { color: var(--text-secondary); }
    .pos-row-del       { border: none; background: none; cursor: pointer; color: var(--text-muted);
                         display: flex; padding: 2px; border-radius: var(--radius); }
    .pos-row-del:hover { color: var(--text-danger); }

    .pos-badge         { font-size: 10px; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }
    .pos-badge-jumbo   { background: var(--bg-accent); color: var(--text-accent); }
    .pos-badge-einzeln { background: var(--surface-2); border: 0.5px solid var(--border-strong);
                         color: var(--text-secondary); }

    /* ── Jumbo als aufklappbare Gruppe + Mengen (17.08.2026) ───────────
       Ein Jumbo ist eine Kopfzeile; darunter stehen eingerückt seine
       Positionen mit Code, Bezeichnung, MENGE (änderbar), Einzelpreis
       (nur lesen — der bleibt dem Beleg vorbehalten) und Zeilenbetrag.
       Eingeklappt startet die Gruppe; der Zustand hängt an der _pid
       (posGruppeOffen in positionen.js). */
    .pos-row-gruppe    { cursor: pointer; }
    .pos-row-gruppe:hover { border-color: var(--border-strong); }
    .pos-gruppe-pfeil  { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
    .pos-items         { margin: 0 0 2px 22px; padding-left: 12px;
                         border-left: 0.5px solid var(--border);
                         display: flex; flex-direction: column; gap: 2px; }
    /* Ein Raster, damit Menge, Einzelpreis und Betrag untereinander stehen
       — bei einem Flex-Layout wandern sie mit der Länge der Bezeichnung. */
    /* Mengenspalte 68 statt 58 px: Seit dem 18.08.2026 stehen im Feld die
       Pfeile des Systems (siehe .pos-menge) — die brauchen rund 16 px,
       sonst klebt die Zahl daran. */
    .pos-item-row      { display: grid; grid-template-columns: 56px minmax(0,1fr) 68px 68px 68px 22px;
                         gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
    /* Praxisfarbe als PILLE in der Spalte Praxis / Arzt (Variante B,
       Chris 08.10.2026) — ersetzt den schmalen Balken am Zeilenanfang
       (Variante A vom 18.08.2026). Gezeichnet von praxisPilleHtml()
       (data.js): Farbpunkt, Praxis-ID, Kurzname; Rand und Punkt in der
       Praxisfarbe, Fläche hell, Schrift dunkel — lesbar auch auf den
       getönten Zeilen (Eil, markiert). Lange Namen kürzen mit Auslassung,
       der Tooltip nennt ID und Namen voll.
       Die Zeilen tragen weiter .px-farbe und --px: Die Kartenform am
       Handy (responsive.css) nimmt daraus ihren Streifen am Kartenrand. */
    .px-pille       { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
                      box-sizing: border-box; vertical-align: middle; white-space: nowrap;
                      background: var(--pxh, var(--surface-1)); color: var(--pxt, var(--text-primary));
                      border: 1px solid var(--pxc, var(--border-strong)); border-radius: 999px;
                      padding: 2px 12px 2px 9px; font-size: 12px; font-weight: 500; line-height: 1.5; }
    .px-pille-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--pxc); flex: none; }
    .px-pille-id    { font-family: var(--font-mono); font-size: 11px; font-weight: 500; flex: none; }
    .px-pille-name  { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    /* Klickbare Pille in den Listen (praxisPilleHtml mit filterTab): Klick filtert nach dieser Praxis. */
    .px-pille-klick { cursor: pointer; }
    .px-pille-klick:hover, .px-pille-klick:focus-visible { box-shadow: 0 0 0 2px var(--pxc, var(--border-strong)); outline: none; }
    .px-pille-ohne  { background: var(--surface-1); color: var(--text-primary); padding-left: 12px; }
    /* DUNKELMODUS (Chris, 15.10.2026: "bei Darkmode sind Farben nur schlecht
       sichtbar"). Die Pille trägt feste DUNKLE Schrift (--pxt) auf heller
       Fläche (--pxh) — auf dem Handy hat sie seit der kompakten Karte gar
       keine Fläche mehr, dort stand dunkle Schrift auf dunklem Grund.
       Im Dunkelmodus nimmt die Pille deshalb die Praxisfarbe selbst als
       Schrift (die Pastelltöne tragen auf dunklem Grund) und eine zarte
       Tönung derselben Farbe als Fläche. Die Kalender-Gruppenzeile
       (km-grp-px) folgt derselben Regel. */
    @media (prefers-color-scheme: dark) {
      .px-pille       { background: color-mix(in srgb, var(--pxc, #888) 22%, transparent);
                        color: var(--pxc, var(--text-primary)); }
      .px-pille-ohne  { background: var(--surface-1); color: var(--text-primary); }
    }
    .pos-item-code     { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
    .pos-item-bez      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-item-ep       { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .pos-item-betrag   { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
    /* Mengenfeld: schmal, rechtsbündig, MIT den Pfeilen des Systems zum
       Hoch- und Runterzählen in Einerschritten (Chris, 18.08.2026).
       ⚠ Hier standen bis dahin drei Regeln, die genau diese Pfeile
       abschalteten — mit der Begründung „wie die Zahlenfelder im
       Beleg-Fenster". Die Begründung war falsch: Das Mengenfeld der
       Rechnung (.bm-ci, type=number) zeigt seine Pfeile. Es war also
       nicht angeglichen, sondern als einziges beschnitten. */
    .pos-menge         { height: 26px; width: 100%; text-align: right; font-size: 12px;
                         padding: 0 4px 0 6px; flex-shrink: 0; }
    .pos-row-einzeln .pos-menge { width: 68px; }
    .pos-menge-fest    { min-width: 58px; text-align: right; color: var(--text-secondary);
                         font-variant-numeric: tabular-nums; }
    .pos-row-einzeln .pos-item-ep { min-width: 68px; }
    .pos-row-einzeln .pos-row-price { min-width: 68px; text-align: right;
                                      font-variant-numeric: tabular-nums; }

    .pos-add-btn       { height: 32px; padding: 0 12px; border-radius: var(--radius);
                         border: 0.5px dashed var(--border-accent); background: none;
                         cursor: pointer; font-size: 12px; color: var(--text-accent);
                         display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
    .pos-add-btn:hover { background: var(--bg-accent); }

    .pos-sum-row       { margin-top: 10px; padding-top: 8px; border-top: 0.5px solid var(--border);
                         display: flex; justify-content: space-between; font-size: 13px; }

    .pos-notiz-block   { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
    /* "Notiz direkt in Orderform" unter der Summe (positionen.js,
       orderformNotizBlockHtml) — gleiche Abstände wie der Notiz-Block. */
    .pos-of-block      { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
    /* Ganzer Kasten blau, mit kräftigem Balken links (Festlegung Chris,
       15.10.2026): Das Feld kommt aufs Werkstattpapier und soll mehr ins
       Auge fallen als die Auftragsnotiz darunter. Blau, weil Türkis schon
       dem Kasten "Info an den Zahnarzt" gehört. Farben aus den Variablen,
       damit der Dunkelmodus mitgeht. */
    .pos-of-block      { background: var(--bg-accent); border: 1.5px solid var(--border-accent);
                         border-left: 6px solid var(--text-accent); border-radius: 0 10px 10px 0;
                         padding: 10px 12px; }
    .pos-of-block .pos-notiz-lbl  { color: var(--text-accent); font-size: 11px;
                                    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
    .pos-of-block .pos-notiz-lbl > i { font-size: 15px; }
    .pos-of-block .pos-notiz-hint { color: var(--text-accent); }
    .pos-of-block .pos-notiz-ta   { border-color: var(--border-accent); }
    /* Zeitmarke "wer/wann geschrieben" rechts in der Überschriftszeile (positionen.js, ofZeitMarkeHtml).
       Der lange Hinweis zum Feld steht stattdessen im Tooltip des Info-Symbols (Festlegung Chris,
       09.11.2026). Nur im Labor; leer, solange das Feld keinen Text hat. */
    .pos-notiz-info    { font-size: 14px; color: var(--text-accent); cursor: help; text-transform: none; }
    .of-zeit           { margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end;
                         text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px;
                         line-height: 1.35; text-align: right; color: var(--text-accent); }
    .of-zeit:empty     { display: none; }
    .of-zeit b         { font-weight: 500; }
    .of-zeit .of-zeit-akt  { opacity: .85; }
    .of-zeit .of-zeit-leer { opacity: .7; }
    .pos-notiz-lbl     { font-size: 10px; color: var(--text-muted); font-weight: 500;
                         text-transform: uppercase; letter-spacing: .04em; }
    .pos-notiz-ta      { width: 100%; font-size: 12px; font-family: var(--font-sans);
                         padding: 8px 10px; border: 0.5px solid var(--border-strong);
                         border-radius: var(--radius); resize: vertical; background: var(--surface-2); }
    .pos-notiz-ta:focus { outline: none; border-color: var(--border-accent); }
    /* Gesperrte / nur-lesbare Auftragsnotiz: dezent gedämpft (nicht
       aufdringlich), signalisiert "keine Eingabe möglich". */
    .pos-notiz-ro      { background: var(--surface-1); color: var(--text-secondary); cursor: default; }
    /* Mindesthöhen so, dass immer mehrere Zeilen sichtbar sind — 44 px
       reichten gerade für eine Zeile plus Innenabstand, der Inhalt war
       damit kaum lesbar (Chris, 11.08.2026). */
    .pos-notiz-ro-view { white-space: pre-wrap; min-height: 76px; }
    /* Ergänzungs-Eingabe: mindestens so hoch, dass der Platzhalter
       "Ergänzung hinzufügen" gut lesbar ist; Auto-Grow darf nicht darunter. */
    .pos-notiz-append  { min-height: 64px; }
    /* Beschreibbare Auftragsnotiz: harter Boden von ZWEI Zeilen —
       darunter nie, ganz gleich ob Auto-Grow rechnet oder jemand den
       Anfasser nach oben zieht (Festlegung Chris, 12.08.2026). Als
       einziges Notizfeld hatte sie gar keinen Boden; ein Auto-Grow-Aufruf
       vor dem Layout drückte sie auf 2 px. Die Zeilenhöhe steht hier
       ausdrücklich, damit die Rechnung 2 × 16 px + 18 px Polster und
       Rahmen = 50 px nicht am "normal" der Schrift hängt. */
    .pos-notiz-edit    { line-height: 16px; min-height: 50px; }
    .pos-notiz-hint    { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
    .pos-notiz-leer    { color: var(--text-muted); }

    /* Praxisnotiz einklappbar (nur Labor, positionen.js praxisNotizEinklappbarHtml):
       zu = eine Zeile mit Vorschau, auf = Kopf bleibt, Vorschau verschwindet. */
    .pos-praxis        { border: 0.5px solid var(--border-strong); border-radius: var(--radius);
                         background: var(--surface-2); }
    .pos-praxis-kopf   { display: flex; align-items: center; gap: 6px; padding: 7px 10px;
                         cursor: pointer; list-style: none; font-size: 12px; color: var(--text-secondary); }
    .pos-praxis-kopf::-webkit-details-marker { display: none; }
    .pos-praxis-titel  { font-weight: 500; flex-shrink: 0; }
    .pos-praxis-vorschau { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-praxis-pfeil  { flex-shrink: 0; transition: transform .15s; color: var(--text-muted); }
    .pos-praxis[open] > .pos-praxis-kopf .pos-praxis-vorschau { visibility: hidden; }
    .pos-praxis[open] > .pos-praxis-kopf .pos-praxis-pfeil { transform: rotate(180deg); }
    .pos-praxis-body   { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 5px; }

    .ppk-tabs          { display: flex; gap: 4px; padding: 10px 16px 0 16px; }
    .ppk-tab           { padding: 5px 12px; font-size: 12px; border-radius: var(--radius);
                         border: 0.5px solid transparent; background: none;
                         color: var(--text-secondary); cursor: pointer; }
    .ppk-tab.active    { border-color: var(--border-accent); background: var(--bg-accent);
                         color: var(--text-accent); font-weight: 500; }

    .ppk-list          { flex: 1; overflow-y: auto; padding: 0 16px 16px 16px;
                         display: flex; flex-direction: column; gap: 5px; max-height: 340px; }
    .ppk-item          { padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2);
                         border: 0.5px solid var(--border-strong); font-size: 13px;
                         display: flex; align-items: center; gap: 8px; }
    .ppk-item.ppk-jrow { cursor: pointer; }
    .ppk-item.ppk-jrow:hover { background: var(--bg-accent); }
    .ppk-item-cb       { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
    .ppk-item-body     { flex: 1; min-width: 0; }
    .ppk-item-price    { color: var(--text-muted); font-size: 11px; flex-shrink: 0; white-space: nowrap; }
    .ppk-empty         { font-size: 12px; color: var(--text-muted); padding: 6px 0; }
    .ppk-crumb         { display: flex; align-items: center; gap: 6px; padding: 4px 16px 8px 16px;
                         font-size: 12px; color: var(--text-accent); cursor: pointer; }
    .ppk-crumb.hidden  { display: none; }
    .ppk-crumb-jinfo   { margin-left: auto; color: var(--text-muted); font-size: 11px; }
    .ppk-footer        { display: flex; align-items: center; justify-content: space-between;
                         padding: 10px 16px; border-top: 0.5px solid var(--border); }
    .ppk-footer.hidden { display: none; }
    .ppk-footer span   { font-size: 12px; color: var(--text-secondary); }
    /* Positionen-Picker als freies Fenster: die Liste soll mit der
       Fensterhöhe MITWACHSEN. Der 340px-Deckel (für die zentrierte
       Variante) verhinderte das — beim Größerziehen blieb die Liste kurz
       und der freie Platz sammelte sich unten (Footer wirkte größer).
       Im Fenster deckelt die Liste nicht mehr; nur sie scrollt (flex:1),
       Kopf/Tabs/Suche/Footer bleiben fix (Modal overflow:hidden statt
       auto — höhere Spezifität als die gemeinsame .modal.win-frei-Regel). */
    #position-picker-modal .modal.win-frei { overflow: hidden; }
    #position-picker-modal .modal.win-frei .ppk-list { max-height: none; min-height: 0; }
    .ppk-divider       { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 0; }
    .ppk-divider::before, .ppk-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .ppk-divider span  { font-size: 10px; color: var(--text-muted); text-transform: uppercase;
                         letter-spacing: .04em; white-space: nowrap; }


    /* ============================================================
       EINGEBETTETE VIEWS: JUMBOS + POSITIONEN
       (vormals eigenständige iframe-Dokumente Jumbos.html /
       Positionen.html, jetzt direkt eingebettet und CSS-gescoped)
       ============================================================ */
#view-jumbos {font-family:var(--font-sans);font-size:13px;background:#f0f0f0;color:var(--text-primary)}
#view-jumbos .mod {display:flex;flex-direction:column;background:var(--surface-2);border-radius:8px;border:0.5px solid var(--border-strong);overflow:hidden;margin:8px;height:calc(100vh - 16px);min-height:420px}
#view-jumbos .topbar {display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:0.5px solid var(--border);background:var(--surface-1)}
#view-jumbos .mod-title {font-size:15px;font-weight:bold}
#view-jumbos .io-bar {display:flex;align-items:center;gap:5px;padding:7px 12px;border-bottom:0.5px solid var(--border);background:var(--surface-1)}
#view-jumbos .io-spacer {flex:1}
#view-jumbos .io-btn {height:27px;padding:0 10px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px}
#view-jumbos .io-btn:hover {background:var(--surface-1)}
#view-jumbos .io-btn.import {color:var(--text-accent);border-color:var(--border-accent)}
#view-jumbos .io-btn.xls {color:#166534;border-color:#166534}
#view-jumbos .io-sep {width:1px;height:16px;background:var(--border-strong);margin:0 3px}
#view-jumbos .toolbar {display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:5px;padding:7px 12px;border-bottom:0.5px solid var(--border);background:var(--surface-1);overflow-x:auto}
#view-jumbos .tb-btn {height:27px;padding:0 10px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;flex-shrink:0;white-space:nowrap}
#view-jumbos .tb-btn:hover:not(:disabled) {background:var(--surface-1)}
#view-jumbos .tb-btn:disabled {opacity:.35;cursor:default}
#view-jumbos .tb-btn.add {color:var(--text-accent);border-color:var(--border-accent)}
#view-jumbos .tb-btn.add:hover {background:var(--bg-accent)}
#view-jumbos .tb-btn.save {color:#166534;border-color:#166534}
#view-jumbos .tb-btn.save:hover:not(:disabled) {background:var(--bg-success)}
#view-jumbos .tb-btn.del {color:var(--text-danger);border-color:var(--text-danger)}
#view-jumbos .tb-btn.del:hover:not(:disabled) {background:var(--bg-danger)}
#view-jumbos .pos-move-group {display:flex;align-items:center;gap:2px;background:#E6F1FB;border:0.5px solid var(--border-accent);border-radius:var(--radius);padding:2px;transition:opacity .15s;flex-shrink:0;white-space:nowrap}
#view-jumbos .pos-move-group.inactive {opacity:.5}
#view-jumbos .pos-move-lbl {font-size:10px;color:var(--text-accent);padding:0 4px;font-weight:bold;white-space:nowrap}
#view-jumbos .pos-move-btn {width:27px;height:25px;padding:0;font-size:13px;border:none;border-radius:var(--radius);background:var(--surface-2);color:var(--text-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--border-accent);cursor:pointer}
#view-jumbos .pos-move-btn:hover:not(:disabled) {background:var(--bg-accent)}
#view-jumbos .pos-move-btn:disabled {cursor:default;color:var(--text-muted)}
#view-jumbos .tb-sep {width:1px;height:19px;background:var(--border-strong);margin:0 3px;flex-shrink:0}
#view-jumbos .tb-spacer {flex:1}
#view-jumbos .body {display:flex;flex:1;min-height:0}
#view-jumbos .left {border-right:1px solid #ddd;display:flex;flex-direction:column;flex:0 0 270px;min-height:0}
#view-jumbos .search-wrap {position:relative;padding:7px}
#view-jumbos .search-wrap input {width:100%;height:29px;font-size:12px;padding:0 7px 0 26px;border:0.5px solid var(--border-strong);border-radius:var(--radius)}
#view-jumbos .s-icon {position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:12px;pointer-events:none}
#view-jumbos .list-wrap {flex:1;overflow-y:auto;min-height:0}
#view-jumbos .lg-head {padding:4px 9px;font-size:11px;font-weight:bold;color:var(--text-muted);background:var(--surface-1);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}
#view-jumbos .lr {display:flex;gap:7px;padding:5px 9px;cursor:pointer;border-bottom:0.5px solid var(--border);align-items:baseline}
#view-jumbos .lr:hover {background:var(--surface-0)}
#view-jumbos .lr.sel {background:var(--bg-accent)}
#view-jumbos .lb {color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
#view-jumbos .lr.sel .lb {color:var(--text-accent)}
#view-jumbos .left-foot {padding:5px 9px;border-top:0.5px solid var(--border);background:var(--surface-1);display:flex;justify-content:space-between;align-items:center}
#view-jumbos .cnt {font-size:11px;color:var(--text-muted)}
#view-jumbos .src {font-size:10px;color:var(--text-muted)}
#view-jumbos .right {display:flex;flex-direction:column;flex:1;min-height:0}
#view-jumbos .dbody {flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#view-jumbos .stammdaten-fixed {padding:12px 14px 0 14px;flex:0 0 auto}
#view-jumbos .pos-scroll {flex:1;overflow-y:auto;padding:0 14px 14px 14px;min-height:0}
#view-jumbos .sh {font-size:11px;font-weight:bold;color:var(--text-muted);letter-spacing:.04em;margin-bottom:9px;margin-top:14px;padding-bottom:3px;border-bottom:0.5px solid var(--border);text-transform:uppercase}
#view-jumbos .sh:first-child {margin-top:0}
#view-jumbos .sh-row {display:flex;align-items:center;justify-content:space-between;margin-top:14px;margin-bottom:9px;padding-bottom:3px;border-bottom:0.5px solid var(--border)}
#view-jumbos .sh-row .sh {margin:0;padding:0;border:none}
#view-jumbos .head-grid {display:grid;grid-template-columns:90px 1fr 90px 1fr;gap:6px 9px;align-items:center}
#view-jumbos .head-grid label {font-size:11px;color:var(--text-secondary);text-align:right}
#view-jumbos .head-grid input, #view-jumbos .head-grid select {height:27px;font-size:12px;padding:0 7px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);width:100%}
#view-jumbos .fg {display:grid;grid-template-columns:100px 1fr;gap:5px 9px;align-items:center;margin-bottom:3px}
#view-jumbos .fg label {font-size:11px;color:var(--text-secondary);text-align:right}
#view-jumbos .fg input, #view-jumbos .fg select, #view-jumbos .fg textarea {height:26px;font-size:12px;padding:0 7px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);width:100%}
#view-jumbos .fg textarea {height:46px;padding:5px 7px;resize:vertical}
#view-jumbos .chk {display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text-secondary);white-space:nowrap;cursor:pointer}
#view-jumbos .chk input[type=checkbox] {width:13px;height:13px;cursor:pointer}
#view-jumbos table.postab {width:100%;border-collapse:collapse;font-size:12px}
#view-jumbos table.postab th {text-align:left;font-size:11px;color:var(--text-muted);font-weight:bold;text-transform:uppercase;letter-spacing:.03em;padding:5px 6px;border-bottom:0.5px solid var(--border);background:var(--surface-1);white-space:nowrap;position:sticky;top:0;z-index:1}
#view-jumbos table.postab td {padding:4px 6px;border-bottom:0.5px solid var(--border);vertical-align:middle}
#view-jumbos table.postab td.rownum, #view-jumbos table.postab th.rownum {width:18px;font-size:10px;color:var(--text-muted);text-align:right;padding-right:2px;font-variant-numeric:tabular-nums}
#view-jumbos table.postab tr:hover td {background:#f7f9fb}
#view-jumbos table.postab tr.pos-sel td {background:var(--bg-accent)}
#view-jumbos table.postab td.num {text-align:right;font-variant-numeric:tabular-nums}
#view-jumbos table.postab th.price-col, #view-jumbos table.postab td.price-col {width:58px;text-align:center!important;white-space:nowrap}
#view-jumbos .art-badge {display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius);font-size:11px;font-weight:bold}
#view-jumbos .art-badge.k {background:#EAF3DE;color:#27500A}
#view-jumbos .art-badge.p {background:#E6F1FB;color:#0C447C}
#view-jumbos .art-badge.m {background:#FAEEDA;color:#633806}
#view-jumbos .art-badge.l {background:#EEEDFE;color:#3C3489}
#view-jumbos .postab select {height:24px;font-size:11px;padding:0 4px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);width:100%}
#view-jumbos .postab input.menge {height:24px;font-size:12px;padding:0 4px;border:0.5px solid var(--border-strong);border-radius:var(--radius);width:48px;text-align:right;font-variant-numeric:tabular-nums}
#view-jumbos .row-del {cursor:pointer;color:var(--text-danger);font-size:13px;opacity:.55}
#view-jumbos .row-del:hover {opacity:1}
#view-jumbos .add-pos-btn {margin-top:8px;height:27px;padding:0 10px;font-size:12px;cursor:pointer;border:1px dashed #bbb;border-radius:var(--radius);background:var(--surface-2);color:var(--text-accent);display:inline-flex;align-items:center;gap:5px}
#view-jumbos .add-pos-btn:hover {background:var(--bg-accent);border-style:solid}
#view-jumbos .empty-d {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:8px;padding:40px}
#view-jumbos .empty-pos {padding:14px 6px;color:var(--text-muted);font-size:12px;text-align:center}
/* Global (unscoped) modal rules: jmOpenPicker() and other dynamically-created
   overlays are appended directly to document.body (not inside #view-jumbos /
   #view-positionen), so the #view-jumbos-/#view-positionen-scoped rules below
   never matched them and the picker rendered unstyled. These global rules
   restore the intended look for any body-level modal; the more specific
   #view-jumbos / #view-positionen rules further below still take precedence
   for anything actually nested inside those views. */
.modal-ov {position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}
.modal {background:var(--surface-2);border-radius:8px;border:0.5px solid var(--border-strong);padding:16px;width:520px;max-width:92%;max-height:80vh;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.modal h3 {font-size:14px;font-weight:bold;margin-bottom:10px}
.modal-tabs {display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.modal-tab {padding:4px 12px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary)}
.modal-tab[data-active="true"][data-tab="kasse"] {background:#EAF3DE;color:#27500A;border-color:#3B6D11;font-weight:bold}
.modal-tab[data-active="true"][data-tab="privat"] {background:#E6F1FB;color:#0C447C;border-color:#185FA5;font-weight:bold}
.modal-tab[data-active="true"][data-tab="material"] {background:#FAEEDA;color:#633806;border-color:#854F0B;font-weight:bold}
.modal-tab[data-active="true"][data-tab="legierung"] {background:#EEEDFE;color:#3C3489;border-color:#534AB7;font-weight:bold}
.modal-search {height:29px;font-size:12px;padding:0 9px;border:0.5px solid var(--border-strong);border-radius:var(--radius);width:100%;margin-bottom:8px}
.modal-list {overflow-y:auto;flex:1;border:0.5px solid var(--border);border-radius:var(--radius);max-height:320px}
.modal-row {display:flex;gap:8px;padding:4px 9px;cursor:pointer;border-bottom:0.5px solid var(--border);align-items:baseline;min-height:0}
.modal-row:hover {background:var(--bg-accent)}
.modal-row .mc {font-size:11px;color:var(--text-muted);min-width:55px}
.modal-row .mb {flex:1;color:var(--text-primary);padding:0;display:inline;overflow-y:visible;max-height:none;gap:0}
.modal-btns {display:flex;gap:7px;justify-content:flex-end;margin-top:10px}
.modal-btns .tb-btn {height:29px}
.modal p {font-size:12px;color:var(--text-secondary);line-height:1.6;margin-bottom:10px}
.modal pre {font-size:11px;background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--radius);padding:7px;overflow-x:auto;margin-bottom:10px;line-height:1.5}

#view-jumbos .modal-ov {position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}
#view-jumbos .modal {background:var(--surface-2);border-radius:8px;border:0.5px solid var(--border-strong);padding:16px;width:520px;max-width:92%;max-height:80vh;display:flex;flex-direction:column}
#view-jumbos .modal h3 {font-size:14px;font-weight:bold;margin-bottom:10px}
#view-jumbos .modal-tabs {display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
#view-jumbos .modal-tab {padding:4px 12px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary)}
#view-jumbos .modal-tab[data-active="true"][data-tab="kasse"] {background:#EAF3DE;color:#27500A;border-color:#3B6D11;font-weight:bold}
#view-jumbos .modal-tab[data-active="true"][data-tab="privat"] {background:#E6F1FB;color:#0C447C;border-color:#185FA5;font-weight:bold}
#view-jumbos .modal-tab[data-active="true"][data-tab="material"] {background:#FAEEDA;color:#633806;border-color:#854F0B;font-weight:bold}
#view-jumbos .modal-tab[data-active="true"][data-tab="legierung"] {background:#EEEDFE;color:#3C3489;border-color:#534AB7;font-weight:bold}
#view-jumbos .modal-search {height:29px;font-size:12px;padding:0 9px;border:0.5px solid var(--border-strong);border-radius:var(--radius);width:100%;margin-bottom:8px}
#view-jumbos .modal-list {overflow-y:auto;flex:1;border:0.5px solid var(--border);border-radius:var(--radius);max-height:320px}
#view-jumbos .modal-row {display:flex;gap:8px;padding:4px 9px;cursor:pointer;border-bottom:0.5px solid var(--border);align-items:baseline;min-height:0}
#view-jumbos .modal-row:hover {background:var(--bg-accent)}
#view-jumbos .modal-row .mc {font-size:11px;color:var(--text-muted);min-width:55px}
#view-jumbos .modal-row .mb {flex:1;color:var(--text-primary);padding:0;display:inline;overflow-y:visible;max-height:none;gap:0}
#view-jumbos .modal-btns {display:flex;gap:7px;justify-content:flex-end;margin-top:10px}
#view-jumbos .modal-btns .tb-btn {height:29px}

#view-positionen {font-family:var(--font-sans);font-size:13px;background:#f0f0f0;color:var(--text-primary)}
#view-positionen .mod {display:flex;flex-direction:column;background:var(--surface-2);border-radius:8px;border:0.5px solid var(--border-strong);overflow:hidden;margin:8px}
#view-positionen .topbar {display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:0.5px solid var(--border);background:var(--surface-1)}
#view-positionen .mod-title {font-size:15px;font-weight:bold}
#view-positionen .cat-bar {display:flex;align-items:center;gap:5px;padding:7px 12px;border-bottom:0.5px solid var(--border);background:var(--surface-1)}
#view-positionen .cat-btn {padding:4px 12px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;outline:none;-webkit-appearance:none}
#view-positionen .cat-btn:focus {outline:none}
#view-positionen .cat-btn:hover {background:var(--surface-1)}
#view-positionen .cat-btn[data-active="true"][data-cat="kasse"] {background:#EAF3DE!important;color:#27500A!important;font-weight:bold!important;border-color:#3B6D11!important}
#view-positionen .cat-btn[data-active="true"][data-cat="privat"] {background:#E6F1FB!important;color:#0C447C!important;font-weight:bold!important;border-color:#185FA5!important}
#view-positionen .cat-btn[data-active="true"][data-cat="material"] {background:#FAEEDA!important;color:#633806!important;font-weight:bold!important;border-color:#854F0B!important}
#view-positionen .cat-btn[data-active="true"][data-cat="legierung"] {background:#EEEDFE!important;color:#3C3489!important;font-weight:bold!important;border-color:#534AB7!important}
#view-positionen .dot {display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
#view-positionen .cat-spacer {flex:1}
#view-positionen .io-btn {padding:4px 10px;font-size:12px;cursor:pointer;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px}
#view-positionen .io-btn:hover {background:var(--surface-1)}
#view-positionen .io-btn.import {color:var(--text-accent);border-color:var(--border-accent)}
#view-positionen .io-sep {width:1px;height:16px;background:var(--border-strong);margin:0 3px}
#view-positionen .body {display:grid;grid-template-columns:270px 1fr;min-height:520px}
#view-positionen .body.pk-pdf-modus {grid-template-columns:170px 1fr minmax(560px, 46vw)}
#view-positionen .left {border-right:1px solid #ddd;display:flex;flex-direction:column}
#pk-pdf-panel {border-left:1px solid #ddd;display:none;flex-direction:column;background:var(--surface-0);height:84vh;min-height:600px}
#view-positionen .body.pk-pdf-modus #pk-pdf-panel {display:flex}
.pk-pdf-hint {padding:8px 12px;font-size:11px;color:var(--text-muted);border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0}
#pk-pdf-panel iframe {flex:1;width:100%;min-height:0;border:none;background:#fff;overflow:auto}
#view-positionen .search-wrap {position:relative;padding:7px}
#view-positionen .search-wrap input {width:100%;height:29px;font-size:12px;padding:0 7px 0 26px;border:0.5px solid var(--border-strong);border-radius:var(--radius)}
#view-positionen .s-icon {position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:12px;pointer-events:none}
#view-positionen .list-wrap {flex:1;overflow-y:auto;max-height:440px}
#view-positionen .lg-head {padding:4px 9px;font-size:11px;font-weight:bold;color:var(--text-muted);background:var(--surface-1);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}
#view-positionen .lr {display:flex;gap:7px;padding:5px 9px;cursor:pointer;border-bottom:0.5px solid var(--border);align-items:baseline}
#view-positionen .lr:hover {background:var(--surface-0)}
#view-positionen .lr.sel {background:var(--bg-accent)}
#view-positionen .lc {font-size:11px;color:var(--text-muted);min-width:48px;flex-shrink:0;font-variant-numeric:tabular-nums}
#view-positionen .lb {color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
#view-positionen .lr.sel .lc, #view-positionen .lr.sel .lb {color:var(--text-accent)}
#view-positionen .left-foot {padding:5px 9px;border-top:0.5px solid var(--border);background:var(--surface-1)}
#view-positionen .cnt {font-size:11px;color:var(--text-muted)}
#view-positionen .right {display:flex;flex-direction:column}
#view-positionen .dtb {display:flex;gap:5px;align-items:center;padding:7px 12px;border-bottom:0.5px solid var(--border);background:var(--surface-1)}
#view-positionen .db {height:27px;padding:0 9px;font-size:12px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
#view-positionen .db:hover:not(:disabled) {background:var(--surface-1)}
#view-positionen .db:disabled {opacity:.35;cursor:default}
#view-positionen .db.add {color:var(--text-accent);border-color:var(--border-accent)}
#view-positionen .db.add:hover {background:var(--bg-accent)}
#view-positionen .db.save {color:#166534;border-color:#166534}
#view-positionen .db.save:hover:not(:disabled) {background:var(--bg-success)}
#view-positionen .db.del {color:var(--text-danger);border-color:var(--text-danger)}
#view-positionen .db.del:hover:not(:disabled) {background:var(--bg-danger)}
#view-positionen .dsep {width:1px;height:19px;background:var(--border-strong);margin:0 2px}
#view-positionen .dbody {flex:1;overflow-y:auto;padding:12px 14px}
#view-positionen .sh {font-size:11px;font-weight:bold;color:var(--text-muted);letter-spacing:.04em;margin-bottom:9px;margin-top:14px;padding-bottom:3px;border-bottom:0.5px solid var(--border);text-transform:uppercase}
#view-positionen .sh:first-child {margin-top:0}
#view-positionen .fg {display:grid;grid-template-columns:100px 1fr;gap:5px 9px;align-items:center;margin-bottom:3px}
#view-positionen .fg label {font-size:11px;color:var(--text-secondary);text-align:right}
#view-positionen .fg input, #view-positionen .fg select, #view-positionen .fg textarea {height:26px;font-size:12px;padding:0 7px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);width:100%}
#view-positionen .fg textarea {height:52px;padding:5px 7px;resize:vertical}
#view-positionen .row {display:flex;gap:7px;align-items:center}
#view-positionen .chk {display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text-secondary);white-space:nowrap;cursor:pointer}
#view-positionen .chk input[type=checkbox] {width:13px;height:13px;cursor:pointer}
#view-positionen .pgrid {display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:7px}
#view-positionen .pc {display:grid;grid-template-columns:50px 1fr;gap:5px;align-items:center}
#view-positionen .pc label {font-size:11px;color:var(--text-secondary)}
#view-positionen .pc input {height:26px;font-size:12px;padding:0 7px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);text-align:right;width:100%;font-variant-numeric:tabular-nums}
#view-positionen .mblock {display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-top:2px}
#view-positionen .mfield {display:flex;flex-direction:column;gap:2px}
#view-positionen .mfield label {font-size:10px;color:var(--text-muted);font-weight:bold;letter-spacing:.03em;text-transform:uppercase}
#view-positionen .mfield input {height:26px;font-size:12px;padding:0 7px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);width:100%}
#view-positionen .ce-row {display:flex;align-items:center;gap:7px;padding:5px 0}
#view-positionen .tgl {position:relative;width:32px;height:17px;cursor:pointer;flex-shrink:0}
#view-positionen .tgl input {opacity:0;width:0;height:0;position:absolute}
#view-positionen .ttr {position:absolute;inset:0;border-radius:9px;background:var(--border-strong);transition:background .15s}
#view-positionen .tgl input:checked+.ttr {background:var(--fill-accent)}
#view-positionen .tth {position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--surface-2);transition:left .15s;pointer-events:none}
#view-positionen .tgl input:checked~.tth {left:17px}
#view-positionen .empty-d {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:8px;padding:40px}
#view-positionen .modal-ov {position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}
#view-positionen .modal {background:var(--surface-2);border-radius:8px;border:0.5px solid var(--border-strong);padding:20px;max-width:380px;width:90%}
#view-positionen .modal h3 {font-size:14px;font-weight:bold;margin-bottom:6px}
#view-positionen .modal p {font-size:12px;color:var(--text-secondary);line-height:1.6;margin-bottom:10px}
#view-positionen .modal pre {font-size:11px;background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--radius);padding:7px;overflow-x:auto;margin-bottom:10px;line-height:1.5}
#view-positionen .modal-btns {display:flex;gap:7px;justify-content:flex-end}

/* ============================================================
   KALENDER-TAB (Gantt-Zeitleiste)
   ============================================================ */
#view-kalender .km-inner {flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
#view-kalender .km-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#view-kalender .km-sep {width:1px;height:20px;background:var(--border)}
#view-kalender .km-filter-btn, #km-mobil {display:none}
#view-kalender .km-btn {height:30px;padding:0 12px;font-size:12px;border-radius:var(--radius);border:0.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-primary);cursor:pointer}
#view-kalender .km-btn:hover {background:var(--surface-1)}
#view-kalender .km-btn.active {background:var(--fill-accent);border-color:var(--fill-accent);color:#fff}
#view-kalender .km-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#view-kalender .km-stat {background:var(--surface-1);border-radius:var(--radius);padding:9px 12px}
#view-kalender .km-stat .kv {font-size:20px;font-weight:500;line-height:1.2}
#view-kalender .km-stat .kl {font-size:11px;color:var(--text-secondary);margin-top:2px}
#view-kalender .km-board {display:flex;flex-direction:column;flex:1;min-height:0;border:0.5px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2)}
/* 40 statt 30 px: In der Achse steht seit 11.08.2026 unter dem Datum
   der Wochentag (kalender.js). Mit 30 px würde die zweite Zeile
   abgeschnitten — overflow:hidden zeigt das nicht als Fehler an,
   sondern schneidet still ab. */
#view-kalender .km-head-wrap {flex-shrink:0;height:60px;overflow:hidden;position:relative;background:var(--surface-1);border-bottom:0.5px solid var(--border)}
/* Paket-Zeile in der Achse (Paketautomatik, 28.10.2026): unter Datum und Wochentag
   steht je Liefertag die Zahl der Aufträge, die zusammen rausgehen. Ab 2 ein Paket
   (Akzent), genau 1 ein Einzelpaket (gedämpft, mit Rand). */
#view-kalender .km-pk {position:absolute;top:38px;height:16px;border-radius:5px;font-size:10px;font-weight:500;line-height:16px;text-align:center;box-sizing:border-box;cursor:default;background:var(--bg-accent);color:var(--text-accent)}
#view-kalender .km-pk.km-pk1 {background:transparent;color:var(--text-muted);border:0.5px solid var(--border)}
/* Übersicht der Einzelpakete (Knopf "Pakete" in der Werkzeugleiste) */
#view-kalender .km-pakete {border:0.5px solid var(--border);border-radius:12px;background:var(--surface-2);padding:10px 14px;margin-bottom:10px;max-height:260px;overflow:auto}
#view-kalender .km-pk-kopf {display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:6px}
#view-kalender .km-pk-kopf .km-pk-x {margin-left:auto;cursor:pointer;color:var(--text-muted);background:none;border:none;font-size:16px}
#view-kalender .km-pk-zeile {display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:7px 0;border-top:0.5px solid var(--border);font-size:12px;color:var(--text-primary)}
#view-kalender .km-pk-zeile .km-pk-tag {min-width:74px;font-weight:500}
#view-kalender .km-pk-zeile .km-pk-was {flex:1 1 240px;color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zahl der Vorschläge am Knopf "Pakete" */
#view-kalender .km-pk-zahl {display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:8px;font-size:10.5px;font-weight:500;text-align:center;box-sizing:border-box;background:var(--fill-accent);color:var(--on-accent);margin-left:2px}
#view-kalender .km-pk-zeile.km-pk-klick {cursor:pointer}
#view-kalender .km-pk-zeile.km-pk-klick:hover {background:var(--bg-accent)}
#view-kalender .km-pk-leer {font-size:12px;color:var(--text-secondary);padding:6px 0}
#view-kalender .km-btn.km-btn-an {background:var(--bg-accent);color:var(--text-accent)}
/* Frist des gezogenen Auftrags (beim Ziehen des Lieferdatums) */
#view-kalender .km-fenster {position:absolute;top:0;height:100%;border:1.5px dashed var(--border-accent);border-radius:4px;background:color-mix(in srgb, var(--fill-accent) 8%, transparent);pointer-events:none;box-sizing:border-box;z-index:1}
#view-kalender .km-head {position:absolute;top:0;left:0;height:100%;will-change:transform}
#view-kalender .km-scroll {flex:1;min-height:0;overflow:auto}
#view-kalender .km-row {display:flex;align-items:center;height:36px;border-bottom:0.5px solid var(--border);position:relative}
#view-kalender .km-row:last-child {border-bottom:none}
#view-kalender .km-grp {font-size:12px;font-weight:500;color:var(--text-secondary);background:var(--surface-1);padding:6px 10px;width:100%;display:flex;align-items:center;gap:8px;position:relative;z-index:2;will-change:transform}
/* Gruppenzeile in der Praxisfarbe (kalender.js, praxisFarbSatz): helle Fläche, dunkle Schrift;
   die Pille davor trägt Punkt und Rand in der Praxisfarbe. Kein Balken am Rand. */
#view-kalender .km-grp.km-grp-px {background:var(--pxh);color:var(--pxt)}
/* Dunkelmodus: Praxisfarbe als Schrift, zarte Tönung als Fläche (siehe .px-pille). */
@media (prefers-color-scheme: dark) {
  #view-kalender .km-grp.km-grp-px {background:color-mix(in srgb, var(--pxc, #888) 22%, transparent);color:var(--pxc, var(--text-primary))}
}
#view-kalender .km-grp-badge {font-size:10px;font-weight:400;color:var(--text-muted);background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;padding:1px 7px}
/* Namensspalte: Breite aus kalender.js (KM_LABEL_W → --km-label-w); zwei Zeilen — Patient, darunter die
   vollständige Auftragsnummer. Die Zeile ist 36 px hoch: 12 px + 11 px bei Zeilenhöhe 1,25 passen. */
#view-kalender .km-rowlabel {width:var(--km-label-w,230px);flex-shrink:0;padding:0 10px;font-size:12px;line-height:1.25;overflow:hidden;position:relative;background:var(--surface-2);z-index:2;will-change:transform;display:flex;flex-direction:column;justify-content:center}
#view-kalender .km-rl-name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
#view-kalender .km-rl-nr {white-space:nowrap;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
#view-kalender .km-rl-nr-solo {font-family:inherit;font-size:12px;color:var(--text-primary)}
/* Markierter Auftrag (Flagge "Besonderer Fall"): Zeile lila getönt wie im Auftrags-Tab. Die Namensspalte ist undurchsichtig
   (sie bleibt beim Scrollen stehen) und bekommt die Tönung deshalb über der Spaltenfarbe. */
#view-kalender .km-row.km-markiert {background:color-mix(in srgb, #8A33C4 8%, transparent)}
#view-kalender .km-row.km-markiert .km-rowlabel {background:color-mix(in srgb, #8A33C4 8%, var(--surface-2))}
#view-kalender .km-flag {color:#8A33C4;font-size:12px;vertical-align:-1px}
#view-kalender .km-bar {position:absolute;top:6px;height:24px;border-radius:6px;cursor:pointer;display:flex;align-items:center;overflow:hidden;box-sizing:border-box}
#view-kalender .km-bar:hover {filter:brightness(0.96)}
#view-kalender .km-fill {position:absolute;top:0;left:0;bottom:0;border-radius:6px 0 0 6px;pointer-events:none}
#view-kalender .km-lbl {position:relative;z-index:1;font-size:11px;font-weight:500;white-space:nowrap;padding:0 6px;pointer-events:none}
#view-kalender .km-handle {position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;z-index:2}
#view-kalender .km-handle-left {position:absolute;top:0;left:0;width:8px;height:100%;z-index:2;cursor:ew-resize}
#view-kalender .km-handle-left:hover {background:rgba(0,0,0,.12)}
#view-kalender .km-guide {position:absolute;top:0;width:2px;background:var(--text-accent);z-index:3;pointer-events:none;display:none}
#view-kalender .km-head-guide {position:absolute;bottom:0;height:3px;background:var(--text-accent);z-index:2;pointer-events:none;display:none}
#view-kalender .km-handle:hover {background:rgba(0,0,0,.12)}
#view-kalender .km-legend {display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-secondary)}
#view-kalender .km-legend-dot {width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
#view-kalender #km-grid {flex:1;min-height:0;display:flex;flex-direction:column;border:0.5px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden;padding:10px 12px}
/* In Praxis/Techniker eingehängter Kalender: füllt den Container.
   Ausgeblendet werden nur die beiden FILTER-Karussells (Praxis,
   Techniker) — eine Praxis soll nicht nach Praxen filtern, ein
   Techniker nicht nach Technikern.

   Das ZEITRAUM-Karussell bleibt (Wunsch Chris, 11.08.2026): Ohne es
   ließ sich im Kalender der Rollen-Ansicht kein Zeitraum wählen, es
   gab nur Timeline und Gitter. Vorher blendete die Regel alle
   .month-nav aus und nahm das Karussell mit. */
#view-kalender.km-embedded {display:flex;height:100%}
#view-kalender.km-embedded #km-praxis-nav,
#view-kalender.km-embedded #km-tech-nav,
#view-kalender.km-embedded .km-sep {display:none}
#view-kalender .km-content {display:flex;gap:12px;flex:1;min-height:0}
#view-kalender .km-main {flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;min-height:0}
#view-kalender .km-sidebar {width:280px;flex-shrink:0;border:0.5px solid var(--border);border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;overflow:hidden}
#view-kalender .km-sidebar-head {padding:10px 12px;border-bottom:0.5px solid var(--border);font-weight:500;font-size:13px;flex-shrink:0}
#view-kalender .km-sidebar-list {flex:1;overflow-y:auto}
#view-kalender .km-today-row {padding:9px 12px;border-bottom:0.5px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:2px}
#view-kalender .km-today-row:hover {background:var(--bg-accent)}
#view-kalender .km-today-nr {font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
#view-kalender .km-today-praxis {font-weight:500;font-size:12.5px}
#view-kalender .km-today-patient {color:var(--text-secondary);font-size:12px}
#view-kalender .km-today-meta {display:flex;align-items:center;gap:6px;margin-top:2px}
#view-kalender .km-today-date {font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
#view-kalender .km-today-date-over {color:var(--text-danger);font-weight:500}
#view-kalender .km-today-empty {padding:16px 12px;color:var(--text-muted);font-size:12px;text-align:center}
#view-kalender .km-empty {padding:40px;text-align:center;color:var(--text-muted);font-size:13px}

/* ============================================================
   TECHNIKER-/PRAXIS-ANSICHT (techniker-view.js / praxis-view.js)
   ============================================================ */
.tv-shell {display:flex;flex-direction:column;height:100vh}
.tv-topbar {display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:0.5px solid var(--border);flex-shrink:0}
.tv-topbar-title {font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;max-width:340px;min-width:0}
.tv-topbar-title > i {flex-shrink:0}
.tv-topbar-title > span {min-width:0;white-space:normal;word-break:break-word;line-height:1.25}
.tv-topbar-right {display:flex;align-items:center;gap:10px}
.tv-subbar {display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 20px;border-bottom:0.5px solid var(--border);flex-shrink:0}
/* Konto-Menü (Passwort ändern / Abmelden) — konto-menu.js */
.konto-menu {position:relative}
.konto-btn {display:inline-flex;align-items:center;gap:7px}
.konto-ini {width:22px;height:22px;border-radius:50%;background:var(--bg-accent,#d6efe9);color:var(--text-accent,#0f766e);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.konto-name {font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konto-dropdown {position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--surface-1,#fff);border:0.5px solid var(--border,#ddd);border-radius:8px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1200}
.konto-item {display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;font-size:13px;background:none;border:none;border-radius:6px;cursor:pointer;text-align:left;color:var(--text,#222)}
.konto-item:hover {background:var(--surface-2,#f2f5f5)}
.konto-item .ti {font-size:16px;color:var(--text-muted,#777)}
.konto-item-danger {color:#a01010}
.konto-item-danger .ti {color:#a01010}
.tv-user {font-size:13px;color:var(--text-secondary)}
.tv-body {flex:1;overflow-y:auto;padding:20px;max-width:960px;margin:0 auto;width:100%}
/* Praxis-Split: tv-body wird zum Flex-Container mit fester Höhe (kein
   Seiten-Scroll), damit Liste und Detail JE FÜR SICH scrollen und der
   Detailbereich eine begrenzte Höhe bekommt (sonst wächst er endlos und
   zeigt keine eigene Scrollleiste). */
/* Obergrenze 1800 statt 1480 px (03.11.2026): Bei offenem Detail (720 px) blieben der Liste auf einem
   breiten Bildschirm nur ~700 px, die Tabelle braucht seit der Spalte "Wunschdatum" 825 px — die
   letzten Spalten (Liefertermin, Belege, Dateien) rutschten hinter eine waagerechte Scrollleiste, obwohl
   links und rechts Platz frei war. Bei 1920 px bekommt die Liste jetzt ~1020 px. */
.tv-body:has(.pv-split) {max-width:1800px;display:flex;overflow:hidden}
.tv-empty {padding:40px;text-align:center;color:var(--text-muted);font-size:13px}
.tv-sub {font-size:12px;color:var(--text-muted)}
.tv-table {background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;overflow:hidden}
.tv-head {display:grid;grid-template-columns:90px 1fr 100px 100px 100px 1fr;padding:8px 14px;font-size:12px;color:var(--text-muted);border-bottom:0.5px solid var(--border)}
.pv-table .tv-head {grid-template-columns:90px 1fr 100px 100px 130px 70px}
.tv-row {display:grid;grid-template-columns:90px 1fr 100px 100px 100px 1fr;padding:10px 14px;font-size:13px;border-bottom:0.5px solid var(--border);align-items:center}
.pv-table .tv-row {grid-template-columns:90px 1fr 100px 100px 130px 70px;cursor:pointer}
.pv-table .tv-row:hover {background:var(--surface-1)}
.tv-row:last-child {border-bottom:none}
.tv-cell-id {font-family:var(--font-mono);font-size:12px}
.tv-notiz-input {height:30px;font-size:12px;width:100%}
.tv-badge {display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:11px}
.tv-badge-grau {background:var(--surface-1);color:var(--text-secondary)}
.tv-badge-blau {background:var(--bg-accent);color:var(--text-accent)}
.tv-badge-gruen {background:var(--bg-success);color:var(--text-success)}
.tv-badge-rot {background:var(--bg-danger);color:var(--text-danger)}
/* Gelb = „da fehlt noch etwas", nicht „kaputt" — für das Merkzeichen
   „Login-Daten fehlen" in der Benutzerliste (users-tab.js). Dieselben
   Farbtöne wie der Status „Offen" in der Auftragsliste. */
.tv-badge-gelb {background:var(--bg-warning);color:var(--text-warning)}
.tv-badge-orange {background:var(--bg-warning);color:#7a5200}
/* Inline im Detail bewusst schmal (füllt nicht die ganze Spalte —
   sonst wirkt es unaufgeräumt). Als freies Fenster (.nz-fenster) und in
   der Admin-Doppelspalte (.nz-row2) wird die Begrenzung wieder aufgehoben. */
.pv-notiz-card {background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;padding:10px 11px;margin-top:12px;max-width:440px;transition:box-shadow 150ms ease-out}
.pv-notiz-title {font-size:12.5px;font-weight:500;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pv-notiz-log {font-size:13px;color:var(--text-secondary);white-space:pre-line;margin-bottom:8px}
.pv-notiz-card textarea {width:100%}
.pv-notiz-actions {display:flex;align-items:center;margin-top:6px;gap:8px}
.pv-notiz-actions .tv-sub {flex:1}
/* Titel-Buttons: Pop-out (immer sichtbar, öffnet als Fenster) + ✕
   (nur wenn das Fenster offen ist, siehe .nz-fenster unten). */
.pv-notiz-titlebtns {display:flex;align-items:center;gap:2px;flex-shrink:0}
.pv-notiz-pop, .pv-notiz-close {border:none;background:none;cursor:pointer;color:var(--text-muted);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:14px;padding:0}
.pv-notiz-pop:hover, .pv-notiz-close:hover {background:var(--surface-1);color:var(--text-primary)}
.pv-notiz-close {display:none}
.pv-notiz-card.nz-fenster .pv-notiz-close {display:flex}
.nz-attach-btn {border:0.5px solid var(--border-strong);background:var(--surface-1);border-radius:50%;width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary)}
.nz-attach-btn:hover {background:var(--surface-0)}
.nz-anhaenge {display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.nz-anhang {width:44px;height:44px;border-radius:6px;background:var(--surface-1);border:0.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.nz-anhang img {width:100%;height:100%;object-fit:cover;display:block}
.nz-anhang i {font-size:18px;color:var(--text-muted)}

/* Chat als freies Fenster (winmgr, .win-frei liefert Rahmen/Schatten):
   Kopf fix, Thread wächst, Eingabe unten. Position/Größe setzt winmgr. */
.pv-notiz-card.nz-fenster {display:flex;flex-direction:column;margin:0;max-width:none;overflow:hidden}
.pv-notiz-card.nz-fenster .nz-thread {flex:1;max-height:none;min-height:0}
.pv-notiz-card.nz-fenster .pv-notiz-title {cursor:move}

/* Kompakter Launcher: inline steht nur eine schmale Zeile (Titel · letzte
   Nachricht · Anzahl), die das verschiebbare Chat-Fenster öffnet. Der volle
   Verlauf/Eingabe erscheint erst im Fenster (.nz-fenster). Der Thread bleibt
   inline VERSTECKT im DOM, damit das Polling die Vorschau aktuell hält. */
/* Inline zeigt nur den Launcher — Karten-Chrome (Rahmen/Hintergrund/
   Polster) weg, der Launcher-Button IST das sichtbare Element. */
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) {border:none;background:none;padding:0}
.nz-launcher {display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;font:inherit;text-align:left;
              border:0.5px solid var(--border-accent, var(--border-strong));background:var(--bg-accent);
              border-radius:var(--radius);padding:9px 12px;transition:background 120ms ease-out}
.nz-launcher:hover {background:var(--surface-1);border-color:var(--text-accent)}
.nz-launcher-icon {font-size:18px;color:var(--text-accent);flex-shrink:0}
.nz-launcher-titel {font-size:13px;font-weight:500;color:var(--text-accent);flex-shrink:0}
.nz-launcher-preview {font-size:11.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.nz-launcher-preview-leer {color:var(--text-muted);font-style:italic}
.nz-launcher-count {font-size:10.5px;font-weight:500;color:var(--on-accent, #fff);background:var(--fill-accent, var(--text-accent));border-radius:20px;padding:1px 7px;min-width:16px;text-align:center;flex-shrink:0}
.nz-launcher-count:empty {display:none}
.nz-launcher-open {font-size:16px;color:var(--text-accent);flex-shrink:0}
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) > .pv-notiz-title,
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) > .nz-thread,
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) > textarea,
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) > .nz-anhaenge,
.pv-notiz-card:not(.nz-fenster):not(.nz-neu) > .pv-notiz-actions {display:none}
.pv-notiz-card.nz-fenster > .nz-launcher {display:none}
/* Ungelesenes von der Gegenseite (notizen-thread.js, nzThreadLaden): die Karte
   steht VERGRÖSSERT da — Kopf mit "N neu", "Gelesen" und "Fenster", die letzten
   Nachrichten, das Antwortfeld. Statt der Leiste (.nz-launcher). Mit Akzentrahmen,
   damit sie auffällt; "Gelesen" klappt sie wieder zur Leiste zu. */
.pv-notiz-card.nz-neu {border:1.5px solid var(--border-accent, var(--text-accent));padding:8px 10px}
.pv-notiz-card.nz-neu > .nz-launcher {display:none}
.pv-notiz-card.nz-neu .nz-thread {max-height:200px}
.nz-neu-badge {font-size:10.5px;font-weight:500;color:var(--on-accent, #fff);background:var(--fill-accent, var(--text-accent));border-radius:20px;padding:1px 7px;margin-left:6px}
.nz-neu-badge:empty {display:none}
.nz-gelesen-btn {display:none;align-items:center;gap:3px;border:0.5px solid var(--border-strong);background:var(--surface-1);cursor:pointer;color:var(--text-primary);border-radius:var(--radius);font-size:11px;height:22px;padding:0 8px}
.nz-gelesen-btn:hover {background:var(--surface-0)}
.pv-notiz-card.nz-neu .nz-gelesen-btn {display:inline-flex}

.nz-row2 {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nz-row2 .pv-notiz-card {margin-top:0;max-width:none}
.nz-thread {max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin-bottom:8px;padding-right:2px}
/* WhatsApp-Blasen: eigene Seite rechts (Akzent), Gegenseite links.
   Blanke .nz-eintrag ohne Modifier (z.B. Support-Chat) bleibt unverändert. */
.nz-eintrag {background:var(--surface-1);border-radius:10px;padding:5px 9px 4px}
.nz-eintrag.nz-eigen {align-self:flex-end;max-width:82%;background:var(--bg-accent);border-bottom-right-radius:3px}
.nz-eintrag.nz-fremd {align-self:flex-start;max-width:82%;border-bottom-left-radius:3px}
.nz-eintrag-kopf {display:flex;align-items:center;gap:8px;margin-bottom:2px}
.nz-eintrag-datum {font-size:10px;color:var(--text-muted);margin-left:auto}
.nz-eintrag-text {font-size:12.5px;line-height:1.35;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.dt-karte-chat-tag {font-size:11px;color:var(--text-accent);vertical-align:-1px}
.nz-badge {display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600}
.nz-badge-labor {background:var(--bg-accent);color:var(--text-accent)}
.nz-badge-praxis {background:var(--bg-success);color:var(--text-success)}
.nz-badge-techniker {background:var(--bg-warning, var(--surface-1));color:var(--text-warning, var(--text-secondary))}
/* Eintrag kam automatisch per E-Mail herein (Modul Tech-Kom), nicht
   von einem angemeldeten Nutzer — bewusst neutral gehalten, damit er
   sich von den drei Rollen-Badges absetzt. */
.nz-badge-techkom {background:var(--bg-pro);color:var(--text-pro)}
.nz-badge-praxkom {background:var(--bg-warning);color:var(--text-warning)}

.dt-drop-overlay {
  position: fixed; z-index: 30; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  background: var(--surface-2);
  border: 2.5px dashed var(--border-accent, var(--text-accent));
  font-size: 15px; font-weight: 500; color: var(--text-accent); pointer-events: none;
  box-sizing: border-box;
}
.dt-drop-overlay i { font-size: 36px; }
.detail.dt-dragover-gross .dt-drop-overlay { display: flex; }
#modal.dt-dragover-gross .dt-drop-overlay { display: flex; }
.pv-popover {position:absolute;z-index:50;background:var(--surface-2);border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:220px}
.pv-popover-row {display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px}
.pv-popover-row:hover {background:var(--surface-1);border-radius:4px;cursor:pointer}
/* Praxis-ID im Filter-Dropdown (praxisDropdownOeffnen, data.js): feste
   Breite + rechtsbündig, damit der Bindestrich und die Namen darunter
   alle auf derselben Spalte stehen — unabhängig davon, ob die ID ein-
   oder zweistellig ist (Chris, 23.09.2026). */
.pv-popover-praxis-id {display:inline-block;min-width:22px;text-align:right;
  font-family:var(--font-mono);color:var(--text-secondary);flex-shrink:0}
.praxis-fdd-alle {font-weight:500;border-bottom:0.5px solid var(--border);margin-bottom:3px;padding-bottom:8px}

.month-nav-cal-btn {
  height: 34px; width: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: none;
  border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border);
  cursor: pointer; color: var(--text-secondary); font-size: 14px; flex-shrink: 0;
}
.month-nav-cal-btn:hover { background: var(--surface-1); color: var(--text-primary); }
.month-nav-cal-btn.active { color: var(--text-accent); }
.kal-tag-pop { width: 220px; padding: 8px; }
.kal-tag-pop-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.kal-tag-pop-head button { border: none; background: none; cursor: pointer; color: var(--text-secondary); padding: 2px 4px; }
.kal-tag-pop-head button:hover { color: var(--text-primary); }
.kal-tag-pop-wtage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10.5px; color: var(--text-muted); text-align: center; margin-bottom: 3px; }
.kal-tag-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-tag-pop-grid button { border: none; background: transparent; border-radius: 4px; padding: 4px 0; cursor: pointer; font-size: 12px; color: var(--text-primary); }
.kal-tag-pop-grid button:hover { background: var(--surface-1); }
.kal-tag-pop-grid button.kal-tag-heute { border: 0.5px solid var(--border-accent); }
.pv-popover-label {flex:1}
.pv-popover-btn {height:26px;width:26px;padding:0;display:flex;align-items:center;justify-content:center}

/* Sammelrechnungen in der Praxis-Ansicht (praxis-view.js: pvSammelHtml()).
   Eigener Bereich UNTER der Auftragsliste, weil eine Sammelrechnung zu
   einem Abrechnungsmonat gehört und nicht zu einem einzelnen Auftrag —
   in der Liste stünde dasselbe Dokument sonst in jeder Zeile des Monats.
   Maße und Hairlines wie bei den übrigen Karten der Ansicht. */
.pv-sammel-bereich {margin-top:22px}
.pv-sammel-ueberschrift {font-size:14px;font-weight:500;margin:0 0 10px;color:var(--text-primary)}
.pv-sammel-karte {background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:10px}
.pv-sammel-kopf {display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:0.5px solid var(--border);font-size:13px}
.pv-sammel-kopf i {font-size:16px;color:var(--text-accent)}
.pv-sammel-titel {font-weight:500}
.pv-sammel-monat {margin-left:auto;font-size:12px;color:var(--text-muted)}
.pv-sammel-zeile {display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;border-bottom:0.5px solid var(--border)}
.pv-sammel-zeile:last-child {border-bottom:none}
.pv-sammel-zeile i {font-size:16px;color:var(--text-secondary)}
.pv-sammel-text {flex:1}
.pv-modal-overlay {position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.pv-modal {width:320px;max-height:88vh;overflow-y:auto;background:var(--surface-2);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.pv-modal-title {font-size:15px;font-weight:500;margin-bottom:4px}
.pv-modal-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

.pv-split {display:flex;gap:20px;align-items:stretch;max-width:1800px;overflow:hidden;flex:1;min-height:0}
.pv-list-col {flex:1 1 auto;min-width:0;overflow-y:auto}
/* Detail füllt die (gestreckte) Höhe seiner Spalte; sein overflow-y:auto
   (siehe .detail) sorgt dann für die eigene Scrollleiste. */
.pv-detail-embedded {height:100%}
/* Aktions-Buttons (v.a. "Auftragszettel") im Praxis-Detail mittig statt
   rechts — .dh-row2 ist sonst ein 190px|1fr-Grid. */
.pv-detail-embedded .dh-row2 {display:flex;justify-content:center}
.pv-detail-embedded .dh-row2-right {justify-content:center}
/* Roter Papierkorb am Zeilenende (nur offene Aufträge, Praxis-Liste). */
.pv-del-cell {width:40px;text-align:center}
.pv-del-btn {border:none;background:none;cursor:pointer;color:var(--text-danger);padding:4px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.pv-del-btn:hover {background:var(--bg-danger)}
.pv-del-btn i {font-size:16px;pointer-events:none}
/* Praxis/Auftragsnummer-Block (Detail + Modal). */
.pv-auftragnr {font-size:12px;color:var(--text-muted);margin-top:6px}
.pv-praxis-info {padding:2px 0}
/* Ansicht-Umschalter (Aufträge | Einzel- | Sammelrechnungen) neben dem Karussell. */
.pv-viewseg {display:inline-flex;border:0.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}
.pv-viewbtn {text-decoration:none;border:none;border-radius:0;background:transparent;color:var(--text-secondary);padding:6px 12px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pv-viewbtn + .pv-viewbtn {border-left:0.5px solid var(--border-strong)}
.pv-viewbtn.active {background:var(--bg-accent);color:var(--text-accent);font-weight:500}
.pv-viewbtn i {font-size:15px}
/* Rechnungstabelle. */
.pv-rech-table th, .pv-rech-table td {white-space:nowrap}
/* Inhalte mittig unter den Überschriften (Kopf-Regel spezifischer als
   .pv-native-table thead th, das sonst links erzwingt). */
.pv-native-table.pv-rech-table thead th, .pv-rech-table td {text-align:center}
.pv-rech-nr {width:34px;color:var(--text-muted)}
.pv-rech-betrag {font-weight:500}
.pv-rech-pdf {width:44px}
.pv-pdf-btn {border:none;background:none;cursor:pointer;color:var(--text-danger);padding:2px;border-radius:6px}
.pv-pdf-btn:hover {background:var(--bg-danger)}
.pv-pdf-btn i {font-size:18px;pointer-events:none}
/* Sofortdruck neben dem PDF-Symbol (Chris, 04.11.2026): gleiche Größe, neutrale Farbe. */
.pv-druck-btn {border:none;background:none;cursor:pointer;color:var(--text-secondary);padding:2px;border-radius:6px}
.pv-druck-btn:hover {background:var(--surface-1);color:var(--text-primary)}
.pv-druck-btn i {font-size:18px;pointer-events:none}
a.pv-druck-btn {display:inline-flex;align-items:center;vertical-align:middle;text-decoration:none}   /* Download-Pfeil ist ein Link */
.pv-rech-pdf {white-space:nowrap}
.pv-rech-sum td {background:var(--surface-1);border-top:0.5px solid var(--border-strong);padding:10px 12px;font-size:13px;color:var(--text-secondary);text-align:left}
.pv-rech-sum b {color:var(--text-primary);font-weight:500}
.pv-rech-bez {color:var(--text-success)}
.pv-detail-wrap {width:0;flex-shrink:0;overflow:hidden;transition:width 220ms ease-out}
/* Spalte "Termine" der Praxis-Auftragsliste (Festlegung Chris, 03.11.2026): Eingang, Wunsch (nur wenn gesetzt,
   mit Warndreieck bei Abweichung) und Liefertermin in drei kleinen Zeilen untereinander — statt drei Spalten. */
.pk-termine {white-space:nowrap}
.pk-termine > span {display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.45;color:var(--text-primary)}  /* Datum schwarz (Chris, 04.11.2026); nur die Beschriftung "Eingang/Wunsch/Liefer" bleibt grau */
.pk-termine .pt-k {min-width:58px;color:var(--text-primary)}  /* Beschriftung ebenfalls schwarz (Chris, 04.11.2026) */
.pk-termine .wunsch-zelle {font-size:13px}
/* Mit Abweichung: Datum schwarz wie die übrigen Termine, das Warndreieck bleibt gelb (Chris, 04.11.2026). */
.pk-termine .wunsch-zelle.wunsch-warn {color:var(--text-primary)}
.pk-termine .wunsch-zelle.wunsch-warn i {color:var(--text-warning)}
.pv-termine-kopf {white-space:nowrap}
.pv-sortzeile {font-weight:400;margin-top:1px}
.pv-sortlink {cursor:pointer;user-select:none}
.pv-sortlink:hover {color:var(--text-primary)}
.pv-sortlink.aktiv {color:var(--text-accent)}
/* ⚠ Bleibt 720 px: Der Inhalt des Details braucht diese Breite — schmaler (probiert: clamp 640–720) schnitt
   bei 1366 px die Datumskarte und den Knopf "Übernehmen" ab. */
.pv-detail-wrap:has(#detail:not(.hidden)) {width:720px}
.pv-detail-col {flex:1;min-width:0;background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:20px}
.pv-detail-title {font-size:16px;font-weight:500;margin-bottom:14px}
.pv-table .tv-row.sel {background:var(--bg-accent)}
.pv-native-table {width:100%;border-collapse:collapse;font-size:13px}
.pv-native-table thead th {background:var(--surface-1);border-bottom:0.5px solid var(--border);padding:8px 10px;text-align:left;font-weight:500;font-size:11px;color:var(--text-muted)}
.pv-native-table tbody tr {border-bottom:0.5px solid var(--border);cursor:pointer}
.pv-native-table tbody tr:last-child {border-bottom:none}
.pv-native-table tbody tr:hover {background:var(--surface-1)}
.pv-native-table tbody tr.sel {background:var(--bg-accent)}
.pv-native-table td {padding:9px 10px;vertical-align:middle}
.pv-native-table td.tv-cell-id {font-family:var(--font-mono);font-size:12px}

/* ============================================================
   SUPPORT-HUB (support.js: supportHubOeffnen())
   Karten-Übersicht für Hilfe/Support — für alle Rollen dieselbe,
   gespeist aus SUPPORT_CFG. Chat/Termin sind vorerst Platzhalter
   (Block 3/4), Teams/Fernwartung/Kontakt funktionieren sofort.
   ============================================================ */
/* Drei Kacheln nebeneinander (Chris, 15.08.2026) — so ergeben die
   Karten zwei sprechende Zeilen: oben der Weg zu einem Menschen, darunter
   das, was die App selbst beantwortet. Auf schmalen Fenstern zwei, auf
   sehr schmalen eine; ein Raster, das drei erzwingt, quetscht die Texte. */
.sh-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px) {.sh-grid {grid-template-columns:1fr 1fr}}
@media (max-width:420px) {.sh-grid {grid-template-columns:1fr}}
.sh-card {display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color 120ms,background 120ms}
.sh-card:hover:not(.sh-card-off) {border-color:var(--border-accent);background:var(--bg-accent)}
.sh-card-off {cursor:default;opacity:.55}
.sh-card-ic {width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--bg-accent);color:var(--text-accent)}
.sh-card-title {font-weight:500;font-size:14px}
.sh-card-sub {font-size:12px;color:var(--text-muted);line-height:1.35}
.sh-contact {margin-top:14px;padding-top:14px;border-top:0.5px solid var(--border);display:flex;flex-direction:column;gap:8px}
.sh-contact-row {display:flex;align-items:center;gap:8px;font-size:13px}
.sh-contact-row i {color:var(--text-muted);font-size:16px}
.sh-avail {color:var(--text-muted)}
.sh-hinweis {margin-top:12px;font-size:12px;color:var(--text-secondary);background:var(--surface-1);border-radius:8px;padding:8px 10px;line-height:1.4}
.sh-ph {display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:26px 10px}
.sh-ph-ic {width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--bg-accent);color:var(--text-accent)}
.sh-ph-text {font-size:13px;color:var(--text-secondary);max-width:340px;line-height:1.5}

/* ============================================================
   SUPPORT-TERMINBUCHUNG (support-termine.js)
   Buchungsansicht im Hilfe-Hub (Tag-Chips, Slot-Raster, „Meine
   Termine") + Antwort-Modal in der Inbox-Verwaltung.
   ============================================================ */
.st-label {font-size:12px;font-weight:500;color:var(--text-secondary);margin:14px 0 7px}
.st-book .st-label:first-child {margin-top:0}
.st-opt {color:var(--text-muted);font-weight:400}
.st-day-row {display:flex;flex-wrap:wrap;gap:7px}
.st-day-chip {padding:7px 11px;font-size:12.5px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color 120ms,background 120ms}
.st-day-chip:hover {border-color:var(--border-accent)}
.st-day-chip.sel {background:var(--fill-accent);border-color:var(--fill-accent);color:#fff}
.st-slot-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}
.st-slot-hint {font-size:12.5px;color:var(--text-muted);padding:2px 0}
.st-slot {padding:7px 0;font-size:12.5px;text-align:center;background:var(--surface-2);border:0.5px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color 120ms,background 120ms}
.st-slot:hover {border-color:var(--border-accent)}
.st-slot.sel {background:var(--fill-accent);border-color:var(--fill-accent);color:#fff}
.st-slot-off {opacity:.4;cursor:not-allowed;text-decoration:line-through}
.st-slot-off:hover {border-color:var(--border)}
.st-textarea {width:100%;padding:8px 10px;border:0.5px solid var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--text-primary);resize:vertical;font-size:13px}
.st-meine {margin-top:20px}
.st-mine-card {background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.st-mine-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.st-mine-when {font-size:13px;font-weight:500}
.st-antwort {margin-top:6px;font-size:12.5px;color:var(--text-secondary);background:var(--surface-1);border-radius:8px;padding:7px 9px;display:flex;gap:6px}
.st-antwort i {color:var(--text-muted)}
.st-mine-actions {display:flex;align-items:center;gap:8px;margin-top:9px}
.st-teams {display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-accent);text-decoration:none;font-weight:500}
.st-teams:hover {text-decoration:underline}
.st-vorschlag-box {background:var(--bg-warning);border:0.5px solid #F0C040;border-radius:8px;padding:8px 10px;margin-top:8px}
.st-vorschlag-lbl {font-size:11px;color:#7a5200;font-weight:600;display:flex;align-items:center;gap:5px}
.st-vorschlag-when {font-size:13px;font-weight:600;margin:4px 0 2px}
.st-modal-row {display:flex;gap:10px;font-size:13px;padding:5px 0;border-bottom:0.5px solid var(--border)}
.st-modal-row-top {align-items:flex-start}
.st-modal-lbl {color:var(--text-muted);min-width:80px}
.st-modal-anliegen {white-space:pre-wrap}

/* ============================================================
   SUPPORT-CHAT (support-nachrichten.js)
   Ungelesen-Badge am Hilfe-Knopf, Unterhaltungsliste (Inbox) und
   Chat-Modal. Nachrichten-Blasen kommen aus .nz-* (notizen-thread).
   ============================================================ */
.support-unread-badge {display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:8px;background:var(--text-danger);color:#fff;font-size:10px;font-weight:600;line-height:1;vertical-align:1px}
.sn-thread {max-height:300px;min-height:120px;margin-bottom:10px}
.sn-modal-thread {max-height:52vh;min-height:160px}
.sn-konv-list {display:flex;flex-direction:column;gap:6px;max-width:720px}
.sn-konv-row {display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color 120ms,background 120ms}
.sn-konv-row:hover {border-color:var(--border-accent);background:var(--surface-1)}
.sn-konv-neu {border-color:var(--border-accent)}
.sn-konv-ic {width:34px;height:34px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--bg-accent);color:var(--text-accent)}
.sn-konv-mid {flex:1;min-width:0}
.sn-konv-name {font-size:13.5px;font-weight:500}
.sn-konv-vorschau {font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-konv-neu .sn-konv-vorschau {color:var(--text-secondary);font-weight:500}
.sn-konv-right {display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.sn-konv-zeit {font-size:11px;color:var(--text-muted)}
.sn-unread {display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--text-danger);color:#fff;font-size:11px;font-weight:600;line-height:1}

/* Aus dem Block der Kundenverwaltung uebernommen (13.08.2026): Das
   Lizenzfenster benutzt beide weiter — der Kopierknopf am Schluessel
   und die Eingabefelder beim Erneuern. */
.lz-copy {border:none;background:none;color:var(--text-muted);cursor:pointer;padding:0 4px}
.lz-copy:hover {color:var(--text-accent)}
.lz-inp {width:100%;padding:5px 8px;font-size:12.5px;border:0.5px solid var(--border-strong);
  border-radius:6px;background:var(--surface-2);color:var(--text-primary)}

/* ── Kundennummer in der Kopfzeile + Lizenzfenster ───────────
   Zurückhaltend gehalten: Es ist eine Angabe fürs Telefonat mit dem
   Support, kein Bedienelement, das Aufmerksamkeit braucht. Farbe
   bekommt sie erst, wenn die Laufzeit knapp wird. */
.lz-badge {display:inline-block;border-radius:99px;padding:2px 9px;margin-left:12px;
  font-size:11px;font-weight:600;font-family:var(--font-mono);cursor:pointer;
  border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-muted)}
.lz-badge:hover {border-color:var(--text-muted);color:var(--text-secondary)}
.lz-badge.lz-warn {background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning)}
.lz-badge.lz-dead {background:var(--bg-danger); color:var(--text-danger); border-color:var(--text-danger)}
#lz-modal .lz-badge {margin-left:0;cursor:default}
.lz-zeile {display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 0;border-bottom:0.5px solid var(--border)}
.lz-zeile:last-of-type {border-bottom:0}

/* ── Datensicherung (Optionen → Backup) ─────────────────────── */
.bk-tabelle {width:100%;border-collapse:collapse;font-size:12.5px;
  border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.bk-tabelle th {background:var(--surface-1);text-align:left;font-weight:600;
  color:var(--text-secondary);padding:7px 10px;border-bottom:0.5px solid var(--border-strong)}
.bk-tabelle td {padding:7px 10px;border-bottom:0.5px solid var(--border)}
.bk-tabelle tr:last-child td {border-bottom:0}
.bk-zeit {font-family:var(--font-mono);font-size:12px}
.bk-unvoll {display:block;font-size:11px;color:var(--text-danger)}
.bk-art {display:inline-block;border-radius:99px;padding:1px 8px;font-size:11px;
  border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-secondary)}
.bk-art-auto {background:var(--bg-accent);color:var(--text-accent);border-color:var(--border-accent)}
.bk-art-sich {background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning)}
.bk-hinweis {display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--radius);
  font-size:12px;background:var(--bg-warning);border:0.5px solid var(--border-warning);color:var(--text-warning)}
.bk-hinweis-rot {background:var(--bg-danger);border-color:var(--text-danger);color:var(--text-danger)}
/* Stände auf dem Sicherungsort + Wiederherstellen-Dialog */
.bk-ort {border:0.5px solid var(--border-accent);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.bk-ort-kopf {font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.bk-ort-sub {font-size:12px;color:var(--text-secondary);margin:2px 0 10px}
.bk-voll {display:inline-block;border-radius:99px;padding:1px 8px;font-size:11px;
  background:var(--bg-success);color:var(--text-success);border:0.5px solid var(--border-success)}
.bk-dlg-schleier {position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:16px}
.bk-dlg {background:var(--surface-2);border-radius:12px;padding:18px 20px;width:100%;max-width:460px;
  border:0.5px solid var(--border-strong)}
.bk-dlg h3 {font-size:15px;font-weight:600;margin:0 0 6px}
.bk-dlg p {font-size:12.5px;color:var(--text-secondary);margin:0 0 10px;line-height:1.5}
.bk-dlg label {display:flex;align-items:flex-start;gap:8px;font-size:12.5px;margin:8px 0;cursor:pointer}
.bk-dlg input[type=radio] {width:auto;height:auto;flex:none;margin:2px 0 0;padding:0}
.bk-dlg-stand {background:var(--surface-1);border-radius:var(--radius);padding:9px 12px;font-size:12.5px;margin:12px 0}
.bk-dlg-balken {height:6px;border-radius:3px;background:var(--border);margin-top:7px;overflow:hidden}
.bk-dlg-balken > div {height:100%;background:var(--text-accent);width:0;transition:width .4s}
.bk-dlg-fuss {display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.lz-lbl {font-size:11.5px;color:var(--text-muted)}
.lz-wert {font-size:12.5px;font-weight:500}

/* ── Automatik-Motor (Optionen → Backup & Sonstiges) ──────────
   Zeitplan der Hintergrundaufgaben, gerendert von automatik.js. */
.aut-kopf {display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:12px}
.aut-pill {display:inline-block;border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:600;
  border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-secondary)}
.aut-pill-ok {background:var(--bg-success);color:var(--text-success);border-color:var(--text-success)}
.aut-pill-warn {background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning)}
.aut-pill-err {background:var(--bg-danger);color:var(--text-danger);border-color:var(--text-danger)}
/* ── Motor (Optionen → Allgemein) ── Kacheln für die System-Dienste,
   gerendert von motor.js. Eigene Klasse statt .opt-section: die
   Kacheln stehen nebeneinander in einem Raster, nicht untereinander. */
.mot-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.mot-kachel {background:var(--surface-1);border-radius:var(--radius);padding:1rem}
.mot-titel {font-size:15px;font-weight:500;margin:0 0 2px}
.mot-hinweis {font-size:12px;color:var(--text-muted);margin:4px 0 0}
.aut-tab {width:100%;border-collapse:collapse;font-size:12.5px;
  border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.aut-tab th {background:var(--surface-1);text-align:left;font-weight:600;
  color:var(--text-secondary);padding:7px 10px;border-bottom:0.5px solid var(--border-strong)}
/* white-space/overflow ausdrücklich zurücksetzen: die allgemeine
   Tabellenregel der App schneidet Zellinhalte ab (nowrap + hidden),
   die Beschreibung der Aufgabe soll aber umbrechen dürfen. */
.aut-tab td {padding:7px 10px;border-bottom:0.5px solid var(--border);vertical-align:top;
  white-space:normal;overflow:visible}
.aut-tab tr:last-child td {border-bottom:0}
.aut-aus td {opacity:.55}
/* Zustand einer Aufgabe: Punkt + Wort. Vier Farben, mehr nicht —
   grün läuft, gelb einrichten, rot Fehler, grau angehalten. */
.aut-z {display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.aut-punkt {width:9px;height:9px;border-radius:50%;flex-shrink:0;background:currentColor}
.aut-z-gruen {color:var(--text-success)}
.aut-z-gelb  {color:var(--text-warning)}
.aut-z-rot   {color:var(--text-danger)}
.aut-z-grau  {color:var(--text-muted)}
/* Knopf, der wie ein Link aussieht — führt an die Stelle, an der das
   Fehlende eingetragen wird. */
.aut-link {border:none;background:none;padding:0;font-size:12px;cursor:pointer;
  color:var(--text-accent);text-decoration:underline}
/* Sprungknopf INNERHALB eines Hinweiskastens (gelb/rot). Erbt die
   Textfarbe des Kastens statt der Akzentfarbe — nur so bleibt er auf
   jedem Kastengrund und in beiden Ansichten (hell/dunkel) lesbar.
   Erzeugt von autSprungKnopfHtml() in automatik.js. */
.hw-link {border:none;background:none;padding:0;font:inherit;cursor:pointer;
  color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.hw-link:hover {text-decoration:none}
.hw-link i {font-size:13px;vertical-align:-2px}
/* Band ganz oben: Der Browser zeigt eine aeltere Fassung als die, die
   auf dem Server liegt (stand-anzeige.js). Bewusst ueber ALLEM und
   nicht wegklickbar — wer auf einem alten Stand arbeitet, sucht sonst
   Fehler, die laengst behoben sind. */
.stand-band {position:sticky;top:0;z-index:400;display:flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:12.5px;background:var(--bg-warning);color:var(--text-warning);
  border-bottom:0.5px solid var(--border-warning)}
.stand-band i {font-size:15px;flex-shrink:0}
/* Lizenzband — dasselbe Band, zwei Stufen: gelb solange sie läuft,
   rot ab dem Ablauftag (lizenz-badge.js). */
.lz-band-warn {background:var(--bg-warning);color:var(--text-warning);border-bottom-color:var(--border-warning)}
.lz-band-rot  {background:var(--bg-danger); color:var(--text-danger); border-bottom-color:var(--border-danger)}
/* Banner über einem Kommunikation-Verlauf: der Mail-Motor hat im
   Hintergrund etwas geloggt, seit dieser Verlauf zuletzt geladen wurde
   (komm-stand.js). Anders als .stand-band NICHT sticky/über allem —
   sitzt nur über der jeweiligen Tabelle, kein Alarmton wie beim
   veralteten Stand, deshalb Akzent- statt Warnfarbe. */
.komm-neu-band {display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:8px 14px;font-size:12.5px;background:var(--bg-accent);color:var(--text-accent);
  border:0.5px solid var(--border-accent);border-radius:var(--radius)}
.komm-neu-band i {font-size:15px;flex-shrink:0}
/* ── Ordner-Eingang (Inbox → erster Untertab) ─────────────────
   Verlauf des Auftragseingangs über den überwachten Ordner. */
.oo-badge {display:inline-block;min-width:16px;padding:0 5px;border-radius:9px;margin-left:5px;
  background:var(--text-danger);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.oo-tab {width:100%;border-collapse:collapse;font-size:12.5px;
  border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.oo-tab th {background:var(--surface-1);text-align:left;font-weight:600;
  color:var(--text-secondary);padding:7px 10px;border-bottom:0.5px solid var(--border-strong)}
.oo-tab td {padding:8px 10px;border-bottom:0.5px solid var(--border);vertical-align:top;
  white-space:normal;overflow:visible}
.oo-tab tr:last-child td {border-bottom:0}
.oo-neu td {background:var(--bg-accent)}
.oo-art {display:inline-block;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:600;
  border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-secondary);white-space:nowrap}
.oo-art-neu {background:var(--bg-success);color:var(--text-success);border-color:var(--text-success)}
.oo-art-nach {background:var(--bg-accent);color:var(--text-accent);border-color:var(--border-accent)}
.oo-art-warn {background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning)}
.oo-art-fehler {background:var(--bg-danger);color:var(--text-danger);border-color:var(--text-danger)}
.oo-hinweis {display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--radius);
  margin-bottom:10px;font-size:12px;background:var(--bg-warning);
  border:0.5px solid var(--border-warning);color:var(--text-warning)}
/* Meldung über neue Aufträge — anklickbar, führt in diese Liste. */
.oo-toast {position:fixed;top:18px;right:18px;z-index:9999;max-width:380px;cursor:pointer;
  background:var(--surface-2);color:var(--text-primary);border:0.5px solid var(--border-accent);
  border-left:3px solid var(--fill-accent);border-radius:var(--radius);padding:11px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.16);opacity:0;transform:translateY(-8px);
  transition:opacity .25s, transform .25s}
.oo-toast.show {opacity:1;transform:translateY(0)}
.oo-toast b {display:block;margin-bottom:2px;font-size:13px}
.oo-toast span {font-size:12px;color:var(--text-muted)}

.aut-log {font-family:var(--font-mono);font-size:11.5px;line-height:1.55;margin:0;
  max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px}

/* ── Merkliste nach dem Aufheben einer Rechnungssperre ────────
   Band über der Rechnungsübersicht. Bleibt stehen, bis PDF, XML,
   Konformitätserklärung und die aufgelöste Sammelrechnung wieder
   erzeugt sind (abrechnung.js, nbRender). */
.nb-band {display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;padding:9px 12px;
  background:var(--bg-warning);border:0.5px solid var(--border-warning);
  border-left:3px solid var(--text-warning);border-radius:var(--radius);color:var(--text-warning)}
.nb-ic {font-size:16px;flex-shrink:0;margin-top:1px}
.nb-mid {min-width:0}
.nb-titel {font-size:12.5px;font-weight:500}
.nb-punkte {display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:5px}
.nb-punkt {display:inline-flex;align-items:center;gap:4px;font-size:12px}
.nb-punkt i {font-size:13px}
.nb-fertig {opacity:.55;text-decoration:line-through}

.kv-pane {display:none}
.kv-pane.active {display:block}
.kv-sub-btn.active {background:var(--bg-pro);border-color:var(--text-pro);color:var(--text-pro)}
.kv-btn-pro {background:var(--bg-pro);border-color:var(--text-pro);color:var(--text-pro);font-weight:600}
.kv-rolle {display:inline-block;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:600;
  border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-secondary)}
.kv-rolle-praxis    {background:var(--bg-accent); color:var(--text-accent); border-color:var(--border-accent)}
.kv-rolle-techniker {background:var(--bg-success);color:var(--text-success);border-color:var(--text-success)}

/* ── Rückkehr-Leiste bei aktiver Aufschaltung ────────────────
   Fest am oberen Rand in JEDER Rolle. Die beiden Shells (.app für
   Labor, .tv-shell für Praxis/Technik) sind auf 100vh gesetzt und
   werden deshalb um die Leistenhöhe gekürzt — sonst schöbe die
   Leiste den Fuß der Ansicht aus dem Bild.
   z-index unter dem Login-Overlay (9999), über allem anderen. */
.su-leiste {position:fixed;top:0;left:0;right:0;height:38px;z-index:9998;
  display:flex;align-items:center;gap:12px;padding:0 14px;font-size:12.5px;
  background:#5521b5;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.su-leiste-lesen {background:#8b5e00}
.su-leiste b {font-weight:700}
.su-pkt {width:9px;height:9px;border-radius:50%;background:#ffd166;flex-shrink:0}
.su-rechts {margin-left:auto;display:flex;gap:8px}
.su-btn {border-radius:6px;padding:4px 11px;font-size:12px;cursor:pointer;border:1px solid}
.su-btn-hell {background:#fff;color:#5521b5;border-color:#fff;font-weight:600}
.su-btn-geist {background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
body.su-modus {padding-top:38px}
body.su-modus .app, body.su-modus .tv-shell {height:calc(100vh - 38px)}
/* Rahmen um die ganze Ansicht, solange aufgeschaltet ist (Wunsch Chris,
   13.08.2026). Die Leiste allein übersieht man, sobald man in der
   Ansicht arbeitet — und wer unter fremdem Namen schreibt, soll das
   jederzeit sehen.
   ⚠ Als ::after mit pointer-events:none, NICHT als border am body: Ein
   Rahmen am body verschöbe das Layout um seine Breite, und jede
   Höhenrechnung (100vh - 38px) ginge daneben. So liegt er darüber und
   fängt keinen Klick ab.
   Farbe wie die Leiste: violett beim Mitarbeiten, bernstein bei „Nur
   ansehen" — beides ein Stück, und die Farbe sagt, was gerade gilt. */
body.su-modus::after {
  content:''; position:fixed; inset:38px 0 0 0; z-index:9997;
  border:3px solid #5521b5; pointer-events:none;
}
body.su-modus-lesen::after {border-color:#8b5e00}

/* ── Wartungsankündigung (13.09.2026, wartung.js) ────────────
   Countdown-Banner vor einem geplanten Serverneustart — fest am oberen
   Rand, IN JEDER ROLLE (Labor/Praxis/Technik), genau wie die
   Rückkehr-Leiste oben. Gleiches Höhen-Ausgleichsmuster: die beiden
   Shells (.app, .tv-shell) werden um die Bannerhöhe gekürzt, sonst
   schöbe der Banner den Fuß der Ansicht aus dem Bild.
   z-index UNTER der Rückkehr-Leiste/ihrem Rahmen (9997/9998) — die
   Aufschaltung ist die dringlichere Information, falls beides je
   gleichzeitig einträfe. */
.wartung-banner {position:fixed;top:0;left:0;right:0;height:38px;z-index:9990;
  display:flex;align-items:center;gap:10px;padding:0 14px;font-size:12.5px;
  background:var(--bg-warning);color:var(--text-warning);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.wartung-banner-rot {background:var(--bg-danger);color:var(--text-danger)}
body.wartung-aktiv {padding-top:38px}
body.wartung-aktiv .app, body.wartung-aktiv .tv-shell {height:calc(100vh - 38px)}
/* Beide Leisten zugleich (seltener Zufall: Aufschaltung während einer
   angekündigten Wartung) — die Rückkehr-Leiste gewinnt den Platz oben,
   der Wartungs-Banner rutscht eine Zeile tiefer statt sie zu verdecken. */
body.su-modus .wartung-banner {top:38px}
body.su-modus.wartung-aktiv {padding-top:76px}
body.su-modus.wartung-aktiv .app, body.su-modus.wartung-aktiv .tv-shell {height:calc(100vh - 76px)}

/* ── Wähler „Auf wen aufschalten?" (aufschalten.js) ──
   Steht direkt nach der Anmeldung des Superusers da, statt ihn über
   Optionen → Benutzer suchen zu lassen. Der Klick ist die Wahl: zwei
   Knöpfe je Zeile statt einer Zahleneingabe („1 oder 2" im alten
   prompt()) — nichts eintippen, was man auswählen kann.
   Farben wie Leiste und Rahmen: violett = mitarbeiten, bernstein =
   nur ansehen. Die Schale ist .modal-ov/.modal, damit das Fenster wie
   jedes andere in der App aussieht. */
.suw {width:460px;padding:0}
.suw-kopf {display:flex;align-items:flex-start;gap:9px;padding:12px 14px 10px;
  border-bottom:0.5px solid var(--border)}
.suw-pkt {width:9px;height:9px;border-radius:50%;background:#5521b5;flex:0 0 auto;margin-top:5px}
.suw-titel {font-size:14px;font-weight:bold;color:var(--text-primary)}
.suw-kunde {font-size:11.5px;color:var(--text-muted);margin-top:2px}
.suw-x {margin-left:auto;background:none;border:0;color:var(--text-muted);
  font-size:16px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
.suw-suche {margin:10px 14px 8px;height:30px;width:calc(100% - 28px);
  border:0.5px solid var(--border-strong);border-radius:var(--radius);
  background:var(--surface-2);color:var(--text-primary);padding:0 9px;
  font-size:12px;font-family:inherit}
.suw-liste {margin:0 14px;border:0.5px solid var(--border);border-radius:var(--radius);
  overflow-y:auto;max-height:320px}
.suw-grp {font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);background:var(--surface-1);padding:5px 10px;
  border-bottom:0.5px solid var(--border);font-weight:600}
.suw-zeile {display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-bottom:0.5px solid var(--border)}
.suw-zeile:last-child {border-bottom:0}
.suw-zeile:hover {background:var(--bg-accent)}
.suw-wer {flex:1;min-width:0}
.suw-name {font-size:12.5px;font-weight:600;color:var(--text-primary)}
.suw-sub {font-size:11px;color:var(--text-muted)}
.suw-tat {display:flex;gap:6px;flex:0 0 auto}
.suw-b {border-radius:6px;padding:4px 10px;font-size:11.5px;cursor:pointer;
  border:1px solid;white-space:nowrap;font-family:inherit}
.suw-b-sehen {background:transparent;color:var(--text-warning);border-color:var(--border-warning)}
.suw-b-mit {background:#5521b5;color:#fff;border-color:#5521b5;font-weight:600}
.suw-b-geist {background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}
.suw-aus {font-size:11px;color:var(--text-muted);white-space:nowrap}
.suw-leer {padding:14px;text-align:center;color:var(--text-muted);font-size:12px}
.suw-fuss {display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-top:0.5px solid var(--border);margin-top:10px}
.suw-hinw {font-size:11px;color:var(--text-muted);line-height:1.45;flex:1}

/* ── Belegnummern je Praxis (Optionen → Einstellungen Auftrag) ──
   Tabelle statt Einzelauswahl. Weiße Felder sind einstellbar, die
   grauen Zahlenspalten sind Auskunft. Siehe nummernkreise.js. */
.nk-tab {width:100%;border-collapse:collapse;font-size:12.5px;
  border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.nk-tab th {background:var(--surface-1);text-align:left;font-weight:600;
  color:var(--text-secondary);padding:6px 8px;border-bottom:0.5px solid var(--border-strong);
  font-size:11px;white-space:nowrap}
.nk-tab td {padding:4px 8px;border-bottom:0.5px solid var(--border);vertical-align:middle}
.nk-tab tr:last-child td {border-bottom:none}
.nk-tab tbody tr:hover td {background:var(--surface-1)}
.nk-tab th.nk-zahl, .nk-tab td.nk-zahl {text-align:right;font-family:var(--font-mono);
  color:var(--text-secondary);background:var(--surface-1)}
.nk-tab td.nk-leer {color:var(--text-muted)}
.nk-tab th.nk-start {text-align:left;background:var(--bg-accent);color:var(--text-accent)}
.nk-kd {font-family:var(--font-mono);color:var(--text-secondary)}
.nk-hinweis {font-size:10.5px;color:var(--text-muted)}
.nk-feld {width:96px;padding:3px 6px;font-size:12.5px;border-radius:5px;
  border:0.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-primary)}

/* Zweite Ebene unter "Benutzer" (Konten / Zugriffsprotokoll).
   Eigene Klasse statt .akt-pane: dort steht height:calc(100vh - 210px)
   fuer eingehaengte Ansichten — hier schnitte das die Liste ab. */
.bn-pane        {display:none}
.bn-pane.active {display:block}

/* Zweite Ebene unter "Backup & Sonstiges" (Ordner / Automatik /
   Server-Check). Dieselbe Ueberlegung wie bei .bn-pane darueber, und
   dieselbe Falle: Die drei Kaesten hingen bis zum 15.08.2026 an
   .akt-pane und damit an height:calc(100vh - 210px).

   ⚠ WARUM DAS DORT FALSCH IST: Die feste Hoehe ist fuer die
   EINGEHAENGTEN Ansichten gedacht (Akteure, Kommunikation) — die
   fuellen den Bildschirm und scrollen in sich selbst. Hier stehen
   dagegen gewachsene Formulare mit Tabellen, die laenger werden.
   Gemessen am 15.08.2026: Der Kasten "Ordner einrichten" war 901 px
   hoch, sein Inhalt 1954 px. Weil overflow sichtbar bleibt, lief das
   Formular unten aus dem weissen Kasten heraus — der Hintergrund
   brach mitten im Formular ab, statt mitzuwachsen. Die
   Sicherungs-Tabelle machte es mit jedem Eintrag schlimmer.

   Ohne Hoehenangabe waechst der Kasten mit seinem Inhalt; gescrollt
   wird ohnehin eine Ebene hoeher (.opt-inner). Die uebrigen
   .akt-pane-Regeln greifen hier ins Leere — die drei Kaesten
   enthalten weder .card-tab-inner noch .card-tab-top, .opt-sub-nav
   oder .opt-embedded-view (nachgezaehlt: je 0). Umgeschaltet wird
   ueber die id (app.js -> bkTab), nicht ueber die Klasse. */
.bk-pane        {display:none}
.bk-pane.active {display:block}

/* ── Zugriffsprotokoll (Optionen → Benutzer → Zugriffsprotokoll) ──
   Wer hat wann welche Patientendaten gesehen. Tabelle und Filter
   halten sich an den Automatik-Bereich (.aut-tab), damit beide
   Verwaltungsansichten gleich aussehen. Gezeichnet von
   zugriffsprotokoll.js. */
.zl-filter {display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:var(--surface-2);border:0.5px solid var(--border);
  border-radius:var(--radius);padding:12px}
.zl-feld {display:flex;flex-direction:column;gap:4px}
.zl-feld select, .zl-feld input {font:inherit;padding:6px 8px;border-radius:6px;
  border:0.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-primary)}
.zl-tab {width:100%;border-collapse:collapse;font-size:12.5px;
  border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.zl-tab th {background:var(--surface-1);text-align:left;font-weight:600;
  color:var(--text-secondary);padding:7px 10px;border-bottom:0.5px solid var(--border-strong);
  font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.zl-tab td {padding:7px 10px;border-bottom:0.5px solid var(--border);vertical-align:top}
.zl-tab tr:last-child td {border-bottom:none}
.zl-tab tbody tr:hover td {background:var(--surface-1)}
.zl-zeit {font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--text-secondary)}
.zl-rolle {font-size:11px;color:var(--text-muted)}
.zl-ip {font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.zl-zusatz {color:var(--text-muted)}
.zl-chip {display:inline-block;border-radius:99px;padding:1px 9px;font-size:11px;font-weight:600;
  white-space:nowrap;border:0.5px solid var(--border-strong);
  background:var(--surface-1);color:var(--text-secondary)}
.zl-chip-sehen {background:var(--bg-accent);color:var(--text-accent);border-color:var(--text-accent)}
.zl-chip-neu {background:var(--bg-success);color:var(--text-success);border-color:var(--text-success)}
.zl-chip-aend {background:var(--bg-warning);color:var(--text-warning);border-color:var(--border-warning)}
.zl-chip-weg {background:var(--bg-danger);color:var(--text-danger);border-color:var(--text-danger)}
.zl-fuss {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:10px;font-size:11.5px;color:var(--text-muted)}
.zl-merker {margin-top:14px;padding:10px 12px;border:0.5px solid var(--border);
  border-left:3px solid var(--fill-accent);border-radius:var(--radius);
  background:var(--surface-2);color:var(--text-secondary);font-size:12px;line-height:1.55;max-width:860px}
.zl-merker b {color:var(--text-primary)}
/* Der Haken braucht eine eigene Regel: .chk ist nur in den Ansichten
   Jumbos und Positionen definiert, in den Optionen bliebe das Kaestchen
   sonst ueber dem Text stehen statt daneben. */
.zl-haken {display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--text-secondary);cursor:pointer;width:max-content}
.zl-haken input {width:14px;height:14px;cursor:pointer;margin:0}

/* ============================================================
   EINFASSUNGEN — Inhaltsflächen in gerahmten Kästen
   ============================================================
   Wunsch Chris, 13.08.2026: dieselbe Einfassung wie .kv-tabelle in der
   Kundenverwaltung, in allen Ansichten. 0,5 px, --radius, Fläche in
   --surface-1.

   Bewusst hier am Ende gesammelt und nicht in die einzelnen Abschnitte
   verstreut: So ist auf einen Blick zu sehen, was zu dieser Umstellung
   gehört — und was sie kostet, wenn sie zurückgenommen werden soll.

   NICHT aufgeführt, weil bereits gerahmt: Jumbos und Positionen (liegen
   im .mod-Kasten), die Kalender-Seitenleiste, die Dashboard-Kacheln
   sowie Auftragstabelle, Detailbereich und Abrechnung (.table-area und
   .tab-kasten, weiter oben). */

/* Inbox und Ablage: der Inhalt unter der Untertab-Leiste.
   ⚠ #ablage-fenster gehört dazu: Seit dem 17.08.2026 hängt die Ablage im
   Fenster, und der Rahmen hing bis dahin allein am Bereichs-Selektor —
   im Fenster wären die drei Panes ohne Rahmen und ohne Polsterung
   dagestanden. */
#view-inbox .ib-pane.active,
#view-inbox.ib-suche-an .ib-pane.ib-hat-treffer,
#view-ablage .ablg-pane.active,
#ablage-fenster .ablg-pane.active {
  background:var(--surface-1); border:0.5px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
}

/* ── Ablage-Fenster: Inhalt wächst mit der Fenstergröße ──────────
   Konvention für freie Fenster (winmgr): Das Fenster selbst scrollt
   NICHT, nur der Inhaltsbereich — sonst wandern Kopf, Untertab-Leiste
   und Fußzeile beim Scrollen aus dem Bild. Dafür muss der Deckel der
   Basisregel weg (.mb hat max-height:calc(90vh - 110px)), und die
   Kette .mb -> .card-tab-inner braucht flex:1 + min-height:0. */
#ablage-fenster .modal.win-frei          { overflow:hidden; }
#ablage-fenster .mb                      { flex:1; min-height:0; max-height:none; overflow:hidden; }
#ablage-fenster .card-tab-inner          { flex:1; min-height:0; overflow:auto; }
/* Im Bereich begrenzte eine 900-px-Spalte die Lesebreite. Im Fenster
   ist das Fenster die Begrenzung — der Nutzer hat seine Breite selbst
   gewählt. */
#ablage-fenster .card-tab-inner > .inner-wrap { max-width:none; }

/* Kalender: Gitter und Kennzahlen — die Seitenleiste hat ihren Rahmen
   schon. */
#view-kalender .km-main,
#view-kalender .km-stat {
  background:var(--surface-1); border:0.5px solid var(--border);
  border-radius:var(--radius);
}

/* Praxis- und Techniker-Ansicht: die Listen (.pv-native-table) standen
   ohne jede Einfassung frei im Raum, während Detailspalte, Kalender und
   Dashboard daneben ihre Kästen schon hatten.

   ⚠ Der Rahmen sitzt am SCROLLBEREICH .pv-list-col, nicht an der
   Tabelle — genau wie bei .table-area im Labor: an der Tabelle würde er
   mitscrollen und seine Oberkante liefe unter die stehende Kopfzeile
   (die Spaltenüberschriften sind position:sticky und hängen an dieser
   Spalte). Kein overflow:hidden, das schaltet sticky ab; stattdessen
   runden die äußeren Kopfzellen selbst, damit die oberen Ecken sauber
   bleiben.

   Fläche in --surface-2 und 12 px Radius, nicht --surface-1/--radius:
   In diesen Ansichten ist das weiße Kästchen mit 12 px das Vorbild
   (.tv-table, .pv-detail-col, .pv-sammel-karte) — der graue Labor-Kasten
   stünde hier allein.

   Die Klasse .pv-kasten setzen pvRender() und tvRender() nur für die
   Listenansichten. Dashboard, Kalender und Links liegen in derselben
   Spalte, bringen ihre Rahmen aber selbst mit — dort wäre er doppelt. */
.pv-list-col.pv-kasten {
  background:var(--surface-2); border:0.5px solid var(--border);
  border-radius:12px; padding-bottom:12px;
  /* Der Kasten ist nur so hoch wie seine Liste (Chris, 03.11.2026: "der weiße Teil unten ist zu grell").
     Vorher streckte ihn die Spalte bis zum Fensterrand, und unter den Zeilen stand eine große leere
     weiße Fläche. Lange Listen scrollen weiter im Kasten (max-height + overflow-y der Spalte). */
  align-self:flex-start; max-height:100%;
}
/* Die Liste hängt eine Ebene tiefer (.pv-list-col > #pv-list bzw.
   #tv-list > Tabelle), deshalb das mittlere "> div >". Ohne diese Stufe
   greift keine der beiden folgenden Regeln. */
.pv-list-col.pv-kasten > div > .pv-native-table thead th:first-child {border-top-left-radius:12px}
.pv-list-col.pv-kasten > div > .pv-native-table thead th:last-child  {border-top-right-radius:12px}
/* Was neben der Tabelle im Kasten liegt, rückt vom Rahmen ab: der
   Beleg-Hinweis unter der Liste und die Sammelrechnungs-Karten. */
.pv-list-col.pv-kasten > div > .tv-sub,
.pv-list-col.pv-kasten > div > .pv-sammel-bereich {padding-left:12px;padding-right:12px}