/* Zeynah Core — die Zeynah-Palette. Quelle: feedback_zeynah_schachbrett_kein_schwarz.
 *
 * Diese Datei hat zwei falsche Vorgänger. Der erste trug das Schema von
 * Zeynah Legal (Anthrazit/Platin/ein Blau) — ein anderes Projekt. Der zweite
 * trug #030712 mit Teal und Aurora, wie es in CLAUDE.md steht. Beides ist
 * verboten: #030712 liest sich als Schwarz, Teal gilt als kitschig, Violett
 * und Pink als Fläche sind raus. Die Memory-Datei sagt es ausdrücklich —
 * sie gewinnt gegen CLAUDE.md.
 *
 * Verbindlich ist die Apple-Paarung von zeynah.cloud:
 *
 *   hell      Starlight-Creme  #faf7f2   Kacheln darauf DUNKEL  #36495f
 *   dunkel    Blaugrau         #36495f   Kacheln darauf CREME   #f0e9dd
 *   Akzent    Apple-Blau #0071e3 / #0a84ff, auf Dunkel #7cc0ff
 *
 * Verboten, ohne Ausnahme: Schwarz (#1a1a22 und dunkler), Lila/Violett,
 * Teal/Petrol-Grün, graue Flächen, Braun, Gold, reines Weiß.
 *
 * Das Schachbrett läuft auf zwei Ebenen: die Bänder wechseln hell-dunkel-
 * hell-dunkel und beginnen HELL, und jede Kachel ist das Gegenteil ihres
 * Bandes. Kacheln sind deckend — halbdurchsichtiges Dunkel über Creme ergibt
 * Grau, und Grau ist verboten.
 *
 * Die Datei kommt in jeder Seite NACH deren <style>. Gleiche Spezifität,
 * spätere Regel gewinnt — deshalb färbt eine Datei alle neun Oberflächen.
 */
:root{
  /* --- hell ----------------------------------------------------------- */
  --creme:#faf7f2;              /* helles Band — Starlight, nie #fff */
  --creme-kachel:#f0e9dd;       /* Creme-Kachel IM DUNKLEN Band */

  /* --- dunkel --------------------------------------------------------- *
   * Am 02.08.2026 aufgehellt. Der vorherige Ton (#202c3a) war rechnerisch
   * kein Schwarz — RGB-Summe 134, die Grenze liegt bei 90 — aber Nazannil
   * hat ihn auf grosser Flaeche als schwarz gesehen, und das ist der Massstab,
   * nicht die Rechnung. Vier Helligkeiten wurden nebeneinander gerendert;
   * gewaehlt wurde die dritte: hell genug, um eindeutig Blaugrau zu sein,
   * dunkel genug, damit das Hell-Dunkel-Schachbrett kraeftig bleibt.
   * Band und dunkle Kachel tragen bewusst DENSELBEN Ton — ein Dunkel, ein
   * Creme, sonst entstehen wieder Zwischentoene, die als Grau gelesen werden. */
  --midnight:#36495f;           /* dunkles Band — Blaugrau, nie Schwarz */
  --midnight-kachel:#36495f;    /* dunkle Kachel IM HELLEN Band */
  --nacht:#36495f;              /* es gibt kein tieferes Dunkel */

  /* --- Schrift -------------------------------------------------------- */
  --auf-creme:#202c3a;
  --auf-creme-schwach:#4a4a5a;  /* der einzige erlaubte Grauton, nur Text */
  --auf-dunkel:#faf7f2;
  --auf-dunkel-schwach:#b9c3d2;

  /* --- Akzent: Apple-Blau, und nur das -------------------------------- */
  --blau:#0071e3;
  --blau-tief:#005bb8;
  --blau-mittel:#0a84ff;
  --blau-hell:#7cc0ff;          /* auf dunklem Grund */
  --blau-licht:#7cc0ff;

  /* --- Bedeutung ------------------------------------------------------
     Zwei Stärken je Farbe: Im Schachbrett ist die Kachel invers zum Band,
     ein einziger Ton kann nicht auf beiden lesbar sein. Kein Teal, kein
     Petrol — für „gut" das klare Apple-Grün, für „Achtung" ein warmes
     Orange, das kein Braun ist. */
  --gut:#1d7a3c;                /* auf Creme (5,3:1) */
  --gut-hell:#4cd964;           /* auf Midnight (7,9:1) */
  --warn:#a8420a;               /* auf Creme (5,4:1) */
  --warn-hell:#ffb454;          /* auf Midnight (9,2:1) */
}

/* ------------------------------------------------------------------ *
 * Bänder und Kacheln — deckend, kein Grau, kein Schwarz
 * ------------------------------------------------------------------ */
html, html body{background:var(--creme)}
html body .band{background-image:none; background-color:var(--creme); color:var(--auf-creme)}
html body .band.dark{background-image:none; background-color:var(--midnight); color:var(--auf-dunkel)}
/* Manche Seiten schreiben `.band.light` statt einer nackten `.band`. */
html body .band.light{background-color:var(--creme); color:var(--auf-creme)}

/* Kachel = Gegenteil des Bandes. Volle Deckkraft, sonst wird es Grau. */
html body .band:not(.dark) .card,
html body .band.light .card{background:var(--midnight-kachel); color:var(--auf-dunkel)}
html body .band.dark .card{background:var(--creme-kachel); color:var(--auf-creme)}

/* Die Seiten schreiben teils --auf-dunkel, teils --auf-creme — je nachdem,
   was ihr Band ursprünglich war. Nach dem Umbau stimmt das nicht mehr
   überall: „keine Tour offen" stand in Hellgrau auf Creme, 1,7:1.
   Statt neun Seiten zu ändern, zeigen die Variablen hier auf den jeweils
   richtigen Ton — und in der Kachel, die ja invers ist, wieder zurück. */
html body .band:not(.dark),
html body .band.light{
  --auf-dunkel:#202c3a; --auf-dunkel-schwach:#4a4a5a;
  /* Auf Creme braucht Blau den tiefen Ton: #0071e3 kommt dort nur auf
     3,9:1. Dasselbe gilt für „gut" und „Achtung". */
  --blau:#005bb8; --blau-hell:#005bb8; --blau-licht:#005bb8;
  --gut-hell:var(--gut); --warn-hell:var(--warn);
}
html body .band:not(.dark) .card,
html body .band.light .card{
  --auf-dunkel:#faf7f2; --auf-dunkel-schwach:#b9c3d2;
  --auf-creme:#faf7f2; --auf-creme-schwach:#b9c3d2;
  --blau:#7cc0ff; --blau-hell:#7cc0ff; --blau-licht:#7cc0ff;
  --gut:#6ee87f; --gut-hell:#6ee87f; --warn:#ffc673; --warn-hell:#ffc673;
}
html body .band.dark{
  --auf-creme:#faf7f2; --auf-creme-schwach:#b9c3d2;
  --blau:#7cc0ff; --blau-hell:#7cc0ff; --blau-licht:#7cc0ff;
  --gut:#6ee87f; --gut-hell:#6ee87f; --warn:#ffc673; --warn-hell:#ffc673;
}
html body .band.dark .card{
  --auf-creme:#202c3a; --auf-creme-schwach:#4a4a5a;
  --auf-dunkel:#202c3a; --auf-dunkel-schwach:#4a4a5a;
  --blau:#005bb8; --blau-hell:#005bb8; --blau-licht:#005bb8;
  --gut:#166430; --gut-hell:#166430; --warn:#7a2f06; --warn-hell:#7a2f06;
}

/* Nebentext nie über Deckkraft absetzen.
   Die Seiten schrieben `.hinweis{opacity:.7}`, `.schwach{opacity:.62}` und
   `.leer{opacity:.6}`. Deckkraft mischt die Schrift in den Untergrund: der
   Erklärtext unter „Charge zurückverfolgen" kam damit auf **1,97:1**
   (gemessen am 02.08.2026 im ausgelieferten Bild; lesbar ist ab 4,5:1).
   Abgesetzt wird stattdessen über den dafür vorgesehenen Palette-Ton, der
   je nach Band und Kachel oben schon richtig gesetzt ist — hell auf dunkel,
   dunkel auf creme. Eine Regel hier statt neun geänderter Seiten. */
html body .hinweis,
html body .schwach,
html body .leer,
html body .unit,
html body .titel,
html body .stand,
html body .dazu,
html body .einheit,
html body .empty,
html body th{opacity:1 !important; color:var(--auf-dunkel-schwach)}
/* Warum `!important` nur auf der Deckkraft:
   Die Seiten schreiben `.karte .dazu{opacity:.65}` und `.schalter .einheit
   {opacity:.6}` — zwei Klassen, damit mehr Gewicht als diese Regel. Ohne
   Nachdruck bliebe die Durchsichtigkeit stehen (gemessen: 3,15:1).
   Die **Farbe** bekommt bewusst KEIN `!important`: Deckkraft trägt nie
   Bedeutung, Farbe schon. Eine Ampel oder ein Statuspunkt, dem man die
   Farbe überschreibt, verliert seine Aussage — deshalb behält jede Seite
   ihren eigenen Ton und nur das Durchscheinen verschwindet. */
/* Links behalten ihr Blau — nur die Durchsichtigkeit muss weg. „Zum vollen
   Cockpit" stand mit Deckkraft 0,6 auf 2,81:1. */
html body a,
html body footer,
html body .klein{opacity:1 !important}
/* 13px ist auf einem Android-Gerät mit normaler Systemschrift zu klein. */
html body .hinweis,
html body .schwach{font-size:14px}

/* Pills stehen nicht immer in einer Kachel — auf der Überblicksseite sitzen
   sie nackt im Band. Ohne diese Regeln trugen sie dort Kachelfarben und
   verschwanden: „im Blick" kam auf 1,2:1. */
html body .band:not(.dark) .pill,
html body .band.light .pill{background:rgba(0,113,227,.13); color:#004a96}
html body .band:not(.dark) .pill.p-gut,
html body .band.light .pill.p-gut{background:rgba(29,122,60,.12); color:#166430}
html body .band:not(.dark) .pill.p-warn,
html body .band:not(.dark) .pill.p-alarm,
html body .band:not(.dark) .pill.alarm,
html body .band.light .pill.p-warn,
html body .band.light .pill.alarm{background:rgba(168,66,10,.11); color:#7a2f06}
html body .band.dark .pill{background:rgba(124,192,255,.10); color:#b8dcff}
html body .band.dark .pill.p-gut{background:rgba(76,217,100,.10); color:#6ee87f}
html body .band.dark .pill.p-warn,
html body .band.dark .pill.p-alarm,
html body .band.dark .pill.alarm{background:rgba(255,198,115,.10); color:#ffc673}

/* ------------------------------------------------------------------ *
 * Knöpfe — Glas, schwebend, Apple-Blau umrandet
 * ------------------------------------------------------------------ */
html body button,
html body .btn{
  background-image:none;
  /* Der dunklere Ton derselben Farbe, nicht eine andere Farbe: Creme auf
     #0071e3 ergibt 4,4:1 und liegt damit unter der Lesbarkeitsgrenze für
     Knopfschrift. Auf #005bb8 sind es 6,4:1. #0071e3 bleibt der Akzent
     für Ränder, Links und Zahlen. */
  background-color:var(--blau-tief);
  border:1px solid var(--blau-tief);
  color:#faf7f2;
  box-shadow:0 1px 2px rgba(32,44,58,.22), 0 8px 20px -10px rgba(0,113,227,.60);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
html body button:hover,
html body .btn:hover{
  filter:brightness(1.07);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(32,44,58,.24), 0 12px 26px -10px rgba(0,113,227,.68);
}
html body button:active,
html body .btn:active{transform:translateY(0) scale(.985); filter:brightness(.96)}
html body button:disabled{filter:grayscale(.35) brightness(.9); box-shadow:none; transform:none}

/* Der ausgewählte Reiter trägt die Fläche des Gegenteils seines Grundes.
   Auf dem dunklen Band war er hellblau mit weißer Schrift — 1,9:1, also
   praktisch unlesbar. Wer den gewählten Reiter nicht lesen kann, weiß nicht,
   wo er gerade ist. */
html body .band.dark button.an{background-color:#7cc0ff; border-color:#7cc0ff; color:#202c3a}
html body .band:not(.dark) button.an,
html body .band.light button.an{background-color:var(--blau-tief); border-color:var(--blau-tief); color:#faf7f2}
html body .band:not(.dark) .card button.an,
html body .band.light .card button.an{background-color:#7cc0ff; border-color:#7cc0ff; color:#202c3a}
html body .band.dark .card button.an{background-color:#005bb8; border-color:#005bb8; color:#faf7f2}

/* Zweitrangige Knöpfe: Glas mit blauem Rand statt blauer Fläche. Sonst
   schreien auf einer Seite acht Knöpfe gleich laut. */
html body button.leise,
html body button.still,
html body button.stiller,
html body button.sekundaer,
html body .btn.leise{
  background-color:rgba(250,247,242,.10);
  -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px);
  color:inherit; box-shadow:0 1px 2px rgba(32,44,58,.14);
}
html body .band:not(.dark) button.leise,
html body .band:not(.dark) button.still,
html body .band:not(.dark) button.stiller,
html body .band.light button.still,
html body .band.light button.stiller{
  background-color:rgba(32,44,58,.05); color:var(--blau-tief); border-color:var(--blau);
}
html body .band.dark button.leise,
html body .band.dark button.still,
html body .band.dark button.stiller{
  background-color:rgba(250,247,242,.08); color:var(--blau-hell); border-color:var(--blau-hell);
}
/* In einer Kachel gilt die Kachel, nicht das Band — sie ist ja invers. */
html body .band:not(.dark) .card button.still,
html body .band:not(.dark) .card button.leise,
html body .band.light .card button.still,
html body .band.light .card button.leise{color:var(--blau-hell); border-color:var(--blau-hell)}
html body .band.dark .card button.still,
html body .band.dark .card button.leise{color:var(--blau-tief); border-color:var(--blau-tief)}

/* ------------------------------------------------------------------ *
 * Eingaben, Anmeldung, Verweise
 * ------------------------------------------------------------------ */
html body input:focus,
html body select:focus,
html body textarea:focus{
  outline:none; border-color:var(--blau);
  box-shadow:0 0 0 3px rgba(0,113,227,.22);
}
html body .gate{
  background:var(--midnight-kachel); color:var(--auf-dunkel);
  border:1px solid rgba(124,192,255,.28);
  box-shadow:0 22px 60px -28px rgba(32,44,58,.65);
  /* Die Anmeldebox ist eine DUNKLE Kachel — also müssen ihre Variablen auf
     hell umgestellt werden, wie bei jeder anderen dunklen Kachel auch.
     Ohne diese vier Zeilen erbte `.gate p` den Grauton fürs helle Band
     (#4a4a5a) und stand mit 1,3:1 auf #2b3a4e — gemessen am 02.08.2026.
     Das traf die allererste Seite, die jeder Nutzer sieht. */
  --auf-dunkel:#faf7f2; --auf-dunkel-schwach:#b9c3d2;
  --auf-creme:#faf7f2; --auf-creme-schwach:#b9c3d2;
}
html body .gate input{background:#243244; color:var(--auf-dunkel);
  border-color:rgba(250,247,242,.20)}

html body a{color:var(--blau-tief)}
html body .band.dark a{color:var(--blau-hell)}
html body .band:not(.dark) .card a,
html body .band.light .card a{color:var(--blau-hell)}
html body .band.dark .card a{color:var(--blau-tief)}
html body a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ *
 * Pills — Farbe nach der KACHEL, nicht nach dem Band
 * ------------------------------------------------------------------ */
/* dunkle Kachel → helle Schrift */
html body .band:not(.dark) .card .pill,
html body .band.light .card .pill{background:rgba(124,192,255,.10); color:#b8dcff}
html body .band:not(.dark) .card .pill.alarm,
html body .band.light .card .pill.alarm{background:rgba(255,198,115,.10); color:#ffc673}
html body .band.dark .card .pill.alarm{background:rgba(168,66,10,.11); color:#7a2f06}
html body .band:not(.dark) .card .pill.p-gut,
html body .band.light .card .pill.p-gut{background:rgba(76,217,100,.12); color:var(--gut-hell)}
html body .band:not(.dark) .card .pill.p-warn,
html body .band:not(.dark) .card .pill.p-alarm,
html body .band.light .card .pill.p-warn,
html body .band.light .card .pill.p-alarm{background:rgba(255,180,84,.10); color:var(--warn-hell)}
html body .band:not(.dark) .card .pill.p-still,
html body .band.light .card .pill.p-still{background:rgba(250,247,242,.07); color:#c6cfdc}

/* Creme-Kachel → dunkle Schrift */
html body .band.dark .card .pill{background:rgba(0,113,227,.13); color:#004a96}
html body .band.dark .card .pill.p-gut{background:rgba(29,122,60,.12); color:#166430}
html body .band.dark .card .pill.p-warn,
html body .band.dark .card .pill.p-alarm{background:rgba(168,66,10,.11); color:#8d3708}
html body .band.dark .card .pill.p-still{background:rgba(32,44,58,.09); color:#4a4a5a}

/* ------------------------------------------------------------------ *
 * Tabellen, Balken, Logo
 * ------------------------------------------------------------------ */
html body thead th{border-bottom:2px solid rgba(0,113,227,.34)}
html body .balken > span,
html body .fortschritt > span,
html body progress::-webkit-progress-value{background-color:var(--blau); background-image:none}

/* Logo groß und mit langsamem Puls — 70 px, 8,5 Sekunden. */
html body .mark{height:70px; animation:zpulse 8.5s ease-in-out infinite}
@keyframes zpulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}

/* Die Sprachleiste liegt fest oben rechts. Auf schmalen Schirmen lag sie
   auf der Überschrift — „Automatik" endete als „Automa". */
@media (max-width:900px){ html body header{padding-block-start:46px} }
@media (min-width:901px){ html body header{padding-inline-end:210px} }

/* ------------------------------------------------------------------ *
 * Navigation und Sprachleiste — dieselbe Palette, kein Grau
 * ------------------------------------------------------------------ */
html body .navknopf{background:rgba(0,113,227,.14); color:inherit; border:1px solid var(--blau)}
html body .navknopf:hover{background:rgba(0,113,227,.24)}
html body .band.dark .navknopf{border-color:var(--blau-hell)}
html body .navliste{background:var(--midnight-kachel); border:1px solid rgba(124,192,255,.26)}
html body .navliste a{color:var(--auf-dunkel); text-decoration:none}
html body .navliste a:hover{background:rgba(124,192,255,.14); text-decoration:none}
html body .navliste a.hier{background:var(--blau); color:#faf7f2}
html body .navhinter{background:rgba(32,44,58,.55)}

html body .sprachleiste{background:rgba(32,44,58,.90); border:1px solid rgba(124,192,255,.24)}
html body .sprachleiste button{background:transparent; border:0; box-shadow:none;
  color:#faf7f2; transform:none}
html body .sprachleiste button:hover{background:rgba(124,192,255,.16); filter:none; transform:none}
html body .sprachleiste button.an{background:var(--blau-tief); color:#faf7f2}

/* ------------------------------------------------------------------ *
 * Kacheln, die nicht `.card` heißen
 * ------------------------------------------------------------------ *
 * Die Überblicksseite nennt ihre Kacheln `.karte` und `.liste`, das
 * Cockpit `.kpi`, die Fahrer-App `.jetzt`. Ohne diese Zeilen bekamen sie
 * die Variablen des BANDES statt die ihrer Kachel — und weil die Kachel
 * invers zum Band ist, stand dunkle Schrift auf dunklem Grund: „Heute
 * unterwegs" kam auf 1,2:1.
 */
html body .band:not(.dark) .karte,
html body .band:not(.dark) .liste,
html body .band:not(.dark) .kpi,
html body .band:not(.dark) .jetzt,
html body .band:not(.dark) .ampel,
html body .band.light .karte,
html body .band.light .liste,
html body .band.light .kpi,
html body .band.light .jetzt,
html body .band.light .ampel{
  background:var(--midnight-kachel);
  --auf-dunkel:#faf7f2; --auf-dunkel-schwach:#b9c3d2;
  --auf-creme:#faf7f2; --auf-creme-schwach:#b9c3d2;
  --blau:#7cc0ff; --blau-hell:#7cc0ff; --blau-licht:#7cc0ff;
  --gut:#6ee87f; --gut-hell:#6ee87f; --warn:#ffc673; --warn-hell:#ffc673;
  color:var(--auf-dunkel);
}
html body .band.dark .karte,
html body .band.dark .liste,
html body .band.dark .kpi,
html body .band.dark .jetzt,
html body .band.dark .ampel{
  background:var(--creme-kachel);
  --auf-creme:#202c3a; --auf-creme-schwach:#4a4a5a;
  --auf-dunkel:#202c3a; --auf-dunkel-schwach:#4a4a5a;
  --blau:#005bb8; --blau-hell:#005bb8; --blau-licht:#005bb8;
  --gut:#166430; --gut-hell:#166430; --warn:#7a2f06; --warn-hell:#7a2f06;
  color:var(--auf-creme);
}
/* Pills darin folgen derselben Logik wie in `.card`. */
html body .band:not(.dark) .karte .pill,
html body .band:not(.dark) .liste .pill,
html body .band.light .karte .pill,
html body .band.light .liste .pill{background:rgba(124,192,255,.10); color:#b8dcff}
html body .band:not(.dark) .karte .pill.alarm,
html body .band:not(.dark) .liste .pill.alarm,
html body .band:not(.dark) .karte .pill.p-warn,
html body .band:not(.dark) .liste .pill.p-warn,
html body .band.light .karte .pill.alarm,
html body .band.light .liste .pill.alarm{background:rgba(255,198,115,.10); color:#ffc673}
html body .band:not(.dark) .karte .pill.ok,
html body .band:not(.dark) .liste .pill.ok,
html body .band.light .karte .pill.ok,
html body .band.light .liste .pill.ok{background:rgba(76,217,100,.10); color:#6ee87f}
html body .band.dark .karte .pill,
html body .band.dark .liste .pill{background:rgba(0,113,227,.13); color:#004a96}
html body .band.dark .karte .pill.alarm,
html body .band.dark .liste .pill.alarm,
html body .band.dark .karte .pill.p-warn,
html body .band.dark .liste .pill.p-warn{background:rgba(168,66,10,.11); color:#7a2f06}
html body .band.dark .karte .pill.ok,
html body .band.dark .liste .pill.ok{background:rgba(29,122,60,.12); color:#166430}

/* ------------------------------------------------------------------ *
 * Überblicksseite: Schachbrett zwischen den Kacheln
 * ------------------------------------------------------------------ *
 * Nach der Anmeldung ist auf dieser Seite nur EIN Band sichtbar
 * (`#ueberblick`, hell). Weil jede Kachel das Gegenteil ihres Bandes ist,
 * wurden dadurch ALLE Kacheln dunkel — auf dem Handy füllen sie die ganze
 * Breite, also war der Bildschirm durchgehend dunkel. Gemessen am
 * 02.08.2026: Bänderfolge `HH`, neun dunkle Kacheln am Stück.
 *
 * Wo der Wechsel nicht über die Bänder gehen kann, muss er über die
 * Kacheln gehen: jede zweite Kachelreihe bekommt Creme. Bewusst nach
 * REIHEN (`.karten`) und nicht nach einzelnen Kacheln — sonst zerfällt
 * das Bild bei ungerader Kachelzahl je Reihe.
 */
html body #ueberblick .karten:nth-of-type(even) .karte{
  background:var(--creme-kachel);
  --auf-creme:#202c3a; --auf-creme-schwach:#4a4a5a;
  --auf-dunkel:#202c3a; --auf-dunkel-schwach:#4a4a5a;
  --blau:#005bb8; --blau-hell:#005bb8; --blau-licht:#005bb8;
  --gut:#166430; --gut-hell:#166430; --warn:#7a2f06; --warn-hell:#7a2f06;
  color:var(--auf-creme);
}
/* Pills folgen der Kachel, nicht dem Band — sonst leuchten helle Pills
   auf Creme und die Bedeutung geht verloren. */
html body #ueberblick .karten:nth-of-type(even) .karte .pill{
  background:rgba(0,113,227,.13); color:#004a96}
html body #ueberblick .karten:nth-of-type(even) .karte .pill.alarm,
html body #ueberblick .karten:nth-of-type(even) .karte .pill.p-warn{
  background:rgba(168,66,10,.11); color:#7a2f06}
html body #ueberblick .karten:nth-of-type(even) .karte .pill.ok{
  background:rgba(29,122,60,.12); color:#166430}