/* Ergänzungen zum übernommenen Grundstil (style.css) und das dunkle Farbschema.
   Was dort schon steht, wird dort genutzt und hier nicht nachgebaut.

   Palette Zeichen für Zeichen dieselbe wie in ParkWeg, MD-Assist und im
   Bewerbermanagement. Das ist kein Selbstzweck: Wer den ganzen Tag zwischen
   diesen Anwendungen wechselt, soll nicht bei jedem Wechsel neu lesen lernen —
   und ein Rot bedeutet in allen Werkzeugen des Hauses dasselbe. */

/* =====================================================================
   Dunkles Farbschema

   Dunkel ist die Voreinstellung und steht direkt im :root -- so gibt es beim
   Laden kein kurzes Aufblitzen einer hellen Seite. Wer lieber hell arbeitet,
   setzt ueber den Umschalter im Kopf data-thema="hell" auf <html>; ein
   winziges Skript im <head> jeder Seite liest die Wahl aus dem
   Sitzungsspeicher, bevor der Stil greift.
   ===================================================================== */

:root {
  --bg:#12171F;
  --surface:#1A212B;
  --ink:#E6EBF2;
  --ink-soft:#93A1B5;
  --line:#2C3644;

  --blue:#60A5FA;
  --blue-deep:#93C5FD;
  --blue-tint:#1B2A41;

  --yellow:#FCD34D;
  --yellow-ink:#FCD34D;
  --yellow-tint:#3A2F0B;

  --green:#86EFAC;
  --green-ink:#86EFAC;
  --green-tint:#14351F;

  --red:#FCA5A5;
  --red-tint:#3D1618;

  --lightblue:#7DD3FC;
  --purple:#C4A0C2;
  --gray-ink:#93A1B5;
  --gray-tint:#232B36;

  /* Kuchenfarben, dunkles Schema. Zehn, die sich auch bei kleinen Stuecken
     noch voneinander unterscheiden lassen; alles darueber wird zu
     »Kleinere Posten« zusammengefasst. */
  --kuchen-1:#60A5FA; --kuchen-2:#FCD34D; --kuchen-3:#86EFAC; --kuchen-4:#C4A0C2;
  --kuchen-5:#7DD3FC; --kuchen-6:#FCA5A5; --kuchen-7:#A5B4FC; --kuchen-8:#FDBA74;
  --kuchen-9:#5EEAD4; --kuchen-10:#D8B4FE;
  --kuchen-frei:#3C4A5E;

  --eingabe-bg:#141A23;
  --auf-akzent:#0B1017;
  --schatten:rgba(0,0,0,.45);

  --logo-navy:#9CC5EC;
  --logo-papier:#12171F;
}

:root[data-thema="hell"] {
  /* Kuchenfarben, helles Schema. Dieselbe Reihenfolge, andere Werte: Auf Weiss
     braucht es kraeftigere Toene, sonst verschwinden die kleinen Stuecke. */
  --kuchen-1:#003E77; --kuchen-2:#4DAF45; --kuchen-3:#C79000; --kuchen-4:#A862A4;
  --kuchen-5:#2F8FBF; --kuchen-6:#B2452F; --kuchen-7:#4F6FB5; --kuchen-8:#D2691E;
  --kuchen-9:#2E9E8F; --kuchen-10:#7E57C2;
  --kuchen-frei:#DFE6EC;

  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --ink:#17262B;
  --ink-soft:#5A6B70;
  --line:#DFE6EC;

  --blue:#003E77;
  --blue-deep:#002C55;
  --blue-tint:#E4EDF6;

  --yellow:#FFD405;
  --yellow-ink:#8F7400;
  --yellow-tint:#FFF7D1;

  --green:#4DAF45;
  --green-ink:#2F7A29;
  --green-tint:#E7F5E5;

  --red:#B2452F;
  --red-tint:#F9E9E5;

  --lightblue:#70CAF3;
  --purple:#A862A4;
  --gray-ink:#5A6B70;
  --gray-tint:#ECEFF0;

  --eingabe-bg:#FFFFFF;
  --auf-akzent:#FFFFFF;
  --schatten:rgba(23,38,43,.14);

  --logo-navy:#003E77;
  --logo-papier:#FFFFFF;
}

/* =====================================================================
   Seitenwechsel

   Jede Ansicht ist eine eigene Seite -- das ist Absicht: Es gibt keinen
   Anwendungszustand im Browser, der beim Wechsel verlorengehen koennte, und
   jede Adresse laesst sich weitergeben und neu laden. Der Preis war ein harter
   Schnitt bei jedem Klick; die View-Transition-API blendet ihn weich ueber.
   Browser, die sie nicht kennen, laden schlicht wie bisher.
   ===================================================================== */

@view-transition { navigation: auto; }

html { background: var(--bg); }

::view-transition-old(root) { animation: ausblenden .12s ease both; }
::view-transition-new(root) { animation: einblenden .16s ease both; }

@keyframes ausblenden { to { opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }

header { view-transition-name: kopfzeile; }
::view-transition-group(kopfzeile) { animation-duration: 0s; }

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine. Das ist keine
   Hoeflichkeit -- ueberblendende Flaechen loesen bei manchen Menschen
   Schwindel aus. Betrifft hier auch den Puls am Vorfallpunkt. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .puls::after { animation: none; }
}

/* =====================================================================
   Eingabefelder

   style.css setzt background:#fff hart auf input, select und textarea. Auf
   dunklem Grund stand die Schrift damit weiss auf weiss. color-scheme ist der
   zweite Teil und wichtiger, als er aussieht: Ohne diese Angabe zeichnet der
   Browser die Aufklappliste eines <select> und die Bildlaufleisten weiterhin
   im hellen Systemschema -- Teile, an die kein Stylesheet herankommt.
   ===================================================================== */

:root { color-scheme: dark; }
:root[data-thema="hell"] { color-scheme: light; }

input, select, textarea { background: var(--eingabe-bg); }
option { background: var(--surface); color: var(--ink); }
::placeholder { color: var(--ink-soft); opacity: 1; }

.dialog-huelle { z-index: 400; }

/* --- Logo --- */
.logo { display:flex; align-items:center; gap:10px; }
.logo-zeichen { height:38px; width:38px; flex:0 0 auto; }
.logo-wort {
  font-family: var(--font-display, Arial, Helvetica, sans-serif);
  font-size:19px; font-weight:600; letter-spacing:1.4px;
  color: var(--logo-navy); white-space:nowrap;
}
.logo[data-form="lockup"] { flex-direction:column; gap:14px; }
.logo[data-form="lockup"] .logo-zeichen { height:84px; width:84px; }
.logo[data-form="lockup"] .logo-wort { font-size:30px; letter-spacing:3px; }
.logo-unterzeile {
  font-size:11.5px; letter-spacing:2.2px; color:var(--ink-soft);
  text-transform:uppercase; text-align:center;
}

.thema-knopf {
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:8px; width:32px; height:32px; line-height:1; font-size:15px; padding:0;
}
.thema-knopf:hover { color:var(--blue); border-color:var(--blue); }

.zahnrad-huelle { position:relative; display:flex; }
.kopfmenue {
  position:absolute; top:38px; right:0; z-index:500; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 24px var(--schatten); padding:6px; display:flex;
  flex-direction:column; gap:2px;
}
.kopfmenue a {
  display:block; padding:8px 12px; border-radius:7px; font-size:13.5px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.kopfmenue a:hover { background:var(--blue-tint); color:var(--blue); }
.kopfmenue a.aktiv { color:var(--blue); font-weight:600; }

/* Abschnittsueberschrift mit auslaufender Linie. */
.marke-zeile { display:flex; align-items:center; gap:14px; margin:30px 0 12px; }
.marke-zeile h3 { margin:0; font-size:15px; white-space:nowrap; }
.marke-zeile .linie { flex:1; height:1px; background:var(--line); }

/* =====================================================================
   Zustaende

   Fuenf Zustaende, und jeder hat genau eine Farbe -- ueberall gleich, in der
   Kachel wie im Schild wie im Band. Wer eine Farbe einmal gelernt hat, soll
   sie nicht auf der naechsten Seite neu lernen muessen.

     gut        gruen   gemessen, in Ordnung
     warnung    gelb    gemessen, geht so
     stoerung   rot     gemessen, kaputt
     unbekannt  grau    NICHT gemessen -- weiss man nicht
     wartung    blau    absichtlich aus
   ===================================================================== */

.ampel.blau { background:var(--blue); }

.schild {
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px;
  font-weight:700; white-space:nowrap;
}
.schild.gut { background:var(--green-tint); color:var(--green-ink); }
.schild.warnung { background:var(--yellow-tint); color:var(--yellow-ink); }
.schild.stoerung { background:var(--red-tint); color:var(--red); }
.schild.unbekannt { background:var(--gray-tint); color:var(--gray-ink); }
.schild.wartung { background:var(--blue-tint); color:var(--blue); }
.schild.quittiert { border:1px dashed currentColor; }

/* =====================================================================
   Die Maschinenzeile

   Ganz oben, schmal, unaufdringlich. Sie gilt allen Werkzeugen zugleich: Eine
   volle Platte erzeugt keine Stoerung an einem System, sondern acht auf
   einmal -- und dann sucht man acht Ursachen statt einer.
   ===================================================================== */

.maschine {
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:10px 16px; margin:0 0 18px; font-size:13px;
}
.maschine .wert { font-weight:700; font-variant-numeric:tabular-nums; }
.maschine .beschriftung { color:var(--ink-soft); font-size:11.5px;
                          text-transform:uppercase; letter-spacing:.6px; margin-right:7px; }
.maschine .stueck { display:flex; align-items:baseline; }
.maschine .stueck.eng { color:var(--yellow-ink); }
.maschine .stueck.voll { color:var(--red); }
.maschine .takt { margin-left:auto; color:var(--ink-soft); font-size:12px; }

/* =====================================================================
   Werkzeugkacheln -- die eigentliche Uebersicht
   ===================================================================== */

.kachel-raster {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px;
}

.werkzeug {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px 12px; display:flex; flex-direction:column;
  gap:10px; overflow:hidden;
}
/* Der Streifen am linken Rand traegt den Zustand. Farbe allein genuegt nicht --
   deshalb steht der Zustand zusaetzlich als Wort im Schild daneben. Rot-Gruen
   ist die haeufigste Farbsehschwaeche, und diese Seite besteht aus Rot und Gruen. */
.werkzeug::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line);
}
.werkzeug.gut::before { background:var(--green); }
.werkzeug.warnung::before { background:var(--yellow); }
.werkzeug.stoerung::before { background:var(--red); }
.werkzeug.unbekannt::before { background:var(--gray-ink); }
.werkzeug.wartung::before { background:var(--blue); }
.werkzeug.stoerung { border-color:var(--red); }
.werkzeug.inaktiv { opacity:.55; }

.werkzeug-kopf { display:flex; align-items:flex-start; gap:10px; }
.werkzeug-kopf h3 { margin:0; font-size:15.5px; }
.werkzeug-kopf h3 a { color:var(--ink); text-decoration:none; }
.werkzeug-kopf h3 a:hover { color:var(--blue); }
.werkzeug-kopf .rechts { margin-left:auto; display:flex; gap:6px; align-items:center; }
.werkzeug .domain { font-size:11.5px; color:var(--ink-soft); word-break:break-all; }

.werkzeug .kurz { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }

/* Die Sondenreihe: ein Punkt je Sonde, Beschriftung im Titel. Auf einer Kachel
   ist kein Platz fuer sechs Zeilen -- aber jede Sonde muss sichtbar bleiben,
   sonst faellt eine ausgefallene Messung niemandem auf. */
.sonden-reihe { display:flex; flex-wrap:wrap; gap:6px; }
.sonden-punkt {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px;
  font-size:11px; border:1px solid var(--line); background:var(--bg); cursor:help;
}
.sonden-punkt .ampel { width:7px; height:7px; }

.kennzahlen { display:flex; flex-wrap:wrap; gap:4px 22px; font-size:12.5px; }
.kennzahl { display:flex; flex-direction:column; gap:1px; }
.kennzahl .beschriftung { font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
                          color:var(--ink-soft); }
.kennzahl .wert { font-weight:700; font-variant-numeric:tabular-nums; }
.kennzahl .wert.leer { color:var(--ink-soft); font-weight:400; }

.werkzeug-fuss { display:flex; gap:6px; align-items:center; margin-top:2px; }
.werkzeug-fuss button { padding:4px 10px; font-size:12px; }
.werkzeug-fuss .abstand { margin-left:auto; }

/* =====================================================================
   Vorfaelle
   ===================================================================== */

.vorfall {
  display:flex; gap:12px; align-items:flex-start; padding:11px 14px;
  border-bottom:1px solid var(--line);
}
.vorfall:last-child { border-bottom:none; }
.vorfall .ampel { margin-top:5px; }
.vorfall .inhalt { flex:1; min-width:0; }
.vorfall .titel { font-weight:600; font-size:13.5px; }
.vorfall .text { font-size:12.5px; color:var(--ink-soft); line-height:1.5;
                 overflow-wrap:anywhere; }
.vorfall .zeit { font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.vorfall .notiz { font-size:12px; color:var(--ink); border-left:2px solid var(--blue);
                  padding-left:8px; margin-top:5px; }
.vorfall.offen.stoerung { background:var(--red-tint); }
.vorfall.offen.warnung { background:var(--yellow-tint); }
.vorfall.erledigt { opacity:.6; }

/* Ein ruhender Punkt fuer »laeuft gerade«: ein einziger Ausschlag, kein
   Blinken. Blinkende Flaechen sind in einer Anwendung, die man den ganzen Tag
   offen hat, nach zwei Stunden unertraeglich. */
.puls { position:relative; }
.puls::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; opacity:0; animation: pulsen 2.6s ease-out infinite;
}
@keyframes pulsen { 0% { transform:scale(.6); opacity:.7; } 70%,100% { transform:scale(1.5); opacity:0; } }

/* =====================================================================
   Verlaufsband einer Sonde

   Ein Kaestchen je Messung, aelteste links. Beantwortet auf einen Blick die
   Frage, die eine Momentaufnahme nicht beantwortet: Ist das gerade eben
   passiert oder geht das schon den ganzen Tag so?
   ===================================================================== */

.verlaufsband { display:flex; gap:2px; align-items:stretch; height:26px; }
.verlaufsband .schritt { flex:1 1 0; min-width:2px; border-radius:2px; background:var(--gray-tint); }
.verlaufsband .schritt.gut { background:var(--green); }
.verlaufsband .schritt.warnung { background:var(--yellow); }
.verlaufsband .schritt.stoerung { background:var(--red); }
.verlaufsband .schritt.unbekannt { background:var(--gray-ink); opacity:.45; }
.verlaufsband-fuss { display:flex; justify-content:space-between; font-size:11.5px;
                     color:var(--ink-soft); margin-top:4px; }

/* =====================================================================
   Nutzungsband: ein Balken je Tag
   ===================================================================== */

.tagesband { display:flex; gap:2px; align-items:flex-end; height:62px; }
.tagesband .tag {
  flex:1 1 0; min-width:3px; background:var(--blue); border-radius:2px 2px 0 0;
  min-height:2px; opacity:.85;
}
.tagesband .tag:hover { opacity:1; }
/* Ein Tag ohne Messung ist NICHT ein Tag ohne Nutzung. Er bekommt deshalb
   keinen Balken der Hoehe null, sondern eine gestrichelte Grundlinie. */
.tagesband .tag.ungemessen {
  background:none; border-bottom:2px dashed var(--gray-ink); border-radius:0;
  height:2px; min-height:2px; opacity:.6;
}
.tagesband-fuss { display:flex; justify-content:space-between; font-size:11.5px;
                  color:var(--ink-soft); margin-top:6px; }

/* Kleines Band in der Tabellenzeile der Nutzungsseite. */
.mini-band { display:flex; gap:1px; align-items:flex-end; height:22px; width:130px; }
.mini-band span { flex:1 1 0; background:var(--blue); min-height:1px; border-radius:1px; }
.mini-band span.ungemessen { background:var(--gray-ink); opacity:.3; height:2px; }

/* =====================================================================
   Sondenliste in der Einzelansicht
   ===================================================================== */

.sonde {
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;
  background:var(--surface);
}
.sonde-kopf { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sonde-kopf h4 { margin:0; font-size:14px; }
.sonde-kopf .art { font-size:11.5px; color:var(--ink-soft); }
.sonde-kopf .rechts { margin-left:auto; display:flex; gap:6px; }
.sonde-kopf .rechts button { padding:3px 9px; font-size:11.5px; }
.sonde .befund { font-size:13px; margin:8px 0 0; line-height:1.55; overflow-wrap:anywhere; }
.sonde .beiwerk { font-size:11.5px; color:var(--ink-soft); margin-top:6px;
                  display:flex; flex-wrap:wrap; gap:4px 16px; }
.sonde .einstellungen { font-size:11.5px; color:var(--ink-soft); margin-top:8px;
                        font-family:ui-monospace, Menlo, Consolas, monospace;
                        overflow-wrap:anywhere; }

/* =====================================================================
   Grosse Zahl mit Beschriftung -- fuer die Einzelansicht
   ===================================================================== */

.zahlenreihe { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
               gap:14px; }
.zahlenkachel { background:var(--bg); border:1px solid var(--line); border-radius:10px;
                padding:12px 14px; }
.zahlenkachel .wert { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;
                      line-height:1.15; }
.zahlenkachel .wert.leer { font-size:20px; color:var(--ink-soft); font-weight:400; }
.zahlenkachel .beschriftung { font-size:11px; letter-spacing:.6px; text-transform:uppercase;
                              color:var(--ink-soft); margin-top:3px; }
.zahlenkachel .zusatz { font-size:11.5px; color:var(--ink-soft); margin-top:4px; }

/* =====================================================================
   Anbinden: Formular je Sondenart
   ===================================================================== */

.sondenform { display:grid; grid-template-columns:220px 1fr; gap:9px 16px; align-items:center;
              font-size:13px; }
.sondenform label { color:var(--ink-soft); }
.sondenform .hilfe { grid-column:2; font-size:11.5px; color:var(--ink-soft); margin-top:-4px; }
@media (max-width: 700px) {
  .sondenform { grid-template-columns:1fr; gap:3px; }
  .sondenform .hilfe { grid-column:1; }
}

.beschreibungsliste { display:grid; grid-template-columns:210px 1fr; gap:9px 20px;
                      font-size:13.5px; }
.beschreibungsliste dt { color:var(--ink-soft); }
.beschreibungsliste dd { margin:0; }
@media (max-width: 640px) {
  .beschreibungsliste { grid-template-columns:1fr; gap:2px 0; }
  .beschreibungsliste dd { margin-bottom:10px; }
}

/* Ein Kasten fuer das, was man einmal lesen und dann wiederfinden koennen muss. */
.merksatz {
  border-left:3px solid var(--blue); background:var(--blue-tint);
  padding:11px 14px; border-radius:0 8px 8px 0; font-size:13px; line-height:1.65;
  margin:0 0 16px;
}
.merksatz strong { color:var(--blue); }

.leerhinweis { text-align:center; color:var(--ink-soft); font-size:13.5px;
               padding:34px 20px; line-height:1.7; }

/* =====================================================================
   PLATTENPLATZ

   Die Farben des Kuchens stehen als eigene Variablen da und nicht als
   feste Werte im Skript: Der Leitstand hat zwei Farbschemata, und ein
   Stueck, das im hellen Schema gut lesbar ist, verschwindet im dunklen.
   ===================================================================== */

.kuchen-feld { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.kuchen { flex:0 0 auto; width:300px; max-width:100%; }
.kuchen svg { width:100%; height:auto; display:block; }
.kuchen-stueck { cursor:pointer; transition:opacity .12s; stroke:var(--surface); stroke-width:1.5; }
.kuchen-feld.zeigt .kuchen-stueck { opacity:.35; }
.kuchen-feld.zeigt .kuchen-stueck.hervor { opacity:1; }
.kuchen-ablesung {
  min-height:40px; margin-top:10px; font-size:13px; line-height:1.5;
  color:var(--ink-soft); text-align:center;
}
.kuchen-ablesung strong { color:var(--ink); display:block; font-size:14px; }

.kuchen-legende { flex:1 1 280px; min-width:260px; display:flex; flex-direction:column; gap:1px; }
.kuchen-legende .zeile {
  display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:7px;
  font-size:13px; cursor:pointer; transition:background .12s;
}
.kuchen-legende .zeile:hover, .kuchen-legende .zeile.hervor { background:var(--blue-tint); }
.kuchen-legende .tupfer { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.kuchen-legende .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
                        white-space:nowrap; }
.kuchen-legende .wert { font-variant-numeric:tabular-nums; font-weight:600; }
.kuchen-legende .anteil { font-variant-numeric:tabular-nums; color:var(--ink-soft);
                          width:46px; text-align:right; }

.platz-zahlen { display:flex; gap:26px; flex-wrap:wrap; align-items:baseline;
                margin-bottom:16px; font-size:13px; }
.platz-zahlen .stueck { display:flex; flex-direction:column; }
.platz-zahlen .wert { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
                      font-family:var(--font-display); }
.platz-zahlen .beschriftung { font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
                              color:var(--ink-soft); }
.platz-zahlen .eng .wert { color:var(--yellow-ink); }
.platz-zahlen .voll .wert { color:var(--red); }

/* Ein Balken in der Tabellenzelle: Groesse sieht man schneller als man sie liest. */
.balken { height:7px; border-radius:4px; background:var(--gray-tint); overflow:hidden;
          min-width:40px; }
.balken > span { display:block; height:100%; border-radius:4px; background:var(--blue); }

.differenz.waechst { color:var(--red); font-weight:600; }
.differenz.schrumpft { color:var(--green-ink); }
.differenz.gleich { color:var(--ink-soft); }

.pfad { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
        color:var(--ink-soft); word-break:break-all; }

.archiv-zeile .schild { margin-right:6px; }
.archiv-inhalt { font-size:11.5px; color:var(--ink-soft); line-height:1.6; }

.pruefsumme { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
              color:var(--ink-soft); word-break:break-all; }

.auftrag-lauf { display:flex; align-items:center; gap:10px; font-size:13px;
                background:var(--blue-tint); border-radius:9px; padding:10px 14px;
                margin-bottom:14px; }
.auftrag-lauf .kreisel {
  width:14px; height:14px; border:2px solid var(--blue); border-right-color:transparent;
  border-radius:50%; animation:dreht 1s linear infinite; flex:0 0 auto;
}
@keyframes dreht { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auftrag-lauf .kreisel { animation:none; } }

/* Bleibt eine Tabellenzelle. Mit display:flex wurde die Zelle zu einem
   Flex-Kasten, fiel aus dem Tabellenraster und stand gegen die Zeile versetzt:
   Rahmen und Hervorhebung endeten vor den Knöpfen. */
td.tabellen-aktionen { text-align:right; white-space:nowrap; }
.tabellen-aktionen button { padding:4px 10px; font-size:12px; white-space:nowrap;
                            margin-left:6px; }
.tabellen-aktionen button:first-child { margin-left:0; }

/* =====================================================================
   VERTRAUTE RECHNER
   ===================================================================== */

.ankreuz { display:flex; align-items:center; gap:9px; margin:2px 0 14px;
           font-size:13px; font-weight:400; letter-spacing:normal;
           text-transform:none; color:var(--ink); cursor:pointer; }
.ankreuz input { width:auto; margin:0; flex:0 0 auto; accent-color:var(--blue); }
.ankreuz b { font-variant-numeric:tabular-nums; }

.geraeteliste { list-style:none; margin:0; padding:0; }
.geraeteliste li {
  display:flex; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.geraeteliste li:last-child { border-bottom:none; }
.geraeteliste li > div { flex:1; min-width:0; }
.geraeteliste .leise { color:var(--ink-soft); font-size:12px; }
.geraeteliste button { padding:4px 10px; font-size:12px; white-space:nowrap; }

.karte-fuss { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
              margin-top:14px; }
.karte-fuss .hinweis-klein { margin-top:0; }

/* Ein Fehleranteil ab zehn Prozent faellt auf. Jede einzelne Messung der
   Erreichbarkeitssonde gelingt dabei, und trotzdem stimmt etwas nicht. */
.datentabelle td.viel-fehler { color:var(--red); font-weight:600; }