/* ==========================================================================
   Kundenregister – Vermittlungs-Cockpit
   Gestaltungssystem

   Aufbau dieser Datei – bitte diese Reihenfolge einhalten:
     1. Merkmale (Tokens)      – Farben, Abstände, Schrift, Radien, Schatten
     2. Modi                   – Hell/Dunkel, Dichte, Präsentation
     3. Grundlagen             – Reset, Typografie, Fokus
     4. Gerüst                 – Kopfzeile, Navigation, Inhaltsbereich
     5. Bauteile               – Karten, Tabellen, Formulare, Kanban, Chat …
     6. Anpassung an die Größe – vier Stufen, am Stück, nicht verstreut

   Grundsatz: Ein Bauteil hat keine eigenen Farben und keine eigenen Maße.
   Es benutzt Merkmale. Dichte, Hell/Dunkel und Präsentationsmodus ändern
   deshalb nur die Merkmale – kein Bauteil muss davon etwas wissen.

   Vier Größenstufen, überall dieselben Namen:
     Telefon        bis  759 px
     Tablet          760 – 1099 px
     Desktop        1100 – 1599 px
     Präsentation   ab  1600 px
   Davon unabhängig: (pointer:coarse) – Fingerbedienung. Ein Tablet im
   Querformat ist breit UND Touch; das sind zwei verschiedene Fragen.
   ========================================================================== */

/* ==========================================================================
   1. Merkmale
   ========================================================================== */
:root{
  color-scheme: light;

  /* --- Grundpalette: neutrale Stufen ------------------------------------ */
  --n-0:#ffffff;  --n-25:#fbfcfd; --n-50:#f6f7f9; --n-100:#eff1f4;
  --n-150:#e6e9ee; --n-200:#dde1e8; --n-300:#c6ccd6; --n-400:#9aa3b2;
  --n-500:#6f7889; --n-600:#525b6b; --n-700:#3b4453; --n-800:#262d39;
  --n-900:#171d27; --n-950:#0f141c;

  /* --- Flächen und Schrift --------------------------------------------- */
  --bg:#f4f5f7;
  --surface:var(--n-0);          /* Karten, Dialoge                        */
  --surface-2:var(--n-50);       /* Kopf-/Fußzeilen in Karten              */
  --surface-3:var(--n-100);      /* Tabellenköpfe, Chips, ruhige Flächen   */
  --surface-4:var(--n-150);      /* Hover auf ruhigen Flächen              */
  --ink:var(--n-900);            /* Fließtext                              */
  --ink-2:var(--n-600);          /* zweite Ebene                           */
  --ink-3:var(--n-500);          /* Beschriftungen, Hinweise               */
  --line:var(--n-150);
  --line-2:var(--n-300);

  /* --- Markenfarben ----------------------------------------------------- */
  --navy:#1f3864;                /* Kopfzeile – aus der Verwaltung setzbar */
  --navy-2:#2c4a80;
  --accent:#2a78d6;              /* Akzent  – global oder persönlich       */
  --accent-ink:#ffffff;          /* Schrift auf dem Akzent                 */
  --accent-weich:#e7f0fc;        /* Akzent als Fläche                      */
  --auf-kopf:#ffffff;            /* Schrift auf der Kopfzeile              */
  --auf-kopf-2:rgba(255,255,255,.72);
  --auf-kopf-3:rgba(255,255,255,.13);
  --auf-kopf-linie:rgba(255,255,255,.20);

  /* --- Signalfarben ------------------------------------------------------ */
  --neu:#4a3aa7;  --info:#2a78d6; --warn:#eda100; --good:#1baf7a; --crit:#e34948;
  --neu-ink:#3a2d85; --info-ink:#1a5299; --warn-ink:#8a5d00;
  --good-ink:#0d6b4a; --crit-ink:#a92e2d;

  /* Signalfarbe als Fläche: aus einer einzigen Farbe wird Hintergrund und
     Schrift gemischt. Ein Bauteil setzt nur --ton, alles andere folgt –
     auch im Dunkelmodus, ohne zweiten Farbsatz.                           */
  --ton:var(--accent);
  --ton-flaeche-p:11%;   --ton-flaeche-basis:var(--n-0);
  --ton-rand-p:26%;      --ton-rand-basis:var(--n-0);
  --ton-schrift-p:74%;   --ton-schrift-basis:#000000;

  /* --- Abstände: eine Skala, keine krummen Zwischenwerte ---------------- */
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:12px; --s-5:16px;
  --s-6:20px; --s-7:24px; --s-8:32px; --s-9:40px;

  /* --- Schrift ---------------------------------------------------------- */
  /* Einfache Anführungszeichen: dieselbe Kette wird auch in style="…"
     geschrieben, doppelte würden das Attribut sprengen.                  */
  --schrift:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  /* Die Grundschriftgröße entsteht aus drei Faktoren, die sich nicht
     gegenseitig ausstechen, sondern multiplizieren:
       --tx-roh     setzen Dichte und Präsentationsmodus
       --tx-schirm  setzt die Bildschirmgröße (Projektor)
       --tx-skala   setzt der Benutzer persönlich
     Deshalb wird --tx-basis nirgends direkt überschrieben.               */
  --tx-roh:14px;
  --tx-schirm:1;
  --tx-skala:1;
  --tx-basis:calc(var(--tx-roh) * var(--tx-schirm) * var(--tx-skala));
  --tx-xs:calc(var(--tx-basis) - 3.5px);   /* 10.5 – Kleinbeschriftung     */
  --tx-s:calc(var(--tx-basis) - 2px);      /* 12   – Hinweise, Tabellen    */
  --tx-m:calc(var(--tx-basis) - 1px);      /* 13   – Bedienelemente        */
  --tx-l:var(--tx-basis);                  /* 14   – Fließtext             */
  --tx-xl:calc(var(--tx-basis) + 3px);     /* 17   – Karten-Überschriften  */
  --tx-2xl:calc(var(--tx-basis) + 8px);    /* 22   – Kennzahlen            */
  --tx-3xl:calc(var(--tx-basis) + 16px);   /* 30   – große Kennzahlen      */

  /* --- Radien ----------------------------------------------------------- */
  --radius:10px;                                    /* aus der Verwaltung  */
  --r-s:calc(var(--radius) * .6);
  --r-m:calc(var(--radius) * .85);
  --r-l:var(--radius);
  --r-xl:calc(var(--radius) * 1.4);
  --r-rund:999px;

  /* --- Höhe der Bedienelemente ------------------------------------------ */
  --hoehe:36px;        /* Knöpfe, Eingabefelder – EIN Wert für alles       */
  --hoehe-s:28px;      /* kleine Knöpfe in Tabellenzeilen                  */

  /* --- Schatten: zwei Stufen, mehr braucht es nicht --------------------- */
  --schatten:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --schatten-hoch:0 8px 28px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06);
  --schatten-dialog:0 24px 60px rgba(16,24,40,.24);

  /* --- Fokus: ein Ring, überall derselbe -------------------------------- */
  --fokus:var(--accent);
  --fokus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* --- Bewegung: kurz, oder gar nicht ----------------------------------- */
  --takt:.14s;
  --takt-lang:.24s;

  /* --- Gerüstmaße -------------------------------------------------------- */
  /* Der Inhalt nutzt die volle Fensterbreite. Früher stand hier eine feste
     Grenze (1560 px); auf einem breiten Bildschirm blieb links und rechts
     Fläche leer, und Spalten wie „Bemerkung" wurden abgeschnitten, obwohl
     daneben Platz war. Die Grenze ist bewusst aufgehoben – die Kopfleiste
     und der Inhalt darunter enden jetzt an derselben Kante.

     `100%` statt `none`: der Wert steht in `max-width`, und die Zeile soll
     eine Begrenzung bleiben, nur eben die des Fensters.                   */
  --breite-max:100%;
  --kopf-hoehe:60px;
  --mobilnav-hoehe:0px;          /* auf dem Telefon auf 58px gesetzt       */
}

/* ==========================================================================
   2. Modi
   ========================================================================== */

/* --- Dunkelmodus ---------------------------------------------------------
   Nur Merkmale werden getauscht. Die Marken- und Signalfarben behalten
   ihren Farbton, werden aber aufgehellt – auf dunklem Grund braucht eine
   Farbe mehr Helligkeit, um gleich kräftig zu wirken.                     */
:root[data-modus="dunkel"]{
  color-scheme: dark;
  --n-0:#171b22;  --n-25:#1a1f27; --n-50:#1e242d; --n-100:#242b35;
  --n-150:#2d3541; --n-200:#374050; --n-300:#4a5566; --n-400:#78849a;
  --n-500:#97a2b5; --n-600:#b6bfcd; --n-700:#d2d8e2; --n-800:#e6eaf0;
  --n-900:#f2f5f9; --n-950:#ffffff;
  --bg-basis:#10141a; --bg:var(--bg-basis);   /* die in der Verwaltung
     gewählte Hintergrundfarbe wird hier hineingemischt (js/app.js),
     damit die Einstellung auch im Dunkelmodus etwas bewirkt */
  --surface:#171b22; --surface-2:#1c222b; --surface-3:#232a35; --surface-4:#2c343f;
  --ink:#eef1f6; --ink-2:#b6bfcd; --ink-3:#8e99ab;
  --line:#2b3340; --line-2:#3d4757;
  --accent-weich:#1b2c44;
  --neu:#8a7bd4; --info:#5da2ee; --warn:#e3a723; --good:#35c68f; --crit:#f2706e;
  --neu-ink:#b7abe8; --info-ink:#8cc0f6; --warn-ink:#e9be6a;
  --good-ink:#63d7ab; --crit-ink:#f79a98;
  --ton-flaeche-p:20%;   --ton-flaeche-basis:var(--surface);
  --ton-rand-p:38%;      --ton-rand-basis:var(--surface);
  --ton-schrift-p:64%;   --ton-schrift-basis:#ffffff;
  --schatten:0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.30);
  --schatten-hoch:0 8px 28px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.36);
  --schatten-dialog:0 24px 60px rgba(0,0,0,.62);
}
/* Automatik: der Rechner entscheidet. Nur wenn der Benutzer nichts anderes
   gewählt hat – deshalb der Zusatz [data-modus="auto"].                   */
@media (prefers-color-scheme: dark){
  :root[data-modus="auto"]{
    color-scheme: dark;
    --n-0:#171b22;  --n-25:#1a1f27; --n-50:#1e242d; --n-100:#242b35;
    --n-150:#2d3541; --n-200:#374050; --n-300:#4a5566; --n-400:#78849a;
    --n-500:#97a2b5; --n-600:#b6bfcd; --n-700:#d2d8e2; --n-800:#e6eaf0;
    --n-900:#f2f5f9; --n-950:#ffffff;
    --bg-basis:#10141a; --bg:var(--bg-basis);   /* die in der Verwaltung
     gewählte Hintergrundfarbe wird hier hineingemischt (js/app.js),
     damit die Einstellung auch im Dunkelmodus etwas bewirkt */
    --surface:#171b22; --surface-2:#1c222b; --surface-3:#232a35; --surface-4:#2c343f;
    --ink:#eef1f6; --ink-2:#b6bfcd; --ink-3:#8e99ab;
    --line:#2b3340; --line-2:#3d4757;
    --accent-weich:#1b2c44;
    --neu:#8a7bd4; --info:#5da2ee; --warn:#e3a723; --good:#35c68f; --crit:#f2706e;
    --neu-ink:#b7abe8; --info-ink:#8cc0f6; --warn-ink:#e9be6a;
    --good-ink:#63d7ab; --crit-ink:#f79a98;
    --ton-flaeche-p:20%;   --ton-flaeche-basis:var(--surface);
    --ton-rand-p:38%;      --ton-rand-basis:var(--surface);
    --ton-schrift-p:64%;   --ton-schrift-basis:#ffffff;
    --schatten:0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.30);
    --schatten-hoch:0 8px 28px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.36);
    --schatten-dialog:0 24px 60px rgba(0,0,0,.62);
    /* Ein Schatten aus hellem Grau ist auf dunklem Grund unsichtbar.    */
    --fest-schatten:8px 0 12px -8px rgba(0,0,0,.62);
  }
}

/* --- Dichte --------------------------------------------------------------
   Ändert Abstände und Grundschrift, sonst nichts.                         */
:root[data-dichte="kompakt"]{
  --s-3:6px; --s-4:9px; --s-5:12px; --s-6:14px; --s-7:18px; --s-8:24px;
  --tx-roh:13px; --hoehe:32px; --hoehe-s:26px;
}
:root[data-dichte="weit"]{
  --s-3:10px; --s-4:14px; --s-5:20px; --s-6:26px; --s-7:32px; --s-8:40px;
  --tx-roh:15px; --hoehe:40px; --hoehe-s:32px;
}

/* --- Präsentationsmodus --------------------------------------------------
   Für Projektor und Besprechungsraum: größere Schrift, ruhigere Fläche,
   Nebensächliches tritt zurück. Kein eigenes Layout – nur andere Werte.   */
:root[data-praesentation="1"]{
  --tx-roh:17px; --hoehe:44px; --hoehe-s:34px;
  --s-5:20px; --s-6:26px; --s-7:32px;
  /* Auch hier volle Breite – eine eigene Grenze wäre seit der Aufhebung
     oben eine Verengung, keine Erweiterung.                              */
  --breite-max:100%;
}
/* Im Präsentationsmodus treten die Filterfelder zurück – die Marken NICHT:
   ein gefiltertes Brett ohne den Hinweis darauf wäre eine falsche Aussage
   an die Wand geworfen. Nur der Erklärtext geht.                          */
:root[data-praesentation="1"] .pf-hinweis,
:root[data-praesentation="1"] .filterschalter,
:root[data-praesentation="1"] .filters,
:root[data-praesentation="1"] .chipbar,
:root[data-praesentation="1"] .pc-del{ display:none }
:root[data-praesentation="1"] .kpi .val{ font-size:var(--tx-3xl) }
:root[data-praesentation="1"] table{ font-size:var(--tx-l) }

/* Wer Bewegung nicht mag, bekommt keine.                                   */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ==========================================================================
   3. Grundlagen
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--ink);
  font:var(--tx-l)/1.5 var(--schrift);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* nichts läuft seitlich aus dem Fenster */
  padding-bottom:var(--mobilnav-hoehe);
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.011em;color:var(--ink)}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-5) 0}

/* Ein Fokusring für alles. Sichtbar nur bei Tastaturbedienung.            */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--fokus); outline-offset:2px; border-radius:var(--r-s);
}
header :focus-visible{ outline-color:#fff }

/* Nur für Vorleseprogramme sichtbar – für Text, der optisch entfällt.     */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Signalfarbe als Fläche – siehe --ton oben.                              */
.ton{
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
  border-color:color-mix(in srgb, var(--ton) var(--ton-rand-p), var(--ton-rand-basis));
}
.ton h2,.ton b,.ton strong{ color:inherit }

/* ==========================================================================
   4. Gerüst
   ========================================================================== */

/* --- Kopfzeile -----------------------------------------------------------
   Drei Zonen in einem Raster: Marke | Navigation | Aktionen.
   Ein Raster kann nicht umbrechen – die zweite Zeile, die bisher entstand,
   sobald rechts etwas dazukam, ist damit baulich ausgeschlossen.          */
header{
  position:sticky;top:0;z-index:40;
  background:var(--navy);color:var(--auf-kopf);
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}
.hbar{
  max-width:var(--breite-max);margin:0 auto;
  padding:var(--s-3) var(--s-6);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--s-5);
  min-height:var(--kopf-hoehe);
}
.brand{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.brand h1{font-size:var(--tx-xl);color:var(--auf-kopf);white-space:nowrap}
.brand span{font-size:var(--tx-s);color:var(--auf-kopf-2);white-space:nowrap}
#brandlogo{height:30px;max-width:150px;width:auto;object-fit:contain;display:block}

/* Navigation: mittige Zone, rollt bei Enge in sich selbst statt die Seite
   zu sprengen. Die Rollleiste selbst bleibt unsichtbar.                   */
.tabs{
  display:flex;gap:2px;justify-self:center;
  background:var(--auf-kopf-3);padding:3px;border-radius:var(--r-m);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  border:0;background:transparent;color:var(--auf-kopf-2);
  padding:0 var(--s-4);height:calc(var(--hoehe) - 4px);
  border-radius:var(--r-s);font-size:var(--tx-m);font-weight:550;
  display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;
  transition:background var(--takt),color var(--takt);
}
.tabs button:hover{background:var(--auf-kopf-3);color:var(--auf-kopf)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--navy)}
:root[data-modus="dunkel"] .tabs button[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.tabs .nav-sym{width:17px;height:17px;flex:0 0 17px;display:block}
.tabs .nav-txt{display:inline}

.hact{display:flex;align-items:center;gap:var(--s-2);justify-self:end}

/* --- Untere Navigation (nur Telefon) -------------------------------------
   Die Reiter verschwinden nicht, sie ziehen dorthin, wo der Daumen ist.   */
.mobilnav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(16,24,40,.10);
  padding:var(--s-1) var(--s-1) max(var(--s-1), env(safe-area-inset-bottom));
}
.mobilnav .mn-innen{display:flex}
.mobilnav button{
  flex:1;min-width:0;border:0;background:none;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s-2) 2px;border-radius:var(--r-s);
  font-size:10.5px;font-weight:600;line-height:1.2;position:relative;
}
.mobilnav button .nav-sym{width:21px;height:21px;display:block}
.mobilnav button .nav-txt{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mobilnav button[aria-selected="true"]{color:var(--accent)}
.mobilnav button[aria-selected="true"]::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  border-radius:0 0 2px 2px;background:var(--accent);
}
.mobilnav .tabcount{position:absolute;top:2px;right:calc(50% - 20px);margin:0}

/* --- Inhaltsbereich ------------------------------------------------------ */
main{max-width:var(--breite-max);margin:0 auto;padding:var(--s-6)}
.notice{
  margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-l);
  border:1px solid;font-size:var(--tx-m);--ton:var(--warn);
  background:color-mix(in srgb, var(--warn) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  border-color:color-mix(in srgb, var(--warn) var(--ton-rand-p), var(--ton-rand-basis));
  color:var(--warn-ink);
}
.notice b{color:inherit}

/* --- Opening-Sirene ------------------------------------------------------
   Steht in der Aktionszone rechts, nicht mehr zwischen Marke und Reitern.
   Dort war sie ein unbeschriftetes Symbol ohne erkennbare Zugehörigkeit
   und hat außerdem den Umbruch der Kopfzeile mitverursacht.               */
.sirene{
  border:0;background:transparent;padding:0 var(--s-3);height:var(--hoehe);
  display:flex;align-items:center;gap:var(--s-3);color:var(--auf-kopf-2);
  border-radius:var(--r-m);transition:background var(--takt);
}
.sirene:hover{background:var(--auf-kopf-3);color:var(--auf-kopf)}
.sirene svg{width:26px;height:26px;display:block;flex:0 0 26px}
.sirene .sz{font-size:var(--tx-xs);font-weight:600;letter-spacing:.02em;white-space:nowrap;text-align:left}
.sirene .sz b{display:block;font-size:var(--tx-m);color:var(--auf-kopf);line-height:1.15}
.sirene.aktiv svg{animation:sirenGlow .5s ease-in-out infinite alternate}
@keyframes sirenGlow{from{filter:drop-shadow(0 0 2px rgba(227,73,72,.4))}to{filter:drop-shadow(0 0 14px rgba(255,80,80,1))}}
.sirene.aktiv .lampe{animation:sirenLamp .5s steps(2) infinite}
@keyframes sirenLamp{0%{fill:#ff4d4d}50%{fill:#7a1212}100%{fill:#ff4d4d}}

/* --- Uhr in der Kopfzeile ------------------------------------------------
   Zeit in Tabellenziffern (die Ziffern springen beim Minutenwechsel nicht),
   darunter Wochentag und Datum kleiner und gedämpft. Abgesetzt durch eine
   feine senkrechte Linie statt durch eine graue Pille.                    */
.kr-uhr{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--s-4) 0 var(--s-5);margin-left:var(--s-1);
  border-left:1px solid var(--auf-kopf-linie);
  line-height:1.1;white-space:nowrap;user-select:none;
}
.kr-uhr .zeit{
  font-size:calc(var(--tx-basis) + 2px);font-weight:600;color:var(--auf-kopf);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.kr-uhr .zeit .sek{font-size:var(--tx-xs);font-weight:500;color:var(--auf-kopf-2);margin-left:1px}
.kr-uhr .dat{
  font-size:var(--tx-xs);font-weight:500;color:var(--auf-kopf-2);
  letter-spacing:.03em;margin-top:2px;font-variant-numeric:tabular-nums;
}

/* --- Knöpfe --------------------------------------------------------------
   Eine Höhe, ein Radius, ein Fokusring. Alles andere sind Varianten.      */
.btn{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  height:var(--hoehe);padding:0 var(--s-4);border-radius:var(--r-m);
  font-size:var(--tx-m);font-weight:550;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  white-space:nowrap;
  transition:background var(--takt),border-color var(--takt),color var(--takt);
}
.btn:hover{background:var(--surface-3);border-color:var(--line-2)}
.btn:active{background:var(--surface-4)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, #000);border-color:transparent}
.btn-ghost{background:var(--auf-kopf-3);border-color:var(--auf-kopf-linie);color:var(--auf-kopf)}
.btn-ghost:hover{background:color-mix(in srgb,#fff 22%,transparent);color:var(--auf-kopf)}
.btn-danger{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 34%,var(--surface));background:var(--surface)}
.btn-danger:hover{background:color-mix(in srgb,var(--crit) 10%,var(--surface))}
.btn-sm{height:var(--hoehe-s);padding:0 var(--s-3);font-size:var(--tx-s);border-radius:var(--r-s)}

/* ==========================================================================
   5. Bauteile
   ========================================================================== */

/* --- Karte ---------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--schatten)}
.card-h{
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
}
.card-h h2{font-size:var(--tx-l)}
.card-h .sub{font-size:var(--tx-s);color:var(--ink-3);margin-left:auto;font-weight:450}
.card-b{padding:var(--s-5)}

/* --- Kennzahlen ---------------------------------------------------------- */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-4);margin-bottom:var(--s-6);
}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:var(--s-4) var(--s-5);box-shadow:var(--schatten);
  min-width:0;
}
.kpi .lbl{
  font-size:var(--tx-xs);letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650;line-height:1.35;
}
.kpi .val{
  font-size:var(--tx-2xl);font-weight:660;letter-spacing:-.02em;margin-top:var(--s-1);
  color:var(--navy);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
:root[data-modus="dunkel"] .kpi .val{color:var(--ink)}
.kpi .val.sm{font-size:var(--tx-xl)}
.kpi .hint{font-size:var(--tx-s);color:var(--ink-3);margin-top:2px;line-height:1.4}
.kpi.alert .val{color:var(--crit-ink)}
.kpi.ok .val{color:var(--good-ink)}
.kpi.go{cursor:pointer;transition:transform var(--takt),box-shadow var(--takt),border-color var(--takt)}
.kpi.go:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--schatten-hoch)}
.kpi.go::after{content:"›";position:absolute;top:var(--s-3);right:var(--s-4);color:var(--ink-3);font-size:15px;line-height:1}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:var(--s-5)}
/* Ohne min-width:0 wird eine Rasterspalte so breit wie der Mindestbedarf
   ihres Inhalts – eine breite Tabelle zöge dann das ganze Raster auf.  */
.grid2 > *{min-width:0}

/* --- Balken und Säulen ---------------------------------------------------- */
.bars{display:flex;flex-direction:column;gap:var(--s-3)}
.bar-row{display:grid;grid-template-columns:minmax(84px,150px) 1fr auto;align-items:center;gap:var(--s-4)}
.bar-row.go{cursor:pointer;border-radius:var(--r-s);padding:2px 4px;margin:-2px -4px;transition:background var(--takt)}
.bar-row.go:hover{background:var(--accent-weich)}
.bar-row.go:hover .nm{color:var(--info-ink);font-weight:600}
.bar-row .nm{font-size:var(--tx-s);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--surface-3);border-radius:var(--r-s);height:16px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:var(--r-s);background:var(--accent);transition:width var(--takt-lang) ease}
.bar-row .vl{font-size:var(--tx-s);font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;min-width:88px;text-align:right}
.bar-row .vl small{display:block;font-weight:450;color:var(--ink-3);font-size:var(--tx-xs)}
.cols{display:flex;align-items:flex-end;gap:5px;height:158px;padding-top:var(--s-3)}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--s-2);min-width:0}
.col .cbar{width:100%;background:var(--accent);border-radius:var(--r-s) var(--r-s) 0 0;min-height:2px;transition:height var(--takt-lang) ease}
.col .clab{font-size:9.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.col .cval{font-size:var(--tx-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}
.empty{color:var(--ink-3);font-size:var(--tx-m);padding:var(--s-7);text-align:center}

/* --- Tabellen ------------------------------------------------------------- */
/* min-width:0 ist wichtig: als Rasterkind würde der Kasten sonst so breit
   wie der Mindestbedarf seiner Tabelle und zöge die ganze Spalte auf.     */
.tblwrap{overflow:auto;max-height:70vh;min-width:0;border-radius:0 0 var(--r-l) var(--r-l);-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--tx-s)}
th,td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-3);color:var(--ink-2);
  font-size:var(--tx-xs);letter-spacing:.03em;text-transform:uppercase;font-weight:650;
  border-bottom:1px solid var(--line-2);cursor:pointer;user-select:none;
}
thead th:hover{background:var(--surface-4)}
thead th.nosort{cursor:default}
thead th .ar{color:var(--accent);font-size:10px}
tbody tr:hover{background:var(--surface-2)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.act{text-align:right}
table.fix{table-layout:fixed}
table.fix td{overflow:hidden;text-overflow:ellipsis}
table.fix td.act{overflow:visible;text-overflow:clip;padding-left:var(--s-2);padding-right:var(--s-4)}
table.fix td.wrap{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}
th.stick,td.stick{position:sticky;right:0;background:var(--surface);box-shadow:-8px 0 10px -8px rgba(23,36,58,.16)}
thead th.stick{background:var(--surface-3);z-index:3}
tbody tr:hover td.stick{background:var(--surface-2)}

/* ================= Feste Spalten am linken Rand ==========================
   Das Gegenstück zu `.stick`: dort bleibt die Knopfspalte rechts stehen,
   hier bleiben die Spalten links stehen, die sagen, um WEN es geht. Eine
   Tabelle mit 24 Spalten ist auf keinem Bildschirm ganz zu sehen; wer nach
   rechts rollt, verlor bisher Kunde und Status aus dem Blick.

   Es sind dieselben Werte wie bei `.stick`, nur gespiegelt – kein zweites
   Aussehen, keine zweite Farbe. Die feste Spalte fällt nicht auf, sie
   bleibt nur stehen.

   Der Abstand von links (`left`) steht NICHT hier: er ist die Summe der
   Breiten links davon und wird nach dem Zeichnen gesetzt (`festAusrichten`
   in app.js). Fest verdrahtete Werte wären falsch, sobald ein Name länger
   ist als der andere.                                                     */
th.fest,td.fest{position:sticky;left:0;background:var(--surface);z-index:1}
thead th.fest{background:var(--surface-3);z-index:4}
tbody tr:hover td.fest{background:var(--surface-2)}
/* Die letzte feste Spalte trägt die Kante. Der Schatten erscheint erst,
   wenn wirklich gerollt wurde – steht die Tabelle am Anfang, gäbe es
   nichts zu verdecken, und ein Schatten wäre eine Behauptung.            */
th.fest.kante,td.fest.kante{border-right:1px solid var(--line-2)}
.tblwrap.los th.fest.kante,
.tblwrap.los td.fest.kante{box-shadow:var(--fest-schatten, 8px 0 10px -8px rgba(23,36,58,.24))}
/* Ein einzelner sehr langer Name darf die feste Spalte nicht für alle
   Zeilen breit machen – sonst frisst ein Kunde die halbe Fläche. Der
   volle Text steht im Titel.                                             */
td.fest.gekuerzt{max-width:230px;overflow:hidden;text-overflow:ellipsis}
tfoot td{background:var(--surface-3);font-weight:650;border-top:1px solid var(--line-2);border-bottom:0}

/* --- Abzeichen ------------------------------------------------------------ */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px var(--s-3);border-radius:var(--r-rund);
  font-size:var(--tx-xs);font-weight:600;white-space:nowrap;
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ton);flex:0 0 6px}
.b-neu{--ton:var(--neu)}      .b-bearb{--ton:var(--info)}
.b-klaer{--ton:var(--warn)}   .b-erl{--ton:var(--good)}
.b-storno{--ton:var(--crit)}  .b-off{--ton:var(--n-400)}
.b-off{color:var(--ink-2)}
.warncell{color:var(--crit-ink);font-weight:600;white-space:normal;max-width:280px;line-height:1.35}
.okcell{color:var(--good-ink)}

/* --- Filterleiste und Werkzeugleisten -------------------------------------- */
.filters,.toolbar{
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-end;
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);
}
.toolbar{align-items:center}
.f{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.f label{font-size:var(--tx-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.f input,.f select{
  border:1px solid var(--line-2);border-radius:var(--r-m);
  height:var(--hoehe);padding:0 var(--s-3);font-size:var(--tx-m);
  background:var(--surface);color:var(--ink);min-width:132px;
}
.f input:focus,.f select:focus{border-color:var(--accent);box-shadow:var(--fokus-ring)}
.f.grow{flex:1;min-width:200px} .f.grow input{width:100%}

/* Viele Felder brauchen ein Raster, keine Reihe. Bei einem Dutzend
   Merkmalen franst der Zeilenumbruch aus: unterschiedlich breite Felder,
   Löcher am Zeilenende, nichts steht untereinander. Im Raster sind alle
   Spalten gleich breit und alle Felder liegen auf einer Kante.           */
.filters.raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:var(--s-3) var(--s-4);align-items:end;
}
.filters.raster .f{min-width:0}
/* Ausdrücklich nur die unmittelbaren Eingabefelder: in der Stufenwahl
   stecken versteckte Ankreuzfelder, die von einer Breitenregel sonst auf
   volle Spaltenbreite gezogen würden – und damit das Raster sprengen.    */
.filters.raster .f > input,.filters.raster .f > select{min-width:0;width:100%}
.filters.raster .f.breit{grid-column:span 2}
.filters.raster .f.voll{grid-column:1/-1}
.chipbar{display:flex;gap:var(--s-3);align-items:center;margin-left:auto;font-size:var(--tx-s);color:var(--ink-3);flex-wrap:wrap}

/* --- Stufenwahl und Filtermarken --------------------------------------------
   Die Stufen stehen als Chips nebeneinander, nach Rubrik gruppiert. Jeder
   Chip trägt den Farbpunkt seiner Stufe – dieselbe Farbe wie die Spalte,
   die er ein- und ausschaltet.                                            */
/* Die Stufenwahl steht als eigener Block unter den Feldern, durch eine
   Linie abgesetzt. Jede Rubrik bekommt eine Zeile: die Beschriftung links
   in fester Breite, damit die Chipreihen untereinander auf einer Kante
   beginnen und nicht gegeneinander verrutschen.                          */
.stufenwahl{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:var(--s-2) var(--s-4);width:100%;align-items:center;
  padding-top:var(--s-3);border-top:1px solid var(--line);
}
.sw-titel{
  font-size:var(--tx-xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650;white-space:nowrap;
}
.sw-reihe{display:flex;flex-wrap:wrap;gap:var(--s-2);min-width:0}
/* Die Chips sind <label> und lägen sonst unter der Beschriftungsregel der
   Filterfelder – klein, grau und in Großbuchstaben. Zwei Klassen setzen
   das ausdrücklich zurück.                                              */
.stufenwahl .sw-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:0 var(--s-3);height:var(--hoehe-s);
  font-size:var(--tx-s);font-weight:500;white-space:nowrap;
  text-transform:none;letter-spacing:0;
  transition:background var(--takt),border-color var(--takt),color var(--takt);
}
.stufenwahl .sw-chip::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--ton);flex:0 0 8px}
.stufenwahl .sw-chip:hover{background:var(--surface-3);color:var(--ink)}
.stufenwahl .sw-chip.an{border-color:var(--accent);background:var(--accent-weich);
  color:var(--info-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
/* Das Ankreuzfeld selbst wird nicht gebraucht – der Chip ist der Schalter.
   Es bleibt für Tastatur und Vorleseprogramm bedienbar.                   */
.stufenwahl .sw-chip input{
  position:absolute;opacity:0;margin:0;padding:0;border:0;
  width:1px;height:1px;min-width:0;pointer-events:none;
}
.stufenwahl .sw-chip:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* Was gerade gefiltert wird, steht unter der Leiste – als Marke, die man
   einzeln wieder abnehmen kann. Ein Filter, den man nicht sieht, ist ein
   Fehler, den man sucht.                                                  */
.pf-fuss{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.pf-marken{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.pf-mtitel{font-size:var(--tx-xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650}
.pf-marke{
  display:inline-flex;align-items:center;gap:var(--s-2);
  border:1px solid var(--accent);background:var(--accent-weich);color:var(--info-ink);
  border-radius:999px;padding:0 var(--s-3);height:var(--hoehe-s);
  font-size:var(--tx-s);font-weight:550;cursor:pointer;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-marke span{font-size:var(--tx-m);opacity:.7;line-height:1}
.pf-marke:hover{background:var(--surface);border-color:var(--crit);color:var(--crit-ink)}
.pf-hinweis{font-size:var(--tx-xs);color:var(--ink-3);max-width:100ch;flex:1 1 100%}
/* Gefilterte Kennzahlen sagen, dass sie gefiltert sind. Eine Zahl, die
   plötzlich viel kleiner ist, ohne dass jemand weiß warum, ist schlimmer
   als gar keine Zahl.                                                     */
.pf-kpihinweis{
  margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);
  font-size:var(--tx-s);color:var(--warn-ink);
  background:color-mix(in srgb, var(--warn) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  border:1px solid color-mix(in srgb, var(--warn) var(--ton-rand-p), var(--ton-flaeche-basis));
}
.pf-versteckt{
  font-size:var(--tx-s);color:var(--ink-3);margin:0 0 var(--s-3);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line);display:inline-block;
}

/* Zusammenklappbare Filter – auf jeder Breite. Der Knopf sagt, was
   drinsteckt; es verschwindet nichts unangekündigt.                       */
.filterschalter{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--s-3);
  border:0;background:none;cursor:pointer;text-align:left;
  padding:var(--s-3) var(--s-5);font-size:var(--tx-m);font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--line);
  min-height:var(--hoehe);transition:background var(--takt);
}
.filterschalter:hover{background:var(--surface-2)}
.filterschalter:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.filterschalter .pf{color:var(--ink-3);font-weight:450;font-size:var(--tx-s);white-space:nowrap}
.filters[hidden]{display:none}

/* --- Formular und Dialog ---------------------------------------------------- */
dialog{
  border:0;border-radius:var(--r-xl);padding:0;
  width:min(980px,94vw);max-width:100vw;
  background:var(--surface);color:var(--ink);
  box-shadow:var(--schatten-dialog);
}
dialog::backdrop{background:rgba(9,13,20,.52);backdrop-filter:blur(2px)}
.dlg-h{
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  background:var(--surface-2);border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.dlg-h h2{font-size:var(--tx-xl)}
/* --- Das Etikett über dem Titel ---------------------------------------------
   Es sagt, WAS für ein Ding diese Maske ist. Es steht in einer eigenen Zeile
   über dem Namen (volle Breite in der Flexzeile), damit es den Titel nicht
   verkürzt, und ist bewusst klein: eine Auskunft, keine Überschrift.     */
.dlg-h .etikett{
  width:100%;margin:0 0 -4px;
  font:650 var(--tx-xs)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.dlg-h.ton .etikett{color:inherit;opacity:.85}
/* --- Kunde oder Auftrag? Auf einen Blick --------------------------------
   Beide Karten sehen sich zwangsläufig ähnlich – gleiche Bauform, gleiche
   Abstände. Damit trotzdem nie ein Zweifel besteht, in welcher man steht,
   tragen die beiden Etiketten verschiedene Akzente aus der vorhandenen
   Palette: der Kontakt den Akzent der Anwendung, der Auftrag das
   Grün des Abschlusses. Dazu je eine schmale Plakette, damit die
   Unterscheidung auch ohne Farbwahrnehmung trägt.                       */
.dlg-h .etikett.et-kunde,
.dlg-h .etikett.et-auftrag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;border:1px solid;
}
.dlg-h .etikett.et-kunde::before,
.dlg-h .etikett.et-auftrag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
}
.dlg-h .etikett.et-kunde{
  color:var(--info-ink);border-color:color-mix(in srgb,var(--info) 45%,transparent);
  background:color-mix(in srgb,var(--info) 12%,var(--surface));
}
.dlg-h .etikett.et-auftrag{
  color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 45%,transparent);
  background:color-mix(in srgb,var(--good) 12%,var(--surface));
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .dlg-h .etikett.et-kunde{border-color:var(--line-2);background:var(--surface-3)}
  .dlg-h .etikett.et-auftrag{border-color:var(--line-2);background:var(--surface-3)}
}
/* Dieselbe Sprache auf dem Brett: die Auftragskarte trägt links den
   grünen Streifen ihrer Stufe und oben rechts ihre Nummer; die
   Kundenkarte hat keine Nummer. Damit auch die Art benannt ist, bekommt
   die Kundenkarte im Trichter eine eigene kleine Marke.                 */
.pc-art{
  display:inline-flex;align-items:center;gap:5px;
  font:650 var(--tx-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--info-ink);
}
.pc-art::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* --- Kopfzeile der Kundenliste ----------------------------------------------
   Links die Zahlen, rechts die Bedienung. Wird es eng, rutscht das Blättern
   in die nächste Zeile, statt die Zahlen zu quetschen; der Hinweis
   („Zeile anklicken") verschwindet dann als Erstes – er ist der
   verzichtbarste Teil.                                                    */
.kliste-kopf{
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  padding:var(--s-2) var(--s-5); border-bottom:1px solid var(--line);
  font-size:var(--tx-s); color:var(--ink-3);
}
.kliste-kopf b{color:var(--ink)}
.kliste-kopf .sp{flex:1 1 auto}
.kliste-hin{color:var(--ink-3)}
.kps{display:inline-flex; align-items:center; gap:var(--s-2); white-space:nowrap}
.kps label{font-size:var(--tx-xs); text-transform:uppercase; letter-spacing:.04em}
.kps select{
  height:var(--hoehe-s); border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--surface); color:var(--ink); padding:0 var(--s-2);
  font-size:var(--tx-s);
}
.kseiten{display:inline-flex; align-items:center; gap:var(--s-1); white-space:nowrap}
.kseiten .btn{min-width:30px; justify-content:center; padding:0 var(--s-2)}
.kseiten .btn:disabled{opacity:.4; cursor:default}
.kseiten-n{
  padding:0 var(--s-2); font-variant-numeric:tabular-nums; color:var(--ink-2);
  font-weight:600;
}
@media (max-width:760px){
  .kliste-hin{display:none}
  .kliste-kopf{gap:var(--s-3)}
}

/* --- Der Weg eines Auftrags -------------------------------------------------
   Punkte auf einer Linie, in der Auftragskarte über dem Kundenkopf. Er
   beantwortet vier Fragen mit einem Bild: wo steht der Auftrag, was liegt
   hinter ihm, was kommt, wie weit ist er.

   Die Linie ist kein eigenes Element, sondern ein Pseudoelement JEDES
   Punktes, das nach links zum vorigen reicht. So bleibt sie beim Umbruch
   und beim seitlichen Scrollen an ihren Punkten – eine durchgezogene Linie
   im Hintergrund würde daneben liegen, sobald sich etwas verschiebt.     */
.aweg{margin:0 0 var(--s-5)}
.awbahn{display:flex; align-items:flex-start}
.awp{
  flex:1 1 0; min-width:0; position:relative;
  background:none; border:0; padding:0 2px; cursor:pointer;
  font:inherit; color:inherit; text-align:center;
}
.awp::before{
  content:""; position:absolute; top:9px; left:calc(-50% + 10px); right:calc(50% + 10px);
  height:2px; background:var(--line-2);
}
.awp:first-child::before{display:none}
.awp.hinter::before{background:color-mix(in srgb, var(--stufe) 45%, var(--line-2))}
.awr{
  width:20px; height:20px; border-radius:50%; margin:0 auto var(--s-2);
  border:2px solid var(--line-2); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--takt), border-color var(--takt), background var(--takt);
}
.awp:hover:not(:disabled) .awr{transform:scale(1.15); border-color:var(--stufe)}
.awp:focus-visible{outline:none}
.awp:focus-visible .awr{box-shadow:var(--fokus-ring)}
/* Zurückliegende Punkte sind gefüllt, nicht abgehakt: der Auftrag ist
   daran vorbei – ob dort etwas geschehen ist, sagt der Auftragsverlauf. */
.awp.hinten .awr{
  background:color-mix(in srgb, var(--stufe) 55%, var(--surface));
  border-color:color-mix(in srgb, var(--stufe) 55%, var(--line-2));
}
.awp.hinten .awr::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--stufe) 90%, var(--surface));
}
.awp.jetzt .awr{
  border-color:var(--stufe); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--stufe) 22%, transparent);
}
.awp.jetzt .awr::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--stufe)}
.awl{
  display:block; font-size:var(--tx-xs); color:var(--ink-3);
  line-height:1.25; overflow-wrap:anywhere;
}
.awp.jetzt .awl{color:var(--ink); font-weight:650}
.awp.hinten .awl{color:var(--ink-2)}
/* Gesperrt: von vornherein grau. Kein Knopf, der beim Klick ablehnt.     */
.awp.zu{cursor:not-allowed}
.awp.zu .awr{border-style:dashed; border-color:var(--line-2); background:var(--surface-2)}
.awp.zu .awl{color:var(--ink-3); opacity:.7}
.awsatz{margin:var(--s-3) 0 0; font-size:var(--tx-s); color:var(--ink-3)}
.awsatz b{color:var(--ink-2)}
/* Auf dem Telefon wird es eng: die Bahn scrollt seitlich, die Punkte
   behalten ihre Berührungsfläche.                                        */
@media (max-width:560px){
  .awbahn{overflow-x:auto; scrollbar-width:thin; padding-bottom:var(--s-2)}
  .awp{flex:0 0 84px}
}
@media (pointer:coarse){
  .awp{padding-top:var(--s-2); padding-bottom:var(--s-2)}
}

/* --- Wegweiser: Verweis und Löschen nebeneinander --------------------------
   Der Verweis nimmt die Breite, der Löschknopf nur, was er braucht. Auf
   dem Telefon rutscht er unter die Zeile, statt sie zu quetschen.        */
.aw-paar{display:flex;align-items:stretch;gap:var(--s-2)}
.aw-paar > .aw-zeile{flex:1 1 auto;min-width:0}
.aw-paar > .aw-del{flex:0 0 auto;align-self:center}
@media (max-width:560px){
  .aw-paar{flex-wrap:wrap}
  .aw-paar > .aw-del{width:100%}
}
/* Ein eingefärbter Dialogkopf sagt über seine Farbe, worum es geht.
   Braucht eine eigene Regel, weil .dlg-h sonst die Fläche von .ton
   überschriebe – gleiche Spezifität, aber später in der Datei.           */
.dlg-h.ton{
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  border-bottom-color:color-mix(in srgb, var(--ton) var(--ton-rand-p), var(--ton-rand-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
}
.dlg-h.ton h2{color:inherit}
.dlg-h.ton .nr{background:color-mix(in srgb, var(--ton) 16%, var(--surface));color:inherit}
.dlg-h .nr{font:600 var(--tx-s)/1 var(--mono);color:var(--ink-3);background:var(--surface-3);padding:5px var(--s-3);border-radius:var(--r-s)}
/* --- Anklickbare Auftragsnummer ---------------------------------------------
   Sie steht dort, wo früher die Anlagerunde stand: in der Kopfzeile der
   Kundenakte und in der Angebotstabelle. Sie sieht aus wie eine Nummern-
   marke — nur dass sie führt, und das muss man ihr ansehen.              */
.nr-reihe{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.nr-go,.dlg-h .nr-go{
  font:600 var(--tx-s)/1 var(--mono);color:var(--ink-2);
  background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:5px var(--s-3);
  cursor:pointer;white-space:nowrap;
}
.nr-go:hover,.dlg-h .nr-go:hover{
  border-color:var(--accent);color:var(--info-ink);background:var(--accent-weich);
}
.nr-go:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dlg-b{padding:var(--s-6);max-height:66vh;overflow:auto;-webkit-overflow-scrolling:touch}
.dlg-f{
  padding:var(--s-4) var(--s-6);border-top:1px solid var(--line);
  display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;
  background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);
}
.dlg-f .sp{margin-left:auto}
fieldset{border:0;padding:0;margin:0 0 var(--s-6);min-width:0}
fieldset legend{
  font-size:var(--tx-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  padding:0 0 var(--s-3);width:100%;border-bottom:1px solid var(--line);margin-bottom:var(--s-4);
}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:var(--s-4)}
/* --- Das Adressraster der Kontaktdaten --------------------------------------
   Vier feste Spalten, damit die Anschrift als Gruppe zusammensteht: Anrede /
   Nachname / Vorname / Telefon, darunter Straße / Hausnummer / PLZ, darunter
   Ort / IdNr. / E-Mail. Mit dem sonst üblichen auto-fit stünde die Hausnummer
   je nach Fensterbreite mal neben der Straße, mal in der nächsten Zeile.

   Gemessen wird die Breite des Feldsatzes, nicht die des Fensters: neben der
   Kundenkarte kann die Chatspalte stehen, und dann ist das Fenster breit,
   die Maske aber schmal.                                                  */
.kd{container-type:inline-size}
.fgrid.adr{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid.adr .sp2{grid-column:span 2}
@container (max-width:760px){
  .fgrid.adr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:420px){
  .fgrid.adr{grid-template-columns:minmax(0,1fr)}
  .fgrid.adr .sp2{grid-column:span 1}
}
/* Ohne Unterstützung für Container-Abfragen bleibt es beim festen Raster;
   damit dort nichts herausragt, greift zusätzlich die Fensterbreite.     */
@supports not (container-type:inline-size){
  @media (max-width:900px){ .fgrid.adr{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:560px){ .fgrid.adr{grid-template-columns:minmax(0,1fr)}
                            .fgrid.adr .sp2{grid-column:span 1} }
}
/* Der Zusatz in einer Legende ist Fließtext, nicht Beschriftung.         */
.lg-zusatz{text-transform:none;letter-spacing:0;font-weight:500}
/* Steht unter einer Übersicht und sagt, was hier NICHT geht und wo statt-
   dessen. Ohne diesen Satz sucht man den Knopf, den es nicht mehr gibt. */
.wohin{
  margin-top:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px dashed var(--line-2);border-radius:var(--r-m);
  background:var(--surface-2);color:var(--ink-2);
  font-size:var(--tx-s);line-height:1.5;
}
.wohin b{color:var(--ink)}
/* ================== Die Terminlage der Auftragskarte ===================
   Zwei Zeilen, gleich gebaut: Wiedervorlage und Zweitgespräch. Sie
   beantworten verschiedene Fragen und werden nie zusammengefasst – aber
   sie werden gleich dargestellt, damit die Karte eine Karte bleibt.

   Der Streifen links sagt die Lage: ruhig für „steht an", rot für
   „überfällig", grau für „nichts offen". Farbe ist hier die Auskunft,
   nicht der Schmuck – deshalb steht sie zusätzlich als Wort daneben.    */
.atl{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.atl-zeile{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r-m);background:var(--surface-2);
  font-size:var(--tx-s);line-height:1.4;
}
.atl-zeile.offen{border-left-color:var(--good);}
.atl-zeile.spaet{border-left-color:var(--crit);background:color-mix(in srgb, var(--crit) 7%, var(--surface-2))}
.atl-zeile.leer {border-left-color:var(--line-2);color:var(--ink-3)}
.atl-art{
  flex:0 0 auto;min-width:118px;font-weight:650;color:var(--ink-2);
  font-size:var(--tx-s);
}
.atl-wert{flex:1 1 auto;min-width:0;color:var(--ink);font-weight:600}
.atl-zeile.leer .atl-wert{color:var(--ink-3);font-weight:500}
.atl-lage{
  flex:0 0 auto;font-size:var(--tx-xs,11.5px);text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);font-weight:650;
}
.atl-zeile.spaet .atl-lage{color:var(--crit-ink)}
.atl-zeile.offen .atl-lage{color:var(--good-ink)}
.atl-btn{flex:0 0 auto}
/* Auf dem Telefon steht die Art über dem Wert – nebeneinander bliebe für
   das Datum kein Platz.                                                 */
@media (max-width:560px){
  .atl-zeile{gap:var(--s-1)}
  .atl-art{flex:1 0 100%;min-width:0}
  .atl-btn{flex:1 0 100%;margin-top:var(--s-1)}
}
.fld{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.fld label{font-size:var(--tx-s);font-weight:600;color:var(--ink-2)}
.fld input,.fld select{
  border:1px solid var(--line-2);border-radius:var(--r-m);
  height:var(--hoehe);padding:0 var(--s-4);font-size:var(--tx-m);
  background:var(--surface);color:var(--ink);width:100%;
}
.fld textarea{
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:var(--s-3) var(--s-4);
  font:var(--tx-s)/1.6 var(--mono);color:var(--ink);background:var(--surface);
  width:100%;resize:vertical;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:var(--fokus-ring)}
.fld .hint{font-size:var(--tx-s);color:var(--ink-3);line-height:1.45}
.fld.req label::after{content:" *";color:var(--crit)}
.calcbox{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--s-3);
  background:var(--surface-3);border-radius:var(--r-m);padding:var(--s-4);
}
.calcbox div{font-size:var(--tx-s);color:var(--ink-3)}
.calcbox strong{display:block;font-size:var(--tx-xl);color:var(--navy);font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums}
:root[data-modus="dunkel"] .calcbox strong{color:var(--ink)}
.phlist{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.ph{
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-s);
  padding:3px var(--s-2);font-size:var(--tx-xs);font-family:var(--mono);color:var(--ink-2);cursor:pointer;
}
.ph:hover{border-color:var(--accent);background:var(--accent-weich);color:var(--info-ink)}
.angsent{display:inline-block;margin-top:3px;font-size:var(--tx-xs);color:var(--good-ink);font-weight:600}
.angwahl{
  display:flex;align-items:center;gap:var(--s-4);border:1px solid var(--line-2);
  border-radius:var(--r-m);padding:var(--s-4);cursor:pointer;background:var(--surface-2);
}
.angwahl:hover{border-color:var(--accent);background:var(--accent-weich)}
.angwahl input{margin:0}
.angwahl>span:first-of-type{flex:1;line-height:1.45;min-width:0}
.angertrag{font-weight:650;color:var(--good-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-ang{
  margin-top:var(--s-2);background:var(--accent-weich);
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--surface));
  border-radius:var(--r-s);padding:5px var(--s-3);font-size:var(--tx-s);color:var(--info-ink);line-height:1.45;
}
.angadd{margin-top:var(--s-2)}
.formmsg{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);font-size:var(--tx-s);line-height:1.5;border:1px solid}
.formmsg.bad{--ton:var(--crit);background:color-mix(in srgb,var(--crit) var(--ton-flaeche-p),var(--ton-flaeche-basis));
  border-color:color-mix(in srgb,var(--crit) var(--ton-rand-p),var(--ton-rand-basis));color:var(--crit-ink)}
.formmsg.good{--ton:var(--good);background:color-mix(in srgb,var(--good) var(--ton-flaeche-p),var(--ton-flaeche-basis));
  border-color:color-mix(in srgb,var(--good) var(--ton-rand-p),var(--ton-rand-basis));color:var(--good-ink)}
.formmsg.neutral{background:var(--surface-3);border-color:var(--line);color:var(--ink-2)}

.editrow input,.editrow select{
  border:1px solid transparent;background:transparent;border-radius:var(--r-s);
  height:var(--hoehe-s);padding:0 var(--s-2);width:100%;font-size:var(--tx-s);color:var(--ink);
}
.editrow input:hover,.editrow select:hover{border-color:var(--line-2);background:var(--surface)}
.editrow input:focus,.editrow select:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--fokus-ring)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r-rund);
  padding:4px var(--s-2) 4px var(--s-4);font-size:var(--tx-s);
}
.chip button{border:0;background:transparent;color:var(--ink-3);font-size:15px;line-height:1;padding:0 5px;border-radius:50%}
.chip button:hover{color:var(--crit-ink);background:color-mix(in srgb,var(--crit) 12%,var(--surface))}
.addline{display:flex;gap:var(--s-3);margin-top:var(--s-4);flex-wrap:wrap}
.addline input{
  flex:1;min-width:160px;border:1px solid var(--line-2);border-radius:var(--r-m);
  height:var(--hoehe);padding:0 var(--s-4);font-size:var(--tx-m);background:var(--surface);color:var(--ink);
}
.addline input:focus{border-color:var(--accent);box-shadow:var(--fokus-ring)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--s-7) + var(--mobilnav-hoehe));
  transform:translateX(-50%) translateY(14px);
  background:var(--n-900);color:var(--n-0);padding:var(--s-4) var(--s-6);
  border-radius:var(--r-m);font-size:var(--tx-m);font-weight:550;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  z-index:99;box-shadow:var(--schatten-hoch);max-width:min(92vw,520px);text-align:center;
}
:root[data-modus="dunkel"] .toast{background:var(--surface-4);color:var(--ink);border:1px solid var(--line-2)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none !important}

.telbtn{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--info-ink);border-radius:var(--r-s);
  padding:2px var(--s-2);text-decoration:none;font-size:var(--tx-xs);font-weight:600;
  min-height:22px;cursor:pointer;
  transition:background var(--takt),border-color var(--takt),color var(--takt);
}
.telbtn:hover{background:var(--accent-weich);border-color:var(--accent);color:var(--accent)}
.telbtn svg{flex:0 0 13px}
.pcard .telbtn{padding:1px var(--s-2)}
.fld .telrow{display:flex;gap:var(--s-3);align-items:center}
.fld .telrow input{flex:1;min-width:0}
.fld .telrow .telbtn{height:var(--hoehe);padding:0 var(--s-4);font-size:var(--tx-s)}

.nurbar{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  background:var(--accent-weich);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--surface));
  border-radius:var(--r-l);padding:var(--s-3) var(--s-5);margin-bottom:var(--s-4);
  font-size:var(--tx-m);color:var(--info-ink);
}
.klick{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--takt)}
.klick:hover{text-decoration-color:currentColor}
.tabcount{
  display:inline-block;min-width:17px;padding:0 5px;margin-left:5px;border-radius:var(--r-rund);
  background:var(--crit);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;text-align:center;
}
.selbar{
  display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-5);
  background:var(--accent-weich);border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,var(--surface));
  font-size:var(--tx-m);color:var(--info-ink);font-weight:550;
}
.selbar select{
  border:1px solid var(--line-2);border-radius:var(--r-m);height:var(--hoehe);
  padding:0 var(--s-3);font-size:var(--tx-m);background:var(--surface);color:var(--ink);min-width:170px;
}
.selgrp{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.selgrp label{font-size:var(--tx-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);font-weight:650}
.selgrp select{min-width:150px}
.drop{
  border:2px dashed var(--line-2);border-radius:var(--r-xl);padding:var(--s-8) var(--s-5);
  text-align:center;color:var(--ink-3);background:var(--surface-2);
  transition:border-color var(--takt),background var(--takt);cursor:pointer;
}
.drop.over{border-color:var(--accent);background:var(--accent-weich);color:var(--info-ink)}
.drop b{display:block;color:var(--ink);font-size:var(--tx-l);margin-bottom:var(--s-1)}
td .cb,th .cb{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;vertical-align:-2px}
/* Griff um ein Auswahlkästchen. Auf dem Desktop ändert er nichts; am
   Finger liefert er die 40 Pixel Trefferfläche, ohne die Zeile höher zu
   machen – deshalb der negative Rand.                                     */
.cbf{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;vertical-align:middle}

.segbar{display:flex;gap:var(--s-1);padding:var(--s-4) var(--s-5) 0;flex-wrap:wrap}
.seg{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  height:var(--hoehe);padding:0 var(--s-4);border-radius:var(--r-m);
  font-size:var(--tx-m);font-weight:550;display:inline-flex;align-items:center;gap:var(--s-2);
}
.seg:hover{background:var(--surface-3)}
.seg[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-modus="dunkel"] .seg[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.seg .n{background:var(--surface-3);color:var(--ink-2);border-radius:var(--r-rund);padding:1px var(--s-2);font-size:var(--tx-xs);font-weight:700}
.seg[aria-pressed="true"] .n{background:rgba(255,255,255,.22);color:#fff}

/* --- Kanban ---------------------------------------------------------------
   Bleibt waagerecht rollend – das ist auf Touch die richtige Form. Neu ist
   das Einschnappen, damit eine Spalte immer bündig steht.                  */
.kanban{
  display:flex;gap:var(--s-4);overflow-x:auto;padding-bottom:var(--s-3);
  align-items:flex-start;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
/* Die Spalten teilen sich den freien Platz, statt rechts eine Lücke zu
   lassen – wachsen aber nicht ins Uferlose. Passen sie nicht mehr alle
   nebeneinander, rollt die Leiste wie bisher.                            */
.kcol{
  flex:1 1 236px;min-width:236px;max-width:380px;scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--schatten);display:flex;flex-direction:column;max-height:calc(100vh - 300px);
}
.kcol.over{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-weich)}
.kcol.handover{background:linear-gradient(180deg,var(--surface-2),var(--surface) 60px)}
.uebergabe{color:var(--ink-2);font-weight:600}
.kcol-h{padding:var(--s-3) var(--s-4);border-top:3px solid;border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:1px solid var(--line)}
.kcol-h .kt{display:flex;align-items:center;gap:var(--s-2);font-size:var(--tx-m);font-weight:650;color:var(--ink)}
.kdot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.kn{margin-left:auto;border-radius:var(--r-rund);padding:1px var(--s-3);font-size:var(--tx-xs);font-weight:700}
.ksum{font-size:var(--tx-xs);color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.kbody{padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3);overflow-y:auto}
.kempty{border:1px dashed var(--line-2);border-radius:var(--r-m);padding:var(--s-6) var(--s-3);text-align:center;color:var(--ink-3);font-size:var(--tx-s)}
.lostzone{
  margin-top:var(--s-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--schatten);border-top:3px solid var(--crit);
}
.lostzone.over{outline:2px dashed var(--crit);outline-offset:-2px;background:color-mix(in srgb,var(--crit) 7%,var(--surface))}
.lostzone-h{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.lostzone-h .kt{display:flex;align-items:center;gap:var(--s-2);font-size:var(--tx-m);font-weight:650;color:var(--ink)}
.lostzone-h .hint{margin-left:auto;font-size:var(--tx-s);color:var(--ink-3)}
.lostgrid{padding:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3);max-height:230px;overflow-y:auto}
.lostgrid .pcard{flex:0 0 236px}

.pcard{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid;
  border-radius:var(--r-m);padding:var(--s-3) var(--s-4);cursor:grab;
  box-shadow:var(--schatten);transition:box-shadow var(--takt),transform var(--takt);
}
.pcard:hover{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.pcard.drag{opacity:.45}
.pc-top{display:flex;align-items:center;gap:var(--s-2);justify-content:space-between;font-size:var(--tx-m);min-width:0}
.pc-top b{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc-sum{font-size:var(--tx-xl);font-weight:650;color:var(--navy);margin-top:var(--s-1);font-variant-numeric:tabular-nums}
:root[data-modus="dunkel"] .pc-sum{color:var(--ink)}
.pc-meta{font-size:var(--tx-s);color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die Merkzettel an der Karte teilen sich eine Bauform: Fläche und Schrift
   kommen aus --ton, nur der Ton wechselt.                                 */
.pc-wv,.pc-dok,.pc-zg,.pc-lost{
  margin-top:var(--s-2);font-size:var(--tx-s);font-weight:600;
  border-radius:var(--r-s);padding:3px var(--s-2);display:inline-block;
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
}
.pc-wv{--ton:var(--warn)}  .pc-dok{--ton:var(--good)}
.pc-zg{--ton:var(--neu)}   .pc-lost{--ton:var(--crit)}
.pc-wv.due,.pc-zg.due{--ton:var(--crit)}
/* Auf der Auftragskarte steht der Name des Kunden allein in der ersten
   Zeile: er ist das, wonach man sucht. Nummer und Tarif stehen darunter –
   nebeneinander gequetscht wäre der Name abgeschnitten worden.           */
.pc-name{font-size:var(--tx-m);font-weight:650;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-marken{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:3px}
/* Der Kunde steht auf der Auftragskarte unter dem Betrag: er ist die
   gemeinsame Angabe zweier Karten desselben Kunden, nicht die
   unterscheidende. Abgesetzt durch eine feine Linie, damit klar ist, wo
   der Auftrag aufhört und der Mensch anfängt.                            */
.pc-kunde{
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px dashed var(--line);
  font-size:var(--tx-s);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Auftragskarte: gleiche Bauform wie die Kundenkarte, nur mit dem
   Pflichtbalken. Der Balken zeigt, wie weit dieser eine Auftrag ist –
   nicht, wie weit der Kunde ist.                                          */
.pc-pf{margin-top:var(--s-2);display:flex;align-items:center;gap:var(--s-2)}
.pf-bar{flex:0 0 58px;height:5px;border-radius:999px;background:var(--line-2);overflow:hidden}
.pf-bar>span{display:block;height:100%;border-radius:999px;background:var(--good);transition:width var(--takt)}
.pf-tx{font-size:var(--tx-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc-foot{margin-top:var(--s-2);font-size:var(--tx-xs);color:var(--ink-3);border-top:1px solid var(--line);padding-top:var(--s-2);display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.pc-del{margin-left:auto;border:0;background:transparent;color:var(--ink-3);font-size:var(--tx-xs);padding:2px var(--s-1);border-radius:var(--r-s);opacity:.55}
.pcard:hover .pc-del{opacity:1}
.pc-del:hover{color:var(--crit-ink);background:color-mix(in srgb,var(--crit) 10%,var(--surface))}

/* --- Wegweiser zwischen den Aufträgen eines Kunden --------------------------
   Er trägt bewusst nur Nummer, Bank, Betrag und Stufe: gerade genug, um den
   anderen Auftrag wiederzuerkennen, und zu wenig, um Daten zu vermischen. */
.aufwegweiser{
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2);
  overflow:hidden;margin:var(--s-2) 0 0;
}
.aw-kopf{
  padding:var(--s-3) var(--s-4);font-size:var(--tx-s);font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.aw-kopf span{display:block;font-weight:450;color:var(--ink-3);font-size:var(--tx-xs);margin-top:2px}
.aw-zeile{
  display:grid;width:100%;text-align:left;cursor:pointer;border:0;background:none;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:var(--s-2) var(--s-3);align-items:center;
  padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);
  font-size:var(--tx-s);color:var(--ink-2);min-height:var(--hoehe);
}
.aufwegweiser .aw-zeile:first-of-type{border-top:0}
.aw-zeile:hover{background:var(--surface)}
.aw-zeile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.aw-zeile.aus{opacity:.55}
.aw-nr{font:600 var(--tx-xs)/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.aw-bank{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aw-betrag{font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-auf{color:var(--accent);font-weight:600;white-space:nowrap;font-size:var(--tx-xs)}
.aufwegweiser.schmal .aw-zeile{grid-template-columns:minmax(0,1fr);gap:2px}
.aufwegweiser.schmal .aw-auf{justify-self:start}

.aw-kunde{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface-2);font-size:var(--tx-s);color:var(--ink-2);
}
.aw-kunde b{color:var(--ink);font-size:var(--tx-m)}
.aw-kunde-l{font-size:var(--tx-xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650}
.aw-kunde .btn{margin-left:auto}

/* Der Weg in die Load-Pipeline steht auf der Karte des abgeschlossenen
   Auftrags – dort, wo die Frage „und jetzt?" entsteht.                    */
.pc-load{
  display:block;width:100%;margin-top:var(--s-2);cursor:pointer;text-align:left;
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb, var(--warn) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--warn) var(--ton-schrift-p), var(--ton-schrift-basis));
  border-radius:var(--r-s);padding:3px var(--s-2);
  font-size:var(--tx-xs);font-weight:650;
}
.pc-load:hover{border-color:var(--warn)}

/* Auf der Karte nur ein Hinweis mit Zahl – die Liste erscheint auf Klick. */
.pc-weitere{
  display:block;width:100%;margin-top:var(--s-2);cursor:pointer;text-align:left;
  border:1px dashed var(--line-2);background:none;border-radius:var(--r-s);
  padding:3px var(--s-2);font-size:var(--tx-xs);font-weight:600;color:var(--ink-3);
}
.pc-weitere:hover{border-color:var(--accent);color:var(--info-ink);background:var(--accent-weich)}

/* --- Die reduzierte Vertriebsansicht ---------------------------------------
   Auf der Vertriebskarte steht der Kunde oben (im Vertrieb steht die Bank
   meist noch gar nicht fest – dort unterscheidet der Mensch, nicht das
   Institut). Die Bank bekommt eine eigene, ruhige Zeile darunter.         */
.vkarte-v .pc-bank{
  font-size:var(--tx-s);color:var(--ink-2);font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Die nächste Aktion: ein Satz statt einer Zahl. Sie ist das Einzige auf
   der Karte, das eine Aufforderung ist – deshalb bekommt sie Fläche.
   Grundton ist der Akzent (meine Aufgabe), rot bei Verzug, grau, wenn
   gerade ein anderer am Zug ist.                                          */
.pc-aktion,.ak-zeile{
  --ton:var(--info);
  display:block;margin-top:var(--s-2);border-radius:var(--r-s);
  padding:4px var(--s-2);font-size:var(--tx-s);font-weight:650;line-height:1.35;
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
  border-left:2px solid color-mix(in srgb, var(--ton) 55%, transparent);
}
.pc-aktion.due,.ak-zeile.due{--ton:var(--crit)}
.pc-aktion.fremd,.ak-zeile.fremd{--ton:var(--neu);font-weight:550}
.pc-aktion.fremd.due,.ak-zeile.fremd.due{--ton:var(--warn);font-weight:650}
.pc-aktion.aus,.ak-zeile.aus{--ton:var(--good);font-weight:550}
/* In der Tabelle steht sie in einer Zelle und darf umbrechen.            */
.ak-zeile{margin-top:0;display:inline-block;max-width:26em;white-space:normal}

/* --- Die Unternehmensrechnung ----------------------------------------------
   Eine Rechnung liest man von oben nach unten: Einnahmen, davon abgezogen
   die Kosten, dann die Provisionen, unten das Ergebnis. Die Zeilen sind
   deshalb untereinander und nicht nebeneinander – und die Summenzeile
   trägt einen Strich, wie auf Papier.                                     */
.rechnung{display:flex;flex-direction:column;gap:0}
.rz{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-4);
  align-items:baseline;padding:var(--s-3) 0;border-bottom:1px solid var(--line);
}
.rz>span{font-size:var(--tx-m);font-weight:600;color:var(--ink)}
.rz>b{font-size:var(--tx-xl);font-weight:650;color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rz>i{grid-column:1/2;font-style:normal;font-size:var(--tx-s);color:var(--ink-3)}
:root[data-modus="dunkel"] .rz>b{color:var(--ink)}
.rz.minus>b{color:var(--crit-ink)}
.rz.summe{border-bottom:0;border-top:2px solid var(--ink);margin-top:var(--s-2);
  padding-top:var(--s-4)}
.rz.summe>span{font-size:var(--tx-l)}
.rz.summe>b{font-size:calc(var(--tx-xl) * 1.25)}
.rz.summe.gut>b{color:var(--good-ink)}
.rz.summe.schlecht>b{color:var(--crit-ink)}

/* --- Dokumente -------------------------------------------------------------- */
/* Das Ablagefeld stand früher als hoher Kasten da – Symbol, Überschrift,
   Formatzeile und Knopf jeweils untereinander. Seit jeder Prozessschritt
   sein eigenes Feld hat, kamen davon vier auf eine Karte, und die Karte
   wurde unnötig lang.

   Dieselben Teile stehen deshalb jetzt in EINER Zeile nebeneinander:
   Symbol · Text · Knopf. Es geht nichts verloren – die Fläche zum Ablegen,
   der Text, die Formatangabe und der Knopf sind alle noch da, sie liegen
   nur nebeneinander statt übereinander. Auf schmalen Schirmen bricht die
   Zeile um und der Kasten sieht aus wie zuvor.                          */
/* Das eine Datum, das von Hand kommt: der Eingang des Ü-Trägers. Es steht
   in der Tabelle der Zeitpunkte und soll dort nicht wie ein Fremdkörper
   wirken – gleiche Höhe, gleiche Schrift, gleiche Kante wie die Felder
   des Formulars, nur schmal genug für die Spalte.                       */
.zeit-hand{
  height:var(--hoehe-s);padding:0 var(--s-2);font-size:var(--tx-s);
  border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);max-width:170px;
}
.zeit-hand:focus{outline:2px solid var(--accent);outline-offset:1px}
.zeit-hand:disabled{background:var(--surface-2);color:var(--ink-3)}

.dokzone{
  border:1.5px dashed var(--line-2);border-radius:var(--r-l);background:var(--surface-2);
  padding:var(--s-3) var(--s-4);text-align:center;cursor:pointer;
  transition:border-color var(--takt),background var(--takt);
}
.dokzone:hover{border-color:var(--accent);background:var(--accent-weich)}
.dokzone.over{border-color:var(--accent);background:var(--accent-weich)}
.dokzone.busy{opacity:.55;pointer-events:none}
.dz-i{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:var(--s-2) var(--s-3);color:var(--ink-3);text-align:left;
}
.dz-i b{font-size:var(--tx-m);color:var(--ink)}
.dz-i span{font-size:var(--tx-s)}
.dz-i svg{flex:0 0 auto;width:20px;height:20px}
.dz-b{margin-top:0;background:var(--navy);color:#fff;border-radius:var(--r-s);padding:5px var(--s-4);font-size:var(--tx-s);font-weight:600;white-space:nowrap}
/* Auf dem Telefon wieder untereinander – nebeneinander bliebe für die
   Formatzeile kein Platz, und die Fläche zum Tippen soll groß bleiben. */
@media (max-width:560px){
  .dokzone{padding:var(--s-4)}
  .dz-i{flex-direction:column;text-align:center}
  .dz-b{margin-top:var(--s-2)}
}
:root[data-modus="dunkel"] .dz-b{background:var(--accent)}
.doklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:var(--s-3);margin-top:var(--s-4)}
.dok{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.dok-th{height:92px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dok-th:hover{opacity:.85}
.dok-i{padding:var(--s-3)}
.dok-i b{display:block;font-size:var(--tx-s);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dok-i>span{display:block;font-size:var(--tx-xs);color:var(--ink-3);margin-top:2px}
.dok-a{display:flex;gap:var(--s-1);margin-top:var(--s-2);flex-wrap:wrap}

.maprow{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1)}
.maptag{
  --ton:var(--good);border-radius:var(--r-s);padding:4px var(--s-3);font-size:var(--tx-s);font-weight:600;
  background:color-mix(in srgb, var(--ton) var(--ton-flaeche-p), var(--ton-flaeche-basis));
  color:color-mix(in srgb, var(--ton) var(--ton-schrift-p), var(--ton-schrift-basis));
}
.maptag.miss{background:var(--surface-3);color:var(--ink-3)}
.hist{font-size:var(--tx-s);color:var(--ink-2);max-height:240px;overflow-y:auto}
.hrow{display:grid;grid-template-columns:158px 1fr;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hts{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.htx{color:var(--ink);font-weight:550}

/* --- Farbwahl in der Verwaltung -------------------------------------------- */
.farbfeld{display:flex;align-items:center;gap:var(--s-3)}
.farbfeld input[type=color]{
  width:46px;height:var(--hoehe);padding:2px;border:1px solid var(--line-2);
  border-radius:var(--r-m);background:var(--surface);cursor:pointer;flex:0 0 auto;
}
.farbfeld input[type=text]{width:110px;font-family:var(--mono);font-size:var(--tx-s)}
.vorschlaege{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.fp{
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 var(--s-3);
  height:var(--hoehe-s);font-size:var(--tx-s);cursor:pointer;background:var(--surface);
  color:var(--ink);display:inline-flex;align-items:center;gap:var(--s-2);
}
.fp:hover{border-color:var(--accent);background:var(--accent-weich)}
.fp i{width:13px;height:13px;border-radius:3px;display:block;flex:0 0 13px}
.logobox{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.logovor{
  height:56px;min-width:120px;border:1px dashed var(--line-2);border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;padding:var(--s-2) var(--s-4);background:var(--surface-3);
}
.logovor img{max-height:42px;max-width:190px;object-fit:contain;display:block}

/* --- Feier ------------------------------------------------------------------
   Bewusst dunkel und laut – das ist der Sinn der Sache. Bleibt unverändert. */
#feier{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse at center, rgba(20,30,60,.55), rgba(10,14,30,.92))}
#feier.an{display:flex}
#feier canvas{position:absolute;inset:0;width:100%;height:100%}
#feier .blitz{position:absolute;inset:0;pointer-events:none;animation:feierBlitz 1s ease-in-out infinite alternate}
@keyframes feierBlitz{from{box-shadow:inset 0 0 0 0 rgba(227,73,72,0)}to{box-shadow:inset 0 0 140px 30px rgba(227,73,72,.55)}}
#feier .strahl{position:absolute;left:50%;top:-40vh;width:40vw;height:180vh;margin-left:-20vw;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%, rgba(255,80,80,0) 0deg, rgba(255,80,80,.22) 12deg, rgba(255,80,80,0) 24deg,
  rgba(255,80,80,0) 180deg, rgba(255,80,80,.22) 192deg, rgba(255,80,80,0) 204deg);transform-origin:50% 50%;animation:strahl 1.6s linear infinite}
@keyframes strahl{to{transform:rotate(360deg)}}
#feier .karte{position:relative;text-align:center;color:#fff;padding:40px 56px;border-radius:24px;max-width:min(92vw,760px);
  background:rgba(20,28,52,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);animation:karteRein .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes karteRein{from{transform:scale(.6) translateY(40px);opacity:0}to{transform:none;opacity:1}}
#feier .kicker{font-size:14px;letter-spacing:.35em;text-transform:uppercase;color:#ff8a8a;font-weight:700;animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#feier h1{font-size:clamp(34px,7vw,84px);line-height:1;margin:12px 0 6px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,#ffd6d6,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
#feier .agent{font-size:clamp(22px,4vw,44px);font-weight:800;color:#ffd166;margin:10px 0 4px;text-shadow:0 4px 30px rgba(255,209,102,.5)}
#feier .info{font-size:17px;color:#d7e2f4;margin-top:8px}
#feier .info b{color:#fff}
#feier .spruch{margin-top:18px;font-size:18px;color:#fff;font-weight:600}
#feier .zeile{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#feier .zeile button{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;padding:9px 16px;border-radius:9px;font-weight:600}
#feier .zeile button:hover{background:rgba(255,255,255,.22)}
#feier .stand{margin-top:14px;font-size:12px;color:#a9bcdd;letter-spacing:.05em;text-transform:uppercase}

/* ==========================================================================
   Interne Kommunikation
   ========================================================================== */
.chat-raster{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s-5);align-items:start}
.chat-nav .card-b{padding:var(--s-4)}
.chat-suche{width:100%;margin-bottom:var(--s-3)}
.chat-filter{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.chat-liste{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}
.chat-kanal{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);
  padding:var(--s-3);border-radius:var(--r-m);border:1px solid transparent;
  background:none;text-align:left;width:100%;cursor:pointer;color:var(--ink);
}
.chat-kanal:hover{background:var(--surface-3)}
.chat-kanal[aria-current="true"]{background:var(--surface-3);border-color:var(--line-2)}
.chat-kanal .kt2{font-weight:650;font-size:var(--tx-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-kanal .kv{grid-column:1/-1;font-size:var(--tx-s);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-kanal .kz{display:flex;gap:5px;align-items:center}
.chat-neu{
  min-width:20px;height:20px;padding:0 var(--s-2);border-radius:var(--r-rund);background:var(--crit);color:#fff;
  font-size:var(--tx-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.chat-verlauf{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);max-height:58vh;overflow:auto}
.chat-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-3)}
.chat-av{
  width:34px;height:34px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-size:var(--tx-s);font-weight:700;
  border:1px solid var(--line);overflow:hidden;flex:0 0 auto;
}
.chat-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.chat-av-mini{width:20px;height:20px;font-size:9px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.chat-msg.ich .chat-av{background:var(--accent-weich);color:var(--info-ink);border-color:color-mix(in srgb,var(--accent) 26%,var(--surface))}
.chat-kopf{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:2px}
.chat-kopf b{font-size:var(--tx-m)}
.chat-zeit{font-size:var(--tx-s);color:var(--ink-3);font-variant-numeric:tabular-nums}
.chat-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--tx-m);line-height:1.55}
.chat-text .erw{background:var(--accent-weich);color:var(--info-ink);border-radius:var(--r-s);padding:0 3px;font-weight:650}
.chat-text .erw-team{--ton:var(--neu);background:color-mix(in srgb,var(--neu) var(--ton-flaeche-p),var(--ton-flaeche-basis));color:var(--neu-ink)}
.erw-team{--ton:var(--neu);background:color-mix(in srgb,var(--neu) var(--ton-flaeche-p),var(--ton-flaeche-basis));color:var(--neu-ink);
  border-radius:var(--r-s);padding:0 3px;font-weight:650}
.chat-blase{border-radius:var(--r-m);min-width:0}
.chat-msg.wichtig .chat-blase{border-left:3px solid var(--warn);padding-left:var(--s-3);
  background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.chat-msg.erledigt .chat-blase{border-left-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.chat-zitat{border-left:2px solid var(--line-2);padding:2px 0 2px var(--s-3);margin-bottom:5px;
  font-size:var(--tx-s);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-akt{display:flex;gap:var(--s-2);margin-top:5px;flex-wrap:wrap;opacity:0;transition:opacity var(--takt)}
.chat-msg:hover .chat-akt,.chat-msg:focus-within .chat-akt{opacity:1}
.chat-akt button{border:0;background:none;padding:2px var(--s-1);font-size:var(--tx-s);color:var(--ink-3);border-radius:var(--r-s)}
.chat-akt button:hover{background:var(--surface-3);color:var(--ink)}
.chat-weg{color:var(--ink-3);font-style:italic;font-size:var(--tx-s)}
.chat-eingabe{border-top:1px solid var(--line);padding:var(--s-4) var(--s-5);position:relative}
.chat-eingabe textarea{
  width:100%;min-height:64px;resize:vertical;padding:var(--s-3) var(--s-4);font:var(--tx-m)/1.5 var(--schrift);
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink);
}
.chat-eingabe textarea:focus{border-color:var(--accent);box-shadow:var(--fokus-ring)}
.chat-eingabe .zeile{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);flex-wrap:wrap}
.chat-antwortauf{
  display:flex;align-items:center;gap:var(--s-3);font-size:var(--tx-s);color:var(--ink-2);
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s-2) var(--s-3);margin-bottom:var(--s-3);
}
.chat-mention{
  position:absolute;z-index:30;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-m);box-shadow:var(--schatten-hoch);min-width:230px;max-width:min(340px,90vw);
  max-height:220px;overflow:auto;padding:var(--s-1);
}
.chat-mention button{
  display:flex;align-items:center;gap:var(--s-2);width:100%;text-align:left;border:0;background:none;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-s);font-size:var(--tx-m);color:var(--ink);
}
.chat-mention button[aria-selected="true"],.chat-mention button:hover{background:var(--surface-3)}
.chat-leer{padding:var(--s-7) var(--s-5);text-align:center;color:var(--ink-3)}
.chat-akte{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.chat-akte .chat-verlauf{max-height:260px;padding:var(--s-4)}
.chat-akte .chat-eingabe{padding:var(--s-3) var(--s-4)}

.pz{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--n-400);
  border:1px solid rgba(0,0,0,.08);flex:0 0 auto}
.pz-online{background:var(--good)} .pz-abwesend{background:var(--warn)}
.pz-beschaeftigt{background:var(--crit)} .pz-offline{background:var(--n-400)}
.chat-kontext{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center;
  padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line);background:var(--surface-3)}
.chat-kontext .kk{font-size:var(--tx-s);color:var(--ink-2)}
.chat-kontext .kk b{color:var(--ink)}
.chat-teilnehmer{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line)}
.chat-person{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--tx-s);
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-rund);padding:3px var(--s-3)}
.chat-person .weg{border:0;background:none;color:var(--ink-3);padding:0 0 0 2px;line-height:1}
.chat-person .weg:hover{color:var(--crit-ink)}
/* Dasselbe Kreuz an der Kanalzeile. Es sitzt in der bestehenden Spalte
   neben den Zählern und ändert am Raster der Zeile nichts; sichtbar wird
   es erst beim Überfahren, damit die Liste ruhig bleibt.               */
.chat-kanal .weg{border:0;background:none;color:var(--ink-3);padding:0 0 0 2px;
  line-height:1;cursor:pointer;opacity:0}
.chat-kanal:hover .weg,.chat-kanal .weg:focus-visible{opacity:1}
.chat-kanal .weg:hover{color:var(--crit-ink)}
.chat-person.eingeladen{border-style:dashed}
.pc-chat{border:0;background:none;color:var(--ink-3);font-size:var(--tx-s);padding:2px var(--s-2);border-radius:var(--r-s)}
.pc-chat:hover{background:var(--surface-3);color:var(--ink)}
.pc-chat .n{background:var(--crit);color:#fff;border-radius:var(--r-rund);padding:0 5px;margin-left:4px;font-weight:700}
.glocke{position:relative;width:var(--hoehe);padding:0}
.glocke .n{position:absolute;top:-4px;right:-4px;background:var(--crit);color:#fff;font-size:10px;
  font-weight:700;border-radius:var(--r-rund);padding:0 4px;min-width:15px;text-align:center;line-height:15px}
.mm-liste{display:flex;flex-direction:column;gap:2px}
.mm-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-3);
  border-radius:var(--r-m);border:1px solid transparent;background:none;text-align:left;width:100%;
  cursor:pointer;color:var(--ink)}
.mm-zeile:hover{background:var(--surface-3)}
.mm-zeile .t{font-weight:650;font-size:var(--tx-m);display:flex;align-items:center;gap:var(--s-2);min-width:0}
.mm-zeile .u{grid-column:1/-1;font-size:var(--tx-s);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.chat-zus{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:center;font-size:var(--tx-s);color:var(--ink-2);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--surface-3)}
.chat-sys{font-size:var(--tx-s);color:var(--ink-3);text-align:center;padding:2px 0;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}

/* --- Kundenakte mit Chat daneben ------------------------------------------- */
dialog.dlg-breit{width:min(1520px,96vw)}
.k-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:var(--s-5);align-items:start}
.k-raster > .k-spalte{min-width:0}
.k-raster > .k-spalte-chat{position:sticky;top:0;min-width:0}
/* Zugeklappte Chatspalte. Sie bleibt im Dokument – würde die Karte neu
   aufgebaut, gingen noch nicht gespeicherte Eingaben verloren.           */
dialog.chat-zu .k-raster{grid-template-columns:minmax(0,1fr)}
dialog.chat-zu .k-spalte-chat{display:none}
#k-chat-schalter{white-space:nowrap}

/* --- Mitarbeiterprofile ------------------------------------------------------ */
.mi-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--s-4)}
.mi-karte{
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:var(--s-4);
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);align-items:start;
}
.mi-av{width:44px;height:44px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink-2);overflow:hidden;flex:0 0 auto}
.mi-av img{width:100%;height:100%;object-fit:cover;display:block}
.mi-karte .nm{font-weight:650;display:flex;align-items:center;gap:var(--s-2);min-width:0}
.mi-karte .zl{font-size:var(--tx-s);color:var(--ink-3);overflow-wrap:anywhere}
.mi-orden{display:flex;gap:var(--s-1);flex-wrap:wrap;margin-top:var(--s-2)}
.mi-orden .o{font-size:var(--tx-s);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-rund);padding:2px var(--s-3)}
.mi-akt{grid-column:1/-1;display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}

/* ==========================================================================
   Persönliche Einstellungen – Auswahlkacheln
   ========================================================================== */
.wahlreihe{display:flex;gap:var(--s-2);flex-wrap:wrap}
.wahl{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-m);padding:var(--s-3) var(--s-4);font-size:var(--tx-m);font-weight:550;
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--hoehe);
}
.wahl:hover{background:var(--surface-3)}
.wahl[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent-weich);color:var(--info-ink);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.wahl .pv{width:34px;height:22px;border-radius:var(--r-s);border:1px solid var(--line-2);display:block;flex:0 0 auto}

/* --- Feld und Nadel: ein Paar --------------------------------------------
   Die Feld-Auswahl der Vorgänge-Liste kennt drei Zustände statt zwei:
   ausgeblendet, sichtbar, sichtbar und fest. Der dritte hängt als kleine
   Nadel am Feld – kein zweiter Dialog, keine zweite Liste. Sie erscheint
   nur an sichtbaren Feldern: was nicht da ist, kann nicht stehen bleiben. */
.feldpaar{display:inline-flex;align-items:stretch;gap:0}
.feldpaar .wahl{border-top-right-radius:0;border-bottom-right-radius:0}
.feldpaar .pin{
  border:1px solid var(--line-2);border-left:0;background:var(--surface);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:0 var(--s-3);
  font-size:var(--tx-s);line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;filter:grayscale(1);opacity:.45;
}
.feldpaar .pin:hover{background:var(--surface-3);opacity:.85}
.feldpaar .pin.an{
  filter:none;opacity:1;background:var(--accent-weich);border-color:var(--accent);
}
.feldpaar.ist-fest .wahl{border-color:var(--accent)}

/* Schriftwahl: jede Kachel ist in ihrer eigenen Schrift gesetzt – so sieht
   man vor dem Klicken, was man bekommt.                                    */
.schriftwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));gap:var(--s-2)}
.schriftwahl .wahl{
  flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--s-3) var(--s-4);text-align:left;min-width:0;
}
.schriftwahl .wahl .sn{font-size:var(--tx-m);font-weight:650;color:var(--ink)}
.schriftwahl .wahl .sp{
  font-size:var(--tx-s);color:var(--ink-3);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.schriftwahl .wahl[aria-pressed="true"] .sn{color:var(--info-ink)}

/* Kachelverwaltung des Dashboards                                          */
.kachelliste{display:flex;flex-direction:column;gap:var(--s-2)}
.kachelzeile{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s-3);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  padding:var(--s-2) var(--s-3);
}
.kachelzeile.aus{opacity:.55}
.kachelzeile .kg{font-size:var(--tx-m);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kachelzeile .kb{font-size:var(--tx-s);color:var(--ink-3)}
.kachelzeile .kpf{display:flex;gap:2px}
.kachelzeile .kpf button{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.kachelzeile .kpf button:hover{background:var(--surface-3)}
.kachelzeile .kpf button[disabled]{opacity:.35;cursor:not-allowed}
/* Schalter                                                                  */
.schalter{
  position:relative;width:40px;height:23px;border-radius:var(--r-rund);border:1px solid var(--line-2);
  background:var(--surface-3);flex:0 0 auto;transition:background var(--takt),border-color var(--takt);
}
.schalter::after{
  content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--surface);box-shadow:var(--schatten);transition:transform var(--takt);
}
.schalter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.schalter[aria-pressed="true"]::after{transform:translateX(17px)}

/* Schnellzugriffe auf der Startseite                                        */
.schnellbar{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
.schnell{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-l);
  padding:var(--s-3) var(--s-4);font-size:var(--tx-m);font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:var(--s-2);box-shadow:var(--schatten);min-height:var(--hoehe);
}
.schnell:hover{border-color:var(--accent);background:var(--accent-weich);color:var(--info-ink)}
.schnell .sy{width:16px;height:16px;flex:0 0 16px;display:block;opacity:.7}

/* ==========================================================================
   6. Anpassung an die Größe
   Vier Stufen, hier am Stück – nicht über die Datei verstreut.
   ========================================================================== */

/* --- Präsentation: ab 1600 px --------------------------------------------
   Nicht auseinanderziehen, sondern größer und ruhiger setzen.             */
@media (min-width:1600px){
  :root{ --tx-schirm:1.07; }
  .kpis{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (min-width:2100px){
  /* Nur die Schrift wächst mit dem Schirm – die Breite ist ohnehin voll. */
  :root{ --tx-schirm:1.14; }
}

/* --- Desktop schmal -------------------------------------------------------
   Die Kopfzeile wird eng. Erst rückt der Untertitel weg, dann der Text an
   der Sirene – aber niemals die Reiterbeschriftung.

   Die Schwellen lagen früher bei 1420 und 1240 px. Gemessen hat sich das
   als zu spät erwiesen: zwischen 1240 und 1600 px reichte der Platz für
   die Reiter nicht, und der letzte („Verwaltung") stand nur halb da,
   während daneben ein Untertitel und ein Sirenentext standen, die niemand
   zum Arbeiten braucht. Die Reiter sind die Navigation – sie haben
   Vorrang vor der Zier. Deshalb gehen die Zusätze jetzt früher.          */
@media (max-width:1600px){
  .brand span{display:none}
  .sirene .sz{display:none}
  .sirene{padding:0 var(--s-2)}
}
@media (max-width:1360px){
  .hbar{gap:var(--s-4);padding-left:var(--s-5);padding-right:var(--s-5)}
  .tabs button{padding:0 var(--s-3)}
  .kr-uhr{padding-left:var(--s-4);padding-right:var(--s-2)}
  .kr-uhr .dat{display:none}
}

/* --- Tablet: 760 – 1099 px ------------------------------------------------
   Zwei Spalten werden zu einer, wo es eng wird. Die Reiter behalten ihre
   Beschriftung, bekommen aber ein Symbol davor und rollen notfalls.       */
@media (max-width:1099px){
  .k-raster{grid-template-columns:1fr}
  .k-raster > .k-spalte-chat{position:static}
  .grid2{grid-template-columns:1fr}
  .hbar{grid-template-columns:auto minmax(0,1fr) auto}
  .brand h1{font-size:var(--tx-l)}
  #brandlogo{height:26px;max-width:110px}
}
@media (max-width:900px){
  .chat-raster{grid-template-columns:1fr}
  .chat-liste{max-height:240px}
  .hrow{grid-template-columns:1fr;gap:2px}
  .hts{font-size:var(--tx-xs)}
}

/* --- Telefon: bis 759 px ---------------------------------------------------
   Mobile-first-Darstellung: eine Spalte, Navigation unten, Tabellen als
   Karten, Dialoge als Vollbild-Blatt.                                      */
@media (max-width:759px){
  :root{ --mobilnav-hoehe:58px; --s-6:14px; }

  /* Kopfzeile: nur noch Marke und Aktionen. Die Reiter ziehen nach unten,
     sie verschwinden nicht.                                               */
  .hbar{grid-template-columns:minmax(0,1fr) auto;padding:var(--s-2) var(--s-4);min-height:52px;gap:var(--s-2)}
  header .tabs{display:none}
  .mobilnav{display:block}
  .brand h1{font-size:var(--tx-l);overflow:hidden;text-overflow:ellipsis}
  .sirene{padding:0 var(--s-1)}
  .sirene svg{width:22px;height:22px;flex:0 0 22px}
  .kr-uhr{padding:0 var(--s-2) 0 var(--s-3);margin-left:0}
  .kr-uhr .zeit{font-size:var(--tx-m)}
  .kn-txt{display:none}
  #kr-konto{width:var(--hoehe);padding:0}

  main{padding:var(--s-4)}

  /* Kennzahlen: zwei nebeneinander, das bleibt lesbar und spart Rollen.   */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(min(150px,45%),1fr));gap:var(--s-3);margin-bottom:var(--s-5)}
  .kpi{padding:var(--s-3) var(--s-4)}
  .kpi .val{font-size:var(--tx-xl)}
  .kpi.go::after{display:none}

  .filterschalter{padding:var(--s-4) var(--s-5)}
  /* Der Hinweistext rechts in den Werkzeugleisten bekommt eine eigene
     Zeile – gequetscht in eine schmale Spalte ist er unlesbar.          */
  .chipbar{margin-left:0;flex:1 1 100%}
  .filters{padding:var(--s-4) var(--s-5)}
  .f,.f.grow{flex:1 1 100%;min-width:0}
  .f input,.f select{min-width:0;width:100%}
  /* Ein Feld je Zeile, und die Beschriftung der Stufengruppe über ihren
     Chips – nebeneinander wären sie auf 360 px unlesbar zerrissen.      */
  .filters.raster{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .filters.raster .f.breit,.filters.raster .f.voll{grid-column:1/-1}
  .stufenwahl{grid-template-columns:minmax(0,1fr);gap:var(--s-1) 0}
  .sw-titel{margin-top:var(--s-2)}
  .pf-fuss{padding:var(--s-3) var(--s-5)}

  /* Tabellen werden zu Karten. Jede Zelle behält ihre Spaltenüberschrift –
     es geht keine einzige Angabe verloren.                                */
  .tblwrap{max-height:none;overflow:visible}
  table.kartenform{display:block;width:100%}
  table.kartenform thead{display:none}
  table.kartenform tbody,table.kartenform tfoot{display:block}
  table.kartenform tr{
    display:block;border:1px solid var(--line);border-radius:var(--r-m);
    background:var(--surface);margin:var(--s-3);padding:var(--s-2) var(--s-3);box-shadow:var(--schatten);
  }
  table.kartenform tbody tr:hover{background:var(--surface)}
  /* Die Überschrift schwimmt links, der Wert fließt daneben. Bewusst ein
     Float und kein Raster: eine Zelle enthält oft mehrere Dinge (Text und
     einen Knopf), die ein Raster auf getrennte Zeilen verteilen würde.   */
  table.kartenform td{
    display:flow-root;border:0;border-bottom:1px solid var(--line);
    padding:var(--s-2) 0;white-space:normal;overflow:visible;text-overflow:clip;
    text-align:left;max-width:none;line-height:1.5;
  }
  table.kartenform td:last-child{border-bottom:0}
  table.kartenform td::before{
    content:attr(data-spalte);float:left;width:38%;padding-right:var(--s-3);
    color:var(--ink-3);font-size:var(--tx-xs);
    font-weight:650;letter-spacing:.04em;text-transform:uppercase;line-height:1.7;
  }
  table.kartenform td.leer{display:none}
  /* Zellen ohne Spaltenüberschrift – Auswahlkästchen, Knopfleisten.       */
  table.kartenform td.ohne-titel::before{content:none}
  table.kartenform td.num{text-align:left}
  table.kartenform td.act{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-top:var(--s-3)}
  table.kartenform td.act::before{content:none}
  table.kartenform td.stick,table.kartenform th.stick{position:static;box-shadow:none;background:none}
  /* Unter 760 px wird jede Tabelle zu Karten – dort rollt nichts
     seitwärts, und es gibt nichts zu fixieren.                          */
  table.kartenform td.fest,table.kartenform th.fest{
    position:static;box-shadow:none;background:none;border-right:0;
    max-width:none;overflow:visible;text-overflow:clip;
  }
  table.kartenform td.wrap{display:flow-root;-webkit-line-clamp:none}
  table.kartenform tfoot td{background:var(--surface-3);border-radius:var(--r-s);padding:var(--s-2) var(--s-3)}

  /* Kanban: eine Spalte füllt fast den Schirm und schnappt ein.           */
  .kanban{gap:var(--s-3);scroll-snap-type:x mandatory;padding-bottom:var(--s-4)}
  .kcol{flex:0 0 min(84vw,300px);min-width:0;max-width:none;max-height:none}
  .kbody{max-height:none}
  .lostgrid .pcard{flex:1 1 100%}

  /* Dialoge als Blatt von unten – der übliche Griff auf dem Telefon.
     display wird bewusst NUR auf dialog[open] gesetzt: eine Regel auf
     dialog allein würde die geschlossenen Dialoge sichtbar machen, weil
     Autorenregeln die Vorgabe des Browsers schlagen.                     */
  dialog,dialog.dlg-breit{
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    margin:0;border-radius:0;top:0;left:0;
  }
  dialog[open]{display:flex;flex-direction:column}
  .dlg-h{border-radius:0;padding:var(--s-4) var(--s-5);position:sticky;top:0;z-index:5}
  .dlg-b{max-height:none;flex:1 1 auto;padding:var(--s-5) var(--s-5) var(--s-8)}
  .dlg-f{
    border-radius:0;position:sticky;bottom:0;
    padding:var(--s-3) var(--s-5) max(var(--s-3), env(safe-area-inset-bottom));
  }
  .dlg-f .btn{flex:1 1 auto;min-width:44%}
  .dlg-f .sp{margin-left:0;flex-basis:100%;order:99}

  .segbar{padding:var(--s-3) var(--s-4) 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .segbar::-webkit-scrollbar{display:none}
  .seg{flex:0 0 auto}
  .chat-verlauf{max-height:52vh}
  .doklist{grid-template-columns:repeat(auto-fill,minmax(min(140px,47%),1fr))}
  .toast{left:var(--s-4);right:var(--s-4);transform:translateY(14px);max-width:none}
  .toast.on{transform:translateY(0)}
  .card-h{padding:var(--s-4)}
  .card-b{padding:var(--s-4)}
  .bar-row{grid-template-columns:minmax(72px,34%) 1fr auto}
  .bar-row .vl{min-width:0}
  .mi-raster{grid-template-columns:1fr}
}

/* Sehr schmal: der Balken bekommt seine eigene Zeile, sonst quetscht der
   Name den Wert aus dem Bild.                                             */
@media (max-width:430px){
  .bar-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3)}
  .bar-row .nm{grid-column:1/-1;white-space:normal}
  .bar-row .vl{min-width:0;text-align:right}
  .hrow{grid-template-columns:1fr}
}

/* --- Fingerbedienung ------------------------------------------------------
   Unabhängig von der Breite: ein Tablet im Querformat ist 1180 px breit
   UND ein Touchgerät. Ziele werden auf 44 px gebracht – das ist das Maß,
   das Apple und Google nennen.                                            */
@media (pointer:coarse){
  /* 44 px für Hauptbedienelemente, 40 für die kleinen in Tabellenzeilen.
     Weniger wird am Finger unangenehm.                                 */
  :root{ --hoehe:44px; --hoehe-s:40px; }
  .btn,.seg,.wahl,.fp,.schnell,.filterschalter,.sw-chip,.pf-marke{min-height:var(--hoehe)}
  .btn-sm{min-height:var(--hoehe-s)}
  /* Ausnahmslos jedes Eingabefeld, nicht nur die namentlich bekannten.    */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{min-height:var(--hoehe)}
  .telbtn{min-height:var(--hoehe-s);padding:var(--s-1) var(--s-3)}
  .fld .telrow .telbtn{min-height:var(--hoehe)}
  .editrow input,.editrow select{min-height:var(--hoehe-s)}
  .chat-akt{opacity:1}                     /* ohne Mauszeiger kein Hover   */
  .pc-del{opacity:1}
  .chat-akt button,.pc-chat,.pc-del{min-height:var(--hoehe-s);padding:var(--s-1) var(--s-2)}
  .nr-go{min-height:var(--hoehe-s)}
  td .cb,th .cb{width:20px;height:20px}
  .cbf{width:var(--hoehe);height:var(--hoehe);margin:-6px -8px}
  /* Eine Beschriftung mit Auswahlkästchen ist als Ganzes der Griff.       */
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:var(--hoehe)}
  .kachelzeile .kpf button{width:var(--hoehe-s);height:var(--hoehe-s)}
  /* Das × am Merkzettel ist ein Knopf wie jeder andere – auf dem Finger
     war es bisher 15 px groß und damit nicht zu treffen. Der Merkzettel
     wächst mit, damit das × nicht über seinen Rand hinausragt.          */
  .chip{min-height:var(--hoehe)}
  .chip button{min-width:var(--hoehe-s);min-height:var(--hoehe-s);
    display:inline-flex;align-items:center;justify-content:center;padding:0}
  .tabs button{padding:0 var(--s-4)}
}

/* --- Druck ------------------------------------------------------------------ */
@media print{
  header,.mobilnav,.filters,.toolbar,.segbar,.chipbar,.btn,.toast,#feier{display:none !important}
  main{max-width:none;padding:0}
  .card{box-shadow:none;break-inside:avoid}
  .tblwrap{max-height:none;overflow:visible}
}

/* Chat vollständig löschen – steht unter der Kanalliste, abgesetzt durch
   eine Linie. Nur sichtbar, wer das Recht chat.purge hat; die Sichtbarkeit
   entscheidet die Anwendung, nicht das Stylesheet.                        */
.chat-purge{ border-top:1px solid var(--line); margin-top:10px; padding:10px 10px 2px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.chat-purge .hint{ font-size:11px; line-height:1.35; color:var(--ink-3) }

/* ==========================================================================
   ROLLEN UND RECHTE
   Die Uebersicht ist eine Liste zum Anklicken, die Bearbeitung eine
   Schublade von rechts. Bewusst kein Dialog: so bleibt die Uebersicht
   dahinter sichtbar, und man sieht, welche Rolle man gerade aendert.
   Es kommen nur neue Klassen dazu; an bestehenden aendert sich nichts.
   ========================================================================== */
.rollen-liste{display:flex;flex-direction:column;gap:var(--s-2)}
.rollen-zeile{
  display:grid;grid-template-columns:minmax(0,1.2fr) auto auto;
  gap:var(--s-1) var(--s-3);align-items:center;
  padding:var(--s-3);border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface-2);text-align:left;width:100%;cursor:pointer;color:var(--ink);
}
.rollen-zeile:hover{background:var(--surface-3);border-color:var(--line-2)}
.rollen-zeile .rl-name{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.rollen-zeile .rl-key{font-size:var(--tx-s);color:var(--ink-3)}
.rollen-zeile .rl-sicht,.rollen-zeile .rl-zahl{font-size:var(--tx-s);color:var(--ink-2);white-space:nowrap}
.rollen-zeile .rl-besch{grid-column:1/-1;font-size:var(--tx-s);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rdrawer-hg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.28);
  opacity:0;transition:opacity .18s ease}
.rdrawer-hg.auf{opacity:1}
.rdrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(560px,96vw);
  display:flex;flex-direction:column;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .18s ease;
}
.rdrawer.auf{transform:translateX(0)}
.rdrawer-k{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);border-bottom:1px solid var(--line)}
.rdrawer-k h2{margin:0;font-size:var(--tx-l)}
.rdrawer-zu{margin-left:auto;border:0;background:none;color:var(--ink-3);
  font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.rdrawer-zu:hover{color:var(--ink)}
.rdrawer-b{flex:1;overflow:auto;padding:var(--s-4)}
.rdrawer-f{display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-4);border-top:1px solid var(--line)}

.rd-abschnitt{display:flex;align-items:center;gap:var(--s-2);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px}
.rd-besch{font-size:var(--tx-s);color:var(--ink-3);line-height:1.4}
.rd-modul{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.rd-modul-k{display:flex;align-items:center;gap:var(--s-2);margin-bottom:2px}
.rd-aktionen{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.rd-kasten{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface-2);font-size:var(--tx-s)}
.rd-kasten:hover{border-color:var(--line-2)}
.rd-kasten input{margin:0;cursor:pointer}
.rd-kasten.rd-extra{border-style:dashed}
.rd-kasten.rd-alle{background:none;border-color:var(--line-2);font-weight:600;
  text-transform:none;letter-spacing:0}
.rd-fuss{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}

/* Abweichende Rechte eines einzelnen Mitarbeiters. Zwei Marken genuegen:
   was die Rolle nicht hergibt, aber gewaehrt wurde - und was sie hergibt,
   aber entzogen wurde. Alles Uebrige sieht aus wie immer.               */
.bn-rechte{margin-top:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-3)}
.bn-rechte>summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:var(--s-2)}
.bn-rechte .bn-zahl{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-2)}
.rd-kasten.bn-plus{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}
.rd-kasten.bn-minus{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent)}

/* ==========================================================================
   UNTERNEHMENSSTRUKTUR
   Ein Baum aus Abteilungen, darin die Mitarbeiter mit ihrer Rolle. Rolle
   und Position stehen bewusst nebeneinander: der Name sagt, wer jemand
   ist, die Rolle daneben, was er darf. Ein Leiter sieht damit nicht nach
   mehr Rechten aus, als er hat.
   ========================================================================== */
.us-abt{border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s-3);margin-bottom:var(--s-3);background:var(--surface-2)}
.us-abt.us-ohne{background:none;border-style:dashed}
.us-abt-k{display:flex;align-items:center;gap:var(--s-2);margin-bottom:2px}
.us-key{font-size:var(--tx-s);color:var(--ink-3)}
.us-zahl{font-size:var(--tx-s);color:var(--ink-2);white-space:nowrap}
.us-leitung{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-2) 0;
  font-size:var(--tx-s);color:var(--ink-2)}
.us-leute{display:flex;flex-direction:column;gap:2px;margin-top:var(--s-2)}
.us-zeile{display:flex;align-items:center;gap:var(--s-2);
  padding:5px var(--s-2);border-radius:var(--r-s)}
.us-zeile:hover{background:var(--surface-3)}
.us-person{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.us-name{font-weight:600}
.us-rolle{font-size:var(--tx-s);color:var(--ink-3)}
.us-aus{font-size:var(--tx-s);color:var(--crit-ink)}
.us-wahl{max-width:220px}

/* Datenbereich »nach Merkmal«: Feld und Werte, nur sichtbar wenn gewaehlt. */
.rd-filter{margin:var(--s-2) 0 0;padding:var(--s-3);border:1px dashed var(--line-2);
  border-radius:var(--r-s);background:var(--surface-2)}

/* Die Einrueckung IST die Hierarchie - eine Linie links macht sichtbar,
   wohin ein Ast gehoert, ohne dass dafuer Kaesten ineinander stehen.    */
.us-unter{margin:10px 0 0 18px;padding-left:14px;border-left:2px solid var(--line)}
.us-unter .us-abt{margin-bottom:10px}
.us-unter .us-abt:last-child{margin-bottom:0}

/* --- Organigramm ------------------------------------------------------
   Die Anordnung rechnet app.js; hier steht nur das Aussehen. Farben und
   Abstaende kommen aus denselben Marken wie ueberall.                   */
.us-umschalt{padding:0;border:0;background:none;margin-right:var(--s-2)}
.og-leiste{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);flex-wrap:wrap}
.og-suche{width:270px;max-width:100%;flex:0 1 270px}
.og-lupe{display:inline-flex;align-items:center;gap:var(--s-1)}
.og-stufe{font-size:var(--tx-s);color:var(--ink-2);min-width:46px;text-align:center}
.og-rahmen{overflow:auto;max-height:66vh;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface-2);padding:var(--s-4)}
.og-buehne{position:relative}
.og-flaeche{position:relative;transform-origin:0 0}
.og-linien{position:absolute;inset:0;pointer-events:none}
.og-linien path{fill:none;stroke:var(--line-2);stroke-width:1.5}
.og-kasten{position:absolute;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden;
  transition:box-shadow .12s,border-color .12s,opacity .12s}
.og-kasten:hover,.og-kasten:focus-visible{border-color:var(--accent);
  box-shadow:0 2px 10px rgba(0,0,0,.10)}
.og-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-leit{font-size:var(--tx-s);color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.og-fuss{margin-top:auto;display:flex;gap:var(--s-2);align-items:baseline;
  font-size:var(--tx-s);color:var(--ink-3)}
.og-ast{margin-left:auto;color:var(--ink-2)}
.og-meine{border-color:var(--accent);background:var(--accent-weich)}
.og-zieht{opacity:.45}
.og-ziel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weich)}
.og-blass{opacity:.32}
.og-treffer{border-color:var(--warn);box-shadow:0 0 0 3px rgba(237,161,0,.22)}
@keyframes og-blitz{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 14px rgba(42,120,214,0)}}
.og-blitz{animation:og-blitz .7s ease-out}

/* Stellvertretungen: eine Liste zum Ankreuzen statt eines Auswahlfelds.
   Sie waechst mit der Abteilung und bleibt auch bei dreissig Namen lesbar. */
.fgrid .fld.fld-ganz{grid-column:1/-1}
.ab-stvs{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);
  max-height:180px;overflow:auto;padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2)}
.ab-stv{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;
  min-width:180px;padding:2px 0}
.ab-stv input{margin:0}

/* Mehrfachzugehoerigkeit: ein Kreuz nimmt genau EINE zurueck, das
   Auswahlfeld darunter fuegt eine hinzu.                                 */
.us-weg{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;
  color:var(--ink-3);padding:0 6px;border-radius:var(--r-s)}
.us-weg:hover{color:var(--crit-ink);background:var(--surface-4)}
.us-mehr{font-size:var(--tx-s);color:var(--ink-3);border:1px solid var(--line-2);
  border-radius:999px;padding:0 7px;margin-left:var(--s-2)}
.us-zu{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px dashed var(--line)}
.us-zu .us-wahl{max-width:260px}

/* Die Stellenbezeichnung steht vor der Rolle und ist deutlicher gesetzt:
   sie beschreibt den Menschen, die Rolle nur seine Rechte.               */
.us-stelle{font-size:var(--tx-s);color:var(--ink-2);font-weight:550}

/* Zwischenueberschrift im Einladen-Dialog.                                */
.ein-h3{margin:18px 0 4px;font-size:14px;font-weight:650}

/* Interne Unterlage: kein Sendeknopf, sondern der Grund dafuer.          */
.dok-intern{display:inline-block;font-size:var(--tx-s);color:var(--ink-3);
  border:1px dashed var(--line-2);border-radius:var(--r-s);padding:3px 9px;white-space:nowrap}

/* Die Angaben fuer die Depot-Beantragung: zwei Spalten, damit sie
   beisammenstehen und sich am Stueck kopieren lassen.                    */
.depot-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 var(--s-5);margin-top:var(--s-2)}
.depot-z{display:flex;gap:var(--s-3);padding:5px 0;border-bottom:1px solid var(--line);
  font-size:var(--tx-s)}
.depot-z:last-child{border-bottom:0}
.depot-l{flex:0 0 108px;color:var(--ink-3)}
.depot-w{flex:1;color:var(--ink);word-break:break-word}
.depot-z.fehlt .depot-w{color:var(--crit-ink)}

/* Der Hinweis in der Sammelleiste, wenn die Auswahl ueber den Filter
   hinausreicht. Er muss auffallen - sonst aendert jemand mehr, als er
   vor sich sieht.                                                        */
.rs-warn{font-weight:450;color:var(--crit-ink);background:var(--crit-flaeche,transparent);
  border:1px solid var(--crit);border-radius:999px;padding:2px 10px;font-size:var(--tx-s)}

/* Der Ausfallknopf auf der Auftragskarte. Rot, aber nicht laut: er steht
   auf jeder Karte und darf sie nicht beherrschen. Erst beim Zeigen wird
   er voll rot - dann ist die Absicht schon da.
   ACHTUNG: bewusst NICHT .pc-del, denn die wird im Praesentationsmodus
   ausgeblendet (weiter oben). Ein Ausfall muss auch dort erreichbar sein. */
.pc-aus{margin-left:auto;border:1px solid color-mix(in srgb,var(--crit) 40%,var(--surface));
  background:var(--surface);color:var(--crit-ink);font-size:var(--tx-xs);font-weight:650;
  padding:2px var(--s-2);border-radius:var(--r-s);cursor:pointer;white-space:nowrap}
.pc-aus:hover{background:var(--crit);color:#fff;border-color:var(--crit)}

/* Auswahlkästchen auf der Pipeline-Karte: klein, vor der Auftragsnummer,
   und zurückhaltend, bis man es braucht – angehakt oder unter der Maus
   voll sichtbar. Die Karte selbst bleibt, wie sie war.                   */
.pcard .cb{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.pcard .cb:not(:checked){opacity:.55}
.pcard:hover .cb,.pcard .cb:focus-visible{opacity:1}
.pc-marken .cbf{margin-right:2px;position:relative}
/* position:relative ist hier nicht Kosmetik: Der Vorlesetext im Kästchen ist
   absolut positioniert. Ohne positionierten Vorfahren entkäme er dem
   waagerecht rollbaren Brett – eine Karte rechts ausserhalb des Bildschirms
   verbreiterte dann die ganze Seite (Querlauf am Telefon und Tablet).     */
@media (pointer:coarse){
  .pcard .cb{width:20px;height:20px;opacity:1}
  /* Die Trefferfläche bleibt fingergroß, die Markenzeile wächst nicht.  */
  .pc-marken .cbf{margin:-12px -4px -12px -10px}
}