/* ==========================================================================
   BAUSTEINE — die Dinge, aus denen jede Seite zusammengesetzt ist.

   Alle Klassennamen sind die BESTEHENDEN. Das Programm baut sein HTML seit
   Monaten mit .karte, .knopf, .meldung, .tor. Wer die Namen ändert, muss
   fünfzehn Dateien nachziehen und übersieht drei davon. Geändert wird das
   Aussehen, nicht das Vokabular.

   NICHT ALLES IST EINE KARTE
   --------------------------
   Rahmen, Füllung, Rundung und Schatten sagen alle vier dasselbe: „ich bin
   ein eigenes Ding". Vorher trug jeder Block alle vier — dadurch stand
   alles gleich laut nebeneinander, und genau das ist der Eindruck einer
   Ansammlung. Jetzt gilt:

     .karte       Rahmen + Schatten. Ein eigenständiger Abschnitt.
     .teilkarte   nur eine Linie darüber. Ein Schritt INNERHALB einer Karte.
     .stapel      gar nichts. Nur Abstand zwischen Geschwistern.
   ========================================================================== */

/* --- Abstand zwischen allem, was untereinander steht --------------------- */
section{display:flex; flex-direction:column; gap:var(--a4)}
.stapel{display:flex; flex-direction:column; gap:var(--a4)}

/* --- Karte -------------------------------------------------------------- */
.karte{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-gross); padding:var(--a5) 24px;
  box-shadow:var(--schatten);
  transition:border-color var(--tempo) ease;
}
/* KEIN Flex-Kasten. Eine Karte enthält Text, Tabellen UND einzelne Knöpfe;
   in einer Flex-Spalte würde ein Knopf über die ganze Breite gezogen, weil
   Flex seine Kinder standardmäßig streckt. Stattdessen bekommt jedes
   Geschwisterkind einen Abstand nach oben — das wirkt gleich, ohne die
   Anzeigeart der Kinder zu verändern. */
.karte>*+*{margin-top:var(--a3)}
.karte>h2+*{margin-top:var(--a2)}
.karte:hover{border-color:var(--line-stark)}
.karte>h2{display:flex; align-items:baseline; gap:var(--a2); flex-wrap:wrap}
/* Eine Zwischenüberschrift IN einer Karte: eine Abteilung hat Punkte, ein
   Punkt hat Schritte. Sie darf nicht wie eine eigene Karte aussehen. */
.karte h3{
  font-size:var(--gr-h3); font-weight:600;
  padding-top:var(--a4); border-top:1px solid var(--line);
}
.karte h3:first-of-type{border-top:0; padding-top:0}
.karte h3.schritt{border-top:0; padding-top:0}

/* Teilkarte: KEIN Rahmen, KEIN Schatten. Ein Kasten im Kasten sieht aus wie
   zwei gleichrangige Dinge — getrennt wird mit einer Linie. */
.karte.teilkarte, .teilkarte{
  border:0; background:none; padding:0; margin:0; border-radius:0; box-shadow:none;
}
.teilkarte+.teilkarte, .teilkarte~.teilkarte{
  border-top:1px solid var(--line); padding-top:var(--a5);
}
.teilkarte h3.schritt{font-size:var(--gr-h3); font-weight:600; margin:0; padding:0; border:0}
.teilkarte.offen{margin-top:0; border-top:0; padding-top:0}

/* Schublade. Nur für wirklich Nachrangiges — nicht als Ordnungsmittel für
   alles, sonst versteckt die Seite ihren eigenen Inhalt. */
details.karte>summary,
details.teilkarte>summary{
  cursor:pointer; list-style:none; display:flex; align-items:flex-start;
  gap:var(--a3); user-select:none;
}
details.karte>summary::-webkit-details-marker,
details.teilkarte>summary::-webkit-details-marker{display:none}
details.karte>summary::before,
details.teilkarte>summary::before{
  content:"▸"; color:var(--muted); font-size:13px; display:inline-block;
  transition:transform .15s ease; margin-top:3px; flex:0 0 auto;
}
details[open]>summary::before{transform:rotate(90deg)}
details.karte>summary h2{margin:0}
details.karte>summary:hover h2{color:var(--ink2)}
details.karte[open]>summary{margin-bottom:var(--a3)}
details.teilkarte>summary h2{font-size:var(--gr-h3); font-weight:600}
details.teilkarte>summary h2 .schub-was{
  display:block; font-size:var(--gr-klein); font-weight:400; color:var(--muted); margin-top:1px;
}

/* --- Knöpfe ------------------------------------------------------------
   Drei Stufen, und nur EINE Haupthandlung je Karte. Wenn alles ein
   Volltonknopf ist, ist nichts der nächste Schritt.
   Mindesthöhe 44px: Das ist die Fläche, die ein Daumen sicher trifft. */
.knopf{
  font-family:inherit; font-size:var(--gr-text); font-weight:600;
  min-height:44px; padding:10px 20px; border-radius:var(--r-mittel);
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--a2); transition:opacity var(--tempo) ease, background var(--tempo) ease;
}
.knopf:hover{opacity:.88}
.knopf:disabled{background:var(--line); border-color:var(--line); color:var(--muted); cursor:default; opacity:1}
.knopf.zweit{background:var(--feld); color:var(--ink); border-color:var(--line-stark)}
.knopf.zweit:hover{background:var(--gold-bg); border-color:var(--gold-linie); opacity:1}
.knopf.stille{background:none; border-color:transparent; color:var(--ink2); font-weight:500}
.knopf.stille:hover{background:var(--gold-bg); opacity:1}
/* „gefahr" heißt: schwer rückgängig zu machen. Sie ist rot umrandet, aber
   nicht rot gefüllt — ein gefüllter roter Knopf lädt zum Klicken ein. */
.knopf.gefahr{background:var(--feld); color:var(--fehler); border-color:var(--fehler)}
.knopf.gefahr:hover{background:var(--fehler-bg); opacity:1}

.loeschen{
  margin-left:auto; background:none; border:0; font-family:inherit;
  font-size:var(--gr-neben); color:var(--muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  padding:2px 4px; border-radius:var(--r-klein);
}
.loeschen:hover{color:var(--fehler); background:var(--fehler-bg)}
.mehr{
  margin-top:var(--a3); font-size:var(--gr-neben); color:var(--muted); cursor:pointer;
  background:none; border:0; padding:6px 0; font-family:inherit; text-align:left;
}
.mehr:hover{color:var(--ink); text-decoration:underline}

/* --- Felder ------------------------------------------------------------- */
label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink2)}
input[type=month],input[type=text],input[type=number],input[type=date],
input[type=password],select,textarea{
  font-family:inherit; font-size:var(--gr-text); padding:10px 12px; min-height:44px;
  border:1px solid var(--line-stark); border-radius:var(--r-mittel);
  background:var(--feld); color:var(--ink); width:200px;
  transition:border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--gold-linie)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg);
}
input[type=file]{font-family:inherit; font-size:var(--gr-neben)}
/* Eine Formularzeile. Die Spalten stehen OBEN bündig, nicht unten:
   Sie sind verschieden hoch (eine hat nur ein Feld, die daneben ein Feld
   und einen Knopf darunter). Bei unten-bündig rutschte die kurze Spalte
   nach unten und ihre Beschriftung schwebte irgendwo in der Mitte — das
   war der schiefe Eindruck vom 03.09.2026. Oben bündig heisst: alle
   Beschriftungen stehen auf einer Linie.

   Ein Knopf, der DIREKT in der Zeile steht (nicht in einer Spalte), gehört
   dagegen nach unten — er soll auf der Höhe der Felder sitzen, nicht auf
   der Höhe der Beschriftungen. */
.zeile{display:flex; gap:var(--a3); align-items:flex-start; flex-wrap:wrap}
.zeile>div{display:flex; flex-direction:column; gap:6px}
.zeile label{margin-bottom:0}
.zeile>.knopf{align-self:flex-end}
.vorgangskopf{
  display:flex; gap:var(--a3); align-items:center; flex-wrap:wrap;
  padding-bottom:var(--a4); border-bottom:1px solid var(--line);
}
.vorgangskopf select{flex:1 1 240px; min-width:0}
@media (max-width:560px){ .vorgangskopf select{flex-basis:100%} }

.ablage{
  border:1.5px dashed var(--line-stark); border-radius:var(--r-gross);
  padding:26px; text-align:center; color:var(--muted); cursor:pointer;
  background:var(--feld-still); transition:.15s;
}
.ablage:hover,.ablage.drueber{border-color:var(--gold); background:var(--gold-bg); color:var(--gold)}
.holen{display:flex; gap:var(--a2); flex-wrap:wrap; margin-top:var(--a3)}
.holen .knopf{flex:1 1 160px}
.holen svg{flex-shrink:0}

/* --- Filterleiste ------------------------------------------------------- */
.filter{
  display:flex; gap:var(--a3); flex-wrap:wrap; align-items:flex-end;
  background:var(--feld-still); border:1px solid var(--line);
  border-radius:var(--r-gross); padding:var(--a4);
}
.filter .feld{display:flex; flex-direction:column; gap:5px}
.filter label{
  font-size:var(--gr-mini); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:0;
}
.filter select,.filter input[type=text]{width:auto; min-width:150px}
.filter .suchfeld{flex:1 1 200px}
.filter .suchfeld input{width:100%}
.filter .zuruecksetzen{
  margin-left:auto; background:none; border:0; font-family:inherit;
  font-size:var(--gr-neben); color:var(--muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:8px 4px;
}
.filter .zuruecksetzen:hover{color:var(--ink)}
.treffer{font-size:var(--gr-neben); color:var(--muted)}
.treffer strong{color:var(--ink)}

/* --- Meldungen: was gerade passiert ist ---------------------------------
   Jede trägt links einen Streifen in ihrer Farbe UND ein Zeichen. Wer die
   Farbe nicht unterscheiden kann, liest das Zeichen. */
.meldung{
  padding:var(--a3) var(--a4); border-radius:var(--r-mittel);
  font-size:var(--gr-neben); border-left:3px solid transparent;
  display:flex; gap:var(--a2); align-items:flex-start;
}
.meldung::before{font-weight:700; flex:0 0 auto}
.meldung.gut{background:var(--fertig-bg); color:var(--fertig); border-left-color:var(--fertig)}
.meldung.gut::before{content:"✓"}
.meldung.schlecht{background:var(--fehler-bg); color:var(--fehler); border-left-color:var(--fehler)}
.meldung.schlecht::before{content:"!"}
.meldung.neutral{background:var(--wartet-bg); color:var(--wartet); border-left-color:var(--wartet)}
.meldung.neutral::before{content:"i"}
.bald{color:var(--muted); font-size:var(--gr-neben); background:var(--feld-still);
      border:1px dashed var(--line); border-radius:var(--r-gross); padding:var(--a4) 18px}

/* --- Marken (kleine Zustandschips) -------------------------------------- */
/* NAMENSKOLLISION, TEUER BEZAHLT AM 03.09.2026:
   Hier stand einmal '.klaeren' mit in dieser Reihe. Denselben Namen trägt im
   Programm aber eine ganze GRUPPENZEILE der Finanzübersicht
   (.fi-gruppe-zeile.klaeren, finanzen.js). Die Zeile wurde dadurch zu einer
   kleinen Marke: inline, mit Füllung — und vor allem 'nowrap'. Ergebnis:
   2.022 Pixel breite Zeilen, die quer über die Seite in die Nachbarspalte
   liefen.

   REGEL: Ein neuer Klassenname wird vorher gesucht. Klingt selbstverständlich
   und ist genau das, was ich hier nicht getan habe. */
.chip, .ue-merk{
  display:inline-block; font-size:11.5px; font-weight:600; line-height:1.7;
  padding:0 8px; border-radius:var(--r-klein);
  background:var(--line); color:var(--ink2); white-space:nowrap;
}
.chip.gut, .ue-merk.gut{background:var(--fertig-bg); color:var(--fertig)}
.chip.warn, .ue-merk.warn{background:var(--wartet-bg); color:var(--wartet)}
.chip.schlecht{background:var(--fehler-bg); color:var(--fehler)}

/* --- Tore: die Prüfschritte --------------------------------------------- */
.tor{display:flex; align-items:flex-start; gap:var(--a3); padding:var(--a3) 0;
     border-bottom:1px solid var(--line)}
.tor:last-child{border-bottom:none}
/* Die runde Zustandsmarke. Sie steht meist in einer Tor-Zeile, manchmal
   aber auch allein (Freigabe, Wartezeichen) — deshalb NICHT auf .tor
   eingeschränkt. Die Marke in der Kopfleiste ist etwas anderes und wird
   in huelle.css mit höherer Spezifität zurückgeholt. */
.marke{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid;
  place-items:center; font-size:13px; font-weight:700; color:#fff; background:var(--muted);
}
.marke.pass{background:var(--fertig)}
.marke.block{background:var(--fehler)}
.marke.warte{background:var(--wartet)}
.tor .txt{flex:1; min-width:0}
.tor .name{font-weight:600; font-size:var(--gr-text)}
.tor .det{color:var(--ink2); font-size:var(--gr-neben); margin-top:3px}
.befund{
  background:var(--fehler-bg); border-left:3px solid var(--fehler);
  border-radius:0 var(--r-mittel) var(--r-mittel) 0;
  padding:11px var(--a4); margin-top:var(--a3); font-size:var(--gr-neben);
}
.befund .wie{color:var(--ink2); font-size:13px; margin-top:5px}
.offen-marke{
  margin-top:6px; padding:6px var(--a3); font-size:13px;
  border-left:3px solid var(--wartet); background:var(--wartet-bg);
  border-radius:0 var(--r-klein) var(--r-klein) 0;
}

/* --- Dateilisten -------------------------------------------------------- */
ul.dateien{list-style:none; padding:0; margin:0; font-size:var(--gr-neben)}
ul.dateien li{
  padding:9px 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; gap:var(--a3);
}
ul.dateien li:last-child{border-bottom:none}
.kb{color:var(--muted); font-size:13px; white-space:nowrap}

/* --- Erklärung hinter dem i-Zeichen ------------------------------------- */
.tunzeile{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.infoknopf{
  width:22px; height:22px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--line-stark); background:transparent; color:var(--muted);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:middle; margin-left:var(--a2);
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.infoknopf:hover{background:var(--gold-bg); color:var(--gold-text); border-color:var(--gold-linie)}
.infoknopf[aria-expanded="true"]{background:var(--gold); color:var(--card); border-color:transparent}
.infotext{
  display:none; margin:var(--a3) 0 var(--a1); padding:var(--a3) var(--a4);
  border-radius:var(--r-mittel); background:var(--feld-still);
  border-left:2px solid var(--gold-linie);
  font-size:var(--gr-neben); line-height:1.6; max-width:68ch; color:var(--ink2);
}
.infotext.offen{display:block}
.infotext p{margin:0 0 var(--a2)} .infotext p:last-child{margin:0}

/* --- Kennzahlenband ----------------------------------------------------- */
.stand{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-gross); overflow:hidden;
}
.stand:empty{display:none; border:0}
.stand .zelle{background:var(--card); padding:var(--a4) var(--a4)}
.stand .wert{font-size:21px; font-weight:600; line-height:1.15}
.stand .was{
  font-size:var(--gr-mini); color:var(--muted); text-transform:uppercase;
  letter-spacing:.1em; margin-top:5px; font-weight:600;
}

/* --- Startseite „Heute" ------------------------------------------------- */
.gruss{display:flex; flex-direction:column; gap:var(--a1)}
.gruss h2{font-size:var(--gr-seite); letter-spacing:-.5px}
.gruss p{color:var(--muted); font-size:14.5px}
.anliegen{display:grid; gap:var(--a2)}
.sache{
  display:flex; align-items:flex-start; gap:var(--a3); width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--line-stark); border-radius:var(--r-gross);
  padding:var(--a4) 18px; cursor:pointer; font-family:inherit;
  box-shadow:var(--schatten);
  transition:transform var(--tempo) ease, border-color var(--tempo) ease;
}
.sache:hover{transform:translateX(3px); border-color:var(--gold-linie)}
.sache.dringend{border-left-color:var(--fehler)}
.sache.offen{border-left-color:var(--wartet)}
.sache .zahl{
  flex:0 0 auto; min-width:34px; height:34px; border-radius:var(--r-mittel);
  display:grid; place-items:center; font-size:16px; font-weight:700;
  background:var(--feld-still); color:var(--ink2);
}
.sache.dringend .zahl{background:var(--fehler-bg); color:var(--fehler)}
.sache.offen .zahl{background:var(--wartet-bg); color:var(--wartet)}
.sache .text{min-width:0}
.sache .was{font-size:15.5px; color:var(--ink); font-weight:600; margin-bottom:2px}
.sache .warum{font-size:var(--gr-neben); color:var(--muted); line-height:1.5}
.sache .pfeil{margin-left:auto; flex:0 0 auto; color:var(--muted); align-self:center}
/* Blocksatz, NICHT Flex: Der Inhalt ist ein <strong> plus ein Fliesstext
   dahinter. In einer Flex-Zeile wird daraus zwei Spalten, und das
   "Nichts liegt an." bricht auf zwei Zeilen um, während daneben Platz ist.
   Gesehen am 03.09.2026. */
.ruhe{
  background:var(--fertig-bg); border-radius:var(--r-gross);
  padding:20px 22px; color:var(--fertig); font-size:var(--gr-text);
  display:block;
}
.ruhe::before{content:"✓ "; font-weight:700}

/* --- Themenliste -------------------------------------------------------- */
.themen{list-style:none; margin:0; padding:0}
.thema{padding:11px 2px; border-bottom:1px solid var(--line)}
.thema:last-child{border-bottom:0}
.thema-kopf{display:flex; justify-content:space-between; align-items:baseline;
            gap:var(--a3); margin-bottom:6px}
.thema-name{font-size:14.5px; color:var(--ink)}
.thema-zahl{font-weight:700; white-space:nowrap}
.thema-spur{height:6px; background:var(--line); border-radius:4px; overflow:hidden}
.thema-balken{height:6px; border-radius:4px; background:var(--muted); transition:width .3s ease}
.thema.fachlich .thema-balken{background:var(--aus)}
.thema.organisatorisch .thema-balken{background:var(--ein)}
.thema-fuss{display:flex; align-items:center; gap:7px; margin-top:5px;
            font-size:11.5px; color:var(--muted)}
.thema-fuss .datum{margin-left:auto}
.punkt{width:9px; height:9px; border-radius:2px; background:var(--muted);
       display:inline-block; flex:0 0 auto}
.thema.fachlich .punkt{background:var(--aus)}
.thema.organisatorisch .punkt{background:var(--ein)}

/* --- Geld: die Richtung ------------------------------------------------- */
.eingang{color:var(--ein)}
.ausgang{color:var(--aus)}

footer{
  margin-top:var(--a7); padding-top:var(--a4); border-top:1px solid var(--line);
  color:var(--muted); font-size:var(--gr-klein);
}

/* ==========================================================================
   REITER — ein Umschalter zwischen gleichrangigen Sichten (03.09.2026).

   Er sieht bewusst NICHT wie fünf Knöpfe aus: Knöpfe lösen etwas aus, ein
   Reiter wechselt nur den Blick. Deshalb keine Füllung, keine Rundung rundum
   — die gewählte Sicht trägt einen goldenen Balken darunter, mehr nicht.

   Auf dem Handy wird die Leiste schiebbar statt umgebrochen: Fünf Reiter in
   zwei Zeilen sehen aus wie zwei Gruppen, und man sucht einen Unterschied,
   den es nicht gibt.
   ========================================================================== */
.reiter{
  display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line); margin:var(--a2) 0 var(--a4);
  scrollbar-width:none;
}
.reiter::-webkit-scrollbar{display:none}
.reiter button{
  flex:0 0 auto; background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  font-family:inherit; font-size:14.5px; color:var(--muted);
  padding:10px var(--a3); min-height:44px; cursor:pointer; white-space:nowrap;
  transition:color var(--tempo) ease, border-color var(--tempo) ease;
}
.reiter button:hover{color:var(--ink)}
.reiter button[aria-selected="true"]{
  color:var(--ink); font-weight:600; border-bottom-color:var(--gold);
}

/* Eine Ansicht ist eine Teilkarte OHNE Trennlinie darüber: Es steht ja nie
   eine zweite daneben, von der sie zu trennen wäre. */
.ansicht{border-top:0 !important; padding-top:0 !important; margin-top:0 !important}
.ansicht-titel{
  font-size:var(--gr-h2); font-weight:600; margin:0 0 var(--a1);
  border-top:0; padding-top:0;
}
.ansicht-titel .schub-was{
  display:block; font-size:var(--gr-klein); font-weight:400; color:var(--muted); margin-top:1px;
}

/* --- Datei auswählen ----------------------------------------------------
   Der Browser zeichnet dafür von sich aus einen grauen Systemknopf mit
   englischer Aufschrift („Choose File — no file chosen"). Auf einer Seite,
   die sonst durchgestaltet ist, sieht genau das billig aus. Der native
   Knopf wird deshalb ausgeblendet und die Beschriftung übernimmt der
   Rahmen — bedienbar bleibt es unverändert, auch mit Tastatur. */
input[type=file]{
  font-family:inherit; font-size:var(--gr-neben); color:var(--ink2);
  border:1.5px dashed var(--line-stark); border-radius:var(--r-mittel);
  background:var(--feld-still); padding:10px var(--a3); width:100%; max-width:420px;
  cursor:pointer; transition:border-color var(--tempo) ease, background var(--tempo) ease;
}
input[type=file]:hover{border-color:var(--gold); background:var(--gold-bg)}
input[type=file]::file-selector-button{
  font-family:inherit; font-size:var(--gr-neben); font-weight:600;
  margin-right:var(--a3); padding:7px var(--a4); cursor:pointer;
  border:1px solid var(--line-stark); border-radius:var(--r-klein);
  background:var(--card); color:var(--ink);
}
input[type=file]::file-selector-button:hover{background:var(--gold-bg); border-color:var(--gold-linie)}

/* --- Felder dürfen nie über den Rand hinauswachsen ----------------------
   Zwei Datumsfelder nebeneinander sind zusammen 406 Pixel breit. Auf einem
   390 Pixel breiten Telefon schob das die ganze Seite seitwärts — und eine
   Seite, die sich seitwärts schieben lässt, fühlt sich kaputt an, auch wenn
   inhaltlich alles stimmt. Gemessen am 03.09.2026 in „Ein Monat".

   Die Regel steht bewusst allgemein: Sie fängt auch die nächste enge Zeile
   ab, an die heute noch niemand denkt. */
.filter .feld{max-width:100%; min-width:0}
.filter .feld>span{flex-wrap:wrap}
input,select,textarea{max-width:100%}
@media (max-width:560px){
  .filter .feld>span input[type=date]{flex:1 1 140px; width:auto}
}

/* --- Sehr schmale Telefone (320 Pixel) ---------------------------------
   Bei dieser Breite bleiben nach Seitenrand, Kartenrand und Ablagerand nur
   noch 188 Pixel für Text übrig. Die Zeile „PDF, JPG, PNG, HEIC · bis 25 MB
   je Datei" steht in .kb, und .kb verbietet den Umbruch — gedacht war das
   für Dateigrößen in einer Liste, wo ein Umbruch hässlich wäre. In der
   Ablage schob es die Seite seitwärts. */
.ablage .kb{white-space:normal}
@media (max-width:400px){
  .karte{padding:18px 16px}
  .ablage{padding:20px 14px}
}

/* --- Eine Kennzahl, die zugleich ein Weg ist ----------------------------
   Die Kacheln auf der Startseite sind Knöpfe: Jede führt in die Ansicht,
   aus der ihre Zahl stammt. Eine Zahl, die man nur ansehen kann, sagt
   „da ist etwas" und lässt einen damit stehen. */
.stand .zelle{
  background:var(--card); padding:var(--a4); border:0; width:100%;
  font-family:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:5px;
  transition:background var(--tempo) ease;
}
.stand button.zelle:hover{background:var(--gold-bg)}
.stand .zelle.ein .wert{color:var(--ein)}
.stand .zelle.aus .wert{color:var(--aus)}
.stand .zelle.wartet .wert{color:var(--wartet)}

/* --- Ein leerer Bereich erklärt sich ------------------------------------
   Drei Teile, immer in dieser Reihenfolge: WAS fehlt, WARUM es fehlt, und
   GENAU EINE Handlung, die weiterhilft. Zwei Knöpfe an einer leeren Stelle
   sind bereits eine Entscheidung zu viel — man weiss ja noch nichts. */
.nichts{
  border:1px dashed var(--line-stark); border-radius:var(--r-gross);
  padding:22px 24px; background:var(--feld-still);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--a2);
}
.nichts-was{font-size:var(--gr-text); font-weight:600; color:var(--ink)}
.nichts-warum{font-size:var(--gr-neben); color:var(--muted); max-width:60ch}
.nichts .knopf{margin-top:var(--a1)}

/* --- Monatswahl: Schritt 1 einer Auswertung ----------------------------
   Eine schiebbare Reihe statt eines Auswahlfeldes. Ein Auswahlfeld verbirgt,
   WELCHE Monate es überhaupt gibt — man muss es erst aufklappen. Hier sieht
   man mit einem Blick, worüber Zahlen vorliegen, und tippt einen an.
   „Gesamt" steht am Ende und sieht anders aus: Es ist kein weiterer Monat,
   sondern die Frage „und alles zusammen?". */
.monatswahl{
  display:flex; gap:var(--a2); overflow-x:auto; padding:2px 2px var(--a3);
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.monatswahl::-webkit-scrollbar{display:none}
.mw-monat{
  flex:0 0 auto; scroll-snap-align:start; min-width:132px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-gross);
  padding:11px 14px; font-family:inherit; color:var(--ink2); cursor:pointer;
  display:flex; flex-direction:column; gap:1px; min-height:44px;
  transition:border-color var(--tempo) ease, background var(--tempo) ease;
}
.mw-monat:hover{border-color:var(--gold-linie); background:var(--gold-bg)}
.mw-monat[aria-pressed="true"]{
  border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); background:var(--gold-bg);
}
.mw-name{font-size:var(--gr-text); font-weight:600; color:var(--ink)}
.mw-unten{font-size:var(--gr-klein); color:var(--muted)}
.mw-monat.gesamt{border-style:dashed}

/* Worauf man gerade schaut — und der Weg zurück zur Wahl. */
.mw-stand{
  display:flex; align-items:center; gap:var(--a2); flex-wrap:wrap;
  padding:var(--a3) 0 0; border-top:1px solid var(--line); margin-top:var(--a2);
}
.mw-stand-was{
  font-size:var(--gr-mini); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.mw-stand strong{font-size:var(--gr-h3)}
.mw-wechseln{margin-left:auto; min-height:36px; padding:6px 12px; font-size:var(--gr-neben)}

/* Solange nichts gewählt ist, gibt es auch nichts zu sehen. */
#buero-auswerten.ohne-wahl .reiter,
#buero-auswerten.ohne-wahl .ansicht{display:none}
.reiter button:disabled{color:var(--muted); opacity:.45; cursor:not-allowed}
.reiter button:disabled:hover{color:var(--muted)}