/* ── 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; }
.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); }

/* 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; }


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

/* ── Verlauf ───────────────────────────────────────────────────────────────
 *
 * Zwei Achsen, bis zu zehn Raumkurven plus Vorlauf. Hochkant zuerst: die
 * Spannenknoepfe rutschen unter die Ueberschrift, statt sie zu quetschen,
 * und die Legende bricht um. Ein Graph, der auf 390 Pixeln seine Beschriftung
 * verliert, ist keine Auskunft.
 */
.hz-spannen { display: flex; gap: 6px; margin-left: auto; align-items: center;
              overflow-x: auto; scrollbar-width: none; }
.hz-spannen::-webkit-scrollbar { display: none; }
.hz-laedt { font-size: 11px; color: var(--text3); white-space: nowrap; }

.hz-legende { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 8px; }
/* Antippen waehlt eine Kurve ab. Vier Linien auf einem Telefon liest man,
   indem man die wegnimmt, die gerade nicht gefragt sind. */
.hz-leg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
          background: none; border: none; padding: 2px 0; font: inherit;
          font-size: 12px; color: var(--text2); }
.hz-leg .strich { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.hz-leg i { font-style: normal; font-size: 10.5px; color: var(--text3);
            letter-spacing: .02em; }
.hz-leg.aus { color: var(--text3); }
.hz-leg.aus .strich { opacity: .3; }
.hz-leg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hz-graph { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
            /* Senkrecht rollt die Seite, alles andere gehoert dem Graphen:
               Cursor ziehen, zoomen, verschieben. */
            touch-action: pan-y; cursor: crosshair; transition: opacity .15s; }
/* Waehrend eine neue Spanne laedt, steht die alte blass da — statt zu
   verschwinden und wiederzukommen. */
.hz-graph.hz-alt { opacity: .35; }
/* Der Wert in der Legende hat eine feste Breite: beim Ziehen rueckt nichts. */
.hz-leg-wert { display: inline-block; text-align: right; font-weight: 700;
               font-variant-numeric: tabular-nums; color: var(--text); }
/* Nur die Farbe, nicht die Schriftstaerke — sonst aendert sich die Breite. */
.hz-leg.aus .hz-leg-wert { color: var(--text3); }
/* Die Hoehe gibt das FELD vor, der Canvas fuellt es (ResizeObserver in
   heizung.js zeichnet nach). Am Tablet waechst das Feld mit der Raumspalte
   daneben, siehe .hzd. */
.hz-graph-feld { position: relative; height: 210px; }
@media (min-width: 760px) { .hz-graph-feld { height: 300px; } }
.hz-zurueck { position: absolute; left: 44px; top: 4px; }
.hz-graph-leer { position: absolute; inset: 0; display: flex; align-items: center;
                 justify-content: center; text-align: center; padding: 0 16px;
                 color: var(--text3); font-size: 13px; pointer-events: none; }
.hz-graph-leer:empty { display: none; }

/* ── Detailseite (29.10.2026) ────────────────────────────────────────────
 *
 * Am Tablet ein Bildschirm: Kopfleiste, darunter links der Verlauf und
 * rechts Raeume und Riss, unten die Fusszeile. Am Telefon untereinander,
 * Bedienung zuerst. Alle Felder, deren Text beim Bedienen wechselt, haben
 * feste Breiten (Eignerregel: beim Bedienen verschiebt sich nichts).
 */
.hzd { max-width: 1500px; margin: 0 auto; display: grid; gap: var(--gap);
       grid-template-columns: minmax(0, 1fr); }
.hzd > .sb-card { margin-bottom: 0; padding: 12px 16px; min-width: 0; }
.hzd-titel { font-size: 12px; font-weight: 700; letter-spacing: .07em;
             text-transform: uppercase; color: var(--text2); }
.hzd-neben { font-size: 12px; color: var(--text3); }
.hzd-kopfzeile { display: flex; align-items: baseline; gap: 10px; padding-bottom: 4px; }
.hzd-l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
         color: var(--text2); white-space: nowrap; }
.hzd-gelb { color: var(--yellow); }
.hzd-rot  { color: var(--red); }
.hzd-weg .hzd-betrieb, .hzd-weg .hzd-profil, .hzd-weg .hzd-zahlen { opacity: .45; }

/* Segmentschalter: die Schrift bleibt in jedem Zustand gleich stark — sonst
   aendert sich die Breite des Knopfes beim Antippen. */
.hzd-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px;
           background: var(--bg); border: 1px solid var(--border); }
.hzd-seg button { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  height: 38px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text2); white-space: nowrap; }
.hzd-seg button.an { background: var(--accent); color: var(--bg); }
.hzd-seg button:disabled { opacity: .5; cursor: default; }
.hzd-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hzd-seg-klein { border-radius: 9px; padding: 2px; gap: 2px; }
.hzd-seg-klein button { height: 30px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.hzd-seg-klein button.an { background: var(--border); color: var(--text); }

/* Kopf */
.hzd-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hzd-zustand { flex: none; width: 214px; display: flex; flex-direction: column; gap: 2px; }
.hzd-zustand-oben { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.hzd-punkt { width: 10px; height: 10px; border-radius: 50%; align-self: center; flex: none; }
.hzd-zustand-text { font-size: 22px; font-weight: 700; line-height: 1.1; }
.hzd-seit { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.hzd-zeile2 { height: 32px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; color: var(--text2); overflow: hidden; }
/* Ein langer Text (die Verfuegbarkeit des Heizgeraets ist ein ganzer Satz)
   darf zwei Zeilen nehmen — die Hoehe ist fuer zwei bemessen. */
.hzd-zeile2 > span:first-child { overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hzd-gruppe { display: flex; flex-direction: column; gap: 5px; }
.hzd-zahlen { margin-left: auto; display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.hzd-zahl { display: flex; flex-direction: column; gap: 3px; }
.hzd-v { font-size: 19px; font-weight: 700; white-space: nowrap; }
.hzd-vorlauf .hzd-v { color: var(--orange); }
/* Breiter als der laengste moegliche Wert: "100.0°", "100 %", "4 Räume",
   "12 h 59 min", "99". */
.hzd-vorlauf { min-width: 3.3em; } .hzd-leistung { min-width: 3.3em; }
.hzd-bedarf { min-width: 4.4em; }  .hzd-heute { min-width: 5.9em; }
.hzd-starts { min-width: 2.6em; }

/* Verlauf */
.hzd-verlauf { display: flex; flex-direction: column; }
.hzd-verlauf-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hzd-quelle { font-size: 11px; color: var(--text3); white-space: nowrap; }
.hzd-verlauf .hz-legende { margin: 10px 0 6px; }

/* Raeume */
.hzd-raeume { display: flex; flex-direction: column; container-type: inline-size; }
.hzd-raeume > .hzd-raum:first-child { border-top: 0; padding-top: 0; }
.hzd-raum { display: grid; align-items: center; column-gap: 10px; row-gap: 8px;
  grid-template-columns: 10px minmax(0, 1fr) auto 4.3em auto 36px;
  grid-template-areas: "farbe name chip ist soll soll" "fan fan fan fan fan an";
  padding: 6px 0; row-gap: 6px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.hzd-farbe { grid-area: farbe; width: 9px; height: 9px; border-radius: 3px; }
.hzd-name  { grid-area: name; font-size: 15px; font-weight: 650; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fest so breit wie der laengste Chip ("will Wärme", "verbindet"). */
.hzd-chip  { grid-area: chip; width: 6.4em; display: flex; justify-content: flex-end;
             font-size: 11px; }
.hzd-chip i { font-style: normal; font-weight: 700; white-space: nowrap;
              padding: 3px 8px; border-radius: 999px; }
.hzd-chip .warm { color: var(--yellow); background: rgba(234, 179, 8, .13); }
.hzd-chip .grau { color: var(--text3); background: var(--surface2); }
.hzd-chip .rot  { color: var(--red); background: rgba(239, 68, 68, .13); }
.hzd-ist   { grid-area: ist; font-size: 26px; font-weight: 700; text-align: right;
             white-space: nowrap; }
.hzd-soll  { grid-area: soll; display: flex; align-items: center; border-radius: 12px;
             background: var(--bg); border: 1px solid var(--border); }
.hzd-soll span { width: 4.2em; text-align: center; font-size: 15px; font-weight: 700; }
.hzd-soll button { font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1;
  width: 42px; height: 40px; border: 0; background: transparent; color: var(--text);
  cursor: pointer; border-radius: 12px; }
.hzd-soll button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hzd-fan   { grid-area: fan; display: flex; align-items: center; gap: 7px; min-width: 0;
             font-size: 12px; color: var(--text2); white-space: nowrap; }
.hzd-fan b { color: var(--text); font-weight: 600; }
.hzd-fan-icon { display: flex; color: var(--text3); }
.hzd-pct { min-width: 2.9em; text-align: right; }
.hzd-vor { min-width: 6.7em; }
.hzd-rf  { min-width: 3.9em; }
.hzd-regler { flex: 1; min-width: 60px; }
.hzd-an { grid-area: an; justify-self: end; }
.hzd-raum.aus .hzd-ist, .hzd-raum.aus .hzd-soll, .hzd-raum.aus .hzd-fan { opacity: .5; }
.hzd-raum.kalt .hzd-ist { color: var(--text3); }

/* Riss */
.hzd-riss { display: flex; flex-direction: column; gap: 6px; }
.hzd-riss-feld { position: relative; }
.hzd-riss-feld svg { display: block; width: 100%; height: auto; }
/* Wie in der Stoker-Oberflaeche (stoker-36): kraeftig ist nur der Rumpf, jeder
   Raum ist seine eckige Flaeche mit feiner Linie, darin eine Kachel mit runden
   Ecken. Beheizte Raeume tragen den Rand in der Farbe ihrer Kurve im Verlauf,
   ein Hinweis zum Raumklima faerbt ihn gelb. */
.hzd-linie { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hzd-linie.rumpf { fill: var(--bg); stroke: none; }
.hzd-linie.rand  { stroke: var(--text2); stroke-width: 1.5; }
.hzd-linie.innen { stroke: var(--border); stroke-width: 1; }
.hzd-linie.mitte { stroke: var(--border); stroke-width: 1; stroke-dasharray: 5 5; }
.hzd-linie.wand  { stroke: var(--text3); stroke-width: 1.5; }
/* Ohne eigene Kante zeichnet der Hub den Rumpf als einzige Linie. */
.hzd-riss-feld svg:not(:has(.rand)) .hzd-linie.rumpf { stroke: var(--text2); stroke-width: 1.5; }
.hzd-raum-flaeche { fill: var(--bg); stroke: var(--border); stroke-width: 1;
                    vector-effect: non-scaling-stroke; }
.hzd-raum-kachel  { fill: var(--surface2); stroke: var(--border); stroke-width: 1;
                    vector-effect: non-scaling-stroke; }
.hzd-raumkachel.beheizt .hzd-raum-kachel { stroke: var(--raumfarbe); stroke-width: 1.5; }
.hzd-raumkachel.warn .hzd-raum-kachel { stroke: var(--yellow); stroke-width: 1.5; }
.hzd-raumkachel:not(.hat) .hzd-raum-kachel { fill: var(--surface); }
.hzd-r-name { fill: var(--text); font-weight: 600; }
.hzd-raumkachel:not(.hat) .hzd-r-name { fill: var(--text2); }
.hzd-r-wert { fill: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hzd-r-wert .einheit { fill: var(--text2); font-weight: 600; }
.hzd-r-wert .feuchte { fill: var(--text2); font-weight: 500; }
.hzd-raumkachel:not(.hat) .hzd-r-wert { fill: var(--text3); font-weight: 600; }
.hzd-raumkachel.warn .hzd-r-wert .feuchte { fill: var(--yellow); }
.hzd-r-soll { fill: var(--text2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hzd-riss-fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.hzd-riss-fuss b { color: var(--text); font-weight: 600; }
.hzd-riss-fuss .hzd-neben { margin-left: auto; }

/* Fuss */
.hzd-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 0 4px; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.hzd-fuss:empty { display: none; }
.hzd-hinweise { margin-left: auto; display: flex; align-items: center; gap: 8px;
  color: var(--yellow); min-width: 0; }
.hzd-hinweise b { white-space: nowrap; padding: 3px 9px; border-radius: 999px;
  background: rgba(234, 179, 8, .13); }

/* Tablet und breiter: zwei Spalten, der Verlauf so hoch wie die Spalte
   daneben. */
@media (min-width: 1000px) {
  .hzd { grid-template-columns: minmax(0, 1fr) minmax(430px, 42%);
         grid-template-areas: "kopf kopf" "verlauf raeume" "verlauf riss" "fuss fuss";
         grid-template-rows: auto auto 1fr auto; }
  .hzd-kopf { grid-area: kopf; } .hzd-verlauf { grid-area: verlauf; }
  .hzd-raeume { grid-area: raeume; } .hzd-riss { grid-area: riss; }
  .hzd-fuss { grid-area: fuss; }
  .hzd-verlauf .hz-graph-feld { flex: 1; height: auto; min-height: 260px; }
}
/* Zwischen 1000 und 1199 waere ein Anteil zu schmal fuer Name, Chip, Ist und
   Soll in einer Zeile — dort steht die Raumspalte fest. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hzd { grid-template-columns: minmax(0, 1fr) 470px; }
}

/* Drei Zeilen je Raum nur, wo die Karte wirklich schmal ist (Telefon). Bis
   zum 30.10.2026 hing das am FENSTER (< 700 px) — ein Wandtablet, das hochkant
   rund 600 px meldet, bekam so die Telefonansicht mit viel leerem Platz. */
@container (max-width: 459px) {
  .hzd-raum { grid-template-columns: 10px minmax(0, 1fr) auto auto;
              grid-template-areas: "farbe name chip ist" "soll soll soll an" "fan fan fan fan"; }
  .hzd-soll { justify-self: start; }
  .hzd-ist { font-size: 24px; }
  .hzd-rf { display: none; }
}

/* Ist die Raumkarte breit genug, steht jeder Raum in EINER Zeile
   (Eignerwunsch 30.10.2026: am Wandtablet hochkant war in den zweizeiligen
   Raeumen viel ungenutzter Platz). Gemessen an der Karte, nicht am Fenster:
   so greift es hochkant am Tablet wie an einem sehr breiten Schirm. */
@container (min-width: 700px) {
  .hzd-raum { grid-template-columns: 10px minmax(90px, 1fr) auto 4.3em auto auto 36px;
              grid-template-areas: "farbe name chip ist soll fan an"; column-gap: 8px; }
  .hzd-raeume > .hzd-raum:first-child { padding-top: 0; }
  .hzd-soll { grid-column: auto; }
}
/* Hochkant am Tablet (Karte um 740 breit) reicht die Zeile nicht auch noch
   fuer den Vorlauf je Raum — der faellt dort weg, Geblaese, Ist und Soll
   bleiben. Ab 840 steht er wieder da. */
@container (min-width: 700px) and (max-width: 839px) { .hzd-vor { display: none; } }

/* Schmaler als 1200: die Raumspalte reicht nicht fuer Geblaese, Vorlauf UND
   Feuchte neben dem Schalter. Die Feuchte steht ohnehin im Riss. */
@media (max-width: 1199px) { .hzd-rf { display: none; } }

/* Einspaltig: was man bedient, vor dem, was man liest. */
@media (max-width: 999px) {
  .hzd-raeume { order: 1; } .hzd-verlauf { order: 2; }
  .hzd-riss { order: 3; }   .hzd-fuss { order: 4; }
}

/* Telefon: alles untereinander, Segmentschalter ueber die ganze Breite. */
@media (max-width: 700px) {
  .hzd-quelle { display: none; }
  .hzd-verlauf-kopf .hz-spannen { gap: 4px; }
  .hzd-verlauf-kopf .hz-preset { padding: 6px 8px; }
  .hzd > .sb-card { padding: 12px; }
  .hzd-kopf { gap: 10px; }
  .hzd-zustand { width: 100%; }
  .hzd-gruppe { width: 100%; }
  .hzd-gruppe .hzd-l { display: none; }
  .hzd-gruppe .hzd-seg button { flex: 1; padding: 0 6px; }
  .hzd-zahlen { margin-left: 0; width: 100%; display: grid; gap: 8px;
                grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hzd-zahlen .hzd-zahl { min-width: 0; }
  .hzd-zahlen .hzd-v { font-size: 15px; }
  .hzd-zahlen .hzd-l { font-size: 9.5px; letter-spacing: .04em; }
  .hzd-verlauf .hz-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .hzd-hinweise { margin-left: 0; }
}

/* ── 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; }

/* ── Barometer (30.10.2026) ─────────────────────────────────────────────── */
.card-baro { display: flex; flex-direction: column; }
/* Der Graph waechst mit der Kachel: in der Startseite ist ihre Hoehe fest. */
.baro-koerper { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.baro-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-variant-numeric: tabular-nums; }
.baro-wert b { font-size: 30px; font-weight: 700; color: var(--text); }
.baro-wert small { font-size: 13px; color: var(--text2); }
/* Feste Breite: "gleichbleibend" ist der laengste Text — wechselt die Tendenz,
   rueckt nichts. */
.baro-tendenz { flex: none; width: 13.5em; text-align: right; font-size: 13px; color: var(--text2);
  white-space: nowrap; }
.baro-tendenz b { color: var(--text); font-weight: 700; }
.baro-tendenz small { font-size: 11px; color: var(--text3); }
.baro-tendenz.gelb, .baro-tendenz.gelb b { color: var(--yellow); }
.baro-tendenz.rot,  .baro-tendenz.rot b  { color: var(--red); }
.baro-graph { flex: 1; display: flex; flex-direction: column; min-height: 96px; }
.baro-feld { position: relative; flex: 1; min-height: 80px; padding-right: 34px; }
.baro-graph svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0 34px 0 0;
  width: calc(100% - 34px); }
.baro-skala span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10.5px;
  color: var(--text3); font-variant-numeric: tabular-nums; }
.baro-raster { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.baro-jetzt { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.baro-messung { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; }
.baro-modell { fill: none; stroke: var(--text2); stroke-width: 1.5; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke; }
.baro-achse { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text3);
  margin-top: 2px; margin-right: 34px; }
.baro-fuss { font-size: 11.5px; color: var(--text3); min-height: 1.3em; }

/* ── 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 — eine Liste, kein Bild.
 *
 * Hier stand bis zum 25.10.2026 der Grundriss des Bootes links neben der
 * Liste. Er ist raus, auf Eignerentscheidung: ein Riss, der das Boot nicht
 * trifft, hilft beim Suchen nicht — er irritiert. Von den Raeumen bleiben
 * Name und Farbe, und die tragen die Streifen an den Karten und die Reihe
 * der Filterknoepfe.
 *
 * Zwei Reihen Filterknoepfe, und sie wirken ZUSAMMEN: Zustand und Besitz
 * oben, Raum und Kategorie darunter. Eine leere Reihe verschwindet (:empty),
 * sonst stuende auf einem frischen Boot eine Luecke ueber der Liste.
 *
 * Hochkant zuerst. Tabellen gibt es keine: vier Spalten auf 400 Pixel sind
 * keine Tabelle, sondern vier abgeschnittene Spalten.
 */

.stau-seite { display: flex; flex-direction: column; gap: 12px;
              padding: 12px; max-width: 46rem; margin: 0 auto; }

/* ── Suchen und Filtern ───────────────────────────────────────────────── */
.stau-suche { width: 100%; box-sizing: border-box; padding: 11px 14px;
              background: var(--surface); border: 1px solid var(--border);
              border-radius: 10px; color: var(--text); font-size: 16px;
              outline: none; }
/* 16px und nicht kleiner: alles darunter laesst iOS beim Hineintippen in das
   Feld zoomen, und danach steht die Seite schief. */
.stau-suche:focus { border-color: var(--accent); }

.stau-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
              scrollbar-width: none; }
.stau-chips::-webkit-scrollbar { display: none; }
.stau-chips:empty { display: none; }
.stau-chip { flex: none; display: inline-flex; align-items: center; gap: 6px;
             padding: 7px 12px; border-radius: 999px; font-size: 13px;
             background: var(--surface); border: 1px solid var(--border);
             color: var(--text2); cursor: pointer; white-space: nowrap; }
.stau-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
                                  color: var(--bg); font-weight: 600; }
.stau-chip .punkt { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.stau-chip .zahl { font-variant-numeric: tabular-nums; opacity: .75; }

/* ── Die Liste ────────────────────────────────────────────────────────── */
.stau-liste { display: flex; flex-direction: column; gap: 8px; }
.stau-karte { display: grid; grid-template-columns: 3px 1fr auto; gap: 0 12px;
              align-items: start; background: var(--surface);
              border: 1px solid var(--border); border-radius: 12px;
              padding: 11px 13px 11px 0; cursor: pointer; overflow: hidden;
              text-align: left; width: 100%; font: inherit; color: inherit; }
.stau-karte:hover { border-color: var(--accent); }
/* Der Streifen traegt die Farbe des Faches. Ein ganzer Rahmen in Fachfarbe
   waere lauter als die Sache ist — die Farbe soll zuordnen, nicht rufen. */
.stau-karte .streifen { grid-row: 1 / -1; align-self: stretch;
                        background: var(--border); border-radius: 3px 0 0 3px; }
.stau-karte .name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.stau-karte .wo { display: block; color: var(--text3); font-size: 12.5px; margin-top: 3px;
                  overflow-wrap: anywhere; }
/* Besitz und Kategorie: eine Zeile, leiser als der Ort. Sie ordnet ein,
   sie sucht nicht. */
.stau-karte .art { display: block; color: var(--text3); font-size: 12px; margin-top: 3px;
                   letter-spacing: .02em; }
.stau-karte .menge { display: flex; flex-direction: column; align-items: flex-end;
                     font-variant-numeric: tabular-nums; color: var(--text2);
                     font-size: 13.5px; white-space: nowrap; padding-top: 1px; }
/* "4 Stk" und darunter "von 6" — der Bestand gegen das Soll, ohne dass man
   die Karte dafuer aufmachen muss. */
.stau-karte .menge .soll { color: var(--text3); font-size: 11.5px; margin-top: 2px; }
.stau-karte .notiz { display: block; color: var(--text3); font-size: 12.5px; margin-top: 4px;
                     overflow-wrap: anywhere; }

.stau-marke { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
              margin-right: 5px;
              font-size: 11.5px; font-weight: 600; padding: 2px 8px;
              border-radius: 999px; white-space: nowrap; }
.stau-marke.ab   { background: rgba(239,68,68,.16);  color: #fca5a5; }
.stau-marke.bald { background: rgba(234,179,8,.16);  color: #fde047; }
.stau-marke.gut  { background: var(--surface2);      color: var(--text3); }
.stau-marke.knapp { background: rgba(249,115,22,.16); color: #fdba74; }

.stau-leer { color: var(--text3); text-align: center; padding: 28px 12px;
             font-size: 14px; }

/* Breite Schirme: die Spalte bleibt lesbar schmal statt sich zu dehnen —
   eine Zeile ueber die ganze Breite eines Laptops liest niemand gern. */
@media (min-width: 760px) {
  .stau-seite { padding: 20px 16px; gap: 14px; }
  .stau-karte .name { font-size: 15.5px; }
}

/* ── Das Blatt zum Bearbeiten ─────────────────────────────────────────── */
.stau-feld { display: flex; flex-direction: column; gap: 4px; }
.stau-feld > label { font-size: 11px; color: var(--text3);
                     text-transform: uppercase; letter-spacing: .06em; }
.stau-feld input, .stau-feld select, .stau-feld textarea {
  width: 100%; box-sizing: border-box; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  color: var(--text); font-size: 16px; outline: none; font-family: inherit; }
.stau-feld input:focus, .stau-feld select:focus, .stau-feld textarea:focus {
  border-color: var(--accent); }
.stau-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stau-hinweis { font-size: 11.5px; color: var(--text3); margin-top: -2px; }
.stau-knoepfe { display: flex; gap: 8px; margin-top: 6px; }
.stau-knoepfe button { flex: 1; border-radius: 10px; padding: 12px;
                       font-size: 15px; cursor: pointer; font-family: inherit; }
.stau-prim { background: var(--accent); color: var(--bg); border: none; font-weight: 700; }
.stau-sek  { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.stau-weg  { flex: none !important; background: var(--surface2);
             color: var(--red, #ef4444); border: 1px solid var(--border);
             padding: 12px 15px !important; }

/* ── 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; }