/* Das Aussehen des Cockpits.
 *
 * ── WARUM ES DIESE DATEI GIBT ───────────────────────────────────────────
 *
 * portal.html hatte 10.858 Zeilen, davon 2.347 CSS. Zwei <style>-Bloecke,
 * mitten zwischen Aufbau und Skript — wer am Blatt arbeitete, scrollte
 * jedes Mal durch die Gestaltung hindurch, und wer an der Gestaltung
 * arbeitete, durch alles andere.
 *
 * Das hier ist ein reiner UMZUG, keine Ueberarbeitung: dieselben Regeln, in
 * derselben Reihenfolge. Die Reihenfolge ist nicht Geschmack — bei gleicher
 * Spezifitaet gewinnt die spaetere Regel, und der zweite Block (der
 * Dienstplan) stand im Blatt NACH dem ersten. Deshalb steht er auch hier
 * unten.
 *
 * Geprueft wird das nicht durch Hinsehen: scripts/portal-abdruck.js misst an
 * einer festen Auswahl von Stellen, was der Browser am Ende wirklich rechnet
 * (Farbe, Abstand, Schriftgroesse, Lage). Bleibt diese Liste gleich, hat der
 * Umzug nichts verschoben.
 *
 * Ausgeliefert wird die Datei mit `no-store` (siehe utils/kopfzeilen.js):
 * sonst haette ein Betrieb nach einem Umbau tagelang die alte Gestaltung zu
 * einem neuen Blatt — und das sieht aus wie ein kaputtes Cockpit.
 */

    :root {
      /* ☀️ Warm Studio — warm ivory ground, espresso ink, feather shadows */
      color-scheme: light;
      --bg: #F6F4EF;
      /* Hintergrundschleier — EINE Wahrheit fuer Seite und Anmeldung, hell und
         dunkel. Vorher standen vier Kopien desselben Verlaufs im Blatt, jede
         mit festen 1200px Breite und nur zwei Stopps (Farbe bei 0, transparent
         bei 50 %). Zwei Dinge machten daraus eine sichtbare Kante: auf einem
         breiten Bildschirm war der Verlauf lange vor dem Rand zu Ende, und der
         Alpha-Wert fiel linear — das Auge erkennt genau die Stelle, an der das
         Gefaelle aufhoert, als Strich. Jetzt waechst der Schleier relativ mit
         dem Fenster und laeuft ueber sechs Stopps weich aus, bis er im Nichts
         endet statt an einer Linie. */
      --wash:
        radial-gradient(135% 155% at 2% -30%,
          rgba(239, 232, 216, .92) 0%,
          rgba(239, 232, 216, .865) 12%,
          rgba(239, 232, 216, .714) 25%,
          rgba(239, 232, 216, .51) 38%,
          rgba(239, 232, 216, .303) 50%,
          rgba(239, 232, 216, .14) 62%,
          rgba(239, 232, 216, .043) 75%,
          rgba(239, 232, 216, .005) 88%,
          rgba(239, 232, 216, 0) 100%),
        radial-gradient(125% 145% at 104% -20%,
          rgba(237, 237, 251, .95) 0%,
          rgba(237, 237, 251, .893) 12%,
          rgba(237, 237, 251, .737) 25%,
          rgba(237, 237, 251, .526) 38%,
          rgba(237, 237, 251, .313) 50%,
          rgba(237, 237, 251, .145) 62%,
          rgba(237, 237, 251, .044) 75%,
          rgba(237, 237, 251, .005) 88%,
          rgba(237, 237, 251, 0) 100%);
      --surface: #FFFFFF;
      --ink: #23201A;
      --muted: #6B6559;
      --line: #E8E2D6;
      --brand: #6A5AE0;
      --brand-d: #574BC8;
      --brand-soft: #EFEBFB;
      /* Signature accent = the mockup's warm 3-colour gradient (indigo→violet→
         coral). Custom accents (Settings) override --accent inline via JS;
         --acc1/--acc2 stay for the 1- or 2-colour picker. */
      --acc1: #6A5AE0;
      --acc2: #F0562F;
      --accent: linear-gradient(120deg, #6A5AE0, #9A4EF0, #F0562F);
      --field: #FAF8F2;
      --field-focus: #FFFFFF;
      /* Analytics bars and deltas. One set per theme: the same indigo that
         reads on ivory vanishes on graphite, and a hex in the markup cannot
         follow the toggle. */
      --chart-1: #6A5AE0;
      --chart-2: #2F8F83;
      --chart-3: #D97706;
      --chart-4: #C2410C;
      --pos: #15803D;
      --neg: #B91C1C;
      --shadow: 0 1px 2px rgba(60, 50, 30, .05), 0 10px 30px rgba(60, 50, 30, .08);
      --shadow-lg: 0 24px 60px rgba(60, 50, 30, .16);
      --radius: 16px;
      --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0
    }

    h1, h2, h3, .greet { letter-spacing: -.02em; }
    body {
      /* exactly the mockup's --sans (system font) */
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      position: relative
    }
    /* ambient background wash — the mockup's signature warm/cool corner glow */
    body::before {
      content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background: var(--wash), var(--bg)
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: 0
    }

    input,
    select,
    textarea {
      font-family: inherit
    }

    .hidden {
      display: none !important
    }

    /* ---------- LOGIN ---------- */
    #login {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--wash), var(--bg)
    }

    .login-card {
      width: 100%;
      max-width: 400px;
      background: var(--surface);
      border-radius: 22px;
      box-shadow: var(--shadow-lg);
      padding: 36px 32px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 18px;
      margin-bottom: 6px
    }

    /* Login screens: center the GD logo + small brand name below it. */
    #login .brand { justify-content: center; }
    .brand-sub {
      text-align: center;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .04em;
      margin: 2px 0 14px
    }

    /* Der Anmeldebildschirm traegt die Marke AlbaWerk — das ist das Produkt,
       mit dem der Betrieb arbeitet. Gonzalez Digital steht als Herkunft ganz
       unten, klein: wer sich anmeldet, sucht sein Werkzeug, nicht den
       Hersteller. */
    .brand-word {
      text-align: center;
      font-size: 31px;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.05;
      margin: 6px 0 0;
      /* Der Farbverlauf der Wortmarke. -webkit-background-clip deckt alle
         heutigen Browser ab; faellt er aus, bleibt der Schriftzug einfach
         einfarbig lesbar statt unsichtbar — darum color als Rueckfall. */
      color: var(--ink);
      background: linear-gradient(95deg, #101828 0%, #2563eb 38%, #7c3aed 62%, #ec4899 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* Dunkle Ansicht: die Wortmarke beginnt hell statt fast schwarz — sonst
       verschwindet „Alba" im Hintergrund und nur „Werk" bleibt stehen. */
    [data-theme="dark"] .brand-word {
      color: #e8ecf6;
      background: linear-gradient(95deg, #e8ecf6 0%, #60a5fa 38%, #a78bfa 62%, #f472b6 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* Der gewaehlte Status im Auftragsblatt. Ohne eigene Regel sehen alle
       drei Knoepfe gleich aus, und der Betrieb muss oben rechts ins Abzeichen
       schauen, um zu wissen, worauf er gerade steht. */
    .auf-st.active {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
      font-weight: 700;
    }

    .brand-claim {
      text-align: center;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin: 7px 0 4px
    }
    .brand-by {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin: 26px 0 0;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .03em
    }
    .brand-by img { height: 16px; width: auto; display: block; opacity: .85 }

    .brand-logo {
      height: 92px;
      max-width: 380px;
      width: auto;
      object-fit: contain;
      display: block
    }

    /* Login-Screens: Logo größer als in der App-Kopfzeile — aber kleiner als
       frueher, seit Wortmarke und Claim darunter stehen. */
    #login .brand-logo { height: 104px; max-width: 260px; }
    #login .brand { margin-bottom: 0 }

    .brand .dot {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px
    }

    .login-card h1 {
      font-size: 22px;
      margin: 14px 0 4px
    }

    .login-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 22px
    }

    .field {
      margin-bottom: 14px
    }

    .field label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 6px
    }

    .field input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      font-size: 14.5px;
      outline: none;
      transition: .15s;
      background: var(--field)
    }

    .field input:focus {
      border-color: var(--brand);
      background: var(--field-focus);
      box-shadow: 0 0 0 4px var(--brand-soft)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14.5px;
      transition: .15s
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      width: 100%;
      box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 38%, transparent)
    }

    .btn-primary:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 9px 22px color-mix(in srgb, var(--brand) 45%, transparent)
    }
    .btn-primary:active { transform: none; filter: brightness(.98) }

    .btn-primary:disabled {
      opacity: .6;
      cursor: default
    }

    .err {
      color: #dc2626;
      font-size: 13px;
      margin-top: 10px;
      min-height: 18px
    }

    /* ---------- APP ---------- */
    /* Die Breite.
       Hier stand 1400px, und ab 1080px Fensterbreite sogar 1180px — auf einem
       Laptop mit 1440 blieben damit 260px leer, auf einem Schreibtisch-Bildschirm
       mit 1920 fast siebenhundert. Genau da fehlt die Breite aber: das
       Wochenraster des Dienstplans, die Auftragstafel und die Liste mit ihren
       Spalten. (Erica, 02.10.2026: „los margenes … son demasiado grandes y se
       pierde muchisimo espacio a los lados".)
       Jetzt nutzt die Anwendung die Breite, die da ist; die Grenze ist nur noch
       ein Anschlag fuer sehr grosse Bildschirme, damit eine Tabelle nicht
       zweieinhalb Meter breit wird. Lesetexte haben ihre eigene Breite dort, wo
       sie stehen (.who, .detail-empty .de-s). */
    #app {
      max-width: 2200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      align-items: start;
      min-height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      margin-bottom: 8px;
      /* Solid — the tabs stick right below; a fade-to-transparent bottom let
         the scrolling content shine through between logo and tabs. */
      background: var(--bg)
    }

    .greet-date { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
    .greet-date:empty { display: none; }
    /* Tap-to-see help bubble (mobile/touch); desktop also gets the native title.
       Inverts with the theme (--ink bg / --bg text) so it reads on both. */
    .hintpop { position: fixed; z-index: 200; max-width: 260px; background: var(--ink); color: var(--bg); padding: 8px 11px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-lg); pointer-events: none; }
    /* Right side of the Inbox topbar: search + the primary "new lead" action,
       so the button sits top-right on the greeting row (matches the layout). */
    .topbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

    .top-right {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .client-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 7px 12px;
      border-radius: 999px;
      box-shadow: var(--shadow);
      font-size: 13.5px;
      font-weight: 600
    }

    .client-chip .av {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      color: var(--muted);
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .icon-btn:hover {
      color: var(--ink)
    }

    /* stats */
    /* bento action tiles — one glanceable line each */
    .bento { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 12px }
    .bento:empty { display: none }
    .btile {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 9px 16px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: .15s;
      box-shadow: var(--shadow)
    }
    .btile:hover { transform: translateY(-1px) }
    .btile .bic { font-size: 16px }
    .btile .bnum { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap }
    .btile .bsub { font-size: 11.5px; opacity: .7; white-space: nowrap }
    /* tab counts */
    .tab .tcount { font-size: 10.5px; font-weight: 700; opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums }
    /* filter button + collapsible panel */
    .fbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 13.5px; white-space: nowrap }
    .fbtn .fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); position: absolute; top: 7px; right: 7px }
    .fpanel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 16px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: var(--shadow)
    }
    .fprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
    .fplab { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
    .fprow .fplab { width: 82px; flex: none }
    .fprow .fchips { margin: 0 }
    /* Vier Auswahlfelder nebeneinander, solange Platz ist; darunter zwei, dann
       eines. `auto-fit` statt fester Spalten: die Zeile bricht dort um, wo sie
       muss, und nicht dort, wo jemand eine Breite geraten hat. */
    .fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px }
    .ffeld { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
    .ffeld .sel { width: 100%; padding: 9px 11px; font-size: 13.5px; min-height: 42px }
    /* Ein gesetzter Filter faellt auf, ohne zu schreien: nur Rahmen und Schrift
       in der Markenfarbe. Sonst sucht man beim „warum ist die Liste leer?"
       wieder alle Felder ab. */
    .ffeld .sel.aktiv { border-color: var(--brand); color: var(--brand); font-weight: 650 }
    .fzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px;
      border-top: 1px solid var(--line); margin-top: 2px }
    .fcheck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; min-height: 38px }
    .fcheck input { width: auto }
    #fReset { font-size: 13px }
    .btile.hot { background: #FBE9E4; color: #B4443A }
    .btile.draft { background: var(--brand-soft); color: var(--brand-d) }
    .btile.active { border-color: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent) }
    [data-theme="dark"] .btile.hot { background: #33201C; color: #FF9B8F }
    [data-theme="dark"] .btile.draft { background: var(--brand-soft); color: var(--brand) }

    .stats {
      /* one row of equal-width boxes that resize to fit however many pipeline
         stages exist (add/remove a stage → they all re-fit the leads column).
         Falls back to horizontal scroll if there are too many to fit. */
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(72px, 1fr);
      gap: 8px;
      margin: 8px 0 16px;
      overflow-x: auto
    }

    .stat {
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px 10px;
      box-shadow: var(--shadow)
    }

    .stat .n {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.3px;
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .stat .l {
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0
    }

    .stat .l .lt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .stat .l .pip {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex: none
    }

    /* unified row badge — one visual language for all chips */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.65;
      letter-spacing: .01em;
      vertical-align: middle
    }
    .badge-irr { background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0 }
    .badge-dup { background:#fef2f2;color:#b91c1c;border:1px solid #fecaca }
    .badge-rev-up { background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0 }
    .badge-rev-dn { background:#fef2f2;color:#b91c1c;border:1px solid #fecaca }
    .badge-paid { background:#DCFCE7;color:#166534;border:1px solid #bbf7d0 }
    .badge-inv { background:#F0FDF4;color:#166534;font-size:11px }
    [data-theme="dark"] .badge-irr { background:#1e2330;color:#94a3b8;border-color:#2d3548 }
    [data-theme="dark"] .badge-dup { background:#2a1215;color:#fca5a5;border-color:#7f1d1d }
    [data-theme="dark"] .badge-rev-up { background:#0a2615;color:#4ade80;border-color:#166534 }
    [data-theme="dark"] .badge-rev-dn { background:#2a1215;color:#fca5a5;border-color:#7f1d1d }
    [data-theme="dark"] .badge-paid { background:#0a2615;color:#4ade80;border-color:#166534 }
    [data-theme="dark"] .badge-inv { background:#0a2615;color:#4ade80 }

    /* skeleton shimmer (loading placeholders) */
    .skel {
      position: relative;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px
    }
    .skel::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(148, 161, 182, .16), transparent);
      animation: shimmer 1.2s infinite
    }
    @keyframes shimmer { 100% { transform: translateX(100%) } }
    .skel-row { height: 74px; margin-bottom: 10px }
    .skel-card { height: 56px; margin-bottom: 12px }

    /* reload spinner */
    @keyframes spin { to { transform: rotate(360deg) } }
    .spin { animation: spin .8s linear infinite }

    /* toolbar */
    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
      margin-bottom: 16px
    }
    /* The tabs and the filter button stay put while the list scrolls under
       them; the ground colour keeps rows from showing through. Only in the
       inbox — the other toolbars sit above short content. */
    .inbox-list > .toolbar {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--bg);
      padding: 6px 0;
      margin-top: 6px;
    }

    .tabs {
      display: flex;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 5px;
      border-radius: 13px;
      box-shadow: var(--shadow);
      flex-wrap: wrap
    }

    .tab {
      padding: 8px 13px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      background: transparent
    }

    .tab:hover {
      color: var(--ink)
    }

    .tab.active {
      background: var(--brand-soft);
      color: var(--brand-d)
    }

    .search {
      flex: 1;
      min-width: 160px;
      position: relative
    }

    .search input {
      width: 100%;
      padding: 11px 14px 11px 38px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      font-size: 14px;
      outline: none;
      box-shadow: var(--shadow)
    }

    .search input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px var(--brand-soft)
    }

    .search svg {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted)
    }

    .btn-add {
      background: var(--accent);
      color: #fff;
      padding: 11px 16px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 38%, transparent);
      white-space: nowrap;
      transition: .15s;
    }

    .btn-add:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 9px 22px color-mix(in srgb, var(--brand) 45%, transparent);
    }

    /* segmented sort control */
    .seg {
      display: inline-flex;
      gap: 4px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 4px;
      border-radius: 12px;
      box-shadow: var(--shadow)
    }

    .seg-opt {
      padding: 8px 12px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      background: transparent;
      white-space: nowrap
    }

    .seg-opt:hover {
      color: var(--ink)
    }

    .seg-opt.active {
      background: var(--brand-soft);
      color: var(--brand-d)
    }

    /* category filter chips */
    .fchips {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      width: 100%;
      margin: -4px 0 16px
    }

    .fchip {
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--muted);
      background: var(--surface);
      border: 1px solid var(--line)
    }
    /* weekday toggle chips (staff hours) */
    .daychip { min-width: 38px; padding: 6px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--muted); background: var(--surface); border: 1px solid var(--line); font-family: inherit; }
    .daychip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
    /* multi-assignee (Auftrag crew) checkbox chips */
    .asgn-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .asgn-list label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); user-select: none; }
    .asgn-list label.on { border-color: var(--brand); background: var(--brand-soft, #eef2ff); color: var(--brand-d, #4338ca); font-weight: 600; }
    .asgn-list input { accent-color: var(--brand); margin: 0; }
    .asgn-list .none { color: var(--muted); font-size: 12.5px; padding: 5px 0; }

    .fchip:hover {
      color: var(--ink);
      border-color: var(--brand)
    }

    .fchip.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand)
    }

    .row2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      /* the labels inside are :first-child of their column (margin-top:0), so
         give the row itself the same top gap the other fields have */
      margin-top: 18px
    }

    /* language switcher */
    .langsel {
      display: inline-flex;
      gap: 2px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px;
      box-shadow: var(--shadow)
    }

    .langsel button {
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--muted);
      background: transparent;
      letter-spacing: .02em
    }

    .langsel button:hover {
      color: var(--ink)
    }

    .langsel button.active {
      background: var(--brand);
      color: #fff
    }

    /* ===== dark theme ===== */
    [data-theme="dark"] {
      /* 🌙 Midnight Ops — graphite command center, electric accent, deep shadow */
      color-scheme: dark;
      --bg: #0D1016;
      /* Derselbe Schleier in dunkel, an die Betriebsfarbe gebunden: waehlt der
         Betrieb ein eigenes Akzentpaar, faerbt sich der Hintergrund mit. */
      --wash:
        radial-gradient(150% 180% at 95% -40%,
          color-mix(in srgb, var(--brand) 18%, transparent) 0%,
          color-mix(in srgb, var(--brand) 16.92%, transparent) 12%,
          color-mix(in srgb, var(--brand) 13.97%, transparent) 25%,
          color-mix(in srgb, var(--brand) 9.97%, transparent) 38%,
          color-mix(in srgb, var(--brand) 5.94%, transparent) 50%,
          color-mix(in srgb, var(--brand) 2.74%, transparent) 62%,
          color-mix(in srgb, var(--brand) 0.83%, transparent) 75%,
          color-mix(in srgb, var(--brand) 0.1%, transparent) 88%,
          color-mix(in srgb, var(--brand) 0%, transparent) 100%),
        radial-gradient(140% 170% at -18% -10%,
          color-mix(in srgb, var(--acc2) 12%, transparent) 0%,
          color-mix(in srgb, var(--acc2) 11.28%, transparent) 12%,
          color-mix(in srgb, var(--acc2) 9.31%, transparent) 25%,
          color-mix(in srgb, var(--acc2) 6.65%, transparent) 38%,
          color-mix(in srgb, var(--acc2) 3.96%, transparent) 50%,
          color-mix(in srgb, var(--acc2) 1.83%, transparent) 62%,
          color-mix(in srgb, var(--acc2) 0.55%, transparent) 75%,
          color-mix(in srgb, var(--acc2) 0.06%, transparent) 88%,
          color-mix(in srgb, var(--acc2) 0%, transparent) 100%);
      --surface: #141821;
      --ink: #EAEDF3;
      --muted: #8B93A2;
      --line: #222836;
      --brand: #8E7DFF;
      --brand-d: #7C6CFF;
      --brand-soft: #1E2333;
      --acc1: #8E7DFF;
      --acc2: #FF7B5C;
      --accent: linear-gradient(120deg, #7C6CFF, #B15CFF, #FF7B5C);
      --field: #0D1016;
      --field-focus: #0B0E13;
      --chart-1: #8E7DFF;
      --chart-2: #4FD1C5;
      --chart-3: #FBBF24;
      --chart-4: #FB923C;
      --pos: #4ADE80;
      --neg: #F87171;
      --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .5);
      --shadow-lg: 0 28px 70px rgba(0, 0, 0, .65);
    }
    [data-theme="dark"] .inp,
    [data-theme="dark"] .txt,
    [data-theme="dark"] .sel,
    [data-theme="dark"] .field input { background: var(--field); color: var(--ink) }
    /* focus must stay dark — the light theme turns the field white on focus,
       which made the text invisible while editing in dark mode. */
    [data-theme="dark"] .inp:focus,
    [data-theme="dark"] .txt:focus,
    [data-theme="dark"] .sel:focus,
    [data-theme="dark"] .field input:focus { background: var(--field-focus); color: var(--ink) }
    [data-theme="dark"] .lab,
    [data-theme="dark"] .field label { color: var(--muted) }
    [data-theme="dark"] .search input { color: var(--ink) }
    [data-theme="dark"] .status-opt { background: var(--field); color: var(--muted) }
    [data-theme="dark"] .btn-ghost { background: #161A21; color: #C7CEDA; border-color: var(--line) }
    [data-theme="dark"] .btn-ghost:hover { background: #1C212B }
    [data-theme="dark"] .ltag { background: #1E2434; border-color: #2A3140; color: #C4CCDB }
    /* accent colour swatches (Settings) */
    .swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0 }
    .swatch.on { border-color: var(--ink) }

    /* ===== two-pane inbox (list + detail) ===== */
    .inbox-split { display: block }
    .detail-empty { display: none }
    .lead.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
    @media (min-width: 1080px) {
      /* Full-width leads list. Opening a lead REPLACES the list with a
         full-width detail that expands in; closing brings the list back. */
      .inbox-split { display: block }
      .inbox-detail { margin-top: 12px }
      .inbox-detail:not(.has-sel) { display: none }
      .inbox-split:has(.inbox-detail.has-sel) .inbox-list { display: none }
      #inboxDetail .scrim { display: none }
      #inboxDetail .drawer {
        position: static; transform: none; width: 100%; max-width: none; height: auto;
        box-shadow: none; border: 1px solid var(--line); border-radius: 16px; display: none
      }
      #inboxDetail.has-sel .drawer { display: flex; animation: expandIn .28s cubic-bezier(.22, 1, .36, 1) }
      #inboxDetail .drawer-body { overflow: visible }
      .detail-empty { display: none }
    }
    @keyframes expandIn { from { opacity: 0; transform: scale(.975) } to { opacity: 1; transform: none } }
    .detail-empty .de-ic { font-size: 34px; opacity: .5; margin-bottom: 2px; }
    .detail-empty .de-t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
    .detail-empty .de-s { font-size: 12.5px; color: var(--muted); max-width: 24em; line-height: 1.5; }

    /* lead list */
    .list {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .lead {
      display: flex;
      align-items: center;
      gap: 13px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 15px 17px;
      box-shadow: var(--shadow);
      cursor: pointer;
      position: relative;
      transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s
    }

    .lead:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--brand) 42%, var(--line))
    }

    .lead .av {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      font-size: 15px;
      box-shadow: 0 2px 6px rgba(20, 16, 40, .10)
    }
    /* initials avatar with a small channel badge in the corner (inbox card) */
    .lead .ava { position: relative; flex: none }
    .lead .ava .ini {
      width: 44px; height: 44px; border-radius: 13px;
      background: var(--brand-soft); color: var(--brand);
      font-weight: 800; font-size: 14.5px; letter-spacing: .02em;
      display: grid; place-items: center;
    }
    .lead .ava .ch {
      position: absolute; right: -4px; bottom: -4px;
      width: 20px; height: 20px; border-radius: 7px;
      background: var(--surface); border: 1px solid var(--line);
      display: grid; place-items: center; font-size: 11px; box-shadow: var(--shadow)
    }
    .lead .nm .pdot { width: 8px; height: 8px }

    .lead .main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .lead .nm {
      font-weight: 800;
      font-size: 14px;
      letter-spacing: -.01em;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap
    }

    .lead .sub {
      color: var(--muted);
      font-size: 12.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .lead .meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 7px;
      flex: none
    }

    .lead .date {
      font-size: 11px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      letter-spacing: .01em
    }
    /* New Inbox row meta: priority pill + channel(icon+name)/time in one row. */
    .lead .meta.mrow { flex-direction: row; align-items: center; gap: 13px; flex-wrap: wrap; justify-content: flex-end; }
    .pscore { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
    .pscore.hot  { background: #dc26261a; color: #dc2626; }
    .pscore.warm { background: #d977061a; color: #d97706; }
    .pscore.cold { background: #2563eb1a; color: #2563eb; }
    [data-theme="dark"] .pscore.hot  { background: #f0576f24; color: #f0576f; }
    [data-theme="dark"] .pscore.warm { background: #e6a23c24; color: #e6a23c; }
    [data-theme="dark"] .pscore.cold { background: #5b9bff24; color: #5b9bff; }
    .chanbox { text-align: right; min-width: 92px; }
    .chanrow { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12.5px; color: var(--ink); opacity: .82; font-weight: 500; }
    .chanrow svg { width: 14px; height: 14px; stroke-width: 1.8; flex: none; }
    .showall { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; margin-top: 2px; background: none; border: 1px dashed var(--line); border-radius: 11px; color: var(--brand); font-weight: 600; font-size: 13px; cursor: pointer; transition: .15s; }
    .showall:hover { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
    /* ── Kundenbank (premium) ── */
    .cav { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--brand-soft); color: var(--brand); position: relative; }
    .cav.vip { background: linear-gradient(135deg, color-mix(in srgb, var(--acc1, var(--brand)) 26%, transparent), color-mix(in srgb, var(--acc2, var(--brand)) 42%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent); color: var(--ink); }
    .cav .cstar { position: absolute; top: -8px; right: -7px; font-size: 14px; line-height: 1; color: #e6c260; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
    .cust-rev { text-align: right; flex: none; }
    .cust-rev .num { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .cust-rev .num.dim { color: var(--muted); font-weight: 600; }
    .cust-rev .seen { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
    .cust-vip-chip { font-size: 11px; font-weight: 700; color: #3a2e00; background: linear-gradient(135deg, #e6c260, #f0d98a); padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; white-space: nowrap; }
    .cust-stats-4 { grid-template-columns: repeat(4, 1fr) !important; }
    #cust_avatar.vip { background: linear-gradient(135deg, color-mix(in srgb, var(--acc1, var(--brand)) 30%, transparent), color-mix(in srgb, var(--acc2, var(--brand)) 46%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent); color: var(--ink) !important; }

    .tag-src {
      font-size: 10.5px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .ltags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px
    }

    .ltag {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 1px 7px
    }

    .ltag::before {
      content: "#";
      opacity: .5
    }

    .qual {
      margin-top: 5px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      color: var(--brand-d);
      background: var(--brand-soft);
      padding: 3px 9px;
      border-radius: 8px
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 999px
    }

    .pill .pip {
      width: 7px;
      height: 7px;
      border-radius: 50%
    }

    .s-new {
      background: #e0edff;
      color: #1d4ed8
    }

    .s-new .pip {
      background: #2563eb
    }

    .s-contacted {
      background: #fef3c7;
      color: #92400e
    }

    .s-contacted .pip {
      background: #d97706
    }

    .s-qualified {
      background: #ede9fe;
      color: #6d28d9
    }

    .s-qualified .pip {
      background: #7c3aed
    }

    .s-won {
      background: #dcfce7;
      color: #15803d
    }

    .s-won .pip {
      background: #16a34a
    }

    .s-lost {
      background: #fee2e2;
      color: #b91c1c
    }

    .s-lost .pip {
      background: #dc2626
    }

    .empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--muted)
    }

    .empty .ic {
      font-size: 40px;
      margin-bottom: 10px
    }

    .empty h3 {
      margin: 0 0 6px;
      color: var(--ink);
      font-size: 16px
    }

    /* drawer */
    .scrim {
      position: fixed;
      inset: 0;
      background: rgba(10, 15, 28, .5);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      opacity: 0;
      pointer-events: none;
      transition: .25s;
      z-index: 40
    }

    .scrim.show {
      opacity: 1;
      pointer-events: auto
    }

    /* Import dialog (centered modal) */
    .impdlg {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -46%);
      width: 640px; max-width: 94vw;
      max-height: 88vh;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 32px 90px rgba(10, 15, 28, .35);
      z-index: 60;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .impdlg.show { display: flex; animation: impIn .28s cubic-bezier(.22,1,.36,1) }
    @keyframes impIn { from { opacity: 0; transform: translate(-50%,-42%) } to { opacity: 1; transform: translate(-50%,-50%) } }
    @media (prefers-reduced-motion: reduce) { .impdlg.show { animation: none } }
    .impdlg.show { transform: translate(-50%, -50%) }
    .impdlg-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--line) }
    .impdlg-head h2 { margin: 0; font-size: 18px }
    .impdlg-body { padding: 20px 22px; overflow-y: auto }
    .impdlg-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line) }

    /* Custom confirm/prompt/alert dialog (replaces the browser's native ones) */
    .uidlg-back { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 15, 28, .42); backdrop-filter: blur(2px); }
    .uidlg-back.show { display: flex; }
    .uidlg { width: 420px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 32px 90px rgba(10, 15, 28, .38); overflow: hidden; animation: uidlgIn .22s cubic-bezier(.22, 1, .36, 1); }
    @keyframes uidlgIn { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
    @media (prefers-reduced-motion: reduce) { .uidlg { animation: none } }
    .uidlg-body { padding: 24px 24px 20px; }
    .uidlg-ic { font-size: 26px; line-height: 1; margin-bottom: 10px; }
    .uidlg-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
    .uidlg-msg { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; white-space: pre-line; }
    .uidlg-input { width: 100%; margin-top: 14px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 10px; }
    .uidlg-input:focus { outline: none; border-color: var(--brand); }
    .uidlg-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px 18px; }
    .uidlg-btn { padding: 10px 18px; font-size: 14px; font-weight: 700; font-family: inherit; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: var(--surface); color: var(--ink); }
    .uidlg-btn:hover { border-color: var(--brand); }
    .uidlg-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
    .uidlg-btn.primary:hover { background: var(--brand-d); }
    .uidlg-btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
    .uidlg-btn.danger:hover { background: #b91c1c; }
    .imp-drop {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 30px 20px; border: 2px dashed var(--line);
      border-radius: 14px; cursor: pointer; color: var(--muted);
      transition: border-color .18s, background .18s;
    }
    .imp-drop:hover, .imp-drop.drag { border-color: var(--brand); background: var(--brand-soft); color: var(--brand) }
    .imp-map { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px }
    .imp-map .row { display: flex; flex-direction: column; gap: 4px }
    .imp-map .row .lab { font-size: 12px }
    .imp-prev-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px }
    table.imp-prev { border-collapse: collapse; width: 100%; font-size: 12.5px }
    table.imp-prev th, table.imp-prev td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis }
    table.imp-prev th { color: var(--muted); font-weight: 700; background: var(--brand-soft) }
    table.imp-prev tr:last-child td { border-bottom: 0 }
    @media (max-width: 560px) { .imp-map { grid-template-columns: 1fr } }

    /* Anhänge / adjuntos download chips in the lead drawer */
    .att-chip { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
      padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
      color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s }
    .att-chip:hover { border-color: var(--brand); background: var(--brand-soft) }
    .att-chip .att-ic { font-size: 17px; flex: 0 0 auto }
    .att-chip .att-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
    .att-chip .att-sz { color: var(--muted); font-size: 12px; flex: 0 0 auto }
    .att-chip .att-dl { color: var(--brand); font-size: 15px; flex: 0 0 auto }
    /* Preview cards: image thumbnail / audio player + download in the lead drawer */
    .att-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--bg) }
    .att-thumb { max-width: 170px; max-height: 170px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); object-fit: cover }
    .att-audio { width: 100%; max-width: 270px; height: 38px }
    /* Inline PDF: the whole page rendered by the browser, no download needed to
       know whether the file is the invoice or the floor plan. */
    .att-pdf { width: 100%; height: 320px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
    .att-pdf-open { align-self: flex-start }
    /* Lightbox */
    .lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 10, 16, .88); display: flex; flex-direction: column; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
    .lightbox.hidden { display: none }
    .lb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #EAEDF3 }
    .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600 }
    .lb-tab, .lb-x { color: #EAEDF3 !important; border-color: rgba(255,255,255,.25) !important; text-decoration: none; font-size: 13px }
    .lb-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 14px 14px }
    .lb-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6) }
    .lb-body iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff }
    .att-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap }
    .att-meta .att-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink) }
    .att-dlbtn { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--brand) }
    .att-dlbtn:hover { background: var(--brand-soft); border-color: var(--brand) }

    /* Aufträge: Board/Woche toggle + weekly grid */
    .au-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface) }
    .au-tg { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 16px; cursor: pointer }
    .au-tg.active { background: var(--accent); color: #fff }
    table.au-week { border-collapse: collapse; width: 100%; min-width: 720px }
    table.au-week th, table.au-week td { border: 1px solid var(--line); vertical-align: top; padding: 6px }
    table.au-week thead th { background: var(--brand-soft); font-size: 12px; font-weight: 700; text-align: center; padding: 8px 6px }
    table.au-week thead th.today { background: var(--accent); color: #fff }
    table.au-week td.wname, table.au-week th.wname { text-align: left; font-weight: 700; font-size: 13px; width: 150px; background: var(--surface); position: sticky; left: 0; z-index: 1 }
    table.au-week td { height: 62px }
    .au-cell { display: flex; flex-direction: column; gap: 4px }
    .au-chip { display: block; text-align: left; width: 100%; border: 0; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 5px; padding: 4px 7px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .au-chip.st-offen { border-left-color: #d97706; background: #fff7ed }
    .au-chip.st-in_arbeit { border-left-color: #2563eb; background: #eff6ff }
    .au-chip.st-erledigt { border-left-color: #16a34a; background: #f0fdf4; opacity: .75 }
    /* Aufträge: Listen-Ansicht (wie Posteingang, ganze Zeile sichtbar) */
    #au_list table { width: 100%; border-collapse: collapse; font-size: 13px }
    #au_list th, #au_list td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle }
    #au_list th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); white-space: nowrap }
    #au_list tbody tr { cursor: pointer }
    #au_list tbody tr:hover { background: var(--brand-soft) }
    #au_list td.au-name { font-weight: 600 }
    #au_list td.au-topic { color: var(--muted); max-width: 340px }
    #au_list .au-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap }
    #au_list .au-pill.st-offen { color: #b45309; background: #fff7ed; border: 1px solid #fed7aa }
    #au_list .au-pill.st-in_arbeit { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe }
    #au_list .au-pill.st-erledigt { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0 }
    #au_list .au-empty { padding: 16px 12px; color: var(--muted); font-size: 13px }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 580px;
      max-width: 94vw;
      background: var(--surface);
      box-shadow: -24px 0 80px rgba(10, 15, 28, .28);
      border-radius: 22px 0 0 22px;
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.22, 1, .36, 1);
      z-index: 50;
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .drawer.show {
      transform: none
    }

    .drawer.show .drawer-body { animation: rise .3s cubic-bezier(.22, 1, .36, 1) }
    @keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
    @media (prefers-reduced-motion: reduce) {
      .drawer, .drawer.show .drawer-body { transition: none; animation: none }
    }

    .drawer-head {
      padding: 24px 24px 18px;
      background: linear-gradient(150deg, var(--brand-soft) 0%, transparent 62%);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px
    }

    .drawer-head .av {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 12px;
      box-shadow: 0 6px 18px rgba(10, 15, 28, .12)
    }

    .drawer-head h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.02em;
      text-wrap: balance
    }

    .drawer-head .who {
      color: var(--muted);
      font-size: 12.5px;
      margin-top: 3px
    }

    /* quick actions: call / mail the lead in one tap */
    .qacts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
    .qact {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 13px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: var(--shadow);
      transition: .15s
    }
    .qact:hover { border-color: var(--brand); color: var(--brand-d); transform: translateY(-1px) }
    /* "Lesen zuerst": bigger contact buttons + a header chip summary */
    .qacts .qact { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13.5px; font-weight: 700; border-radius: 12px }
    .qact.prim { background: var(--brand); border-color: var(--brand); color: #fff }
    .qact.prim:hover { color: #fff; filter: brightness(1.05) }
    .dchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px }
    .dchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .01em }
    /* grouped admin actions popover in the drawer toolbar */
    .actions-wrap { position: relative; display: inline-flex }
    .actions-menu { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; min-width: 190px;
      background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
      padding: 6px; display: flex; flex-direction: column; gap: 4px }
    .actions-menu.hidden { display: none }
    .actions-menu .btn-ghost { justify-content: flex-start; width: 100%; box-shadow: none }

    .drawer-body {
      padding: 18px 20px 22px;
      overflow: auto;
      flex: 1;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    /* grouped field cards */
    .fgroup {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px 17px 18px;
      box-shadow: var(--shadow);
      transition: border-color .2s, box-shadow .2s
    }
    details.fgroup:hover { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)) }
    .fgroup > .gh {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0
    }
    .fgroup > .gh::before {
      content: '';
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
      flex: none
    }
    /* fgroups are collapsible modules: click the header to open/close */
    details.fgroup > summary.gh { cursor: pointer; list-style: none; user-select: none }
    details.fgroup > summary.gh::-webkit-details-marker { display: none }
    details.fgroup > summary.gh::after {
      content: '▾';
      margin-left: auto;
      color: var(--muted);
      font-size: 12px;
      transition: transform .18s
    }
    details.fgroup:not([open]) > summary.gh::after { transform: rotate(-90deg) }
    details.fgroup[open] > summary.gh { margin-bottom: 12px }
    details.fgroup:not([open]) { padding-bottom: 16px }
    summary.gh:hover { color: var(--ink) }
    .fgroup.fb { border-left: 4px solid #dc2626 }
    .fgroup.ai { border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); background: linear-gradient(165deg, var(--brand-soft) 0%, var(--surface) 34%) }

    .drawer-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }
    .drawer-foot > * { min-width: 0 }
    .drawer-foot .btn-ghost { padding: 12px 13px; white-space: nowrap }
    /* Speichern fills the remaining space; wraps to its own full row if tight */
    .drawer-foot .btn-primary { width: auto; flex: 1 1 150px }

    .lab {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin: 14px 0 6px
    }

    .lab:first-child {
      margin-top: 0
    }

    .inp,
    .txt,
    .sel {
      width: 100%;
      padding: 11px 13px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      font-size: 14px;
      outline: none;
      background: var(--field);
      transition: border-color .15s, box-shadow .15s, background .15s
    }
    .inp:hover, .txt:hover, .sel:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) }

    .sel-sm {
      width: auto;
      max-width: 180px;
      padding: 9px 11px;
      font-size: 13px;
      background: var(--surface);
      box-shadow: var(--shadow)
    }

    .inp:focus,
    .txt:focus,
    .sel:focus {
      border-color: var(--brand);
      background: var(--field-focus);
      box-shadow: 0 0 0 4px var(--brand-soft)
    }

    .txt {
      min-height: 90px;
      resize: vertical
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px
    }

    .status-opt {
      padding: 10px 8px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      background: var(--field);
      transition: border-color .13s, color .13s, background .13s, transform .1s;
      cursor: pointer
    }
    .status-opt:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--ink); background: var(--surface) }
    .status-opt:active { transform: scale(.96) }

    .status-opt.on {
      border-color: transparent;
      color: #fff;
      box-shadow: 0 6px 16px rgba(10, 15, 28, .22)
    }

    .btn-ghost {
      background: var(--surface);
      color: #4A443A;
      border: 1px solid var(--line);
      padding: 12px 16px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      transition: .14s
    }
    .btn-ghost:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) }

    .btn-ghost:hover {
      background: #f8fafc
    }

    .grow {
      flex: 1
    }

    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: var(--ink);
      color: #fff;
      padding: 12px 18px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      opacity: 0;
      pointer-events: none;
      transition: .2s;
      z-index: 60;
      box-shadow: var(--shadow-lg)
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%)
    }

    /* Dark theme: --ink is near-white there, so the pill flips to a light
       background — the text must flip to dark to stay readable. */
    [data-theme="dark"] .toast {
      color: #1a2535
    }

    @media(max-width:760px) {
      .topbar {
        flex-wrap: wrap;
        gap: 8px
      }

      .agrid {
        grid-template-columns: 1fr !important
      }
    }

    /* ===== left sidebar (section nav) ===== */
    .side {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 18px 12px;
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 62%, transparent);
      backdrop-filter: blur(12px);
    }
    /* ── FLAECHEN, DIE DEN SCHLEIER NICHT ZERSCHNEIDEN DUERFEN ──────────
       Erica, 03.10.2026: „los colores de degradado del fondo se ven como
       cortados". Gemessen im echten Cockpit (scripts/hintergrund-check.js):
       an drei Stellen sprang die Farbe schlagartig um bis zu 34 Stufen —
       am rechten Rand der Seitenspalte, unter dem Kopfband und unter der
       Reiterleiste. Der Grund ist immer derselbe: der Schleier liegt als
       FIXIERTE Ebene hinter der Seite (body::before), und jede Flaeche, die
       darueber ihr eigenes --bg malt, stanzt ein sauberes Rechteck hinein.
       Bei Matzkas gelber Hausfarbe ist der Schleier kraeftig, also war das
       Rechteck deutlich zu sehen.

       Verstecken geht nicht: die Leisten MUESSEN deckend sein, sonst scrollt
       die Liste sichtbar unter ihnen durch. Also malen sie denselben
       Verlauf noch einmal — mit background-attachment:fixed, das heisst an
       derselben Stelle wie die Ebene darunter. Deckend und trotzdem
       unsichtbar.

       Nur fuer breite Schirme: auf dem Handy wird die Spalte zur Leiste am
       unteren Rand, und fixierte Hintergruende sind dort (iOS) unzuverlaessig
       — dann lieber der alte, schlichte Grund. */
    @media (min-width: 1001px) {
      .side,
      .topbar,
      .mainpane .topbar,
      .inbox-list > .toolbar,
      #dp_grid thead th {
        background: var(--wash), var(--bg);
        background-attachment: fixed, fixed;
      }
      /* Die Spalte bleibt eine Spalte — aber durch die Linie rechts, nicht
         durch einen Farbblock. Das Weichzeichnen hatte nur Sinn, solange sie
         durchscheinend war. */
      .side { backdrop-filter: none; }

      /* ── WEICHE RAENDER ───────────────────────────────────────────────
         Erica, 03.10.2026: „no se pueden hacer los bordes como difuminados
         para que no se note tanto el corte?" — doch, und genau so gehoert
         es sich.

         Der Grund der Leisten ist jetzt nahtlos, aber sie bleiben deckend:
         sobald eine Zeile darunter wegscrollt, wird sie an der Unterkante
         GEKAPPT — ein waagerechter Schnitt quer durchs Bild. Eine Maske
         laesst die Leiste auf den letzten Pixeln ausblenden: die Zeile
         verschwindet, statt abgeschnitten zu werden.

         Die Leisten haben unten extra Luft, damit die Maske nur den
         leeren Rand erwischt und nie den Text oder die Reiter. */
      .topbar,
      .inbox-list > .toolbar {
        /* Die Leiste reicht jetzt bis an den Rand des Arbeitsbereichs.
           Vorher endete sie am Textrand und liess links und rechts je 26
           Pixel blank — gemessen: dort schien die Liste in voller Staerke
           durch, waehrend sie zwei Zentimeter weiter innen verdeckt war.
           Das war der Rest, den Erica noch sah: „el borde de abajo ya esta
           arreglado pero no el de los laterales."
           Negative Aussen- plus gleich grosse Innenabstaende: die Leiste
           waechst, ihr Inhalt bleibt, wo er war. */
        margin-left: -26px;
        margin-right: -26px;
        padding-left: 26px;
        padding-right: 26px;
        padding-bottom: 22px;
        /* Zwei Masken, und es zaehlt nur, wo BEIDE decken: unten blendet sie
           aus, links und rechts ebenso. Die seitlichen 20 Pixel liegen im
           neuen Aussenrand, also nie auf Text oder Knopf. */
        -webkit-mask-image:
          linear-gradient(to bottom, #000 calc(100% - 18px), transparent),
          linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
        mask-image:
          linear-gradient(to bottom, #000 calc(100% - 18px), transparent),
          linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
      }
      /* Auch die Trennlinie der Spalte endet nicht mehr abrupt: sie wird
         oben und unten zu nichts. Darum als eigene Flaeche statt als
         border-right — ein Rahmen kann nicht ausblenden. */
      .side { border-right: 0; position: relative; }
      .side::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent);
        pointer-events: none;
      }
    }

    .side-brand { padding: 4px 8px 14px; }
    .side-brand .brand-logo { height: 54px; max-width: 200px; }

    .secnav {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .secbtn {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      text-align: left;
      border: 1px solid transparent;
      background: none;
      border-radius: 11px;
      padding: 10px 13px;
      font-weight: 600;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      transition: .15s;
    }
    .secbtn .nic { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
    .secbtn .nic svg { width: 19px; height: 19px; stroke-width: 1.75; }
    .secbtn .nlb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .secbtn:hover { color: var(--ink); background: var(--surface); }
    .secbtn.active {
      color: var(--ink);
      background: color-mix(in srgb, var(--brand) 12%, var(--surface));
      border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
      box-shadow: var(--shadow);
      position: relative;
    }
    /* Accent bar on the active tab — uses the tenant's own accent (solid or
       gradient), so it follows whatever colour the client picked. */
    .secbtn.active::before {
      content: "";
      position: absolute;
      left: 3px; top: 9px; bottom: 9px;
      width: 3px; border-radius: 3px;
      background: var(--accent);
    }

    /* Sidebar sections (collapsible groups) — tame the long list of tabs. */
    .secgrp { display: flex; flex-direction: column; gap: 4px; }
    .secgrp + .secgrp { margin-top: 8px; }
    .secgrp-h {
      display: flex; align-items: center; gap: 6px; width: 100%;
      background: none; border: 0; cursor: pointer;
      padding: 5px 13px 3px; color: var(--muted);
      font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    }
    .secgrp-h .nlb { flex: 1; text-align: left; }
    .secgrp-h:hover { color: var(--ink); }
    .secgrp-cv { width: 13px; height: 13px; flex: none; transition: transform .18s; opacity: .65; }
    .secgrp.collapsed .secgrp-cv { transform: rotate(-90deg); }
    .secgrp-b { display: flex; flex-direction: column; gap: 4px; }
    .secgrp.collapsed .secgrp-b { display: none; }
    .secgrp.gh-empty { display: none; }

    .side-foot {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 6px 4px;
      border-top: 1px solid var(--line);
    }
    .side-foot .client-chip { width: 100%; }
    .side-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

    .mainpane { min-width: 0; padding: 0 26px 70px; }
    /* search lives in the top bar (fixed box, right side) */
    .mainpane .topbar .search { flex: 0 0 auto; width: 280px; max-width: 44vw; }

    /* user chip → click reveals the tools (theme / language / logout) */
    .side-foot { position: relative; }
    .user-btn {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line);
      background: var(--surface); box-shadow: var(--shadow);
      cursor: pointer; font: inherit; text-align: left;
    }
    .user-btn .av { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff;
      display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
    .user-btn .un { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-btn .chev { color: var(--muted); font-size: 13px; transition: .2s; }
    .user-btn.open .chev { transform: rotate(180deg); }
    .user-menu {
      position: absolute; bottom: 62px; left: 12px; right: 12px;
      background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
      box-shadow: var(--shadow-lg); padding: 7px; z-index: 60;
      display: flex; flex-direction: column; gap: 2px;
      animation: umRise .16s ease;
    }
    @keyframes umRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .um-row {
      display: flex; align-items: center; gap: 11px; width: 100%;
      padding: 9px 11px; border: 0; border-radius: 10px;
      background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
      cursor: pointer; text-align: left;
    }
    .um-row:hover { background: var(--brand-soft); }
    .um-row.danger { color: #b91c1c; }
    .um-row.danger:hover { background: #fee2e2; }
    [data-theme="dark"] .um-row.danger { color: #fca5a5; }
    [data-theme="dark"] .um-row.danger:hover { background: #2a1215; }
    .um-ic { width: 20px; text-align: center; font-size: 15px; }
    .um-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; }
    .um-lang .um-lb { font-size: 13px; font-weight: 600; color: var(--muted); }
    .um-sep { height: 1px; background: var(--line); margin: 4px 6px; }
    .um-ver { text-align: center; padding: 4px 0 2px; }
    .um-ver #vStamp { font-size: 10.5px; color: var(--muted); opacity: .6; }

    /* priority as a coloured dot (not a line) */
    /* leads: just a coloured priority dot on the left (no avatar) */
    .lead > .pdot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #cbd5e1; box-shadow: 0 0 0 4px color-mix(in srgb, #cbd5e1 26%, transparent); }
    .lead > .pdot.hot  { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .16); }
    .lead > .pdot.warm { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .16); }
    .lead > .pdot.cold { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
    .lead .lchan { font-weight: 400; font-size: 13px; opacity: .85 }

    @media (max-width: 1000px) {
      .side-foot .user-btn .un { display: none; }
      .mainpane .topbar .search { width: 100%; max-width: none; }
    }

    /* narrow screens: sidebar collapses to a horizontal bar on top */
    @media (max-width: 1000px) {
      #app { grid-template-columns: 1fr; }
      /* fixed bottom bar — icons over labels, like the mobile mockup */
      .side {
        position: fixed;
        top: auto; bottom: 0; left: 0; right: 0;
        height: auto;
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-right: 0;
        border-top: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        z-index: 40;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
      }
      .side-brand { display: none; }
      .secnav { flex: 1; flex-direction: row; justify-content: space-around; gap: 2px; }
      /* On the mobile bottom-bar the groups dissolve: headers hide and buttons
         flow straight into the row (display:contents), ignoring collapse state. */
      .secgrp, .secgrp-b { display: contents; }
      .secgrp.collapsed .secgrp-b { display: contents; }
      .secgrp-h { display: none; }
      .secgrp + .secgrp { margin-top: 0; }
      .secbtn {
        flex-direction: column;
        gap: 3px;
        padding: 6px 6px;
        min-width: 58px;
        font-size: 10px;
        font-weight: 700;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .secbtn .nic { font-size: 19px; width: auto; }
      .secbtn .nlb { flex: none; }
      .side-foot {
        margin: 0;
        flex-direction: row;
        align-items: center;
        border-top: 0;
        padding: 0 2px 0 6px;
      }
      .side-foot .user-btn { padding: 6px; }
      .side-foot .client-chip { display: none; }
      /* fixed so the popup escapes the bottom bar's overflow clipping */
      .user-menu { position: fixed; bottom: 66px; top: auto; left: auto; right: 8px; width: 210px; }
      .mainpane { padding: 0 16px 92px; }
    }

    /* analytics */
    .akpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 16px
    }

    .akpi {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform .15s, box-shadow .2s, border-color .2s
    }
    .akpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line) }

    /* label on top, big number below — like the mockup tiles */
    .akpi .cap {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      order: 1
    }
    .akpi .big {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1;
      order: 2
    }
    /* the headline KPI gets the accent gradient, like the mockup */
    .akpis .akpi:first-child .big {
      background: var(--accent);
      -webkit-background-clip: text; background-clip: text; color: transparent
    }

    .delta-up {
      color: var(--pos);
      font-weight: 700
    }

    .delta-dn {
      color: var(--neg);
      font-weight: 700
    }

    .agrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .acard {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px;
      box-shadow: var(--shadow)
    }
    /* Light group divider that clusters related Settings cards. */
    .sgroup {
      margin: 26px 2px 12px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .sgroup:first-child { margin-top: 6px }

    /* Das Symbol bekommt eine eigene, feste Spalte. Vorher stand es im
       Textknoten: ein Titel MIT Symbol begann dadurch um dessen Breite weiter
       rechts als einer ohne, und die Karten in den Einstellungen standen
       gegeneinander versetzt. Gemeldet am 01.10.2026. */
    .acard h3 .ic {
      flex: none;
      width: 1.15em;
      display: inline-flex;
      justify-content: center;
      font-size: 13px;
      line-height: 1
    }
    .acard h3 {
      margin: 0 0 14px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px
    }
    .acard > h3::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
      flex: none
    }
    .acard.clps > h3::before { display: none }

    /* Settings modules collapse to just their title so the page isn't a wall
       of forms — the h3 toggles each one open. */
    .acard.clps:not(.open)>*:not(h3) { display: none !important }
    .acard.clps>h3 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px }
    .acard.clps:not(.open)>h3 { margin-bottom: 0 }
    .acard.clps>h3::after { content: '▸'; margin-left: auto; font-size: 13px; color: var(--muted); transition: transform .15s }
    .acard.clps.open>h3::after { transform: rotate(90deg) }
    .acard.clps>h3:hover { color: var(--text) }

    .brow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 9px;
      font-size: 13px
    }

    .blab {
      min-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .btrack {
      flex: 1;
      height: 8px;
      background: var(--brand-soft, #eef0ff);
      border-radius: 5px;
      overflow: hidden
    }

    .btrack i {
      display: block;
      height: 100%;
      border-radius: 5px
    }

    .bval {
      min-width: 32px;
      text-align: right;
      font-weight: 700
    }

    .vchart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 120px
    }

    .vbar {
      flex: 1;
      display: flex;
      align-items: flex-end;
      height: 100%
    }

    .vbar i {
      display: block;
      width: 100%;
      background: var(--accent);
      border-radius: 5px 5px 2px 2px;
      min-height: 2px;
      opacity: .85
    }

    @media(max-width:760px) {
      .akpis {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* ai insights */
    /* AI-Insight cards — schlicht: clean neutral card, tone only as a soft
       tint on the icon chip (no rainbow left borders / gradient fills). */
    .ins {
      display: flex;
      gap: 13px;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 15px 17px;
      margin-bottom: 10px;
      box-shadow: var(--shadow)
    }

    .ins .ic {
      font-size: 18px;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--brand-soft);
      display: grid;
      place-items: center;
      flex: none
    }

    .ins .tx {
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--ink)
    }

    .ins.up .ic, .ins.good .ic { background: color-mix(in srgb, #16a34a 14%, transparent) }
    .ins.down .ic { background: color-mix(in srgb, #dc2626 13%, transparent) }

    /* grouped insights card (mockup style): eyebrow + rows split by hairlines */
    .ins-eye { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px }
    .insrow { display: flex; align-items: center; gap: 13px; padding: 13px 2px }
    .insrow + .insrow { border-top: 1px solid var(--line) }
    .insrow .ic { font-size: 16px; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; flex: none }
    .insrow .tx { font-size: 14px; color: var(--ink); line-height: 1.5 }
    .insrow.up .ic, .insrow.good .ic { background: color-mix(in srgb, #16a34a 14%, transparent) }
    .insrow.down .ic { background: color-mix(in srgb, #dc2626 13%, transparent) }

    /* 👎 conversations to review */
    .rev-h {
      font-size: 15px;
      font-weight: 700;
      margin: 0 0 4px
    }
    .rev {
      background: var(--surface);
      border: 1px solid var(--line);
      border-left: 4px solid #dc2626;
      border-radius: 14px;
      padding: 12px 16px;
      margin-bottom: 10px
    }
    .rev summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      font-weight: 600
    }
    .rev summary::-webkit-details-marker { display: none }
    .rev summary .meta {
      color: var(--muted);
      font-weight: 500;
      margin-left: auto;
      font-size: 12.5px
    }
    .rev .thread,
    .lv-thread {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }
    .rev .bub,
    .lv-thread .bub {
      max-width: 82%;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--ink)
    }
    .rev .bub.user {
      align-self: flex-end;
      background: var(--brand-soft, #eef2ff);
      color: var(--ink)
    }
    .rev .bub.assistant {
      align-self: flex-start;
      background: var(--bg);
      border: 1px solid var(--line)
    }
    /* Live view is the OWNER's perspective: visitor left, bot/own replies right */
    .lv-msg {
      display: flex;
      flex-direction: column;
      max-width: 82%
    }
    .lv-msg.left { align-self: flex-start; align-items: flex-start }
    .lv-msg.right { align-self: flex-end; align-items: flex-end }
    .lv-msg .lv-who {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      margin: 0 4px 2px
    }
    .lv-msg .bub { max-width: 100% }
    /* WhatsApp photo thumbnail inside a Live bubble */
    .lv-att { display: block; margin-top: 6px; max-width: 190px; max-height: 190px;
      border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--bg) }
    .lv-attfile { display: inline-block; margin-top: 6px; background: var(--bg);
      border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer }
    .lv-msg .lv-time { font-size: 10.5px; color: var(--muted); margin: 2px 4px 0 }
    .lv-audio { display: block; margin-top: 6px; max-width: 230px; height: 38px }
    /* Wochentage und Leute als Knoepfe zum Umschalten: gedrueckt = dabei.
       Kaestchen in zwei Reihen waeren auf einem Laptop schwerer zu treffen. */
    /* Die Bereitschaftsleiste: ruhig, aber nicht zu überlesen. Rot waere
       falsch — Bereitschaft ist der Normalfall, kein Alarm. */
    .dp-dienst { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      border: 1px solid var(--line); border-left: 4px solid var(--brand);
      border-radius: 10px; padding: 9px 13px; margin-bottom: 12px; font-size: 13.5px }
    .dp-dienst .dd-wer { font-weight: 700 }
    .dp-dienst .dd-zeit { color: var(--muted) }
    .dp-dienst .dd-leer { color: var(--muted) }
    .dp-dienst button { margin-left: auto }
    .dp-tage { display: flex; flex-wrap: wrap; gap: 6px }
    .dp-tage button { appearance: none; cursor: pointer; font: 600 13px inherit;
      padding: 8px 12px; min-height: 38px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg); color: inherit }
    .dp-tage button.an { background: var(--brand); color: #fff; border-color: var(--brand) }
    /* Eine Antwort, die gespeichert ist, aber noch niemand gelesen hat: die
       Seite des Besuchers war zu. Gestrichelter Rand statt roter Farbe —
       es ist kein Fehler, es ist ein Warten. */
    .lv-msg .bub.wartet { border: 1px dashed var(--border); opacity: .9 }
    .lv-msg .lv-wartet { font-size: 11.5px; color: var(--muted); max-width: 320px;
      margin: 3px 4px 0; text-align: right; line-height: 1.35 }
    .lv-thread .bub.user {
      align-self: flex-start;
      background: var(--bg);
      border: 1px solid var(--line)
    }
    .lv-thread .bub.assistant {
      align-self: flex-end;
      background: var(--brand-soft, #eef2ff)
    }
    /* own (human) replies: green tint so they stand out from bot messages */
    .lv-thread .bub.human {
      background: #16a34a1c;
      border: 1px solid #16a34a44
    }
    /* handover alert: persistent banner (a 2.6s toast is too easy to miss
       when a customer is waiting for a human RIGHT NOW) */
    .hv-alert {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--card, #fff);
      border: 2px solid #dc2626;
      border-radius: 14px;
      padding: 12px 16px;
      max-width: 92vw;
      font-size: 14px;
      font-weight: 600;
      animation: hvPulse 1.6s ease-in-out infinite
    }
    @keyframes hvPulse {
      0%, 100% { box-shadow: 0 8px 30px rgba(220, 38, 38, .25) }
      50% { box-shadow: 0 8px 36px rgba(220, 38, 38, .55) }
    }
    @media (prefers-reduced-motion: reduce) {
      .hv-alert { animation: none; box-shadow: 0 8px 30px rgba(220, 38, 38, .35) }
    }
    .hv-alert .hv-x {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 16px;
      cursor: pointer;
      padding: 4px;
      line-height: 1
    }

    /* settings */
    .sgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    @media(max-width:760px) {
      .sgrid {
        grid-template-columns: 1fr
      }
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .chips .m {
      background: var(--brand-soft, #eef0ff);
      color: var(--brand-d, #3b3bb3);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12.5px;
      font-weight: 600
    }

    .chips .none {
      color: var(--muted);
      font-size: 13px
    }

    .faq details {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 8px
    }

    .faq summary {
      cursor: pointer;
      font-weight: 600;
      font-size: 14px
    }

    .faq p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13.5px
    }

    .kv {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 0;
      border-bottom: 1px solid var(--line);
      font-size: 13.5px
    }

    .kv:last-child {
      border-bottom: 0
    }

    .kv .k {
      color: var(--muted)
    }

    /* ── Termine: month calendar ── */
    .apcal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
    .apcal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
    .apcal-title { font-size: 16px; font-weight: 800; text-transform: capitalize; margin-right: auto; }
    .apcal-head .btn-ghost { padding: 8px 12px; font-size: 13px; }
    .apcal-head .btn-primary { width: auto; padding: 9px 14px; font-size: 13.5px; }
    .apcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
    .apcal-dow { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 9px 0 7px; border-bottom: 1px solid var(--line); }
    .apcal-cell { min-height: 88px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px; cursor: pointer; transition: background .12s; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
    .apcal-cell:nth-child(7n) { border-right: 0; }
    .apcal-cell:hover { background: var(--brand-soft); }
    .apcal-cell.dim { cursor: default; background: transparent; }
    .apcal-cell.dim:hover { background: transparent; }
    .apcal-cell.sel { box-shadow: inset 0 0 0 2px var(--brand); border-radius: 4px; }
    .apcal-num { font-size: 12px; font-weight: 700; color: var(--muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .apcal-cell.today .apcal-num { background: var(--brand); color: #fff; }
    .apcal-chip { font-size: 10.5px; font-weight: 700; background: var(--brand-soft); color: var(--brand-d); border-radius: 6px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .apcal-chip.block { background: rgba(120,120,120,.16); color: var(--muted); }
    [data-theme="dark"] .apcal-chip.block { background: rgba(120,120,120,.16); color: var(--muted); }
    [data-theme="dark"] .apcal-chip { color: var(--brand); }
    /* Google-imported events: read-only overlay, distinct neutral look */
    .apcal-chip.gcal { background: rgba(120,120,120,.14); color: var(--muted); font-weight: 600; }
    [data-theme="dark"] .apcal-chip.gcal { background: rgba(255,255,255,.09); }
    .ap-appt.gcal { background: var(--bg); border-style: dashed; opacity: .92; }
    .ap-appt.gcal .apt { font-weight: 600; }
    .ap-gsrc { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: rgba(120,120,120,.14); padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
    [data-theme="dark"] .ap-gsrc { background: rgba(255,255,255,.09); }
    .apcal-more { font-size: 10px; font-weight: 700; color: var(--muted); padding-left: 2px; }
    .apday-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 6px; display: flex; align-items: center; gap: 10px; }
    .apday-h button { margin-left: auto; }
    /* day agenda — exactly like the mockup: dashed slots, faint time, clean card */
    .apday { display: flex; flex-direction: column; gap: 2px; }
    .ap-slot { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line); align-items: start; }
    .ap-slot .t { font-size: 12px; color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 13px; }
    .ap-appt { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; transition: border-color .2s, box-shadow .2s; }
    .ap-appt:hover { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: var(--shadow-lg); }
    .ap-appt.block { background: var(--bg); border-style: dashed; }
    .ap-appt .apm { flex: 1; min-width: 0; }
    .ap-appt .apt { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .ap-appt .aps { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .ap-appt .apsr { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
    .ap-appt .apact { display: flex; gap: 6px; }
    .apst { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
    .apst.confirmed { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
    .apst.reminded  { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
    .apst.arrived   { background: color-mix(in srgb, #16a34a 13%, transparent); color: #15803d; }
    [data-theme="dark"] .apst.reminded { color: #f0b866; }
    [data-theme="dark"] .apst.arrived  { color: #4ade80; }
    [data-theme="dark"] .apst.confirmed { color: #7aa2ff; }
    .apres-h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 2px 2px; }
    .apday > .ap-slot:first-child { border-top: 0; }
    .ap-modal-bg { position: fixed; inset: 0; background: rgba(15,15,20,.45); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .ap-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
    .ap-modal h3 { margin: 0 0 14px; font-size: 17px; }
    .ap-modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ap-modal select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14.5px; outline: none; background: var(--field); font-family: inherit; color: inherit; }
    @media (max-width: 700px) { .apcal-cell { min-height: 62px; } .apcal-chip { display: none; } .apcal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); } }
    .apcal-dot { display: none; }
    @media (max-width: 700px) { .apcal-dot { display: block; } }

/* ── Zweiter Block: der Dienstplan ────────────────────────────────────────
 * Stand im Blatt weiter unten, also NACH allem darueber. Diese Reihenfolge
 * bleibt erhalten, sonst gewinnen bei gleicher Spezifitaet andere Regeln.
 */
/* Rechnungsliste. Ohne diese Regeln gilt die Vorgabe des Browsers —
         und die zentriert <th>, waehrend die Zellen darunter links stehen.
         Jede Ueberschrift schwebt dann in der Mitte ihrer Spalte, und bei
         einer breiten Spalte wie „Kunde" steht sie weit neben dem, was sie
         beschreibt. Darum: die Ausrichtung gehoert in EINE Regel je Spalte,
         nicht an jedes einzelne Feld. */
      #inv_list { width:100%; border-collapse:collapse; font-size:13px }
      #inv_list th, #inv_list td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top }
      #inv_list th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); white-space:nowrap }
      /* Zahlen rechts, und zwar Ueberschrift UND Wert — sonst steht „Betrag"
         ueber der linken Kante einer rechtsbuendigen Spalte. */
      #inv_list th:nth-child(4), #inv_list td:nth-child(4) { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
    /* Die Handgriffe rechts, in einer Regel statt am Markup. */
    #inv_list th:nth-child(6), #inv_list td.inv-akt { text-align:right; white-space:nowrap }
      #inv_list td:nth-child(1) { font-variant-numeric:tabular-nums; white-space:nowrap }
      #inv_list td:nth-child(2) { white-space:nowrap }
      #inv_list th:last-child, #inv_list td:last-child { width:1%; white-space:nowrap }
      #inv_list tbody tr:hover { background:var(--surface) }
      #z_list table { width:100%; border-collapse:collapse; font-size:13px }
      #z_list th, #z_list td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line) }
      #z_list th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted) }
      #z_punch.z-out { background:#dc2626; border-color:#dc2626 }
      #z_punch.z-out:hover { background:#b91c1c }
      .ab-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card) }
      .ab-badge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; white-space:nowrap }
      #ab_calendar table { width:100%; border-collapse:collapse; table-layout:fixed }
      #ab_calendar td { border:1px solid var(--line); vertical-align:top; height:66px; padding:3px 4px }
      #ab_calendar td.oth { opacity:.4 }
      #ab_calendar td.wknd { background:color-mix(in srgb, var(--muted) 8%, transparent) }
      #ab_calendar .abc-day { font-size:11px; color:var(--muted) }
      #ab_calendar th { padding:6px 4px; font-size:11px; color:var(--muted); text-transform:uppercase }
      .abc-pill { display:block; font-size:10px; border-radius:4px; padding:1px 4px; margin-top:2px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
      /* ── Dienstplan: großes, visuelles Wochenraster ────────────────── */
      /* Schiefergrau, in beiden Themen weit weg von Bernstein, Blau und
         Gruen — und ruhig genug, um Hintergrund zu sein. */
      :root { --dp-schicht:#64748b }
      :root[data-theme="dark"] { --dp-schicht:#7c8aa0 }
      #dp_grid table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px }
      #dp_grid th, #dp_grid td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:7px; vertical-align:top }
      #dp_grid th:first-child, #dp_grid td:first-child { border-left:1px solid var(--line) }
      #dp_grid tr:first-child th { border-top:1px solid var(--line) }
      #dp_grid thead th { position:sticky; top:0; z-index:3; background:var(--bg); font-size:12px; color:var(--muted); font-weight:700; padding:10px 6px; text-align:center }
      #dp_grid thead th .dow { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.5px }
      #dp_grid thead th .dnum { display:inline-block; font-size:20px; font-weight:800; color:var(--ink); margin-top:2px; line-height:1.1 }
      #dp_grid thead th .dmon { display:inline-block; font-size:12.5px; font-weight:600; color:var(--muted); margin-left:4px }
      #dp_grid th.wknd, #dp_grid td.wknd { background:color-mix(in srgb, var(--muted) 6%, transparent) }
      #dp_grid td.today, #dp_grid th.today { background:color-mix(in srgb, var(--brand) 9%, transparent) }
      #dp_grid th.today .dnum { color:var(--brand) }
      #dp_grid th.today { box-shadow:inset 0 -3px 0 var(--brand) }
      /* sticky worker column */
      #dp_grid .wname { position:sticky; left:0; z-index:2; background:var(--bg); width:170px; vertical-align:middle }
      #dp_grid thead th.wname { z-index:4 }
      #dp_grid td.wname { padding:8px 10px }
      .dp-wrow { display:flex; align-items:center; gap:9px }
      .dp-av { flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px }
      .dp-wnm { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      #dp_grid td.clk { cursor:pointer }
      #dp_grid td.clk { min-height:78px; height:78px }
      #dp_grid td.clk:hover { background:color-mix(in srgb, var(--brand) 6%, transparent) }
      /* ── Ziehen von Zelle zu Zelle ──────────────────────────────────
         Der gezogene Chip bleibt sichtbar, wird aber blass: man soll sehen,
         WAS man gerade in der Hand hat. Die Zielzelle bekommt einen
         kraeftigen Rahmen statt nur einer Tönung — beim Ziehen liegt der
         Mauszeiger auf dem Chip, nicht auf der Zelle, und eine zarte
         Hintergrundfarbe uebersieht man dabei. */
      /* Greifbar — und auf dem Telefon darf das lange Druecken NICHTS
         anderes ausloesen. Ohne das Folgende faengt ein Telefon beim langen
         Druecken an, den Text im Chip zu markieren (oder zeigt das
         Auswahlmenue „Kopieren"), und der Zug ist damit gestorben, bevor er
         beginnt. Auf dem Rechner faellt das nie auf. */
      #dp_grid.dp-greifbar .dp-chip, #dp_grid.dp-greifbar .dp-auf {
        cursor:grab;
        user-select:none; -webkit-user-select:none;
        -webkit-touch-callout:none;
        -webkit-tap-highlight-color:transparent;
      }
      /* Das Abbild, das an Maus oder Finger haengt. pointer-events:none ist
         nicht Kosmetik: ohne das liefert elementFromPoint() beim Ziehen immer
         dieses Abbild zurueck statt der Zelle darunter, und es gaebe nie ein
         Ziel. */
      .dp-geist {
        position:fixed; z-index:9999; pointer-events:none;
        transform:translate(-50%, -50%) rotate(-1.5deg);
        opacity:.95; box-shadow:0 10px 24px rgba(20,30,60,.3);
        margin:0 !important;
      }
      #dp_grid .dp-zieht { opacity:.4; cursor:grabbing }
      #dp_grid td.dp-ziel {
        background:color-mix(in srgb, var(--brand) 16%, transparent);
        box-shadow:inset 0 0 0 2px var(--brand);
      }
      /* Die Kinder der Zielzelle duerfen das Ablegen nicht abfangen: ein
         dragleave beim Ueberfahren eines Chips darin liesse die Markierung
         flackern und das Ablegen manchmal ins Leere gehen. */
      #dp_grid td.dp-ziel * { pointer-events:none }
      /* ── WARUM DIE SCHICHT NICHT MEHR DIE FARBE DES BETRIEBS TRAEGT ──
         Erica, 03.10.2026: „yo sigo viendo schicht y auftrag en naranja."
         Gemessen (scripts/dienstplan-farben-check.js): bei ihrem gelben
         Akzent lagen Schicht und „Auftrag offen" SIEBEN Grad im Farbton
         auseinander — dieselbe Farbe. Und es lag nicht an ihrem Gelb: bei
         einem orangen Akzent 13 Grad, bei einem blauen kollidierte die
         Schicht stattdessen mit „in Arbeit" (22 Grad). Jeder Akzent trifft
         irgendwann eine der drei Zustandsfarben.
         Die Zustandsfarben duerfen sich nicht bewegen — „gruen heisst
         fertig" muss in jedem Betrieb gelten. Also muss die bewegliche
         Farbe weichen.
         Das ist ohnehin die bessere Ordnung: eine Schicht ist Hintergrund
         („diese Person arbeitet von–bis"), ein Auftrag ist das, worauf man
         handelt. Vorher war der Hintergrund das Lauteste im Raster und die
         Arbeit eine blasse Karte — genau verkehrt herum. */
      .dp-chip { display:block; background:var(--dp-schicht); color:#fff; border-radius:8px; padding:5px 8px; margin-bottom:4px; font-weight:700; font-size:12.5px; cursor:pointer; font-variant-numeric:tabular-nums; box-shadow:0 1px 3px rgba(20,30,60,.12) }
      .dp-chip .dp-t::before { content:"🕐 "; font-size:11px }
      /* Haupt- und Unterzeile je Event-Chip */
      .dp-t { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      .dp-sub { display:block; font-size:10.5px; font-weight:500; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px }
      .dp-off { display:block; border-radius:8px; padding:5px 8px; margin-bottom:4px; color:#fff; font-size:11.5px; font-weight:600; text-align:center }
      /* Auftrag-Einplanung (aus der Crew abgeleitet) — abgesetzt von manuellen Schichten */
      .dp-auf { display:block; border-radius:8px; padding:5px 8px; margin-bottom:4px; font-size:12px; font-weight:600; overflow:hidden; cursor:pointer; border-left:4px solid; background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(20,30,60,.10) }
      .dp-auf.st-offen { border-left-color:#f59e0b; background:#fffbeb; color:#92600a }
      .dp-auf.st-in_arbeit { border-left-color:#2563eb; background:#eff6ff; color:#1d4ed8 }
      .dp-auf.st-erledigt { border-left-color:#16a34a; background:#f0fdf4; color:#15803d }
      /* Kundentermin (aus dem Terminkalender, per Mitarbeitername zugeordnet) */
      .dp-appt { display:block; border-radius:8px; padding:5px 8px; margin-bottom:4px; font-size:12px; font-weight:600; overflow:hidden; cursor:pointer; border-left:4px solid #0d9488; background:#f0fdfa; color:#0f766e; box-shadow:0 1px 3px rgba(20,30,60,.10) }
      /* Konflikt: Mitarbeiter abwesend, hat aber Schicht/Auftrag/Termin am selben Tag */
      #dp_grid td.dp-conflict { background:#fef2f2 !important }
      #dp_grid td.dp-conflict.today { background:#fee2e2 !important }
      #dp_grid td.dp-conflict .dp-auf, #dp_grid td.dp-conflict .dp-appt, #dp_grid td.dp-conflict .dp-chip { outline:2px solid #dc2626; outline-offset:-1px }
      .dp-warnbar { border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:13px }
      .dp-warnbar h4 { margin:0 0 8px; font-size:13.5px; display:flex; align-items:center; gap:7px }
      .dp-warnbar .wc-row { padding:5px 0; border-top:1px dashed #fecaca; display:flex; gap:8px; flex-wrap:wrap; align-items:center }
      .dp-warnbar .wc-name { font-weight:700 }
      .dp-warnbar .wc-badge { font-size:11.5px; font-weight:600; background:#fff; border:1px solid #fecaca; border-radius:99px; padding:1px 9px }
      .dp-warnbar .wc-jump { margin-left:auto; font-size:12px; font-weight:700; color:#991b1b; background:none; border:0; cursor:pointer; text-decoration:underline }
      .dp-warnbar .wc-item { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:4px 0 4px 18px; font-size:12.5px }
      .dp-warnbar .wc-item > span { flex:1; min-width:120px }
      .dp-warnbar .wc-reassign { padding:5px 9px; border-radius:8px; border:1px solid #fecaca; background:#fff; color:#991b1b; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer }
      .dp-warnbar .wc-move { padding:5px 12px; border-radius:8px; border:1px solid #fecaca; background:#fff; color:#991b1b; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer }
      .dp-warnbar .wc-none { font-size:12px; font-style:italic; opacity:.75 }
      /* Explizites „+" pro Zelle: macht klar, dass mehrere Schichten/Termine pro Tag möglich sind */
      .dp-add { display:block; text-align:center; color:var(--muted); font-size:15px; line-height:1; border:1.5px dashed var(--line); border-radius:8px; padding:5px 0; margin-top:2px; opacity:0; transition:.12s }
      #dp_grid td.clk:hover .dp-add { opacity:.9; border-color:var(--brand); color:var(--brand) }
      #dp_grid td.clk:empty::after, #dp_grid td.dp-blank .dp-add { opacity:.35 }

      /* ── Fokus-Modus (Dienstplan): Sidebar auf Icons einklappen, volle Breite ── */
      #app.dp-mode { grid-template-columns:60px minmax(0,1fr); max-width:none }
    /* ── UND AUF DEM TELEFON NICHT ──────────────────────────────────────
       Der Fokus-Modus klappt die Seitenleiste auf Symbole zusammen, um dem
       Wochenraster Platz zu machen. Auf einem Telefon ist die Seitenleiste
       aber gar keine Leiste mehr, sondern eine feste Leiste UNTEN — die
       Regel oben reservierte dort trotzdem eine 60px breite Spalte fuer
       etwas, das nicht da ist.
       Die Mobil-Regel (#app { grid-template-columns:1fr }, weiter oben im
       Blatt) verlor dagegen: #app.dp-mode ist spezifischer UND steht
       spaeter. Ergebnis war kein schmaler Rand, sondern eine Seite, auf der
       die Ueberschrift ein Wort je Zeile umbrach und das Wochenraster 28
       Pixel breit war. Gesehen am 03.10.2026 in einem 390px-Fenster, beim
       Pruefen des Ziehens mit dem Finger. */
    @media (max-width: 1000px) {
      #app.dp-mode { grid-template-columns:1fr }
      /* Die Tabelle steht auf width:100% mit festem Spaltenlayout — auf einem
         390px-Telefon wurden daraus sieben Spalten von 25 Pixeln. Lesen kann
         man das nicht, und mit dem Finger etwas hineinziehen erst recht
         nicht. Mit einer Mindestbreite scrollt #dp_grid stattdessen
         seitwaerts (overflow-x steht schon da), und jede Spalte ist so breit,
         dass ein Finger sie trifft. */
      #dp_grid table { min-width:760px }
      /* 170 Pixel Namensspalte sind auf einem 390px-Telefon 44 % des Bildes —
         fuer die Tage, um die es geht, bleibt dann fast nichts. Die Spalte
         klebt links (position:sticky) und deckt beim seitlichen Scrollen
         sogar den Montag zu. Auf kleinen Bildschirmen reicht der Vorname. */
      #dp_grid .wname { width:96px }
      #dp_grid .dp-wnm { font-size:12px }
      #dp_grid .dp-av { width:24px; height:24px; font-size:11px }
    }
      #app.dp-mode .side { padding:16px 8px }
      #app.dp-mode .side-brand, #app.dp-mode .secgrp-h,
      #app.dp-mode .secbtn .nlb, #app.dp-mode .side-foot .un,
      #app.dp-mode .side-foot .client-chip { display:none }
      #app.dp-mode .secbtn { justify-content:center; padding:11px 6px; gap:0 }
      #app.dp-mode .secbtn.active::before { display:none }
      #app.dp-mode .side-tools { justify-content:center }
      #app.dp-mode .secgrp + .secgrp { margin-top:4px; border-top:1px solid var(--line); padding-top:4px }
      #app.dp-mode .secgrp-b { display:flex !important }
      .tm-grouphead { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:0 0 8px; display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; cursor:pointer; padding:6px 2px; text-align:left }
      .tm-grouphead:hover { color:var(--ink) }
      .tm-cv { width:13px; height:13px; margin-left:auto; flex:none; transition:transform .18s; opacity:.6 }
      .tm-group.collapsed .tm-cv { transform:rotate(-90deg) }
      .tm-group.collapsed .tm-group-body { display:none }
      .tm-count { background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted); border-radius:99px; font-size:11px; padding:1px 8px; font-weight:700 }
      .tm-row { border:1px solid var(--line); border-radius:11px; padding:8px 11px; margin-bottom:8px }
      .tm-main { display:flex; align-items:center; gap:9px }
      .tm-name { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      .tm-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      .tm-badges { display:flex; gap:5px; flex-wrap:wrap }
      .tm-b { font-size:10.5px; font-weight:700; border-radius:99px; padding:2px 8px; background:color-mix(in srgb, var(--muted) 14%, transparent); color:var(--muted); white-space:nowrap }
      .tm-b-owner { background:var(--brand); color:#fff }
      .tm-b-reception { background:#8C7DFF; color:#fff }
      .tm-acts { display:flex; gap:2px; flex-shrink:0 }
      .tm-acts .icon-btn { font-size:15px; padding:5px }
      .tm-edit-strip { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line) }

    /* ── Baustelle heute ──────────────────────────────────────────────────
       Eine Zeile je Baustelle: Zeit links, Sache in der Mitte, Zustand und
       Telefon rechts. Der farbige Streifen links ist der Zustand — er muss
       aus drei Metern Abstand lesbar sein, denn genau so schaut man morgens
       drauf. */
    .bh-h {
      margin: 22px 2px 10px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .bh-h span {
      background: var(--bg-soft, var(--bg));
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 0 8px;
      font-size: 12px;
      letter-spacing: 0;
    }
    .bh-list { display: flex; flex-direction: column; gap: 10px }
    .bh-row {
      display: grid;
      grid-template-columns: 108px 1fr auto;
      gap: 14px;
      align-items: flex-start;
      background: var(--surface);
      border: 1px solid var(--line);
      border-left: 4px solid var(--line);
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: transform .12s, box-shadow .2s;
    }
    .bh-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg) }
    .bh-row:focus-visible { outline: 2px solid var(--accent-solid, #2563eb); outline-offset: 2px }
    .bh-row.termin { cursor: default; border-left-color: #2563eb }
    .bh-row.termin:hover { transform: none; box-shadow: var(--shadow) }
    /* DIESELBEN drei Farben wie im Dienstplan: offen = Bernstein, in Arbeit
       = Blau, erledigt = Gruen.
       Hier stand zuerst eine eigene Reihe (offen = Grau, in Arbeit =
       Bernstein). Zwei Ansichten, dieselben drei Zustaende, zwei
       Farbsprachen — wer zwischen ihnen wechselt, muss jedesmal neu lernen,
       was Bernstein bedeutet. Und seit die Schicht im Dienstplan
       schiefergrau ist, hiesse Grau hier sogar etwas ganz anderes.
       Nachgesehen von scripts/dienstplan-farben-check.js, der beide
       Ansichten misst. */
    .bh-row.offen { border-left-color: #f59e0b }
    .bh-row.arbeit { border-left-color: #2563eb }
    .bh-row.fertig { border-left-color: #16a34a; opacity: .72 }
    /* „07:00–16:00" ist EINE Angabe. Ohne nowrap brach sie hinter dem
       Gedankenstrich um und sah aus wie zwei Zeilen Unsinn. */
    .bh-time { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap }
    /* white-space: nowrap steht an .bh-time und VERERBT sich hierher. Ohne
       das Zuruecksetzen lief „laeuft schon · geht weiter" aus der Spalte
       heraus und legte sich ueber den Kundennamen daneben. Gesehen im
       Bild, nicht im Kopf. */
    .bh-lauf { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 3px; white-space: normal; line-height: 1.3 }
    .bh-t { font-weight: 700; font-size: 15px }
    .bh-sub { color: var(--muted); font-size: 13px; margin-top: 2px }
    .bh-crew { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px }
    .bh-leer { color: var(--muted); font-size: 12.5px; font-style: italic }
    .bh-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
    .bh-st {
      font-size: 11.5px;
      font-weight: 800;
      border-radius: 99px;
      padding: 2px 10px;
      border: 1px solid var(--line);
      white-space: nowrap;
    }
    .bh-st.offen { color: #b45309; border-color: #f59e0b }
    .bh-st.arbeit { color: #1d4ed8; border-color: #2563eb }
    .bh-st.fertig { color: #15803d; border-color: #16a34a }
    .bh-tel { font-size: 13px; text-decoration: none; color: inherit; white-space: nowrap }
    .bh-tel:hover { text-decoration: underline }
    .bh-marken { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end }
    .bh-m { font-size: 11px; color: var(--muted); white-space: nowrap }
    .bh-m.ok { color: #15803d }

    /* Die Zustandsfarben oben sind fuer HELLES Papier gemischt. Auf dunklem
       Grund war „Offen" dunkelgrau auf dunkelgrau und „Erledigt" ein
       dunkles Gruen — lesbar nur, wenn man weiss, was dastehen soll. Hier
       dieselben Farben, aufgehellt. Der farbige Streifen links bleibt wie
       er ist: der steht auf der Flaeche, nicht auf dem Grund. */
    [data-theme="dark"] .bh-st.offen { color: #fbbf24; border-color: #b45309 }
    [data-theme="dark"] .bh-st.arbeit { color: #93c5fd; border-color: #2563eb }
    [data-theme="dark"] .bh-st.fertig { color: #4ade80; border-color: #166534 }
    [data-theme="dark"] .bh-m.ok { color: #4ade80 }

    /* Ein Name mit Punkt: der Punkt sagt, ob die Person auf der Uhr steht.
       Nicht die Farbe des Namens — Farbe allein ist fuer rot-gruen-blinde
       Augen keine Auskunft, der title-Text steht deshalb immer dran. */
    .bh-p {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 600;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 3px 10px;
    }
    .bh-p i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; flex: none }
    .bh-p.an i { background: #16a34a }
    .bh-p.pause i { background: #d97706 }
    .bh-p b { font-weight: 700; color: var(--muted); font-size: 11.5px }
    .bh-team { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px }
    .bh-g {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px 14px;
      box-shadow: var(--shadow);
    }
    .bh-g-h { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
    .bh-g.an .bh-p i { background: #16a34a }
    .bh-g.weg .bh-p i { background: #d97706 }
    .bh-g.bereit .bh-p i { background: #2563eb }

    @media (max-width: 760px) {
      /* Auf dem Handy bekommt die Zeitspalte keine feste Breite mehr: bei
         86px stiess „07:00–16:00" (nowrap) an den Titel daneben. `auto`
         misst, was wirklich dasteht. */
      .bh-row { grid-template-columns: auto 1fr; gap: 12px }
      .bh-time { font-size: 13.5px }
      .bh-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap }
      .akpis { grid-template-columns: repeat(2, 1fr) }
    }