/* Die zweite Gestalt: das Cockpit in Papier und Ultramarin.
 * ============================================================================
 *
 * Angeordnet am 22.08.2026. Diese Datei ERSETZT nichts. Sie wird zusaetzlich
 * geladen und wirkt ausschliesslich, solange am Wurzelelement
 * `data-gestalt="squadrai"` steht. Ohne dieses Kennzeichen ist sie tot, und
 * das Cockpit sieht aus wie immer.
 *
 * Warum dieser Weg und kein zweites Cockpit: Ein Klon waere ein zweiter
 * Schreiber auf derselben Datenbank oder ein totes System ohne Daten. Beides
 * beantwortet die eigentliche Frage nicht, naemlich ob sich damit im Alltag
 * mit den echten Zahlen arbeiten laesst.
 *
 * Warum es reicht, hier Variablen zu setzen: Die styles.css arbeitet
 * durchgehend mit ihnen, und `pageHead()` steht in 24 von 26 Reitern. Was
 * hier steht, wirkt deshalb ueberall, ohne dass eine einzige Ansicht
 * angefasst wird.
 *
 * ZWEI ACHSEN, die nicht verwechselt werden duerfen:
 *   data-thema   hell oder dunkel, gibt es seit jeher
 *   data-gestalt die Formensprache, neu
 * Beide gelten gleichzeitig. Deshalb steht unten jede Palette zweimal, einmal
 * fuer hell und einmal fuer dunkel. Wer nur eine setzt, hat ein Cockpit, das
 * abends unlesbar wird.
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Dunkel ──────────────────────────────────────────────────────────────
 *
 * Das Grundthema des Cockpits ist dunkel, deshalb steht diese Palette ohne
 * Themenangabe. Ultramarin kommt auf dunklem Grund nur auf 2,31:1 und ist
 * dort unlesbar, deshalb traegt der Akzent hier den hellen Ton (6,99:1).
 */
html[data-gestalt="squadrai"] {
  --color-bg:#12100D; --color-surface:#1C1915; --color-surface-2:#26221C;
  --color-sidebar-hover:rgba(250,248,244,0.06);
  --color-text:#FAF8F4; --color-text-2:#C9C3B8; --color-text-muted:#9C968B;
  --color-accent:#7C97FF; --color-accent-hover:#A3B6FF; --color-accent-deep:#1B3FD8;
  --color-accent-soft:rgba(124,151,255,0.14); --color-accent-ring:rgba(124,151,255,0.45);
  --color-accent-fg:#0D1547;
  --color-ok:#6BC48E; --color-warn:#E0B341; --color-err:#F2837B; --color-info:#7C97FF;
  /* Die Ampel-Lampe ist KEIN Text und hat deshalb eine eigene Farbe.
     Im Dunkeln traegt das Gold von oben, hell braucht es eine andere. */
  --color-warn-lampe:#E0B341;
  --color-ok-soft:rgba(107,196,142,0.14); --color-warn-soft:rgba(224,179,65,0.15);
  /* Der Vordergrund fuer eine FLAECHE im Fehlerton. Hier traegt --color-err
     den hellen Lachston, damit er auf dunklem Grund lesbar ist. Weisse Schrift
     DARAUF kommt aber nur auf 2,53 zu 1: Ein Signalton gilt nur auf seiner
     Seite, und wer ihn umdreht, muss auch den Text umdrehen. */
  --color-err-fg:#2B0906;
  --color-err-soft:rgba(242,131,123,0.13); --color-info-soft:rgba(124,151,255,0.14);
  --border:rgba(250,248,244,0.10); --border-strong:rgba(250,248,244,0.18);

  /* Die Navigationsspalte traegt die Marke als Flaeche, aber leise.
   *
   * Bis zum 23.08.2026 stand hier #0D1547, dasselbe tiefe Ultramarin wie in
   * der hellen Fassung, und es sah aus wie ein fremder Balken. Zwei Gruende,
   * beide nachgemessen. Sie stand auf Helligkeit 9,6, die Karten auf 9,0:
   * Die Spalte lag also auf derselben Ebene wie der Inhalt und konkurrierte
   * mit ihm, statt hinter ihm zu liegen. Und sie war das einzige gesaettigte
   * Feld zwischen lauter warmen Neutraltoenen.
   *
   * Der Hebel ist die Saettigung, nicht die Helligkeit. Auf fast schwarzem
   * Grund trennt ueberhaupt kein Ton mehr ueber Helligkeit: Vom jetzigen bis
   * zum dunkelsten Kandidaten liegen alle zwischen 1,01 und 1,15 gegen den
   * Grund, und die Schwelle, ab der man eine Flaeche als eigene Ebene sieht,
   * liegt im Haus bei 1,17 (gemessen fuer die helle Fassung, oben nachlesbar).
   * Getrennt wird hier also ueber die Linie, und die Spalte tritt ueber Ton
   * und Tiefe zurueck: Helligkeit 3,8, hinter Grund und Karten, mit gerade
   * noch erkennbarem Blau. Weiss steht darauf auf 19,1:1, der Akzent auf
   * 7,0:1, beide besser als vorher. */
  --sq-spalte:#0A0E22;
  --sq-spalte-text:#FFFFFF;
}

/* ── Hell ────────────────────────────────────────────────────────────────
 *
 * Die Fassung, die am 22.08.2026 abgenommen wurde. Drei Flaechen statt
 * zweier, und der Unterschied ist gemessen: Karte gegen Arbeitsgrund kommt
 * mit Weiss auf Karton auf 1,17:1 und trennt sichtbar, mit Papier auf Karton
 * nur auf 1,10:1 und ist als Kante nicht wahrnehmbar.
 *
 * Ultramarin gilt hier als Akzent (7,20:1 auf Papier), der helle Ton waere
 * auf diesem Grund unlesbar. Jeder Ton hat genau eine Seite.
 */
html[data-gestalt="squadrai"][data-thema="hell"] {
  --color-bg:#F0EDE6; --color-surface:#FFFFFF; --color-surface-2:#FAF8F4;
  --color-sidebar-hover:rgba(255,255,255,0.10);
  --color-text:#12100D; --color-text-2:#4A463E; --color-text-muted:#6B665D;
  --color-accent:#1B3FD8; --color-accent-hover:#3355E8; --color-accent-deep:#14237A;
  --color-accent-soft:rgba(27,63,216,0.10); --color-accent-ring:rgba(27,63,216,0.40);
  --color-accent-fg:#FFFFFF;
  /* Der Warnton war bis zum 24.08.2026 #A16207 und damit der einzige Ausreisser
     der Reihe: auf dem Arbeitsgrund kam er auf 4,21 zu 1, waehrend ok bei 5,58,
     err bei 5,59 und der Akzent bei 6,53 stehen. Gemessen betraf das 48 Stellen
     allein in der Post, dazu die Liegezeiten in der Kommunikation. Jetzt 5,21
     auf dem Grund, 6,09 auf der Karte, also im selben Band wie seine Geschwister.
     Die dunkle Fassung bleibt unberuehrt, sie steht dort auf 9,67. */
  --color-ok:#1E6B3A; --color-warn:#8C5605; --color-err:#B3261E; --color-info:#1B3FD8;
  /* Sam am 01.09.2026: "Warum sind die Braun anstatt Gelb die Ampel?"
     Er hat recht, und die Ursache war eine verwechselte Anforderung.

     --color-warn ist #8C5605 und muss es bleiben: Als TEXT auf Papier
     braucht es 4,5 zu 1, und die Farbe schafft 6,09. Ein helleres Gold
     waere dort unlesbar.

     Eine LAMPE ist aber kein Text. Fuer sie verlangt WCAG 3,0 zu 1, und
     dafuer genuegt Dunkelgold #B8860B mit 3,25. Das ist ausserdem eine
     Hausfarbe aus der CI, und es sieht nach Gold aus statt nach Braun.

     Der Fehler war, beides aus einem Token zu bedienen: Dann gewinnt
     die schaerfere Anforderung, und die Ampel verliert ihre Bedeutung.
     Eine Ampel, deren Gelb wie Braun aussieht, ist keine Ampel mehr. */
  --color-warn-lampe:#B8860B;
  --color-ok-soft:rgba(30,107,58,0.12); --color-warn-soft:rgba(140,86,5,0.14);
  --color-err-fg:#FFFFFF;
  --color-err-soft:rgba(179,38,30,0.11); --color-info-soft:rgba(27,63,216,0.10);
  --border:#DDD8CE; --border-strong:#C4BEB2;
  --shadow-lg:0 10px 26px rgba(18,16,13,0.10);

  --sq-spalte:#14237A;
  --sq-spalte-text:#FFFFFF;
}

/* ── Die Form ────────────────────────────────────────────────────────────
 *
 * **Rund, seit dem 06.09.2026.** Angeordnet: "Ich moechte diesen runden
 * Ansatz im gesamten Cockpit SQUADRAI als Design einfuehren." Der Anlass war
 * die Kalender-Leiste, die dem Mac nachgebaut wurde, und ein Bild vom iPad,
 * auf dem Umschalter und Navigation nebeneinander standen, das eine rund und
 * das andere kantig.
 *
 * **Das kehrt die Entscheidung vom 22.08.2026 um.** Dort stand: keine runden
 * Ecken, nirgends, die Marke heisst Winkelmass. Der Geschaeftsfuehrer hat sie
 * aufgehoben, und das ist seine Entscheidung. Der alte Wortlaut bleibt hier
 * als Absatz stehen, damit niemand die Kante spaeter "zurueckrepariert" und
 * dabei glaubt, einen Fehler zu beheben.
 *
 * Gesetzt wird es ueber die Stufen selbst, nicht ueber hundert Einzelregeln:
 * eine Zeile, und die ganze Oberflaeche folgt. Genau deshalb liess sich die
 * Kante auch in einem Griff wieder aufheben.
 *
 * Zwei Stufen, mehr braucht es nicht. Flaechen (Karten, Tabellen, Fenster)
 * tragen die Skala darunter, Bedienelemente (Knoepfe, Felder, Marken) sind
 * Kapseln. So sieht eine Leiste aus wie eine Leiste und nicht wie sieben
 * Einzelteile.
 */
html[data-gestalt="squadrai"] {
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius:14px;

  /* **Die Systemschrift, seit dem 06.09.2026.** Angeordnet: "Mach die
     Schrift auch wie auf dem Mac", dazu die Regel "deine Schrift muss im
     ganzen Cockpit einheitlich sein".

     Sie war es naemlich nicht, und der Grund war unsichtbar: Hier stand
     'Instrument Sans', geladen wurde die Schrift aber nirgends. Auf dem Mac
     ist sie installiert und wurde benutzt, auf iPhone und iPad gibt es sie
     nicht, dort fiel das Cockpit auf die Systemschrift zurueck. Dasselbe
     Cockpit sah auf zwei Geraeten verschieden aus, ohne dass irgendwo ein
     Fehler zu sehen war.

     Die Systemschrift loest beides auf einmal: Auf Mac, iPad und iPhone ist
     das San Francisco, also genau die Schrift der Kalender-App, und sie ist
     ueberall dieselbe, ohne dass eine Datei geladen werden muss. */
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  /* **Eine Schrift, keine zweite.** Angeordnet am 06.09.2026: einheitlich,
     komplett, durchgehend, ohne Ausnahmen. Die zweite Familie stand an 81
     Stellen (Kachel-Beschriftungen, Zaehler, Tabellenkoepfe, Chips) und war
     damit keine Ausnahme mehr, sondern eine halbe Oberflaeche.

     Der Name bleibt, damit nicht 81 Stellen angefasst werden muessen; was
     er liefert, ist dieselbe Schrift. Was die Schreibmaschinenschrift dort
     wirklich leistete, war die Ziffernspur, und die kommt jetzt ueber
     `tabular-nums` fuer das ganze Cockpit. */
  --font-mono:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* Die Navigationsspalte als Flaeche in der Marke, wie in der Vorlage. Im
 * Bestand traegt sie dieselbe Farbe wie der Grund und trennt sich nur ueber
 * eine Linie. */
/* **Die Kopfleiste am Handy ist die Seitenspalte.** Am Rechner steht die
 * Navigation links auf tiefem Ultramarin, am Telefon oben als Leiste, und
 * bis zum 03.09.2026 hatte diese Leiste gar keine Regel: Sie fiel auf das
 * Oliv der alten Palette zurueck, und das Handy sah aus wie ein anderes
 * Programm. Dieselbe Farbe wie die Spalte, damit es dasselbe Werkzeug
 * bleibt, egal auf welchem Geraet. */
html[data-gestalt="squadrai"] .mobile-bar {
  background:var(--sq-spalte);
  color:var(--sq-spalte-text);
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* Was in der Leiste steht, erbt die helle Schrift: Der Titel, die Uhr und
 * das Menuezeichen. Ohne das stuende dunkler Text auf dunklem Blau. */
html[data-gestalt="squadrai"] .mobile-bar,
html[data-gestalt="squadrai"] .mobile-bar * {
  color:var(--sq-spalte-text);
}

html[data-gestalt="squadrai"] aside.sidebar {
  background:var(--sq-spalte);
  color:var(--sq-spalte-text);
  border-right:1px solid var(--border);
}
/* Die Eintraege der Navigation stehen jetzt auf tiefem Ultramarin, und
 * damit gilt fuer sie das Gegenteil der uebrigen Seite: Der Akzent der
 * hellen Fassung (#1B3FD8) ist hier blau auf blau und praktisch unsichtbar.
 *
 * Genau das ist am 22.08.2026 passiert: Der aktive Reiter war nicht mehr zu
 * erkennen, weil `.nav-item.active` seine Flaeche aus --color-accent-soft
 * nimmt und seinen Balken aus --color-accent. Beide sind in der hellen
 * Fassung Ultramarin. In der Spalte wird deshalb mit Weiss gearbeitet, und
 * die Markierung traegt den hellen Signalton, der auf dunklem Grund gilt. */
html[data-gestalt="squadrai"] .nav-item { color:rgba(255,255,255,0.82); }
html[data-gestalt="squadrai"] .nav-item svg { color:rgba(255,255,255,0.72); }
html[data-gestalt="squadrai"] .nav-item:hover {
  background:rgba(255,255,255,0.09); color:#FFF;
}
html[data-gestalt="squadrai"] .nav-item:hover svg { color:#FFF; }

/* Der aktive Eintrag traegt DREI Merkmale, nicht eines: Flaeche, Balken und
 * Schriftschnitt. Wer Farben schlecht unterscheidet, erkennt ihn trotzdem. */
html[data-gestalt="squadrai"] .nav-item.active {
  background:rgba(255,255,255,0.14); color:#FFF; font-weight:700;
}
html[data-gestalt="squadrai"] .nav-item.active svg { color:#7C97FF; }
html[data-gestalt="squadrai"] .nav-item.active::before { background:#7C97FF; }

/* Der Zaehler am Reiter. Er steht auf der blauen Flaeche und braucht seine
 * eigene, sonst erbt er die der hellen Seite und verschwindet. */
html[data-gestalt="squadrai"] .nav-item .badge-num {
  background:rgba(255,255,255,0.18); color:#FFF;
}
/* Eine Null bleibt auch hier gedaempft. Sie steht fuer "nichts zu tun", und
 * ein Zaehler, der bei null genauso laut ist wie bei achtzehn, bringt einem
 * bei, alle zu ueberlesen. */
html[data-gestalt="squadrai"] .nav-item .badge-num.zero {
  background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.45);
}

/* Der Demo-Knopf am Fuss. Er nimmt die gedaempfte Textfarbe der hellen
 * Fassung und war damit auf Blau nicht mehr zu lesen. */
html[data-gestalt="squadrai"] .demo-pill,
html[data-gestalt="squadrai"] .sb-foot { color:rgba(255,255,255,0.78); }
html[data-gestalt="squadrai"] .demo-pill svg { color:rgba(255,255,255,0.78); }

/* Der Schalter fuer die Gestalt selbst, in beiden Gestalten lesbar. */
.gestalt-schalter {
  margin-top:8px; width:100%; cursor:pointer;
  background:transparent; border:1px solid var(--border);
  color:var(--color-text-muted);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:6px 8px;
}
.gestalt-schalter[aria-pressed="true"] {
  border-color:rgba(255,255,255,0.30); color:#FFF;
  background:rgba(255,255,255,0.10);
}
/* Uhr und Fuss der Spalte stehen jetzt auf dunklem Grund, in beiden Themen. */
html[data-gestalt="squadrai"] .sb-uhr,
html[data-gestalt="squadrai"] .uhr-zeit { color:#FFF; }
html[data-gestalt="squadrai"] .uhr-datum { color:rgba(255,255,255,0.62); }
html[data-gestalt="squadrai"] .sb-head { border-bottom:1px solid rgba(255,255,255,0.12); }
html[data-gestalt="squadrai"] .sb-toggle { color:rgba(255,255,255,0.75); }

/* Der Seitenkopf. In der Vorlage steht der Titel in der Markenfarbe und
 * groesser, und darunter laeuft eine Linie ueber die volle Breite. */
html[data-gestalt="squadrai"] .ph {
  align-items:center;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
html[data-gestalt="squadrai"] .ph h2 {
  color:var(--color-accent); font-size:30px; letter-spacing:-0.03em; font-weight:700;
}
/* Der Zurueck-Knopf ist in der Vorlage eine gefuellte Flaeche, kein
 * Geist-Knopf: Er sitzt links vom Titel und muss dort etwas wiegen. */
html[data-gestalt="squadrai"] .ph-back {
  background:var(--color-text); color:var(--color-bg);
  border:0; font-weight:600;
}
html[data-gestalt="squadrai"] .ph-back:hover { background:var(--color-accent); color:#FFF; }

/* Die Karten sind Blaetter auf der Arbeitsflaeche: eigene Flaeche, feine
 * Kante, keine Rundung. Im Hellen ein Hauch Schatten, sonst verschwimmt die
 * Kante zwischen Weiss und Papier. */
html[data-gestalt="squadrai"] .card {
  background:var(--color-surface); border:1px solid var(--border);
}
html[data-gestalt="squadrai"][data-thema="hell"] .card {
  box-shadow:0 1px 2px rgba(18,16,13,0.05);
}
html[data-gestalt="squadrai"] .card-title { font-weight:700; letter-spacing:-0.02em; }

/* Tabellenkoepfe wie in der Vorlage: klein, gesperrt, in Versalien, mit
 * einer Linie darunter. */
html[data-gestalt="squadrai"] table th {
  font-family:var(--font-mono); font-weight:400;
  font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-text-muted); border-bottom:1px solid var(--border);
}

/* Knoepfe sind Kapseln, wie im Kalender am Mac. Der Hauptknopf steht in
 * Tinte und wird erst im Hover zum Signal: Eine Seite voller blauer Flaechen
 * sagt nichts mehr. */
html[data-gestalt="squadrai"] .btn {
  border-radius:var(--radius-pill); font-family:var(--font-ui);
}
html[data-gestalt="squadrai"] .chip { border-radius:var(--radius-pill); }

/* Und dasselbe fuer alles, worauf man tippt oder in das man schreibt. Ein
 * kantiges Feld neben einem runden Knopf faellt sofort auf, und es sieht
 * nach Versehen aus statt nach Absicht. */
html[data-gestalt="squadrai"] input:not([type=checkbox]):not([type=radio]):not([type=color]),
html[data-gestalt="squadrai"] select,
html[data-gestalt="squadrai"] textarea {
  border-radius:var(--radius-pill);
}
/* Ein mehrzeiliges Feld ist keine Kapsel: Bei zehn Zeilen Text steht die
 * Rundung neben dem ersten und letzten Wort und schneidet sie an. */
html[data-gestalt="squadrai"] textarea { border-radius:var(--radius-lg); }

/* **Ein Auswahlfeld braucht mehr als einen Radius.** Gemeldet am 06.09.2026:
 * "Der Button Mitteleuropaeische Zeit ist immer noch quadratisch." Am Mac und
 * am iPad stimmte das, im Pruefbrowser nicht, und beide zeigten dieselbe
 * Datei.
 *
 * Der Grund ist Safari: Ein `select` behaelt dort sein Systemaussehen und
 * ignoriert `border-radius` schlicht, solange man ihm das Aussehen nicht
 * ausdruecklich nimmt. Die Regel war also nie falsch, sie war wirkungslos,
 * und genau das ist die Sorte Fehler, die man am eigenen Bildschirm nicht
 * sieht.
 *
 * Der Preis dafuer ist der Pfeil: Ohne Systemaussehen zeichnet ihn niemand
 * mehr. Er kommt deshalb als Bild dazu, in einem gedaempften Grau, das auf
 * hellem wie auf dunklem Grund traegt. */
html[data-gestalt="squadrai"] select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B8B93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  background-size:10px 6px; padding-right:30px;
}
/* Dasselbe fuer das Suchfeld: Safari rundet ein Suchfeld nach eigenem Kopf. */
html[data-gestalt="squadrai"] input[type=search] {
  -webkit-appearance:none; appearance:none;
}

/* ── Die Kalender-Leiste: eine Form fuer alles ───────────────────────────
 * Angeordnet am 06.09.2026 mit einem Bild vom iPad und roten Pfeilen auf
 * die Navigation, die Zeitzone und die Suche: "Die muessen auch den Radius
 * und die Rundung haben, wie die Buttons von Tag, Woche und Jahr. Du musst
 * die Typologie im gesamten Bild beibehalten."
 *
 * Er hat den Fehler genau benannt: Der Umschalter war rund, weil er keine
 * `.btn` ist, alles daneben blieb eckig, weil die Regel darueber jeden
 * Knopf dieser Gestalt kantet. Zwei Formen in einer Leiste sind schlimmer
 * als eine falsche, denn dann sieht es nach Versehen aus.
 *
 * **Die Kante der Marke bleibt im uebrigen Cockpit.** Sie ist am 22.08.2026
 * bewusst so entschieden worden. Hier gilt die Ausnahme, weil diese Leiste
 * dem Kalender am Mac nachgebaut ist, und dort ist alles rund.
 *
 * Dazu eine Hoehe fuer alle: Vier Bedienelemente mit vier Hoehen stehen
 * nebeneinander wie ein schlecht gesetzter Satz, gleich wie rund sie sind. */
html[data-gestalt="squadrai"] .cal-toolbar .cal-seg,
html[data-gestalt="squadrai"] .cal-toolbar .cal-seg-btn,
html[data-gestalt="squadrai"] .cal-toolbar .cal-nav .btn,
html[data-gestalt="squadrai"] .cal-toolbar .btn-rund,
html[data-gestalt="squadrai"] .cal-toolbar .cal-zone,
html[data-gestalt="squadrai"] .cal-toolbar .cal-suche-feld,
html[data-gestalt="squadrai"] .cal-leiste-unten > .btn-ghost {
  border-radius:999px;
}
html[data-gestalt="squadrai"] .cal-toolbar .cal-nav .btn,
html[data-gestalt="squadrai"] .cal-toolbar .btn-rund,
html[data-gestalt="squadrai"] .cal-toolbar .cal-zone,
html[data-gestalt="squadrai"] .cal-toolbar .cal-suche-feld,
html[data-gestalt="squadrai"] .cal-leiste-unten > .btn-ghost {
  height:32px; box-sizing:border-box;
}
/* Die Kapsel des Umschalters ist zwei Punkte hoeher als ihre Stufen, weil
 * sie sie umschliesst. */
html[data-gestalt="squadrai"] .cal-toolbar .cal-seg { height:32px; align-items:center; }
html[data-gestalt="squadrai"] .cal-toolbar .cal-seg-btn { height:26px; padding:0 15px; }

/* Die Marke oben in der Spalte. Das Cockpit fuehrt dort zwei Bilddateien in
 * Schwarz und Gold, die auf tiefem Ultramarin nichts verloren haben. In
 * dieser Gestalt steht dort der Schriftzug, den auch das Produkt traegt,
 * gesetzt statt gezeichnet. */
html[data-gestalt="squadrai"] .sb-wordmark,
html[data-gestalt="squadrai"] .sb-mark-mini { display:none !important; }
html[data-gestalt="squadrai"] .sb-head::before {
  content:"SQUADRAI";
  font-family:var(--font-ui); font-weight:700; font-size:16px;
  letter-spacing:0.13em; color:#FFF;
}

/* ── Die Kopfleiste ──────────────────────────────────────────────────────
 *
 * Im Bestand gibt es sie nicht, deshalb ist sie dort ausgeblendet. Das ist
 * die einzige Regel dieser Datei, die auch ohne Kennzeichen wirkt, und sie
 * wirkt in die sichere Richtung: Sie versteckt etwas, das es vorher nicht
 * gab, statt etwas Bestehendes zu veraendern.
 */
.topbar { display:none; }

/* **Die Hoehe der Kopfleiste ist eine Groesse, keine Zahl an zwei Stellen.**
 * Sie waechst um die Systemzone des Geraets, und die Huelle darunter muss um
 * genau denselben Betrag kuerzer werden. Bis zum 03.09.2026 stand oben
 * `calc(52px + env(...))` und unten stumpf `- 52px`: Auf dem iPad hing die
 * Huelle damit um die Hoehe der Systemzone unter dem Bildschirmrand, und der
 * Fuss der Seitenleiste war nicht mehr erreichbar. Zwei Zahlen, die dasselbe
 * meinen mussten, und eine davon wusste nichts von der anderen. */
html[data-gestalt="squadrai"] { --tb-h:calc(52px + env(safe-area-inset-top,0px)); }

html[data-gestalt="squadrai"] .topbar {
  display:flex; align-items:center; gap:16px;
  height:var(--tb-h);
  padding:env(safe-area-inset-top,0px) 16px 0;
  background:var(--color-surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30;
}

/* Die Leiste weicht der Anzeige des Geraets aus.
 *
 * Gemeldet am 26.08.2026 mit einem Bild vom iPad: Zeichen und Schriftzug
 * lagen unter der Uhr, dem WLAN-Zeichen und dem Batteriestand. Die Seite
 * traegt `viewport-fit=cover`, zeichnet also bis unter die Systemleiste, und
 * die Kopfleiste begann bei null.
 *
 * Drei Dinge dabei beachten. **Es wird nicht nach dem Geraet gefragt**,
 * sondern nach dem Platz, den das System belegt: `env(safe-area-inset-top)`
 * ist am Mac null, die Leiste bleibt dort auf den Punkt so, wie sie in
 * `docs/cockpit-thema.md` vermessen ist. **Die Hoehe waechst mit**, sonst
 * schiebt die Polsterung den Inhalt aus einer Leiste heraus, die ihre 52
 * Punkte behaelt. Und **darunter liegt ein Mindestmass fuer die vom
 * Startbildschirm geoeffnete App**: Meldet das Geraet keinen Wert, waere die
 * Korrektur sonst still wirkungslos, und genau der Fehler stuende wieder da.
 * Am Handy greift beides nicht, dort ist die Leiste unter 760 Punkten
 * ausgeblendet und die `.mobile-bar` regelt ihren Abstand selbst. */
@media (display-mode:standalone) and (pointer:coarse) {
  html[data-gestalt="squadrai"] {
    --tb-h:calc(52px + max(env(safe-area-inset-top,0px),24px));
  }
  html[data-gestalt="squadrai"] .topbar {
    padding-top:max(env(safe-area-inset-top,0px),24px);
  }
}
/* Die Marke steht in der Breite der Navigationsspalte, damit sie ueber ihr
 * steht und nicht daneben versetzt. Gemessen an der Vorlage: Das Zeichen
 * beginnt bei 16, ist 23 Punkte hoch, dann 9 Punkte Luft, dann das Wort. Der
 * ganze Block ist so breit wie die Spalte darunter, damit der Griff daneben
 * bei 264 sitzt und nicht wandert, wenn die Spalte schmaler wird. */
/* Nur was diese Leiste angeht: Breite, Farbe, Schriftgrad. Abstand,
 * Zeichenhoehe, Laufweite und Versatz kommen aus .sq-marke in
 * reference/marke/squadrai/wortmarke.css und stehen hier bewusst NICHT
 * noch einmal. Der Schriftgrad ist 19px wie auf der Seite, alles andere
 * rechnet sich daraus in em. */
html[data-gestalt="squadrai"] .tb-marke {
  width:var(--sidebar-width); flex:none;
  text-decoration:none;
  font-family:var(--font-ui); font-size:19px; color:var(--color-text);
  /* Bruecke zur gemeinsamen Datei: Sie faerbt das AI ueber --sq-signal und
   * faellt ohne den Wert auf Ultramarin fuer HELLEN Grund zurueck. Im dunklen
   * Cockpit waere das der falsche der beiden Toene. Ueber --color-accent
   * folgt die Farbe dem Thema, hell wie dunkel. */
  --sq-signal:var(--color-accent);
}
html[data-gestalt="squadrai"] .tb-wort .ai { color:var(--color-accent); }
html[data-gestalt="squadrai"] .tb-knopf {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--color-accent);
}
html[data-gestalt="squadrai"] .tb-knopf svg { width:19px; height:19px; }
html[data-gestalt="squadrai"] .tb-knopf:hover { background:var(--color-bg); }
html[data-gestalt="squadrai"] .tb-knopf[aria-pressed="true"] {
  background:var(--color-accent-soft); color:var(--color-accent-deep);
}

/* Ein Werkzeug, das in DIESER Ansicht nichts zu tun hat, wird stumpf und
 * bleibt stehen. Es zu entfernen waere bequemer und genau falsch: Dann
 * ruecken die dahinter auf, und beim naechsten Reiter greift man daneben.
 * Der Titel sagt jedes Mal, WARUM es stumpf ist, denn ein grauer Knopf ohne
 * Begruendung sieht aus wie ein Fehler. */
html[data-gestalt="squadrai"] .tb-knopf[disabled] {
  color:var(--color-text-muted); opacity:0.38; cursor:default;
}
html[data-gestalt="squadrai"] .tb-knopf[disabled]:hover { background:none; }

/* Die sieben Werkzeuge in einer Reihe, 34 breit, 2 Punkte Luft. Das ergibt
 * den Rasterschritt von 36 aus der Vorlage. */
html[data-gestalt="squadrai"] .tb-werkzeuge {
  display:flex; align-items:center; gap:2px;
  /* 34 fuer den entfernten Griff, 16 fuer seine Luft davor. Ohne diese
   * Zeile ruecken die sieben um 50 Punkte nach links und stehen bei 264
   * statt bei 314. Sie sind an der Vorlage ausgemessen, und wer sie
   * verschiebt, laesst den Nutzer beim naechsten Reiter danebengreifen. */
  margin-left:50px;
}
/* Der Zaehler am Meldungs-Knopf. Er sitzt oben rechts auf dem Symbol und
 * traegt dieselbe gedaempfte Fassung bei null wie die Spalte: Ein Zaehler,
 * der bei null genauso laut ist wie bei siebenunddreissig, bringt einem bei,
 * alle zu ueberlesen. */
/* Die Zahl an der Glocke, rot wie am schwebenden Knopf. Sie ist eine
 * Meldung, kein Akzent: Im Akzentton geht sie zwischen sieben blauen
 * Werkzeugen unter, genau dort, wo sie auffallen soll. */
html[data-gestalt="squadrai"] .tb-zahl {
  position:absolute; top:1px; right:-2px;
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; line-height:1;
  background:var(--color-err); color:var(--color-err-fg);
  border-radius:var(--radius-pill);
  /* Ein Ring in der Flaechenfarbe trennt sie vom Symbol darunter, sonst
   * verschwimmen Zahl und Glocke ineinander. */
  box-shadow:0 0 0 2px var(--color-surface);
}
html[data-gestalt="squadrai"] .tb-zahl.zero { display:none; }

html[data-gestalt="squadrai"] .tb-rechts { margin-left:auto; display:flex; align-items:center; gap:14px; }
/* ---- Uhr und Datum rechts oben ----------------------------------------
 *
 * Vorher eine Zeile: "10:10  So · 23. August 2026", beides fast gleich gross,
 * nebeneinander am aeussersten Rand. Das las sich wie ein Satz und nicht wie
 * eine Anzeige, und es konkurrierte mit der Werkzeugreihe daneben.
 *
 * Jetzt gestapelt und rechtsbuendig: oben die Zeit gross und in
 * Tabellenziffern, darunter das Datum klein, gesperrt und in Versalien, in
 * derselben Sprache wie die Tabellenkoepfe und die Augenbrauen im Cockpit.
 * Davor eine feine senkrechte Linie, die den Block von den Werkzeugen trennt.
 */
html[data-gestalt="squadrai"] .tb-uhr {
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  font-family:var(--font-mono); color:var(--color-text-muted);
  padding-left:16px; border-left:1px solid var(--border);
  line-height:1.1;
}
html[data-gestalt="squadrai"] .tb-zeit {
  font-size:17px; font-weight:500; color:var(--color-text);
  letter-spacing:0.02em;
  /* Tabellenziffern, sonst huepft die Uhr bei jedem Minutenwechsel, weil die
     Eins schmaler ist als die Null. */
  font-variant-numeric:tabular-nums;
}
html[data-gestalt="squadrai"] .tb-datum {
  font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  white-space:nowrap;
}

/* Marke und Uhr stehen jetzt oben, also raus aus der Spalte. Sie sind damit
 * nicht doppelt da, sondern an einer anderen Stelle, und die Spalte gewinnt
 * die Hoehe zurueck.
 *
 * **Dasselbe gilt fuer den Thema-Schalter und die Glocke.** Beide gibt es in
 * der Kopfleiste, und zweimal dasselbe an zwei Ecken des Bildschirms ist
 * keine Bequemlichkeit, sondern eine Frage mehr ("welcher von beiden?").
 *
 * Sie werden versteckt und NICHT entfernt: Im Bestand gibt es die Kopfleiste
 * nicht, dort sind sie der einzige Weg. Unter 760 Punkten ist die Kopfleiste
 * ebenfalls weg, deshalb kommen sie dort zurueck (siehe unten). */
html[data-gestalt="squadrai"] .sb-head,
html[data-gestalt="squadrai"] .sb-uhr,
html[data-gestalt="squadrai"] .thema-schalter,
html[data-gestalt="squadrai"] .werkzeug-knoepfe { display:none; }

/* Jarvis und der Chat sitzen in der Kopfleiste, links von der Trennlinie vor
 * der Uhr. Sie tragen dort ihre volle Groesse von zweiunddreissig Punkten,
 * die Werkzeuge daneben sind vierunddreissig: Beide Zeichen sind Bilder und
 * keine Strichsymbole, sie brauchen etwas mehr Luft um sich. */
html[data-gestalt="squadrai"] .tb-schnell {
  display:inline-flex; align-items:center; gap:6px;
}
html[data-gestalt="squadrai"] .tb-schnell .werkzeug-knopf {
  width:38px; height:38px; border-radius:50%;
  background-color:transparent; background-image:none; border:0; box-shadow:none;
}
html[data-gestalt="squadrai"] .tb-schnell .werkzeug-knopf:hover {
  background-color:transparent; transform:translateY(-1px);
}

/* Die Leiste liegt UEBER dem Rahmen, also muss der Rahmen um ihre Hoehe
 * kuerzer werden. Ohne diese Zeile ragt die Seitenleiste unten aus dem Bild
 * und der Fuss mit den Schaltern ist nicht mehr erreichbar. */
html[data-gestalt="squadrai"] .app { height:calc(100dvh - var(--tb-h)); }

/* ── Die Masse der Vorlage ───────────────────────────────────────────────
 *
 * Gemessen an outputs/squadrai-cockpit/index.html bei 1280 Punkten Breite,
 * nicht geschaetzt: Spalte 232, Inhalt 26 Punkte vom Rand, 16 von oben. Der
 * Bestand steht bei 248 / 36 / 28 und bleibt dort.
 *
 * **Warum das in einem Fenster ab 1181 steht und nicht einfach so:** In
 * styles.css setzt eine Regel fuer 761 bis 1180 Punkte die Spalte auf 190
 * und die Raender auf 16, damit auf dem iPad ueberhaupt noch Inhalt
 * hinpasst. Eine Zuweisung mit Kennzeichen wiegt schwerer als die dort und
 * haette sie stillschweigend ausgehebelt: Auf dem iPad waere die Spalte
 * wieder 232 breit gewesen, ohne dass es hier jemand sieht. Wer diese Werte
 * anfasst, laesst das Fenster stehen. */
@media (min-width:1181px) {
  html[data-gestalt="squadrai"] {
    --sidebar-width:232px;
    --main-padding-x:26px;
    --main-padding-y:16px;
  }
}

/* ── Das Raster: gemessen, verworfen, und warum ──────────────────────────
 *
 * Die Vorlage teilt eins zu eins zu zwei auf: zwei schmale Karten und eine
 * doppelt so breite mit der Tabelle. Der Versuch, das hier nachzubauen, ist
 * am 22.08.2026 gescheitert, und zwar an einer Messung statt an einer
 * Meinung.
 *
 * **In diesem Cockpit steht in keinem einzigen Raster eine Tabelle.**
 * Nachgesehen in Cockpit, Post, Buchhaltung, Finanzen und Vorgaengen: Die
 * Raster tragen ausschliesslich Kennzahlkacheln, drei oder vier gleich
 * breite, und die Tabellen liegen darunter in eigenen Karten ueber die volle
 * Breite. Eine Regel, die Karten mit Tabellen verbreitert, greift hier also
 * nirgends.
 *
 * **Und sie hat aktiv geschadet.** Um Platz fuer die doppelte Breite zu
 * haben, stand hier ein Raster aus vier Spalten, auch fuer `cols-3`.
 * Ergebnis im Reiter Vorgaenge: drei Karten in vier Spalten, die vierte
 * leer. Gemessen "308px 308px 308px 308px" bei drei Kindern.
 *
 * Die Erkenntnis dahinter ist die eigentliche Antwort: Das Verhaeltnis der
 * Vorlage loest das Problem "Tabelle braucht Breite, Kennzahl nicht". Dieses
 * Cockpit loest dasselbe Problem anders, naemlich ueber die Reihenfolge statt
 * ueber die Spaltenzahl, und tut es gut. Wer es trotzdem umbaut, tauscht eine
 * funktionierende Loesung gegen eine fremde.
 *
 * Was bleibt: nichts. Die Raster behalten ihre Spaltenzahl aus styles.css.
 * Eine Pruefung im Selbsttest haelt das fest, damit es nicht beim naechsten
 * Anlauf wieder eingebaut wird.
 */

@media (max-width:760px) {
  html[data-gestalt="squadrai"] .topbar { display:none; }
  /* Keine Kopfleiste, also nichts abzuziehen: Die Huelle nimmt den ganzen
   * Bildschirm. Hier steht bewusst die Groesse und nicht noch einmal eine
   * eigene Hoehe, sonst gibt es wieder zwei Rechnungen fuer dieselbe Sache. */
  html[data-gestalt="squadrai"] { --tb-h:0px; }
  html[data-gestalt="squadrai"] .sb-head,
  html[data-gestalt="squadrai"] .sb-uhr,
  html[data-gestalt="squadrai"] .thema-schalter { display:flex; }
  /* Die schwebenden Knoepfe kommen am Handy zurueck, wo die Kopfleiste
   * fehlt. Ohne sie waeren Jarvis und der Chat dort gar nicht erreichbar. */
  html[data-gestalt="squadrai"] .werkzeug-knoepfe { display:flex; }
  /* Die Raster brauchen hier nichts: styles.css legt sie auf schmalen
   * Schirmen ohnehin einspaltig. Eine Regel, die dasselbe noch einmal sagt,
   * sieht beim naechsten Lesen aus, als taete sie etwas anderes. */
}

/* ── Sortierbare Spalten ─────────────────────────────────────────────────
 *
 * Der Pfeil steht IMMER da, nicht erst beim Darueberfahren. Ein
 * Bedienelement, das man erst durch Herumfahren findet, findet niemand, und
 * auf einem Tablet gibt es kein Herumfahren.
 *
 * Diese Regeln stehen mit Waechter, weil sie zur Gestalt gehoeren. Die
 * Sortierung selbst wirkt in BEIDEN Gestalten: Sie ist Funktion, nicht
 * Aussehen, und im Bestand traegt sie das Aussehen von dort. */
html[data-gestalt="squadrai"] th.sortierbar { cursor:pointer; user-select:none; }
html[data-gestalt="squadrai"] th.sortierbar::after {
  content:"↕"; margin-left:6px; opacity:.35; font-size:11px;
}
html[data-gestalt="squadrai"] th.sortierbar[aria-sort="ascending"]::after {
  content:"↑"; opacity:1; color:var(--color-accent);
}
html[data-gestalt="squadrai"] th.sortierbar[aria-sort="descending"]::after {
  content:"↓"; opacity:1; color:var(--color-accent);
}
html[data-gestalt="squadrai"] th.sortierbar:hover { color:var(--color-text); }

/* ── Gruppen und Werkzeuge in der zweiten Gestalt ────────────────────────
 * Die Ueberschriften stehen auf der blauen Spalte, brauchen also Weiss statt
 * der gedaempften Textfarbe der hellen Seite. */
/* **Die Gruppentitel in der Spalte, 04.09.2026.** Gemessen auf dem
 * Ultramarin #14237A: 0.62 ergibt 6,0 zu 1, 0.86 ergibt 10,3 zu 1. Beides
 * ist lesbar, aber der Titel soll sich nicht nur lesen lassen, er soll
 * auffallen: Er gliedert 21 Eintraege, und wer ihn ueberliest, sucht.
 *
 * Das Feld darunter ist bewusst sehr leicht (0.07). Es soll den Titel als
 * Bedienelement kennzeichnen, nicht als zweite Schaltflaeche neben den
 * Eintraegen mit ihrem eigenen Hintergrund. Beim Ueberfahren wird es
 * deutlicher, dann ist die Absicht ohnehin klar. */
html[data-gestalt="squadrai"] .nav-gruppe {
  color:rgba(255,255,255,0.86);
  background:rgba(255,255,255,0.07);
}
html[data-gestalt="squadrai"] .nav-gruppe:hover {
  color:#FFF;
  background:rgba(255,255,255,0.16);
}
/* Die Zahl der zugeklappten Eintraege liegt auf demselben Grund wie der
 * Titel und muss sich davon abheben, nicht vom Ultramarin dahinter. */
html[data-gestalt="squadrai"] .nav-gruppe .anzahl {
  background:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.92);
}

/* Die schwebenden Knoepfe tragen hier die Marke: gefuellt im Signal, rund
 * wie alles andere seit dem 06.09.2026. */
html[data-gestalt="squadrai"] .werkzeug-knopf {
  border-radius:var(--radius-pill); background:var(--color-accent); color:#FFF;
  border-color:var(--color-accent);
  box-shadow:0 6px 20px rgba(27,63,216,.28);
}
html[data-gestalt="squadrai"] .werkzeug-knopf:hover { background:var(--color-accent-deep); }
html[data-gestalt="squadrai"] .werkzeug-knopf[aria-pressed="true"] {
  background:var(--color-text); border-color:var(--color-text); color:var(--color-surface);
}

/* Das Notizfenster: eine Flaeche, also die Flaechen-Stufe, keine Kapsel. */
html[data-gestalt="squadrai"] .notiz-fenster { border-radius:var(--radius-lg); }
html[data-gestalt="squadrai"] .notiz-fenster textarea { border-radius:var(--radius-md); }