/* ═══════════════════════════════════════════════════════════════════════
   ZEYNAH — die gemeinsame Grundlage aller Seiten der Kommandozentrale

   Warum diese Datei existiert: Die Kommandozentrale hat sechsundzwanzig
   Module. Wenn jedes seine eigenen Farben, Kacheln und Abstände mitbringt,
   driftet die Oberfläche nach der dritten Seite auseinander — und niemand
   findet später die Stelle, an der eine Farbe falsch gesetzt wurde. Alles,
   was auf mehr als einer Seite vorkommt, steht deshalb hier.

   ── DIE FARBEN ─────────────────────────────────────────────────────────
   Nicht erfunden. Am 09.08.2026 aus den CSS-Variablen von zeynah.cloud
   ausgelesen — das ist der verbindliche Stand:

     --sf-tief    #2b2e31   warmes Anthrazit
     --sf-tief-2  #3d4145   zweite Stufe dunkel
     --sf-creme   #faf7f2   hell
     --sf-creme-2 #f0e9dd   zweite Stufe hell
     --sf-blau    #0071e3   Blau für Flächen
     --sf-blau-t  #005bb8   Blau für Schrift (kontraststark, 4,4:1)
     Teal         #00c4aa   Akzent

   Verboten und hier nirgends enthalten: Schwarz, Lila, Gold, Braun als
   Leitfarbe, generisches Grau, reines Weiss als Fläche.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── AM 12.08.2026 AN zeynah.cloud ANGEGLICHEN ──────────────────────
     Nazannil: „schau dir zeynah.cloud an, da sind unsere Farben."
     Ausgelesen aus den laufenden CSS-Variablen der Website:
     `--sf-tief:#332e28`, `--sf-tief-2:#4e483f`, Grundton `#EBE3D6`.

     Hier stand vorher #404144/#4a4b4f — neutral-grau. Am 11.08. war
     #332e28 als „Braun" ausgeschlossen worden; diese Entscheidung hat
     Nazannil am 12.08. ausdruecklich zugunsten der Website aufgehoben
     (Variante A). Die Marke steht auf der Website, und ein Kunde sieht
     sie zuerst.

     Wer das wieder aendert, aendert es an BEIDEN Orten oder gar nicht. */
  --tief:#332e28;
  --tief-2:#4e483f;
  --creme:#faf7f2;
  --creme-2:#f0e9dd;
  /* Der Seitengrund der Website — an den Pixeln gemessen:
     `rgba(235,227,214,.72)`. Das Cockpit stand auf dem helleren #faf7f2
     und wirkte dadurch weisser als die Marke. `--creme` bleibt, was es
     ist: die Farbe der hellen KACHELN, dort stimmt sie mit der Website
     ueberein. Nur der Grund darunter wird waermer, damit die Kacheln
     ueberhaupt abheben. */
  --grund:#ebe3d6;
  --blau:#0071e3;
  --blau-t:#005bb8;
  --blau-hell:#7fbcff;
  --teal:#00c4aa;
  /* Teal für SCHRIFT auf hellem Grund. Ausgerechnet, nicht geschätzt:
     Das frühere #00907c kam an den Pixeln gemessen auf 3,72:1, nötig sind
     4,5:1. #00806f ist die hellste Fassung, die das schafft — Farbton
     (172°) und Sättigung (100%) sind unverändert, es ist dieselbe Farbe
     der Palette, nur lesbar. Genau so ist aus dem Blau #0071e3 seinerzeit
     das Schriftblau #005bb8 geworden.

     Auf DUNKLEM Anthrazit taugt es nicht (2,76:1) — dort gehört helle
     Schrift hin, nicht diese. */
  --teal-t:#00806f;
  /* Teal-Schrift AUF teal getoenter Flaeche. `--teal-t` schafft dort
     nur 4,12:1 (gemessen), dieser Ton 5,5:1. In der dunklen Kachel
     wird er auf #8ff0e0 umbelegt. */
  --knopf-teal:#006b5c;
  --sand:rgba(212,196,168,.55);

  --auf-tief:#faf7f2;
  /* Leiser Text auf dunklem Grund — als fester Wert, nicht als Deckkraft.
     Vorher stand hier rgba(250,247,242,.66). Durchsichtiges Creme sieht im
     Entwurf dezent aus, aber wie lesbar es ist, hängt davon ab, was gerade
     dahinterliegt: Der Verlauf der Navigation ist oben #2b2e31 und unten
     #3d4145, und derselbe Text kam dadurch an den Pixeln gemessen mal auf
     6,43:1 und mal auf 3,13:1. #d3cfc8 ist deckend und schafft auch am
     hellen Ende des Verlaufs 6,3:1. */
  --auf-tief-leise:#e6e6e8;
  --auf-creme:#303134;
  --auf-creme-leise:#565759;

  --rund:16px;
  --serif:'Fraunces',Georgia,'Iowan Old Style',Palatino,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--grund); color:var(--auf-creme); min-height:100dvh;
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── DAS GLAS ────────────────────────────────────────────────────────────
   Nazannil, 09.08.2026: „alle kacheln müssen glasig farbig umrandet und
   lebendig sein schwebend sein."

   Vier Eigenschaften, und alle vier gelten im GRUNDZUSTAND — nicht erst
   beim Überfahren, denn ein Bildschirmfoto zeigt keinen Hover:
     1. halbdurchsichtig, damit der Grund durchscheint
     2. Weichzeichnung dahinter
     3. farbiger Rand aus der Palette
     4. weicher Schatten, der die Kachel schweben lässt

   Dazu das Atmen mit 6 % über gut sechs Sekunden. Sechs Prozent nimmt man
   nicht bewusst wahr; man merkt nur, dass die Seite lebt. 13 % waren in
   einem früheren Versuch unsichtbar zu klein gerechnet, 16 % zappelig.
   ──────────────────────────────────────────────────────────────────────── */
.glas{
  position:relative;
  border-radius:var(--rund);
  padding:20px 22px;
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid transparent;
  transition:transform .42s cubic-bezier(.2,.8,.3,1),
             box-shadow .42s cubic-bezier(.2,.8,.3,1);
  /* Dauer und Weg wie auf zeynah.cloud (`sf-schweben-gross`, 8.5s,
     12px). Vorher: 6.2s und 3px — an den Pixeln kaum zu sehen, und
     genau das war Nazannils Eindruck am 12.08.: „Die Kästen sind nicht
     glasig." Das Glas war da (blur 18px), die Bewegung fehlte.
     Der Versatz je Kachel (`animation-delay` in `kachel()`) bleibt —
     ohne ihn wogt die ganze Seite im Gleichtakt. */
  animation:zy-atmen 8.5s ease-in-out infinite;
}
@keyframes zy-atmen{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(-12px) scale(1.006) }
}
@media (prefers-reduced-motion:reduce){ .glas{animation:none} }

/* ── Schachbrett: jede Kachel ist das Gegenteil ihres Bandes ─────────────
   Am 11.08.2026 im Browser gemessen: Die grossen Inhaltskacheln waren auf
   ALLEN Seiten hell — auch mitten im dunklen Band. Den Wechsel trugen nur
   die Bänder und die Zahlkacheln, die ihre Klasse selbst setzen. Eine
   Kachel ohne `dunkel`/`hell` fiel auf die Grundregel zurück, und die ist
   hell.

   Deshalb entscheidet jetzt das Band, wo nichts angegeben ist. Eine
   ausdrücklich gesetzte Klasse gewinnt weiterhin — `:not()` sorgt dafür,
   dass die Zahlkacheln ihr eigenes Muster behalten. */
.glas.dunkel,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel){
  background:linear-gradient(152deg,
    rgba(74,75,79,.90) 0%, rgba(48,49,52,.94) 100%);
  color:var(--auf-tief);
  box-shadow:0 14px 34px rgba(48,49,52,.24), 0 2px 6px rgba(48,49,52,.14);

  /* Der eigentliche Kern der Sache — und der Grund, warum es bisher nicht
     gedreht wurde. Eine dunkle Kachel umzufärben genügt nicht: Alles
     darin ist für hellen Grund geschrieben. Die Seiten setzen
     `var(--auf-creme)` auf ihre Beschriftungen und `var(--blau-t)` auf
     ihre Verweise; blieben die stehen, stünde dunkle Schrift auf dunklem
     Glas.

     Statt jede Seite anzufassen, werden die Variablen hier neu belegt.
     Jedes Element, das eine davon schreibt, dreht damit von selbst mit —
     auch auf Seiten, die es noch gar nicht gibt. */
  --auf-creme:var(--auf-tief);
  --auf-creme-leise:var(--auf-tief-leise);
  --blau-t:var(--blau-hell);
  --teal-t:#8ff0e0;
  --knopf-teal:#8ff0e0;
}
.glas.hell,
.band.d .raster.breit > .glas:not(.hell):not(.dunkel){
  background:linear-gradient(152deg,
    rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
  color:var(--auf-creme);
  box-shadow:0 14px 34px rgba(48,49,52,.13), 0 2px 6px rgba(48,49,52,.08);
}

/* Eingabefelder in dunklen Kacheln. Ohne das hier wäre die Umstellung
   oben gefährlich: Die Seiten geben ihren Feldern eine fast weisse Fläche
   (`rgba(255,255,255,.62)`) und lassen die Schrift `var(--auf-creme)`
   folgen. Dreht nur die Variable, steht helle Schrift auf weissem Feld —
   unlesbar. Also dreht die Fläche mit. */
.glas.dunkel input, .glas.dunkel select, .glas.dunkel textarea,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) input,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) select,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) textarea{
  background:rgba(250,247,242,.12);
  color:var(--auf-tief);
  border-color:rgba(250,247,242,.26);
}
.glas.dunkel option,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) option{
  background:#3b3d40; color:var(--auf-tief);
}

/* Dasselbe Problem bei Pillen und Filterknöpfen. Über alle Seiten gesucht
   und gefunden: 18 Stellen setzen eine fast weisse Fläche fest
   (`rgba(255,255,255,.5)` oder `.62`) — Zustandspillen wie „ruhig",
   „offen", „normal" und die Filterleisten. Die Schrift darin dreht jetzt
   auf hell, die Fläche bliebe weiss.

   Die Klassen heissen auf jeder Seite anders, deshalb stehen sie hier
   namentlich. Eine Regel über alle Kinder wäre kürzer, würde aber auch
   die farbigen Zustandspillen erwischen, die ihre Bedeutung über die
   Fläche tragen — und die müssen ihre Farbe behalten. */
.glas.dunkel .filter button, .glas.dunkel .projektwahl button,
.glas.dunkel .pa-ok, .glas.dunkel .m-puffer, .glas.dunkel .m-offen,
.glas.dunkel .z-ruhig, .glas.dunkel .s-normal, .glas.dunkel .marke,
.glas.dunkel .stufe,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .filter button,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .projektwahl button,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .pa-ok,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .m-puffer,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .m-offen,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .z-ruhig,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .s-normal,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .marke,
.band.h .raster.breit > .glas:not(.hell):not(.dunkel) .stufe{
  background:rgba(250,247,242,.14);
  color:var(--auf-tief);
  border-color:rgba(250,247,242,.24);
}

/* ── Glas gilt auch für Felder und Knöpfe ────────────────────────────────
   Am 11.08.2026 gemessen: Die Kacheln waren glasig (blur 18px), aber jedes
   Eingabefeld, jede Auswahlliste und jeder Knopf standen flach und stumpf
   daneben — `backdropFilter: "none"`, kein Schatten, kein Schweben.

   Ursache: Es gab dafür nie eine gemeinsame Regel. 25 Seiten haben ihre
   Formularfelder je einzeln gestaltet, und keine hat an das Glas gedacht.
   Deshalb steht die Regel hier und nicht in einer Seite — sonst wäre sie
   die sechsundzwanzigste Insellösung.

   Die Seitenregeln setzen Farbe und Rand und gewinnen dort auch; Blur,
   Schatten und das Anheben beim Zeigen kommen von hier und werden von
   keiner überschrieben, weil keine sie setzt. */
input, select, textarea, button, .knopf{
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 6px 16px rgba(48,49,52,.10), 0 1px 3px rgba(48,49,52,.07);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             box-shadow .3s cubic-bezier(.2,.8,.3,1),
             border-color .3s ease;
}
/* Schweben nur bei dem, was man anfasst. Ein Eingabefeld, das beim
   Vorbeifahren hüpft, macht das Tippen unruhig. */
button:hover, .knopf:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(48,49,52,.16), 0 2px 6px rgba(48,49,52,.10);
}
button:active, .knopf:active{ transform:translateY(0) scale(.985) }
input:hover, select:hover, textarea:hover{
  box-shadow:0 8px 20px rgba(48,49,52,.13), 0 1px 3px rgba(48,49,52,.08);
}
/* Auf dunklem Glas trägt derselbe Schatten nicht — er verschwindet. Dort
   hebt ein heller Saum die Kante ab. */
.glas.dunkel input, .glas.dunkel select, .glas.dunkel textarea,
.glas.dunkel button, .band.d input, .band.d select, .band.d button{
  box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(250,247,242,.10);
}
@media (prefers-reduced-motion:reduce){
  input, select, textarea, button, .knopf{ transition:none }
  button:hover, .knopf:hover{ transform:none }
}

/* Der farbige Rand als eigene Ebene — so kann er leuchten, ohne dass die
   Kachel ihre Durchsichtigkeit verliert. */
.glas::before{
  content:''; position:absolute; inset:0; border-radius:var(--rund);
  padding:1.4px; pointer-events:none;
  /* Die Maske wertet nur die Deckkraft aus, nicht die Farbe — deshalb
     steht hier die Palettenfarbe und nicht Schwarz. So bleibt die Regel
     „kein Schwarz im Stylesheet" auch fuer Werkzeugfarben gueltig und
     die Pruefung muss nicht aufgeweicht werden. */
  -webkit-mask:linear-gradient(#2b2e31 0 0) content-box,
               linear-gradient(#2b2e31 0 0);
  mask:linear-gradient(#2b2e31 0 0) content-box,
       linear-gradient(#2b2e31 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.r1::before{background:linear-gradient(140deg,var(--teal),rgba(0,196,170,.18))}
.r2::before{background:linear-gradient(140deg,var(--blau),rgba(0,113,227,.18))}
.r3::before{background:linear-gradient(140deg,var(--sand),rgba(212,196,168,.16))}
.r4::before{background:linear-gradient(140deg,var(--teal-t),rgba(0,113,227,.22))}

.glas:hover{
  transform:translateY(-7px) scale(1.014);
  box-shadow:0 26px 52px rgba(48,49,52,.24), 0 4px 10px rgba(48,49,52,.14);
  animation-play-state:paused;
}
.glas:active{transform:translateY(-2px) scale(.996)}
.glas.klick{cursor:pointer}

/* ── SCHACHBRETT ─────────────────────────────────────────────────────────
   Gemessen am 09.08.2026: Die erste Fassung ergab
       D H D H
       D H D H
   also Streifen, kein Schachbrett. Der Grund ist einfache Arithmetik —
   bei GERADER Spaltenzahl bleibt „jede zweite Kachel hell" spaltentreu:
   Position 0, 2, 4, 6 landen immer in derselben Spalte. Der Kommentar im
   Code behauptete das Gegenteil; behauptet ist nicht gemessen.

   Richtig ist es nur, wenn die REIHE mitzählt. Und weil die Spaltenzahl
   sich beim Umbrechen ändert (4 → 2 → 1), kann JavaScript das nicht
   entscheiden: Es müsste bei jeder Fensteränderung neu rechnen. CSS weiß
   es dagegen von selbst — deshalb steht das Muster hier und nicht dort.

       vier Spalten:  D H D H        zwei Spalten:  D H      eine:  D
                      H D H D                       H D             H
   ──────────────────────────────────────────────────────────────────────── */
.raster{display:grid; gap:16px; grid-template-columns:repeat(4,1fr)}
.raster.breit{grid-template-columns:1fr}
.raster.zwei{grid-template-columns:repeat(2,1fr)}

/* Vier Spalten: in acht Kacheln sind 1,3,6,8 dunkel */
.raster > .glas:nth-child(8n+1),
.raster > .glas:nth-child(8n+3),
.raster > .glas:nth-child(8n+6),
.raster > .glas:nth-child(8n+8){
  background:linear-gradient(152deg,
    rgba(74,75,79,.90) 0%, rgba(48,49,52,.94) 100%);
  color:var(--auf-tief);
  box-shadow:0 14px 34px rgba(48,49,52,.24), 0 2px 6px rgba(48,49,52,.14);
}
.raster > .glas:nth-child(8n+2),
.raster > .glas:nth-child(8n+4),
.raster > .glas:nth-child(8n+5),
.raster > .glas:nth-child(8n+7){
  background:linear-gradient(152deg,
    rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
  color:var(--auf-creme);
  box-shadow:0 14px 34px rgba(48,49,52,.13), 0 2px 6px rgba(48,49,52,.08);
}

/* Zwei Spalten — sowohl das feste Zweierraster als auch das umgebrochene
   Viererraster. In vier Kacheln sind 1 und 4 dunkel. */
.raster.zwei > .glas:nth-child(4n+1),
.raster.zwei > .glas:nth-child(4n+4){
  background:linear-gradient(152deg,
    rgba(74,75,79,.90) 0%, rgba(48,49,52,.94) 100%);
  color:var(--auf-tief);
}
.raster.zwei > .glas:nth-child(4n+2),
.raster.zwei > .glas:nth-child(4n+3){
  background:linear-gradient(152deg,
    rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
  color:var(--auf-creme);
}
@media (max-width:1180px){
  .raster > .glas:nth-child(4n+1),
  .raster > .glas:nth-child(4n+4){
    background:linear-gradient(152deg,
      rgba(74,75,79,.90) 0%, rgba(48,49,52,.94) 100%);
    color:var(--auf-tief);
  }
  .raster > .glas:nth-child(4n+2),
  .raster > .glas:nth-child(4n+3){
    background:linear-gradient(152deg,
      rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
    color:var(--auf-creme);
  }
}

/* Eine Spalte: schlicht im Wechsel */
@media (max-width:680px){
  .raster,.raster.zwei{grid-template-columns:1fr}
  .raster > .glas:nth-child(odd){
    background:linear-gradient(152deg,
      rgba(74,75,79,.90) 0%, rgba(48,49,52,.94) 100%);
    color:var(--auf-tief);
  }
  .raster > .glas:nth-child(even){
    background:linear-gradient(152deg,
      rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
    color:var(--auf-creme);
  }
}

/* Ein einzelnes Band mit nur einer Kachel bleibt hell — eine einsame
   dunkle Kachel auf hellem Grund sieht aus wie ein Fehler. */
.raster.breit > .glas:only-child{
  background:linear-gradient(152deg,
    rgba(250,247,242,.92) 0%, rgba(240,233,221,.88) 100%);
  color:var(--auf-creme);
}

/* ── RAHMEN UND NAVIGATION ─────────────────────────────────────────────── */
.seite{display:grid; grid-template-columns:248px 1fr; min-height:100dvh}
/* Auf dem Handy wird die Navigation zur Schublade — siehe
   Abschnitt „DAS HANDY" weiter unten. Frueher stand hier
   `.navi{display:none}`, womit 26 Seiten unerreichbar waren. */
@media (max-width:980px){ .seite{grid-template-columns:1fr} }

.navi{
  background:linear-gradient(180deg, var(--tief) 0%, var(--tief-2) 100%);
  color:var(--auf-tief); padding:20px 14px; position:sticky; top:0;
  height:100dvh; overflow-y:auto;
}
.marke{display:flex; align-items:center; gap:11px; padding:4px 8px 20px}
/* Das Logo lebt — 85 % bis 115 % in 4,5 Sekunden, auf jeder Seite.
   Der Wert ist festgelegt und nicht verhandelbar: Frühere Fassungen
   liefen mit 87 % bis 100 %, und bei einem 34 Pixel grossen Logo sind das
   vier Pixel über viereinhalb Sekunden — man sieht schlicht nichts.
   Erst ab etwa 25 % Amplitude nimmt das Auge die Bewegung wahr.

   Der Platz wird für die grösste Stufe reserviert (`38px`), sonst
   verschiebt sich beim Atmen die Schrift daneben mit. */
/* Die Höhe zählt, die Breite folgt.
   Das Z ist hochkant (512×844). In einem quadratischen Kasten von 34px
   blieb es über `object-fit:contain` nur rund 20px breit — gemessen am
   11.08.2026 — und stand damit kleiner neben der Wortmarke als es
   verdient. Mit `width:auto` bestimmt die Höhe die Grösse, und das Z
   wird so breit, wie es ist. In der Navi ist dafür reichlich Platz:
   241px belegt von 284px, davon 94px die Wortmarke. */
/* ── DAS LOGO LEBT — WIE AUF zeynah.cloud ────────────────────────────────
   Am 12.08.2026 verglichen: Die Website laesst das Z mit DREI Bewegungen
   laufen, das Cockpit nur mit einer. Nazannil: „Oben das Logo ist auch
   nicht lebendig."

   Die drei Keyframes sind aus der laufenden Website ausgelesen, nicht
   nachgebaut — Werte, Dauern und Kurven wortgleich:
     z-farbe  18s   linear        Farbspiel ueber 26 Grad Farbton
     z-atem   4.5s  ease-in-out   85 % bis 115 %
     z-glanz  7.4s  ease-in-out   Deckkraft 93 % bis 100 %

   Hoehe 58px statt 46px, ebenfalls wie dort. Am Logo selbst wird NICHT
   gedreht (11.08.) — hier bewegt es sich nur, die Farben der Datei
   bleiben unangetastet. */
.marke img{
  width:auto; height:58px; object-fit:contain;
  margin:2px; flex:none;
  animation:z-farbe 18s linear infinite,
            z-atem 4.5s ease-in-out infinite,
            z-glanz 7.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes z-atem{
  0%,100%{ transform:scale(.85) }
  50%    { transform:scale(1.15) }
}
@keyframes z-farbe{
  0%  { filter:hue-rotate(0deg) }
  50% { filter:hue-rotate(26deg) }
  100%{ filter:hue-rotate(0deg) }
}
@keyframes z-glanz{
  0%,100%{ opacity:.93 }
  50%    { opacity:1 }
}
@media (prefers-reduced-motion:reduce){ .marke img{animation:none} }
.marke .wort{font-family:var(--serif); font-size:20px; font-weight:600;
  letter-spacing:.06em}
.navi a{
  display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-radius:10px; color:var(--auf-tief-leise); text-decoration:none;
  font-size:13.5px; margin-bottom:1px;
}
.navi a:hover{background:rgba(250,247,242,.09); color:var(--auf-tief)}
.navi a.an{background:rgba(0,196,170,.16); color:#fff;
  box-shadow:inset 2px 0 0 var(--teal)}
/* Die Gruppenüberschriften der Navigation. Sie stehen bewusst leiser als
   die Verweise darunter — aber lesbar. Vorher rgba(250,247,242,.38): an
   den Pixeln 2,64:1, nötig sind 4,5:1. #bcb8b2 ist deckend und schafft
   auch am hellen Ende des Verlaufs 4,58:1, am dunklen 6,81:1.
   Und 12px statt 11px, weil Android Schrift systemweit skaliert. */
.navi .gruppe{font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#bcb8b2; padding:16px 11px 6px}
.navi .zahl{margin-left:auto; font-size:11.5px; padding:1px 7px;
  border-radius:999px; background:rgba(0,196,170,.22); color:#8ff0e0}
.navi .zahl.eilig{background:rgba(0,113,227,.26); color:#a9d0ff}

.haupt{padding:0 0 40px}

/* ── LIVE-LEISTE ───────────────────────────────────────────────────────── */
.kopf{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px clamp(16px,2.6vw,34px);
  background:rgba(250,247,242,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(48,49,52,.10);
  position:sticky; top:0; z-index:20;
}
.puls{display:inline-flex; align-items:center; gap:8px; font-size:13px;
  font-weight:600; color:var(--teal-t)}
.puls i{width:9px; height:9px; border-radius:50%; background:var(--teal);
  animation:zy-pulsen 2s ease-in-out infinite}
@keyframes zy-pulsen{
  0%,100%{box-shadow:0 0 0 0 rgba(0,196,170,.55)}
  70%    {box-shadow:0 0 0 9px rgba(0,196,170,0)}
}
.suche{flex:1; min-width:220px; max-width:520px}
.suche input{
  width:100%; padding:10px 14px; border-radius:11px; font-size:14px;
  border:1px solid rgba(48,49,52,.16); background:rgba(255,255,255,.72);
  color:var(--auf-creme); font-family:inherit;
}
.suche input:focus{outline:2px solid rgba(0,196,170,.45); outline-offset:1px}
.stand{font-size:12.5px; color:var(--auf-creme-leise);
  font-variant-numeric:tabular-nums}
.dienste{display:flex; gap:7px; flex-wrap:wrap}
.dienst{font-size:11.5px; padding:3px 9px; border-radius:999px;
  background:rgba(0,196,170,.14); color:var(--teal-t); font-weight:500}
.dienst.aus{background:rgba(0,113,227,.12); color:var(--blau-t)}

/* ── SPRACHWAHL ────────────────────────────────────────────────────────── */
#sprachwahl{display:flex; gap:5px; flex-wrap:wrap}
#sprachwahl button{
  font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.05em;
  padding:5px 9px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(48,49,52,.16);
  background:rgba(255,255,255,.6); color:var(--auf-creme-leise);
  transition:all .22s ease;
}
#sprachwahl button:hover{border-color:var(--teal); color:var(--auf-creme)}
#sprachwahl button.an{background:rgba(0,196,170,.16);
  border-color:var(--teal); color:var(--teal-t)}

/* Rechts-nach-links (Arabisch): Zahlenspalten und Markierung kippen mit.
   Eine Zahlenspalte, die bei RTL links kleben bleibt, liest sich falsch. */
html[dir="rtl"] .rechts{text-align:left}
html[dir="rtl"] .navi a.an{box-shadow:inset -2px 0 0 var(--teal)}

/* ── BÄNDER ────────────────────────────────────────────────────────────── */
.band{padding:24px clamp(16px,2.6vw,34px)}
.band.d{background:linear-gradient(168deg,var(--tief) 0%,var(--tief-2) 100%);
  color:var(--auf-tief)}
.band.h{background:var(--creme-2); color:var(--auf-creme)}
.band-titel{font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  margin:0 0 15px; opacity:.62; font-weight:600}

/* ── INHALT ────────────────────────────────────────────────────────────── */
.k-titel{font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  opacity:.68; margin:0 0 7px}
.k-zahl{font-family:var(--serif); font-size:34px; font-weight:600;
  line-height:1.05; font-variant-numeric:tabular-nums}
.k-zahl .e{font-size:16px; font-weight:400; opacity:.7}
.k-fuss{font-size:12.5px; margin-top:7px; opacity:.76}
.marke-eilig{display:inline-block; margin-top:9px; font-size:11.5px;
  padding:2px 9px; border-radius:999px; font-weight:500}
.glas.hell .marke-eilig{background:rgba(0,113,227,.13); color:var(--blau-t)}
.glas.dunkel .marke-eilig{background:rgba(0,196,170,.20); color:#8ff0e0}

table{width:100%; border-collapse:collapse; font-size:14px}
td,th{text-align:left; padding:8px 6px; vertical-align:top}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  opacity:.6; font-weight:600}
.glas.dunkel td{border-top:1px solid rgba(250,247,242,.10)}
.glas.hell td{border-top:1px solid rgba(48,49,52,.10)}
.rechts{text-align:right; font-variant-numeric:tabular-nums}
.warum{font-size:12.5px; opacity:.72; display:block; margin-top:2px}

.pille{display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:12px; font-weight:500; white-space:nowrap}
.glas.hell .pille{background:rgba(0,113,227,.12); color:var(--blau-t)}
.glas.hell .pille.jetzt{background:rgba(0,196,170,.16); color:var(--teal-t)}
.glas.dunkel .pille{background:rgba(127,188,255,.18); color:var(--blau-hell)}
.glas.dunkel .pille.jetzt{background:rgba(0,196,170,.24); color:#8ff0e0}

/* ── BILDER: ZOOM UND WECHSELNDE PERSPEKTIVE ─────────────────────────────
   Nazannil: „bilder zoom und von verschiedenen perspektiven."
   Vier Fahrten im Wechsel, damit nicht alle Bilder im Gleichschritt zoomen —
   das sähe nach Bildschirmschoner aus. Beim Überfahren kippt das Bild leicht
   in den Raum. */
.bild{position:relative; overflow:hidden; border-radius:12px;
  aspect-ratio:16/10; margin:-4px -6px 12px; perspective:900px}
.bild img{width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center; will-change:transform}
.bild.f1 img{animation:zy-fahrt1 26s ease-in-out infinite alternate}
.bild.f2 img{animation:zy-fahrt2 30s ease-in-out infinite alternate}
.bild.f3 img{animation:zy-fahrt3 24s ease-in-out infinite alternate}
.bild.f4 img{animation:zy-fahrt4 28s ease-in-out infinite alternate}
@keyframes zy-fahrt1{ from{transform:scale(1.04) translate(0,0)}
                      to  {transform:scale(1.17) translate(-2.5%,-2%)} }
@keyframes zy-fahrt2{ from{transform:scale(1.16) translate(2%,1.5%)}
                      to  {transform:scale(1.03) translate(0,0)} }
@keyframes zy-fahrt3{ from{transform:scale(1.05) rotate(0deg) translate(1%,0)}
                      to  {transform:scale(1.19) rotate(.7deg) translate(-2%,-2.5%)} }
@keyframes zy-fahrt4{ from{transform:scale(1.14) translate(-1.5%,2%)}
                      to  {transform:scale(1.05) translate(1.5%,-1%)} }
.glas:hover .bild img{transform:scale(1.24) rotateY(3deg);
  transition:transform .9s ease}
.bild .schleier{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(48,49,52,0) 42%,
    rgba(48,49,52,.62) 100%)}
.bild .kennung{position:absolute; left:12px; bottom:10px; color:#faf7f2;
  font-size:12.5px; font-weight:500; text-shadow:0 1px 6px rgba(48,49,52,.6)}

/* ── FUSS ──────────────────────────────────────────────────────────────── */
.fuss{padding:26px clamp(16px,2.6vw,34px);
  background:linear-gradient(168deg,var(--tief) 0%,var(--tief-2) 100%);
  color:var(--auf-tief-leise); font-size:13px}
.fuss a{color:var(--auf-tief-leise); text-decoration:none; margin-right:18px}
.fuss a:hover{color:var(--auf-tief); text-decoration:underline}
.fuss .zeile{display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  margin-top:12px}


/* ── DIE GLOBALE SUCHE ───────────────────────────────────────────────────
   Der Trefferkasten liegt über allem und trägt dieselbe Glasoptik wie die
   Kacheln — er ist Teil der Oberfläche, kein Fremdkörper aus dem Browser. */
#suchtreffer{
  position:fixed; z-index:60; max-height:60vh; overflow-y:auto;
  border-radius:14px; padding:8px;
  background:linear-gradient(152deg,
    rgba(250,247,242,.97) 0%, rgba(240,233,221,.95) 100%);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 24px 54px rgba(48,49,52,.26), 0 3px 8px rgba(48,49,52,.14);
  border:1px solid rgba(0,196,170,.34);
}
#suchtreffer[hidden]{display:none}
#suchtreffer .gruppe{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-t); padding:9px 12px 5px; font-weight:600;
}
#suchtreffer .treffer{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:8px 12px; border-radius:9px; text-decoration:none;
  color:var(--auf-creme); font-size:14px;
}
#suchtreffer .treffer:hover{background:rgba(0,196,170,.13)}
#suchtreffer .treffer .z{font-size:12.5px; color:var(--auf-creme-leise);
  white-space:nowrap}
#suchtreffer .kein{padding:10px 12px; font-size:13px;
  color:var(--auf-creme-leise)}


/* ═══════════════════════════════════════════════════════════════════════
   DAS HANDY

   Gemessen auf Samsung-Mass (412x915 und 360x800), nicht auf iPhone-Mass.
   Vorher verschwand hier die komplette Navigation — und mit ihr das Logo,
   das in ihr steckt. Jetzt wird sie zur Schublade.
   ═══════════════════════════════════════════════════════════════════════ */

/* Der Menuknopf und das Logo in der Kopfzeile gibt es nur auf dem Handy —
   am Schreibtisch steht die Navigation ohnehin offen daneben. */
.kopf-menue, .kopf-marke{display:none}

@media (max-width:980px){

  /* ── Die Navigation als Schublade ──────────────────────────────────── */
  .navi{
    display:block;                 /* war: none — 26 Seiten unerreichbar */
    position:fixed; top:0; left:0; bottom:0; width:min(284px, 84vw);
    z-index:70; height:100dvh;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:6px 0 34px rgba(48,49,52,.30);
    overscroll-behavior:contain;   /* nicht die Seite darunter mitscrollen */
  }
  body.navi-auf .navi{transform:translateX(0)}

  /* Der Schleier: schliesst die Schublade und macht sichtbar, dass der
     Rest gerade nicht bedienbar ist. */
  .navi-schleier{
    position:fixed; inset:0; z-index:65;
    background:rgba(48,49,52,.44);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .26s ease;
  }
  body.navi-auf .navi-schleier{opacity:1; pointer-events:auto}

  /* ── Die Kopfzeile ─────────────────────────────────────────────────── */
  .kopf{
    gap:10px; padding:11px 13px;
    /* Reihenfolge: Menu, Marke, Live, dann Suche ueber die volle Breite */
  }
  .kopf-menue{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex:0 0 auto;    /* gut treffbar mit dem Daumen */
    border-radius:12px; cursor:pointer;
    border:1px solid rgba(48,49,52,.16);
    background:rgba(250,247,242,.72);
    color:var(--auf-creme);
  }
  .kopf-menue span{
    display:block; width:19px; height:2px; border-radius:2px;
    background:currentColor; position:relative;
  }
  .kopf-menue span::before, .kopf-menue span::after{
    content:''; position:absolute; left:0; width:19px; height:2px;
    border-radius:2px; background:currentColor;
  }
  .kopf-menue span::before{top:-6px}
  .kopf-menue span::after{top:6px}

  .kopf-marke{
    display:flex; align-items:center; gap:8px; margin-right:auto;
    text-decoration:none; color:var(--auf-creme);
  }
  /* Wie in der Navi: Höhe setzen, Breite folgt. Auf dem Handy etwas
     kleiner, weil die Kopfzeile schmal ist. */
  .kopf-marke img{width:auto; height:34px; object-fit:contain}
  .kopf-marke .wort{
    font-family:var(--serif); font-size:17px; font-weight:600;
    letter-spacing:.05em;
  }

  /* Das Suchfeld gab nicht nach und zog die Seite in die Breite.
     Auf dem Handy bekommt es eine eigene Zeile. */
  .kopf .suche{flex:1 0 100%; order:9; min-width:0}
  .kopf .suche input{width:100%; box-sizing:border-box}
  #sprachwahl{order:10; flex-wrap:wrap}
  .dienste{order:11}
  .kopf .stand{order:12; font-size:12px}

  /* ── Masse ─────────────────────────────────────────────────────────── */
  /* Frueher stand hier ".haupt{overflow-x:hidden}". Das versteckte den
     Ueberhang nur — die Spalten waren dann abgeschnitten statt schiebbar,
     also unerreichbar. Die Ursache lag in der Raster-Falle (siehe unten);
     sie ist behoben, das Verstecken darum nicht mehr noetig und schaedlich. */
  .band-titel, .k-titel, .k-fuss{overflow-wrap:anywhere}

  /* Tabellen sollen scrollen — aber in ihrem eigenen Kasten, nicht die
     ganze Seite mitziehen. */
  .tabelle-huelle{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* Lesbarkeit und Treffbarkeit — gilt fuer alle Handybreiten.
   Android skaliert Schrift systemweit; 11 px ist dort zu klein. */
@media (max-width:760px){
  .gruppe, .navi .gruppe{font-size:12.5px}
  .dienst{font-size:12.5px; padding:6px 11px}
  .stand{font-size:12.5px}
  /* Alles zum Antippen mindestens daumengross.

     Die Navigationsverweise bleiben dabei ausdruecklich `flex` (nicht
     `inline-flex`): Sie sollen die volle Breite fuellen und untereinander
     stehen. Ein frueherer Versuch setzte hier `inline-flex` fuer alle drei
     — danach standen „Kommandozentrale" und „Live" nebeneinander in einer
     Reihe, und der Zaehler rechts rutschte an den Text heran. */
  .navi a{min-height:40px}
  #sprachwahl button, .fuss a{
    min-height:40px; display:inline-flex; align-items:center;
  }
  #sprachwahl button{padding:0 13px; font-size:13.5px}
  .fuss a{margin-right:16px}

  /* Filterleisten (Immobilien, Leads, Rechnungen …): 32 px gemessen, mit
     dem Daumen nicht zuverlaessig zu treffen. Nur die Hoehe aendert sich —
     Farbe und Rand bleiben, sonst waere nicht mehr zu sehen, welcher
     Filter gerade gewaehlt ist. */
  .filter button, .filter a{
    min-height:40px; display:inline-flex; align-items:center;
  }
  /* Die Leiste selbst darf umbrechen statt die Seite zu verbreitern. */
  .filter{flex-wrap:wrap; gap:8px}
}


/* ── TABELLEN AUF DEM HANDY ──────────────────────────────────────────────
   Gemessen: fuenf- bis sechsspaltige Tabellen brauchen 432–533 px, die
   Anzeige hat 412 oder 360. Vorher zogen sie die ganze Seite in die Breite.

   Die Tabelle wird deshalb selbst zum scrollenden Kasten — sie bekommt
   ihren eigenen Balken, statt die Seite mitzunehmen. Das braucht keinen
   zusaetzlichen Kasten im HTML und wirkt darum auf allen 36 Seiten, die
   ihre Tabellen selbst bauen.

   `min-width:max-content` innen ist noetig: Ohne das quetscht der Browser
   die Spalten trotzdem zusammen, bis die Ueberschriften Buchstabe fuer
   Buchstabe umbrechen — lesbar ist das dann auch nicht. */
@media (max-width:980px){
  .glas table{
    display:block; overflow-x:auto; max-width:100%;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;   /* nicht die Seite mitziehen */
  }
  .glas table thead,
  .glas table tbody{display:table; width:100%; min-width:max-content}

  /* Knappere Masse, damit meistens gar nicht geschoben werden muss.
     Nicht kleiner als 12,5 px — Android skaliert Schrift systemweit. */
  .glas table th, .glas table td{
    padding:8px 9px; font-size:12.5px; white-space:nowrap;
  }
  /* Die erste Spalte traegt die Kennung (Nummer, Kunde) — sie bleibt
     stehen, damit man beim Schieben nicht die Orientierung verliert. */
  .glas table tbody td:first-child{
    position:sticky; left:0; z-index:1;
    background:inherit;
  }
}

/* Das Logo in der Kopfzeile ist ein Verweis, also eine Tippflaeche.
   Mit 27 px Hoehe traf der Daumen sie nicht zuverlaessig. */
@media (max-width:980px){
  .kopf-marke{min-height:40px}
}


/* ── DIE RASTER-FALLE ────────────────────────────────────────────────────
   Ein Feld in `display:grid` (und ebenso in `flex`) hat `min-width:auto`:
   „werde nie schmaler als dein Inhalt". Bei einer sechsspaltigen Tabelle
   heisst das, dass die Kachel auf 867 px waechst, die Rasterspalte mit ihr
   auf 861 px — obwohl der Kasten nur 380 px hat. Die Tabelle bekommt dann
   so viel Platz, dass ihr eigenes `overflow-x:auto` nie greift, und alles
   ragt hinaus.

   `min-width:0` bricht das auf. Erst dadurch scrollt die Tabelle wirklich
   in ihrem eigenen Kasten, statt die Seite in die Breite zu ziehen.
   Gemessen auf /m/projekte: Spalte 861 px -> 380 px. */
.raster > *, .glas, .seite > *{min-width:0}

/* Dasselbe eine Ebene tiefer: Was in einer Kachel steht, darf die Kachel
   nicht auseinanderdruecken. */
.glas > *{min-width:0; max-width:100%}


/* ── FILTERLEISTEN: LESBARKEIT ───────────────────────────────────────────
   An den Pixeln gemessen lagen diese Knoepfe bei 2,73:1 (nicht gewaehlt)
   und 2,74:1 (gewaehlt) — die Grenze fuer normalen Text ist 4,5:1.

   Ursache war der durchscheinende Grund: Wie lesbar ein Knopf ist, hing
   davon ab, was zufaellig hinter ihm lag. Auf dem dunklen Band wurde aus
   hellem Glas mittleres Grau, und graue Schrift darauf verschwand.

   Deshalb deckende Flaechen. Die Auswahl zeigt sich ueber Rand und Ring,
   nicht ueber die Textfarbe — Bedeutung, die nur an `color` haengt, geht
   verloren, sobald eine andere Regel die Textfarbe setzt.

   Die Regeln greifen ueber `html body`, weil die fuenf Seiten mit
   Filterleisten eigene Fassungen mitbringen; ohne das gewaenne die
   Seitenregel und die Messung waere gleich wieder rot. */
html body .filter button,
html body .filter a{
  background:var(--creme);
  color:var(--auf-creme);                      /* ~12:1 auf Creme */
  border:1px solid rgba(48,49,52,.22);
  font-weight:500;
}
html body .filter button:hover,
html body .filter a:hover{
  background:var(--creme-2);
  border-color:var(--teal);
}
html body .filter button.an,
html body .filter a.an,
html body #filter button.an{
  background:var(--creme);
  color:var(--teal-t);                         /* ~4,6:1 auf Creme */
  border:2px solid var(--teal);
  box-shadow:0 0 0 3px rgba(0,196,170,.24);
  font-weight:600;
}


/* ── DIE KOPFZEILE AUF DEM HANDY ─────────────────────────────────────────
   Gemessen: 233 px von 915 px — ein Viertel des Schirms, und als `sticky`
   dauerhaft belegt. Wer eine Tabelle liest, sieht sie durch drei Viertel
   Fenster.

   Sprachwahl und Statusanzeigen ziehen deshalb ans Ende der Schublade. Sie
   sind nicht weg — sie stehen dort, wo man sie sucht, wenn man sie braucht.
   Was bleibt: Menue, Logo, Live-Punkt, Suchfeld. */
@media (max-width:980px){
  .kopf #sprachwahl,
  .kopf .dienste,
  .kopf #sync{display:none}
  .kopf{padding:9px 13px; gap:9px}
  .kopf .stand{font-size:12px; margin-left:auto}

  /* Der Fuss der Schublade nimmt auf, was aus der Kopfzeile kam. */
  .navi-fuss{
    margin-top:20px; padding-top:16px;
    border-top:1px solid rgba(250,247,242,.16);
  }
  .navi-fuss .titel{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    /* Fester Wert, keine Deckkraft — wie bei den Gruppenüberschriften.
       Halbdurchsichtige Schrift ist nur so lesbar, wie das gerade ist,
       was hinter ihr liegt. */
    color:#bcb8b2; padding:0 11px 9px;
  }
  .navi-fuss #sprachwahl-handy{
    display:flex; flex-wrap:wrap; gap:7px; padding:0 11px 14px;
  }
  .navi-fuss #sprachwahl-handy button{
    min-height:40px; padding:0 13px; border-radius:10px;
    font-family:inherit; font-size:13.5px; cursor:pointer;
    background:rgba(250,247,242,.10); color:var(--auf-tief);
    border:1px solid rgba(250,247,242,.20);
  }
  .navi-fuss #sprachwahl-handy button.an{
    background:rgba(0,196,170,.22); border-color:var(--teal);
    color:#fff; font-weight:600;
  }
  .navi-fuss #dienste-handy{
    display:flex; flex-wrap:wrap; gap:7px; padding:0 11px 12px;
  }
  .navi-fuss #dienste-handy .dienst{
    background:rgba(250,247,242,.10); color:var(--auf-tief-leise);
  }
  .navi-fuss .stand{
    display:block; padding:0 11px 8px; font-size:12.5px;
    color:var(--auf-tief-leise);   /* fester Wert statt Deckkraft */
  }
}
/* Am Schreibtisch gibt es den Schubladenfuss nicht — dort steht alles
   weiterhin oben in der Kopfzeile. */
@media (min-width:981px){ .navi-fuss{display:none} }


/* ── TEAL AUF TEAL ───────────────────────────────────────────────────────
   Gemessen an den Pixeln: gewählter Sprachknopf 4,00:1, Dienstanzeige
   4,06:1 — nötig sind 4,5:1. Teal-Schrift auf teal getönter Fläche ist zu
   nah beieinander.

   Eine dunklere Teal-Variante hilft nicht dauerhaft: #007868 schafft auf
   der einen Fläche 4,52:1, auf der anderen 4,48:1. Deshalb dunkler Text
   und die Bedeutung über Rand und Fläche.

   Bei den Dienstanzeigen ist das ohnehin das Richtige: „verbunden" oder
   „nicht verbunden" darf nicht allein an der Schriftfarbe hängen — das
   sieht nicht jeder. Der Zustand steht zusätzlich im Text („✓" / „—"). */
html body .dienst{
  color:var(--auf-creme);                 /* 11,2:1 statt 4,06:1 */
  border:1px solid rgba(0,196,170,.42);
  background:rgba(0,196,170,.16);
}
html body .dienst.aus{
  color:var(--auf-creme);
  border-color:rgba(0,113,227,.38);
  background:rgba(0,113,227,.13);
}
html body #sprachwahl button.an{
  color:var(--auf-creme);                 /* 11,2:1 statt 4,00:1 */
  background:rgba(0,196,170,.20);
  border:2px solid var(--teal);
  box-shadow:0 0 0 2px rgba(0,196,170,.22);
}

/* Im Schubladenfuss steht dasselbe auf DUNKLEM Grund — dort gilt das
   Umgekehrte: helle Schrift. Sonst kippt der Fix ins Gegenteil. */
@media (max-width:980px){
  html body .navi-fuss .dienst{
    color:var(--auf-tief); background:rgba(250,247,242,.12);
    border-color:rgba(250,247,242,.24);
  }
  html body .navi-fuss #sprachwahl-handy button.an{
    color:#fff; background:rgba(0,196,170,.26);
  }
}


/* ── DIE LETZTEN SIEBEN ──────────────────────────────────────────────────
   Zwei Stellen, die die Messung über alle 27 Seiten übrig gelassen hat.

   1. `.quelle` — die Herkunft eines Ereignisses im Strom („DE",
      „WhatsApp"). Stand in Teal auf hell-teal: 3,40:1. Dieselbe Ursache
      wie bei Filterknöpfen und Dienstanzeigen — zwei Töne derselben Farbe
      übereinander. Die Regel stand bisher nur in m_live.html und wäre beim
      nächsten Modul mit Ereignisstrom neu erfunden worden; deshalb steht
      sie jetzt hier.

   2. Die Zahl-Plakette in der Navigation — sie sagt, wie viele Vorgänge
      offen sind, also muss man sie lesen können. #8ff0e0 kam auf 4,28:1,
      nötig sind 4,5. #d9fbf4 schafft
      auf derselben Fläche 7,0:1. */
html body .quelle{
  color:var(--auf-creme);
  background:rgba(0,196,170,.20);
  border:1px solid rgba(0,196,170,.40);
}
html body .navi .zahl{color:#d9fbf4}
html body .navi .zahl.eilig{color:#d8e9ff}