* { box-sizing: border-box; }
    /* Basis: shadcn/ui neutral (new-york-v4, Tailwind v4 / oklch).
       Akzent: Drillix #d97757 = oklch(0.6724 0.1308 38.8).
       Vordergrund WEISS (so gewuenscht): 3,1:1 — unter AA 4,5:1. Dunkel waeren 5,6:1.
       Light und Dark identisch — der helle Ton trägt auf beiden Gründen. */
    :root {
      --radius: 10px;
      --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px;
      --background: oklch(1 0 0);
      --foreground: oklch(0.145 0 0);
      --card: oklch(0.988 0 0);
      --card-foreground: oklch(0.145 0 0);
      --primary: oklch(0.6724 0.1308 38.8);
      --primary-foreground: oklch(1 0 0);
      --secondary: oklch(0.97 0 0);
      --secondary-foreground: oklch(0.205 0 0);
      --muted: oklch(0.97 0 0);
      --muted-foreground: oklch(0.556 0 0);
      --accent: oklch(0.97 0 0);
      --accent-foreground: oklch(0.205 0 0);
      --destructive: oklch(0.577 0.245 27.325);
      --border: oklch(0.922 0 0);
      --input: oklch(0.922 0 0);
      --ring: oklch(0.6724 0.1308 38.8);
      --sidebar: oklch(0.985 0 0);
      --sidebar-foreground: oklch(0.145 0 0);
      --sidebar-primary: oklch(0.6724 0.1308 38.8);
      --sidebar-primary-foreground: oklch(1 0 0);
      --sidebar-accent: oklch(0.963 0.022 38.8);
      --sidebar-accent-foreground: oklch(0.49 0.12 38.8);
      --sidebar-border: oklch(0.922 0 0);
      /* Auftragsphasen sind ORDINAL (Briefing → Live) → eine Hue, blass → satt */
      --stage-1: oklch(0.77 0.035 38.8);
      --stage-2: oklch(0.745 0.058 38.8);
      --stage-3: oklch(0.72 0.082 38.8);
      --stage-4: oklch(0.696 0.106 38.8);
      --stage-5: oklch(0.6724 0.1308 38.8);
      /* Zustände, die shadcn nicht mitbringt */
      --success: oklch(0.47 0.135 152);
      --success-foreground: oklch(1 0 0);
      --warning-soft: oklch(0.96 0.05 85);
      --warning-text: oklch(0.52 0.13 70);
      /* Aktivitaetstypen: Kreis-Tint + Icon. Farbe kodiert den Typ, die Icon-Form
         kodiert ihn ebenfalls — Farbe ist nie der einzige Kanal. */
      --act-alert: oklch(0.945 0.040 27);    --act-alert-fg: oklch(0.55 0.19 27);
      --act-stage: oklch(0.945 0.035 38.8);  --act-stage-fg: oklch(0.55 0.13 38.8);
      --act-mail: oklch(0.945 0.030 253.2);  --act-mail-fg: oklch(0.50 0.10 253.2);
      --act-call: oklch(0.945 0.040 152);    --act-call-fg: oklch(0.47 0.135 152);
      /* Avatar-Identitaet: 4 Toene, mit scripts/validate_palette.js geprueft
         (hell und dunkel getrennt). Initialen sind immer sichtbar -> Farbe ist
         nie der einzige Kanal. Hues meiden 25-40 (Akzent), 70-85 (warning), 152 (success). */
      --av-1: oklch(0.945 0.035 190);  --av-1-fg: oklch(0.62 0.135 190);
      --av-2: oklch(0.945 0.035 250);  --av-2-fg: oklch(0.50 0.135 250);
      --av-3: oklch(0.945 0.035 340);  --av-3-fg: oklch(0.52 0.135 340);
      --av-4: oklch(0.945 0.035 120);  --av-4-fg: oklch(0.58 0.135 120);
      /* Wanne hinter den Kanban-Karten: im Dark bewusst DUNKLER als --card */
      --tray: oklch(0.97 0 0);
      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
    [data-theme="dark"] {
      --background: oklch(0.145 0 0);
      --foreground: oklch(0.985 0 0);
      --card: oklch(0.205 0 0);
      --card-foreground: oklch(0.985 0 0);
      --primary: oklch(0.6724 0.1308 38.8);
      --primary-foreground: oklch(1 0 0);
      --secondary: oklch(0.269 0 0);
      --secondary-foreground: oklch(0.985 0 0);
      --muted: oklch(0.269 0 0);
      --muted-foreground: oklch(0.708 0 0);
      --accent: oklch(0.269 0 0);
      --accent-foreground: oklch(0.985 0 0);
      --destructive: oklch(0.704 0.191 22.216);
      --border: oklch(1 0 0 / 10%);
      --input: oklch(1 0 0 / 15%);
      --ring: oklch(0.6724 0.1308 38.8);
      --sidebar: oklch(0.205 0 0);
      --sidebar-foreground: oklch(0.985 0 0);
      --sidebar-primary: oklch(0.6724 0.1308 38.8);
      --sidebar-primary-foreground: oklch(1 0 0);
      --sidebar-accent: oklch(0.315 0.055 38.8);
      --sidebar-accent-foreground: oklch(0.855 0.07 38.8);
      --sidebar-border: oklch(1 0 0 / 10%);
      --stage-1: oklch(0.49 0.045 38.8);
      --stage-2: oklch(0.535 0.068 38.8);
      --stage-3: oklch(0.58 0.09 38.8);
      --stage-4: oklch(0.626 0.11 38.8);
      --stage-5: oklch(0.6724 0.1308 38.8);
      --success: oklch(0.72 0.17 152);
      --success-foreground: oklch(0.16 0.03 152);
      --warning-soft: oklch(0.32 0.07 75);
      --warning-text: oklch(0.85 0.14 80);
      --act-alert: oklch(0.30 0.060 27);     --act-alert-fg: oklch(0.78 0.14 27);
      --act-stage: oklch(0.30 0.050 38.8);   --act-stage-fg: oklch(0.78 0.11 38.8);
      --act-mail: oklch(0.29 0.045 253.2);   --act-mail-fg: oklch(0.76 0.09 253.2);
      --act-call: oklch(0.29 0.050 152);     --act-call-fg: oklch(0.76 0.14 152);
      /* Dark: gefuellter Kreis + weisse Initialen — helle Initialen wuerden sich
         bei Deuteranopie nicht mehr trennen (0,7 dE), gepruefte Variante ist diese. */
      --av-1: oklch(0.58 0.135 190);   --av-1-fg: oklch(1 0 0);
      --av-2: oklch(0.50 0.135 250);   --av-2-fg: oklch(1 0 0);
      --av-3: oklch(0.50 0.135 340);   --av-3-fg: oklch(1 0 0);
      --av-4: oklch(0.50 0.135 120);   --av-4-fg: oklch(1 0 0);
      --tray: oklch(0.178 0 0);
      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    }
    body { margin: 0; min-height: 100vh; background: oklch(1 0 0); font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
    body:has([data-theme="dark"]) { background: oklch(0.145 0 0); }
    a { color: var(--foreground); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; }
    svg { display: block; flex-shrink: 0; }

    /* Aufklappen kann der Browser selbst. Das Dreieck des Betriebssystems muss
       weg, den Pfeil zeichnen wir. */
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display: none; }
    .aufklapp-pfeil { transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
    details[open] > summary .aufklapp-pfeil { transform: rotate(180deg); }

    /* Formularfelder. Masse aus DESIGN.md (h 36, radius-md, border --input, px 12,
       shadow-xs); der Browser-Grundstil muss dafuer komplett weg. Steht hier und
       nicht in web_build.py, damit Artboards und Website dasselbe Feld zeigen. */
    input, select, textarea {
      box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px;
      font-family: inherit; font-size: 14px; line-height: 20px; color: var(--foreground);
      border: 1px solid var(--input); border-radius: var(--radius-md);
      background: var(--background); box-shadow: var(--shadow-xs);
      outline: none; appearance: none; -webkit-appearance: none;
    }
    textarea { height: auto; min-height: 76px; padding: 8px 12px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
    input:focus-visible, select:focus-visible, textarea:focus-visible {
      border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
    }
    /* Der Pfeil der Auswahlliste liegt als Hintergrundbild drin — ein data:-URI kennt
       kein currentColor, deshalb je ein fester Ton pro Grund. */
    select { padding-right: 34px; cursor: pointer; background-repeat: no-repeat;
             background-position: right 12px center; background-size: 16px 16px;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
    [data-theme="dark"] select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b5b5b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
    input[type="checkbox"] { width: 16px; height: 16px; padding: 0; border-radius: var(--radius-sm);
                             cursor: pointer; box-shadow: none; flex-shrink: 0; }
    input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center; background-size: 12px 12px; }
  
/* ---- Bewegung: Kurven und Dauern an einer Stelle ------------------------ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* stark, fuer Ein- und Austritte */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* fuer Bewegung auf dem Schirm */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* Schubladen, iOS-artig */
}

/* ---- Webrahmen: fluide statt fester Leinwand ---------------------------- */
* { box-sizing: border-box; }
/* Kein Gummiband-Effekt am Seitenende und keine Scroll-Weitergabe. */
html, body { overscroll-behavior: none; }
body { font-size: 14px; line-height: 20px; color: var(--foreground); background: var(--background); }
.huelle { display: flex; min-height: 100vh; min-width: 1180px; }
.inhalt { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 16px; padding: 24px; }
.inhalt > div { animation: auf .3s var(--ease-out) both; }
.inhalt > div:nth-child(2) { animation-delay: .04s; }
.inhalt > div:nth-child(3) { animation-delay: .08s; }
.inhalt > div:nth-child(4) { animation-delay: .12s; }
.inhalt > div:nth-child(5) { animation-delay: .16s; }
@keyframes auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.huelle-leer { display: flex; align-items: center; justify-content: center;
               min-height: 100vh; padding: 24px; }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar { position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column;
           width: 256px; flex-shrink: 0; height: 100vh; overflow: hidden;
           background: var(--sidebar); color: var(--sidebar-foreground);
           border-right: 1px solid var(--sidebar-border);
           transition: width 260ms var(--ease-drawer); }
.sb-kopf { display: flex; align-items: center; gap: 8px; height: 64px; padding: 8px 16px; flex-shrink: 0; }
.marke { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
         border-radius: var(--radius-lg); background: var(--sidebar-primary);
         color: var(--sidebar-primary-foreground); flex-shrink: 0; }
.marke-text { display: grid; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.marke-sub { font-size: 12px; line-height: 14px; white-space: nowrap; }
.sb-inhalt { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px;
             padding: 8px; overflow-y: auto; overscroll-behavior: contain;
             scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* Die Leiste war ausgeblendet. Bei 18 Eintraegen passt die Navigation auf 900 px
   Hoehe nicht mehr — dann muss sichtbar sein, dass es weitergeht. */
.sb-inhalt::-webkit-scrollbar { width: 6px; }
.sb-inhalt::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.sb-inhalt::-webkit-scrollbar-track { background: transparent; }
/* Block statt Flex: als Flex-Item wurde die Huelle nicht unter ihre
   Inhaltshoehe gerendert, obwohl height/min-height es erlaubt haetten. */
.gruppe { display: block; }
.gruppe-kopf + .gruppe-huelle { margin-top: 4px; }
.gruppe-unten { margin-top: auto; }
.gruppe-kopf { display: flex; align-items: center; gap: 4px; width: 100%; height: 32px;
               padding: 0 8px; border: 0; background: none; color: inherit; cursor: pointer;
               font: 500 12px/1 inherit; font-family: inherit; opacity: .7;
               border-radius: var(--radius-md); transition: opacity 140ms ease, background 140ms ease,
                                                            transform 140ms var(--ease-out); }
.gruppe-kopf:active { transform: scale(0.97); }
.gruppe-kopf svg { margin-left: auto; transition: transform 200ms var(--ease-out); }
.gruppe[data-zu] .gruppe-kopf svg { transform: rotate(-90deg); }

/* Hoehe faellt zusammen statt hart zu verschwinden: 1fr -> 0fr laesst sich animieren. */
/* Die Hoehe animiert JS ueber die Web Animations API. Der 0fr-Grid-Trick loest
   in dieser Verschachtelung nicht auf (gemessen: Zeile bleibt bei Inhaltshoehe),
   deshalb hier der Weg, der nachweisbar funktioniert. */
/* min-height: 0 hebt die Untergrenze 'Inhaltshoehe' auf, die ein Flex-Item in einer
   Spalte sonst hat; flex-shrink: 0 verhindert, dass Flexbox sie stattdessen
   platt quetscht, sobald die Sidebar hoeher ist als das Fenster. */
/* Die Hoehe animiert hier nicht — mit Grid-0fr, WAAPI und CSS-Transition rendert
   das Element unveraendert seine Inhaltshoehe. Ursache nicht gefunden, deshalb
   klappt die Gruppe hart zu. Bewegt wird stattdessen der Pfeil, und der Inhalt
   blendet ab; das Zuklappen selbst ist ein seltener Griff. */
.gruppe-huelle { overflow: hidden; }
.gruppe[data-zu] .gruppe-huelle { display: none; }
.gruppe-inhalt { display: flex; flex-direction: column; gap: 4px;
                 transition: opacity 160ms var(--ease-out); }
.gruppe[data-zu] .gruppe-inhalt { opacity: 0; }

.nav { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 8px;
       border-radius: var(--radius-md); font-size: 14px; color: inherit; text-decoration: none;
       white-space: nowrap; transition: background 140ms ease, transform 140ms var(--ease-out); }
.nav:active { transform: scale(0.97); }
.nav-aktiv, .nav-aktiv:hover { font-weight: 500; background: var(--sidebar-accent);
                               color: var(--sidebar-accent-foreground); }
.nav-text { overflow: hidden; transition: opacity 120ms var(--ease-out),
                                          width 220ms var(--ease-drawer); }
.nav-zahl { margin-left: auto; display: inline-flex; align-items: center; border-radius: 999px;
            background: var(--secondary); color: var(--secondary-foreground); font-size: 12px;
            font-weight: 500; padding: 2px 8px; transition: opacity 100ms var(--ease-out); }
.nav-punkt { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 999px;
             background: var(--primary); border: 2px solid var(--sidebar);
             opacity: 0; transform: scale(.6);
             transition: opacity 160ms var(--ease-out) 120ms, transform 160ms var(--ease-out) 120ms; }
.sb-fuss { display: flex; align-items: center; gap: 8px; height: 64px; padding: 8px 16px;
           border-top: 1px solid var(--sidebar-border); flex-shrink: 0; }
.fuss-person { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
               padding: 4px; margin: -4px; border-radius: var(--radius-md); color: inherit;
               transition: background 140ms ease; }
.fuss-text { display: grid; flex: 1; min-width: 0; line-height: 18px; overflow: hidden;
             transition: opacity 120ms var(--ease-out); }
.fuss-name { font-size: 14px; font-weight: 500; white-space: nowrap; }
.fuss-mail { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.ikon-knopf { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
              border: 0; border-radius: var(--radius-sm); background: none;
              color: var(--muted-foreground); cursor: pointer; flex-shrink: 0;
              transition: background 140ms ease, color 140ms ease, transform 140ms var(--ease-out); }
.ikon-knopf:active { transform: scale(0.9); }
.ikon-knopf svg { transition: transform 260ms var(--ease-out); }
.wenn-zu { display: none; }

/* ---- eingeklappt -------------------------------------------------------- */
body[data-sidebar="zu"] .sidebar { width: 48px; }
body[data-sidebar="zu"] .nav-text { width: 0; opacity: 0; }
body[data-sidebar="zu"] :is(.marke-text, .fuss-text, .nav-zahl, .gruppe-kopf, #theme-toggle) {
  opacity: 0; position: absolute; pointer-events: none; }
body[data-sidebar="zu"] .nav-punkt { opacity: 1; transform: none; }
body[data-sidebar="zu"] .wenn-zu { display: flex; }
body[data-sidebar="zu"] .wenn-offen { display: none; }
body[data-sidebar="zu"] .sb-kopf { flex-direction: column; height: auto; padding: 8px; gap: 6px; }
body[data-sidebar="zu"] .sb-fuss { justify-content: center; padding: 8px; }
body[data-sidebar="zu"] .fuss-person { flex: 0 0 auto; justify-content: center; }
body[data-sidebar="zu"] .nav { justify-content: center; padding: 0; width: 32px; gap: 0; }

body[data-sidebar="zu"] .gruppe + .gruppe { border-top: 1px solid var(--sidebar-border);
                                            padding-top: 8px; margin-top: 8px; }
body[data-sidebar="zu"] .gruppe-inhalt { align-items: center; opacity: 1; }


/* ---- Kalender: Termine verschieben -------------------------------------- */
[data-termin] { cursor: grab; touch-action: none;
                transition: box-shadow 140ms ease, transform 140ms var(--ease-out); }
.termin-zieht { cursor: grabbing; z-index: 5; transform: scale(1.02);
                box-shadow: 0 12px 24px -6px rgb(0 0 0 / 0.25); }
@media (hover: hover) and (pointer: fine) {
  [data-termin]:hover { box-shadow: var(--shadow-sm); }
}

/* ---- Listen filtern und sortieren --------------------------------------- */
.aus { display: none !important; }
/* Ein frisch gesetzter Haken muss die Zeile genauso zeichnen wie eine, die
   schon beim Bauen erledigt war. */
[data-satz]:has(input[type="checkbox"]:checked) [data-titel] {
  text-decoration: line-through; color: var(--muted-foreground);
  transition: color 160ms ease; }
.frisch > *:not(.aus) { animation: einblenden 160ms var(--ease-out) both; }
.nichts { padding: 28px 16px; text-align: center; font-size: 14px;
          color: var(--muted-foreground); }
.sortierbar { cursor: pointer; user-select: none; -webkit-user-select: none;
              transition: color 140ms ease; }
.sortiert { color: var(--foreground); font-weight: 600; }
.sortiert::after { content: "91"; margin-left: 4px; font-size: 11px; }
.sortiert-ab::after { content: "93"; }
@media (hover: hover) and (pointer: fine) {
  .sortierbar:hover { color: var(--foreground); }
}

/* ---- Board: Karten verschieben ------------------------------------------ */
.zieht { position: fixed; z-index: 60; pointer-events: none; margin: 0 !important;
         box-shadow: 0 16px 32px -8px rgb(0 0 0 / 0.28); cursor: grabbing;
         transform-origin: center; }
.platzhalter { border-radius: var(--radius-xl); border: 1px dashed var(--border);
               background: transparent; }
body.zieht-gerade { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.zieht-gerade [data-wanne] { transition: background 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  [data-auftrag] { cursor: grab; }
}

/* ---- Schmale Schirme ----------------------------------------------------- */
/* Die Leiste und die Abdunklung gibt es nur hier; auf dem Schreibtisch sind sie weg. */
.mobil-leiste { display: none; }
.menue-grund { display: none; }

@media (max-width: 900px) {
  /* Ohne das bleibt die Seite 1180 px breit und laeuft aus dem Schirm. */
  .huelle { min-width: 0; }

  .mobil-leiste { display: flex; align-items: center; gap: 10px; height: 48px;
                  margin: -12px -16px 0; padding: 0 12px; position: sticky; top: 0; z-index: 30;
                  background: var(--background);
                  border-bottom: 1px solid var(--border); }
  .mobil-marke { display: flex; align-items: center; }
  .mobil-marke svg { height: 14px; width: auto; }
  #menue-knopf { width: 40px; height: 40px; color: var(--foreground); }

  /* Sidebar wird zur Schublade. dvh statt vh: die Adressleiste des Browsers
     schrumpft den Bereich sonst nicht mit. */
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; height: 100dvh;
             transform: translateX(-100%); transition: transform 260ms var(--ease-drawer);
             box-shadow: 0 0 40px rgb(0 0 0 / 0.18); }
  body[data-menue="auf"] .sidebar { transform: none; }
  /* Der Einklapp-Knopf der Schreibtischfassung hat hier keine Aufgabe. */
  #sidebar-toggle { display: none; }
  body[data-sidebar="zu"] .sidebar { width: 256px; }
  body[data-sidebar="zu"] .nav-text { width: auto; opacity: 1; }
  body[data-sidebar="zu"] :is(.marke-text, .fuss-text, .nav-zahl, .gruppe-kopf) {
    opacity: 1; position: static; pointer-events: auto; }
  body[data-sidebar="zu"] .nav { justify-content: flex-start; padding: 8px; width: auto; gap: 8px; }
  body[data-sidebar="zu"] .sb-kopf { flex-direction: row; height: 64px; padding: 8px 16px; }
  body[data-sidebar="zu"] .sb-fuss { justify-content: flex-start; padding: 8px 16px; }
  body[data-sidebar="zu"] .gruppe + .gruppe { border-top: 0; padding-top: 0; margin-top: 0; }
  body[data-sidebar="zu"] .nav-punkt { opacity: 0; }

  .menue-grund { display: block; position: fixed; inset: 0; z-index: 45;
                 background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none;
                 transition: opacity 200ms var(--ease-out); }
  body[data-menue="auf"] .menue-grund { opacity: 1; pointer-events: auto; }

  /* Fingerkuppen brauchen mehr als 32 px. */
  .sidebar .nav { height: 44px; }
  .sidebar .gruppe-kopf { height: 40px; }

  .inhalt { padding: 12px 16px 32px; gap: 12px; }

  /* Tabellen behalten ihre Spaltenbreiten und scrollen seitlich. Ohne die
     Mindestbreite auf den Zeilen quetschen sich die Spalten weiter zusammen,
     statt den Scrollbereich zu nutzen. */
  [data-tabelle] { overflow: auto hidden !important; -webkit-overflow-scrolling: touch; }
  [data-tabelle] > * { min-width: 860px; }

  /* Der aufgeklappte Postfach-Waehler ist ein gezeichneter Zustand, kein Menue.
     Auf schmalen Schirmen legt er sich ueber die Liste — hier bleibt er zu. */
  .inhalt [style*="position: absolute"][style*="top: 42px"][style*="width: 268px"] {
    display: none !important; }

  /* Board: die Phasen stehen untereinander und nehmen die volle Breite.
     Das Ziehen bleibt: die Wannen sind weiterhin Ablageziele. */
  [data-spalte] { width: 100% !important; }

  /* Werkzeugleiste und Seitentitel duerfen umbrechen. */
  .inhalt > div:first-of-type,
  .inhalt [style*="display: flex"][style*="align-items: center"][style*="gap: 8px"],
  .inhalt [style*="display: flex"][style*="align-items: baseline"][style*="gap: 8px"] {
    flex-wrap: wrap; }
  .inhalt [style*="margin-left: auto"] { margin-left: 0 !important; }
  /* Ein Eingabefeld darf nicht in sich selbst umbrechen — die Umbruchregel oben
     trifft sonst auch die Huelle aus Lupe und Feld. */
  :is(.inhalt, .overlay) [style*="border: 1px solid var(--input)"] { flex-wrap: nowrap !important; }
  .inhalt [style*="width: 240px"][style*="border: 1px solid var(--input)"],
  .inhalt [style*="width: 260px"][style*="border: 1px solid var(--input)"],
  .inhalt [style*="width: 220px"][style*="border: 1px solid var(--input)"],
  .inhalt [style*="width: 520px"][style*="border: 1px solid var(--input)"] {
    width: 100% !important; }

  /* Zwei Spalten werden eine — Detailseiten, Einstellungen, Kennzahlen. */
  :is(.inhalt, .overlay) [style*="display: flex"][style*="gap: 16px"][style*="flex: 1"] { flex-wrap: wrap; }
  /* Nichts Festbreites darf breiter sein als der Schirm. Deckeln statt jede
     einzelne Pixelbreite aufzuzaehlen — nur in den Tabellen nicht, die scrollen
     absichtlich seitlich. */
  .inhalt [style*="flex-shrink: 0"]:not([data-tabelle] *) { max-width: 100%; }

  /* Haupt- und Nebenspalte der Detailseiten stehen untereinander. */
  [data-spalten] { flex-wrap: wrap; }
  [data-haupt], [data-neben] { width: 100% !important; flex: 1 0 100% !important; }
  /* Im Antwortfenster steht die Mail oben, der Assistent darunter. */
  [data-spalten] > [data-haupt] { order: -1; }
  [data-fueller] { flex: none !important; }

  /* Feste Nebenspalten werden volle Breite. Ohne das schrumpft der Nachbar mit
     min-width: 0 lieber auf Wortbreite, statt umzubrechen (Chat, Posteingang). */
  .inhalt :is([style*="width: 380px"], [style*="width: 400px"], [style*="width: 360px"],
              [style*="width: 300px"], [style*="width: 280px"], [style*="width: 240px"],
              [style*="width: 220px"])[style*="flex-shrink: 0"] { width: 100% !important; }
  .inhalt [style*="width: 380px"], .inhalt [style*="width: 400px"],
  .inhalt [style*="width: 360px"] { width: 100% !important; }
  :is(.inhalt, .overlay) [style*="grid-template-columns: repeat(4"],
  :is(.inhalt, .overlay) [style*="grid-template-columns: repeat(3"],
  :is(.inhalt, .overlay) [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: minmax(0, 1fr) !important; }

  /* Dialoge nehmen die Breite, die da ist. */
  .overlay { padding: 12px; align-items: flex-end; }
  .overlay > div:not(.overlay-grund) { width: 100% !important; max-height: 88dvh; }
  /* Die Schrittanzeige ist laenger als der Schirm — sie scrollt statt zu quetschen. */
  .overlay [style*="gap: 12px"][style*="padding: 20px 24px"] {
    overflow-x: auto; scrollbar-width: none; }
  .overlay [style*="padding: 24px 24px 0"],
  .overlay [style*="padding: 16px 24px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .overlay [style*="flex-direction: column"][style*="padding: 24px"] { padding: 16px !important; }

}

/* Auf sehr schmalen Schirmen ist der Seitentitel wichtiger als der Knopf daneben. */
@media (max-width: 520px) {
  .inhalt [style*="font-size: 20px"][style*="font-weight: 600"] { font-size: 18px; }
}

/* ---- Ladeanimation der Daten -------------------------------------------- */
/* Fortschrittsbalken laufen ueber transform, nicht ueber width — kein Layout. */
[style*="%; height: 8px; border-radius: 999px"],
[style*="%; height: 10px; border-radius"],
[style*="%; height: 28px; border-radius"] {
  transform-origin: left; animation: fuellen 520ms var(--ease-out) both;
}
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
svg path[stroke-width="3"] { stroke-dasharray: 4000; stroke-dashoffset: 4000;
                             animation: zeichnen 700ms var(--ease-out) 120ms forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
/* Die Marker liegen als HTML ueber dem SVG (sonst zieht die gedehnte viewBox
   sie zu Ellipsen). Ihre Verzoegerung steht inline in build.py. */
[data-punkt] { opacity: 0; animation: punkt 200ms var(--ease-out) forwards; }
@keyframes punkt { to { opacity: 1; } }

/* ---- Dialoge ------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
           justify-content: center; padding: 24px; }
.overlay[hidden] { display: none; }
.overlay-grund { position: absolute; inset: 0; background: rgb(0 0 0 / .55);
                 animation: einblenden 200ms var(--ease-out) both; }
.overlay > div:not(.overlay-grund) { position: relative; max-height: calc(100vh - 48px);
                                     overflow-y: auto;
                                     animation: hoch 240ms var(--ease-out) both; }
.overlay .dlg { display: none; }
.overlay .dlg[data-aktiv] { display: block; }
@keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }
/* Modal bleibt mittig verankert — es haengt an keinem Ausloeser. */
@keyframes hoch { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }
.overlay.schliesst .overlay-grund { animation: ausblenden 160ms var(--ease-out) both; }
.overlay.schliesst > div:not(.overlay-grund) { animation: runter 160ms var(--ease-out) both; }
@keyframes ausblenden { to { opacity: 0 } }
@keyframes runter { to { opacity: 0; transform: translateY(6px) scale(.985) } }

/* ---- Interaktives ------------------------------------------------------- */
[data-oeffnet], [data-schliesst] { cursor: pointer; }
/* Die Kennzahl-Karten bleiben beim Hover ruhig — nur die Druckreaktion bleibt. */
.karte-klick { transition: transform 140ms var(--ease-out); }
.karte-klick:active { transform: scale(0.99); }

/* Knoepfe tragen ihre Masse inline; die Stil-Signaturen sind eindeutig genug
   als Angriffspunkt: Outline, Primaer und die Geisterknoepfe in den Wannen. */
[style*="border: 1px solid var(--border); background: var(--background)"],
[style*="background: var(--primary); color: var(--primary-foreground)"],
.geist {
  transition: background-color 140ms ease, border-color 140ms ease, filter 140ms ease,
              color 140ms ease, transform 140ms var(--ease-out);
}
[style*="border: 1px solid var(--border); background: var(--background)"]:active,
[style*="background: var(--primary); color: var(--primary-foreground)"]:active,
.geist:active { transform: scale(0.97); }

/* Knoepfe sind div/span mit Text — ohne diese Regel zeigt der Browser den
   Text-Cursor und die Beschriftung laesst sich beim Klicken markieren. */
[style*="border: 1px solid var(--border); background: var(--background)"],
[style*="background: var(--primary); color: var(--primary-foreground)"],
.geist, .klickbar, .tab, [data-oeffnet], [data-geht-zu], [data-schliesst],
.nav, .gruppe-kopf, .ikon-knopf {
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.tab { transition: background-color 140ms ease, color 140ms ease,
                   transform 140ms var(--ease-out); }
.tab:active { transform: scale(0.97); }
a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  /* Navigation: Flaeche faerbt sich, der Eintrag ruecht leicht nach — zeigt,
     dass er anklickbar ist, ohne dass etwas springt. */
  .nav { transition: background-color 140ms ease, transform 160ms var(--ease-out); }
  .nav:hover { background: var(--muted); transform: translateX(2px); text-decoration: none; }
  .nav-aktiv:hover { transform: none; }
  .gruppe-kopf:hover { opacity: 1; background: var(--muted); }
  .ikon-knopf:hover { background: var(--muted); color: var(--foreground); }
  .fuss-person:hover { background: var(--muted); text-decoration: none; }
  [style*="border: 1px solid var(--border); background: var(--background)"]:hover {
    background: var(--muted) !important; border-color: var(--muted-foreground) !important;
  }
  [style*="background: var(--primary); color: var(--primary-foreground)"]:hover {
    filter: brightness(1.07);
  }
  .geist:hover { background: var(--muted); color: var(--foreground); }
  .tab:hover { color: var(--foreground); }
  [style*="border-bottom: 1px solid var(--border)"]:hover { background: var(--muted); }
  /* Der Dialograhmen traegt woertlich dieselbe Inline-Signatur wie ein Outline-Knopf
     und faerbte sich deshalb beim Darueberfahren dunkel. */
  .overlay > :not(.overlay-grund):hover {
    background: var(--background) !important; border-color: var(--border) !important;
  }
}
/* Aus demselben Grund: kein Zeigefinger und keine Druckreaktion auf der Dialogflaeche. */
.overlay > :not(.overlay-grund) { cursor: default; -webkit-user-select: auto; user-select: auto; }
.overlay > :not(.overlay-grund):active { transform: none; }

/* Weniger Bewegung: Deckkraft bleibt, Verschiebung faellt weg. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important;
                           transition-duration: .01ms !important; }
  .inhalt > div { animation: none; }
}

/* ---- Ausbau: alles klickbar --------------------------------------------- */
/* Inline-Styles setzen display; ohne !important bliebe hidden wirkungslos. */
[hidden] { display: none !important; }

/* Toast — Sonner-artig, unten rechts, kurzlebig. */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column;
          gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 380px; padding: 12px 16px;
         border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--background);
         color: var(--foreground); box-shadow: 0 8px 24px -8px rgb(0 0 0 / .25); font-size: 14px;
         pointer-events: auto; animation: toast-auf 240ms var(--ease-out) both; }
.toast > span { flex: 1; min-width: 0; }
.toast button { border: 0; background: none; color: var(--primary); font: inherit; font-weight: 500;
                cursor: pointer; padding: 0; white-space: nowrap; }
.toast-weg { animation: toast-weg 180ms var(--ease-out) both; }
@keyframes toast-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-weg { to { opacity: 0; transform: translateY(6px); } }

/* Kleiner Dialog: Dialog und AlertDialog aus shadcn, 440 px. */
.dlg-klein { width: 440px; max-width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--border);
             background: var(--background); color: var(--foreground);
             box-shadow: 0 24px 48px -12px rgb(0 0 0 / .35); }
.dlg-kopf { display: flex; flex-direction: column; gap: 4px; padding: 24px 24px 0; }
.dlg-titel { font-size: 18px; font-weight: 600; line-height: 24px; }
.dlg-text { font-size: 14px; color: var(--muted-foreground); line-height: 21px; }
.dlg-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 24px 0; }
.dlg-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dlg-feld > span { font-size: 14px; font-weight: 500; }
.dlg-breit { grid-column: 1 / -1; }
.dlg-block { padding: 20px 24px 0; }
.dlg-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 20px 24px 24px; }
.dlg-abbruch { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-md);
               border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs);
               font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
               transition: background 140ms ease, transform 140ms var(--ease-out); }
.dlg-ok { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-md);
          background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 500;
          cursor: pointer; user-select: none; transition: filter 140ms ease, transform 140ms var(--ease-out); }
.dlg-rot { background: var(--destructive); }
.dlg-ok:active, .dlg-abbruch:active { transform: scale(.97); }
.qr-platz { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto;
            border-radius: var(--radius-md); border: 1px dashed var(--border); background: var(--muted);
            color: var(--muted-foreground); font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .dlg-abbruch:hover { background: var(--muted); }
  .dlg-ok:hover { filter: brightness(1.07); }
}

/* Menü hinter dem Kebab: DropdownMenu. */
.menue { position: fixed; z-index: 70; min-width: 168px; padding: 4px; border-radius: var(--radius-md);
         border: 1px solid var(--border); background: var(--background); color: var(--foreground);
         box-shadow: 0 8px 24px -8px rgb(0 0 0 / .25); animation: menue-auf 140ms var(--ease-out) both; }
.menue-punkt { display: flex; width: 100%; align-items: center; height: 32px; padding: 0 8px; border: 0;
               border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: 14px;
               text-align: left; cursor: pointer; white-space: nowrap; }
.menue-punkt:hover, .menue-punkt:focus-visible { background: var(--muted); outline: 0; }
.menue-rot { color: var(--destructive); }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.kebab { width: 24px; height: 24px; margin: -4px; color: var(--muted-foreground); }
.kebab:hover { color: var(--foreground); }

/* Anhang-Chip im Mailfenster */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
        border: 1px solid var(--border); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip button { border: 0; background: none; color: var(--muted-foreground); cursor: pointer; padding: 0; font: inherit; }

/* Ordner in der Ablage sind waehlbar */
[data-ordner] { cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
@media (hover: hover) and (pointer: fine) {
  [data-ordner]:hover { background: var(--muted) !important; }
}

/* Neue Position im Assistenten: Eingaben statt Text */
.pos-neu input { height: 30px; font-size: 14px; }

/* Kompakte Tabellen (Profil > Anzeige): Zeilen halb so hoch */
body[data-kompakt="1"] [data-tabelle] [style*="border-bottom: 1px solid var(--border)"] > div {
  padding-top: 3px !important; padding-bottom: 3px !important; }
body[data-kompakt="1"] [data-satz] > div { padding-top: 5px !important; padding-bottom: 5px !important; }

/* ---- Grosse Bildschirme -------------------------------------------------- */
/* Der Inhalt laeuft nicht ins Unendliche. 1600 px ist auf 1920 praktisch die
   volle Breite und deckelt erst darueber — Zeilenlaengen bleiben lesbar. */
.inhalt { width: 100%; max-width: 1600px; margin: 0 auto; }

/* Der letzte Block waechst nicht ins Leere. Das flex: 1 im Markup fuellt die
   feste Artboard-Leinwand; auf einem 1080er Schirm bliebe sonst unter dem
   Diagramm eine halbe Kartenhoehe Luft. Reste sammeln sich jetzt unter der
   Seite, nicht in der Karte. */
.inhalt > div:last-child { flex-grow: 0 !important; flex-basis: auto !important; }

/* Die Phasen des Boards teilen sich die freie Breite, statt rechts ein Drittel
   leer zu lassen. Der Deckel haelt die Karten in lesbarer Breite; die feste
   Grundbreite von 212 px bleibt die Untergrenze. */
[data-spalte] { flex-grow: 1; flex-basis: 212px; max-width: 320px; }

/* Blaettern: der inaktive Knopf ist ausgegraut */
.blaettern-aus { color: var(--muted-foreground) !important; pointer-events: none; }

/* Drucken: nur der Inhalt */
@media print {
  .sidebar, .overlay, .toasts, .mobil-leiste, .menue, .menue-grund { display: none !important; }
  .huelle { min-width: 0; }
  .inhalt { padding: 0; }
  .inhalt > div { animation: none; }
}