/* ============================================================
   SQUADRAI Dashboard - Design-System
   Tokens 1:1 aus dem Aufgaben-Cockpit (Warm-Dark, Terracotta),
   erweitert um Dashboard-Komponenten (Kacheln, KPIs, Ampeln,
   Freigabe-Karten, Tabellen, Vorschlaege).
   ============================================================ */
:root{
  --color-bg:#0A0805; --color-surface:#17130F; --color-surface-2:#1F1914;
  --color-sidebar-hover:rgba(242,232,220,0.04);
  --color-text:#F2E8DC; --color-text-2:#C4B8A8; --color-text-muted:#8C8479;
  --color-accent:#C26B4C; --color-accent-hover:#D17A5A; --color-accent-deep:#8A4830;
  --color-accent-soft:rgba(194,107,76,0.12); --color-accent-ring:rgba(194,107,76,0.50); --color-accent-fg:#1A0F0A;
  --color-ok:#7A8A4E; --color-warn:#D9A24E; --color-err:#B14A3A; --color-info:#6FA8C4;
  --color-warn-lampe:#B8860B;
  --color-ok-soft:rgba(122,138,78,0.15); --color-warn-soft:rgba(217,162,78,0.15);
  --color-err-soft:rgba(177,74,58,0.15); --color-info-soft:rgba(111,168,196,0.15);
  --color-err-fg:#FFFFFF;
  --border:rgba(242,232,220,0.08); --border-strong:rgba(242,232,220,0.14);
  /* Dieselbe Schrift wie in der Gestalt. Zwei verschiedene Angaben waeren
     zwei Wahrheiten, und welche gilt, entschiede die Reihenfolge im CSS. */
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  --font-mono:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  /* **Acht Schriftgrößen, und keine neunte.** Bis zum 17.08.2026 standen
     neben diesen Stufen 128 fest eingetippte Werte im Stylesheet und 99 im
     JavaScript, in 23 verschiedenen Größen, darunter Halbwerte wie 9,5 und
     16,5. Das ist die Sorte Unordnung, die man einzeln nie bemerkt und im
     Ganzen sofort: Der Geschäftsführer nannte es "als hätten wir da 20
     verschiedene Programme drin", und er hatte recht.

     | Rolle | Wert | Wofür |
     |---|---|---|
     | xs   | 10px | Beschriftungen in Versalien, Zähler, Fußnoten |
     | sm   | 11px | kleine Etiketten, Knöpfe in Tabellen, Hilfstexte |
     | base | 13px | Fließtext in Karten und Tabellen |
     | md   | 14px | die Grundschrift der Oberfläche |
     | lg   | 18px | Überschriften in Karten und Dialogen |
     | xl   | 21px | die Uhr, mittlere Kennzahlen |
     | 2xl  | 26px | Kennzahlen |
     | 3xl  | 34px | die eine große Zahl einer Ansicht |

     Wer eine Größe braucht, nimmt die nächstliegende Rolle und tippt keine
     Zahl. Ein Pixel Unterschied sieht niemand, aber dreiundzwanzig Größen
     nebeneinander sieht jeder.

     **Zwei Ausnahmen bleiben stehen, und beide aus einem technischen Grund.**
     Eingabefelder tragen 16px, weil iOS unterhalb davon beim Antippen
     automatisch hineinzoomt, und der Nutzer landet in einer verschobenen
     Ansicht. Und die ganz großen Anzeigewerte (Uhr im Chat, Tacho) stehen auf
     30px, weil die nächste Rolle vier Pixel danebenliegt. Wer hier aufräumt,
     prüft beides einzeln, statt es glattzuziehen. */
  --fs-xs:10px; --fs-sm:11px; --fs-base:13px; --fs-md:14px; --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:34px;
  /* **Die Rundungen sind Rollen, keine freien Zahlen.** Bis zum 16.08.2026
     standen neben diesen Stufen noch dreizehn fest eingetippte Werte im
     Stylesheet (2, 3, 4, 5, 6, 7, 8, 10, 14, 99 Punkte), mehrere davon
     doppelten eine Stufe hier. Nebeneinander sieht man das sofort: Zwei
     gleich aussehende Etiketten mit 6 und 8 Punkten wirken wie ein Fehler,
     ohne dass man sagen könnte, welcher der Fehler ist. Ein neues Bauteil
     nimmt die Rolle, die zu seiner Größe passt, und tippt keine Zahl.

     | Rolle | Wert | Wofür |
     |---|---|---|
     | xs   | 4px   | alles unter zwölf Punkten: Farbpunkte, Balken, Marker |
     | sm   | 6px   | kleine Etiketten, Kalendereinträge, Code im Fließtext |
     | md   | 8px   | was man anfasst: Knöpfe, Navigationszeilen, Felder |
     | lg   | 10px  | Kästen innerhalb einer Karte, Banner |
     | (leer) | 14px | die Flächen selbst: Karten, Dialoge, Panels |
     | pill | 999px | Kapseln mit einzeiligem Text, siehe `.chip` |

     Ein Kreis ist keine Rundung: Punkte und Avatare stehen weiter auf 50 %.
     Die frühere Stufe `--radius-xl` (12px) ist entfallen, sie wurde nirgends
     benutzt und lag genau zwischen zwei Rollen. */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius:14px; --radius-pill:999px;
  --shadow-lg:0 12px 30px rgba(0,0,0,0.40);
  --shadow-accent:0 0 0 1px var(--color-accent-ring),0 4px 14px rgba(194,107,76,0.25);
  --transition-fast:120ms ease; --transition-base:200ms ease;
  --sidebar-width:248px; --main-padding-x:36px; --main-padding-y:28px;
  --mobile-bar-h:52px;
  /* Die Sicherheitszonen des Geraets als Variablen, nicht direkt als env().
     Zwei Gruende: Sie lassen sich damit an einer Stelle in eine Rechnung
     einsetzen, und sie sind zum Pruefen setzbar. Am Rechner sind alle vier 0,
     dort aendert sich also nichts. */
  --sa-top:env(safe-area-inset-top,0px); --sa-right:env(safe-area-inset-right,0px);
  --sa-bottom:env(safe-area-inset-bottom,0px); --sa-left:env(safe-area-inset-left,0px);
  /* **Der Abstand zwischen zwei Kästchen ist EINE Zahl, nicht zwei.** Der
     Zwischenraum im Raster und der Abstand zwischen zwei untereinander
     liegenden Karten müssen gleich sein, sonst sieht man die Kante. Bis zum
     14.08.2026 stand der Rasterabstand im CSS und der Kartenabstand an 31
     Stellen als `marginTop = '16px'` im JavaScript. Am Rechner fiel das nicht
     auf, weil beide zufällig 16 waren. Sobald eine der beiden Zahlen sich je
     nach Bildschirm ändert, driften sie auseinander. */
  --karten-abstand:16px;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100vh;height:100dvh;background:var(--color-bg);color:var(--color-text);overflow:hidden;overscroll-behavior:none;width:100%;}
/* Durchgehende Hintergrund-Ebene über das GANZE Display (inkl. iOS-Sicherheitszonen
   unten/oben). Verhindert den schwarzen Streifen, den iOS sonst in nicht bemalte
   Safe-Areas legt: hier liegt immer das Marken-Dunkel, nie das UA-Schwarz. */
body::before{content:'';position:fixed;inset:0;background:var(--color-bg);z-index:-1;pointer-events:none;}
/* **Auch das Wurzelelement traegt sie**, nicht nur der Rumpf. Sichtbar wird
   das nirgends, aber die Aussage "eine Schrift, ohne Ausnahmen" laesst sich
   sonst nicht messen: Eine Zaehlung ueber alle Elemente findet dann Times,
   und wer das prueft, sucht eine Stunde nach einer Stelle, die es nicht
   gibt. */
html{font-family:var(--font-ui);}
body{font-family:var(--font-ui);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased;color-scheme:dark;}
::selection{background:var(--color-accent-soft);color:var(--color-text);}
/* Alle Bedienelemente erben die Hausschrift. Bis zum 24.08.2026 stand hier nur
   `button`, und deshalb trugen sieben Felder Arial: die Suchzeilen in Cockpit,
   Mitteilungen, Post, Kundenakte und Archiv plus ein Auswahlfeld. Sie fielen
   nicht auf, weil kein einzelnes davon falsch AUSSIEHT, sondern erst neben
   einem Feld daneben, das die Hausschrift traegt.

   `inherit` und nicht der Name der Schrift: So bleibt ein Feld in einer
   Monospace-Umgebung Monospace, statt hier eine zweite Wahrheit zu setzen. */
button,input,select,textarea{font-family:inherit;}
a{color:var(--color-info);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:var(--font-mono);}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.12em;}
.muted{color:var(--color-text-muted);}
.scrolllock{overflow:hidden;}

/* ===== App-Shell / Sidebar ===== */
/* **`-webkit-fill-available` ist hier raus, am 03.09.2026.**
   Es stand zwischen 100vh und 100dvh und war als Rueckfall fuer aeltere
   iOS-Fassungen gedacht. Auf dem iPad im Vollbild liefert es aber die Hoehe
   OHNE die Sicherheitszone unten, und wer es als letzte verstandene Regel
   nimmt, bekommt eine Huelle, die vor dem Bildschirmrand aufhoert. Darunter
   scheint dann der Seitenhintergrund durch: ein heller Streifen im hellen
   Thema, ein schwarzer im dunklen. Genau so gemeldet, fuer iPad und Handy.

   `100dvh` kennt jedes Geraet im Haus, und `100vh` bleibt als Rueckfall
   davor stehen. Wer die Zeile wieder ergaenzt, holt den Streifen zurueck. */
/* **Die Huelle wird festgenagelt, nicht ausgemessen.**
   `height:100dvh` verlaesst sich darauf, dass ein Geraet die Sicherheitszone
   unten mitzaehlt. Genau das tun iPad und iPhone im Vollbild nicht
   zuverlaessig: Die Huelle endete ueber dem Bildschirmrand, und darunter
   blieb der Seitenhintergrund stehen. Am 03.09.2026 im Bildschirmfoto
   gemessen, der Streifen war #F0EDE6, also die eigene Papierfarbe.

   `position:fixed;inset:0` misst nichts, sondern spannt die Huelle ueber
   den ganzen sichtbaren Bereich, einschliesslich der Zonen. Zusammen mit
   `viewport-fit=cover` in der Kopfzeile ist das der ganze Bildschirm.
   `height:100dvh` bleibt als Angabe fuer alles stehen, was `inset` nicht
   kennt. */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;width:100%;max-width:100%;background:var(--color-bg);}
/* Sicherheitszone oben und links auch hier, aus demselben Grund wie bei
   main.content: Im Vollbild auf dem iPad liegt sonst der Markenschriftzug unter
   der Uhr. Am Rechner sind beide Werte 0. */
/* **Die Zone unten gehoert zur Spalte, nicht zum Seitenhintergrund.**
   Sonst endet das Ultramarin ueber dem Bildschirmrand, und darunter liegt
   ein Streifen in einer anderen Farbe. Genau so auf dem iPad gemeldet.

   **Hier stand am 03.09.2026 kurz das Gegenteil**, samt einer Begruendung,
   die falsch war: Ich hatte diese Zeile fuer die Ursache gehalten, weil der
   Balken kurz nach ihr zurueckkam. Der Zeitverlauf sagt etwas anderes. Sie
   war um 20:40 drin, und in diesem Stand war der iPad frei; kaputt gemacht
   hat es ein Versuch danach, `position:fixed` auf der Huelle, der laengst
   zurueckgenommen ist. Beim Aufraeumen ist dann die richtige Zeile mit
   herausgeflogen.

   **Die Lehre steht hier, weil sie teuer war:** Was kurz vor einem Fehler
   geaendert wurde, ist nicht automatisch seine Ursache. Wer das verwechselt,
   nimmt die Loesung heraus und sucht danach an einer Stelle weiter, an der
   nie etwas war. */
aside.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--color-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width var(--transition-base),transform var(--transition-base);padding-top:var(--sa-top);padding-left:var(--sa-left);padding-bottom:var(--sa-bottom);}
/* Mobil-Topbar + Drawer-Backdrop: am Desktop ausgeblendet, nur im Handy-Layout aktiv */
.mobile-bar{display:none;}
.nav-backdrop{display:none;}
/* Der Kopf trägt zwei Dinge, Logo und Uhr, und sie bilden einen Block:
   oben Luft, beide mittig, unten eine feine Linie zur Navigation. Vorher saß
   das Logo bündig in der Ecke und die Uhr linksbündig darunter, dadurch hatte
   der Bereich drei verschiedene Kanten auf engstem Raum. */
.sb-head{padding:24px 20px 12px;display:flex;align-items:center;justify-content:center;gap:11px;}
/* **Zwei Fassungen des Schriftzugs, eine je Untergrund.** Die Wortmarke ist
   fast weiß (RGB 240,240,240) und stand im hellen Modus auf einem Off-White von
   RGB(239,238,220): ein Kontrast von 1,01 zu 1, also unsichtbar. Aufgefallen am
   16.08.2026 auf dem iPad, dagewesen seit der helle Modus am 13.08. kam.
   Die helle Fassung tauscht nur das Weiß gegen das CI-Schwarz #0C0C0D, das Gold
   #DAA520 bleibt unangetastet. Dieselbe Marke, nicht zwei. */
.sb-wordmark{width:100%;height:auto;display:block;}
.sb-wordmark.hell{display:none;}
html[data-thema="hell"] .sb-wordmark.dunkel{display:none;}
html[data-thema="hell"] .sb-wordmark.hell{display:block;}
.sb-mark-mini{display:none;width:34px;height:34px;border-radius:var(--radius-md);object-fit:cover;box-shadow:var(--shadow-accent);}
.brand-mark{width:32px;height:32px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent),var(--color-accent-deep));display:grid;place-items:center;box-shadow:var(--shadow-accent);color:#fff;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);letter-spacing:0.02em;flex-shrink:0;}
.brand-mark svg{color:#fff;width:17px;height:17px;}
.sb-head h1{font-size:15.5px;font-weight:700;margin:0;line-height:1.1;letter-spacing:-0.01em;}
.sb-nav{flex:1;padding:6px 10px 14px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;}
.nav-sep{height:1px;background:var(--border);margin:9px 10px;opacity:0.7;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--radius-pill);cursor:pointer;color:var(--color-text-muted);font-size:var(--fs-md);transition:background var(--transition-fast),color var(--transition-fast);position:relative;user-select:none;border:0;background:transparent;width:100%;text-align:left;}
.nav-item svg{width:17px;height:17px;flex-shrink:0;color:var(--color-text-muted);transition:color var(--transition-fast);}
.nav-item:hover{background:var(--color-sidebar-hover);color:var(--color-text);}
.nav-item:hover svg{color:var(--color-text);}
.nav-item.active{background:var(--color-accent-soft);color:var(--color-text);font-weight:600;}
.nav-item.active svg{color:var(--color-accent);}
.nav-item.active::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--color-accent);border-radius:0 var(--radius-xs) var(--radius-xs) 0;}
.nav-item .lbl{flex:1;}

/* ---- Gruppen in der Navigation (22.08.2026) ----
   Neun Ueberschriften statt eines duennen Trenners. Der Winkel dreht sich
   mit, damit sichtbar ist, welchen Zustand ein Klick herstellt, statt dass
   man es ausprobieren muss. */
/* **Die Gruppentitel, umgebaut am 04.09.2026.** Gemeldet: "zu klein und zu
   dunkel, nicht ersichtlich genug, und man sieht ihnen nicht an, dass man sie
   aufklappen kann."

   Nachgemessen war der Kontrast gar nicht das Hauptproblem: Weiss mit 62
   Prozent auf dem Ultramarin der Spalte ergibt 6,0 zu 1, das ist ueber der
   Anforderung. Es war die GROESSE. Die Titel standen auf --fs-xs, also 10
   Punkten, am Handy sogar 9, dazu Grossbuchstaben mit 0.13em Sperrung. Eine
   gesperrte Versalzeile ist bei dieser Groesse eher ein Muster als ein Wort.

   Drei Dinge zusammen, keines allein haette gereicht:
   1. Groesser und schwerer: --fs-sm statt --fs-xs, 700 statt 600, und die
      Sperrung zurueck auf 0.08em. Weite Sperrung hilft kleinen Versalien,
      groesseren schadet sie.
   2. Ein eigenes Feld statt einer freien Zeile: leichter Grund und runde
      Ecken. Damit liest sich der Titel als Bedienelement und nicht als
      Beschriftung, und genau das war der zweite Teil der Meldung.
   3. Luft davor. Zwischen zwei Gruppen stehen jetzt 16 Punkte, vorher 11.
      Ohne Abstand verschwimmt die Gliederung, egal wie hell der Titel ist. */
/* **Der Gruppenkopf ist ein Knopf, also eine Kapsel.** Am 06.09.2026 mit
   einem Pfeil gemeldet: Er trug die Flaechen-Stufe, und acht Punkte an einem
   36 Punkte hohen Kasten liest niemand als rund. Dieselbe Form wie die
   Eintraege darunter, sonst hat eine Spalte zwei Sprachen. */
.nav-gruppe{display:flex;align-items:center;gap:8px;width:100%;
  margin:16px 0 3px;padding:7px 12px;border-radius:var(--radius-pill);
  background:transparent;border:0;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);
  text-align:left;transition:background var(--transition-fast),color var(--transition-fast);}
/* Die erste Gruppe steht direkt unter dem Kopf, dort waere die Luft ein Loch. */
.nav-gruppe:first-child{margin-top:4px;}
.nav-gruppe:hover{color:var(--color-text);}
.nav-gruppe .lbl{flex:1;}
/* **Der Winkel ist das, was sagt: hier laesst sich etwas oeffnen.** Er war
   13 Punkte gross und so blass wie die Schrift, damit war er im Ultramarin
   praktisch unsichtbar. Jetzt 15, volle Deckkraft, und er sitzt in einem
   eigenen kleinen Feld, damit er als Knopf lesbar ist. */
.nav-gruppe .winkel{width:15px;height:15px;flex:none;opacity:.9;
  transition:transform var(--transition-fast);}
.nav-gruppe[aria-expanded="false"] .winkel{transform:rotate(-90deg);}
/* **Zugeklappt sagt die Gruppe, wie viel darin liegt.** Sonst ist eine
   geschlossene Gruppe eine Behauptung: Man sieht, dass etwas fehlt, aber
   nicht wie viel, und klappt zur Sicherheit alles wieder auf. Offen steht die
   Zahl nicht da, dort zaehlt man selbst. */
.nav-gruppe .anzahl{display:none;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--color-surface-2);color:var(--color-text-muted);}
.nav-gruppe[aria-expanded="false"] .anzahl{display:inline-block;}
.nav-aeste{display:flex;flex-direction:column;gap:1px;}
/* **Versteckt muss versteckt bleiben, auch gegen eine Anzeigeart.** Die Zeile
   darueber setzt display:flex, und das sticht das hidden-Attribut: Das
   Aufklappen setzte hidden brav, und CSS machte die Gruppe im selben Moment
   wieder sichtbar. Von aussen sah es aus, als taeten die Pfeile nichts.
   Gemeldet am 22.08.2026, und es ist derselbe Fehler, der im Paket-Cockpit
   schon einmal auftrat und dort mit einer globalen Regel behoben wurde. Hier
   steht sie bewusst eng: Eine globale [hidden]-Regel mit !important koennte
   an anderer Stelle etwas ueberstimmen, das seinen Grund hat. */
.nav-aeste[hidden]{display:none;}

/* ═══ Versteckt muss versteckt bleiben ═══════════════════════════════════
   Ein Element mit `display:flex`, `grid` oder `block` ignoriert das
   hidden-Attribut. Der Code setzt es brav, und CSS macht es im selben Moment
   wieder sichtbar, ohne Fehlermeldung.

   Dieser Fehler ist am 22.08.2026 DREIMAL passiert: bei den Gruppen der
   Navigation, beim Notizfenster und er lauerte bereits beim Demo-Knopf und
   am Jarvis-Transkript. Deshalb stehen die betroffenen Bauteile hier
   zusammen statt verstreut, und eine Prüfung im Selbsttest sucht künftig
   selbst nach dem Muster.

   Bewusst KEINE globale Regel `[hidden]{display:none!important}`: Die würde
   auch dort greifen, wo eine Ansicht das hidden-Attribut absichtlich
   überstimmt, etwa bei der eingeklappten Seitenleiste. */
.notiz-fenster[hidden],
.notiz-verlauf[hidden],
.demo-pill[hidden],
/* Der Filter-Knopf in der Kopfleiste versteckt genau diese vier. Alle vier
   sind Flex-Zeilen, und `display:flex` sticht `hidden` aus: Ohne die
   folgenden Zeilen taete der Knopf sichtbar nichts, obwohl das Attribut
   gesetzt waere. Das ist derselbe Fehler wie oben, zum vierten Mal, deshalb
   steht er hier gleich mit. */
.toolbar[hidden],
.tabs[hidden],
.blaettern[hidden],
.filterzeile[hidden],
.jv-transcript[hidden]{display:none;}

/* ---- Notiz zur Ansicht (22.08.2026) ----
   Der Punkt am Knopf sagt, dass hier etwas steht. Ohne ihn müsste man jeden
   Reiter öffnen, um zu wissen, wo eine Notiz liegt. */
/* ---- Diagramme: Ring und Balken (22.08.2026) ---- */
.diagramm{overflow:visible;}
.d-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;
  font-size:var(--fs-sm);color:var(--color-text-muted);}
.d-legende span{display:inline-flex;align-items:center;gap:6px;}

/* ---- Blättern unter Listen (22.08.2026) ---- */
.blaettern{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--color-text-muted);}
.blaettern .seiten{display:flex;gap:3px;flex-wrap:wrap;}
.blaettern button{font:inherit;font-size:var(--fs-sm);cursor:pointer;min-width:30px;
  padding:4px 8px;background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--border);border-radius:var(--radius-xs);}
.blaettern button:hover:not(:disabled){border-color:var(--color-accent);}
.blaettern button[aria-current="page"]{background:var(--color-accent);
  color:var(--color-accent-fg);border-color:var(--color-accent);font-weight:600;}
.blaettern button:disabled{opacity:.35;cursor:default;}
.blaettern-luecke{padding:4px 2px;}
.blaettern-zahl{font-variant-numeric:tabular-nums;}

.tb-knopf{position:relative;}
.tb-knopf:disabled{opacity:.32;cursor:default;}
.tb-punkt{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:var(--radius-pill);background:var(--color-accent);}

/* Das Fenster: rechts unten über den schwebenden Knöpfen, damit es sie nicht
   verdeckt. Es scrollt nicht mit, eine Notiz gilt der ganzen Ansicht. */
.notiz-fenster{position:fixed;right:20px;bottom:88px;z-index:295;
  width:min(380px,calc(100vw - 40px));display:flex;flex-direction:column;gap:8px;
  background:var(--color-surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-lg);}
.notiz-kopf{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-md);font-weight:600;}
.notiz-kopf button{background:none;border:0;cursor:pointer;font-size:20px;
  line-height:1;color:var(--color-text-muted);padding:0 2px;}
.notiz-kopf button:hover{color:var(--color-text);}
.notiz-fenster textarea{width:100%;resize:vertical;font:inherit;font-size:16px;
  background:var(--color-bg);color:var(--color-text);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px;}
.notiz-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:var(--fs-sm);}
.notiz-verlauf-titel{background:none;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:var(--fs-sm);color:var(--color-accent);text-align:left;}
.notiz-alt{border-left:2px solid var(--border);padding:4px 0 4px 8px;
  margin-top:6px;font-size:var(--fs-base);white-space:pre-wrap;}

@media (max-width:760px){
  /* Am Handy nimmt das Fenster die Breite und rückt über die Daumenzone. */
  .notiz-fenster{right:10px;left:10px;width:auto;
    bottom:calc(72px + env(safe-area-inset-bottom));}
}

/* Eingeklappte Spalte: Dort ist kein Platz fuer Ueberschriften, und die
   Reiter stehen ohnehin alle untereinander als Symbole. Eine Ueberschrift,
   von der man nur einen Buchstaben sieht, ist keine. */
.app.sb-collapsed .nav-gruppe{display:none;}
.app.sb-collapsed .nav-aeste{display:flex !important;}

/* ---- Die zwei Werkzeuge, die keine Orte sind ----
   Jarvis und Chat schweben unten rechts statt in der Liste zu stehen. Man
   fragt etwas, waehrend man woanders steht. */
.werkzeug-knoepfe{position:fixed;right:20px;bottom:20px;z-index:290;
  display:flex;flex-direction:column;gap:8px;}
.werkzeug-knopf{width:46px;height:46px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--border-strong);
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  transition:transform var(--transition-fast),background var(--transition-fast);}
.werkzeug-knopf svg{width:20px;height:20px;}
.werkzeug-knopf:hover{transform:translateY(-2px);background:var(--color-surface-2);}
/* Die Zahl am schwebenden Knopf. Sie sitzt oben rechts halb ausserhalb, wie
   an einem App-Symbol: So verdeckt sie das Sinnbild nicht. Bei null wird sie
   ausgeblendet statt auf 0 gesetzt, sonst steht dort dauerhaft eine Null und
   das Auge lernt, sie zu ueberlesen. */
.werkzeug-zahl{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;
  padding:0 5px;border-radius:var(--radius-pill);background:var(--color-err);
  color:#fff;font-family:var(--font-mono);font-size:10px;line-height:19px;
  text-align:center;font-weight:600;box-shadow:0 0 0 2px var(--color-bg);}
.werkzeug-zahl.zero{display:none;}
.werkzeug-knopf{position:relative;}

.werkzeug-knopf[aria-pressed="true"]{background:var(--color-accent);
  color:var(--color-accent-fg);border-color:var(--color-accent);}

/* Die kurzen Meldungen steigen ueber den Knoepfen auf, statt sie zu
   verdecken. Beide sassen vorher auf derselben Stelle. */
.toast-c{bottom:84px;}

@media (max-width:760px){
  /* Am Handy sitzt unten die Daumenzone, und dort liegt oft schon die Leiste
     des Browsers. Die Knoepfe ruecken hoch und enger zusammen. */
  .werkzeug-knoepfe{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));flex-direction:row;}
  .werkzeug-knopf{width:42px;height:42px;}
  .toast-c{bottom:76px;}
}
.nav-item .badge-num{background:var(--color-accent-soft);color:var(--color-accent);font-size:var(--fs-xs);font-weight:600;font-family:var(--font-mono);padding:1px 6px;border-radius:var(--radius-md);min-width:20px;text-align:center;}
.nav-item.active .badge-num{background:var(--color-accent);color:#fff;}
.nav-item .badge-num.zero{background:rgba(242,232,220,0.05);color:var(--color-text-muted);}
.nav-item.active .badge-num.zero{background:rgba(242,232,220,0.10);color:var(--color-text-muted);}
/* Einklapp-Schalter (unten in der Sidebar, ersetzt die alte Fußzeile) */
.sb-toggle{margin-top:auto;padding:13px 18px;border:0;border-top:1px solid var(--border);border-radius:var(--radius-pill);background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:flex-end;transition:color var(--transition-fast),background var(--transition-fast);}
.sb-toggle:hover{color:var(--color-text);background:var(--color-sidebar-hover);}
.sb-toggle svg{width:18px;height:18px;}
/* Eingeklappter Zustand: nur Icons, Labels weg, Badges werden zu Punkten */
.app.sb-collapsed .sidebar{width:64px;}
.app.sb-collapsed .sb-head{justify-content:center;padding:20px 0;}
.app.sb-collapsed .sb-head h1{display:none;}
.app.sb-collapsed .sb-wordmark{display:none;}
.app.sb-collapsed .sb-mark-mini{display:block;}
.app.sb-collapsed .nav-item{justify-content:center;padding:9px 0;gap:0;}
.app.sb-collapsed .nav-item .lbl{display:none;}
.app.sb-collapsed .nav-item.active::before{left:0;}
.app.sb-collapsed .nav-item .badge-num{position:absolute;top:3px;right:9px;min-width:0;width:7px;height:7px;padding:0;border-radius:50%;font-size:0;background:var(--color-accent);}
.app.sb-collapsed .nav-item .badge-num.zero{display:none;}
.app.sb-collapsed .nav-sep{margin:9px 14px;}
.app.sb-collapsed .sb-toggle{justify-content:center;padding:13px 0;}
/* Lade-Spinner (ersetzt das schlichte "Lade ..."-Text) */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:52px 0;color:var(--color-text-muted);font-size:var(--fs-sm);}
.loading .spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--color-accent-soft);border-top-color:var(--color-accent);animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Weiches Einblenden beim Tab-Wechsel */
@keyframes viewIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.content.view-in{animation:viewIn 0.2s ease both;}

/* ===== Main ===== */
/* **Die Sicherheitszonen gelten auch im breiten Layout.** Bis zum 14.08.2026
   wurden sie nur unter 760px berücksichtigt, also im Handy-Layout. Auf dem iPad
   im Vollbild (1024 Punkte, ohne Safari-Leiste) lief der Text deshalb unter die
   Uhr und das Batteriesymbol. Am Rechner sind die Werte 0, dort ändert die
   Rechnung nichts. */
main.content{flex:1;overflow-y:auto;
  padding:calc(var(--main-padding-y) + var(--sa-top))
          calc(var(--main-padding-x) + var(--sa-right))
          calc(80px + var(--sa-bottom))
          var(--main-padding-x);}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px;}
.ph h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-0.015em;line-height:1.1;margin:8px 0 0;}
.ph .desc{color:var(--color-text-muted);font-size:var(--fs-base);margin-top:8px;max-width:620px;}
.meta-line{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.1em;text-align:right;}
.ph-actions{display:flex;gap:8px;align-items:center;}
/* ===== Ampel =====
   Echte Ampel in Grün, Gelb und Rot, auf ausdrückliche Ansage vom 13.08.2026.
   Sie weicht bewusst von der CI ab, die Rot verbietet: Das gilt für Marke,
   Content und Kundendokumente. Hier geht es um ein internes Warnsignal, und
   eine Ampel ohne Rot ist keine Ampel.

   Zwei Formen: der Punkt in der Tabellenzeile und der große Block oben, der
   auf einen Blick sagt, wie die Lage ist. */
.ampel-punkt{
  display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;
  vertical-align:-1px;margin-right:7px;
}
.ampel-rot   {background:var(--color-err); box-shadow:0 0 7px rgba(177,74,58,.85);}
.ampel-gelb  {background:var(--color-warn-lampe);box-shadow:0 0 7px rgba(184,134,11,.75);}
.ampel-gruen {background:var(--color-ok);  box-shadow:0 0 6px rgba(122,138,78,.6);}
.ampel-grau  {background:#5a5a5e;}

/* Der große Block. Am Handy volle Breite, am Rechner nebeneinander. */
.ampel-tafel{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.ampel-feld{
  flex:1 1 150px;display:flex;align-items:center;gap:11px;
  background:var(--color-surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 15px;cursor:pointer;
  transition:border-color var(--transition-base),transform var(--transition-base);
}
.ampel-feld:hover{transform:translateY(-1px);}
.ampel-feld.rot  {border-color:var(--color-err);}
.ampel-feld.gelb {border-color:var(--color-warn);}
.ampel-feld.gruen{border-color:var(--color-ok);}
.ampel-feld .lampe{width:19px;height:19px;border-radius:50%;flex:none;}
.ampel-feld.rot   .lampe{background:var(--color-err); box-shadow:0 0 13px rgba(177,74,58,.9);}
.ampel-feld.gelb  .lampe{background:var(--color-warn-lampe);box-shadow:0 0 13px rgba(184,134,11,.8);}
.ampel-feld.gruen .lampe{background:var(--color-ok);  box-shadow:0 0 11px rgba(122,138,78,.7);}
.ampel-feld.grau  .lampe{background:#5a5a5e;}
.ampel-feld .zahl{font-size:var(--fs-xl);font-weight:600;line-height:1;}
/* Ein Hinweis ist ein Satz, kein Datum. Er darf umbrechen, aber die
   Kachel nicht sprengen: drei Zeilen, dann Schluss. Der volle Text
   bleibt im title, fuer den seltenen Fall, dass jemand mehr will. */
.ampel-feld .ampel-hinweis{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.35;
  white-space:normal;}
/* **Der Textblock der Kachel muss schrumpfen duerfen.** Das ist die Stelle,
   an der es zaehlt, und sie wurde zweimal am falschen Element gesucht: Ein
   Flex-Element behaelt von sich aus die Breite seines laengsten Wortes
   (min-width:auto) und schrumpft NICHT, egal was am Text drinsteht. Deshalb
   lief "MONATSABSCHLUSS" am 07.09.2026 aus der Kachel heraus, obwohl auf
   .wort seit langem ein overflow-wrap stand: Das Wort musste nie brechen,
   weil der Block um es herum einfach mitwuchs.
   Gilt fuer jede Ampelkachel, auch die im Post-Reiter. */
.ampel-feld > div{min-width:0;flex:1 1 auto;}
.ampel-feld .wort{font-size:var(--fs-sm);color:var(--color-text-muted);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;
  /* Zuerst sauber trennen (das Dokument traegt lang="de"), und erst wenn
     auch das nicht reicht, hart brechen. anywhere statt break-word, weil
     break-word bei einem einzelnen ueberlangen Wort in einem Flex-Element
     nicht zuverlaessig greift. */
  min-width:0;hyphens:auto;overflow-wrap:anywhere;}
/* Ein Feld mit 0 tritt zurück, statt zu verschwinden: Die Ampel soll immer
   dieselbe Form haben, sonst sucht man jedes Mal neu. */
.ampel-feld.leer{opacity:.42;}
/* ---- Geschäftlich gegen privat ---------------------------------------
   **Die Farbe gehört der Ampel, die Form dem Bereich.** Ein zweites
   Farbsystem hier hieße: Gold bedeutet an einer Stelle "wird knapp" und an der
   anderen "geschäftlich". Genau der Dialekt, gegen den die gemeinsame Ampel
   gebaut wurde.

   Deshalb trägt der Bereich ein Symbol und einen Rahmen, nie eine Füllung, und
   nie eine der vier Ampelfarben. Gold ist hier zulässig, weil es die Hausfarbe
   ist und nur als dünner Rahmen auftritt, nicht als leuchtender Punkt.
   -------------------------------------------------------------------- */
.ber-chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--fs-sm);line-height:1.5;
  border:1px solid var(--border);color:var(--color-text-muted);
}
.ber-chip i,.ber-chip svg{width:12px;height:12px;flex:none;}
.ber-chip.ber-g{border-color:var(--color-accent-ring);color:var(--color-accent);}
.ber-chip.ber-p{border-color:var(--border-strong);color:var(--color-text-muted);}
/* Ohne Bereich ist eine Wissenslücke, keine dritte Kategorie. Deshalb
   gestrichelt: Das liest sich als "noch offen", nicht als eigener Zustand. */
.ber-chip.ber-offen{border-style:dashed;border-color:var(--color-warn);
  color:var(--color-warn);}

/* Die ganze Karte trägt den Bereich mit, als schmaler Streifen links. Wer
   scrollt, sieht am Rand, in welchem Bereich er gerade ist. */
.card.ber-karte{border-left:3px solid var(--border);}
.card.ber-karte.ber-g{border-left-color:var(--color-accent);}
.card.ber-karte.ber-p{border-left-color:var(--border-strong);}
.card.ber-karte.ber-offen{border-left-color:var(--color-warn);
  border-left-style:dashed;}
/* **Eine Liste, die waechst, braucht ein Fenster, das nicht mitwaechst.**
   Bei 107 Dokumenten war die Tabelle laenger als der Bildschirm, und alles
   darunter lag hinter einer Scrollstrecke, die mit jedem Schwung Policen
   laenger wird. Sie scrollt jetzt in sich.

   Die Kopfzeile bleibt dabei stehen, sonst weiss nach zwanzig Zeilen niemand
   mehr, welche Spalte er liest. `top:-1px` statt `0`, weil sonst bei manchen
   Zoomstufen eine Haarlinie der ersten Zeile darueber durchscheint. */
.dok-liste{max-height:min(60vh,620px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.dok-liste .tbl-wrap{overflow-x:auto;}
/* Sortierbare Spaltenkoepfe. Die Sortierung selbst sitzt in components.js und
   wirkt in jeder Gestalt, also gehoert ihr Zeichen auch hierher und nicht nur
   in die zweite. Eine Spalte, die sich sortieren laesst und es nicht zeigt,
   wird nie angeklickt. */
th.sortierbar{cursor:pointer;user-select:none;}
th.sortierbar::after{content:"\2195";margin-left:6px;opacity:.35;font-size:11px;}
th.sortierbar[aria-sort="ascending"]::after{content:"\2191";opacity:1;color:var(--color-accent);}
th.sortierbar[aria-sort="descending"]::after{content:"\2193";opacity:1;color:var(--color-accent);}
th.sortierbar:hover{color:var(--color-text);}
.dok-liste table.tbl thead th{position:sticky;top:-1px;z-index:2;
  background:var(--color-surface);}

/* **Die Ampel darf nie wegscrollen.** Die Vertragstabelle ist breiter als ein
   iPad, und am 15.08.2026 stand im privaten Bereich keine einzige Ampel mehr
   im Bild: Die erste Spalte war seitlich herausgeschoben. Am Handy war sie
   schon festgesetzt, aber nur dort. Ein Signal, das man wegschieben kann, ist
   keins, deshalb gilt das hier in jeder Breite. */
.ber-karte table.tbl th:first-child,
.ber-karte table.tbl td:first-child{position:sticky;left:0;background:var(--color-surface);z-index:1;
  /* **Die erste Spalte braucht Platz, sie traegt den meisten Text.** Eine
     Tabelle verteilt Breite normalerweise von selbst, aber eine festgesetzte
     Spalte kann der Browser beliebig schmal quetschen. Am 15.08.2026 stand die
     Kranken-Zusatz deshalb als dreissig Zeilen Schmalband da: Jedes Wort ein
     Umbruch. Eine Untergrenze loest genau das, ohne die Automatik abzuschalten. */
  min-width:230px;max-width:340px;}
/* Und die Zeilen dichter: Die Bausteine einer Buendelpolice standen als eigener
   Absatz darunter und machten die Zeile viermal so hoch wie noetig. */
.ber-karte table.tbl td{padding-top:8px;padding-bottom:8px;vertical-align:top;}


@media (prefers-color-scheme:dark){
  .card.ber-karte.ber-p{border-left-color:#7A8894;}
  .ber-chip.ber-p{border-color:rgba(122,136,148,.5);}
}

/* Sechs Bereiche wollen ein festes Raster, kein freies Umbrechen. Mit `flex`
   allein rutschte das letzte Feld allein in eine zweite Reihe, und eine Ampel,
   deren Form sich mit der Fensterbreite ändert, muss man jedes Mal neu suchen.
   Zwei Reihen zu dritt sind sauber, eine Reihe zu sechst auch. Fünf und eins
   nicht. */
/* **Der Name sagt die Bauweise, nicht die Anzahl.** Er hiess bis zum
   24.08.2026 "sechs", und zwar mit sieben, dann acht Bereichen darin. Am
   14.08.2026 war die feste Sechser-Spalte durch "so viele Spalten, wie
   hineinpassen" ersetzt worden, der Name blieb aber stehen und log seitdem.
   Ein Name, der eine Zahl nennt, ist beim naechsten Bereich wieder falsch,
   deshalb steht dort jetzt, was die Regel tut: ein Raster statt der Reihe.
   Die Reihe (`.ampel-tafel` ohne Zusatz) gibt es weiter, sie steht in der
   Post-Ansicht. */
/* 158px ist gemessen, nicht geschätzt: So breit ist die längste Kachel
   ("Versicherungen") mit Lampe, Abstand und Rand. Darunter läuft das Wort aus
   der Kachel heraus. */
.ampel-tafel.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-bottom:18px;}
@media (max-width:640px){.ampel-tafel.raster{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Wie alt der älteste Fall ist. Kleiner und ohne Versalien, damit die Zeile
   den Bereichsnamen darüber nicht überstimmt. */
.ampel-feld .ampel-alter{text-transform:none;letter-spacing:0;opacity:.72;margin-top:2px;}
/* Nur Rot blinkt, und nur wenn dort etwas steht. Blinkt alles, blinkt nichts. */
.ampel-feld.rot:not(.leer) .lampe{animation:ampel-puls 1.6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .ampel-feld.rot .lampe{animation:none;}
  .ampel-feld:hover{transform:none;}
}
/* Am Handy: sechs Felder nebeneinander wären sechs Streifen. Zwei je Reihe,
   enger, und ohne die Alterszeile. Die Farbe und die Zahl tragen die Aussage,
   alles Weitere steht einen Fingertipp entfernt im Bereich selbst. */
@media (max-width:640px){
  .ampel-tafel{gap:7px;}
  .ampel-feld{flex:1 1 calc(50% - 7px);padding:10px 11px;gap:9px;}
  .ampel-feld .lampe{width:15px;height:15px;}
  .ampel-feld .ampel-alter{display:none;}
}

/* Der Brief als Link. Gold statt Info-Blau, damit er zur CI passt, mit
   Aktenzeichen-Symbol davor und Unterstreichung beim Darueberfahren. Ohne das
   sah er aus wie normaler Text und wurde nicht angeklickt. */
.brief-link{color:var(--color-accent);display:inline-flex;align-items:center;gap:6px;}
.brief-link:hover{text-decoration:underline;}
.brief-link svg{width:13px;height:13px;flex:none;opacity:.75;}

/* Blinkende Ampel in der Post. Nur fuer das, was wirklich brennt: abgelaufen
   oder heute faellig. Wuerde alles blinken, blinkt nichts.

   Bewusst langsam (1,6 s) und ohne harten Wechsel, sondern als Pulsieren der
   Deckkraft. Ein schnelles Blinken ist auf einer Seite, die man taeglich
   ansieht, nach zwei Minuten unertraeglich, und dann klickt man es weg statt
   es zu erledigen.

   Bleibt in Schwarz und Gold: kein neues Rot, wie es die CI verlangt. */
@keyframes ampel-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.42; }
}
.chip.blinkt {
  animation: ampel-puls 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 1px var(--color-warn);
}
/* Wer Bewegung abgestellt hat, bekommt keine. Der Rahmen bleibt, damit die
   Dringlichkeit auch dann sichtbar ist. */
@media (prefers-reduced-motion: reduce) {
  .chip.blinkt { animation: none; }
}

/* Zurueck-Taste im Seitenkopf. Sitzt ueber der Ueberschrift, damit sie beim
   Lesen zuerst kommt und nichts verschiebt. Am Handy laeuft das Cockpit als
   App ohne Browser-Zurueck, deshalb ist sie dort die einzige Rueckfahrkarte
   und bekommt eine groessere Trefferflaeche. */
.ph-back{margin-bottom:6px;padding:5px 10px;font-size:var(--fs-base);gap:5px;}
.ph-back svg{width:14px;height:14px;}
@media (max-width:768px){
  .ph-back{padding:9px 14px;font-size:var(--fs-md);}
  .ph-back svg{width:16px;height:16px;}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:500;border:1px solid var(--border-strong);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast);white-space:nowrap;}
.btn:hover{background:var(--color-surface-2);border-color:rgba(242,232,220,0.20);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
.btn svg{width:14px;height:14px;}
.btn-sm{padding:6px 10px;font-size:var(--fs-sm);}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-fg);font-weight:600;}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);}
.btn-ok{background:transparent;border-color:var(--color-ok);color:var(--color-ok);}
.btn-ok:hover{background:var(--color-ok-soft);}
.btn-danger{background:transparent;border-color:var(--color-err);color:var(--color-err);}
.btn-danger:hover{background:var(--color-err-soft);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted);}
.btn-ghost:hover{background:var(--color-sidebar-hover);color:var(--color-text);}

/* ===== Grid + Cards ===== */
.grid{display:grid;gap:var(--karten-abstand);}
/* Grid-Blowout verhindern: Kinder dürfen unter ihre min-content-Breite schrumpfen,
   sonst blähen Charts/Canvas/lange Strings die 1fr-Spur über den Viewport (Mobil-Überlauf). */
.grid>*{min-width:0;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
@media(max-width:1100px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr);}}
.span-2{grid-column:span 2;}
@media(max-width:760px){.span-2{grid-column:span 1;}}

.card{background:var(--color-surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.card.pad-sm{padding:14px 16px;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.card-title{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:9px;}
.card-title svg{width:16px;height:16px;color:var(--color-accent);}
.card-sub{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.1em;}

/* ===== KPI-Kachel ===== */
.kpi{background:var(--color-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;}
.kpi .k-label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.1em;display:flex;align-items:center;gap:7px;}
.kpi .k-label svg{width:13px;height:13px;}
.kpi .k-value{font-size:var(--fs-3xl);font-weight:600;line-height:1;letter-spacing:-0.02em;}
.kpi .k-value .unit{font-size:var(--fs-lg);color:var(--color-text-2);font-weight:500;margin-left:2px;}
.kpi .k-sub{font-size:var(--fs-sm);color:var(--color-text-muted);}
.kpi .k-trend{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:3px;}
.kpi .k-trend.up{color:var(--color-ok);} .kpi .k-trend.down{color:var(--color-err);} .kpi .k-trend.flat{color:var(--color-text-muted);}
.kpi.accent::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--color-accent);}

/* Anklickbare Kachel. Zurueckhaltend: Der Rand nimmt Gold an und die Kachel
   hebt sich einen Hauch. Kein Schlagschatten und keine Faerbung der Flaeche,
   sonst konkurrieren vier Kacheln um dieselbe Aufmerksamkeit und keine gewinnt.
   Der Pfeil erscheint erst beim Darueberfahren, am Handy also nie, dort
   verraet ohnehin die Fingerkuppe, dass etwas passiert. */
.kpi-link{transition:border-color var(--transition-base),transform var(--transition-base);}
.kpi-link:hover{border-color:var(--color-accent);transform:translateY(-1px);}
.kpi-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.kpi-link .k-label::after{content:'->';margin-left:auto;opacity:0;transition:opacity var(--transition-base);color:var(--color-accent);}
.kpi-link:hover .k-label::after{opacity:1;}
/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){.kpi-link,.kpi-link:hover{transition:none;transform:none;}}

/* ===== Meter / Fortschritt ===== */
.meter{height:7px;border-radius:var(--radius-pill);background:rgba(242,232,220,0.07);overflow:hidden;margin-top:4px;}
.meter > span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-accent);transition:width var(--transition-base);}
.meter.ok > span{background:var(--color-ok);} .meter.warn > span{background:var(--color-warn);} .meter.err > span{background:var(--color-err);}

/* ===== Stat-Zeilen ===== */
/* Beschriftung und Wert dürfen schrumpfen und umbrechen, sonst schiebt eine
   lange Beschriftung im Sales-Reiter die Zeile auf dem Handy aus der Karte. */
.statrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--fs-base);min-width:0;}
.statrow>*{min-width:0;overflow-wrap:anywhere;}
.statrow:last-child{border-bottom:0;}
.statrow .s-label{color:var(--color-text-2);display:flex;align-items:center;gap:8px;}
.statrow .s-val{font-family:var(--font-mono);font-weight:600;}
.statrow .s-val.dim{color:var(--color-text-muted);font-weight:400;}

/* ===== Ampel-Punkt ===== */
.light{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;}
.light.ok{background:var(--color-ok);box-shadow:0 0 7px var(--color-ok);}
.light.warn{background:var(--color-warn);box-shadow:0 0 7px var(--color-warn);}
.light.err{background:var(--color-err);box-shadow:0 0 7px var(--color-err);}
.light.off{background:var(--color-text-muted);}

/* ===== Chips ===== */
/* Ein Etikett bleibt einzeilig. Bricht es um, ist die Kapselform keine Pille
   mehr, sondern ein Ei: Der Radius von 999 Punkten rundet dann die ganze Höhe.
   Genau daran fiel am 16.08.2026 die Fristspalte auf, wo "seit 195 Tagen
   vorbei" über drei Zeilen lief. Wer hier längeren Text braucht, nimmt kein
   Etikett, sondern normale Schrift. */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;}
.chip.ok{background:var(--color-ok-soft);color:var(--color-ok);}
/* Ein Beleg, den man anklicken kann. Er muss als Link erkennbar sein, ohne
   die Zeile unruhig zu machen: Deshalb nur der Zeiger und ein Hauch mehr
   Deckkraft beim Darueberfahren, keine Unterstreichung. */
.chip.beleg-link{cursor:pointer;text-decoration:none;border:0;font:inherit;-webkit-appearance:none;appearance:none;
  font-size:var(--fs-xs);font-weight:600;font-family:var(--font-mono);
  text-transform:uppercase;letter-spacing:0.05em;
  transition:filter .12s ease,transform .12s ease;}
.chip.beleg-link:hover{filter:brightness(1.15);transform:translateY(-1px);}
.chip.beleg-link:focus-visible{outline:2px solid var(--color-ok);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.chip.beleg-link{transition:none;}
  .chip.beleg-link:hover{transform:none;}}
.chip.warn{background:var(--color-warn-soft);color:var(--color-warn);}
.chip.err{background:var(--color-err-soft);color:var(--color-err);}
.chip.info{background:var(--color-info-soft);color:var(--color-info);}
.chip.muted{background:rgba(242,232,220,0.06);color:var(--color-text-muted);}
.chip.proj,.chip.accent{background:var(--color-accent-soft);color:var(--color-accent);}
.txt-err{color:var(--color-err);font-weight:600;} .txt-ok{color:var(--color-ok);} .txt-warn{color:var(--color-warn);}

/* ===== Bar-Chart (simpel, CSS) ===== */
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:8px;}
.bars .bar{flex:1;background:var(--color-accent-soft);border-radius:var(--radius-xs) var(--radius-xs) 0 0;position:relative;min-height:2px;transition:height var(--transition-base);}
.bars .bar > span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}
.bars .bar.hi{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-deep));}
.bars-x{display:flex;gap:6px;margin-top:6px;}
.bars-x span{flex:1;text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}

/* ===== Sparkline-Reihe (Balken horizontale Kategorien) ===== */
.catbar{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.catbar .row{display:grid;grid-template-columns:120px 1fr 56px;gap:10px;align-items:center;font-size:var(--fs-base);}
.catbar .row .nm{color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catbar .row .tr{height:7px;border-radius:var(--radius-pill);background:rgba(242,232,220,0.06);overflow:hidden;}
.catbar .row .tr > span{display:block;height:100%;background:var(--color-accent);border-radius:var(--radius-pill);}
.catbar .row .vv{font-family:var(--font-mono);font-size:var(--fs-sm);text-align:right;color:var(--color-text-2);}

/* ===== Tabelle ===== */
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base);}
table.tbl th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border-strong);}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--color-text-2);}
table.tbl tr:last-child td{border-bottom:0;}
table.tbl td.r,table.tbl th.r{text-align:right;font-family:var(--font-mono);}

/* ===== Vorschlaege (Brain) ===== */
.sugg{display:flex;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--color-surface);margin-bottom:10px;transition:border-color var(--transition-fast);}
.sugg:hover{border-color:var(--border-strong);}
.sugg .s-ico{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0;background:var(--color-accent-soft);color:var(--color-accent);}
.sugg .s-ico svg{width:16px;height:16px;}
.sugg.prio-hoch .s-ico{background:var(--color-err-soft);color:var(--color-err);}
.sugg.prio-mittel .s-ico{background:var(--color-warn-soft);color:var(--color-warn);}
.sugg.prio-niedrig .s-ico{background:var(--color-info-soft);color:var(--color-info);}
.sugg .s-body{flex:1;min-width:0;}
.sugg .s-title{font-weight:600;font-size:var(--fs-base);margin-bottom:3px;overflow-wrap:anywhere;}
.sugg .s-why{font-size:var(--fs-base);color:var(--color-text-muted);line-height:1.45;overflow-wrap:anywhere;}
/* Rückfragen mit antippbaren Optionen */
.sugg .am-q{margin:9px 0 4px;}
.sugg .am-q-text{font-size:var(--fs-base);font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
.sugg .am-q-opts{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.sugg .am-opt{white-space:normal;text-align:left;height:auto;min-height:34px;line-height:1.35;padding:7px 11px;overflow-wrap:anywhere;justify-content:flex-start;}
.sugg .am-answer{align-items:stretch;}
.sugg .am-title-txt{border-bottom:1px dashed transparent;}
.sugg .am-title-txt:hover{border-bottom-color:var(--border-strong);}
/* Eisenhower-Chips auf der Karte */
.sugg .am-eh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px;}
.am-eh-chip{font-size:var(--fs-sm);padding:2px 9px;border-radius:var(--radius-pill);border:1px solid var(--border);background:transparent;color:var(--color-text-muted);cursor:pointer;line-height:1.6;}
.am-eh-chip.on{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent);font-weight:600;}
.am-eh-q{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;padding:1px 7px;border-radius:var(--radius-pill);}
.am-eh-q.q-do{background:var(--color-err-soft);color:var(--color-err);}
.am-eh-q.q-plan{background:var(--color-accent-soft);color:var(--color-accent);}
.am-eh-q.q-delegate{background:var(--color-warn-soft);color:var(--color-warn);}
.am-eh-q.q-delete{background:rgba(120,120,120,.12);color:var(--color-text-muted);}
.am-deleg-lbl{font-size:var(--fs-sm);color:var(--color-text-muted);align-self:center;margin-right:2px;}
/* Ansicht-Umschalter + Eisenhower-Matrix */
.am-seg{display:flex;gap:4px;}
.am-matrix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.am-quad{border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px;background:var(--color-surface);}
.am-quad-head{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;}
.am-quad-head>span:first-child{font-weight:700;font-size:var(--fs-base);display:flex;align-items:center;gap:6px;}
.am-quad-head .am-quad-sub{font-size:var(--fs-sm);color:var(--color-text-muted);}
.am-quad.q-do{border-top:3px solid var(--color-err);}
.am-quad.q-plan{border-top:3px solid var(--color-accent);}
.am-quad.q-delegate{border-top:3px solid var(--color-warn);}
.am-quad.q-delete{border-top:3px solid var(--border-strong);}
.am-quad-body .sugg{background:var(--color-surface-2,rgba(0,0,0,.02));}
@media(max-width:760px){.am-matrix{grid-template-columns:1fr;}}
/* Gerendertes Markdown (globale Komponente: Deliverable-Vorschau u.a.)
   Kein eigener Scroll-Container - der umgebende Modal-Body scrollt (sonst zwei Scrollbalken). */
.md-content{overflow-wrap:anywhere;word-break:break-word;line-height:1.55;font-size:var(--fs-md);color:var(--color-text);}
.md-content>:first-child{margin-top:0;}
.md-content h1,.md-content h2,.md-content h3,.md-content h4{margin:15px 0 6px;line-height:1.25;font-weight:700;}
.md-content h1{font-size:var(--fs-lg);} .md-content h2{font-size:16.5px;} .md-content h3{font-size:var(--fs-md);} .md-content h4{font-size:var(--fs-base);}
.md-content p{margin:8px 0;}
.md-content ul,.md-content ol{margin:8px 0;padding-left:22px;}
.md-content li{margin:4px 0;}
.md-content a{color:var(--color-accent);text-decoration:underline;overflow-wrap:anywhere;}
.md-content strong{font-weight:700;}
.md-content code{background:var(--color-surface-2,rgba(0,0,0,.06));padding:1px 5px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--fs-base);}
.md-content pre{background:var(--color-surface-2,rgba(0,0,0,.06));padding:10px 12px;border-radius:var(--radius-md);overflow-x:auto;margin:8px 0;}
.md-content pre code{background:none;padding:0;}
.md-content hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
.md-content blockquote{border-left:3px solid var(--color-accent);margin:8px 0;padding:2px 0 2px 12px;color:var(--color-text-muted);}
.md-content table{border-collapse:collapse;margin:8px 0;display:block;overflow-x:auto;max-width:100%;}
.md-content th,.md-content td{border:1px solid var(--border);padding:5px 9px;text-align:left;}
.md-content th{background:var(--color-surface-2,rgba(0,0,0,.04));font-weight:600;}
.sugg .s-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--color-text-muted);margin-bottom:2px;}
.sugg .s-plan{margin-top:10px;border:1px solid var(--border);border-left:2px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent-soft);padding:7px 11px 8px;}
.sugg .s-plan-head{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--color-accent);margin-bottom:1px;}
.sugg .s-plan-head svg{width:11px;height:11px;}
.sugg .s-plan .s-why{margin-top:3px;}
.sugg .s-plan .s-why + .s-why{margin-top:5px;}
.sugg .am-live{color:var(--color-text);font-weight:600;}
.sugg .am-live-since{color:var(--color-text-muted);font-weight:400;}
.sugg .s-plan.reloading{border-left-color:var(--color-warn);background:var(--color-warn-soft);}
.sugg .s-plan.reloading .s-plan-head{color:var(--color-warn);}
.sugg .s-wait{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:3px;line-height:1.4;}
.sugg.is-busy{opacity:0.92;}
.sugg .s-err-note{font-size:var(--fs-sm);color:var(--color-err);background:var(--color-err-soft);border-radius:var(--radius-sm);padding:5px 9px;margin-top:9px;line-height:1.4;}
.sugg .s-steps{margin:6px 0 2px 18px;padding:0;font-size:var(--fs-base);line-height:1.5;}
.sugg .s-plan .s-steps{margin:3px 0 0 16px;}
.sugg .s-steps li{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere;}
.s-steps .step-act{font-weight:600;color:var(--color-text);}
.s-steps .step-det{color:var(--color-text-muted);font-size:var(--fs-sm);}
.s-steps .step-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text-muted);margin-top:3px;}
.sugg .s-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;}
.sugg .s-tag{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--color-text-muted);background:rgba(242,232,220,0.06);padding:1px 6px;border-radius:var(--radius-pill);vertical-align:middle;margin-left:5px;}
/* ===== Identität ===== */
.id-gate{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius-lg);background:var(--color-accent-soft);border:1px solid var(--color-accent);margin-bottom:16px;}
.id-gate .idg-l{display:flex;gap:12px;align-items:center;}
.id-gate .idg-l > svg{width:22px;height:22px;color:var(--color-accent);flex-shrink:0;}
.id-gate .idg-t{font-weight:700;font-size:var(--fs-md);color:var(--color-accent);}
.id-gate .idg-s{font-size:var(--fs-base);color:var(--color-text-muted);margin-top:2px;}
.id-gate .idg-r{display:flex;gap:8px;flex-shrink:0;}
@media(max-width:760px){.id-gate{flex-direction:column;align-items:stretch;gap:10px;}.id-gate .idg-r{display:flex;gap:8px;}.id-gate .idg-r .btn{flex:1;justify-content:center;}}
.id-gate-mini{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--color-ok-soft);color:var(--color-ok);font-size:var(--fs-sm);font-weight:600;font-family:var(--font-mono);margin-bottom:16px;cursor:pointer;}
.id-gate-mini svg{width:15px;height:15px;}
.identity-gate{padding:16px 18px;border-radius:var(--radius-lg);border:1px solid var(--color-accent);background:var(--color-accent-soft);}
.identity-gate.done{border-color:var(--color-ok);background:var(--color-ok-soft);}
.identity-gate .ig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.identity-gate .ig-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--fs-md);}
.identity-gate .ig-title svg{width:19px;height:19px;color:var(--color-accent);}
.identity-gate.done .ig-title svg{color:var(--color-ok);}
.identity-gate .ig-streak{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-muted);}
.identity-gate .ig-steps{margin:10px 0 0;padding-left:20px;font-size:var(--fs-base);line-height:1.75;}
.identity-gate .ig-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.identity-decl p{font-size:var(--fs-md);line-height:1.65;margin:0 0 12px;}
.identity-decl p:last-child{margin-bottom:0;font-weight:600;color:var(--color-accent);}
.identity-block{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:var(--color-surface);}
.identity-block .ib-h{font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-accent);margin-bottom:6px;}
.identity-block ul,.identity-list{margin:0;padding-left:18px;font-size:var(--fs-base);line-height:1.7;}

/* ===== Content / LinkedIn-Automatik ===== */
.li-status{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--color-surface);flex-wrap:wrap;}
.li-status .lis-l{display:flex;gap:11px;align-items:center;}
.li-status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(122,138,78,0.12);}
.li-status .dot.ok{background:var(--color-ok);}
.li-status .lis-t{font-weight:600;font-size:var(--fs-base);}
.li-status .lis-s{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:2px;}
.li-status .lis-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ok-text{color:var(--color-ok);font-size:var(--fs-base);font-weight:600;}
.week-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px;}
@media(max-width:760px){.week-strip{grid-template-columns:1fr 1fr;}}
.wk-day{border:1px solid var(--border);border-radius:var(--radius-md);padding:8px;min-height:74px;background:var(--color-bg);}
.wk-day.today{border-color:var(--color-accent);}
.wk-dn{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;}
.wk-empty{color:var(--color-text-muted);font-size:var(--fs-sm);text-align:center;padding-top:6px;opacity:0.5;}
.wk-chip{font-size:var(--fs-xs);font-weight:600;padding:3px 6px;border-radius:var(--radius-sm);margin-bottom:4px;cursor:pointer;line-height:1.25;}
.wk-chip.accent{background:var(--color-accent-soft);color:var(--color-accent);}
.wk-chip.ok{background:var(--color-ok-soft);color:var(--color-ok);}
.wk-chip.info{background:var(--color-info-soft);color:var(--color-info);}
.wk-chip.warn{background:var(--color-warn-soft);color:var(--color-warn);}
.wk-chip.err{background:var(--color-err-soft);color:var(--color-err);}
.wk-chip.muted{background:rgba(242,232,220,0.06);color:var(--color-text-muted);}
.drill-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.drill-row:last-child{border-bottom:0;}
.drill-row .dr-label{flex:1;min-width:0;font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drill-row .dr-kind{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;color:var(--color-text-muted);background:rgba(242,232,220,0.06);padding:1px 5px;border-radius:var(--radius-xs);margin-right:7px;}
.drill-row .dr-val{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-2);width:64px;text-align:right;flex-shrink:0;}
.drill-row .dr-sel{flex-shrink:0;background:var(--color-bg);color:var(--color-text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:4px 8px;font-size:var(--fs-sm);cursor:pointer;}

/* ===== Freigabe-Karten ===== */
.appr{border:1px solid var(--border);border-radius:var(--radius);background:var(--color-surface);overflow:hidden;margin-bottom:16px;}
.appr-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);}
.appr-head .a-type{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-accent);}
.appr-head .a-meta{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}
.appr-body{padding:16px;}
.appr-text{font-size:var(--fs-base);line-height:1.6;white-space:pre-wrap;color:var(--color-text);max-height:340px;overflow-y:auto;}
.appr-text.edit{white-space:normal;}
.appr-edit{width:100%;min-height:220px;background:var(--color-bg);border:1px solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-text);padding:12px;font-family:inherit;font-size:var(--fs-base);line-height:1.6;resize:vertical;}
.appr-img{max-width:160px;border-radius:var(--radius-md);border:1px solid var(--border);margin-top:12px;}
.appr-foot{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;}
.appr-foot .spacer{flex:1;}

/* ===== Tabs ===== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:9px 14px;font-size:var(--fs-base);color:var(--color-text-muted);cursor:pointer;border:0;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--transition-fast);}
.tab:hover{color:var(--color-text);}
.tab.active{color:var(--color-text);border-bottom-color:var(--color-accent);font-weight:600;}
.tab .count{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-accent);margin-left:5px;}

/* ===== Inline-Add-Bar (Aufgaben) ===== */
.addbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px;}
.addbar input[type=text]{flex:1;min-width:220px;background:var(--color-bg);border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--color-text);padding:9px 12px;font-family:inherit;font-size:var(--fs-base);}
.addbar input[type=text]:focus{outline:none;border-color:var(--color-accent);}
.addbar select{background:var(--color-bg);border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--color-text);padding:9px 10px;font-family:var(--font-mono);font-size:var(--fs-sm);cursor:pointer;}

/* ===== Task-Zeile (Aufgaben-View) ===== */
.task{display:flex;align-items:flex-start;gap:12px;padding:11px 8px;border-bottom:1px solid var(--border);margin:0 -8px;border-radius:var(--radius-sm);transition:background var(--transition-fast),opacity var(--transition-base);}
.task:hover{background:rgba(242,232,220,0.02);}
.task:last-child{border-bottom:0;}
.task.done{opacity:0.4;}
.task.done .t-text{text-decoration:line-through;}
.check{width:18px;height:18px;border:1.6px solid var(--border-strong);border-radius:var(--radius-sm);flex-shrink:0;margin-top:2px;cursor:pointer;background:transparent;display:grid;place-items:center;transition:all var(--transition-fast);padding:0;}
.check:hover{border-color:var(--color-accent);background:var(--color-accent-soft);}
.check svg{width:12px;height:12px;color:var(--color-accent);opacity:0;}
.check:hover svg{opacity:0.7;}
.task.urgent .check{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft);}
.t-main{flex:1;min-width:0;}
.t-text{font-size:var(--fs-base);line-height:1.45;cursor:text;}
.t-edit{width:100%;background:var(--color-bg);border:1px solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);padding:6px 8px;font-family:inherit;font-size:var(--fs-base);}
.t-edit:focus{outline:none;}
.t-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;}

/* ===== Gruppen-Header ===== */
.grp{margin-bottom:22px;}
.grp-head{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;}

/* ===== Empty / Skeleton ===== */
.empty{color:var(--color-text-muted);font-size:var(--fs-base);font-style:italic;padding:14px 4px;}
.skeleton{background:linear-gradient(90deg,rgba(242,232,220,0.04),rgba(242,232,220,0.09),rgba(242,232,220,0.04));background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--radius-md);}
@keyframes shimmer{to{background-position:-200% 0;}}
.sk-line{height:13px;margin:8px 0;}

/* ===== Datenfrische-Streifen ===== */
.fresh{display:flex;gap:8px;flex-wrap:wrap;}
.fresh .f-item{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--fs-sm);background:var(--color-surface);}
.fresh .f-item .nm{color:var(--color-text-2);}
.fresh .f-item .ag{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}

/* ===== Toast ===== */
.toast-c{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{background:var(--color-surface);border:1px solid var(--border-strong);border-left:3px solid var(--color-accent);border-radius:var(--radius-lg);padding:11px 15px;min-width:240px;max-width:380px;box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:10px;animation:toastIn 240ms cubic-bezier(.2,.7,.3,1);pointer-events:auto;}
.toast.success{border-left-color:var(--color-ok);}
.toast.warn{border-left-color:var(--color-warn);}
.toast.error{border-left-color:var(--color-err);}
.toast.removing{animation:toastOut 200ms forwards;}
@keyframes toastIn{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes toastOut{to{transform:translateX(40px);opacity:0;}}
.toast .t-ico svg{width:16px;height:16px;}
.toast.success .t-ico{color:var(--color-ok);}
.toast.warn .t-ico{color:var(--color-warn);}
.toast.error .t-ico{color:var(--color-err);}
.toast .tt{font-size:var(--fs-base);line-height:1.4;}
.toast .ts{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:2px;font-family:var(--font-mono);}

/* ===== Modal ===== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:250;display:grid;place-items:center;padding:24px;animation:fadeIn 160ms;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--color-surface);border:1px solid var(--border-strong);border-radius:var(--radius);max-width:540px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden;}
.modal.modal-wide{max-width:860px;}
.modal.modal-wide .modal-body{max-height:74vh;}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;font-size:var(--fs-lg);display:flex;align-items:center;gap:10px;}
/* Der Weg zurueck, in jedem Fenster an derselben Stelle: oben rechts.
   Gross genug fuer den Daumen (44 Punkte sind das Mindestmass fuer eine
   Tippflaeche), damit er am Handy nicht zum Geduldsspiel wird. */
.modal-zu{margin-left:auto;flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);}
.modal-zu:hover{background:var(--color-surface-2);color:var(--color-text);}
.modal-zu svg{width:19px;height:19px;}
@media (max-width:760px){.modal-zu{width:44px;height:44px;}.modal-zu svg{width:22px;height:22px;}}
.modal-body{padding:20px;font-size:var(--fs-base);line-height:1.6;color:var(--color-text-2);max-height:60vh;overflow-y:auto;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;}

/* ===== Charts (Chart.js) ===== */
.chart-box{position:relative;height:260px;width:100%;margin-top:4px;}
.chart-box.sm{height:200px;}
.chart-box.lg{height:300px;}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-sm);color:var(--color-text-2);}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;}
.chart-legend .sw{width:10px;height:10px;border-radius:var(--radius-xs);display:inline-block;}
.chart-empty{height:100%;display:grid;place-items:center;color:var(--color-text-muted);font-size:var(--fs-base);font-style:italic;}

/* Gauge mit Center-Label */
.gauge-wrap{position:relative;height:180px;}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.gauge-center .gv{font-size:30px;font-weight:600;letter-spacing:-0.02em;line-height:1;}
.gauge-center .gl{font-size:var(--fs-sm);color:var(--color-text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.1em;margin-top:5px;}

/* Offene-Chats-Karte */
.chat-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.chat-item:last-child{border-bottom:0;}
.chat-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;background:var(--color-accent-soft);color:var(--color-accent);}
.chat-ava.personal{background:rgba(111,168,196,0.14);color:var(--color-info);}
.chat-main{flex:1;min-width:0;}
.chat-top{display:flex;align-items:center;gap:8px;}
.chat-name{font-weight:600;font-size:var(--fs-base);}
.chat-msg{font-size:var(--fs-base);color:var(--color-text-2);margin-top:3px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.chat-age{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap;}

/* Vergleichs-Delta */
.delta{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;}
.delta.up{color:var(--color-ok);} .delta.down{color:var(--color-err);} .delta.flat{color:var(--color-text-muted);}

/* ===== Content: Bild-Library ===== */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.lib-tile{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);cursor:pointer;transition:border-color var(--transition-fast);}
.lib-del{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--radius-md);border:0;background:rgba(10,8,5,0.66);color:var(--color-text);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--transition-fast);}
.lib-tile:hover .lib-del{opacity:1;}
.lib-del:hover{background:var(--color-err);color:#fff;}
.lib-del i{width:15px;height:15px;}
.lib-tile:hover{border-color:var(--color-accent);}
.lib-tile.sel{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-ring);}
.lib-tile img{width:100%;height:120px;object-fit:cover;display:block;background:var(--color-surface-2);}
.lib-tile .meta{padding:8px 10px;}
.lib-tile .desc{font-size:var(--fs-sm);color:var(--color-text-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lib-tile .tagrow{margin-top:6px;display:flex;gap:4px;flex-wrap:wrap;}
.lib-tile.used{opacity:0.5;}
.lib-tile .ori{position:absolute;}

/* ===== Content: Kalender ===== */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-h{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.08em;text-align:center;padding:4px 0;}
.cal-day{min-height:78px;border:1px solid var(--border);border-radius:var(--radius-md);padding:5px 6px;background:var(--color-surface);display:flex;flex-direction:column;gap:3px;}
.cal-day.out{opacity:0.3;}
.cal-day.today{border-color:var(--color-accent);box-shadow:var(--shadow-accent);}
.cal-day .dn{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}
.cal-chip{font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--radius-sm);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--color-accent);background:var(--color-accent-soft);color:var(--color-text);}
.cal-chip.ok{border-left-color:var(--color-ok);background:var(--color-ok-soft);}
.cal-chip.muted{border-left-color:var(--color-text-muted);background:rgba(242,232,220,0.06);}
.cal-chip.warn{border-left-color:var(--color-warn);background:var(--color-warn-soft);}

/* ===== Content: Post-Bild im Approval ===== */
.appr-body .post-flow{display:flex;gap:14px;}
.appr-body .post-flow .appr-text{flex:1;}
.post-thumb{width:172px;flex-shrink:0;}
.post-thumb>img{width:172px;height:215px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--border);display:block;cursor:pointer;}
.post-thumb .noimg{width:172px;height:215px;border:1px dashed var(--border-strong);border-radius:var(--radius-md);display:grid;place-items:center;color:var(--color-text-muted);font-size:var(--fs-sm);text-align:center;}
.noimg-box{width:172px;min-height:215px;border:1px dashed var(--border-strong);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;box-sizing:border-box;text-align:center;}
.noimg-box .idea{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:1.4;}
/* Bild-Vorschläge (3 Varianten) */
.cand-label{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:8px;}
.img-ai{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.img-ai .btn{width:100%;justify-content:flex-start;}
.cand-strip{display:flex;gap:6px;margin-top:6px;align-items:center;}
.cand{position:relative;width:48px;height:60px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;opacity:.78;transition:opacity .12s;}
.cand:hover{opacity:1;}
.cand.sel{border-color:var(--color-accent);opacity:1;}
.cand img{width:100%;height:100%;object-fit:cover;display:block;}
.cand .cand-badge{position:absolute;top:1px;right:2px;font-size:var(--fs-sm);color:#f7ecd8;text-shadow:0 1px 2px rgba(0,0,0,.7);}
.cand-new{width:34px;height:60px;flex-shrink:0;border:1px dashed var(--border-strong);background:transparent;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;display:grid;place-items:center;}
.cand-new:hover{color:var(--color-text);}
.cand-new i{width:15px;height:15px;}
/* Lade-Spinner (Lucide loader dreht sich) */
@keyframes ceo-spin{to{transform:rotate(360deg);}}
.spin{display:grid;place-items:center;margin-bottom:6px;}
/* Lucide ersetzt <i data-lucide> beim Rendern durch <svg class="lucide lucide-<name>">,
   darum muss die Dreh-Animation das gerenderte <svg> treffen (über die stabile lucide-Klasse),
   sonst steht das Icon still. */
.spin i,.spin svg,
button .lucide-loader,button .lucide-loader-circle,
.s-plan.reloading .s-plan-head i,.s-plan.reloading .s-plan-head svg{animation:ceo-spin .9s linear infinite;transform-origin:center;}
.quote-post{border-left:2px solid var(--border-strong);padding:8px 12px;margin-bottom:12px;color:var(--color-text-muted);font-size:var(--fs-base);white-space:pre-wrap;max-height:160px;overflow-y:auto;background:rgba(242,232,220,0.02);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}

/* ===== Geteilte Bausteine (components.js) ===== */
.form-stack{display:flex;flex-direction:column;gap:10px;}
.appr-edit.field{min-height:auto;height:38px;}
.row-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px;}
.row-actions .spacer{flex:1;}
.inline-quote{border-left:2px solid var(--border-strong);padding-left:10px;margin-bottom:12px;color:var(--color-text-muted);font-size:var(--fs-base);white-space:pre-wrap;max-height:120px;overflow:hidden;}
.compose-box{flex-basis:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.compose-bar{display:flex;gap:8px;}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.head-split{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}

/* ===== Styleguide (Schauraum, #styleguide) ===== */
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:4px;}
.sg-swatch{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface);}
.sg-swatch .chip-color{height:46px;}
.sg-swatch .sg-meta{padding:7px 9px;}
.sg-swatch .sg-name{font-size:var(--fs-sm);color:var(--color-text-2);}
.sg-swatch .sg-var{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}
.sg-demo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px;}

/* ===== Section-Block ===== */
.section{margin-bottom:30px;}
.section > h3{font-size:var(--fs-lg);font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:9px;}
.section > h3 svg{width:18px;height:18px;color:var(--color-accent);}

/* ===== Jarvis (Sprach-Tab) - Orb/Status/Mitschrift im Marken-Look ===== */
.jv-card{display:flex;flex-direction:column;align-items:center;padding:22px 20px 18px;position:relative;}
.jv-conn{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--color-text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;}
.jv-led{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted);transition:background .3s;}
.jv-card[data-status="offline"][data-svc="up"] .jv-led{background:var(--color-ok);opacity:.5;}
.jv-card[data-status="connecting"] .jv-led{background:var(--color-warn);animation:blink 1s infinite;}
.jv-card[data-status="idle"] .jv-led,.jv-card[data-status="listening"] .jv-led,.jv-card[data-status="speaking"] .jv-led,.jv-card[data-status="thinking"] .jv-led{background:var(--color-ok);}
@keyframes blink{50%{opacity:.3;}}
.jv-stage{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;cursor:pointer;}
/* ===== Jarvis-HUD =====
   Die Ringe um den Kern. Form nach dem Rainmeter-Vorbild, Farbe nach der CI:
   Schwarz und Gold, kein Cyan.

   Drei Gruppen drehen unterschiedlich schnell und gegenläufig. Gleiche
   Geschwindigkeit in dieselbe Richtung sähe aus wie ein Ladekringel. Alles
   sehr langsam, zwischen 26 und 90 Sekunden je Umdrehung: Das soll neben dem
   Sprechen mitlaufen, nicht davon ablenken. */
.jv-hud{position:absolute;width:320px;height:320px;pointer-events:none;
  opacity:.62;transition:opacity .5s;}
/* Leuchtendes Gold statt matt. Eigene Toene nur fuers HUD, damit die uebrigen
   Kacheln des Cockpits ruhig bleiben. Das Glimmen kommt aus einem SVG-Filter
   und nicht aus box-shadow: Ein Schatten legt sich um das Rechteck des
   Elements, ein Filter um die Linie selbst. */
/* ---- Die Farben des Jarvis-Kreises (23.08.2026) ---------------------------
   Sie standen fest im Blech: ein Goldverlauf (#F2C14E) und rote Knöpfe. In
   der SQUADRAI-Gestalt ist alles drumherum Ultramarin, und der Kreis stach
   heraus wie ein Fremdkörper. Jetzt kommen sie aus dem Akzent der jeweiligen
   Gestalt, also Ultramarin bei SQUADRAI und Kupfer im Bestand.

   **Zwei Zeilen je Wert, und das ist Absicht:** zuerst ein fester Rückfall,
   darunter die gemischte Fassung. Kann ein Browser `color-mix` nicht, liest
   er die zweite Zeile nicht und behält die erste. Ohne den Rückfall wäre der
   Kreis dort unsichtbar statt nur schlichter. */
:root{
  --jv-kern:#FFFFFF;
  --jv-kern:color-mix(in srgb,var(--color-accent) 22%,#fff);
  --jv-mitte:var(--color-accent);
  --jv-rand:var(--color-accent-deep);
  --jv-tief:#101010;
  --jv-tief:color-mix(in srgb,var(--color-accent-deep) 40%,#000);
  --jv-schein:var(--color-accent-ring);
  /* Der Schein um Ring und Kern, in drei Stufen. Wieder mit Rückfall: ohne
     `color-mix` bleibt ein blasses Weiß, und der Kreis sieht schlichter aus,
     statt zu verschwinden. */
  --jv-glanz-stark:rgba(255,255,255,.55);
  --jv-glanz-stark:color-mix(in srgb,var(--color-accent) 85%,transparent);
  --jv-glanz:rgba(255,255,255,.35);
  --jv-glanz:color-mix(in srgb,var(--color-accent) 60%,transparent);
  --jv-glanz-leise:rgba(255,255,255,.14);
  --jv-glanz-leise:color-mix(in srgb,var(--color-accent) 24%,transparent);
}
.jv-hud{--hud:var(--color-accent);--hud-hell:var(--jv-kern);}
.jv-hud circle,.jv-hud path{fill:none;stroke:var(--hud);}
.hud-ring{stroke-width:.7;opacity:.55;}
.hud-ring-fein{stroke-width:.6;opacity:.4;stroke-dasharray:2 6;}
.hud-arc{stroke-width:2;opacity:1;stroke-linecap:butt;stroke:var(--hud-hell);
  filter:drop-shadow(0 0 3px var(--jv-glanz-stark));}
.hud-tick{stroke-width:.9;opacity:.55;}
.hud-tick-stark{stroke-width:1.6;opacity:.9;
  filter:drop-shadow(0 0 2px var(--jv-glanz));}

@keyframes hud-dreh{to{transform:rotate(360deg);}}
@keyframes hud-dreh-rueck{to{transform:rotate(-360deg);}}
.jv-hud g{transform-origin:160px 160px;}
.hud-dreh-langsam{animation:hud-dreh 90s linear infinite;}
.hud-dreh-rueck  {animation:hud-dreh-rueck 54s linear infinite;}
.hud-dreh-schnell{animation:hud-dreh 26s linear infinite;}

/* Im Gespräch tritt das HUD hervor und läuft schneller. Es zeigt damit einen
   Zustand an, statt nur Zierde zu sein: Man sieht von der Seite, ob er hört. */
.jv-card[data-status="listening"] .jv-hud,
.jv-card[data-status="speaking"] .jv-hud,
.jv-card[data-status="thinking"] .jv-hud{opacity:.72;}
.jv-card[data-status="speaking"] .hud-dreh-schnell{animation-duration:9s;}
.jv-card[data-status="listening"] .hud-dreh-rueck{animation-duration:22s;}
.jv-card[data-status="thinking"] .hud-dreh-langsam{animation-duration:30s;}

/* Wer Bewegung abgestellt hat, bekommt die Ringe ohne Drehung. */
@media (prefers-reduced-motion:reduce){
  .jv-hud g{animation:none !important;}
}
/* Am Handy kleiner, sonst ragt es über den Rand. */
@media (max-width:520px){
  .jv-hud{width:270px;height:270px;}
}

/* So gross wie das HUD, nicht wie der Kern. Der Ring ist 320px breit, der
   Behaelter war 200: Er ragte 60px auf jeder Seite heraus, und weil das
   Layout davon nichts wusste, liefen die Zahlen am Handy ueber die Ringe.
   Am 13.08.2026 im Screenshot gesehen. */
.jv-orb-wrap{position:relative;width:320px;height:320px;display:grid;place-items:center;margin-top:8px;flex:none;}
@media (max-width:560px){.jv-orb-wrap{width:270px;height:270px;}}
.jv-orb-wrap::before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--color-accent-soft),transparent 70%);filter:blur(8px);opacity:.5;animation:jv-breathe 4.5s ease-in-out infinite;}
@keyframes jv-breathe{0%,100%{transform:scale(1);opacity:.45;}50%{transform:scale(1.12);opacity:.7;}}
/* Der Kern. Vorher ein matter Verlauf, der neben den leuchtenden Ringen
   beige wirkte. Jetzt heller Mittelpunkt, satter Rand und ein Schein nach
   aussen, damit er als Lichtquelle liest und nicht als Kugel aus Ton. */
.jv-orb{position:relative;width:152px;height:152px;border-radius:50%;border:0;padding:0;
  cursor:pointer;outline:none;
  background:radial-gradient(circle at 42% 34%,var(--jv-kern) 0%,var(--jv-mitte) 34%,
             var(--jv-rand) 68%,var(--jv-tief) 100%);
  box-shadow:0 0 0 1px var(--jv-schein) inset,0 8px 30px rgba(0,0,0,.55),
             0 0 48px var(--jv-schein),0 0 96px var(--color-accent-soft);
  transition:box-shadow .35s,filter .35s,transform .35s;}
.jv-orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 28%,rgba(255,240,230,.5),rgba(255,255,255,0) 42%);mix-blend-mode:screen;}
.jv-card[data-status="offline"] .jv-orb{filter:saturate(.5) brightness(.72);}
.jv-card[data-status="offline"] .jv-orb-wrap::before{opacity:.15;}
.jv-card[data-status="listening"] .jv-orb{background:radial-gradient(circle at 38% 32%,#9fd6cd 0%,var(--color-info) 42%,#2f6b64 84%,#163b37 100%);box-shadow:0 0 0 1px rgba(111,168,196,.3) inset,0 10px 36px rgba(0,0,0,.5),0 0 64px rgba(111,168,196,.42);}
.jv-card[data-status="listening"] .jv-orb-wrap::before{background:radial-gradient(circle,var(--color-info-soft),transparent 70%);animation-duration:1.6s;}
.jv-card[data-status="speaking"] .jv-orb-wrap::before{animation-duration:.9s;opacity:.8;}
.jv-card[data-status="thinking"] .jv-orb{background:radial-gradient(circle at 38% 32%,#f0cd87 0%,var(--color-warn) 42%,#8a6320 84%,#4a350f 100%);}
.jv-card[data-status="thinking"] .jv-orb-wrap::before{background:radial-gradient(circle,var(--color-warn-soft),transparent 70%);animation-duration:2.2s;}
.jv-status{text-align:center;}
.jv-status-label{font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.01em;min-height:26px;}
.jv-status-sub{margin-top:5px;font-size:var(--fs-base);color:var(--color-text-muted);min-height:18px;max-width:300px;line-height:1.4;}
.jv-canvas{width:100%;max-width:460px;display:none;flex-direction:column;gap:10px;}
.jv-canvas.show{display:flex;}
.jv-stage-card{background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:13px 15px;animation:viewIn .3s ease;}
.jv-stage-card-title{font-weight:600;font-size:var(--fs-base);color:var(--color-accent);margin-bottom:5px;}
.jv-stage-card-body{font-size:var(--fs-md);color:var(--color-text);line-height:1.45;white-space:pre-wrap;}
.jv-bgtasks{width:100%;max-width:460px;display:flex;flex-direction:column;gap:6px;}
.jv-bgtasks:empty{display:none;}
.jv-pill{display:flex;align-items:center;gap:9px;background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:7px 13px;font-size:var(--fs-base);color:var(--color-text);}
.jv-pill-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--color-warn);animation:blink 1s infinite;}
.jv-pill-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jv-pill.done{color:var(--color-ok);}
.jv-pill.done .jv-pill-dot{background:var(--color-ok);animation:none;}
/* Der Verlauf ist zugeklappt, bis jemand ihn sehen will. Wer spricht, will
   das Gesagte nicht auch noch lesen, und ein mitlaufendes Protokoll unter dem
   Kreis lenkt ab. Der Knopf erscheint erst, wenn es etwas zu zeigen gibt. */
.jv-verlauf-zeile{width:100%;max-width:460px;display:flex;justify-content:center;}
.jv-verlauf-knopf{background:transparent;border:0;cursor:pointer;padding:5px 10px;
  display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.08em;transition:color .2s;}
.jv-verlauf-knopf:hover{color:var(--color-accent);}
.jv-verlauf-knopf svg{width:13px;height:13px;transition:transform .25s;}
.jv-verlauf-knopf.offen svg{transform:rotate(180deg);}
.jv-transcript{width:100%;max-width:460px;max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-top:2px;}
.jv-transcript:empty{display:none;}
/* `hidden` verliert gegen ein display am Element selbst. Dieselbe Falle wie
   beim Filter-Knopf am 22.08.2026, hier am 25.08.2026 beim Verlauf. */
.jv-verlauf-zeile[hidden]{display:none;}
.jv-leer{color:var(--color-text-muted);font-size:12px;text-align:center;padding:6px 0;}
.jv-leer[hidden]{display:none;}
.jv-msg{font-size:var(--fs-md);line-height:1.4;max-width:86%;padding:9px 13px;border-radius:var(--radius);}
.jv-msg.you{align-self:flex-end;background:var(--color-accent-deep);color:#fff;border-bottom-right-radius:5px;}
.jv-msg.jarvis{align-self:flex-start;background:var(--color-surface-2);border:1px solid var(--border);color:var(--color-text);border-bottom-left-radius:5px;}
/* Die Knoepfe stehen immer da, auch ohne Gespraech. Das ist die Hausregel aus
   der Kopfleiste: Kein Werkzeug verschwindet, auch nicht in einer Ansicht, in
   der es nichts zu tun hat. Es wird stumpf und behaelt seinen Platz.

   Bis zum 25.08.2026 waren sie ganz weg, solange kein Gespraech lief, und Sam
   hat dreimal gefragt, wo seine Knoepfe sind. Ein Knopf, den man nur sieht,
   wenn man ihn ohnehin gerade braucht, ist keiner: Man lernt nie, dass es ihn
   gibt. */
.jv-foot{margin-top:16px;display:flex;gap:14px;justify-content:center;}
/* Ausser Betrieb heisst leiser, nicht weg. Bei 0,38 war vom Rand nichts mehr
   uebrig, und ein Knopf, den man nicht sieht, ist fuer den Benutzer kaputt und
   nicht abgeschaltet. Genau das hat Sam am 25.08.2026 zweimal gemeldet. */
.jv-card:not([data-connected="1"]) .jv-foot .jv-rund{
  opacity:.75;pointer-events:none;}
/* Ausgenommen der Weg ins Vollbild: Der geht auch ohne laufendes Gespraech,
   dort steht die Lage. Ein Knopf, der ohne Grund stumpf ist, sieht kaputt aus. */
.jv-card .jv-foot .jv-gross-auf{opacity:1;pointer-events:auto;}
.jv-audio{display:none;}

/* ---- Die Anrufknöpfe, nach Apples Vorbild ---------------------------
   Drei Dinge macht Apple dort richtig, und genau die sind hier übernommen:

   1. **Rund und ohne Beschriftung.** Ein Kreis mit einem Symbol ist schneller
      erfasst als ein Rechteck mit einem Wort. Was er tut, steht im
      `aria-label`, für Vorlesefunktion und für den Mauszeiger.
   2. **Gefüllt heißt an.** Der Zustand steckt im Knopf, nicht in einem Satz
      daneben. Bis zum 14.08.2026 stand unter dem Kreis "Mikrofon aus. Er hört
      dich nicht." Das liest man einmal, danach ist es Text im Weg.
   3. **Auflegen ist rot.** Das ist die einzige Stelle im Haus, an der Rot
      außerhalb der Ampel steht, und sie ist bewusst gesetzt: Auflegen ist der
      eine Knopf, den man nicht aus Versehen treffen darf, und Rot ist dafür
      seit Jahrzehnten die Sprache jedes Telefons. In Gold wäre er von
      "Stumm" nicht zu unterscheiden.
   -------------------------------------------------------------------- */
/* Farbmarken statt fester Weisstoene. Bis zum 25.08.2026 stand hier
   rgba(255,255,255,.09) auf Hintergrund, .16 auf Rand und .92 auf Symbol,
   also weiss auf weiss, seit das Cockpit die helle SQUADRAI-Gestalt traegt.
   Der Stumm-Knopf war damit unsichtbar, solange er AUS war, und erschien erst
   beim Stummschalten, weil er dann Gold gefuellt wird. Ein Knopf, den man erst
   sieht, wenn man ihn schon gedrueckt hat, ist keiner. Aufgefallen ist es
   Sam, nicht einer Pruefung: Der Auflegen-Knopf daneben hat eine eigene Farbe
   und war deshalb sichtbar, was den Fehler wie Absicht aussehen liess. */
/* Der RAND traegt den Knopf, nicht die Fuellung. Gemessen am 25.08.2026:
   Die Kachel ist --color-surface, der Knopf war --color-surface, also exakt
   dieselbe Farbe, 1,00 zu 1. Sichtbar war allein der Rand, und der lag bei
   1,85 (hell) und 1,73 (dunkel), waehrend fuer ein Bedienelement 3,0 noetig
   sind. Sam: "Wenn der Kontrast hell ist, muessen die Buttons auch sichtbar
   sein, und auch andersrum."
   --color-text-muted schafft 5,70 und 5,96 und ist eine vorhandene Marke.
   Eine neue zu erfinden waere genau der Dialekt, gegen den die gemeinsame
   Palette gebaut wurde. */
.jv-rund{
  width:46px;height:46px;border-radius:50%;flex:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-surface-2);border:1.5px solid var(--color-text-muted);
  color:var(--color-text);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background var(--transition-base),color var(--transition-base),
             border-color var(--transition-base),transform .12s ease;
}
.jv-rund i,.jv-rund svg{width:21px;height:21px;}
.jv-rund:hover{background:var(--color-sidebar-hover);}
/* Der Druckpunkt. Apple lässt den Knopf beim Tippen kurz einsinken, und genau
   das macht den Unterschied zwischen "es hat reagiert" und "hat es geklappt?" */
.jv-rund:active{transform:scale(.93);}
.jv-rund:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}

/* Pause ist an: gefüllt im Infoton. Bewusst NICHT Gold wie Stumm und nicht Rot
   wie Auflegen: Drei Knöpfe nebeneinander müssen sich im Zustand unterscheiden
   lassen, sonst greift man daneben. */
.jv-pause[data-an="1"],.jv-voll-pause[data-an="1"]{
  background:var(--color-info);border-color:var(--color-info);color:var(--color-bg);}

/* Stumm ist an: gefüllt in Gold, Symbol dunkel. Wie Apples weiß gefüllter
   Knopf, nur in der Hausfarbe. */
.jv-stumm[data-an="1"],.jv-voll-stumm[data-an="1"]{
  background:var(--color-warn);border-color:var(--color-warn);color:var(--color-bg);
  box-shadow:0 0 18px var(--color-warn-soft);}
.jv-stumm[data-an="1"]:hover,.jv-voll-stumm[data-an="1"]:hover{background:var(--color-warn);}

/* An oder aus darf nicht allein an der Farbe haengen. Wer Gold und Grau nicht
   auseinanderhaelt, sieht sonst zwei gleiche Kreise. Der eingeschaltete Knopf
   traegt deshalb zusaetzlich einen Ring, und das ist eine Form, keine Farbe.
   Die Luecke traegt die Farbe des Untergrunds, der Ring die der Fuellung.
   currentColor waere hier falsch: Beim eingeschalteten Knopf ist das die Farbe
   des SYMBOLS, also die des Untergrunds, und der Ring waere unsichtbar. */
.jv-pause[data-an="1"],.jv-voll-pause[data-an="1"]{
  box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-info);}
.jv-stumm[data-an="1"],.jv-voll-stumm[data-an="1"]{
  box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-warn);}
.jv-voll .jv-pause[data-an="1"]{
  box-shadow:0 0 0 3px #0C0C0D,0 0 0 5px var(--color-info);}
.jv-voll .jv-stumm[data-an="1"]{
  box-shadow:0 0 0 3px #0C0C0D,0 0 0 5px var(--color-warn);}

/* Auflegen bleibt das Warnzeichen, aber im Ton des Themas: Dieselbe Farbe
   wie die rote Ampel, nicht ein zweites Rot daneben. */
/* Das Symbol kommt aus der Marke, nicht aus einem festen Weiss. In der dunklen
   Fassung traegt --color-err den hellen Lachston, und Weiss darauf kam auf
   2,53 zu 1. Genau dieser Fehler ist am 24.08.2026 an der Glocke in der
   Kopfleiste behoben worden und stand hier noch. Mit der Marke sind es 7,26. */
.jv-rund.auflegen{background:var(--color-err);border-color:var(--color-err);
  color:var(--color-err-fg);}
.jv-rund.auflegen:hover{filter:brightness(1.12);}

/* Im Vollbild größer: Dort wird mit dem Daumen getippt, oft im Stehen. */
.jv-rund.gross{width:62px;height:62px;}
.jv-rund.gross i,.jv-rund.gross svg{width:26px;height:26px;}

@media (prefers-reduced-motion:reduce){.jv-rund:active{transform:none;}}

/* ============================================================
   ===== Jarvis im Vollbild =====
   Der Reiter bleibt ruhig, das Schauspiel kommt erst beim Antippen des
   Kreises. Zwei Gruende: Ein Cockpit, in dem staendig etwas leuchtet,
   ermuedet, und die grossen Ringe brauchen Platz, den eine Kachel nie hat.

   Liegt an <body>, deshalb hoeher als alles andere (Drawer 320, Modal 400).
   ============================================================ */
/* Das Vollbild ist IMMER dunkel, in beiden Fassungen. Bis zum 25.08.2026 nahm
   es trotzdem die Marken der hellen Fassung, und die sind fuer hellen Grund
   gerechnet: Der eingeschaltete Pause-Knopf kam dort auf 2,56 zu 1 gegen den
   fast schwarzen Hintergrund, war also praktisch weg. Gemessen, nicht
   geschaetzt.

   Es bekommt deshalb eine eigene, feste Palette. Nicht die dunkle Fassung
   "auch noch einmal": In der dunklen Gestalt sind es dieselben Werte, es
   aendert sich dort also nichts. Eine Flaeche, die immer dunkel ist, braucht
   keine Fallunterscheidung, sondern eine Festlegung. */
.jv-voll{
  --color-bg:#12100D; --color-surface:#1C1915; --color-surface-2:#26221C;
  --color-text:#FAF8F4; --color-text-muted:#9C968B;
  --color-accent:#7C97FF; --color-accent-soft:rgba(124,151,255,0.14);
  --color-warn:#E0B341; --color-err:#F2837B; --color-err-fg:#2B0906;
  --color-info:#7C97FF;
}
.jv-voll{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
          max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:radial-gradient(circle at 50% 46%,#141210 0%,#0C0C0D 58%,#000 100%);
  gap:22px;--pegel:0;
  opacity:0;transition:opacity .28s ease;}
/* PFLICHT, nicht Kosmetik: `display:flex` aus einer Klasse schlaegt die
   Browser-Regel `[hidden]{display:none}`. Ohne diese Zeile haengt das Overlay
   IMMER ueber dem Cockpit, unsichtbar bei opacity 0, faengt aber jeden Klick
   ab. Genau das ist am 13.08.2026 passiert: Nichts liess sich mehr antippen,
   und es sah aus, als waere Jarvis kaputt. Der zweite Riegel ist
   pointer-events, falls jemand spaeter wieder an der Sichtbarkeit dreht. */
.jv-voll[hidden]{display:none;}
.jv-voll:not(.da){pointer-events:none;}
.jv-voll.da{opacity:1;pointer-events:auto;}
body.jv-voll-an{overflow:hidden;}

.jv-voll-kopf{position:absolute;top:max(14px,env(safe-area-inset-top));left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(16px,env(safe-area-inset-left));}
.jv-voll-marke{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.34em;
  color:var(--color-accent);opacity:.75;}
.jv-voll-led{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted);}
.jv-voll[data-status="idle"] .jv-voll-led,
.jv-voll[data-status="listening"] .jv-voll-led,
.jv-voll[data-status="speaking"] .jv-voll-led,
.jv-voll[data-status="thinking"] .jv-voll-led{background:var(--color-warn);
  box-shadow:0 0 10px var(--jv-glanz-stark);animation:blink 2.4s infinite;}
.jv-voll-zu{width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent);
  -webkit-tap-highlight-color:transparent;transition:background .2s;}
.jv-voll-zu:hover{background:var(--jv-glanz-leise);}
.jv-voll-zu svg{width:19px;height:19px;}

/* ---- Die Ringe. Gleiche Klassen wie im kleinen HUD, damit Farbe und
   Drehung nur an einer Stelle stehen. ---- */
/* Der Ring darf NICHT den ganzen Schirm fuellen. Am 13.08.2026 auf dem iPad
   gesehen: Bei 88vmin lief der untere Rand in die Pegelbalken. Jetzt ist der
   Kreis kleiner, und alles darunter steht im normalen Fluss statt frei gesetzt,
   damit sich nichts mehr ueberlagern KANN. */
.jv-voll-mitte{position:relative;display:grid;place-items:center;flex:none;
  width:min(68vmin,640px);height:min(68vmin,640px);}
.jv-voll-hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  --hud:var(--color-accent);--hud-hell:var(--jv-kern);opacity:.8;}
.jv-voll-hud circle,.jv-voll-hud path{fill:none;stroke:var(--hud);}
.jv-voll-hud g{transform-origin:500px 500px;}
.jv-voll-hud .hud-ring{stroke-width:1;opacity:.4;}
.jv-voll-hud .hud-ring-fein{stroke-width:1;opacity:.32;stroke-dasharray:3 10;}
.jv-voll-hud .hud-arc{stroke-width:3.4;stroke:var(--hud-hell);
  filter:drop-shadow(0 0 6px var(--jv-glanz-stark));}
.jv-voll-hud .hud-tick{stroke-width:1.2;opacity:.4;}
.jv-voll-hud .hud-tick-stark{stroke-width:2.4;opacity:.9;
  filter:drop-shadow(0 0 4px var(--jv-glanz));}
.jv-voll-hud .hud-grad{fill:var(--hud);stroke:none;opacity:.42;
  font-family:var(--font-mono);font-size:var(--fs-lg);text-anchor:middle;
  dominant-baseline:middle;letter-spacing:.06em;}
.hud-dreh-rueck-schnell{animation:hud-dreh-rueck 17s linear infinite;}

/* Der Pegelkranz atmet mit der Stimme. Er wird nicht animiert, sondern
   gerechnet: --pegel kommt aus echtem Ton, nicht aus einer Zeitkurve. */
.jv-voll-hud .hud-pegel{transform:scale(calc(1 + var(--pegel) * .1));
  transition:transform .07s linear;}
.jv-voll-hud .hud-pegel-strich{stroke-width:1.6;
  opacity:calc(.28 + var(--pegel) * .7);}
.jv-voll-hud .hud-pegel-ring{stroke-width:calc(1px + var(--pegel) * 4px);
  opacity:calc(.4 + var(--pegel) * .6);stroke:var(--hud-hell);
  filter:drop-shadow(0 0 8px var(--jv-glanz));}

/* Der Kern in der Mitte, gleiche Lichtquelle wie im kleinen HUD.
   Bewusst OHNE Atem-Animation: Eine Animation auf transform haette den Pegel
   ueberschrieben, und dann haette der Kern gepocht, ohne dass jemand spricht.
   Das Leben kommt aus dem Schein darum, die Groesse aus echtem Ton. */
.jv-voll-kern{position:relative;width:min(30vmin,240px);height:min(30vmin,240px);
  border-radius:50%;
  background:radial-gradient(circle at 42% 34%,var(--jv-kern) 0%,var(--jv-mitte) 34%,
             var(--jv-rand) 68%,var(--jv-tief) 100%);
  box-shadow:0 0 0 1px rgba(255,233,168,.35) inset,
             0 0 calc(60px + var(--pegel) * 90px) var(--jv-glanz),
             0 0 calc(120px + var(--pegel) * 160px) var(--jv-glanz-leise);
  transform:scale(calc(1 + var(--pegel) * .07));
  transition:transform .07s linear,filter .35s;}
.jv-voll-kern::after{content:'';position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,var(--jv-glanz-leise),transparent 68%);
  animation:jv-glimmen 5s ease-in-out infinite;pointer-events:none;}
@keyframes jv-glimmen{0%,100%{opacity:.45;}50%{opacity:.85;}}
.jv-voll[data-status="offline"] .jv-voll-kern,
.jv-voll[data-status="connecting"] .jv-voll-kern{filter:saturate(.5) brightness(.7);}
.jv-voll[data-status="listening"] .jv-voll-kern{
  background:radial-gradient(circle at 38% 32%,#9fd6cd 0%,var(--color-info) 42%,#2f6b64 84%,#163b37 100%);}
.jv-voll[data-status="thinking"] .jv-voll-kern{
  background:radial-gradient(circle at 38% 32%,#f0cd87 0%,var(--color-warn) 42%,#8a6320 84%,#4a350f 100%);}
.jv-voll[data-status="speaking"] .hud-dreh-schnell{animation-duration:8s;}
.jv-voll[data-status="listening"] .hud-dreh-rueck{animation-duration:20s;}
.jv-voll[data-status="thinking"] .hud-dreh-langsam{animation-duration:28s;}

/* Im Ring steht kein Wort mehr. Was gerade passiert, sagen Farbe, Ringe und
   Pegel deutlicher als eine Zeile Text, und der Kreis bleibt sauber.

   Der Hinweistext steht AUSSERHALB des Rings. Er kann lang werden (Mikrofon
   gesperrt, HTTPS fehlt), und langer Text zwischen den Ringen ist unlesbar.

   Farbe ueber die Marke, nicht als fester Weisston: Bis zum 25.08.2026 stand
   hier rgba(255,255,255,.55), und seit das Cockpit hell ist, war "Jarvis
   spricht" darunter kaum zu lesen. Auf Sams Bildschirmfoto vom selben Tag
   sieht man es als blasses Beige auf Weiss. */
.jv-voll-sub{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:min(80vw,460px);text-align:center;
  font-size:var(--fs-base);color:var(--color-text-muted);line-height:1.45;pointer-events:none;}

/* Der Pegel als Balkenreihe. Echter Ton, deshalb steht er still, wenn
   niemand spricht. */
.jv-balken{display:flex;align-items:flex-end;gap:3px;height:30px;flex:none;
  width:min(70vw,420px);justify-content:center;pointer-events:none;}
.jv-balken i{flex:1 1 0;max-width:8px;height:100%;border-radius:var(--radius-xs);
  background:linear-gradient(to top,var(--color-accent-soft),var(--jv-kern));
  transform:scaleY(.05);transform-origin:bottom;
  transition:transform .06s linear;}

.jv-voll-fuss{flex:none;display:flex;gap:26px;justify-content:center;}

/* Die Zahlen an den Raendern. Bewusst dieselben wie im Reiter: vorzeigbar,
   keine Euro, keine Namen, keine Fristen. */
.jv-voll-werte{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:26px;pointer-events:none;max-width:23vw;}
.jv-voll-werte.links{left:max(22px,env(safe-area-inset-left));text-align:left;}
.jv-voll-werte.rechts{right:max(22px,env(safe-area-inset-right));text-align:right;}
.jv-voll-wert-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--jv-glanz);}
.jv-voll-wert-zahl{font-size:var(--fs-2xl);font-weight:700;color:var(--jv-kern);line-height:1.15;
  letter-spacing:-0.02em;display:flex;align-items:baseline;gap:8px;}
.jv-voll-werte.rechts .jv-voll-wert-zahl{justify-content:flex-end;}
.jv-voll-wert-sub{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:2px;}

/* Am Handy ist kein Platz fuer zwei Spalten neben dem Ring, und noch weniger
   fuer frei gesetzte Ecken: Beim ersten Versuch lag der Untertitel auf den
   Zahlen und die Zahlen auf den Pegelbalken. Deshalb hier KEIN freies Setzen
   mehr, sondern eine gestapelte Spalte von oben nach unten. Was nicht passt,
   schiebt den Rest, statt sich darueberzulegen. */
@media (max-width:760px){
  /* Mittig, aber scrollbar: Auf einem kleinen Schirm darf lieber gescrollt
     werden, als dass oben und unten etwas abgeschnitten wird. */
  .jv-voll{justify-content:center;gap:13px;overflow-y:auto;
    padding-top:calc(64px + env(safe-area-inset-top));}
  .jv-voll-werte{position:static;transform:none;max-width:none;width:100%;
    flex-direction:row;gap:10px;justify-content:space-around;text-align:center;}
  .jv-voll-werte.links{order:1;}
  .jv-voll-mitte{order:2;width:min(84vw,400px);height:min(84vw,400px);}
  .jv-voll-werte.rechts{order:3;}
  .jv-balken{order:5;width:min(78vw,360px);height:24px;}
  .jv-voll-fuss{order:6;margin-top:2px;}
  .jv-voll-wert-zahl{font-size:var(--fs-xl);justify-content:center;gap:6px;}
  .jv-voll-werte.rechts .jv-voll-wert-zahl{justify-content:center;}
  .jv-voll-wert-label{font-size:var(--fs-xs);letter-spacing:.16em;}
  .jv-voll-wert-sub{display:none;}
  .jv-voll-hud .hud-grad{font-size:var(--fs-2xl);}
  /* Der Hinweistext bleibt schwebend, weil er meist leer ist. Damit er in den
     seltenen Faellen lesbar bleibt, bekommt er einen Schatten statt Platz. */
  .jv-voll-sub{text-shadow:0 2px 10px #000,0 0 20px #000;}
}
/* Sehr niedrige Schirme (Handy quer): der Ring weicht der Hoehe, nicht der Breite. */
@media (max-width:760px) and (max-height:680px){
  .jv-voll-mitte{width:min(48vh,400px);height:min(48vh,400px);}
}
/* Wer Bewegung abgestellt hat, bekommt die Ringe ohne Drehung. Der Pegel
   bleibt: Er ist Information, keine Zierde. */
@media (prefers-reduced-motion:reduce){
  .jv-voll-hud g{animation:none !important;}
  .jv-voll-kern{animation:none;}
}

/* ============================================================
   ===== MOBIL (Handy & kleines Tablet, <= 760px) =====
   Pflicht-Layout: die Sidebar wird zum Off-Canvas-Drawer hinter
   einer Topbar mit Menü-Knopf. Neue Views/Komponenten müssen in
   diesem Layout funktionieren (keine festen px-Breiten, Raster über
   .grid cols-*, breite Tabellen scrollen). Siehe reference/dashboard.md.
   ============================================================ */
@media(max-width:760px){
  /* App wird zur Spalte: die Topbar sitzt im normalen Fluss obendrauf (kein position:fixed
     über dem Scroller = bombenfest, bewegt sich NIE), darunter ist main.content der EINZIGE
     Scroller. So gibt es kein iOS-Gummiband am Body und kein horizontales Wegswipen. */
  .app{flex-direction:column;}
  .mobile-bar{display:flex;align-items:center;gap:8px;position:relative;flex:0 0 auto;height:calc(var(--mobile-bar-h) + env(safe-area-inset-top));z-index:200;background:var(--color-bg);border-bottom:1px solid var(--border);padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));}
  .mb-burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--color-text);border-radius:var(--radius-md);cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .mb-burger:hover{background:var(--color-sidebar-hover);}
  .mb-burger svg{width:23px;height:23px;}
  .mb-title{font-size:var(--fs-md);font-weight:700;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Sidebar -> Drawer, von links eingeschoben, weicher Slide + Safe-Area */
  aside.sidebar{position:fixed;top:0;left:0;bottom:0;width:min(86vw,310px);z-index:320;transform:translateX(-100%);border-right:1px solid var(--border-strong);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);transition:transform var(--transition-base);will-change:transform;}
  .app.nav-open aside.sidebar{transform:none;box-shadow:var(--shadow-lg);}
  /* Während der Finger zieht: keine Übergänge, damit Menü + Backdrop 1:1 mitlaufen. */
  .app.nav-dragging aside.sidebar,.app.nav-dragging .nav-backdrop{transition:none;}
  .sb-toggle{display:none;}                 /* Einklappen ist am Handy sinnlos */

  /* Backdrop hinter dem offenen Drawer */
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:310;border:0;opacity:0;pointer-events:none;transition:opacity var(--transition-base);}
  .app.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}

  /* Eingeklappten Desktop-Zustand am Handy aufheben: Drawer zeigt immer volle Labels */
  .app.sb-collapsed aside.sidebar{width:min(86vw,310px);}
  .app.sb-collapsed .sb-head{justify-content:flex-start;padding:18px 18px;}
  .app.sb-collapsed .sb-head h1{display:block;}
  .app.sb-collapsed .nav-item{justify-content:flex-start;padding:13px 14px;gap:12px;}
  .app.sb-collapsed .nav-item .lbl{display:block;}
  .app.sb-collapsed .nav-item .badge-num{position:static;width:auto;height:auto;padding:1px 6px;border-radius:var(--radius-md);font-size:var(--fs-xs);}

  /* Größere Tap-Ziele im Drawer (Apple 44px) */
  .nav-item{padding:13px 14px;min-height:46px;}
  .nav-item svg{width:19px;height:19px;}

  /* Inhalt: Platz für die Topbar + Safe-Areas (Notch oben, Home-Indicator unten) */
  /* **Unten nur noch der Systemrand, keine 48 Punkte extra.**
     Am 03.09.2026 gemessen: Der Streifen, den der Geschaeftsfuehrer als
     "weissen Balken" meldete, war #F0EDE6, also die Papierfarbe der App
     selbst. Kein fremder Balken und kein Systemrand, sondern dieser
     Abstand: 48 Punkte plus die Zone fuers Home-Zeichen, zusammen rund ein
     Achtel des Bildschirms, das nach dem letzten Kachelrand leer blieb.
     Die 48 waren fuer die schwebenden Knoepfe gedacht. Die schweben aber
     und decken die letzte Zeile ohnehin nur, wenn man ganz nach unten
     scrollt; dafuer ein Achtel Bildschirm dauerhaft freizuhalten ist der
     schlechtere Tausch. Zwoelf Punkte bleiben als Luft unter der letzten
     Kachel. */
  main.content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px max(15px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left));}
  .ph{margin-bottom:18px;gap:12px;}
  .ph h2{font-size:var(--fs-xl);}
  .ph .desc{font-size:var(--fs-base);}
  .meta-line{text-align:left;}
  .card{padding:15px 16px;}
  .grid{gap:13px;}

  /* Touch-freundliche Knöpfe / Tabs */
  .btn{padding:11px 15px;font-size:var(--fs-md);}
  .btn-sm{padding:8px 12px;font-size:var(--fs-sm);}
  .ph-actions .btn,.toolbar .btn{flex:0 1 auto;}
  .tabs{gap:6px;}
  .tab{padding:11px 14px;font-size:var(--fs-sm);}

  /* iOS-Zoom beim Fokus verhindern: alle Eingaben >=16px */
  input[type=text],input[type=search],input[type=email],input[type=number],input[type=password],textarea,select,.addbar input[type=text],.t-edit,.appr-edit{font-size:16px;}

  /* Aufgaben-Add-Bar: sauber stapeln statt quetschen */
  .addbar{flex-direction:column;align-items:stretch;}
  .addbar input[type=text]{min-width:0;width:100%;}
  .addbar select,.addbar .btn{width:100%;}

  /* Checkbox-Tap-Ziel vergrößern */
  .check{width:24px;height:24px;}
  .check svg{width:15px;height:15px;}

  /* Kategorie-Balken: schmaleres Label, kleinere Schrift, niedrigere Mini-Balken */
  .catbar .row{grid-template-columns:84px 1fr 46px;gap:8px;font-size:var(--fs-sm);}
  .bars{height:88px;}

  /* Charts niedriger -> deutlich weniger Scroll */
  .chart-box{height:210px;}
  .chart-box.sm{height:170px;}
  .chart-box.lg{height:230px;}
  .gauge-wrap{height:170px;}

  /* Breite Tabellen horizontal scrollbar; erste Spalte bleibt als Anker stehen */
  /* Beim seitlichen Schieben bleibt die erste Spalte stehen, sonst weiss
     niemand mehr, welche Zeile er liest. Das Schieben selbst uebernimmt
     .tbl-wrap, siehe unten. */
  table.tbl th:first-child,table.tbl td:first-child{position:sticky;left:0;background:var(--color-surface);z-index:1;}

  /* Freigabe: Bild unter den Text statt daneben, Library 2-spaltig */
  .appr-body .post-flow{flex-direction:column;gap:12px;}
  .post-thumb,.post-thumb>img,.post-thumb .noimg,.noimg-box{width:100%;}
  .post-thumb>img,.post-thumb .noimg{height:auto;aspect-ratio:4/5;}
  .appr-edit{min-height:160px;}
  .lib-grid{grid-template-columns:1fr 1fr;}
  .lib-del{opacity:1;width:34px;height:34px;}
  .cand-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Popups/Toasts an die Schmalseite + Safe-Area; Footer-Knöpfe bleiben sichtbar */
  .modal-bg{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));}
  .modal{max-width:100%;max-height:88vh;}
  .modal-body{max-height:calc(82vh - 116px);padding:16px;}
  .modal-foot{position:sticky;bottom:0;background:var(--color-surface);}
  /* Lange Werte (z. B. E-Mail-Adressen) im Modal dürfen umbrechen statt rauszulaufen */
  .modal .statrow{gap:12px;}
  .modal .statrow .s-val{min-width:0;overflow-wrap:anywhere;}
  .toast-c{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));}
  .toast{max-width:none;min-width:0;}

  /* Post-Text in Freigaben deckeln, damit das Modal nicht überläuft */
  .appr-text{max-height:200px;}

  /* Jarvis-Orb am Handy kompakter, Mitschrift volle Breite */
  .jv-card{padding:18px 14px 14px;}
  /* Nicht mehr schwebend oben rechts: Am Handy stand die Anzeige mitten in
     den Zahlen. Jetzt eine eigene Zeile darueber. */
  .jv-conn{position:static;justify-content:flex-end;margin-bottom:10px;width:100%;}
  /* Der KERN wird kleiner, der BEHAELTER nicht: Er muss so gross bleiben wie
     der Ring darum, sonst ragt der Ring wieder heraus und die Zahlen laufen
     darueber. Die alte Regel setzte hier 150px und war aelter als das HUD. */
  .jv-orb{width:114px;height:114px;}
  .jv-orb-wrap::before{width:112px;height:112px;}
  .jv-stage{gap:16px;}
  .jv-transcript,.jv-bgtasks,.jv-canvas{max-width:100%;-webkit-overflow-scrolling:touch;}
  .jv-transcript{max-height:230px;}
}

/* ===== Sehr schmale Phones (<= 430px) - Feed-Knöpfe voll ausfüllen ===== */
@media(max-width:430px){
  .sugg .s-actions{gap:6px;}
  .sugg .s-actions .btn{flex:1 1 calc(50% - 6px);justify-content:center;min-height:40px;}
}

/* ---- Kalender (Wochen-Ansicht) ----------------------------------- */
/* **Die Leiste hat zwei Zeilen, wie am Mac.** Oben mittig der Umschalter,
   rechts Zeitzone und Suche; darunter links der Monat in gross, rechts die
   Navigation. */
.cal-toolbar{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px;}
/* **Links waehlen, rechts ansehen.** Die Bedienung ist nach ihrer Aufgabe
   geteilt, nicht nach ihrer Form: Links steht alles, womit man den
   Ausschnitt bestimmt (Stufe und Richtung), rechts alles, was die Ansicht
   betrifft (Zeitzone, Suche, Neuladen). Angeordnet am 06.09.2026.

   Der Umschalter sass vorher mittig, dem Mac nachgebaut. Dort sind die
   Fenster schmaler; auf dem iPad stand dadurch eine halbe Zeile leer,
   waehrend die Bedienung auf zwei Zeilen verteilt war. */
.cal-leiste-oben{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cal-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cal-leiste-oben .cal-rechts{margin-left:auto;}
.cal-rechts{display:flex;align-items:center;gap:8px;}
.cal-rechts .cal-zone{margin-left:0;}
.cal-leiste-unten{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cal-leiste-unten .cal-fresh{margin-left:auto;}
/* **Der Monat gross und fett, wie am Mac.** Dort ist er die groesste
   Schrift auf der Seite, weil er die Frage beantwortet, die man beim
   Hinsehen zuerst hat: wo bin ich gerade. */
.cal-toolbar .cal-range{font-family:var(--font-ui);font-size:26px;font-weight:700;
  color:var(--color-text);letter-spacing:-0.01em;line-height:1.15;}
.cal-nav{display:flex;gap:4px;}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:var(--fs-sm);color:var(--color-text-2);}
.cal-legend .lg{display:inline-flex;align-items:center;gap:6px;}
.cal-legend .dot{width:10px;height:10px;border-radius:var(--radius-xs);flex-shrink:0;}
.cal-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--color-surface);}
.cal-head,.cal-body{display:grid;grid-template-columns:54px repeat(7,minmax(120px,1fr));min-width:760px;}
.cal-head{position:sticky;top:0;z-index:3;background:var(--color-surface-2);border-bottom:1px solid var(--border);}
.cal-corner{border-right:1px solid var(--border);}
/* **Der Spaltenkopf ist eine Zeile, wie am Mac: "Mo. 31."** Vorher standen
   Wochentag und Zahl uebereinander, der Tag in Versalien und die Zahl fett.
   Das macht aus dem Kopf eine Ueberschrift, die schwerer wiegt als die
   Termine darunter. Am Mac ist er zurueckhaltend, und nur der heutige Tag
   sticht heraus. */
.cal-dayhead{padding:6px 6px;text-align:center;border-left:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:var(--fs-md);line-height:1.2;}
.cal-dayhead .dow{color:var(--color-text-muted);font-weight:400;}
.cal-dayhead .dnum{font-family:var(--font-ui);font-weight:400;color:var(--color-text-2);font-variant-numeric:tabular-nums;}
.cal-dayhead .dpt{color:var(--color-text-muted);margin-left:-4px;}
/* **Der heutige Tag traegt seine Zahl in einem roten Kreis**, seit dem
   06.09.2026, so wie im Kalender am Mac. Vorher stand die Zahl in der
   Signalfarbe und darunter das Wort "heute": zwei Hinweise fuer dieselbe
   Sache, und der Kreis allein ist der schnellere.

   Rot ist im Haus gesperrt, aber die Sperre gilt dem Auftritt nach aussen.
   Hier gehoert es zur selben Familie wie die Jetzt-Linie: Beides zeigt, wo
   man GERADE steht, und dafuer ist Rot die Farbe, die jeder kennt. */
.cal-dayhead.today .dow{color:var(--color-text-muted);}
/* **Ein dunkleres Rot, wo weisse Schrift daraufsteht.** Die Linienfarbe
   #E5453C traegt Weiss nur mit 4,0 zu 1, und das ist unter der Schwelle fuer
   kleinen Text. Dieselbe Farbfamilie, zwei Schritte dunkler: 4,6 zu 1. Die
   Linie selbst bleibt hell, dort steht keine Schrift drauf. */
.cal-dayhead.today .dnum{background:#D93A31;color:#fff;border-radius:var(--radius-pill);
  min-width:24px;height:24px;line-height:24px;display:inline-block;
  padding:0 5px;box-sizing:border-box;font-weight:600;text-align:center;}
.cal-allday{display:grid;grid-template-columns:54px repeat(7,minmax(120px,1fr));min-width:760px;border-bottom:1px solid var(--border);background:var(--color-surface-2);}
/* **Flach und abgesetzt, wie am Mac.** Die Zeile ist eine Ablage, keine
   eigene Ansicht: 18 Punkte, dieselbe Flaeche wie das Raster darunter, und
   unten eine Linie, die sie vom ersten Stundenfeld trennt. Ohne diese Linie
   steht sie als heller Streifen zwischen Kopf und Raster, und genau das war
   am 06.09.2026 der Fund mit dem roten Pfeil. */
/* **Flach heisst wirklich flach.** Am 06.09.2026 nachgemessen: Die Zeile
   stand bei 25 Punkten, am Mac sind es rund 10. Aufgetrieben hat sie nicht
   ihre eigene Mindesthoehe, sondern das Polster der Beschriftung darin, und
   danach sucht man an der falschen Stelle.

   Leer bleibt sie flach, mit einem Termin darin waechst sie mit: Die
   Mindesthoehe ist eine Untergrenze, keine feste Hoehe. */
.cal-allday{min-height:14px;background:var(--color-surface);
  border-bottom:1px solid var(--border-strong);}
.cal-allday .cell{padding:1px 3px;}
/* Beschriftung linksbuendig, wie am Mac: "Ganztaegig" und "KW 36" stehen
   dort am linken Rand, nicht an der Kante zur ersten Spalte. */
/* **Das Wort muss in die Spalte passen, nicht nur an ihr anfangen.**
   Gemeldet am 06.09.2026: "Das Wort ganztaegig ist ausserhalb der Spalte."
   Gemessen: 49 Punkte Text plus 14 Polster in einer Spalte von 52. Der
   Kasten hielt seine Breite, der Text lief darueber hinweg in den Montag.

   Am Mac steht es kleiner, rund acht Punkt in einer aehnlich schmalen
   Spalte. Dazu ein Riegel: Was trotzdem nicht passt, wird abgeschnitten und
   nicht in die Nachbarspalte geschoben. */
.cal-allday .lbl{font-size:9px;color:var(--color-text-muted);text-align:center;
  padding:2px 4px;line-height:1.2;border-right:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-0.01em;}
.cal-allday .cell{border-left:1px solid var(--border);padding:3px;display:flex;flex-direction:column;gap:2px;}
.cal-times{display:flex;flex-direction:column;border-right:1px solid var(--border);}
/* **Ziffern in einer Spur** (`tabular-nums`): Sonst ist die Eins schmaler
   als die Null, und die Stundenspalte flimmert von Zeile zu Zeile. Dasselbe
   gilt fuer die Tageszahlen im Kopf. Und die Beschriftung sitzt mittig AUF
   ihrer Linie, statt um einen geschaetzten Betrag darueber. */
.cal-time{position:relative;font-size:var(--fs-xs);color:var(--color-text-muted);text-align:right;padding-right:6px;font-variant-numeric:tabular-nums;}
.cal-time span{position:absolute;top:0;transform:translateY(-50%);right:6px;background:var(--color-surface);padding:0 2px;}
/* **Die Stundenlinie ist eine Linie, keine Flaeche.** Sie kam aus
   `--color-bg`, also der Grundfarbe der Seite: im dunklen Thema ein
   schwarzer Strich auf dunkler Flaeche, im hellen ein heller auf hellem.
   Am Mac ist sie ein zarter Kontrast, der die Stunden trennt, ohne zu
   trennen. Deshalb dieselbe Familie wie die uebrigen Linien. */
.cal-col{position:relative;border-left:1px solid var(--border);background-image:repeating-linear-gradient(var(--border) 0 1px,transparent 1px var(--cal-hour));background-position:0 0;}
.cal-col.today{background-color:rgba(242,232,220,0.035);}
/* **Samstag und Sonntag liegen leicht im Schatten**, wie am Mac. Es ist der
   billigste Weg, die Arbeitswoche vom Wochenende zu trennen: kein Strich,
   keine Farbe, nur ein anderer Grund. */
.cal-col.wochenende{background-color:rgba(128,128,128,0.05);}
/* **Der heutige Tag ist ausgenommen.** Faellt er auf ein Wochenende, stand
   diese Regel nach der Heute-Regel und war gleich spezifisch, gewann also:
   Am Sonntag, dem 06.09.2026, stand eine graue Sechs auf rotem Grund,
   Kontrast 1,6 zu 1. Gemeldet mit "die Zahl 6 muss hell sein". */
.cal-dayhead.wochenende:not(.today) .dnum{color:var(--color-text-muted);}
.cal-event{position:absolute;left:2px;right:2px;border-radius:var(--radius-xs);padding:4px 7px;overflow:hidden;cursor:pointer;border-left:3px solid var(--ev-bar);background:var(--ev-bg);font-size:var(--fs-sm);line-height:1.3;transition:transform var(--transition-fast),box-shadow var(--transition-fast);}
.cal-event:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);z-index:5;}
/* **Der Titel traegt die Farbe seines Kalenders**, wie am Mac. Er stand hier
   in der Textfarbe des Themas, und damit sahen alle Termine gleich aus: Die
   Farbe war nur der drei Pixel breite Balken am Rand. Wie hell die Farbe
   sein muss, damit sie lesbar bleibt, rechnet `lesbareTextfarbe` in
   `cal_component.js` aus, gemessen und nicht geschaetzt. */
.cal-event .et{font-weight:600;color:var(--ev-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-event .ez,.cal-event .eo{color:var(--ev-fg);}
.cal-event .ett{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ev-fg);}
.cal-allday .cal-event{position:static;left:auto;right:auto;}
/* **Die Jetzt-Linie, umgebaut am 06.09.2026.** Sie lag in der heutigen
   Spalte und war damit ein kurzer Strich in einem Siebtel der Breite. Der
   Geschaeftsfuehrer hat sie mit einem Bild aus dem Kalender am Mac
   angefordert: eine Linie ueber die ganze Woche, mit der Uhrzeit als
   Plakette in der Zeitspalte.

   **Sie ist rot, und das ist hier richtig.** Rot ist im Haus gesperrt, aber
   die Sperre gilt dem Auftritt nach aussen: Content, Angebote,
   Kundenpapiere. Der eigene Kalender ist keins davon, und die Jetzt-Linie
   ist genau die Stelle, an der ein Signal gemeint ist. Dieselbe Entscheidung
   wie bei den Kalenderfarben am 05.09.2026. */
.cal-jetzt{position:absolute;left:0;right:0;height:0;z-index:6;pointer-events:none;
  display:flex;align-items:center;}
/* **Die Linie hat zwei Gewichte, und der Wechsel sitzt am Anfang von
   heute.** Angeordnet am 08.09.2026: "Die Linie vom Montag, der gestern war,
   sollte heller sein. Das bedeutet, dass es visuell erkennlicher ist, dass
   wir uns heute am 8. September befinden."

   Der Gedanke dahinter ist kein Geschmack: Die Linie steht auf einer
   Uhrzeit und laeuft ueber sieben Tage. Ueber den vergangenen Tagen ist
   dieser Zeitpunkt vorbei, ueber den kommenden liegt er noch vor uns. Die
   duenne, blasse Haelfte sagt "war schon", die kraeftige "kommt noch".

   Gebaut als eine blasse Grundlinie plus eine kraeftige Auflage ab
   `--punkt-links`. Zwei nebeneinandergesetzte Elemente waeren an der Naht
   auf ein halbes Pixel genau zu treffen, und bei krummen Spaltenbreiten
   klafft dort sonst eine Luecke. */
.cal-jetzt-strich{flex:1;height:0;border-top:1px solid rgba(229,69,60,.30);
  position:relative;}
.cal-jetzt-strich::after{content:'';position:absolute;
  left:var(--punkt-links,0);right:0;top:-1.5px;height:2px;background:#E5453C;}
/* **Der Punkt sitzt an der Spalte des heutigen Tages**, nicht am linken
   Rand der Woche. Am Mac markiert er, in welchem Tag man gerade steht,
   waehrend die Linie ueber alle sieben laeuft. Ohne Spaltenangabe (etwa in
   der Tagesansicht) bleibt er weg, statt an einer beliebigen Stelle zu
   sitzen und dort etwas zu behaupten. */
.cal-jetzt-strich.mit-punkt::before{content:'';position:absolute;
  left:var(--punkt-links,0);top:-4.5px;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:#E5453C;}
/* Die Plakette sitzt buendig am rechten Rand der Zeitspalte, damit sie die
   Stunden darunter nicht ueberdeckt. */
/* **Die Plakette klebt am Beginn der Linie, nicht am linken Rand.**
   Angeordnet am 08.09.2026: rund, und ohne Luecke zur Linie. Verankert wird
   sie an ihrer RECHTEN Kante ueber die Breite der Zeitspalte, die das
   Skript als `--gutter` mitgibt: Ueber `left` ginge es nicht, dort haengt
   die Position an der Breite des Textes, und "9:05" ist schmaler als
   "13:41". Mittig sitzt sie ueber `translateY(-50%)`, gerechnet auf die
   Linie und nicht auf die Zeile darunter. */
/* `top:0` ist nicht Zierde: Ohne die Angabe steht die Plakette an ihrer
   statischen Stelle im Flexkasten, und `translateY(-50%)` zieht sie von dort
   um die halbe eigene Hoehe nach oben. Am 08.09.2026 gemessen: 8,1 Pixel zu
   hoch, genau eine halbe Plakette. Mit `top:0` liegt ihre Mitte auf der
   Linie, gemessen 0,5 Pixel Abweichung bei einer 1-Pixel-Linie. */
.cal-jetzt-zeit{position:absolute;left:auto;top:0;
  right:calc(100% - var(--gutter,0px));transform:translateY(-50%);
  background:#D93A31;color:#fff;font-size:10.5px;font-weight:700;
  padding:1.5px 7px;border-radius:999px;line-height:1.35;letter-spacing:.02em;}
.cal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--color-accent);z-index:4;pointer-events:none;}
.cal-now::before{content:'';position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--color-accent);}
.cal-fresh{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--fs-sm);color:var(--color-text-2);font-family:var(--font-mono);}
.cal-fresh .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cal-tz{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-6px 0 12px;font-size:var(--fs-sm);color:var(--color-text-muted);}
.cal-tz .tz-main{color:var(--color-text-2);}
.cal-tz .tz-here{font-family:var(--font-mono);}
.cal-tz .tz-sep{opacity:0.5;}

/* ---- Kalender: voller Tag mit Scroll + zwei Zeitspalten ---- */
.cal-bodyscroll{overflow-y:auto;overflow-x:hidden;max-height:62vh;}
/* Beide Beschriftungen der Zeitspalte stehen mittig, nicht am Rand:
   gemeldet am 06.09.2026 ("KW und Ganztaegig sind nicht mittig"). In einer
   Spalte von 58 Punkten ist die Mitte auch die ruhigere Lage, weil darunter
   die Uhrzeiten rechtsbuendig stehen und ein dritter Anschlag links die
   Spalte in drei Kanten teilt. */
/* **Mittig in der Hoehe, wie die Spaltenkoepfe daneben.** Sie stand am
   unteren Rand (`flex-end` plus 8 Punkte Polster), weil dort frueher der
   Zeitversatz stand und sich an die Stundenspalte anschmiegen sollte. Seit
   die Kalenderwoche darin steht, ist sie eine Beschriftung wie "Mo. 31."
   und gehoert auf deren Hoehe. Gemeldet am 06.09.2026. */
.cal-glabel{display:flex;align-items:center;justify-content:center;padding:6px 0;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);border-left:1px solid var(--border);}
.cal-glabel.strong{color:var(--color-text-2);border-left:0;}
.cal-times.secondary .cal-time{color:var(--color-text-muted);opacity:0.7;}
.cal-times.secondary{border-right:1px dashed var(--border);}
/* ---- Kalender: Detail-Ansicht ---- */
.cal-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.cal-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);padding:3px 9px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);}
.cal-chip.muted{color:var(--color-text-muted);}
.cal-join{display:inline-flex;align-items:center;gap:7px;margin:12px 0 4px;text-decoration:none;}
.cal-join svg{width:15px;height:15px;}
.cal-sec{margin-top:14px;}
.cal-sec-h{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted);margin-bottom:7px;}
.cal-att{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:var(--fs-sm);color:var(--color-text-2);}
.cal-att .m{font-weight:700;width:13px;text-align:center;flex-shrink:0;}
.cal-desc{font-size:var(--fs-sm);color:var(--color-text-2);line-height:1.55;max-height:220px;overflow-y:auto;white-space:normal;background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;}
/* ---- Kalender: Pre-Call-Briefing am Termin ---- */
.cal-brief{font-size:var(--fs-sm);color:var(--color-text-2);line-height:1.55;max-height:300px;overflow-y:auto;background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 13px;}
.cal-brief-h{font-family:var(--font-ui);font-weight:600;color:var(--color-text);margin:11px 0 3px;}
.cal-brief-h:first-child{margin-top:0;}
.cal-brief-li{padding-left:13px;position:relative;}
.cal-brief-li::before{content:'-';position:absolute;left:2px;color:var(--color-accent);}
.cal-brief-sp{height:6px;}
.cal-brief strong{color:var(--color-text);}
.cal-brief-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;font-size:var(--fs-sm);}
.cal-brief-hr{border:0;border-top:1px solid var(--border);margin:9px 0;}

/* ---- Kalender: Tagesansicht (Handy, Google-Kalender-Stil) ---- */
.cd{--cd-gutter:46px;display:flex;flex-direction:column;min-height:0;}
.cd-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cd-nav{flex:none;width:38px;height:38px;border:1px solid var(--border-strong);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md);font-size:var(--fs-xl);line-height:1;cursor:pointer;}
.cd-nav:active{background:var(--color-surface-2);}
.cd-title{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.18;min-width:0;}
.cd-title .cd-dow{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted);}
.cd-title .cd-date{font-weight:600;font-size:var(--fs-lg);white-space:nowrap;}
.cd-today{flex:none;padding:8px 13px;border:1px solid var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:600;cursor:pointer;}
.cd-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px;}
.cd-wd{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;color:var(--color-text-2);min-height:52px;}
.cd-wd-still{cursor:default;}
.cd-wd-dow{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.04em;color:var(--color-text-muted);}
.cd-wd-num{font-size:var(--fs-md);font-weight:600;}
.cd-wd-dot{width:5px;height:5px;border-radius:50%;background:var(--color-accent);}
.cd-wd.today .cd-wd-num,.cd-wd.today .cd-wd-dow{color:var(--color-accent);}
.cd-wd.sel{background:var(--color-accent);border-color:var(--color-accent);}
.cd-wd.sel .cd-wd-dow,.cd-wd.sel .cd-wd-num{color:var(--color-accent-fg);}
.cd-wd.sel .cd-wd-dot{background:var(--color-accent-fg);}
.cd-allday{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.cd-adchip{border:0;border-left:3px solid var(--ev-bar);background:var(--ev-bg);color:var(--color-text);border-radius:var(--radius-sm);padding:6px 10px;font-size:var(--fs-sm);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.cd-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--color-surface);}
.cd-grid{position:relative;}
.cd-hour{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--border);}
.cd-hour .cd-hl{position:absolute;top:-7px;left:6px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);background:var(--color-surface);padding-right:4px;}
.cd-ev{position:absolute;border-radius:var(--radius-sm);padding:3px 7px;overflow:hidden;cursor:pointer;border-left:3px solid var(--ev-bar);background:var(--ev-bg);box-shadow:0 1px 2px rgba(0,0,0,0.25);}
.cd-ev-t{font-weight:600;font-size:var(--fs-sm);color:var(--color-text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-ev-time{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ev-fg);display:flex;align-items:center;gap:4px;margin-top:1px;white-space:nowrap;overflow:hidden;}
.cd-ev-time svg{width:10px;height:10px;}
.cd-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--color-err);z-index:4;pointer-events:none;}
.cd-now::before{content:'';position:absolute;left:var(--cd-gutter);top:-5px;width:10px;height:10px;border-radius:50%;background:var(--color-err);transform:translateX(-50%);}
/* Tag/Woche-Umschalter im Kalender-Toolbar */
/* **Die Leiste ist rund, seit dem 06.09.2026**, nach dem Vorbild der
   Kalender-App am Mac: eine Kapsel als Rahmen, die aktive Stufe als eigene
   Kapsel darin, und kein Trennstrich mehr zwischen den Stufen.

   Der Trennstrich ist bewusst weg: Er teilt eine Kapsel in Kaesten und
   nimmt ihr genau die Form, wegen der sie gewaehlt wurde. Was die Stufen
   trennt, ist die gefuellte Marke, nicht eine Linie. */
.cal-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:2px;gap:2px;flex:none;background:var(--color-surface);}
/* Die Kalenderwoche als leise Beschriftung neben dem Datumsbereich. Sie war
   bis zum 24.08.2026 ein ganztaegiger Termin im Raster, siehe calendar_view. */
.cal-kw{margin-left:10px;font-family:var(--font-mono);font-size:var(--fs-sm);
  font-weight:400;color:var(--color-text-muted);letter-spacing:.04em;}
.cal-seg-btn{padding:6px 15px;background:transparent;color:var(--color-text-2);border:0;cursor:pointer;font-size:var(--fs-sm);font-weight:600;border-radius:var(--radius-pill);line-height:1.35;}
.cal-seg-btn:hover{background:var(--color-surface-3);}
.cal-seg-btn.active{background:var(--color-accent);color:var(--color-accent-fg);}
.cal-seg-btn.active:hover{background:var(--color-accent);}
/* **Der Trennstrich steht nur zwischen zwei ruhenden Stufen**, genau wie im
   Umschalter am Mac: "Tag Woche Monat | Jahr", wenn Woche gewaehlt ist. Wo
   die gefuellte Marke danebensteht, trennt sie schon, und ein Strich daneben
   waere doppelt. CSS kann das ohne eine Zeile JavaScript, weil sich beide
   Faelle ueber den Nachbarn ausdruecken lassen: die Stufe selbst ist aktiv,
   oder die davor. */
.cal-seg-btn+.cal-seg-btn{position:relative;}
.cal-seg-btn+.cal-seg-btn::before{content:'';position:absolute;left:-1.5px;top:7px;
  bottom:7px;width:1px;background:var(--border-strong);opacity:.85;}
.cal-seg-btn.active::before,.cal-seg-btn.active+.cal-seg-btn::before{display:none;}

/* Die Navigation traegt Umrisse wie am Mac, sonst schweben die Zeichen frei. */
.cal-nav .btn,.cal-leiste-unten>.btn-ghost{border:1px solid var(--border-strong);
  background:var(--color-surface);}
.cal-leiste-unten>.btn-ghost{border-radius:var(--radius-pill);width:32px;min-width:32px;padding:0;
  text-align:center;}

/* Die Navigation daneben in derselben Form: aussen zwei Kreise, in der
   Mitte die Kapsel. */
.cal-nav .btn{border-radius:var(--radius-pill);}
.cal-nav .btn:first-child,.cal-nav .btn:last-child{width:32px;min-width:32px;padding:0;text-align:center;}

.btn-rund{border-radius:var(--radius-pill);width:32px;min-width:32px;padding:0;
  border:1px solid var(--border-strong);
  background:var(--color-surface);color:var(--color-text-2);cursor:pointer;}

/* **Ein Knopf mit einem Zeichen zentriert ueber den Knopf, nicht ueber die
   Schrift.** Ein Schriftzeichen sitzt da, wo seine Schrift es setzt: Am
   06.09.2026 kam eine Nahaufnahme, auf der die Pfeile und die Lupe schief
   und zu klein in ihren Kreisen sassen. Mit `flex` und `place-items` ist die
   Mitte gerechnet, und die Groesse haengt am Knopf statt an der
   Schriftgroesse. */
.btn-zeichen{display:inline-flex;align-items:center;justify-content:center;
  width:32px;min-width:32px;height:32px;padding:0;gap:0;}
.btn-zeichen svg{width:17px;height:17px;stroke-width:2;display:block;}
.cal-nav .btn-zeichen svg{width:18px;height:18px;}
.btn-rund:hover{background:var(--color-surface-3);}

/* Zeitzone und Suche stehen rechts aussen, wie am Mac.

   **Sie heisst cal-zone und nicht cal-tz.** Den Namen cal-tz trug schon die
   Zeitzonen-Legende unter dem Raster, und zwei verschiedene Dinge unter
   einem Namen erben sich gegenseitig Abstaende und Anordnung an. */
.cal-zone{margin-left:auto;border-radius:var(--radius-pill);border:1px solid var(--border-strong);
  background:var(--color-surface);color:var(--color-text-2);
  font-size:var(--fs-sm);padding:6px 12px;max-width:230px;cursor:pointer;}
.cal-suche{display:flex;align-items:center;gap:6px;}
.cal-suche-feld{border-radius:var(--radius-pill);border:1px solid var(--border-strong);
  background:var(--color-surface);color:var(--color-text);
  font-size:var(--fs-sm);padding:6px 14px;width:210px;}
.cal-suche-feld:focus{outline:none;border-color:var(--color-accent);}

.cal-treffer{margin:10px 0 4px;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--color-surface-2);max-height:340px;overflow:auto;}
.cal-treffer-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--color-text-muted);position:sticky;top:0;
  background:var(--color-surface-2);}
.cal-treffer-zeile{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;
  border-bottom:1px solid var(--border);font-size:var(--fs-sm);}
.cal-treffer-zeile:last-child{border-bottom:0;}
.cal-treffer-zeile:hover{background:var(--color-surface-3);}
.cal-treffer-punkt{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--color-accent);flex:none;}
.cal-treffer-wann{font-family:var(--font-mono);color:var(--color-text-muted);white-space:nowrap;}
.cal-treffer-titel{color:var(--color-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-treffer-ort{color:var(--color-text-muted);margin-left:auto;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:38%;}
/* Zwei echte Zeit-Spalten in der Tagesansicht (Zypern | DE, Google-Stil) */
.cd-hl2{position:absolute;top:-7px;left:0;width:var(--cd-gutter);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 6px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted);}
.cd-hl2 b{font-weight:400;background:var(--color-surface);padding:0 2px;}
.cd-hl2 b:last-child{color:var(--color-text-2);}
.cd-tzhead{display:flex;justify-content:space-between;width:92px;box-sizing:border-box;padding:0 6px 5px;}
.cd-tzhead span{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.04em;color:var(--color-text-muted);}
.cd-tzhead span:last-child{color:var(--color-text-2);font-weight:600;}
/* Tagesansicht auf Desktop: Google-Stil, zentrierte Spalte mit eigenem Scroll */
@media(min-width:761px){
  .cd{max-width:900px;margin:0 auto;width:100%;}
  .cd-scroll{max-height:calc(100vh - 300px);min-height:460px;}
}

/* ---- Kalender am Handy: Tagesansicht füllt den Viewport (Kopf/Streifen fix, Achse scrollt intern).
   Nur im Kalender-Tab (data-view), damit die eingebettete Tagesansicht im Pilot NICHT Vollbild wird. ---- */
@media(max-width:760px){
  main.content[data-view="kalender"]:has(.cd){display:flex;flex-direction:column;overflow:hidden;}
  main.content[data-view="kalender"]:has(.cd) .ph,
  main.content[data-view="kalender"]:has(.cd) .cal-toolbar,
  main.content[data-view="kalender"]:has(.cd) .cal-legend{display:none;}
  main.content[data-view="kalender"] .cd-host{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  main.content[data-view="kalender"] .cd{flex:1 1 auto;}
}

/* ---- Tages-Pilot: zwei Spalten (Kalender links, Hebel/Steuerung rechts), ein Screen ohne Seiten-Scroll ---- */
main.content[data-view="tagespilot"]{display:flex;flex-direction:column;overflow:hidden;padding-bottom:16px;}
main.content[data-view="tagespilot"] .pilot-host{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.pilot-2col{flex:1 1 auto;min-height:0;display:flex;gap:16px;}
.pilot-cal{flex:1.5 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;}
.pilot-cal .cd{flex:1 1 auto;min-height:0;max-width:none;margin:0;}
.pilot-cal .cd-scroll{flex:1 1 auto;min-height:0;max-height:none;}
.pilot-side{flex:1 1 0;min-width:300px;max-width:440px;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.pilot-side .card{margin:0;}
@media(max-width:760px){
  main.content[data-view="tagespilot"]{overflow-y:auto;}
  main.content[data-view="tagespilot"] .pilot-host{overflow:visible;}
  .pilot-2col{flex-direction:column;min-height:0;gap:12px;}
  .pilot-cal{min-height:72vh;}
  .pilot-side{max-width:none;overflow:visible;}
}

/* ============================================================
   Demo-Modus: Umschalter, Banner, verwischte kritische Werte.
   Blur greift NUR unter .demo-on (im Echtbetrieb inaktiv).
   ============================================================ */
/* Demo-Umschalter: schlicht wie ein normaler Nav-Eintrag, unten links über dem
   Einklapp-Pfeil. Aktiv = dezent terracotta hinterlegt (wie ein aktiver Tab). */
.sb-foot{padding:2px 10px 6px;}
.demo-pill{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);
  background:transparent;color:var(--color-text-muted);font-size:var(--fs-md);font-weight:400;cursor:pointer;
  text-align:left;transition:background var(--transition-fast),color var(--transition-fast);}
.demo-pill svg{width:17px;height:17px;flex-shrink:0;color:var(--color-text-muted);transition:color var(--transition-fast);}
.demo-pill .lbl{flex:1;}
.demo-pill:hover{background:var(--color-sidebar-hover);color:var(--color-text);}
.demo-pill:hover svg{color:var(--color-text);}
.demo-pill.on{background:var(--color-accent-soft);color:var(--color-text);font-weight:600;}
.demo-pill.on svg{color:var(--color-accent);}
.demo-pill[disabled]{opacity:.5;cursor:default;}
.app.sb-collapsed .sb-foot{padding:2px 0 6px;}
.app.sb-collapsed .demo-pill{justify-content:center;padding:9px 0;}
.app.sb-collapsed .demo-pill .lbl{display:none;}

.demo-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:var(--radius-lg);
  background:var(--color-accent-soft,rgba(194,107,76,.12));border:1px solid var(--color-accent-ring,rgba(194,107,76,.4));
  color:var(--color-accent);font-size:var(--fs-base);font-weight:500;}
.demo-banner i{width:15px;height:15px;flex:0 0 auto;}

/* Verwischte Werte: server-seitig ist der Wert bereits ein Fake, der Blur ist der
   professionelle "vertraulich"-Look. Kräftig genug, dass auch große Zahlen (KPI-Werte)
   und die Unterzeilen (Ziel/Ø) nicht lesbar sind. Label bleibt scharf. */
.demo-on .kpi.sens .k-value,
.demo-on .kpi.sens .k-sub,
.demo-on #main[data-view="sales"] .k-value,
.demo-on #main[data-view="sales"] .k-sub,
.demo-on #main[data-view="sales"] .s-val,
/* Seit dem 04.09.2026 wird hier NICHTS mehr verwischt.
   Im Demo-Modus stehen erfundene Zahlen auf dem Schirm, keine echten. Sie zu
   verwischen waere sinnlos und schaedlich zugleich: Ein Interessent soll das
   System arbeiten sehen, nicht Balken ueber Zahlen. Wer hier wieder einen
   Blur einbaut, hat den Umbau missverstanden, siehe docs/demo-modus.md. */
/* Kleinere Werte (Unterzeilen, Karten-Subs, Tabellenzellen, Funnel) brauchen weniger
   Blur, um als Fläche erkennbar zu bleiben, aber unlesbar. */


/* ---- Handy-Feinschliff: kleineres Logo + Demo-Modus als Eck-Icon ----
   Am Dateiende, damit es zuverlässig gewinnt (auch wenn der eingeklappte
   Desktop-Zustand am Handy mitkommt). */
@media (max-width:760px){
  /* Logo etwas kleiner */
  .sb-head{padding:16px 18px;}
  /* Nur die zum Thema passende Fassung, sonst stünden beide untereinander.
     Die Auswahl bleibt dieselbe wie oben, hier kommt nur die Breite dazu.
     Volle Breite seit dem 16.08.2026: Die 62 % stammen aus der Zeit der alten,
     halb so breiten Marke. Das echte Logo ist 6,9 mal so breit wie hoch, bei
     62 % blieben davon 25 Punkte Höhe, und die Unterzeile war nicht mehr zu
     lesen. Wer die Marke tauscht, prüft diese Zahl mit. */
  .sb-wordmark{width:100%;}
  .sb-wordmark.dunkel,.app.sb-collapsed .sb-wordmark.dunkel{display:block;}
  .sb-wordmark.hell,.app.sb-collapsed .sb-wordmark.hell{display:none;}
  html[data-thema="hell"] .sb-wordmark.dunkel,
  html[data-thema="hell"] .app.sb-collapsed .sb-wordmark.dunkel{display:none;}
  html[data-thema="hell"] .sb-wordmark.hell,
  html[data-thema="hell"] .app.sb-collapsed .sb-wordmark.hell{display:block;}
  .app.sb-collapsed .sb-mark-mini{display:none;}

  /* Demo-Modus: kleines Icon unten links in der Ecke, ohne Label */
  .sb-foot,.app.sb-collapsed .sb-foot{padding:6px 12px 10px;}
  .demo-pill,.app.sb-collapsed .demo-pill{width:auto;justify-content:flex-start;padding:9px;border-radius:var(--radius-lg);}
  .demo-pill .lbl,.app.sb-collapsed .demo-pill .lbl{display:none;}
  .demo-pill svg{width:20px;height:20px;}
}

/* ============================================================
   Sprach-Eingabe (voice-input.js): Mikro-Knopf an jedem Textfeld.
   Der Wrapper erbt die Layout-Rolle des Feldes (per JS), der Knopf sitzt
   absolut im rechten Feld-Gutter. Fürs Handy großzügige Tap-Fläche.
   ============================================================ */
.vi-wrap{position:relative;display:inline-flex;align-items:stretch;max-width:100%;box-sizing:border-box;vertical-align:top;}
.vi-wrap--area{align-items:stretch;}
.vi-mic{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border:0;border-radius:var(--radius-pill);cursor:pointer;padding:0;
  background:transparent;color:var(--color-text-muted);
  transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);}
.vi-mic:hover{background:var(--color-surface-2);color:var(--color-accent);}
.vi-mic svg{width:17px;height:17px;}
/* an mehrzeiligen Feldern unten-rechts pinnen (überlappt nicht die erste Zeile) */
.vi-mic--area{top:auto;bottom:6px;transform:none;}
/* Aufnahme läuft: roter, pulsierender Stopp-Knopf */
.vi-mic.rec{background:#C0392B;color:#fff;animation:vi-pulse 1.4s ease-out infinite;}
.vi-mic.rec:hover{background:#D0432F;color:#fff;}
/* wird transkribiert: Spinner */
.vi-mic.busy{color:var(--color-accent);cursor:default;}
.vi-mic.busy svg{animation:vi-spin 0.9s linear infinite;}
@keyframes vi-pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,0.55);}70%{box-shadow:0 0 0 8px rgba(192,57,43,0);}100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}}
@keyframes vi-spin{to{transform:rotate(360deg);}}
/* Laufzeit-Chip über dem Knopf */
.vi-timer{position:absolute;right:4px;top:-24px;z-index:3;pointer-events:none;
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;line-height:1;
  color:#fff;background:#C0392B;padding:4px 7px;border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);white-space:nowrap;}
.vi-mic--area ~ .vi-timer,.vi-wrap--area .vi-timer{top:auto;bottom:42px;}

/* Handy: größere Tap-Fläche (≥44px Ziel), Knopf gut erreichbar */
@media (max-width:760px){
  .vi-mic{width:38px;height:38px;right:4px;}
  .vi-mic svg{width:20px;height:20px;}
}

/* Abbrechen-Knopf (X) während der Aufnahme: links neben dem Stopp-Knopf */
.vi-cancel{position:absolute;right:42px;top:50%;transform:translateY(-50%);z-index:2;
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border:0;border-radius:var(--radius-pill);cursor:pointer;padding:0;
  background:var(--color-surface-2);color:var(--color-text-muted);
  transition:background var(--transition-fast),color var(--transition-fast);}
.vi-cancel:hover{background:var(--color-surface);color:var(--color-text);}
.vi-cancel svg{width:16px;height:16px;}
.vi-cancel--area{top:auto;bottom:6px;transform:none;}
@media (max-width:760px){
  .vi-cancel{right:48px;width:38px;height:38px;}
  .vi-cancel svg{width:19px;height:19px;}
}

/* ===== Zahlen um den Jarvis-Kern =====
   Vorzeigbares links und rechts der Ringe: Reichweite, Aufbau, Jahre. Keine
   Euro-Beträge und keine Namen, siehe apps/dashboard/jarvis_hud.py.

   Die Zahlen stehen bewusst ruhig da und blinken nicht. Sie sind Beleg, kein
   Alarm: Wer sie liest, soll den Aufbau sehen, nicht aufschrecken. */
.jv-hud-feld{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,52px);width:100%;}
.jv-werte{display:flex;flex-direction:column;gap:20px;min-width:96px;}
.jv-werte-links{text-align:right;align-items:flex-end;}
.jv-werte-rechts{text-align:left;align-items:flex-start;}
.jv-wert{opacity:0;animation:jv-wert-auf .7s ease-out forwards;}
.jv-werte-links .jv-wert:nth-child(2){animation-delay:.12s;}
.jv-werte-links .jv-wert:nth-child(3){animation-delay:.24s;}
.jv-werte-rechts .jv-wert:nth-child(1){animation-delay:.06s;}
.jv-werte-rechts .jv-wert:nth-child(2){animation-delay:.18s;}
.jv-werte-rechts .jv-wert:nth-child(3){animation-delay:.30s;}
@keyframes jv-wert-auf{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.jv-wert-zahl{font-family:var(--font-mono);font-size:clamp(17px,2.4vw,23px);font-weight:600;
  color:var(--color-accent);line-height:1.05;letter-spacing:-.01em;}
.jv-wert-label{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.11em;color:var(--color-text-2);margin-top:3px;}
.jv-wert-sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:1px;}
@media (prefers-reduced-motion:reduce){.jv-wert{animation:none;opacity:1;}}
/* Am Handy unter den Ring statt daneben, sonst wird beides zu schmal. */
@media (max-width:560px){
  .jv-hud-feld{flex-direction:column;gap:26px;}
  .jv-werte{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px 24px;min-width:0;width:100%;}
  .jv-werte-links,.jv-werte-rechts{text-align:center;align-items:center;}
  .jv-wert{min-width:88px;}
}

/* Der Wochen-Pfeil an der Follower-Zahl. Klein und neben der Zahl, nicht
   darunter: Er gehört zu ihr, er ist keine eigene Kennzahl.
   Grün und Rot sind hier zulässig, es ist ein Werkzeug, keine Marke. */
.jv-trend{font-size:var(--fs-sm);font-weight:600;margin-left:7px;vertical-align:2px;
  letter-spacing:0;white-space:nowrap;}
.jv-trend.auf{color:var(--color-ok);}
.jv-trend.ab{color:var(--color-err);}
.jv-trend.gleich{color:var(--color-text-muted);}

/* ============================================================
   ===== Kommunikations-Leiste =====
   Ein Strom aus allen Kanaelen. Bewusst KEINE Tabelle: Am Handy ist eine
   Tabelle mit fuenf Spalten unlesbar, und diese Liste wird unterwegs
   gelesen. Drei Spalten, davon zwei schmal.
   ============================================================ */
.kom-liste{display:flex;flex-direction:column;}
.kom-zeile{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;
  padding:12px 4px;border-bottom:1px solid var(--border);}
.kom-zeile.klickbar{cursor:pointer;}
.kom-zeile.klickbar:hover{background:var(--color-surface-2);}
.kom-kanal{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--color-surface-2);color:var(--color-text-muted);flex:none;}
.kom-kanal svg{width:16px;height:16px;}
/* Ausgehendes tritt zurueck: Der Blick sucht, was HEREINkam. */
.kom-zeile[data-richtung="aus"] .kom-kanal{opacity:.45;}
.kom-zeile[data-richtung="aus"] .kom-mitte{opacity:.72;}
.kom-mitte{min-width:0;}
.kom-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kom-name{font-weight:600;font-size:var(--fs-base);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.kom-raus,.kom-privat{font-family:var(--font-mono);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em;padding:1px 6px;border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text-muted);}
.kom-privat{color:var(--color-accent);}
.kom-betreff{font-size:var(--fs-sm);color:var(--color-text-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kom-auszug{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kom-zeit{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-muted);
  white-space:nowrap;padding-top:3px;}

/* Anhänge an einer Nachricht (seit 17.08.2026).
   Die Rundung kommt aus --radius-xs, die Farbe aus dem Akzent: keine eigene
   Palette an dieser Stelle, sonst hat der Reiter seinen eigenen Dialekt. */
.kom-anhaenge{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.kom-anhang{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  font-size:var(--fs-xs);font-family:inherit;color:var(--color-accent);
  background:var(--color-accent-soft);border:1px solid var(--border);
  border-radius:var(--radius-xs);padding:3px 8px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kom-anhang:hover{border-color:var(--color-accent);}
.kom-anhang i{width:13px;height:13px;flex:none;}
/* Was nicht geholt werden konnte: sichtbar, aber stumpf und ohne Klick.
   Es soll auffallen, dass es etwas gibt, nicht dazu einladen, es zu drücken. */
.kom-anhang.fehlt{color:var(--color-text-muted);background:transparent;
  cursor:default;border-style:dashed;}
/* Gestaffelt, nicht durchgehend rot. Beim ersten Entwurf war ab 14 Tagen alles
   rot, und damit sagte Rot gar nichts mehr: Zehn von vierzehn Zeilen leuchteten.
   Jetzt Gold ab zwei Wochen, Rot erst ab sechs. Die CI kennt sonst kein Rot,
   hier ist es dieselbe Ausnahme wie bei der Fristampel, und sie bleibt selten. */
.kom-zeit.warn{color:var(--color-warn);}
.kom-zeit.alt{color:var(--color-err);font-weight:600;}
/* Der Erledigt-Knopf steht nur in der Arbeitsliste und bekommt eine eigene
   Spalte, damit er die Zeit nicht verdraengt. Er tritt zurueck, bis die Zeile
   angefasst wird: Die Liste soll man lesen koennen, ohne dass an jeder Zeile
   ein Knopf schreit. Am Touchscreen bleibt er sichtbar, dort gibt es kein
   Hover, und genau daran scheitern solche Knoepfe sonst am Handy. */
.kom-zeile:has(.kom-erledigt){grid-template-columns:34px 1fr auto auto;}
.kom-erledigt{align-self:center;opacity:.35;transition:opacity .12s ease;}
.kom-zeile:hover .kom-erledigt,.kom-erledigt:focus-visible{opacity:1;}
@media(hover:none){.kom-erledigt{opacity:.8;}}
@media(max-width:760px){
  .kom-zeile{grid-template-columns:28px 1fr;gap:10px;padding:11px 2px;}
  .kom-zeile:has(.kom-erledigt){grid-template-columns:28px 1fr auto;}
  .kom-zeit{grid-column:2;padding-top:4px;}
}

/* ============================================================
   ===== Heller Modus =====
   Schwarz den ganzen Tag ist anstrengend. Die Farben hier sind nicht
   erfunden, sondern die ZWEITE Palette der CI, die fuer Kundendokumente:
   Off-White #F5F5DC, Anthrazit #36454F, Dunkelgold #B8860B. Damit bleibt
   das Cockpit in der Marke, statt ein zweites Aussehen zu erfinden.

   Bewusst KEIN reines Weiss als Grund. Weiss auf einem grossen Schirm
   blendet abends genauso, wie Schwarz tagsueber ermuedet. Das warme
   Off-White ist der eigentliche Gewinn.

   Gold wird fuer Text eine Spur dunkler (#9A7209 statt #B8860B): Helles
   Gold auf hellem Grund liest sich nicht, das ist keine Geschmacksfrage,
   sondern Kontrast.
   ============================================================ */
html[data-thema="hell"]{
  --color-bg:#F5F5DC; --color-surface:#FCFBF2; --color-surface-2:#EFEEDC;
  --color-sidebar-hover:rgba(54,69,79,0.06);
  --color-text:#36454F; --color-text-2:#55636D; --color-text-muted:#7C8891;
  --color-accent:#9A7209; --color-accent-hover:#B8860B; --color-accent-deep:#7A5A06;
  --color-accent-soft:rgba(184,134,11,0.14); --color-accent-ring:rgba(184,134,11,0.45);
  --color-accent-fg:#FFFBF0;
  --color-ok:#5F6E37; --color-warn:#A9762B; --color-err:#9A3D2E; --color-info:#3F7A96;
  --color-ok-soft:rgba(95,110,55,0.14); --color-warn-soft:rgba(169,118,43,0.16);
  --color-err-soft:rgba(154,61,46,0.13); --color-info-soft:rgba(63,122,150,0.14);
  --color-err-fg:#FFFFFF;
  --border:rgba(54,69,79,0.14); --border-strong:rgba(54,69,79,0.24);
  --shadow-lg:0 10px 26px rgba(54,69,79,0.16);
}
html[data-thema="hell"] body{color-scheme:light;}
/* Kacheln duerfen sich vom Grund abheben, im Dunkeln macht das der Kontrast
   von allein, im Hellen braucht es einen Hauch Schatten. */
html[data-thema="hell"] .card{box-shadow:0 1px 2px rgba(54,69,79,0.06);}
/* **Die Farbe kommt aus dem Token, nicht aus einer Zahl.** Bis zum
   03.09.2026 stand hier zweimal #EFEEDC, ein Oliv aus der alten Palette.
   Die SQUADRAI-Gestalt setzt nur Variablen, also kam sie gegen diese beiden
   Zeilen nicht an: Am Handy war die Kopfleiste gelblich, waehrend der Rumpf
   darunter schon auf Papier stand. "Es passt gar nichts zu unserem
   Squadrai", und das stimmte genau hier. Dieselbe Lehre wie am 24.08.2026,
   nur andersherum: Damals fehlte die Variable, hier stand die Zahl davor. */
html[data-thema="hell"] .sidebar{background:var(--color-surface-2);}
html[data-thema="hell"] .mobile-bar{background:var(--color-surface-2);}

/* Jarvis bleibt dunkel, auch im hellen Modus. Der Kreis IST ein Geraet, und
   ein Instrument mit leuchtenden Ringen auf beigem Grund saehe aus wie ein
   Fehler. Dieselbe Trennung wie bei der CI: Werkzeug und Dokument sind zwei
   verschiedene Welten. */
html[data-thema="hell"] .jv-card{
  background:#17130F;border-color:rgba(242,232,220,0.10);
  --color-text:#F2E8DC; --color-text-2:#C4B8A8; --color-text-muted:#8C8479;
  --border:rgba(242,232,220,0.10); --color-surface-2:#1F1914;
  color:#F2E8DC;}
html[data-thema="hell"] .jv-card .jv-status-label{color:#F2E8DC;}

/* Der Umschalter unten in der Leiste. */
.thema-schalter{display:flex;align-items:center;gap:4px;width:100%;
  padding:5px 6px;border-radius:var(--radius-pill);background:var(--color-surface-2);}
.thema-knopf{flex:1;display:grid;place-items:center;height:26px;border:0;cursor:pointer;
  background:transparent;color:var(--color-text-muted);border-radius:var(--radius-pill);
  transition:background var(--transition-fast),color var(--transition-fast);}
.thema-knopf:hover{color:var(--color-text);}
.thema-knopf.an{background:var(--color-bg);color:var(--color-accent);}
.thema-knopf svg{width:15px;height:15px;}
.app.sb-collapsed .thema-schalter{flex-direction:column;gap:2px;background:transparent;}
@media(max-width:760px){.thema-schalter{margin-top:6px;}}

/* Detailansicht einer Nachricht: Text, Anhaenge, Antwort. */
.kom-text{margin-top:10px;white-space:pre-wrap;font-size:var(--fs-md);
  line-height:1.55;color:var(--color-text);max-height:44vh;overflow-y:auto;
  padding:12px 14px;background:var(--color-surface-2);border-radius:var(--radius-lg);
  border:1px solid var(--border);}
.kom-anhang{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:6px;
  border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;
  font-size:var(--fs-base);}
.kom-anhang:hover{background:var(--color-surface-2);border-color:var(--border-strong);}
.kom-anhang svg{width:15px;height:15px;color:var(--color-text-muted);flex:none;}
.kom-anhang span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Das PDF wird IM Cockpit gezeigt. Wer es herunterlaedt, faellt am Handy aus
   der App und findet nicht zurueck: genau der Fehler, der beim Post-Reiter
   schon einmal behoben wurde. */
.kom-vorschau{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--color-surface-2);}
.kom-vorschau iframe{width:100%;height:min(60vh,540px);border:0;display:block;}
.kom-vorschau img,.kom-vorschau video{width:100%;height:auto;display:block;}
.kom-vorschau audio{width:100%;display:block;padding:12px;}
.kom-vorschau.leer{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px;}
.kom-antwort{width:100%;margin-top:14px;padding:11px 13px;border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);background:var(--color-surface);
  color:var(--color-text);font-family:inherit;font-size:var(--fs-md);resize:vertical;}
.kom-antwort:focus{outline:none;border-color:var(--color-accent);}
/* Der Weg steht im Fuss, BEVOR gesendet wird. Wer nicht sieht, wohin etwas
   geht, kann es auch nicht freigeben. */
.kom-weg{flex:1;font-size:var(--fs-sm);color:var(--color-text-2);line-height:1.4;
  padding-right:12px;}

/* ============================================================
   Bildschirmgrößen: eine Stelle für die Skalierung
   ============================================================
   **Das iPad fiel zwischen die Stühle.** Bis zum 14.08.2026 gab es genau zwei
   Layouts: unter 760px das Handy mit eigener Leiste, Schublade und
   Sicherheitszonen, darüber das volle Desktop-Layout. Ein iPad im Querformat
   hat 1024 Punkte, bekam also die Rechner-Maße: 36px Rand, 248px Seitenleiste,
   34px große Kennzahlen. Auf 1024 Punkten ist das zu viel, die Tabelle lief aus
   ihrer Karte heraus und der Text unter die Uhr.

   Deshalb drei Stufen statt zwei. Geändert werden **nur die Marken oben**, nicht
   die einzelnen Bauteile: Jede Komponente rechnet ohnehin mit `--fs-*` und
   `--main-padding-*`, also skaliert sie mit. Wer hier eine Größe anfasst, fasst
   sie für das ganze Cockpit an, und genau das ist der Sinn. Eine zweite
   Größenregel irgendwo in einem Reiter wäre derselbe Dialekt, gegen den die
   gemeinsame Ampel gebaut wurde.

   Die Schrift geht dabei um rund ein Zehntel herunter, der Rand um die Hälfte.
   **Der Rand bringt mehr als die Schrift**: Er kostet auf beiden Seiten und in
   jeder Karte, während zu kleine Schrift nur unleserlich wird.
   ============================================================ */

/* ---- Tablet: iPad quer und hoch ----
   Am 16.08.2026 ein zweites Mal enger gestellt, auf Ansage: "Die Auflösung auf
   dem iPad könnte allgemein etwas kleiner sein, damit mehr auf den Bildschirm
   passt." Gemessen an der Versicherungsansicht bei 1024 Punkten: vorher passten
   15 Tabellenzeilen auf den Schirm.

   **Der Zeilenabstand bringt hier mehr als die Schriftgröße.** Eine Tabelle mit
   139 Zeilen gewinnt an jeder Zeile doppelt: einmal an der Schrift, einmal am
   Innenabstand der Zelle. Die Schrift geht deshalb nur um rund ein Zehntel
   herunter, die Abstände um ein Drittel. So bleibt der Text lesbar und die
   Seite wird trotzdem deutlich kürzer. */
@media (min-width:761px) and (max-width:1180px){
  :root{
    --fs-xs:9px; --fs-sm:10px; --fs-base:11px; --fs-md:12px;
    --fs-lg:15px; --fs-xl:17px; --fs-2xl:20px; --fs-3xl:23px;
    --main-padding-x:16px; --main-padding-y:14px;
    --sidebar-width:190px;
    --karten-abstand:10px;
  }
  /* Etwas straffer als die 1.5 des Grundlayouts, aber nicht gedrängt: Unter
     1.35 kleben die Zeilen aneinander, und dann liest man schlechter statt
     mehr. */
  body{line-height:1.42;}
  .card{padding:11px 13px;}
  .kpi{padding:10px 12px;gap:4px;}
  .ph{margin-bottom:12px;gap:12px;}
  .ph h2{margin-top:5px;}
  /* Oben bleibt mehr Luft, als die Verkleinerung sonst vorgibt: Das iPad hat
     seine Statusleiste direkt darüber, und mit 11 Punkten klebte das Logo an
     der Uhrzeit des Geräts. Zur Seite wird gespart, nach oben nicht. */
  .sb-head{padding:18px 14px 10px;}
  .sb-head h1{font-size:var(--fs-base);}
  .nav-item{padding:5px 9px;gap:8px;}
  .nav-item svg{width:15px;height:15px;}
  .sb-uhr{margin:0 14px 8px;padding:0 0 11px;}
  .card-head{margin-bottom:10px;}
  table.tbl{font-size:var(--fs-sm);}
  table.tbl th{padding:4px 7px;}
  table.tbl td{padding:5px 7px;}
}

/* ---- Handy ---- */
@media (max-width:760px){
  :root{
    --fs-xs:9px; --fs-sm:10px; --fs-base:12px; --fs-md:13px;
    --fs-lg:16px; --fs-xl:18px; --fs-2xl:21px; --fs-3xl:25px;
    --karten-abstand:10px;
  }
  .card{padding:13px 14px;}
  .kpi{padding:12px 14px;gap:5px;}
  table.tbl{font-size:var(--fs-sm);}
  /* **Kennzahlen bleiben auf dem Handy zweispaltig.** Einspaltig füllten die
     vier Kacheln des Fax-Reiters allein den ersten Bildschirm, und der Blick
     aufs Handy ist genau der, der schnell gehen soll. Zwei nebeneinander sind
     bei 375 Punkten noch gut lesbar, die Schrift ist ohnehin kleiner.
     Breite Inhalte bleiben einspaltig: `cols-2` trägt meist Tabellen und
     Listen, die nebeneinander nicht mehr lesbar wären. */
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* Sehr schmale Geräte: dann doch untereinander, sonst bricht die Zahl um. */
@media (max-width:359px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr);}
}

/* ---- Kästchen unter Kästchen: der Abstand kommt vom Container ----
   Bis zum 14.08.2026 setzte ihn jede Ansicht selbst, mit `marginTop = '16px'`
   an 31 Stellen. Wer das vergaß, bekam gar keinen: Im Reiter "Fax" (damals "Versand der Faxe")
   klebten die Karten mit 0 Pixeln aneinander, während die Kacheln darüber 16
   auseinanderstanden. Auf dem iPad fiel das sofort auf, weil dort ohnehin wenig
   Platz ist und jede Kante zählt.

   Deshalb hier, an einer Stelle, für alle Ansichten. Bewusst eng gefasst auf
   Karten und Raster als direkte Geschwister: Ein `.card` INNERHALB eines
   Rasters bekommt nichts, sonst verschöbe die Regel die Spalten. Setzt eine
   Ansicht bewusst einen kleineren Abstand, gewinnt sie weiterhin, denn ein
   Stil am Element schlägt die Regel hier. */
main.content > .card + .card, main.content > .card + .grid,
main.content > .grid + .card, main.content > .grid + .grid,
main.content > div:not(.grid) > .card + .card,
main.content > div:not(.grid) > .card + .grid,
main.content > div:not(.grid) > .grid + .card,
main.content > div:not(.grid) > .grid + .grid{margin-top:var(--karten-abstand);}

/* ---- Was nie über seinen Rand hinausläuft ----
   Ein langer Dateiname ohne Leerzeichen ist ein einziges Wort, und ein Wort
   bricht nicht um. "Fristverlaengerung_Holding_2024_unterschrieben.pdf" schob
   deshalb die Tabelle aus ihrer Karte heraus: Die Karte wirkte breiter als die
   Kacheln darüber, und am rechten Rand stand ein abgeschnittener Strich.

   Beides zusammen, weil jedes für sich Lücken lässt: Der Umbruch löst den
   Normalfall, der Scroller fängt ab, was sich partout nicht brechen lässt
   (breite Zahlenkolonnen, eingebettete Bilder). */
/* `break-word`, nicht `anywhere`: Beide brechen ein zu langes Wort um, aber
   `anywhere` erlaubt dem Browser zusätzlich, die Spalte schmaler zu machen als
   ihr längstes Wort. Dann wird aus "jährlich" ein "jährlic h". Mit
   `break-word` bleibt das Wort die Untergrenze, und was dann nicht mehr passt,
   schiebt man im Rahmen seitlich. */
table.tbl td,table.tbl th{overflow-wrap:break-word;}
.card{overflow-x:auto;}

/* ---- Wo Umbrechen nicht mehr reicht ----
   Der Umbruch oben löst das lange Wort, nicht die vielen Spalten. Der
   Versicherungsspiegel hat neun, und bei 768 Punkten Breite blieben davon
   Reste: aus "Kündigen bis" wurde "KÜND IGEN BIS", aus "offen" ein "of fe n".

   Deshalb zwei Regeln statt einer Bildschirmgrenze. **Die Überschrift bricht
   nie**, sie ist kurz und benennt die Spalte. Und **die Tabelle darf breiter
   sein als ihr Platz**, dann schiebt man sie seitlich. Wo sie passt, ändert
   sich nichts, es gibt also keine Größe, ab der es plötzlich anders aussieht.
   Der Rahmen kommt aus `dataTable()` in components.js. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}

/* **Eine Tabelle mit acht Spalten schiebt, sie quetscht nicht.** `width:100%`
   und ein Rahmen mit `overflow-x:auto` schliessen sich aus: Die Tabelle kann
   dann nie breiter werden als ihr Rahmen, also bleibt ihr nur, die Spalten
   zusammenzudruecken. Auf dem iPad stand deshalb in der Regel-Tabelle ein
   Wort je Zeile, gemeldet am 09.09.2026.

   Die Mindestbreite gilt nur dort, wo es eng wird. Am Schreibtisch aendert
   sich nichts. */
@media (max-width:1180px){
  /* 900 waren zu wenig: Bei acht Spalten brachen "Werbung" und "Behoerde"
     mitten im Wort um, weil der Tablet-Block `overflow-wrap:anywhere` setzt.
     Gemessen am 09.09.2026 auf 1024 Punkten Breite. */
  .rg-tabelle{min-width:1040px;}
  /* Fuenf Knoepfe nebeneinander hielten 340 von 900 Punkten fest. */
  .rg-tabelle .rg-knoepfe{white-space:normal;}
  /* **Der Platz muss verteilt werden, sonst nimmt ihn die Namensspalte.**
     Ohne feste Breiten wuchs sie auf 529 von 1040 Punkten, weil ihr Inhalt
     der laengste ist, und "Was sie tut" blieb bei 54 Punkten stehen: also
     genau der Fehler von vorher, nur eine Spalte weiter. */
  .rg-tabelle th:nth-child(1),.rg-tabelle td:nth-child(1){width:250px;}
  .rg-tabelle th:nth-child(3),.rg-tabelle td:nth-child(3){min-width:150px;}
  .rg-tabelle th:nth-child(4),.rg-tabelle td:nth-child(4){min-width:190px;}
}
.rg-knoepfe{white-space:nowrap;}
/* Die Begruendung einer Regel: zwei Zeilen, der Rest auf Klick. */
.rg-warum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;cursor:pointer;line-height:1.35;}
.rg-warum.offen{-webkit-line-clamp:unset;overflow:visible;}
table.tbl th{white-space:nowrap;}

/* **Auf dem Tablet darf die Ueberschrift umbrechen.** Sonst diktiert sie die
   Spaltenbreite: "Versicherungsnehmer" haelt 168 Punkte fest, obwohl
   darunter "Sam Squillacioti" steht und die Haelfte genuegt.

   **Diese Regel muss NACH der Zeile darueber stehen.** Der erste Anlauf am
   06.09.2026 setzte sie in den Tablet-Block weiter oben, gleiche
   Spezifitaet, und die spaetere Zeile gewann: gemessen 1462 Punkte vorher
   wie nachher. Eine Regel, die nichts tut, sieht im Quelltext aus wie eine,
   die etwas tut. */
@media (max-width:1180px){
  /* Nebenspalten fallen weg, bevor die Tabelle aus dem Bild laeuft. Welche
     das sind, entscheidet die Ansicht ueber `neben: true`, nicht der
     Stilsatz: Nur sie weiss, worauf man verzichten kann. */
  table.tbl th.nebenspalte, table.tbl td.nebenspalte{display:none;}
}
@media (min-width:761px) and (max-width:1180px){
  table.tbl th{white-space:normal;}
  /* Lange Woerter brechen, statt die Spalte aufzuspannen: eine
     Vertragsnummer oder eine Mailadresse ohne Leerzeichen tut das sonst. */
  table.tbl td{overflow-wrap:anywhere;}
  /* **Die Knopfspalte darf umbrechen.** Sie steht am Ende und traegt
     nebeneinander Rufnummer, Nachfassen und Ablegen: gemessen 538 von 861
     Punkten in der Anfragen-Tabelle, also mehr als die Haelfte fuer drei
     Knoepfe. Umgebrochen stehen sie untereinander und die Zeile wird hoeher,
     was auf einem Tablet die guenstigere Richtung ist: Nach unten kann man
     wischen, zur Seite nicht. */
  table.tbl td:last-child{white-space:normal;}
}

/* ---- Dokument-Betrachter ----
   Die Bühne schneidet ab, das Blatt darin wird verschoben und skaliert. Beides
   rechnet `dokumentZeigen()` in components.js aus.

   `touch-action:none` ist keine Feinheit, sondern Bedingung: Ohne das nimmt der
   Browser jede Wischbewegung für sein eigenes Scrollen, und das Blatt bewegt
   sich nie. Genau daran scheiterte der Betrachter vor dem 15.08.2026.

   Die Höhe ist großzügig, weil ein A4-Blatt anderthalb mal so hoch wie breit
   ist: Bei einer flachen Bühne bliebe von der eingepassten Seite ein
   Briefmarkenformat übrig. */
/* **Das Fenster bekommt eine feste Höhe, die Bühne den Rest.** Vorher hatte die
   Bühne 72vh und der Fensterkörper schnitt sie ab: Sie rechnete mit 551 Pixeln,
   sichtbar waren 461, und die eingepasste Seite stand unten über. Wer die Höhe
   an zwei Stellen bestimmt, bekommt zwei Antworten. Jetzt bestimmt sie das
   Fenster, und die Bühne nimmt, was übrig bleibt. */
.modal.modal-dok{height:min(92vh,1040px);display:flex;flex-direction:column;}
/* `max-height:none` ist der entscheidende Teil: Der Fensterkörper ist sonst
   generell auf 60vh gedeckelt, damit ein langer Text nicht aus dem Bild läuft.
   Hier soll er aber genau den Platz füllen, den das Fenster vorgibt. Ohne diese
   Zeile blieb unter der Fußleiste ein Streifen leer, während oben die Seite
   klein gerechnet wurde. */
.modal.modal-dok .modal-body{flex:1 1 auto;min-height:0;max-height:none;
  display:flex;flex-direction:column;overflow:hidden;}
.modal.modal-dok .modal-foot{flex:0 0 auto;}
.dok-buehne{position:relative;overflow:hidden;touch-action:none;user-select:none;
  flex:1 1 auto;min-height:0;border-radius:var(--radius-md);background:#101012;
  border:1px solid var(--border);}
.dok-blatt{position:absolute;top:0;left:0;transform-origin:0 0;
  will-change:transform;background:#fff;
  /* Beim Vergrößern lieber weich als hart gerastert: Bis das schärfere Bild
     vom Server da ist, sieht ein geglättetes Zwischenbild besser aus. */
  image-rendering:auto;pointer-events:none;}
@media (max-width:760px){
  /* Am Handy ebenso: Die allgemeine Deckelung (dort calc(82vh - 116px)) würde
     die Bühne wieder kleinrechnen. */
  .modal.modal-dok{height:min(94vh,900px);max-height:94vh;}
  .modal.modal-dok .modal-body{max-height:none;padding:12px;}
}

/* ---- Die Uhr in der Seitenleiste ----
   Sie steht oben, weil sie für alles gilt: Jede Frist und jede Ampel im Cockpit
   rechnet gegen genau diesen Zeitpunkt. Beim Tageswechsel rechnet die Ansicht
   sich selbst neu, siehe app.js.

   Bewusst ruhig gehalten: Die Zeit in der Textfarbe, das Datum gedämpft. Gold
   ist hier fehl am Platz, es gehört der Ampel und der Betonung, nicht einer
   Anzeige, die immer da ist.

   Mittig gesetzt, und das Datum in derselben gesperrten Versalien-Schrift wie
   die Beschriftungen der Kennzahlen ("DEAL-VOLUMEN LAUFEND"). So liest sich der
   Kopf als ein Element statt als zwei zufällig gestapelte Zeilen. Die Linie
   darunter endet vor dem Rand, damit sie den Block abschließt, ohne die
   Seitenleiste in zwei Hälften zu schneiden. */
.sb-uhr{margin:0 18px 10px;padding:0 0 14px;text-align:center;
  border-bottom:1px solid var(--border);}
.uhr-zeit{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:600;
  line-height:1.05;letter-spacing:0.01em;color:var(--color-text);
  font-variant-numeric:tabular-nums;}
.uhr-datum{font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--color-text-muted);margin-top:6px;text-transform:uppercase;
  letter-spacing:0.1em;white-space:nowrap;}
/* Eingeklappt bleibt die Zeit, das Datum passt nicht mehr hinein. Die Linie
   auch nicht: Auf 56 Punkten Breite sieht sie aus wie ein Strich im Nichts. */
.app.sb-collapsed .sb-uhr{margin:0 6px;padding:0 0 10px;border-bottom:0;}
.app.sb-collapsed .uhr-zeit{font-size:var(--fs-sm);}
.app.sb-collapsed .uhr-datum{display:none;}
/* Am Handy in der oberen Leiste, klein und rechts. */
.mb-uhr{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-sm);
  color:var(--color-text-2);font-variant-numeric:tabular-nums;padding-right:2px;}

/* Die angesprungene Zeile bleibt markiert. Ohne das rollt die Seite irgendwohin
   und man sucht selbst, welche der 35 Fristen gemeint war.

   **Die Markierung bleibt stehen, sie leuchtet nicht kurz auf.** Die erste
   Fassung blendete sich nach 2,6 Sekunden aus, und damit war sie genau dann
   weg, wenn man nach dem Rollen hinsah. Ein Marker, den man verpassen kann,
   erledigt seine Aufgabe nicht.

   Gold, weil es Betonung ist und keine Warnung: Die Zeile hat schon ihre
   eigene Ampelfarbe, und ein zweites Rot daneben würde beide entwerten. Der
   Balken links macht sie auch im Augenwinkel auffindbar, ohne die Zeile
   umzufärben. */
.zeile-gefunden > td,
div.zeile-gefunden{background:var(--color-accent-soft) !important;}
.zeile-gefunden > td:first-child,
div.zeile-gefunden{box-shadow:inset 3px 0 0 var(--color-accent);}
/* Der Blitz beim Ankommen laeuft ueber die Helligkeit, nicht ueber den
   Hintergrund. Grund: In einer Tabelle malt die Zelle ueber die Zeile, in der
   Kommunikation gibt es gar keine Zelle. Eine Animation auf `background` traf
   deshalb je nach Liste das falsche Element und endete auf durchsichtig, womit
   die Markierung nach 900ms verschwand, statt stehen zu bleiben. */
.zeile-gefunden{animation:gefunden 900ms ease-out;}
@keyframes gefunden{
  0%{filter:brightness(1.8);}
  100%{filter:none;}
}

/* ---- Die Lage-Zeile im Post-Reiter ----
   Sie steht vor den Kacheln und beantwortet die eine Frage, die man beim
   Reinkommen hat: Muss heute noch etwas raus?

   **Ruhig, solange nichts ansteht.** Am 15.08.2026 standen dort acht rote
   Kacheln mit dem Wort "sofort", und keine einzige Frist lief an diesem Tag ab.
   Wenn alles schreit, sticht der eine Fall nicht mehr heraus, bei dem die Uhr
   wirklich läuft. Deshalb bekommt nur `.eilig` die Warnfarbe, und die gibt es
   nur, wenn heute tatsächlich eine Frist endet. */
.post-lage{background:var(--color-surface);border:1px solid var(--border);
  border-left:3px solid var(--color-text-muted);border-radius:var(--radius);
  padding:13px 16px;margin-bottom:var(--karten-abstand);}
.post-lage .lage-kopf{display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:5px;}
.post-lage .lage-kopf svg{width:14px;height:14px;}
.post-lage .lage-satz{font-size:var(--fs-md);color:var(--color-text);line-height:1.45;}
.post-lage .lage-rest{margin-top:6px;font-family:var(--font-mono);
  font-size:var(--fs-sm);color:var(--color-warn);}
.post-lage.eilig{border-left-color:var(--color-warn);
  background:linear-gradient(90deg,var(--color-warn-soft),transparent 60%);}
.post-lage.eilig .lage-kopf{color:var(--color-warn);}
.post-lage.eilig .lage-satz{font-weight:600;}

/* ---- Brennglas: die eine Frist, die gerade wirklich zaehlt ------------
   Eine Stufe ueber der Ampel, und bewusst KEINE neue Farbe. Die Ampel
   behaelt ihre Bedeutung allein, sonst faengt der Dialekt von vorn an, vor
   dem die Hausregel warnt. Der Kontrast entsteht hier aus Groesse und Ruhe:
   Die Kachel ist selten da, deshalb faellt sie auf. Kein Blinken, kein Puls,
   keine Animation. Das gewoehnt sich in drei Tagen ab und macht das Cockpit
   fuer alles andere unbrauchbar. */
.brennglas{
  display:flex;align-items:center;gap:20px;margin-top:16px;
  background:var(--color-surface);border:1px solid var(--color-warn);
  border-left:5px solid var(--color-warn);
  border-radius:var(--radius);padding:16px 20px;cursor:pointer;
  transition:border-color var(--transition-base),transform var(--transition-base);
}
.brennglas:hover{transform:translateY(-1px);}
/* Ueberfaelliges nutzt das vorhandene Rot der Ampel, es fuehrt keines ein. */
.brennglas.ueberfaellig{border-color:var(--color-err);border-left-color:var(--color-err);}
.brennglas .bg-uhr{flex:none;min-width:170px;}
.brennglas .bg-zeit{
  font-size:var(--fs-xl);font-weight:700;line-height:1.1;
  font-family:var(--font-mono);color:var(--color-warn);
  display:block;
}
.brennglas.ueberfaellig .bg-zeit{color:var(--color-err);}
.brennglas .bg-mitte{min-width:0;}
.brennglas .bg-titel{
  font-size:var(--fs-md);font-weight:600;line-height:1.35;
  overflow-wrap:anywhere;
}
.brennglas .bg-folge{
  font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:5px;
  overflow-wrap:anywhere;
}
/* Am Handy untereinander, sonst quetscht die Uhr den Titel weg. */
@media (max-width:500px){
  .brennglas{flex-direction:column;align-items:flex-start;gap:8px;}
  .brennglas .bg-uhr{min-width:0;}
}

/* ---- Akten: ein Vorgang, eine Zeile ----------------------------------
   Vier Briefe vom Zoll, eine Mail und zwei Fristen sind ein Vorgang, keine
   sieben. Die Akte steht ueber den Einzelbriefen und ist zugeklappt, bis
   jemand hineinsieht. Bewusst ruhig gehalten: Sie ordnet, sie warnt nicht.
   Die Ampel und das Brennglas behalten das Warnen fuer sich. */
.akte-zeile{
  border-bottom:1px solid var(--border);
}
.akte-zeile:last-child{border-bottom:none;}
.akte-kopf{
  display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;
  transition:background var(--transition-base);
}
.akte-kopf:hover{background:var(--color-surface-2);}
.akte-pfeil{
  flex:none;width:16px;height:16px;color:var(--color-text-muted);
  transition:transform var(--transition-base);
}
.akte-zeile.offen .akte-pfeil{transform:rotate(90deg);}
.akte-mitte{flex:1;min-width:0;}
.akte-titel{font-size:var(--fs-md);font-weight:600;line-height:1.35;
  overflow-wrap:anywhere;}
.akte-unten{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:3px;
  font-family:var(--font-mono);}
.akte-kanaele{display:flex;gap:7px;flex:none;color:var(--color-text-muted);}
.akte-kanaele i{width:15px;height:15px;}

/* Die Historie. Erst sichtbar, wenn aufgeklappt wird. */
.akte-inhalt{display:none;padding:0 4px 12px 32px;}
.akte-zeile.offen .akte-inhalt{display:block;}
.akte-unterzeile{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  font-size:var(--fs-base);color:var(--color-text-muted);
}
.akte-unterzeile i{width:14px;height:14px;flex:none;}
.au-datum{font-family:var(--font-mono);font-size:var(--fs-sm);flex:none;min-width:82px;}
.au-text{min-width:0;overflow-wrap:anywhere;}
/* Der oberste Eintrag ist der gueltige Stand, nicht die Summe darunter.
   Drei Mahnungen sind eine gewachsene Forderung, keine drei Forderungen. */
.akte-unterzeile.neuester{color:var(--color-text);}
.au-marke{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  font-family:var(--font-mono);color:var(--color-accent);
  border:1px solid var(--color-accent);border-radius:var(--radius-xs);
  padding:1px 5px;margin-left:auto;flex:none;
}
@media (max-width:500px){
  .akte-inhalt{padding-left:14px;}
  .au-datum{min-width:0;}
  .au-marke{display:none;}
}

/* Anklickbare Schriftstuecke in einer Akte. Das Symbol erscheint erst beim
   Ueberfahren: Vier Zeilen mit je einem Pfeil davor waeren unruhig, und
   unruhig ist genau das, was die Buendelung abstellen soll. */
.akte-unterzeile.klickbar{cursor:pointer;border-radius:var(--radius);
  padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px;
  transition:background var(--transition-base),color var(--transition-base);}
.akte-unterzeile.klickbar:hover{background:var(--color-surface-2);
  color:var(--color-text);}
.au-oeffnen{width:13px;height:13px;flex:none;margin-left:8px;opacity:0;
  transition:opacity var(--transition-base);}
.akte-unterzeile.klickbar:hover .au-oeffnen{opacity:.65;}
.akte-unterzeile.neuester .au-marke + .au-oeffnen{margin-left:6px;}

/* ---- Die drei Knöpfe an einer wartenden Zeile ----
   Überall dieselbe Leiste: Was tun, Erledigt, Später. Sie sitzt am Zeilenende
   und bricht am Handy um, statt die Zeile zu sprengen.

   **Am Handy werden die Knöpfe größer, nicht kleiner.** Der naheliegende
   Reflex bei wenig Platz ist, alles zu schrumpfen, und genau dort trifft der
   Daumen dann nichts mehr. 44 Punkte sind das Mindestmaß für eine Tippfläche,
   also wachsen sie auf dem kleinen Schirm. */
.zeilen-knoepfe{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.zeilen-knoepfe .btn{white-space:nowrap;font-size:var(--fs-sm);padding:3px 8px;}
.zeilen-knoepfe .btn svg{width:13px;height:13px;}
.zeilen-knoepfe.kompakt .btn{padding:2px 6px;font-size:var(--fs-sm);}
@media (max-width:760px){
  .zeilen-knoepfe{gap:8px;}
  .zeilen-knoepfe .btn{min-height:36px;font-size:var(--fs-base);padding:6px 12px;}
  .zeilen-knoepfe .btn svg{width:15px;height:15px;}
}

/* Der Hinweis über einer Liste, wenn etwas zurückgestellt wurde. Gedämpft, aber
   nie unsichtbar: Was weggelegt wurde, muss sichtbar bleiben, sonst ist
   Zurückstellen dasselbe wie Löschen, nur mit besserem Gewissen. */
.zurueckgestellt-hinweis{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 var(--karten-abstand);padding:8px 12px;border-radius:var(--radius-lg);
  background:var(--color-surface-2);color:var(--color-text-2);font-size:var(--fs-sm);}
.zurueckgestellt-hinweis svg{width:15px;height:15px;flex-shrink:0;color:var(--color-text-muted);}
.zurueckgestellt-hinweis b{color:var(--color-text);}
.zurueckgestellt-hinweis .btn{margin-left:auto;}

/* ---- Das Archiv unter jeder Kategorie ----
   Eingeklappt und gedämpft: Es ist Vergangenheit, es soll die Arbeitsliste
   nicht überstrahlen. Die Zahl im Kopf genügt, um zu wissen, dass es da ist. */
.archiv-block{margin-top:var(--karten-abstand);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;}
.archiv-kopf{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;
  border:0;background:transparent;color:var(--color-text-2);font-size:var(--fs-base);
  font-weight:600;cursor:pointer;text-align:left;transition:background var(--transition-fast);}
.archiv-kopf:hover{background:var(--color-surface-2);}
.archiv-pfeil{width:15px;height:15px;flex-shrink:0;transition:transform var(--transition-fast);}
.archiv-block.offen .archiv-pfeil{transform:rotate(90deg);}
.archiv-zahl{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-sm);
  color:var(--color-text-muted);}
.archiv-block.leer .archiv-kopf{color:var(--color-text-muted);}
.archiv-inhalt{display:none;padding:0 14px 14px;}
.archiv-block.offen .archiv-inhalt{display:block;}
@media (max-width:760px){.archiv-kopf{padding:14px;min-height:44px;}}

/* Abschnitts-Überschrift mit einem Knopf rechts daneben (seit 17.08.2026).
   Gebraucht, seit "Zu bezahlen" ein Abschnitt im Finanzen-Reiter ist und
   keinen eigenen Seitenkopf mehr hat, der den Knopf tragen könnte. */
.abschnitt-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:var(--karten-abstand);}
.abschnitt-kopf > *:first-child{margin-top:0;margin-bottom:0;}

/* ---- Apple-Anmeldung: Popup mit Schieberegler ----
   Erscheint nur, wenn wirklich Belege bei Apple offen sind. Unten am Rand
   statt mittig: Am Handy liegt es dort im Daumenbereich, und es verdeckt
   nicht den Reiter, den der Geschäftsführer gerade lesen wollte. */
.apple-pop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; justify-content: center; padding: 12px;
  pointer-events: none;
}
.apple-pop-karte {
  pointer-events: auto; width: 100%; max-width: 420px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--border, #2a2a30); border-radius:var(--radius);
  padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  position: relative;
}
.apple-pop-kopf {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; margin-bottom: 6px;
}
.apple-pop-kopf i { width: 18px; height: 18px; color: var(--color-accent); }
.apple-pop-text { font-size: 13px; line-height: 1.45; color: var(--color-text-muted); margin: 0 0 14px; }
/* Das Kreuz sitzt auf JEDER Karte. Groß genug für den Daumen: 44 Punkte
   sind Apples eigenes Mindestmaß für Tippziele, darunter trifft man daneben. */
.apple-pop-zu {
  position: absolute; top: 4px; right: 4px; background: none; border: 0;
  color: var(--color-text-muted); font-size: 22px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
}
.apple-pop-zu:active { background: var(--color-surface-2); }

/* Der Regler: die Bahn fuellt sich beim Ziehen mit dem Akzent. Bis zum
   24.08.2026 war das Gold, und zwar aus einer Variablen, die es nicht gibt:
   gemalt wurde immer der Rueckfallwert der alten Palette. */
.apple-regler {
  position: relative; height: 52px; border-radius:var(--radius-pill);
  background: linear-gradient(90deg,
    var(--color-accent) calc(var(--fort, 0) * 100%),
    var(--color-surface-2) calc(var(--fort, 0) * 100%));
  border: 1px solid var(--border, #2a2a30);
  display: flex; align-items: center; justify-content: center;
  user-select: none; overflow: hidden;
}
.apple-regler-text {
  font-size: 13px; font-weight: 600; color: var(--color-text-muted);
  pointer-events: none;
}
.apple-regler.fertig { background: var(--color-accent); }
.apple-regler.fertig .apple-regler-text { color: var(--color-accent-fg); }
.apple-knopf {
  position: absolute; left: 4px; top: 4px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--color-accent); color: var(--color-accent-fg);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
}
.apple-knopf:active { cursor: grabbing; }
.apple-knopf i { width: 20px; height: 20px; }

.apple-bild { width: 100%; border-radius:var(--radius-md); border: 1px solid var(--border, #2a2a30); display: block; }
.apple-tast { gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.apple-feld { flex: 1; min-width: 150px; padding: 8px; font-size: 16px;
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--border, #2a2a30); border-radius:var(--radius-md); }

/* Feld für den Apple-Bestätigungscode: groß, mittig, Ziffern-Tastatur. */
.apple-code {
  width: 100%; padding: 14px; font-size: 28px; letter-spacing: 10px;
  text-align: center; font-variant-numeric: tabular-nums;
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--border, #2a2a30); border-radius:var(--radius-lg);
}

/* ---- Bauteile aus der Vorlage (22.08.2026) --------------------------------
   Kippschalter, Knopfgruppe, Wähler und die Filterzeile unter dem
   Tabellenkopf. Sie stehen hier und nicht in gestalt-squadrai.css, weil sie
   Funktion sind und nicht Aussehen: Wer auf die gewohnte Gestalt zurück
   schaltet, soll seine Filter behalten. Die Maße kommen aus der Vorlage
   (42 mal 22 beim Schalter, 34 mal 30 in der Knopfgruppe), die Farben aus den
   Merkmalen des Cockpits. */

.kippe-feld{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-base);
  color:var(--color-text-muted);cursor:pointer;}
.kippe{position:relative;width:42px;height:22px;flex:0 0 auto;border:0;padding:0;
  cursor:pointer;background:var(--border-strong);transition:background 0.18s;
  border-radius:var(--radius-pill);}
.kippe::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:var(--color-surface);border-radius:var(--radius-pill);
  transition:transform 0.18s;}
.kippe[aria-pressed="true"]{background:var(--color-accent);}
.kippe[aria-pressed="true"]::after{transform:translateX(20px);}
/* Ohne diese Zeile ist der Schalter mit der Tastatur nicht auffindbar: Er hat
   keine Beschriftung, sein Zustand steckt allein in der Farbe. */
.kippe:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* **Derselbe Umschalter wie im Kalender, nicht ein zweiter.** Am 06.09.2026
   beim Durchgehen aller Reiter gefunden: Die Filterzeile der Mitteilungen
   ("Alle, Ungelesen, Gelesen") war aus aneinandergesetzten Kaesten gebaut,
   waehrend Tag/Woche/Monat/Jahr im Kalender eine Kapsel ist. Zwei Bauweisen
   fuer dieselbe Sache, und die aeltere sah aus wie vergessen.

   Der Aufbau ist der der Kalender-Leiste: eine Kapsel als Rahmen, die
   gewaehlte Stufe als eigene Kapsel darin, und kein Trennstrich neben ihr,
   weil die gefuellte Marke dort schon trennt. */
.knopfgruppe{display:inline-flex;border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:2px;gap:2px;background:var(--color-surface);
  height:32px;align-items:center;}
.knopfgruppe button{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:26px;padding:0 12px;background:transparent;
  color:var(--color-text-muted);border:0;border-radius:var(--radius-pill);
  font-size:var(--fs-base);font-family:var(--font-ui);cursor:pointer;position:relative;}
.knopfgruppe button + button::before{content:'';position:absolute;left:-1.5px;top:6px;
  bottom:6px;width:1px;background:var(--border);opacity:.85;}
.knopfgruppe button[aria-pressed="true"]::before,
.knopfgruppe button[aria-pressed="true"] + button::before{display:none;}
.knopfgruppe button svg{width:16px;height:16px;}
.knopfgruppe button:hover{color:var(--color-text);background:var(--color-surface-3);}
.knopfgruppe button[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-fg);}
.knopfgruppe button[aria-pressed="true"]:hover{background:var(--color-accent);}

.waehler{height:30px;padding:0 26px 0 9px;background:var(--color-surface);
  color:var(--color-text);border:1px solid var(--border);font-family:var(--font-ui);
  font-size:var(--fs-base);cursor:pointer;}
/* Das Suchfeld ist der Zwilling des Waehlers: Beide stehen in derselben
   Bedienzeile nebeneinander, also tragen sie dieselbe Hoehe, denselben Rand und
   dieselbe Rundung. Bis zum 24.08.2026 hatten sie 22 gegen 30 Punkt, und im
   Archiv sogar 32 mit einer festen 8er-Rundung, die es in dieser Gestalt gar
   nicht gibt.

   Gesetzt wird auf `input[type=search]`, nicht auf eine Klasse: Die sechs
   Suchfelder werden an sechs Stellen im JavaScript gebaut, und wer eine Klasse
   verlangt, hat beim siebten wieder eine Ausnahme. */
input[type=search]{height:30px;padding:0 9px;background:var(--color-surface);
  color:var(--color-text);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:var(--fs-base);}
input[type=search]:focus{outline:none;border-color:var(--color-accent);}

.waehler-feld{display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-base);color:var(--color-text-muted);}

/* Die Filterzeile sitzt IM Tabellenkopf, eine Zeile unter den Spaltennamen.
   Sie gehört dorthin und nicht über die Karte: Ein Feld, das eine Spalte
   filtert, muss über dieser Spalte stehen, sonst rät man, welches wozu
   gehört. */
tr.spaltenfilter th{padding-top:0;padding-bottom:8px;}
tr.spaltenfilter input,tr.spaltenfilter select{width:100%;height:26px;
  padding:0 6px;background:var(--color-bg);color:var(--color-text);
  border:1px solid var(--border);font-family:var(--font-ui);
  font-size:var(--fs-sm);}
tr.spaltenfilter input::placeholder{color:var(--color-text-muted);}

/* Der Kopf über einem Diagramm: Titel links, Umschalter rechts. */
.diagramm-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;}
.diagramm-kopf .dk-titel{margin-right:auto;font-weight:600;
  font-size:var(--fs-lg);letter-spacing:-0.02em;}

/* ---- Karten von Hand anordnen (22.08.2026) --------------------------------
   Der Behälter wird zum Raster mit zwölf Spalten, und zwar erst dann, wenn er
   mindestens zwei Karten trägt: Bei einer einzigen gäbe es nichts anzuordnen,
   und ein Raster, das nichts tut, ändert trotzdem Abstände.

   **Jedes Kind bekommt die volle Breite**, nicht nur die Karten. Eine
   Kennzahlreihe, eine Filterzeile und ein Hinweistext stehen sonst
   nebeneinander, weil ein Raster alles verteilt, was darin liegt. */
/* **Flex, nicht Grid.** Der erste Anlauf machte den Behälter zum Raster mit
   zwölf Spalten. Das ging in der Fläche `#main` gründlich schief: Sie ist der
   Scroll-Behälter und hat eine feste Höhe von 668 Punkten, und darin fielen
   die Rasterzeilen zusammen. Gemessen am 22.08.2026:
   `grid-template-rows: 173px 38px 550px 38px 38px 38px` bei Karten, die 668,
   1245 und 1038 Punkte hoch sind. Die Karten lagen übereinander.

   Eine Flex-Zeile kennt dieses Problem nicht: Ihre Höhe ist die des höchsten
   Elements darin, und mit einer festen Behälterhöhe hat sie nichts zu tun. */
.anordnung{display:flex;flex-wrap:wrap;align-items:flex-start;
  align-content:flex-start;gap:var(--karten-abstand);}
/* **Ein zugeklappter Reiterkasten bleibt zu.** Trägt er zwei Karten, macht
   das Anordnen ihn zum Flex-Behälter, und `display:flex` sticht das
   `hidden`, mit dem die Reiterleiste ihn zumacht. Ergebnis am 23.08.2026 im
   Reiter System: Alle sieben Karten standen gleichzeitig da, und zwei Reiter
   zeigten dasselbe. Dieselbe Falle wie bei den Filterzeilen der Kopfleiste,
   nur eine Ebene höher. */
.anordnung[hidden]{display:none;}
.anordnung > *{flex:0 0 100%;min-width:0;}
/* Im Raster trägt die Lücke den Abstand. Die Karten bringen ihren eigenen
   `margin-top` als Inline-Stil aus 61 Aufrufstellen mit, und dagegen kommt
   keine Klasse an. Deshalb hier `!important`, eng auf diesen Fall begrenzt:
   Es ist billiger als 61 Änderungen und weniger fehleranfällig. */
.anordnung > .card{margin-top:0 !important;}
/* **Ein leerer Behälter belegt keine Zeile.** Mehrere Ansichten hängen einen
   nackten `<div>` als Platzhalter zwischen ihre Karten, ohne Klasse und ohne
   Inhalt. Im Raster ist auch der ein Element: Er spannt über zwölf Spalten
   und schiebt die nächste Karte in eine neue Zeile. Genau daran lagen im
   Reiter System zwei Karten untereinander, obwohl eine ein Drittel und die
   andere zwei Drittel breit war, zusammen also genau eine Zeile.

   `:empty` löst sich von selbst wieder auf: Sobald ein Nachlader den
   Behälter füllt, greift die Regel nicht mehr. Eng gefasst auf Divs ohne
   Klasse, damit kein bewusst leer gehaltenes Bauteil verschwindet. */
.anordnung > div:not([class]):empty{display:none;}
/* **Ein senkrechter Behaelter behaelt seine Richtung.** Die beiden Regeln
   darueber (`flex-wrap:wrap` und `flex-basis:100%`) sind fuer Kartenreihen
   gedacht und kehren sich in einer Spalte um: Umbrochen wird dort in neue
   SPALTEN, und 100 Prozent meint die Hoehe. Die rechte Spalte in "Dein Tag"
   lief dadurch bis Punkt 2927 aus dem Bild. Gesetzt wird die Klasse von
   anordnung.js, gemessen an der Richtung, die die Ansicht selbst gewaehlt
   hat. */
.anordnung.anordnung-spalte{flex-direction:column;flex-wrap:nowrap;
  align-items:stretch;}
.anordnung.anordnung-spalte > *{flex:0 0 auto;}

.karten-griff{display:flex;align-items:center;gap:6px;margin-left:auto;
  opacity:0;transition:opacity 0.15s;}
/* Sichtbar beim Darüberfahren, aber IMMER sichtbar, sobald etwas darin den
   Tastaturfokus hat: Auf einem Tablet gibt es kein Darüberfahren, und wer mit
   der Tastatur navigiert, sähe sonst nicht, wo er steht. */
.card:hover .karten-griff,.karten-griff:focus-within{opacity:1;}
.kg-ziehen{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;background:none;border:0;
  color:var(--color-text-muted);cursor:grab;
  /* Ohne das rollt der Browser am Tablet die Seite, statt die Karte zu
     ziehen: Eine Wischgeste auf einem Knopf ist fuer ihn erst einmal
     Scrollen, und das Ziehen kommt nie an. */
  touch-action:none;}
.kg-ziehen:active{cursor:grabbing;}
.kg-ziehen svg{width:15px;height:15px;}
.kg-breite{height:24px;padding:0 4px;background:var(--color-bg);
  color:var(--color-text-muted);border:1px solid var(--border);
  font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;}

.card.wird-gezogen{opacity:0.4;}
/* Die Einfügemarke. Eine Linie sagt, WO die Karte landet; ein bloßes
   Aufleuchten der Zielkarte sagt nur, worüber man gerade schwebt, und das ist
   bei "davor oder dahinter" genau die fehlende Auskunft. */
.card.ziel-oben{box-shadow:inset 0 3px 0 0 var(--color-accent);}
.card.ziel-unten{box-shadow:inset 0 -3px 0 0 var(--color-accent);}

.anordnung-zurueck{flex:0 0 100%;align-self:flex-start;text-align:left;margin-top:2px;
  background:none;border:0;padding:2px 0;cursor:pointer;
  color:var(--color-text-muted);font-family:var(--font-ui);
  font-size:var(--fs-sm);text-decoration:underline;}
.anordnung-zurueck:hover{color:var(--color-text);}

/* Unter 900 Punkten gilt keine gewählte Breite. Eine Buchungstabelle in einem
   Drittel Bildschirm ist unlesbar, und das Handy hat diesen Drittel nicht.
   `!important` schlägt hier den Inline-Stil, den das Modul je Karte setzt. */
@media (max-width:900px){
  .anordnung > *{flex:0 0 100% !important;}
  .karten-griff{display:none;}
}

/* Die Filterzeile über einer Liste. Sie war bis zum 22.08.2026 nirgends
   definiert: Die Ansichten setzten `class="row gap"`, und beide Klassen gibt
   es in diesem Stylesheet nicht. Das Suchfeld der Kundenakte trug deshalb
   `grow` und war trotzdem 147 Punkte breit, weil sein Elternteil kein
   Flex-Behälter war. Aufgefallen ist es erst, als die Zeile eine Nachbarin
   bekam. */
.filterzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Mit Deckel: Ein Suchfeld über die volle Breite von 996 Punkten sieht aus
   wie ein Textfeld für einen Aufsatz. Es soll wachsen, bis es seinen
   Platzhalter trägt, und dann aufhören. */
.filterzeile .grow{flex:1 1 320px;min-width:0;max-width:520px;}
.filterzeile input[type=search]{flex:1 1 240px;min-width:0;max-width:420px;}

/* ---- Zahlenblock im Klartext (23.08.2026) ---------------------------------
   Aus der Vorlage: links eine Spalte "Was" und rechts die Zahl, groß und
   rechtsbündig. Kein Raster aus Kacheln, sondern eine Liste zum Ablesen.
   Vier Zeilen mit je einer Zahl liest man schneller als vier Kacheln, weil
   die Zahlen untereinander auf derselben Kante stehen. */
.zahlenblock{display:flex;flex-direction:column;}
.zb-zeile{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:9px 0;border-bottom:1px solid var(--border);}
.zb-zeile:last-child{border-bottom:0;}
.zb-was{color:var(--color-text-muted);font-size:var(--fs-base);}
.zb-wert{font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;}
/* Die erste Zeile ist die, auf die es ankommt. Sie trägt den Akzent, die
   übrigen nicht: Wären alle betont, wäre keine betont. */
.zb-zeile.betont .zb-wert{color:var(--color-accent);font-size:var(--fs-2xl);}

/* ---- Vorschläge zugeklappt (23.08.2026) -----------------------------------
   Die Startseite war 6.802 Punkte hoch, 6.100 davon ein einziger Block mit
   zehn voll aufgeklappten Vorschlägen. Jetzt steht je Vorschlag eine Zeile,
   ein Klick klappt ihn auf. Nichts ist weg, es ist nur zu. */
.s-title-zu{display:flex;align-items:center;gap:7px;cursor:pointer;}
.s-auf{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;padding:0;background:none;border:0;
  color:var(--color-text-muted);cursor:pointer;}
.s-auf svg{width:15px;height:15px;}
.s-title-zu:hover .s-auf{color:var(--color-text);}
/* `display:none` steht zusätzlich am Element, weil `hidden` gegen ein
   `display` aus dem Stylesheet verliert. Derselbe Fall wie bei den
   Filterzeilen der Kopfleiste, deshalb hier gleich mitgedacht. */
.s-detail[hidden]{display:none;}
.s-detail{margin-top:8px;}

/* Beschriftung links, Schalter rechts, dazwischen bei Bedarf das
   Fragezeichen. Maße aus der Vorlage. */
.kippe-wort{color:var(--color-text-muted);font-size:var(--fs-base);}
.was{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;cursor:help;
  border:1px solid var(--border-strong);color:var(--color-text-muted);
  font-size:10px;line-height:1;border-radius:var(--radius-pill);}
.was:hover{color:var(--color-text);border-color:var(--color-accent);}

/* ---- Die Filterzeile über den Reitern (23.08.2026) ------------------------
   Aus der Vorlage: Sie steht zwischen Reiterleiste und Inhalt und trägt die
   Bedienelemente des offenen Reiters. Nicht in der Karte, sondern über ihr:
   Der Filter gehört zur Seite, nicht in das eine Kästchen. */
.filterzeile{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:10px 0;}
.filterzeile:empty{display:none;}
.fz-inhalt{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  width:100%;}
.fz-wort{color:var(--color-text-muted);font-size:var(--fs-base);}

/* Der Zeitraum im Seitenkopf, links vom Aktualisieren-Knopf. */
.kopf-zeitraum{display:inline-flex;align-items:center;gap:8px;}
/* **Es steht neben einem Auswahlfeld, also traegt es dessen Form.** Gemeldet
   am 06.09.2026 mit einem Pfeil darauf: ein kantiger Kasten direkt neben
   einer Kapsel, und damit sieht die ganze Zeile nach Versehen aus. */
.kopf-spanne{font-family:var(--font-mono);font-size:var(--fs-sm);
  color:var(--color-text-muted);white-space:nowrap;
  border:1px solid var(--border);padding:6px 12px;
  border-radius:var(--radius-pill);}

/* ---- Der Jarvis-Kreis am schwebenden Knopf (23.08.2026) -------------------
   Dasselbe Gesicht wie im Reiter, nur klein: heller Mittelpunkt, satter Rand,
   ein Schein nach außen. Die Farben kommen aus denselben Merkmalen, er folgt
   also der Gestalt wie der große Kreis auch.

   **Er atmet, aber langsam.** Ein Knopf, der unten rechts dauerhaft pulsiert,
   zieht den Blick von der Arbeit ab. Sechs Sekunden und wenige Prozent
   Größenänderung reichen, damit er lebendig wirkt, ohne zu winken. */
/* **Der Jarvis-Knopf ist nur der Kreis, kein Kästchen darum.** Ein Kreis in
   einem Quadrat sieht aus wie ein Symbol auf einer Taste; er selbst IST die
   Taste. Deshalb fallen Fläche, Kante und Schatten weg, und der Kreis wächst
   auf die volle Größe des Knopfes. Der Schein um ihn herum übernimmt, was
   vorher der Schatten tat: Er hebt ihn von der Seite ab. */
.werkzeug-knopf[data-id="jarvis"]{background:none;border:0;box-shadow:none;}
.werkzeug-knopf[data-id="jarvis"]:hover{background:none;}
html[data-gestalt="squadrai"] .werkzeug-knopf[data-id="jarvis"],
html[data-gestalt="squadrai"] .werkzeug-knopf[data-id="jarvis"][aria-pressed="true"],
.werkzeug-knopf[data-id="jarvis"][aria-pressed="true"]{
  background-color:transparent;background-image:none;border:0;box-shadow:none;
  border-radius:50%;}
html[data-gestalt="squadrai"] .werkzeug-knopf[data-id="jarvis"]:hover{background:none;}

/* Der Ringkranz um die Kugel, zweiunddreissig Punkte im Quadrat, also genau
   so gross wie das Zeichen am Chat-Knopf daneben. Zwei Zeichen
   nebeneinander, die verschieden gross sind, lesen sich als zwei
   verschiedene Wichtigkeiten. */
/* Ein Mass fuer beide Zeichen, und es meint die gemalte Flaeche, nicht den
   Kasten darum. Der Claude-Stern reicht bis an seinen Rahmenrand, der Kranz
   nicht: Seine aeusserste Linie sitzt bei 154 von 160 Einheiten, gemalt sind
   also 96,29 Prozent (im Browser nachgemessen, nicht gerechnet). Bei
   gleichem Rahmen waere er darum einen Punkt kleiner, und genau diesen
   Punkt sieht man, wenn die beiden nebeneinander stehen. Der Kranz bekommt
   deshalb einen etwas groesseren Rahmen, damit die Zeichen selbst gleich
   gross sind. */
:root{
  --wk-zeichen:32px;
  --wk-hud-quote:.9629;
  --wk-hud:calc(var(--wk-zeichen) / var(--wk-hud-quote));
}
.wk-jarvis{position:relative;width:var(--wk-zeichen);height:var(--wk-zeichen);
  flex:none;display:grid;place-items:center;}
/* Der Kranz im Knopf ist derselbe wie im Reiter, nur zehnmal kleiner
   gerahmt. Was sich aendert, sind allein die Strichstaerken: Bei 0,7 Punkten
   auf einem Feld von 320 bleibt auf 32 nichts uebrig, das ein Bildschirm
   noch zeichnen koennte. Umgerechnet auf denselben optischen Eindruck sind
   das ungefaehr das Sechsfache. */
/* Mittig gestellt ueber die halbe Verschiebung, und hier steht bewusst KEIN
   `inset`. Zwei Wege sind daran vorbei gescheitert. Ein `inset:auto` hinter
   `left/top` setzt beide still zurueck, der Kranz sass danach links oben.
   Und `inset:0` mit `margin:auto` teilt einen negativen Rest nur senkrecht
   gleichmaessig auf: Waagerecht gewinnt bei einem ueberbestimmten Kasten die
   linke Kante, das waren 0,61 Punkte Versatz. Der Kranz ragt ueber seinen
   Rahmen hinaus, deshalb ist das hier kein Randfall, sondern der Normalfall. */
.wk-jarvis .jv-hud{position:absolute;top:50%;left:50%;
  width:var(--wk-hud);height:var(--wk-hud);
  transform:translate(-50%,-50%);overflow:visible;}
.wk-jarvis .jv-hud circle,
.wk-jarvis .jv-hud path{stroke:var(--jv-mitte);fill:none;}
/* Heller als im Grossen, nicht aus Geschmack: Bei 32 Punkten deckt ein Strich
   weniger als einen halben Bildpunkt ab, der Browser rechnet ihn also
   ohnehin blasser. Die Werte hier gleichen das aus. */
.wk-jarvis .hud-ring{stroke-width:4;opacity:.6;}
.wk-jarvis .hud-tick{stroke-width:4.5;opacity:.68;}
.wk-jarvis .hud-tick-stark{stroke-width:8;opacity:1;filter:none;}
.wk-jarvis .hud-arc{stroke-width:6.5;opacity:.9;}
.wk-jarvis .hud-ring-fein{stroke-width:3;opacity:.45;}

/* Eigene Takte fuer den kleinen Kranz. Er drehte sich vorher schon, nur mit
   den Werten des grossen: 26 bis 90 Sekunden je Umdrehung. Auf 320 Punkten
   ist das ein ruhiges Kreisen, auf 32 Punkten legt ein Teilstrich in einer
   Sekunde weniger als einen halben Bildpunkt zurueck, und damit steht das
   Zeichen fuer das Auge still. Die Takte hier sind rund viermal schneller,
   die Strecke am Rand ist damit wieder dieselbe wie beim grossen. */
.wk-jarvis .hud-dreh-langsam{animation-duration:22s;}
.wk-jarvis .hud-dreh-rueck  {animation-duration:13s;}
.wk-jarvis .hud-dreh-schnell{animation-duration:6.5s;}
/* Und ein Kranz, der sich dreht, braucht etwas Unrundes, sonst sieht auch
   die schnellste Drehung aus wie Stillstand. Der starke Teilstrich ist das
   Merkmal, an dem das Auge die Bewegung festmacht. */
.wk-jarvis .hud-tick-stark{stroke-linecap:round;}


/* Die Kugel waechst mit dem Rahmen mit. Ein fester Wert waere hier still
   falsch geworden: Sie sass auf 17 von 32 und laege sonst nicht mehr
   mittig im feinen Innenring. */
.wk-orb{width:calc(var(--wk-hud) * .53125);height:calc(var(--wk-hud) * .53125);
  border-radius:50%;flex:none;
  background:radial-gradient(circle at 40% 32%,var(--jv-kern) 0%,var(--jv-mitte) 38%,
             var(--jv-rand) 72%,var(--jv-tief) 100%);
  position:relative;
  /* **Kein schwarzer Schatten.** Er sollte die Kugel von der Seite abheben
     und legte ihr stattdessen eine dunkle Wolke unter, die auf dem ohnehin
     dunklen Grund als Fleck las. Abgehoben wird sie durch ihren eigenen
     Schein, und der hat ihre Farbe. */
  box-shadow:0 0 0 1px var(--jv-glanz-leise) inset,0 0 14px var(--jv-glanz-leise);
  animation:wk-atmen 6s ease-in-out infinite;}
/* Der Lichtpunkt oben links. Ohne ihn ist es eine flache Scheibe, mit ihm
   liest man eine Kugel. Derselbe Griff wie beim grossen Kreis. */
.wk-orb::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.45),
             rgba(255,255,255,0) 46%);}
@keyframes wk-atmen{
  0%,100%{transform:scale(1);
    box-shadow:0 0 0 1px var(--jv-glanz-leise) inset,0 0 10px var(--jv-glanz-leise);}
  50%{transform:scale(1.06);
    box-shadow:0 0 0 1px var(--jv-glanz-leise) inset,0 0 22px var(--jv-glanz);}}
/* Ein zweiter, langsamerer Ring darum, der nach aussen laeuft. Er macht aus
   dem Atmen ein Ausstrahlen, ohne dass der Kreis selbst groesser wirkt. */
/* **Kein auslaufender Ring mehr.** Er sollte ein Ausstrahlen andeuten und
   stand die meiste Zeit als zweiter, unbewegter Kreis um das Zeichen: Man
   sah einen Fremdkoerper, keine Bewegung. Das Leben kommt jetzt aus den
   Boegen selbst, die sich ohnehin drehen, und aus dem Atmen der Kugel. */
.werkzeug-knopf[data-id="jarvis"]{position:relative;}
.werkzeug-knopf:hover .wk-orb{animation-duration:2.4s;}
.werkzeug-knopf[data-id="jarvis"]:hover{transform:translateY(-2px);}
/* Wer Bewegung abgeschaltet hat, bekommt keine. Das ist keine Höflichkeit,
   sondern eine Einstellung des Systems, und die gilt. */
@media (prefers-reduced-motion:reduce){
  .wk-orb{animation:none;}
  .wk-hud g{animation:none;}
}

/* Das Zeichen des Chat-Anbieters, wenn die Datei vorliegt. Weiß eingefärbt
   wird nichts: Ein fremdes Zeichen wird gezeigt, wie es ist. */
.wk-zeichen{width:22px;height:22px;display:block;}
/* Das Zeichen des Anbieters steht in SEINER Farbe, nicht in unserer: Ein
   fremdes Zeichen wird gezeigt, wie es ist, und nicht eingefaerbt.

   **Und ohne Kaestchen darum**, wie der Jarvis-Kreis daneben. Zwei
   schwebende Knoepfe, einer als freie Scheibe und einer als Zeichen auf
   blauem Grund, saehen aus wie zwei verschiedene Sorten Knopf. Terrakotta
   traegt sich auf dem dunklen wie auf dem hellen Grund von allein, es
   braucht keinen Teller darunter; der weiche Schatten hebt es ab. */
.wk-logo{width:var(--wk-zeichen);height:var(--wk-zeichen);object-fit:contain;display:block;}
/* Farbe und Bild stehen ausdruecklich da, nicht nur `background:none`. Die
   Kurzform tut dasselbe, aber beim Suchen eines Farbfehlers findet man die
   Zeile, die die Farbe nennt, und nicht die, die alles auf einmal
   zuruecksetzt. */
/* **Auch im gedrueckten Zustand keine Flaeche.** Ein Zeichen, das seine
   eigene Farbe traegt, braucht keinen Teller darunter, und ein schwarzer
   erst recht nicht: Beim Oeffnen des Chats sprang der Knopf auf die
   Textfarbe um und stand als dunkler Fleck in der hellen Kopfleiste. Dass er
   offen ist, sagt der Reiter daneben. */
.werkzeug-knopf.nur-zeichen,
.werkzeug-knopf.nur-zeichen[aria-pressed="true"],
html[data-gestalt="squadrai"] .werkzeug-knopf.nur-zeichen,
html[data-gestalt="squadrai"] .werkzeug-knopf.nur-zeichen[aria-pressed="true"]{
  background-color:transparent;background-image:none;border:0;box-shadow:none;}
/* Dass er offen ist, zeigt das Zeichen selbst: voll statt leicht gedaempft. */
.werkzeug-knopf.nur-zeichen .wk-logo{opacity:.78;transition:opacity .2s;}
.werkzeug-knopf.nur-zeichen:hover .wk-logo,
.werkzeug-knopf.nur-zeichen[aria-pressed="true"] .wk-logo{opacity:1;}
.werkzeug-knopf.nur-zeichen:hover,
html[data-gestalt="squadrai"] .werkzeug-knopf.nur-zeichen:hover{
  background-color:transparent;transform:translateY(-2px);}

/* Der Kreis in der Kopfleiste, waehrend ein Gespraech laeuft.
   Seit dem 24.08.2026 ueberlebt die Sitzung den Reiterwechsel, also muss man
   ihr ansehen, dass sie laeuft: Ein unsichtbar weiterlaufendes Gespraech
   vergisst man, und dann hoert Jarvis eine Stunde lang mit. */
.werkzeug-knopf.jarvis-laeuft { color: var(--color-accent); }
.werkzeug-knopf.jarvis-laeuft::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 6px var(--color-accent);
}
.werkzeug-knopf[data-jarvis="speaking"]::after { animation: jarvis-puls 1.1s ease-in-out infinite; }
.werkzeug-knopf[data-jarvis="listening"]::after { background: var(--color-ok); box-shadow: 0 0 6px var(--color-ok); }
@keyframes jarvis-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .werkzeug-knopf[data-jarvis="speaking"]::after { animation: none; }
}

/* Die Stimmwahl auf der Jarvis-Seite. Der Rand traegt sie, wie bei den
   Anrufknoepfen: Eine Fuellung allein hebt sich auf der Karte nicht ab. */
.jv-stimmwahl{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  padding:10px 12px;border-radius:var(--radius);
  border:1.5px solid var(--border);background:var(--color-surface-2);
  transition:border-color var(--transition-base),background var(--transition-base);}
.jv-stimmwahl:hover{border-color:var(--color-text-muted);}
.jv-stimmwahl[data-an="1"]{border-color:var(--color-accent);
  background:var(--color-accent-soft);}
.jv-stimmwahl input{margin-top:3px;accent-color:var(--color-accent);}

/* ---- Der Posteingang, nach dem Vorbild von Superchat -------------------
 *
 * Angeordnet am 27.08.2026: "Genau so soll es aussehen, nur mit unseren
 * Farben, aber exakt so." Nachgemessen am Screenshot (2880 mal 1800, also
 * doppelte Aufloesung): Spalten 54, 223, 310, Rest, 340 Punkte.
 *
 * **Die Rundung ist die ausdrueckliche Ausnahme.** Die Gestalt setzt alle
 * Radien auf 0, die Vorlage lebt von runden Ecken. Sie stehen deshalb als
 * EINE eigene Groesse, nicht als Zahl an zwanzig Stellen im Code.
 *
 * **Die Markenzeichen behalten ihre Farbe**, alles andere bekommt unsere.
 * Ein blaues WhatsApp-Zeichen erkennt niemand wieder.
 */
:root { --pe-rund:14px; --pe-rund-klein:10px; }

/* Vier Spalten, keine fuenfte. Die dunkle Leiste der Vorlage ist beim Cockpit
   die eigene Seitenleiste; am 27.08.2026 stand hier eine zweite daneben.

   Die Verhaeltnisse sind an der Vorlage gemessen: Liste zu Verlauf steht dort
   etwa 310 zu 540, also gut eins zu zwei. Ohne Deckel wird der Verlauf auf
   einem breiten Schirm dreimal so breit wie die Liste, und dann steht die
   Nachricht als schmales Band in einer leeren Flaeche. */
/* **Der Platz wird genutzt, ohne dass die Nachricht ein Band wird.** Bis zum
   07.09.2026 stand hier ein harter Deckel von 1560px, und auf einem breiten
   Schirm blieb rechts eine handbreite leere Flaeche stehen. Der Grund fuer
   den Deckel war richtig und steht oben: Waechst NUR die mittlere Spalte,
   steht die Nachricht irgendwann als schmales Band in einer leeren Flaeche.
   Die Antwort darauf ist aber nicht, die ganze Ansicht zu deckeln, sondern
   die aeusseren Spalten mitwachsen zu lassen. Das Verhaeltnis Liste zu
   Verlauf bleibt damit ungefaehr erhalten, und der Platz ist weg. Die
   Obergrenzen verhindern, dass auf einem sehr breiten Schirm eine Liste von
   Betreffzeilen einen halben Meter breit wird. */
.pe { display:grid;
      grid-template-columns:230px clamp(340px,23vw,470px) minmax(0,1fr)
                            clamp(320px,21vw,430px);
      gap:0 10px; align-items:stretch; height:calc(100dvh - 132px);
      min-height:560px;
      /* Bezugspunkt fuer das Navigations-Blatt auf schmalen Schirmen. */
      position:relative; }

.pe-sp { background:var(--color-surface); border:1px solid var(--border);
         border-radius:var(--pe-rund); overflow:hidden; display:flex;
         flex-direction:column; min-height:0; }
.pe-kopf { display:flex; align-items:center; gap:8px; padding:13px 14px;
           border-bottom:1px solid var(--border); flex:0 0 auto; min-height:56px; }
.pe-kopf b { font-size:16px; }
.pe-fueller { flex:1; }

.pe-rundknopf { width:32px; height:32px; border-radius:50%; flex:none; cursor:pointer;
                border:1px solid var(--border); background:var(--color-surface);
                display:flex; align-items:center; justify-content:center;
                color:var(--color-text-2); }
.pe-rundknopf i { width:16px; height:16px; }
.pe-rundknopf.voll { background:var(--color-accent); border-color:transparent;
                     color:var(--color-accent-fg); }
.pe-flachknopf { border:0; background:transparent; cursor:pointer; padding:2px 4px;
                 color:var(--color-text-muted); display:flex; align-items:center; }
/* Ein Knopf am Ende der Liste wird stumpf, er verschwindet nicht: Sonst
   ruecken die drei daneben auf, und wer blind auf "erledigt" zielt, trifft
   "in der Tabelle oeffnen". */
.pe-flachknopf:disabled { opacity:.32; cursor:default; }
.pe-flachknopf:disabled:hover { background:none; }
.pe-flachknopf i { width:16px; height:16px; }

.pe-navtitel { display:flex; justify-content:space-between; padding:14px 14px 4px;
               font-size:12px; color:var(--color-text-muted); }
.pe-navliste { padding:4px 8px; }
/* Der Stand der Sammler. Leise unter dem Titel, wenn alles laeuft. */
.pe-navstand { padding:0 14px 8px; font-size:12px; color:var(--color-text-muted); }
/* Und laut ueber der Liste, wenn nicht. Die Farben kommen aus der Palette,
   nicht aus getippten Werten: Rot ist im Haus sonst verboten, hier ist es der
   Signalton der Gestalt. */
.pe-frische { display:flex; align-items:flex-start; gap:8px; padding:10px 14px;
              font-size:12.5px; line-height:1.45;
              border-bottom:1px solid var(--border); }
.pe-frische i { width:16px; height:16px; flex:none; margin-top:1px; }
.pe-frische.gelb { background:var(--color-warn-soft); color:var(--color-text); }
.pe-frische.rot  { background:var(--color-err-soft); color:var(--color-text); }
/* Die Maasse stehen in reference/superchat-vorlage.md und sind am
   laufenden Programm gemessen, nicht am Bildschirmfoto: 32 hoch, Radius 8,
   Schrift 13 bei Schnitt 500. Wer im Foto misst, liegt um den Faktor 0,708
   daneben, denn das Fenster stand auf 2056 Punkten und das Foto auf 1456. */
.pe-naveintrag { display:flex; align-items:center; gap:10px; padding:0 8px;
                 min-height:32px; border-radius:var(--radius-md); cursor:pointer;
                 font-size:13px; font-weight:500; color:var(--color-text-2); }
.pe-naveintrag:hover { background:var(--color-surface-2); }
/* Aktiv ist in der Vorlage eine weisse Pille mit feinem Rahmen, nicht ein
   farbiger Block: Der Rest der Spalte soll ruhig bleiben. */
/* Aktiv ist eine weisse Pille mit feinem Rahmen. Der Rahmen kostet zwei
   Punkte Hoehe, deshalb geht der Innenabstand um eins herunter: Sonst
   springen die Eintraege beim Wechseln. */
.pe-naveintrag.aktiv { background:var(--color-surface); color:var(--color-text);
                       font-weight:600; border:1px solid var(--border);
                       box-shadow:0 1px 2px rgba(18,16,13,.06);
                       padding:0 7px; }
.pe-naveintrag i { width:17px; height:17px; flex:none; color:var(--color-text-muted); }
.pe-naveintrag span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-zahl { font-size:12px; color:var(--color-text-muted); font-weight:400; }
/* Der Kanal-Punkt ist ein `span`, und `.pe-naveintrag span { flex:1 }`
   darueber zieht ihn auf 88 Punkte Breite: aus dem Kreis wird eine Ellipse.
   Gemessen am 27.08.2026 im gerenderten Bild, nicht vermutet. Es braucht
   deshalb den genaueren Wahlausdruck, nicht nur `flex:none`. */
.pe-naveintrag .pe-punkt { flex:0 0 10px; width:10px; height:10px;
                           border-radius:50%; }
/* Seit dem 04.09.2026 steht in der Kanalliste das echte Zeichen statt eines
   Farbpunktes: Ein gruener Punkt neben "WhatsApp" sagt nichts, was das Wort
   nicht schon sagt, das Zeichen findet das Auge dagegen ohne zu lesen.
   Derselbe genauere Wahlausdruck wie beim Punkt darueber, aus demselben
   Grund: `flex:none` allein reicht hier nicht. */
.pe-naveintrag .kl { flex:0 0 22px; }

.pe-suche { margin:0 12px 8px; padding:8px 10px; border:1px solid var(--border);
            border-radius:var(--pe-rund-klein); background:var(--color-surface-2);
            font:inherit; font-size:13px; }
/* Beim Tippen soll erkennbar sein, dass das Feld aktiv ist: Ohne Rahmen sieht
   ein Suchfeld ohne Treffer aus wie ein kaputtes Feld. */
.pe-suche:focus { outline:none; border-color:var(--color-accent);
                  background:var(--color-surface); }
.pe-schalter { display:flex; gap:2px; margin:10px 12px 8px; flex:0 0 auto;
               background:var(--color-surface-2); border-radius:var(--radius-md);
               padding:4px; }
.pe-schaltknopf { flex:1; border:1px solid transparent; background:transparent;
                  font:inherit; font-size:13px; font-weight:500; padding:6px 12px;
                  min-height:29px; cursor:pointer;
                  border-radius:var(--radius-sm); color:var(--color-text-muted); }
.pe-schaltknopf.aktiv { background:var(--color-surface); color:var(--color-text);
                        font-weight:700; border-color:var(--border);
                        box-shadow:0 1px 2px rgba(18,16,13,.06); }
.pe-sortzeile { display:flex; align-items:center; padding:2px 14px 10px;
                font-size:14px; color:var(--color-text-muted);
                border-bottom:1px solid var(--border); }
.pe-sortzeile span { flex:1; }
.pe-sortrechts { display:flex; gap:6px; }

.pe-rollen { overflow-y:auto; flex:1 1 auto; padding:6px; }
/* **Die Zeile ist nur noch der Rahmen, der Inhalt traegt das Aussehen.**
   Beim ersten Anlauf am 31.08.2026 blieben Abstand und Flexbox hier, und die
   Wisch-Flaechen darunter schauten durch den Rand jeder Zeile hervor: Die
   Liste sah aus, als waeren alle Knoepfe dauerhaft offen. Alles Sichtbare
   gehoert an .pe-zeileinhalt, sonst deckt er die Flaechen nicht ab. */
.pe-zeile { cursor:pointer; border-radius:var(--pe-rund); }
/* ---- Wischen wie in WhatsApp ----------------------------------------
   Die Aktionsflaechen liegen UNTER der Zeile und werden beim Wischen
   freigelegt. Deshalb traegt die Zeile die Position und der Inhalt bewegt
   sich darueber. */
.pe-zeile { position:relative; overflow:hidden; touch-action:pan-y; }
.pe-zeileinhalt { position:relative; z-index:1; display:flex; gap:12px;
                  align-items:flex-start; padding:10px 12px;
                  background:var(--color-bg); will-change:transform;
                  border-radius:var(--radius-md); }
/* **Der Farbton der Anwahl liegt AUF dem deckenden Grund, nicht statt
   seiner.** --color-accent-soft ist durchscheinend (10 bis 14 Prozent), und
   wer ihn als einzigen Hintergrund setzt, macht die Kachel durchsichtig:
   Dahinter liegen die Aktionsstreifen, und die scheinen dann beim Anklicken
   durch. Genau das war am 31.08.2026 die gemeldete "alte Grafik". */
.pe-zeile.aktiv .pe-zeileinhalt {
  background:linear-gradient(var(--color-accent-soft), var(--color-accent-soft)),
             var(--color-bg); }
.pe-wisch { position:absolute; top:0; bottom:0; display:flex; z-index:0; }
.pe-wisch.links { left:0; }
.pe-wisch.rechts { right:0; }
/* **Sie liegen hinter der Zeile und tragen deren Rundung, keine Kapsel.**
   Bei 65 zu 60 Punkten waere eine Kapsel ein Ei. Am 06.09.2026 beim
   Durchgehen aller Reiter gefunden, als einzige Stelle, an der die
   Flaechen-Stufe richtig ist und die Kapsel falsch waere. */
.pe-wischknopf { border:0; cursor:pointer; width:65px; display:flex;
                 border-radius:var(--radius-md);
                 flex-direction:column; align-items:center; justify-content:center;
                 gap:3px; font-size:11px; color:#fff; }
.pe-wischknopf i { width:17px; height:17px; }
/* Gruen fuer das Harmlose, Ultramarin fuers Festhalten, Grau fuers Ablegen.
   Kein Rot: Archivieren ist kein Loeschen, und Rot ist im Haus ohnehin
   verboten. */
.pe-wischknopf.ungelesen { background:var(--color-ok); }
.pe-wischknopf.fixieren { background:var(--color-accent); }
.pe-wischknopf.archivieren { background:var(--color-text-muted); }
/* Eine festgehaltene Zeile bekommt eine schmale Kante, sonst sieht man ihr
   nicht an, warum sie oben steht. */
.pe-zeile.fixiert .pe-zeileinhalt { box-shadow:inset 3px 0 0 var(--color-accent); }
/* **Keine Trennstriche zwischen den Zeilen.** FreeChat und die
   WhatsApp-App trennen allein ueber Weissraum, und genau das macht eine
   lange Liste ruhig: Bei vierzehn Zeilen sind vierzehn Striche vierzehn
   Linien, die um Aufmerksamkeit bitten und keine Auskunft geben. Am
   01.09.2026 an beiden nachgesehen. */
/* **Der Weissraum, den der Kommentar darueber verspricht.** Er fehlte: Die
   Kacheln stiessen ohne Abstand aneinander, und dort, wo zwei Rundungen
   aufeinandertreffen, entstehen enge Zwickel. Genau das sah unruhig aus und
   wurde am 08.09.2026 gemeldet. Vier Punkte reichen: Die Kacheln stehen frei,
   ohne dass die Liste auseinanderfaellt. */
.pe-zeile + .pe-zeile { border-radius:var(--pe-rund); margin-top:4px; }
/* Aussen und innen derselbe Radius. Standen dort zwei verschiedene, schnitt
   der aeussere den inneren an, und die Ecken wirkten ausgefranst. */
.pe-zeile, .pe-zeile .pe-zeileinhalt, .pe-wischknopf {
  border-radius:var(--pe-rund); }
.pe-zeile:hover .pe-zeileinhalt { background:var(--color-surface-2); }
/* Die gewaehlte Zeile ist in der Vorlage eine hellblaue Karte mit runden
   Ecken, ohne Trennlinie darueber. */
.pe-zeile.aktiv .pe-zeileinhalt {
  background:linear-gradient(var(--color-accent-soft), var(--color-accent-soft)),
             var(--color-bg); }
.pe-zeile.aktiv { border-radius:var(--pe-rund); border-top-color:transparent; }
/* Der runde Kanal-Knopf. Am 04.09.2026 nachgebessert, die Zeichen sassen
   unscharf und zu tief.

   `line-height:0` ist der Grund fuer das "nicht mittig": Ein Inline-Element
   erbt die Zeilenhoehe der Umgebung und schiebt seinen Inhalt nach unten.

   Die Groesse steht als `--kl-glyph` am Knopf und wirkt von hier aus auf das
   Kind. Das ist keine Umstaendlichkeit: Lucide TAUSCHT das `<i>` gegen ein
   frisches `<svg>` aus, eine am `<i>` gesetzte Groesse ist danach weg. Genau
   deshalb sassen die eigenen Symbole vorher zu gross im Kreis. */
/* **Zentriert ueber grid, nicht ueber inline-flex.** Ein inline-flex sitzt
   auf der Grundlinie, und die Zeilenhoehe der Umgebung schiebt seinen Inhalt
   mit. Deshalb sassen alle Zeichen leicht nach oben und links versetzt in
   ihren Kreisen, gemeldet am 08.09.2026 ("alle nicht"). `place-items:center`
   kennt keine Grundlinie und stellt beide Achsen zugleich mittig.
   Dieselbe Technik wie bei .kom-kanal, die es seit jeher richtig macht.
   `line-height:0` bleibt: Ohne sie beult der Kreis oben aus, weil die
   Zeilenhoehe die Box hoeher macht als ihre gesetzte Hoehe. */
.kl { display:grid; place-items:center;
      border-radius:50%; color:#fff; flex:none; line-height:0; }
.kl > svg, .kl > i {
  width:var(--kl-glyph, 60%); height:var(--kl-glyph, 60%);
  display:block; flex:none;
  /* Lucide zeichnet fuer 24 Punkte. Klein heruntergerechnet werden die
     Striche matschig, deshalb duenner. Auf die gefuellten Markenzeichen hat
     das keine Wirkung, die kennen keinen Strich. */
  stroke-width:1.75;
  /* Kanten auf halben Pixeln weichzeichnet der Browser sonst. */
  shape-rendering:geometricPrecision;
}
/* **Rechts bleibt eine schmale Spur frei, immer.** Dort taucht beim
   Ueberfahren der Pfeil auf. Waere sie nicht reserviert, laege er ueber der
   Uhrzeit und dem Punkt, oder alles rueckte bei jeder Mausbewegung zur
   Seite. Beide Vorbilder halten diese Spur ebenfalls frei, deshalb wirkt
   ihre Liste beim Ueberfahren ruhig. Dieselbe Regel wie in der Kopfleiste:
   Ein Werkzeug verschwindet nicht, es wird stumpf und behaelt seinen Platz. */
.pe-zeiletext { min-width:0; flex:1; padding-right:24px; }
.pe-zeilekopf { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.pe-zeilekopf b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
/* Die Plakette steht rechts am Ende der Vorschauzeile, nicht neben dem
   Namen. Beide Vorbilder halten die rechte Kante fuer den Stand frei: oben
   die Zeit, darunter die Plakette. */
.pe-wartet { display:inline-block; width:8px; height:8px; border-radius:50%;
             background:var(--color-accent); flex:none; margin-left:auto; }
.pe-zeit { font-size:12px; color:var(--color-text-muted); flex:none; }
/* **Ungelesen faerbt die Uhrzeit.** Zweites, ruhiges Zeichen an einer
   Stelle, auf die das Auge beim Ueberfliegen ohnehin faellt. */
.pe-zeit.offen { color:var(--color-accent); font-weight:600; }
/* Die Zwischenzeile gibt es weiterhin, aber nur noch in den Nebenlisten
   (Papierkorb, Spam, Freigabe-Schlange). Dort steht Ordner, Nummer oder
   Anhang darin, und das traegt kein Zeichen im Kreis. In der Arbeitsliste
   ist sie seit dem 01.09.2026 weg. */
.pe-ordner { display:flex; align-items:center; gap:5px; font-size:13px;
             color:var(--color-text-muted); margin-top:1px; }
.pe-ordner i { width:13px; height:13px; }
.pe-vorschau { display:flex; align-items:center; gap:6px; font-size:13px;
               color:var(--color-text-muted); margin-top:2px; min-width:0; }
.pe-vorschautext { overflow:hidden; text-overflow:ellipsis;
                   white-space:nowrap; min-width:0; }
.pe-punkte { color:var(--color-text-muted); letter-spacing:1px; flex:none; }

/* Der Pfeil beim Ueberfahren. Er sitzt IN der Zeile ganz rechts, taucht erst
   beim Ueberfahren auf und nimmt dabei keinen Platz weg, weil er absolut
   liegt: Sonst ruecken Zeit und Plakette bei jeder Mausbewegung. */
.pe-pfeil { position:absolute; right:6px; top:50%; transform:translateY(-50%);
            width:26px; height:26px; border:0; border-radius:var(--radius-sm);
            background:var(--color-surface-2); color:var(--color-text-muted);
            display:none; align-items:center; justify-content:center;
            cursor:pointer; padding:0; }
.pe-pfeil i { width:15px; height:15px; }
.pe-zeile:hover .pe-pfeil, .pe-zeile:focus-within .pe-pfeil { display:flex; }
.pe-pfeil:hover { color:var(--color-text); }

.pe-menue { position:fixed; z-index:60; min-width:210px; padding:6px;
            border:1px solid var(--border); border-radius:var(--radius-md);
            background:var(--color-bg); box-shadow:var(--shadow-lg,0 8px 28px rgba(0,0,0,.18)); }
.pe-menuepunkt { display:flex; align-items:center; gap:10px; width:100%;
                 padding:8px 10px; border:0; border-radius:var(--radius-sm);
                 background:none; color:var(--color-text); font-size:13.5px;
                 text-align:left; cursor:pointer; }
.pe-menuepunkt:hover { background:var(--color-surface-2); }
.pe-menuepunkt i { width:16px; height:16px; color:var(--color-text-muted); flex:none; }

.pe-strom { flex:1 1 auto; overflow-y:auto; padding:16px 18px;
            display:flex; flex-direction:column; gap:9px; background:var(--color-bg); }
.pe-via { text-align:center; color:var(--color-text-muted); font-size:13px;
          display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:4px; }
.pe-tagchip { align-self:center; font-size:12px; color:var(--color-text-2);
              background:var(--color-surface); border:1px solid var(--border);
              border-radius:var(--radius-pill); padding:3px 12px; margin:8px 0; }
.pe-blase { max-width:72%; align-self:flex-start; padding:10px 13px;
            border-radius:var(--pe-rund); background:var(--color-surface-2);
            border:1px solid transparent; }
/* Ausgehend rechts und eingefaerbt. Ein Verlauf, in dem beides gleich
   aussieht, liest sich wie ein Monolog, und dann weiss man nicht mehr, wer
   zuletzt am Zug war. Genau das ist die Frage beim Hereinkommen. */
.pe-blase.raus { align-self:flex-end; background:var(--color-accent-soft); }
.pe-betreff { font-weight:600; margin-bottom:2px; }
.pe-text { white-space:pre-wrap; font-size:15px; line-height:1.45;
  /* **Ein langer Link sprengt sonst die Kachel.** Am 31.08.2026 lief eine
     spuelenprofi-Adresse mit 180 Zeichen ueber den Rand hinaus und wurde
     abgeschnitten: Man sah, dass ein Link da ist, und konnte ihn nicht lesen.
     Der Umbruch muss auch dort greifen, wo kein Leerzeichen steht, und
     `min-width:0` ist noetig, weil ein Flex-Kind sonst nicht unter seine
     Inhaltsbreite schrumpft. */
  overflow-wrap:anywhere; word-break:break-word; min-width:0; }
/* Wer in einer Gruppe geschrieben hat. Klein und ueber der Blase, wie in
   WhatsApp selbst: Der Name ist die Einordnung, nicht die Nachricht. */
.pe-absender { font-size:12px; font-weight:600; color:var(--color-accent);
               margin-bottom:3px; }
/* Das Zeichen, das eine Gruppe von einer Person unterscheidet. Ohne es sieht
   "BUERO" in der Liste aus wie ein Kontakt. */
.pe-gruppenzeichen { width:13px; height:13px; margin-right:5px;
                     vertical-align:-2px; opacity:.7; }
.pe-blasefuss { font-size:12px; color:var(--color-text-muted); margin-top:5px; text-align:right; }
/* Haekchen im Blasenfuss. Zwei blaue heissen beantwortet, und blau ist hier
   die Akzentfarbe der Marke, nicht WhatsApps Hellblau. */
.pe-haken { letter-spacing:-2px; font-weight:600; }
.pe-haken.blau { color:var(--color-accent); }
.pe-haken.fehl { color:var(--color-err); letter-spacing:normal; font-weight:500; }
/* Ton, Bild und Anhang in der Blase. Der Ton steht sofort abspielbar da, ein
   Bild als Vorschau zum Antippen, alles andere als Knopf. */
.pe-ton { width:100%; margin-top:8px; height:34px; }
.pe-bild { display:block; max-width:100%; max-height:240px; margin-top:8px;
           border-radius:var(--radius-md); cursor:pointer; }
.pe-anhang { display:inline-flex; align-items:center; gap:6px; margin-top:8px;
             padding:5px 9px; border:1px solid var(--border);
             border-radius:var(--radius-md); background:var(--color-surface);
             color:var(--color-text); font-size:12px; cursor:pointer; }
.pe-anhang:hover { background:var(--color-surface-2); }
.pe-anhang.fehlt { color:var(--color-text-muted); cursor:default;
                   border-style:dashed; }
.pe-anhang i { width:14px; height:14px; }
.pe-pille { font-size:12px; background:var(--color-accent-soft);
            color:var(--color-accent-deep); border-radius:var(--radius-pill); padding:3px 10px; }

.pe-verfassen { margin:12px; border:1px solid var(--border);
                border-radius:var(--pe-rund); padding:12px 14px; flex:0 0 auto;
                background:var(--color-surface); }
.pe-feld { width:100%; border:0; padding:0; font:inherit; font-size:15px;
           resize:vertical; background:transparent; outline:none; }
.pe-werkzeuge { display:flex; align-items:center; gap:10px; margin-top:10px; }
.pe-vorlagen { border:1px solid var(--border); border-radius:var(--pe-rund-klein);
               padding:6px 9px; font:inherit; font-size:13px; background:var(--color-surface); }
.pe-hinweis { font-size:13px; color:var(--color-text-2); margin-top:8px; }

.pe-abschnitt { border-bottom:1px solid var(--border); }
.pe-abschnittkopf { display:flex; justify-content:space-between; align-items:center;
                    padding:13px 15px; cursor:pointer; }
.pe-abschnittkopf b { font-size:15px; }
.pe-abschnittkopf i { width:16px; height:16px; color:var(--color-text-muted); }
.pe-abschnittleib { padding:0 15px 14px; }
.pe-merkmal { display:flex; justify-content:space-between; gap:10px;
              font-size:13px; padding:5px 0; }
.pe-merkmal span { color:var(--color-text-muted); flex:0 1 auto; min-width:0;
                   display:inline-flex; align-items:center; gap:7px;
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-merkmal span i { width:14px; height:14px; flex:none; }
.pe-merkmal b { text-align:right; overflow:hidden; text-overflow:ellipsis;
                white-space:nowrap; flex:none; font-weight:500; }
/* Der Leerzustand nach dem Vorbild: Zeichnung, fette Zeile, erklaerender
   Satz. Er ist der Grund, warum die Vorlage auch ohne Daten fertig aussieht,
   und er kostet nichts. Ein leerer Posteingang wird als Erfolg erzaehlt, nicht
   als Mangel. */
.pe-leerbild { display:flex; flex-direction:column; align-items:center;
               justify-content:center; gap:6px; padding:44px 24px;
               text-align:center; color:var(--color-text-muted); }
.pe-leerbild i { width:38px; height:38px; margin-bottom:6px; opacity:.35;
                 stroke-width:1.25; }
.pe-leerbild b { font-size:15px; color:var(--color-text-2); }
.pe-leerbild span { font-size:13px; max-width:30ch; line-height:1.5; }

/* Die Schildchen der Vorlage. Sie stehen unter der Vorschau, nicht davor:
   Wer die Liste ueberfliegt, liest zuerst worum es geht und dann die
   Einordnung. Ein von Hand gesetztes traegt einen Rahmen, ein von einer Regel
   gesetztes nicht: Man soll sehen, was eine Maschine geraten hat. */
.pe-schilder { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.pe-schild { font-size:11px; font-weight:600; letter-spacing:.02em;
             padding:1px 7px; border-radius:var(--radius-pill);
             background:var(--color-surface-2); border:1px solid transparent;
             white-space:nowrap; }
.pe-schild.hand { border-color:currentColor; }
.pe-labelwolke { display:flex; flex-wrap:wrap; gap:6px; }
.pe-schild.waehlbar { cursor:pointer; opacity:.5; font:inherit; font-size:11px;
                      font-weight:600; }
.pe-schild.waehlbar.an { opacity:1; border-color:currentColor; }
.pe-schild.waehlbar:hover { opacity:.85; }
.pe-notizfeld { border:1px solid var(--border); border-radius:var(--pe-rund-klein);
                padding:8px 10px; background:var(--color-surface-2); }

.pe-leer { border-radius:var(--radius-lg); padding:18px; color:var(--color-text-muted); font-size:14px; }
.pe-mitte > .pe-leer { flex:1; background:var(--color-bg); }

/* Unter 1280 faellt die Kontaktspalte weg, unter 1000 die Navigation, unter
   820 stapelt alles. Fuenf Spalten auf einem Handy waeren fuenf Streifen. */
@media (max-width:1280px) { .pe { grid-template-columns:210px 320px minmax(0,1fr); }
                            .pe-kontakt { display:none; } }
@media (max-width:1000px) { .pe { grid-template-columns:320px minmax(0,1fr); }
                            .pe-nav { display:none; } }

/* **Ausgeblendet ist nicht weggeworfen.** Bis zum 28.08.2026 fiel die
   Navigationsspalte unter 1000 Punkten ersatzlos weg, und damit waren vom
   Handy aus die Kanaele, die Kennzeichen, die gespeicherten Filter und die
   Sichten "Wartet auf Antwort", "Markiert" und "Vorbereitet" nicht mehr
   erreichbar. Es gab keinen Knopf dorthin und keinen Weg zurueck.

   Jetzt schiebt sie sich als Blatt darueber. Sie bleibt dieselbe Spalte,
   dasselbe Markup: Ein zweiter Aufbau nur fuers Handy waere eine zweite
   Wahrheit, und die eine wuerde man beim Aendern vergessen. */
@media (max-width:1000px) {
  .pe-nav.offen { display:block; position:absolute; z-index:40; top:0; left:0;
                  bottom:0; width:min(300px, 84vw); overflow:auto;
                  background:var(--color-surface);
                  border-right:1px solid var(--border);
                  box-shadow:0 8px 40px rgba(0,0,0,.18); }
  .pe-navschatten { position:absolute; z-index:39; inset:0;
                    background:rgba(0,0,0,.28); }
}
@media (max-width:820px)  { .pe { grid-template-columns:1fr; height:auto; } }

/* Die Bühne im Jarvis-Reiter: was gerade offen ist.
   Das Blatt wird in der Breite begrenzt und nicht gedehnt: Ein verzerrtes
   Dokument liest sich schlechter als ein kleines. */
.jv-buehne-titel{font-weight:600;margin-bottom:10px;}
.jv-buehne-blatt{display:block;max-width:100%;width:520px;height:auto;
  border-radius:var(--radius);border:1px solid var(--border);cursor:zoom-in;
  background:var(--color-surface-2);}
.jv-buehne-blatt:hover{border-color:var(--color-accent);}
/* Die Hülle traegt den Kasten, damit er sich am Blatt ausrichtet und nicht an
   der Karte. Sie ist genau so breit wie das Bild, deshalb inline-block. */
.jv-buehne-huelle{position:relative;display:inline-block;line-height:0;}
/* Der Kasten ueber der Stelle, die gerade vorgelesen wird.
   Die Farbe kommt aus dem Token, nicht aus einem Rueckfallwert: Am 24.08.2026
   galten im Cockpit an 41 Stellen alte Goldwerte, weil die Variable dahinter
   gar nicht existierte, und niemand hat es gesehen.
   Er faengt keine Klicks ab: Darunter liegt das Blatt, und das oeffnet den
   grossen Betrachter. */
/* Der Textkasten, wenn eine Mail offen ist. Begrenzt in der Hoehe und
   scrollbar: Eine lange Mail darf die Seite nicht auseinanderziehen. */
.jv-buehne-text{max-height:340px;overflow-y:auto;white-space:pre-wrap;
  font-size:13px;line-height:1.55;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--color-surface-2);
  color:var(--color-text);}
.jv-buehne-marke-text{background:var(--color-accent-soft);
  box-shadow:0 0 0 1.5px var(--color-accent);border-radius:var(--radius-xs);
  color:inherit;padding:0 1px;}
.jv-buehne-marke{position:absolute;pointer-events:none;border-radius:var(--radius-xs);
  background:var(--color-accent-soft);
  box-shadow:0 0 0 1.5px var(--color-accent);
  transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;}


/* ---- Gesundheit: der Hero-Block ------------------------------------------
   Bewusst nur fuer diesen einen Reiter. Er beantwortet eine andere Frage als
   die Arbeitslisten: kein "was ist zu tun", sondern "wie steht es". Dafuer
   traegt EIN Wert, gross und ruhig, mehr als vier gleich grosse Kacheln.

   Alle Farben kommen aus Token, keine mit Rueckfallwert: Am 24.08.2026 lagen
   41 Stellen in sechs Dateien auf erfundenen Variablennamen und malten still
   die alte Gold-Welt.

   Typografie nach Apples Regel: Tracking ist groessenabhaengig. Grosse Zahlen
   bekommen NEGATIVES Tracking, weil Ziffern beim Wachsen zu weit
   auseinanderstehen, und enges Leading. Ein fester Wert waere irgendwo falsch. */
.gh-hero {
  display: flex; align-items: center; gap: 28px;
  padding: 24px 26px; border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--color-bg);
}
.gh-hero-zahl {
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.gh-hero-einheit {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0;
  color: var(--color-text); opacity: .55; margin-left: 8px;
}
.gh-hero-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--color-text); opacity: .5; margin-bottom: 6px;
}
.gh-hero-sub { font-size: 13px; color: var(--color-text); opacity: .6; margin-top: 6px; }
.gh-ring { flex: 0 0 auto; }
/* Der Ring zeigt den heutigen Wert gegen den EIGENEN Schnitt, nicht gegen ein
   erfundenes Tagesziel. Zehntausend Schritte sind Konvention, keine Messung. */
.gh-ring-spur { stroke: var(--border); }
.gh-ring-wert { stroke: var(--color-ok); transition: stroke-dashoffset 600ms cubic-bezier(.22,1,.36,1); }
.gh-neben { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.gh-neben-zahl {
  font-size: 1.5rem; font-weight: 650; line-height: 1.1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
@media (max-width: 700px) {
  .gh-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .gh-neben { margin-left: 0; }
}
/* Ohne Bewegung: Der Ring erscheint fertig gefuellt statt zu wachsen. */
@media (prefers-reduced-motion: reduce) {
  .gh-ring-wert { transition: none; }
}

/* Kennzeichen in der Posteingangs-Zeile. Sie stehen in der Kanalzeile, nicht
   in einer eigenen: Eine vierte Zeile liesse die Hoehen springen, und eine
   Liste, in der jede zweite Zeile anders hoch ist, liest sich unruhig.
   Deshalb klein, ohne Fuellfarbe und mit Rand, damit sie den Kanal daneben
   nicht ueberstimmen. */
.pe-marke {
  font-size: 11px; line-height: 1.4; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-pill, 999px);
  color: var(--color-text-muted); white-space: nowrap;
}

/* Foerder-Radar ------------------------------------------------------------
   Ein Titel in einer Tabellenzeile, der sich anklicken laesst. Er muss als
   klickbar erkennbar sein, ohne die Zeile unruhig zu machen: kein Blau, keine
   Unterstreichung im Ruhezustand, nur der Zeiger und die Akzentfarbe beim
   Darueberfahren. Dieselbe Zurueckhaltung wie bei .chip.beleg-link.
   Als <button>, damit die Tastatur ihn erreicht. */
.zeilentitel{background:none;border:0;padding:0;margin:0;font:inherit;
  color:var(--color-text);text-align:left;cursor:pointer;font-weight:600;}
.zeilentitel:hover{color:var(--color-accent);}
.zeilentitel:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* Mehrere Marken nebeneinander brauchen Luft und einen Umbruch. Ohne das
   laufen sie ineinander, und genau so sah die erste Fassung aus: aus
   "Betrieb keine" und "Kunden gering" wurde ein unlesbarer Block. */
.chipreihe{display:flex;flex-wrap:wrap;gap:4px;}

/* Formular zum Bearbeiten eines Termins.
   Farben kommen ausschliesslich aus Tokens, nie als Rueckfallwert in var():
   Am 24.08.2026 galten 41 solcher Rueckfaelle aus der alten Gold-Welt, weil
   die Variable dahinter gar nicht existierte, und niemand hat es gesehen. */
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-f { display: flex; flex-direction: column; gap: 4px; }
.cal-f > span { font-size: var(--fs-sm); color: var(--color-text-muted); }
.cal-f input, .cal-f textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
}
.cal-f textarea { resize: vertical; min-height: 72px; }
.cal-f input:focus, .cal-f textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.cal-hinweis { margin-top: 10px; font-size: var(--fs-sm); min-height: 1.2em; }

/* Ein Termin, der gerade gezogen wird. Er bleibt sichtbar, aber halb
   durchscheinend: Man muss sehen, was darunter liegt, sonst zieht man ihn
   blind auf einen anderen Termin. */
.cal-zieht {
  opacity: 0.72;
  cursor: grabbing;
  z-index: 40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* **Auswahlfelder brauchen Luft.** `select.select` und `select.input` hatten
   im Cockpit gar keinen eigenen Stil, also galt der nackte Browser-Standard:
   Die Schrift klebte am Rahmen und am runden Radius, und bei einem langen
   Wort wie "Eingangsrechnung" beruehrte sie ihn. Gemeldet am 07.09.2026 an
   zwei Stellen zugleich, dem Monatswaehler und der Ablageflaeche.

   Die Maße folgen den Knoepfen daneben, damit in einer Zeile nicht ein Feld
   kleiner ist als das andere: gleiche Hoehe, gleicher Radius, gleiche Schrift.
   Rechts mehr Platz, weil dort der Pfeil sitzt. */
select.select, select.input {
  appearance: none; -webkit-appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit; font-size: var(--fs-md);
  line-height: 1.2;
  padding: 9px 34px 9px 13px;
  min-height: 38px;
  cursor: pointer;
  /* Der Pfeil, gezeichnet statt als Bild: So traegt er die Textfarbe und
     stimmt in der hellen wie in der dunklen Fassung. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--transition-fast);
}
select.select:hover, select.input:hover { border-color: var(--color-accent); }
select.select:focus, select.input:focus {
  outline: none; border-color: var(--color-accent);
}

/* Der GiroCode in der Zahlliste. 64 Punkte: gross genug fuer jede
   Banking-App, klein genug fuer eine Tabellenzeile. Weisser Grund, weil ein
   QR auf farbigem Untergrund von manchen Kameras nicht gelesen wird. */
.qr-klein{width:64px;height:64px;display:block;border-radius:var(--radius-xs);
  background:#fff;padding:2px;cursor:pointer;}
.qr-fehlt{display:inline-grid;place-items:center;width:64px;height:64px;
  color:var(--color-text-muted);font-size:var(--fs-base);cursor:default;}