/* ── heizung/heizung.css ── */
/* Heizung — Kachel, Detailseite. Aus static/css/style.css (13.09.2026). */

/* ── Heizung ──────────────────────────────────────────────────────────
   Kachel: nur Zustand, Preset-Wahl und die Raeume. Alles Weitere steht
   auf der Detailseite. */
.hz-leer { font-size: 13px; color: var(--text3); padding: 4px 0; }
.hz-kopf { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px; }
.hz-zustand  { font-size: 22px; font-weight: 700; line-height: 1; }
.hz-leistung { font-size: 14px; font-weight: 700; color: var(--text2);
  font-variant-numeric: tabular-nums; }
.hz-vorlauf  { margin-left: auto; font-size: 12px; color: var(--text3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.hz-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-preset  { font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  transition: border-color .15s, color .15s; }
.hz-preset:hover:not(:disabled) { border-color: var(--accent2); }
.hz-preset.an { border-color: var(--accent); color: var(--accent); }
.hz-preset:disabled { opacity: .5; cursor: default; }
.hz-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* EIN Raster fuer alle Zeilen, nicht eines je Zeile.
   Vorher war jede Raumzeile ihr eigenes Raster. `auto`-Spalten richten
   sich dann nach dem Inhalt DIESER Zeile — „Auto 0 %" ist schmaler als
   „Manuell 95 %", und schon standen die Temperaturen jeder Zeile woanders
   (Eignermeldung: die Werte sollen immer an derselben Stelle stehen).
   Mit `subgrid` behalten die Zeilen ihre eigene Flaeche (Trennlinie,
   gedaempft wenn aus) und teilen sich trotzdem die Spalten des Behaelters. */
/* FESTE Spalten, nicht `auto`.
   `auto` richtet sich nach dem breitesten Inhalt, den es GERADE gibt —
   wechselt der (19,2° zu 9,2°, „Auto 0 %" zu „Manuell 100 %"), wandert die
   ganze Spalte mit. Erst zeilenweise, nach dem Umstieg auf ein gemeinsames
   Raster eben alle zusammen; verschoben wurde es trotzdem (Eignermeldung:
   die Felder sollen immer an ihrem Platz sein).
   Die Breiten sind gemessen, nicht geschaetzt — der jeweils breiteste
   moegliche Inhalt bei 13 px Schrift:
     Ist/Soll  „100.0°"      36,5 px = 2,81 em  -> 2,95 em
     Pfeil     „→"           11,0 px = 0,85 em  -> 1,25 em
   Beim Pfeil war der gemessene Wert zu knapp: die Probe am geklonten
   Element gab 11 px, gebraucht werden gut 14 — nachgemessen an der
   echten Zelle (scrollWidth gegen clientWidth).
     Geblaese  „Manuell100%" 78,0 px = 6,00 em  -> 6,20 em
   Der kleine Aufschlag faengt andere Schriftschnitte ab. */
.hz-raeume { display: grid; gap: 2px; margin-top: 12px;
  grid-template-columns:
    minmax(0, 1fr)   /* Name — nimmt, was uebrig ist, und kuerzt notfalls */
    2.95em           /* Ist */
    1.25em           /* Pfeil */
    2.95em           /* Soll */
    6.2em            /* Betriebsart und Drehzahl */
    14px;            /* Zustandspunkt */ }
@supports (grid-template-columns: subgrid) {
  .hz-raeume > .hz-raum { grid-column: 1 / -1;
                          grid-template-columns: subgrid; }
}
/* Bei zehn Raeumen lief die Liste unten aus der Kachel heraus — die Kachel
   hat im Raster eine feste Hoehe und overflow:hidden. Die Kachel zeigt
   deshalb nur die ersten Raeume und sagt, wie viele noch folgen; alle
   stehen auf der Detailseite. Eine scrollende Liste waere hier falsch:
   ein Tipp auf die Kachel oeffnet die Detailseite, Scrollen und Tippen
   kaemen sich auf dem Touchscreen ins Gehege. */
.hz-mehr { font-size: 12px; color: var(--text3); padding: 6px 2px 0; }
/* [hidden] muss gewinnen: die eingebaute Browserregel [hidden]{display:none}
   hat nur Element-Spezifitaet und wird von .hz-raum{display:grid} geschlagen —
   ausgeblendete Zeilen belegten dadurch weiter Platz und schoben die
   Fusszeile aus der Kachel. */
[hidden] { display: none !important; }
/* Werte, die aus einer alten Meldung stammen: sichtbar, aber zurueckgenommen. */
.hz-alt { opacity: .45; }
.hz-weg { color: var(--yellow); border: 1px solid var(--yellow);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; }
/* Die eigene Spaltenangabe bleibt als RUECKFALL stehen: kennt ein Browser
   `subgrid` nicht, sieht es aus wie vorher statt gar nicht. */
.hz-raum   { display: grid; align-items: baseline; gap: 8px;
  grid-template-columns: minmax(0, 1fr) 2.95em 1.25em 2.95em 6.2em 14px;
  padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.hz-raum + .hz-raum { border-top: 1px solid var(--border); }
.hz-raum-aus { opacity: .5; }
/* In der Raumkarte darf NICHT die ganze Karte gedaempft werden: der
   Schalter oben rechts muss ablesbar bleiben, sonst findet man den Weg
   zurueck nicht. opacity auf der Karte liesse sich im Kind nicht wieder
   zuruecknehmen (eigener Stapelkontext), deshalb wird gezielt der Inhalt
   gedaempft und die Kopfzeile bleibt klar. */
.hz-raumkarte.hz-raum-aus { opacity: 1; }
.hz-raumkarte.hz-raum-aus .hz-soll,
.hz-raumkarte.hz-raum-aus .sb-stats,
.hz-raumkarte.hz-raum-aus .hz-presets,
.hz-raumkarte.hz-raum-aus .hz-tempo { opacity: .5; }
.hz-raum-name  { color: var(--text2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* Rechtsbuendig, damit der Gradzeichen-Rand steht und die Ziffern nach
   links wachsen. Zusammen mit `tabular-nums` (an .hz-raum) bleibt damit
   jede Stelle an ihrem Platz, egal ob 9,2 oder 19,2 dasteht. */
.hz-raum-ist, .hz-raum-soll { text-align: right; }
.hz-raum-pfeil { text-align: center; }
.hz-raum-ist   { font-weight: 700; }
.hz-raum-ist i, .hz-raum-soll i { font-style: normal; font-size: 10px; color: var(--text3); }
.hz-raum-pfeil { color: var(--text3); font-size: 11px; }
.hz-raum-soll  { color: var(--text2); font-weight: 600; }
.hz-raum-flag  { display: flex; justify-content: flex-end; }
/* Betriebsart und Drehzahl des Raumgeblaeses. Die Betriebsart klein und
   zurueckgenommen, die Drehzahl in derselben Groesse wie die Temperaturen
   daneben — gelesen wird die Zahl, das Wort ordnet sie nur ein. */
/* `flex-end`, nicht `text-align`: die Zelle ist ein Flexkasten, dort
   richtet `text-align` nichts aus. */
.hz-raum-fan   { display: flex; align-items: baseline; gap: 4px;
  justify-content: flex-end; white-space: nowrap;
  color: var(--text3); font-size: 11px; }
.hz-raum-fan b { color: var(--text2); font-weight: 600; font-size: 13px; }
.hz-punkt   { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.hz-aus-txt { font-size: 10px; color: var(--text3); }

.hz-hinweis { font-size: 12px; color: var(--text3); margin-top: 10px; }
.hz-fehler  { color: var(--red); }
/* Erfundene Werte muessen unuebersehbar als solche erkennbar sein. */
/* Ein Schaltbefehl steht 60 s an, bevor er wirkt — das muss sichtbar sein,
   sonst wirkt die Anlage traege statt bedacht. */
.hz-pending { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 7px 10px; border-radius: 9px;
  background: var(--surface2); font-size: 12px; color: var(--yellow);
  font-variant-numeric: tabular-nums; }
.hz-mini { font-family: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2); }
.hz-mini:hover { border-color: var(--accent2); }

/* ── Heizung: Detailseite ── */
.hz-raeume-grid { display: grid; gap: var(--gap); margin-bottom: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.hz-raumkarte { margin-bottom: 0; }
.hz-soll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px; align-items: center; margin-top: 4px; }
.hz-soll-mitte { text-align: center; min-width: 0; }
.hz-soll-wert  { display: block; font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.hz-soll-wert i { font-style: normal; font-size: 13px; color: var(--text2);
  font-weight: 600; margin-left: 2px; }
.hz-soll-ist   { display: block; font-size: 12px; color: var(--text3);
  font-variant-numeric: tabular-nums; margin-top: 2px; }
/* Geblaesestaerke im Handbetrieb — erscheint nur, wenn der Raum auf Hand steht */
.hz-tempo { margin-top: 12px; }
.hz-tempo-kopf { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.hz-tempo-kopf span { color: var(--text); font-variant-numeric: tabular-nums; }
.hz-tempo-kopf b { font-size: 15px; font-weight: 700; }
/* Griffflaeche fuer den Finger am Touchscreen, nicht nur fuer die Maus */
.hz-tempo-regler { width: 100%; height: 28px; accent-color: var(--accent2);
  cursor: pointer; touch-action: none; }
.hz-tempo-regler:disabled { opacity: .5; cursor: default; }
.hz-tempo-regler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hz-rund { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.hz-rund:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hz-rund:disabled { opacity: .5; cursor: default; }
.hz-rund:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Im mehrspaltigen Raster (display.js) enger. */
  body.raster-mehrspaltig .card-heizung .tile-main { gap: 8px; }

/* ── pegel/pegel.css ── */
/* Wasserstand — Kachel. Aus static/css/style.css (13.09.2026). */

.card-wl { touch-action: pan-y; }
/* ── Wasserstand tile ── */
.card-wl .wl-tile-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wl-tile-spark { flex: 1; width: 100%; min-height: 48px; display: block; }
/* Am Telefon stehen die Kacheln untereinander und duerfen sich so hoch
   machen, wie ihr Inhalt es zulaesst — der Verlauf tat das weidlich, und
   die Wasserstandskachel wurde die groesste auf der Seite. Er ist hier
   gestaucht: die Kurvenform bleibt lesbar, die Kachel wird flach. */
@media (max-width: 700px) {
  .wl-tile-spark { min-height: 0; max-height: 58px; }
  .card-wl .wl-tile-body { gap: 6px; }
}
.tile--half.card-wl .tile-show-half { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.wl-tile-main { display: flex; align-items: baseline; gap: 6px; }
.wl-tile-big  { font-size: 44px; font-weight: 800; color: var(--text); line-height: 1; }
.wl-tile-trend { font-size: 26px; margin-left: 2px; }
.wl-tile-station { font-size: 13px; color: var(--text3); margin-top: 6px; }
.wl-tile-compact { display: flex; align-items: baseline; gap: 6px; }

/* ── wetter/wetter.css ── */
/* Wetter — Kachel, Seite. Aus static/css/style.css (13.09.2026). */

.card-wx { touch-action: pan-y; }
/* ── Wetter tile ── */
/* Die Tagesspalten sind weg — die Kachel zeigt nur noch heute, die
   Vorschau steht auf der Detailseite (und hat dort ihre eigene
   Tabelle). */
.wx-half { flex: 1; align-items: center; gap: 18px; }
.tile--half.card-wx .wx-half { display: flex; }   /* nur in halber Höhe zeigen */
.wx-half-icon { font-size: 46px; line-height: 1; }
.wx-half-temp { font-size: 36px; font-weight: 800; color: var(--text); line-height: 1; }
.wx-half-sub { font-size: 13px; color: var(--text2); margin-top: 4px; }
/* Auch auf der halben Kachel ist der Wind blau — sonst haette dieselbe
   Angabe je nach Kachelgroesse eine andere Farbe. */
.wx-half-sub #wxHalfWind { color: var(--accent); font-weight: 600;
  font-variant-numeric: tabular-nums; }
/* Die Kachel zeigt NUR heute. Vier Tagesspalten daneben machten beides
   klein und keins lesbar — die weitere Vorschau steht auf der Detailseite.

   KEINE verschachtelten Kaesten mehr (Eignerurteil: „komplett desastroes,
   komplett unuebersichtlich"). Vorher lagen drei Flaechen uebereinander:
   ein gerahmter Kopf, eine nackte Wertezeile, ein gerahmter Streifen —
   drei Sprachen in einer Kachel. Jetzt traegt die Kachel selbst, und die
   Rangfolge machen Schriftgroesse und Abstand.

   Und nur EIN grosser Wert. Vorher standen 18° und 10 kn gleich gross
   nebeneinander und stritten um den Blick. An Bord ist der Wind die
   Frage; die Luft ist die Antwort daneben. */
.wx-koerper { flex: 1; display: flex; flex-direction: column; gap: 10px;
  min-height: 0; }

/* Zwei Spalten, zwei Zeilen, gemeinsame Schriftlinie: links der Wind,
   rechts die Luft. Weil die Zeilen durchlaufen, liest es sich als Kopf
   und nicht als zwei Kaesten. */
.wx-kopf { display: grid; grid-template-columns: auto minmax(0, auto);
  justify-content: space-between; align-items: baseline; gap: 3px 14px; }
.wx-k-wind, .wx-k-luft { display: flex; align-items: baseline; gap: 8px;
  min-width: 0; }
.wx-k-luft { justify-self: end; }
.wx-k-pfeil, .wx-k-ikon { line-height: 0; align-self: center; flex: none; }
/* NICHT in der Akzentfarbe: die gehoert der Windgeschwindigkeit — der
   Linie im Verlauf und der grossen Zahl daneben. Ein Pfeil in derselben
   Farbe sah aus, als gehoerte er zur Zahl (Eignermeldung). Er zeigt aber
   eine Richtung und keinen Betrag, also traegt er die Schriftfarbe, wie
   der Pfeil im Feld „Richtung" auf der Detailseite auch. */
.wx-k-pfeil { color: var(--text); }
.wx-k-ikon  { color: var(--text2); }

/* Die Windzahl ist blau (Eignerwunsch) — dieselbe Farbe wie beim Wasser,
   und aus demselben Grund: es gibt in dieser Oberflaeche EINE Farbe fuer
   „das hier ist ein Wert, kein Zustand", und das ist --accent. Ein eigenes
   Blau daneben waere ein zweites Blau ohne zweite Bedeutung.
   Die Einheit bleibt zurueckhaltend: gefaerbt wird die ZAHL. */
.wx-k-gross { font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.wx-k-gross small { font-size: 14px; font-weight: 600; color: var(--text2);
  margin-left: 3px; }
/* Die Luft ist Beiwerk, aber ein Messwert — gross genug, um sie im
   Vorbeigehen zu lesen, klein genug, um dem Wind nicht die Schau zu
   stehlen. */
.wx-k-mittel { font-size: 19px; font-weight: 700; line-height: 1;
  color: var(--text2); font-variant-numeric: tabular-nums; }
/* Boeen stehen neben der Windzahl und nicht darunter: sie gehoeren zu
   ihr. Orange wird die Zahl nur, wenn es wirklich boeig ist. */
.wx-k-boe { font-size: 13.5px; color: var(--text3); white-space: nowrap; }
/* Die Boee ist auch eine Windgeschwindigkeit, also auch blau — aber
   Orange behaelt den Vortritt, wenn es wirklich boeig ist. Das ist eine
   Warnung, und eine Warnung schlaegt eine Sortierfarbe. */
.wx-k-boe b { color: var(--accent); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.wx-k-boe.boeig b { color: var(--orange); }

/* Zweite Zeile. Umbrechen statt abschneiden — „wechselnd bewölkt" passt
   schmal sonst nicht (das stand hier schon einmal mitten im Wort). */
.wx-k-unter { font-size: 12.5px; color: var(--text3); line-height: 1.35;
  overflow-wrap: anywhere; }
.wx-kopf > .wx-k-unter:last-child { text-align: right; }

/* Der Verlauf bekommt den Rest der Kachel — aber gedeckelt.
   `flex: 1` allein war zweimal falsch: bei EINER Spalte setzt display.js
   `grid-auto-rows: auto`, die Kachel waechst dann mit ihrem Inhalt, und
   „fuell den Rest" nutzt das bis zum Anschlag aus. Mit `max-height`
   zusammen stimmt beides: in der quadratischen Kachel fuellt er die
   Luecke, am Telefon bleibt die Kachel flach. */
.wx-tag-canvas { width: 100%; display: block;
  flex: 1 1 auto; min-height: 104px; max-height: 240px; }

/* Der Fuss: vier Angaben in einem festen 2x2-Raster, keine Flaeche
   darunter. Vorher war es eine umbrechende Zeile — der Umbruchpunkt
   wanderte mit der Breite, und „Sonne" stand mal hinter dem Druck und mal
   allein in einer zweiten Zeile. Zwei Spalten sind bei jeder Breite
   dieselben zwei Spalten, und die Werte stehen untereinander. */
.wx-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 12px; font-size: 12.5px; }
.wx-werte span { display: inline-flex; gap: 5px; min-width: 0;
  white-space: nowrap; }
.wx-werte i { font-style: normal; color: var(--text3); }
.wx-werte b { color: var(--text2); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* ── Wetterseite ─────────────────────────────────────────────────────
   ZURUECKGEHOLT aus 303ee15. Beim Neubau der Wetterkachel (dfd0de9) habe
   ich den CSS-Bereich bis zur naechsten Ueberschrift ersetzt — und darin
   standen ausser der Kachel auch die Detailseite und die Wetterorte in
   den Einstellungen. Beide waren seitdem voellig ohne Gestaltung: eine
   Spalte nackter Absaetze (Eignermeldung „komplett broken").

   Merke: nie einen CSS-Bereich „bis zur naechsten Ueberschrift" ersetzen.
   Dazwischen kann mehr stehen als die eine Sache, die man umbaut.

   Aus dem alten Kachelblock mitgeholt: `.wx-row` und `.wx-pfeil` standen
   dort, gebraucht werden sie von der Tagestabelle der Detailseite. */
.wx-row { display: flex; align-items: center; justify-content: center;
  gap: 3px; font-size: 12px; color: var(--text2); white-space: nowrap; }
.wx-pfeil { flex: none; }

.wx-seite { max-width: 820px; margin: 0 auto; width: 100%; }
.wx-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wx-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text2);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.wx-chip.aktiv { background: var(--accent); border-color: var(--accent); color: #04121c; }
html[data-zeiger="fein"] .wx-chip:not(.aktiv):hover { border-color: var(--accent); color: var(--text); }

.wx-jetzt { background: var(--surface); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; }
.wx-jetzt-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wx-jetzt-icon { line-height: 0; color: var(--text2); }
.wx-jetzt-ort { font-size: 18px; font-weight: 700; }
.wx-jetzt-quelle { font-size: 12px; color: var(--text3); }
/* auto-fit statt fester Spaltenzahl: auf dem Telefon stehen drei Felder
   nebeneinander, am Kioskbildschirm sieben — ohne zweite Regel. */
.wx-felder { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.wx-feld { background: var(--surface2); border-radius: 10px; padding: 8px 10px; }
.wx-feld-kopf { font-size: 11px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; }
.wx-feld-wert { font-size: 22px; font-weight: 700; line-height: 1.25;
  display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.wx-feld-wert small { font-size: 13px; font-weight: 600; color: var(--text2); }
.wx-feld-sub { font-size: 12px; color: var(--text2); }

.wx-block { background: var(--surface); border-radius: var(--radius);
  padding: 12px 14px 14px; margin-bottom: 14px; }
.wx-block-kopf { font-size: 12px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; margin-bottom: 8px; }
.wx-canvas { width: 100%; display: block; }
.wx-hinweis { font-size: 12px; color: var(--text3); margin-top: 6px; line-height: 1.45; }
.wx-leer { color: var(--text3); font-size: 13px; }
.wx-knopf { margin-top: 10px; }

/* Die Tagestabelle scrollt notfalls waagerecht IN ihrem Kasten — die
   Seite selbst darf das nie. */
.wx-tage { overflow-x: auto; }
.wx-tab { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.wx-tab th { font-size: 11px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; text-align: left; padding: 0 8px 6px 0; }
.wx-tab td { padding: 6px 8px 6px 0; border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums; }
.wx-tab-tag { font-weight: 700; }
.wx-tab-min, .wx-tab-bft { color: var(--text3); font-size: 12px; }

.wx-legenden { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wx-legende { font-size: 12px; color: var(--text2);
  display: inline-flex; align-items: center; gap: 5px; }
.wx-legende i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.wx-urteil { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.5; }


/* Fuss der Kachel: Punkte mittig, Modellname rechts. */
/* Punkte mittig, Modellname rechts, und links eine gleich breite leere
   Spalte — sonst schoebe der Name die Punkte aus der Mitte. */
.wx-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 6px; flex: none; }
.wx-quelle { justify-self: end; font-size: 10px; color: var(--text3);
  letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* ── wartung/wartung.css ── */
/* Wartungsplan — Kachel, Seite, Bearbeiten. Aus static/css/style.css (13.09.2026). */

/* ── Wartung ── (Fortschrittsleiste unter dem Titel + einspaltige Liste) ── */
.w-progress { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.w-prog-seg { border-radius: 3px; }
#wartungHomeBody { flex: 1; min-width: 0; }
/* half: nur die nächste Aufgabe */
.tile--half.card-wartung .w-home-row ~ .w-home-row { display: none; }

#wartungHomeBody { overflow: hidden; }

/* ── Wartungsplan ── */
@keyframes wblink { 0%,100%{opacity:1} 50%{opacity:.2} }
.w-blink { animation: wblink 1.1s ease-in-out infinite; }
.w-cat { margin-bottom: 12px; }
.w-cat-hd { display:flex; align-items:center; gap:8px; padding:12px 4px 8px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text2); border-bottom:2px solid; margin-bottom:2px; }
.w-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.w-task { display:flex; align-items:center; gap:10px; padding:11px 8px;
  border-bottom:1px solid var(--surface2); cursor:pointer; border-radius:6px; }
.w-task:hover { background:var(--surface2); }
.w-task:last-child { border-bottom:none; }
.w-task-name { flex:1; font-size:14px; }
.w-task-interval { font-size:11px; color:var(--text3); white-space:nowrap; }
.w-task-due { font-size:12px; font-weight:600; white-space:nowrap; text-align:right; min-width:80px; }
.w-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.w-home-row { display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--surface2); font-size:13px; }
.w-home-row:last-child { border-bottom:none; }
.w-home-badge { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.w-badge-pill { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
.w-home-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text2); white-space:nowrap; flex-shrink:0; padding:2px 5px; border-radius:4px; }

/* ── stauplan/stauplan.css ── */
/* Stauplan — Seite. Aus static/css/style.css (13.09.2026). */

/* ── Stauplan ── */
.stauplan-layout { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .stauplan-layout { grid-template-columns: 1fr; } }
.stauplan-fach { cursor: pointer; transition: fill .18s, stroke .18s; }
.stauplan-fach:hover:not(.sp-sel) { fill: rgba(255,255,255,0.07) !important; }
.stauplan-fach.sp-sel { stroke-width: 2.5 !important; }
.sp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.stauplan-right { display: flex; flex-direction: column; gap: 10px; }
.stauplan-filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; }
.stauplan-filter-label { font-weight: 600; flex: 1; }
.stauplan-clear-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.stauplan-clear-btn:hover { background: var(--surface2); color: var(--text); }
.stauplan-search { width: 100%; box-sizing: border-box; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; margin-bottom: 12px; outline: none; }
.stauplan-search:focus { border-color: var(--accent); }
.stauplan-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.stauplan-tbl th { text-align: left; padding: 7px 10px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--border); }
.stauplan-tbl td { padding: 10px; border-bottom: 1px solid var(--surface2); }
.stauplan-tbl tr:last-child td { border-bottom: none; }
.stauplan-tbl tbody tr:hover td { background: var(--surface2); }
.stauplan-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 20px; color: #fff; font-weight: 600; white-space: nowrap; }

/* ── monday/monday.css ── */
/* Aufgaben (Monday) — Seite. Aus static/css/style.css (13.09.2026). */

/* ── Monday overlay ── */
.monday-body { max-width: 860px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 0; }
.monday-group-hd { display: flex; align-items: center; gap: 9px; padding: 20px 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); border-bottom: 2px solid var(--border); margin-bottom: 2px; }
.monday-group-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.monday-item { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--surface2); cursor: default; }
.monday-item:last-child { border-bottom: none; }
.monday-item-name { flex: 1; font-size: 14px; line-height: 1.4; }
.monday-status-pill { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px; cursor: pointer; white-space: nowrap; color: #fff; flex-shrink: 0; transition: filter .15s; letter-spacing: .02em; }
.monday-status-pill:hover { filter: brightness(1.15); }
.monday-status-pill.empty { background: var(--surface2) !important; color: var(--text3); }
.monday-empty { color: var(--text3); font-size: 13px; text-align: center; padding: 48px 0; }
.monday-refresh { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text2); padding: 5px 12px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.monday-refresh:hover { background: var(--surface2); }
.monday-refresh svg { transition: transform .5s; }
.monday-refresh.spinning svg { transform: rotate(360deg); }
.status-picker { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 300; min-width: 170px; overflow: hidden; }
.status-picker-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 500; }
.status-picker-item:hover { background: var(--surface2); }
.status-picker-dot { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }