/* Dauerhaft dunkel, keine Hellfassung — benannte Ausnahme von der
   Light-/Dark-Pflicht der webstack-Familie, eingetragen in
   ~/Coding/webstack/CLAUDE.md ("Benannte Ausnahmen vom Light-/Dark-Zwang").
   Nicht "zurückreparieren": ein Schaltpult soll sich vom Lese-Dienst
   unterscheiden. Die Grundwerte unten sind Farbwelt A, damit auch die
   Login-Seite in derselben Welt liegt. */
:root {
  color-scheme: dark;
  --bg: #0a1418;
  --fg: #c3d3d6;
  --card: #0e1b20;
  --border: #15272d;
  --accent: #e0a03a;
  --error: #e0564a;
}

/* Die Schriften liegen lokal (Dockerfile lädt sie zur Build-Zeit, CSP
   erlaubt font-src nur 'self'). Ohne diese Deklaration bleibt die
   preload-Zeile in base.html wirkungslos. */
@font-face {
  /* Fehlte komplett. base.html laedt die Datei vor, body verlangt "Inter
     Variable" -- ohne diese Deklaration kennt der Browser den Namen nicht,
     faellt still auf system-ui zurueck und die vorgeladene Datei war
     Verschwendung. Genau der Fall, vor dem der Kommentar unten warnt. */
  font-family: "Inter Variable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter Variable", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Breakpoint-Konvention für diese App-Familie (Mobile-first):
   Basis   < 640px  — ein Feld pro Zeile, volle Breite, Touch-Ziele ≥44px.
   Tablet  ≥ 640px  — mehr Weißraum, Inhalte dürfen breiter werden.
   Desktop ≥ 1024px — feste Höchstbreiten statt volle Breite, damit Zeilen
                      nicht unlesbar lang werden.
   Neue Ansichten (nicht nur die Login-Card hier) an dieser Skala ausrichten,
   nicht eigene Breakpoints erfinden. */

.auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* env(...) mit Fallback: Safe-Area (Notch/Home-Indicator) auf iOS/Android,
     wirkungslos außerhalb einer installierten PWA. */
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
}

@media (min-width: 640px) {
  .auth-card { padding: 2.5rem; }
}

.auth-card h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
.lede { margin: 0 0 1.25rem; opacity: 0.75; }

.field { display: block; margin-bottom: 1rem; }
.field-label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; opacity: 0.8; }

/* min-height 44px: Apple-HIG-/Material-Touch-Ziel, nicht nur Desktop-Optik. */
input[type="text"], input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 1rem;
}

button.primary {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--accent);
  /* Dunkle Schrift auf Bernstein — weiß auf #e0a03a reißt den Kontrast. */
  color: #0a1418;
  font-size: 1rem;
  cursor: pointer;
}

.error {
  /* 15 % ergaben gemischt 4,02:1 fuer den roten Text -- knapp unter dem
     Mindestwert. Dunklere Mischung, gleicher Farbeindruck. */
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid var(--error);
  color: var(--error);
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ *
 * Kontrollraum (Farbwelt A). Dichte Zeilen, Festbreitenschrift,
 * Zahlen rechtsbündig an fester Position, Knöpfe in der Zeile.
 * Die Handy-Fassung am Ende ist eine EIGENE Fassung, keine geschrumpfte
 * Tabelle — die Oberfläche wird überwiegend am Handy bedient.
 * ------------------------------------------------------------------ */
/* Gemessene Kontraste (WCAG 2.1, relative Luminanz) statt Augenmass. Die
   drei gedaempften Toene lagen unter dem Mindestwert -- ausgerechnet an den
   Stellen, die einen Ausfall benennen:
     --k-dim   #5c777e auf --k-bg2 = 3,67:1  (noetig 4,5:1 fuer Fliesstext)
     --k-off   #3d565d auf --k-bg2 = 2,25:1  (Tag-Text "AUSFALL"/"LEER"/"ZU")
     --k-rule2 #1c343b auf --k-bg  = 1,42:1  (Knopfrand, noetig 3:1)
   Nur die Helligkeit ist angehoben, Farbton und Saettigung bleiben -- die
   Farbwelt A aendert sich damit nicht, sie wird lesbar.

   Zwei Toene sind aufgeteilt, weil sie zwei Aufgaben hatten: --k-off faerbt
   die graue Lampe (Grafik, 3:1 genuegt) UND Tag-Text (4,5:1 noetig);
   --k-rule2 zieht Trennlinien (Dekoration) UND Bedienelement-Raender
   (3:1 noetig). Ein Wert kann nicht beides optimal. */
:root {
  --k-bg:#0a1418; --k-bg2:#0e1b20; --k-rule:#15272d; --k-rule2:#1c343b;
  --k-tx:#c3d3d6; --k-tx2:#e6f0f1; --k-dim:#68868e; --k-acc:#e0a03a;
  --k-ok:#48b389; --k-warn:#e0a03a; --k-bad:#e0564a; --k-off:#48666e;
  /* Tag-Text und -Rahmen: 4,55:1 auf --k-bg2. */
  --k-off-tx:#608893;
  /* Raender von Knoepfen und Eingabefeldern: 3,02:1 auf --k-bg.
     NICHT fuer Trennlinien -- die bleiben auf --k-rule2. */
  --k-edge:#386875;
}
.kr {
  background:var(--k-bg); color:var(--k-tx);
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  min-height:100dvh;
  /* Safe-Area für Notch/Home-Indicator (PWA-Pflicht, gilt auch hier). */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.kr .hd { padding:17px 18px 15px; border-bottom:1px solid var(--k-rule2);
          background:var(--k-bg2); }
.kr .verdict { display:flex; align-items:center; gap:12px; }
.kr .lamp { width:12px; height:12px; flex:none; border-radius:1px; }
.kr .lamp.green{background:var(--k-ok)} .kr .lamp.yellow{background:var(--k-warn)}
.kr .lamp.red{background:var(--k-bad)}  .kr .lamp.grey{background:var(--k-off)}
/* h1/h2 tragen jetzt die Semantik (die Seite hatte vorher keine einzige
   Ueberschrift). Optik bleibt exakt wie zuvor: eigene Groesse, kein
   Browser-Standardabstand. */
.kr .verdict h1 { font-size:16px; font-weight:700; color:var(--k-tx2);
                  margin:0; }
.kr .sect h2 { font:inherit; margin:0; letter-spacing:inherit; }
.kr .meta { margin-top:8px; color:var(--k-dim); font-size:10.5px;
            letter-spacing:.11em; display:flex; flex-wrap:wrap; gap:14px; }
.kr .meta em { font-style:normal; color:var(--k-acc); }
.kr .sect { padding:12px 18px 6px; color:var(--k-dim); font-size:9.5px;
            letter-spacing:.2em; text-transform:uppercase;
            display:flex; justify-content:space-between; }
/* Der Kopf der Dienstliste benennt Spalten -- also muss er DAS RASTER DER
   ZEILE tragen, nicht nur rechtsbuendig stehen. Vorher sass "SPEICHER / CPU"
   am rechten Rand und damit ueber der Knopfleiste, waehrend die Zahlen zwei
   Spalten weiter links standen: eine Beschriftung, die auf die falsche
   Spalte zeigt, ist schlimmer als keine. Nur ab 640px -- am Handy sind die
   Zahlenspalten inhaltsbreit ("auto"), ein Kopfraster koennte dort gar nicht
   buendig sein, dort bleibt die rechtsbuendige Zeile. */
@media (min-width:640px) {
  .kr .sect.spalten { display:grid; grid-template-columns:12px 1fr 78px 54px 120px;
                      gap:11px; align-items:end; }
  .kr .sect.spalten .num { text-align:right; }
}
/* 56px. Der laengste Tag ("AUSFALL") misst mit der ECHTEN JetBrains Mono
   genau 48px -- eine 48px-Spalte haette also null Puffer, und waehrend
   font-display:swap noch die Ersatzschrift zeigt, ist er breiter und wird
   abgeschnitten. Genau so ist es am 2026-09-13 aufgefallen. Erste Messung
   lief ohne die echten Schriften und hat das verfehlt.
   Feste Spalte statt "auto", damit die Tags aller Baender untereinander an
   derselben Kante stehen. */
.kr .alarm, .kr .ausfall {
  padding:10px 18px; border-bottom:1px solid var(--k-rule);
  display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; }
/* Quellenausfall: eigene Fläche mit Rahmen, damit Grau nicht wie ein
   Ladezustand wirkt — es ist eine Aussage, keine Zwischenstufe. */
.kr .ausfall { background:var(--k-bg2); border-left:3px solid var(--k-off); }
.kr .tag { font-size:9px; letter-spacing:.13em; padding:3px 0;
           text-align:center; border:1px solid; white-space:nowrap; }
.kr .tag.red { color:var(--k-bad); border-color:var(--k-bad); }
.kr .tag.yellow { color:var(--k-warn); border-color:var(--k-warn); }
.kr .tag.grey { color:var(--k-off-tx); border-color:var(--k-off-tx); }
.kr .tag.green { color:var(--k-ok); border-color:var(--k-ok); }
.kr .txt { font-size:12.5px; color:var(--k-tx2); }
/* 120px fuer die Knopfleiste, nicht 112: NEU+AN+STOP messen zusammen
   114,15px (gemessen, nicht geschaetzt). Der Ueberstand wanderte wegen
   justify-content:flex-end nach links in die CPU-Zahl. */
.kr .row { display:grid; grid-template-columns:12px 1fr 78px 54px 120px;
           gap:11px; align-items:center; padding:6px 18px;
           border-bottom:1px solid var(--k-rule); font-size:12.5px; }
/* Die Stufe darf nicht NUR an der Farbe haengen (Farbsinnstoerung). In
   einer so dichten Liste ist Text je Zeile keine Option -- die Form traegt
   die Unterscheidung mit: rot eckig, gelb Raute, gruen rund, grau hohl.
   Der Name bleibt "dot", sonst muesste jede Vorlage mitwandern. */
.kr .dot { width:9px; height:9px; margin-left:2px; border-radius:50%; }
.kr .dot.green{ background:var(--k-ok); }
.kr .dot.yellow{ background:var(--k-warn); border-radius:1px;
                 transform:rotate(45deg); }
.kr .dot.red{ background:var(--k-bad); border-radius:1px; }
.kr .dot.grey{ background:transparent; border:2px solid var(--k-off); }
/* KEIN nowrap/ellipsis mehr, auf keiner Breite. Die Merker am Namen
   ("0/1 laufen", "BERICHT KAPUTT", "WARTUNG") sind Befunde -- eine Ellipse
   verschluckt sie lautlos, und niemand sieht, dass etwas fehlte. Der Fix
   galt zuerst nur unter 640px; nachgerechnet reisst dieselbe Zeile aber
   auch zwischen 640 und 664px (mit WARTUNG bis 723px), weil dort das feste
   Fuenf-Spalten-Raster gilt und der Name nur V-324 Pixel bekommt.
   Umbrechen statt abschneiden ist an JEDER Breite die richtige Antwort:
   die Zeile waechst nur dann, wenn wirklich etwas zu sagen ist. */
/* flex statt Fliesstext: Name, Merker und der Aufklapp-Pfeil sind
   eigenstaendige Teile, die umbrechen duerfen. Als Inline-Fluss mit
   margin-left drueckte der Pfeil die Zelle um wenige Pixel auf, ohne dass
   irgendetwas umbrach -- gemessen bei 360px. Abstaende kommen jetzt aus
   column-gap, nicht aus Raendern der Einzelteile. */
.kr .nm { color:var(--k-tx2); min-width:0;
          display:flex; flex-wrap:wrap; align-items:baseline;
          column-gap:8px; row-gap:2px; }
/* Ein einzelnes langes Wort kann nicht umbrechen und schiebt seine Zelle
   auf. Gemessen bei 320px: die Kuma-Adresse im Ausfall-Band riss die ganze
   Seite quer, bei 360px tat es ein Dienstname. "anywhere" statt
   "break-word", weil nur das auch die Mindestbreite des Rasters senkt --
   sonst waechst die Spalte trotzdem. Gilt fuer die vier Stellen, an denen
   fremder Text steht: Name, Bandtext, Begruendung, Detailzeile. */
.kr .nm, .kr .txt, .kr .grund, .kr .sub { overflow-wrap:anywhere; }
.kr .nm small { color:var(--k-dim); font-size:10.5px; }
/* Der Merker in der Zeile traegt die Farbe der Kachel: gelb/rot bei
   einem Befund, gedaempft bei einem dokumentierten Grau (absichtlich
   gestoppter Dienst) -- der soll nicht wie ein Alarm aussehen. */
.kr .nm small.yellow { color:var(--k-warn); }
.kr .nm small.red { color:var(--k-bad); }
.kr .nm small.grey { color:var(--k-dim); }
.kr .num { text-align:right; font-variant-numeric:tabular-nums; }
/* "…" (wird gemessen) und "—" (nicht messbar) tragen title -- der Cursor
   zeigt, dass da mehr als das nackte Zeichen steht. */
.kr .num [title] { cursor:help; }
.kr .acts { display:flex; gap:4px; justify-content:flex-end; }
.kr .acts button { font:inherit; font-size:9.5px; letter-spacing:.08em;
                   padding:4px 7px; background:transparent; color:var(--k-dim);
                   border:1px solid var(--k-edge); cursor:pointer; }
.kr .acts button:hover { color:var(--k-tx2); border-color:var(--k-acc); }
.kr .acts button:focus-visible { outline:2px solid var(--k-acc); outline-offset:1px; }
.kr .acts-auf { display:none; }
.kr .sub { padding:3px 18px 8px 59px; color:var(--k-dim); font-size:10.5px;
           display:flex; gap:15px; flex-wrap:wrap; background:var(--k-bg2); }
.kr .sub a { color:var(--k-acc); }
/* Grund je Dienst: die Begründung der Ampel. Steht bewusst NICHT in den
   globalen Hinweisen — ein einzelner roter Dienst erzeugt dort nichts. */
.kr .grund { padding:5px 18px 5px 59px; font-size:11.5px; color:var(--k-tx2);
             background:var(--k-bg2); }
.kr .grund.red { box-shadow:inset 3px 0 var(--k-bad); }
.kr .grund.yellow { box-shadow:inset 3px 0 var(--k-warn); }
.kr .grund.grey { box-shadow:inset 3px 0 var(--k-off); }
.kr details.dienst { border-bottom:1px solid var(--k-rule); }
.kr details.dienst > summary { list-style:none; cursor:pointer; }
/* Der native Marker ist oben ausgeblendet -- ohne Ersatz sieht niemand,
   dass eine Zeile ueberhaupt aufklappbar ist. Eigener Pfeil in der
   Namenszelle, gedreht im offenen Zustand. */
.kr details.dienst > summary .nm::after {
  content:"›"; color:var(--k-dim); display:inline-block;
  transition:transform .12s; }
.kr details.dienst[open] > summary .nm::after { transform:rotate(90deg); }
.kr details.dienst > summary::-webkit-details-marker { display:none; }
.kr details.dienst > summary.row { border-bottom:none; }
.kr details.dienst[open] > summary.row { background:var(--k-bg2); }
.kr details.dienst > summary:focus-visible { outline:2px solid var(--k-acc);
                                             outline-offset:-2px; }
.kr .ft { padding:12px 18px; color:var(--k-dim); font-size:10.5px;
          display:flex; gap:18px; flex-wrap:wrap;
          border-top:1px solid var(--k-rule2); background:var(--k-bg2); }
.kr .ft b { color:var(--k-tx); font-weight:500; }

/* Zweiteingabe (app/templates/sudo.html). Gleiche Flaeche wie ein Alarm --
   sie gehoert zum Zustand der Seite, nicht in eine eigene Ecke. Liegt
   ausserhalb von #lagebild, wird also beim 15-s-Tausch nicht angefasst. */
.kr .sudo { padding:10px 18px; border-bottom:1px solid var(--k-rule);
            background:var(--k-bg2);
            display:grid; grid-template-columns:56px 1fr; gap:12px;
            align-items:center; }
.kr .sudo-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
                 font-size:11.5px; color:var(--k-dim); }
.kr .sudo-form input[type="password"] { font:inherit; width:16ch;
                                        padding:5px 7px; min-height:auto;
                                        margin:0; background:var(--k-bg);
                                        color:var(--k-tx);
                                        border:1px solid var(--k-edge); }
.kr .sudo-form button { font:inherit; font-size:9.5px; letter-spacing:.08em;
                        padding:5px 9px; background:transparent;
                        color:var(--k-dim); border:1px solid var(--k-edge);
                        cursor:pointer; }
.kr .sudo-form button:hover { color:var(--k-tx2); border-color:var(--k-acc); }
.kr .sudo-fehler { color:var(--k-bad); }

/* Handy: keine geschrumpfte Tabelle, sondern eigene Fassung.
   Prozessorspalte und Knopfleiste entfallen, Zeilen mindestens 52 px,
   Aktionen erscheinen beim Aufklappen. */
@media (max-width:639px) {
  /* Drei Spalten statt vier: Punkt, Name, sonst nichts. Die Zahlen stehen
     in der Kachel -- dasselbe Muster wie bei der Knopfleiste, die dort
     laengst sitzt. */
  .kr .row { grid-template-columns:12px 1fr; padding:6px 16px;
             column-gap:8px; min-height:52px; font-size:14px; }
  .kr .row .mem, .kr .row .cpu { display:none; }
  .kr .acts-zeile { display:none; }
  /* Einzeilig mit Ellipse verschluckte der Name seine Merker: "Legal
     Cockpit Staging 0/1 laufen BERICHT KAPUTT" braucht 362px und hatte
     258px -- der Befund verschwand lautlos, ohne sichtbare Auslassung.
     Am Handy darf die Zeile deshalb umbrechen und wachsen. */
  .kr .row .nm { white-space:normal; overflow:visible; }
  .kr .acts-auf { display:flex; justify-content:flex-start; gap:8px;
                  padding:8px 16px 12px 16px; background:var(--k-bg2); }
  .kr .acts-auf button { font-size:12px; padding:10px 14px; min-height:44px; }
  .kr .alarm, .kr .ausfall { grid-template-columns:56px 1fr;
                             padding:13px 16px; }
  /* Nebeneinander riss die Zweiteingabe am Handy auseinander: Beschriftung,
     Feld, Knopf und Fehlertext brachen auf drei Zeilen um, waehrend der Tag
     mittig danebenstand. Untereinander, Feld und Knopf auf volle Breite. */
  .kr .sudo { grid-template-columns:1fr; gap:8px; padding:13px 16px; }
  .kr .sudo .tag { justify-self:start; width:56px; }
  .kr .sudo-form { flex-direction:column; align-items:stretch; gap:8px; }
  .kr .sudo-form input[type="password"] { width:100%; }
  /* Touch-Ziele >=44px (PWA-Pflicht), auch in der Zweiteingabe. */
  .kr .sudo-form input[type="password"], .kr .sudo-form button {
    min-height:44px; font-size:14px; }
  /* Die Zweiteingabe steht jetzt unter der Liste und ist zugeklappt. Im
     Normalfall kostet sie damit eine Zeile statt 173 Pixel. */
  .kr .sudo-auf > summary { min-height:44px; display:flex;
                            align-items:center; cursor:pointer; }
  .kr .sect, .kr .ft, .kr .hd { padding-left:16px; padding-right:16px; }
  /* Der Kopf traegt fuenf Zellen fuers Desktop-Raster. Am Handy zeigt die
     Zeile nur noch Punkt und Name -- die Zahlenspalten im Kopf waeren dann
     eine Beschriftung ohne Inhalt darunter, also ausblenden, zusammen mit
     den beiden leeren Platzhaltern fuer Lampe und Knopfleiste. */
  .kr .sect.spalten > [aria-hidden] { display:none; }
  .kr .sect.spalten { gap:6px; }
  .kr .sect.spalten .num { display:none; }
  .kr .sub, .kr .grund { padding-left:16px; padding-right:16px; }
  .kr .ft { flex-direction:column; gap:6px; }
}
/* Streifen bei gescheitertem Abruf (app/static/verbindung.js). Liegt bewusst
   unabhaengig von der Inhaltsfarbe darueber: veraltete Daten sind auch dann
   eine Aussage, wenn darunter alles gruen aussieht. Deshalb die Alarmfarbe
   und eine feste Position statt einer Zeile in der Fusszeile.
   position:sticky statt fixed: `fixed` nimmt keinen Platz im Textfluss ein
   und legt sich deshalb ueber den Kopf darunter -- Lampe und Urteilstext
   waren komplett verdeckt, am Handy zusaetzlich ein Teil der Kennzahlenzeile.
   `sticky` bleibt Teil des normalen Flusses: das Element (erstes Kind von
   body, siehe verbindung.js) schiebt `.kr` beim Einblenden nach unten, statt
   es zu ueberdecken, und "klebt" trotzdem am oberen Rand, wenn ueber die
   Seite gescrollt wird. Kein zusaetzlicher reservierter Platzhalter noetig:
   der Streifen tritt bewusst SELTEN auf (nur bei gestoerter Verbindung), ist
   dann aber Teil des tatsaechlichen Seiteninhalts -- die Alternative
   waere ein Layout, das PERMANENT Platz fuer ihn freihaelt (auch wenn die
   Verbindung steht), und das saehe im Normalfall nach einer kaputten Luecke
   aus. */
.verbindung-weg {
  position:sticky; top:0; z-index:50;
  padding:10px 18px; text-align:center;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:12.5px;
  background:var(--k-bad); color:#0a1418;
  /* Safe-Area: der Streifen darf nicht unter der Notch kleben. */
  padding-top:max(10px, env(safe-area-inset-top));
}

/* Beruehrziele haengen am Eingabegeraet, nicht an der Fensterbreite. Die
   44px galten bisher nur unter 640px -- ein Tablet im Querformat oder ein
   Notebook mit Beruehrbildschirm bekam die 24px-Knoepfe der dichten Fassung.
   Die Dichte der Zeile bleibt unangetastet, nur die Trefferflaeche waechst. */
@media (pointer:coarse) {
  .kr .acts button, .kr .sudo-form button,
  .kr .sudo-form input[type="password"] { min-height:44px; padding:4px 10px; }
}
/* Die breitere Knopfspalte NUR dort, wo es die Knopfspalte ueberhaupt gibt.
   Ohne die zweite Bedingung setzte diese Regel das fuenfspaltige
   Desktop-Raster auf jedem Telefon durch (Telefone melden pointer:coarse) --
   dem Namen blieben bei 390px noch 34px, "Bambuddy" brach zu "Bambu/ddy".
   Auf einem Bildschirm gesehen, nicht gemessen: die Messung lief in einem
   Rahmen ohne Beruehrungs-Emulation und blieb deshalb gruen. */
@media (pointer:coarse) and (min-width:640px) {
  .kr .row, .kr .sect.spalten {
    grid-template-columns:12px 1fr 78px 54px 136px; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }