/* Layout fuer schmale Schirme.
   ==========================================================================

   Eingebunden mit media="(max-width: 720px)": Der Browser laedt diese Datei
   nur dort, wo sie gilt. Sie darf deshalb Layout setzen, statt das grosse
   Schritt fuer Schritt zurueckzunehmen.

   Der Grund fuer eine eigene Datei ist Pflege, nicht Reinheit: Vorher lagen
   vierzehn Medienabfragen ueber base.css verstreut. Wer am Mobil-Layout
   arbeitete, musste sie alle finden. Jetzt liegt es hier.

   Was NICHT hier steht: Farben, Radien, Schrift — und seit dem 28.08.2026
   auch keine blanken Zahlen mehr fuer Abstaende, Schriftgroessen und
   Fingerkuppen-Masse. Die kommen alle aus tokens.css (`--raum-*`,
   `--schrift-*`, `--ziel`). Hier steht nur noch, WELCHE Stufe wo gilt, nicht
   wie gross sie ist. Wer eine neue Ansicht baut, waehlt aus einem Wortschatz,
   statt eine Zahl zu erfinden.

   Die Grenze 720px steht auch in shared/mobil.js. Geaendert wird sie an
   beiden Orten.

   Inhalt:
     1. Grundmasse und Kopfzeile
     2. Menue von links (Schublade ueber zwei Drittel der Breite)
     3. Blatt von unten (auch fuer alle Dialoge)
     4. Listen: Zeilen werden Karten
     5. Ablagen: eine Ebene, feste Leiste unten
     6. Formulare, Kacheln, Tabellen
     7. Fusszeile
   ========================================================================== */

/* ----------------------------------------------- 1. Grundmasse und Kopfzeile */

/* Bedienelemente misst man mit dem Daumen, nicht mit dem Zeiger: `--ziel`
   (44 Pixel) ist das anerkannte Mindestmass, darunter trifft man im Gehen
   nicht. `--schrift-feld` (16 Pixel) verhindert, dass iOS beim Hineintippen
   in ein Feld die ganze Seite heranzoomt. Beides steht in tokens.css, weil
   beides an mehr als einer Stelle gilt. */
.btn { min-height: var(--ziel); padding: var(--raum-3) var(--raum-4); font-size: var(--schrift-lesen); }
.btn-sm { min-height: var(--ziel-klein); padding: var(--raum-2) var(--raum-4); font-size: var(--schrift-grund); }
.icon-btn { width: var(--ziel); height: var(--ziel); }
.input, .select, textarea.input { min-height: 46px; font-size: var(--schrift-feld); }

.main { padding: var(--raum-4) var(--raum-4) 96px; }

.topbar { padding: var(--raum-3) var(--raum-4); padding-top: max(var(--raum-3), env(safe-area-inset-top)); gap: var(--raum-3); }
.brand-name { font-size: var(--schrift-grund); }
.brand-sub { display: none; }

/* Das grosse Logo tut auf 375 Pixeln nichts, was die Bildmarke nicht schon
   taete — ausser Platz zu nehmen. */
.brand-full { display: none; }

/* Alles, was ins Menue gewandert ist, verschwindet aus der Kopfzeile. */
#nav, .topbar > .btn, .topbar-person { display: none; }

.hamburger {
  width: var(--ziel); height: var(--ziel); flex: none;
  display: grid; place-content: center; gap: var(--raum-1);
  border: 1px solid var(--border-strong); border-radius: 11px;
  background: transparent; cursor: pointer;
  padding: 0;
}
.hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.hamburger:active { background: var(--fill); }

.page-head { margin-bottom: var(--raum-4); gap: var(--raum-3); }
.page-title { font-size: var(--schrift-titel); }
.page-desc { font-size: var(--schrift-klein); }
.section { margin-top: var(--raum-5); }

/* --------------------------------------------------- 2. Menue von links */

/* Ein Klappmenue mit neun Eintraegen waere nur die Kopfzeile in senkrecht:
   gedraengt, kleine Ziele, und es verdeckt genau den Inhalt, zu dem man will.
   Die Schublade schafft Platz fuer 56 Pixel Zeilenhoehe, ein Zeichen je
   Bereich und die Zahl offener Anfragen am Eintrag.

   Sie nimmt zwei Drittel der Breite, nicht die ganze. Der Grund ist nicht
   Geschmack: Ein Vollbild-Menue verbirgt, wo man herkommt — man sieht nur
   noch eine Liste und muss sich erinnern, welche Seite dahinterliegt. Der
   verbleibende Streifen zeigt sie, abgedunkelt, und ein Tippen darauf ist
   der kuerzeste Rueckweg.

   `margin: 0` statt des vom Browser gesetzten `auto` haengt das Blatt an den
   linken Rand — daher kommt der Hamburger nicht, aber dorthin greift der
   Daumen. */
.menue {
  width: 66vw; min-width: 240px; max-width: 100vw;
  /* Nur so hoch wie die Liste, nicht so hoch wie der Schirm. Eine leere
     weisse Flaeche unter „Abmelden" sagt nichts — sie sieht nur so aus, als
     fehlte dort etwas. Bei sehr vielen Eintraegen deckelt die Schirmhoehe. */
  /* `bottom: auto` ist der eigentliche Handgriff: Der Browser setzt jedem
     Dialog `inset: 0`, und oben und unten zugleich verankert waechst die
     Schublade auf die Schirmhoehe, was immer `height` sagt. */
  height: auto; max-height: calc(100dvh - env(safe-area-inset-bottom));
  top: 0; bottom: auto;
  margin: 0; padding: 0; border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: menue-herein .22s var(--ease);
}

/* Derselbe Schleier wie beim Blatt von unten (62 statt 50 Prozent): Bei der
   halbdurchsichtigen Fassung blieb die Seite als graues Rauschen stehen, und
   weil die Schublade selbst weiss ist, las sich der Bildschirm als eine
   Flaeche. Jetzt tritt die Seite zurueck und die Schublade steht davor. */
.menue::backdrop { background: rgba(8, 22, 24, .62); }

@keyframes menue-herein {
  from { transform: translateX(-8%); opacity: .7; }
  to { transform: translateX(0); opacity: 1; }
}

.menue-kopf {
  display: flex; align-items: center; gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-4); padding-top: max(var(--raum-4), env(safe-area-inset-top));
  border-bottom: 1px solid var(--trennlinie);
}
.menue-titel { font-size: var(--schrift-klein); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.menue-kopf .icon-btn { margin-left: auto; }

/* `flex: 0 1 auto` statt `flex: 1`: Die Liste soll nicht wachsen, damit die
   Schublade auf ihrer Hoehe endet — schrumpfen und rollen darf sie weiterhin,
   wenn ein Konto einmal mehr Bereiche sieht als der Schirm hoch ist. */
.menue-liste { flex: 0 1 auto; overflow-y: auto; padding: var(--raum-2) 0 var(--raum-2); }

.menue-punkt {
  display: flex; align-items: center; gap: var(--raum-3);
  width: 100%; min-height: 56px; padding: var(--raum-3) var(--raum-4);
  /* Dieselbe Linie wie im Blatt: `--border` ergibt auf Weiss 1,27:1 und ist
     im Tageslicht schlicht nicht da. Der Kontrastdurchgang hat das Blatt
     erfasst, das Menue aber uebersehen. */
  border: 0; border-bottom: 1px solid var(--trennlinie);
  background: transparent; color: inherit;
  font-size: var(--schrift-feld); font-weight: 500; text-align: left;
  cursor: pointer;
}
.menue-punkt:last-child { border-bottom: 0; }
.menue-punkt:active { background: var(--fill); }
.menue-punkt.ist-aktiv { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.menue-zeichen {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--fill); color: var(--muted);
}
.menue-punkt.ist-aktiv .menue-zeichen { background: var(--accent); color: var(--accent-text); }
.menue-zeichen svg { width: 18px; height: 18px; display: block; }

.menue-text { flex: 1; min-width: 0; }

.menue-zahl {
  margin-left: auto; flex: none;
  background: var(--warn-soft); color: var(--warn);
  font-size: var(--schrift-meta); font-weight: 600;
  padding: 2px var(--raum-3); border-radius: var(--radius-pill);
}

/* Abmelden steht nicht neben Einstellungen, sondern abgesetzt darunter. */
.menue-punkt.ist-abmelden {
  /* Der Abstand setzt „Abmelden" ab, nicht eine zweite Linie: Der Eintrag
     darueber bringt seine schon mit, und beide zusammen ergaben zwei Striche
     mit einem weissen Band dazwischen. */
  color: var(--danger); margin-top: var(--raum-2);
  border-top: 0;
}
.menue-punkt.ist-abmelden .menue-zeichen { color: var(--danger); background: var(--danger-soft); }

/* --------------------------------------------------- 3. Blatt von unten */

/* Jeder Dialog wird auf schmalen Schirmen zum Blatt. Der Grund ist die
   Tastatur: Ein mittig stehender Dialog wird von ihr aus dem Bild geschoben,
   ein am unteren Rand verankerter waechst nach oben und bleibt sichtbar.
   Nebenbei liegt er dort am Daumen statt am oberen Rand.

   Die Dialoge selbst wissen davon nichts — confirmDialog, promptDialog und
   formularDialog bleiben unveraendert und erscheinen nur anders. */
.dialog {
  width: 100vw; max-width: 100vw;
  margin: auto auto 0; padding: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 92dvh;
  animation: blatt-herein .22s var(--ease);
}
/* Der Schleier war mit 45 Prozent zu duenn: Die Seite dahinter blieb als
   graues Rauschen sichtbar, und weil das Blatt selbst weiss und randlos ist,
   las sich der ganze Bildschirm als eine graue Flaeche. Mit 62 Prozent tritt
   die Seite zurueck und das Blatt steht fuer sich. */
.dialog::backdrop { background: rgba(8, 22, 24, .62); }

@keyframes blatt-herein {
  from { transform: translateY(14%); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dialog, .menue { animation: none; }
}

.dialog-pad { padding: var(--raum-5) var(--raum-4) calc(var(--raum-5) + env(safe-area-inset-bottom)); overflow-y: auto; max-height: 92dvh; }

/* Knoepfe eines Dialogs untereinander und in voller Breite: nebeneinander
   sind zwei Knoepfe auf 375 Pixeln je 160 breit — genug zum Verfehlen. */
.dialog-actions { flex-direction: column-reverse; gap: var(--raum-2); }
.dialog-actions .btn { width: 100%; }

/* Ein randloser Knopf ueber die volle Breite liest sich als abgeschaltete
   Zeile, nicht als Ausweg — genau der Fehler, den „Abbrechen" im Blatt schon
   hinter sich hat (.blatt-punkt.ist-abbruch). Am Zeiger genuegt der leise
   Knopf, weil er beim Ueberfahren antwortet; der Finger bekommt keine
   Antwort und braucht die Kante.

   Nicht `--border`: Das sind auf Weiss 1,27:1, also wieder kein Rahmen. */
.dialog-actions .btn-ghost {
  min-height: var(--ziel); padding: var(--raum-3) var(--raum-4); font-size: var(--schrift-lesen);
  border-color: var(--border-strong);
}

/* Das Blatt teilt sich in einen rollenden Teil und einen festen Fuss.
   Deshalb traegt der Dialog selbst die Hoehenbegrenzung, nicht mehr der
   Inhalt: sonst waechst das Blatt ueber den Schirm hinaus und schiebt den
   Fuss mit hinaus. */
.dialog:has(.blatt-inhalt) { display: flex; flex-direction: column; }

/* Das Blatt ist eine Flaeche mit Karten darauf, keine Liste mit Linien.
   ==========================================================================
   Vorher: weisses Blatt, Eintraege von Rand zu Rand, dazwischen zwoelf
   Haarlinien. Das ergab eine Wand aus Zeilen — man sah, dass es viele sind,
   aber nicht, welche zusammengehoeren. Und je mehr Kontrast die Linien
   bekamen, desto streifiger wurde es.

   Jetzt traegt der Abstand die Ordnung: grauer Grund, weisse Karten, eine
   Karte je Gruppe. Was zusammengehoert, steht auf derselben Karte; wo eine
   Karte endet, endet ein Gedanke. Linien braucht es dann fast keine mehr —
   und die wenigen im Karteninneren duerfen wieder leise sein, weil die
   Kartenkante die Arbeit macht.

   Dieselben Klassen gelten fuer jedes Kontextmenue der Anwendung: Alle gehen
   durch `blatt()` in shared/mobil.js. Eine Umgestaltung hier ist die
   Umgestaltung aller. */
.dialog.ist-blatt { background: var(--bg); }

.blatt-inhalt {
  flex: 1 1 auto; min-height: 0;
  padding: var(--raum-2) 0 var(--raum-4);
  overflow-y: auto;
}

.blatt-fuss {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: var(--raum-3) var(--raum-4) calc(var(--raum-3) + env(safe-area-inset-bottom));
}

/* Eine Karte je Gruppe. `overflow: hidden` schneidet die Ecken der Eintraege
   mit — sonst steht die erste Zeile eckig in einer runden Karte. */
.blatt-gruppe {
  display: block;
  margin: 0 var(--raum-3) var(--raum-4);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

/* Die Linie steht zwischen zwei Eintraegen, nie am Rand einer Karte. Damit
   gibt es keine doppelten Kanten mehr — auch nicht ueber dem Fuss.
   `:not(:first-child)` statt `* + *`: Beide treffen dasselbe, aber nur das
   erste steht ueber dem `border: 0` des Eintrags weiter unten. */
.blatt-gruppe > :not(:first-child) { border-top: 1px solid var(--border-strong); }
/* base.css verbirgt den Griff — am grossen Schirm zieht niemand an einem
   Dialog. Hier ist er das Zeichen dafuer, dass das Blatt von unten kommt. */
.blatt-griff {
  display: block;
  width: 38px; height: 4px; border-radius: var(--radius-pill);
  background: var(--border-strong); margin: var(--raum-2) auto var(--raum-3);
}
/* Der Kopf steht auf dem grauen Grund, nicht auf einer Karte: Er ist die
   Ueberschrift des Blattes, keine Handlung. Eine Linie darunter braucht er
   deshalb auch nicht — die erste Karte beginnt sichtbar von selbst. */
/* Kopf und Zwischenueberschrift stehen auf dem Grund, die Eintraege auf den
   Karten — und die sind um den Kartenabstand eingerueckt. Damit die Schrift
   trotzdem auf einer Linie beginnt, ist der seitliche Abstand hier die Summe
   aus beidem. Genau dafuer ist eine Leiter da: Man rechnet mit Stufen, statt
   sich eine neue Zahl auszudenken. */
.blatt-kopf {
  padding: 2px calc(var(--raum-3) + var(--raum-4)) var(--raum-4);
  border-bottom: 0;
}
.blatt-name { font-weight: 600; font-size: var(--schrift-feld); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blatt-meta { color: var(--muted); font-size: var(--schrift-klein); margin-top: 2px; }

.blatt-punkt {
  display: block; width: 100%; min-height: 54px;
  padding: var(--raum-4) var(--raum-4); border: 0;
  background: transparent; color: inherit;
  font-size: var(--schrift-feld); text-align: left; cursor: pointer;
}

/* Der Eintrag reicht von Rand zu Rand. Ein Fokusrahmen wird ausserhalb der
   Flaeche gezeichnet und lag damit neben dem Bildschirm — sichtbar war er
   nie. Nach innen versetzt liegt er im Blatt. */
.blatt-punkt:focus-visible { outline-offset: -3px; }

.blatt-punkt:active { background: var(--fill-2); }

/* Es gibt kein Ueberfahren mit dem Finger. Nach einer Beruehrung laesst der
   Browser den Hover-Zustand aus base.css stehen — im Blatt blieb dadurch
   eine graue Zeile zurueck, die aussah wie eine Auswahl, obwohl nichts
   ausgewaehlt war. */
@media (hover: none) {
  .blatt-punkt:hover, .blatt-nebenpunkt:hover { background: transparent; }
}

.blatt-zeile { align-items: center; }

/* Der Nebenknopf war eine Zelle ueber die volle Zeilenhoehe mit eigener
   Trennlinie: 118 von 375 Pixeln — ein Drittel der Zeile fuer die
   Nebensache, und optisch eine Tabelle statt einer Liste. Als Kapsel am
   rechten Rand bleibt er mit 40 Pixeln Hoehe gut zu treffen und gibt der
   Hauptsache ihren Platz zurueck. */
.blatt-nebenpunkt {
  align-self: center;
  margin: 0 var(--raum-4) 0 var(--raum-4);
  min-width: 0; min-height: var(--ziel-klein); padding: 0 var(--raum-4);
  /* Rahmen neutral, Schrift rot: Ein roter Rahmen zoege das Auge auf die
     Nebensache, die zudem etwas wegnimmt. Die Farbe der Schrift genuegt. */
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--schrift-grund);
}
.blatt-nebenpunkt:active { background: var(--fill-2); }
.blatt-nebenpunkt.ist-gefahr:active { background: var(--danger-soft); }

/* Die Zwischenueberschrift gehoert zur Karte darunter, nicht zur vorigen. */
.blatt-abschnitt { padding: var(--raum-1) calc(var(--raum-3) + var(--raum-4)) var(--raum-2); }
.blatt-info { padding: var(--raum-4) var(--raum-4); font-size: var(--schrift-lesen); }
.blatt-zurueck { min-height: 36px; padding: 0 0 var(--raum-2); font-size: var(--schrift-grund); }
.blatt-punkt.ist-weiter { padding-right: 38px; }
.blatt-punkt.ist-weiter::after { right: 16px; }
/* Steht ein Nebenknopf daneben, rueckt das Winkelzeichen an den Text heran —
   sonst kleben zwei Zeichen mit verschiedener Bedeutung aneinander. */
.blatt-zeile .blatt-punkt.ist-weiter { padding-right: var(--raum-5); }
.blatt-zeile .blatt-punkt.ist-weiter::after { right: 8px; }

/* Die zerstoererische Handlung soll man erkennen, bevor man sie liest. */
.blatt-punkt.ist-gefahr { color: var(--danger); }
.blatt-punkt.ist-gefahr:active { background: var(--danger-soft); }

/* „Abbrechen" war zentrierter grauer Text ohne Rahmen — das liest sich als
   abgeschaltete Zeile, nicht als Ausweg. Es bekommt die Form, die dieselbe
   Rolle in jedem anderen Dialog schon hat: umrandeter Knopf in voller
   Breite (siehe `.dialog-actions .btn`). Der Abstand darueber trennt ihn
   von den Handlungen, damit ihn niemand versehentlich trifft. */
.blatt-punkt.ist-abbruch {
  /* Ein <button> bemisst sich am Inhalt, auch als Block — 'auto' ergab
     einen 113 Pixel breiten Knopf mitten im Blatt. Die Breite muss die
     seitlichen Abstaende ausdruecklich abziehen. */
  /* Der Fuss setzt die Abstaende. Frueher trug der Knopf sie selbst —
     das war noetig, solange er der letzte Eintrag der Liste war. */
  width: 100%;
  margin: 0;
  padding: var(--raum-3) var(--raum-4); min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  /* Weiss auf dem grauen Grund des Blattes: Der Ausweg ist eine Flaeche,
     kein Loch. */
  background: var(--surface);
  color: var(--text); text-align: center; font-weight: 500;
}
.blatt-punkt.ist-abbruch:active { background: var(--fill-2); }

/* --------------------------------------------- 3a. Filter hinter Schalter */

/* Neun Filterfelder untereinander sind 739 Pixel — mehr als ein Bildschirm,
   bevor die erste Zeile kommt. Eingeklappt bleiben sie erreichbar, ohne die
   Auskunft zu verdecken. Der Schalter sagt, ob etwas gesetzt ist: sonst
   sucht jemand einen Fehler in den Daten, der in einem Filter steckt. */
.filter-schalter {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  min-height: var(--ziel); width: 100%;
  margin-bottom: var(--raum-4); padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--schrift-lesen); font-weight: 500;
  justify-content: center;
  cursor: pointer;
}
.filter-schalter:active { background: var(--fill); }

/* Gesetzte Filter sind kein Randhinweis: Wer sie vergisst, haelt eine
   gefilterte Liste fuer die ganze. */
.filter-schalter.ist-gesetzt {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Diese Regel steht bewusst hier und nicht in base.css: unterhalb von 720
   Pixeln klappt die Leiste zu, oberhalb gibt es die Regel nicht und sie ist
   da. Kein JavaScript muss das zuruecknehmen. */
.filterleiste.ist-eingeklappt { display: none; }

/* Ausgeklappt darf die Leiste den Platz nehmen, den sie braucht. */
.filterleiste { margin-bottom: var(--raum-4); }

/* ------------------------------------------- 4. Listen: Zeilen als Karten */

/* Eine Liste mit Trennlinien liest sich am grossen Schirm als Tabelle. Auf
   dem Telefon fehlt die Breite dafuer — dort wird jede Zeile eine Karte, und
   die Karte darf zwei Zeilen hoch sein. */
.list {
  border: 0; background: transparent; border-radius: 0;
  display: flex; flex-direction: column; gap: var(--raum-2);
}

.row {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface);
  padding: var(--raum-3) var(--raum-3);
  gap: var(--raum-3);
  min-height: 62px;
}
.row:last-child { border-bottom: 1px solid var(--border); }
.row:hover { background: var(--surface); }

/* Die Einrueckung entfaellt vollstaendig. Auf dem Telefon wird nicht
   aufgeklappt, sondern hineingegangen — siehe Abschnitt 5. */
.row, .row.is-t1, .row.is-t2, .row.is-t3, .row.is-t4,
.row.is-t5, .row.is-t6, .row.is-t7, .row.is-t8, .row.is-t9 { --tiefe: 0; }
.row.is-nested::before { display: none; }
.row-chevron { display: none; }

.row-name { font-size: var(--schrift-lesen); white-space: normal; }
.row-meta { font-size: var(--schrift-meta); }
.row-customer { background: var(--surface-2); border-color: var(--border-strong); }
.row-customer .row-name { font-size: var(--schrift-lesen); }

/* Ein Rahmen um alles oder um nichts.

   Vorher trug das Kundenlogo einen Rahmen, das Zeichen daneben keinen, das
   Abzeichen keinen und die Knoepfe je nach Art. Nebeneinander sah das
   zufaellig aus. Jetzt bekommt jedes Element in einer Zeile dieselbe
   Haarlinie — und das Logo mehr Platz, damit es neben der grossen Karte
   nicht verloren wirkt. */
.row .row-icon {
  width: var(--ziel); height: var(--ziel);
  border: 1px solid var(--border);
}
.row .row-icon svg { width: 20px; height: 20px; }
.row .badge { border: 1px solid var(--border); }

/* Knoepfe in einer Zeile: Rahmen und ein leichter Grund, damit sie als
   Schaltflaechen lesbar sind. Am grossen Schirm genuegt der Hover-Effekt
   dafuer — auf einem Telefon gibt es keinen Zeiger, der etwas verraet. */
.row-actions .btn { border: 1px solid var(--border-strong); }
.row-actions .btn-ghost { background: var(--fill); }
.row-actions .btn-ghost.ist-gefaehrlich {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

/* Der Zusatz („– Fotografie") bekommt eine eigene Zeile, statt den
   Kundennamen zu verdraengen. */
.row-title { flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); }
.row-zusatz { font-size: var(--schrift-klein); }

/* Was ins Blatt gewandert ist, verschwindet aus der Zeile — und zwar alles.

   Hier stand nur `.row-actions > .icon-btn`. Beschriftete Knoepfe blieben
   deshalb stehen, WÄHREND daneben die drei Punkte erschienen: Bei einem
   Kunden ragten "Berechtigte, Bearbeiten, Archivieren, Löschen" ueber den
   rechten Rand hinaus, und das Zeichen dahinter war gar nicht mehr im Bild.

   `[data-mobil]` setzt mobil.js genau dann, wenn der Umbau wirklich
   stattgefunden hat. Bleibt das Skript aus, bleiben die Knoepfe sichtbar —
   lieber gedraengt als unerreichbar. */
.row-actions[data-mobil] > * { display: none; }
.row-actions[data-mobil] > .row-mehr { display: grid; }

/* Die Angabe unter dem Namen bleibt einzeilig. Der Name darf umbrechen —
   „BWL, Bundesamt für wirtschaftliche Landesversorgung" muss lesbar sein. */
.row-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.row-mehr {
  width: var(--ziel); height: var(--ziel); flex: none;
  /* base.css haelt es verborgen — hier ist sein Ort. */
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 11px;
  background: transparent; color: var(--muted);
  font-size: var(--schrift-feld); letter-spacing: 1px; line-height: 1;
  cursor: pointer; padding: 0;
}
.row-mehr:active { background: var(--fill); }

/* Zwei beschriftete Knoepfe bleiben stehen — sie sind lesbar und treffbar.
   Sie bekommen eine eigene Zeile unter dem Namen, statt ihn zusammen-
   zuquetschen.

   `:not(:has(.row-mehr))` grenzt das ausdruecklich auf die Zeilen ein, die
   ihre Knoepfe behalten haben. Zwei getrennte Regeln — eine fuer Knoepfe, eine
   fuer die drei Punkte — haetten sich sonst ueber die Spezifitaet gegenseitig
   ausgehebelt: `:has(.row-actions .btn)` waehlt spezifischer als
   `:has(.row-mehr)` und haette gewonnen, egal in welcher Reihenfolge. */
.row:has(.row-actions .btn):not(:has(.row-mehr)) { flex-wrap: wrap; }
.row-actions:has(.btn):not(:has(.row-mehr)) {
  flex: 1 0 100%; justify-content: stretch; flex-wrap: wrap; gap: var(--raum-2);
}
.row-actions:has(.btn):not(:has(.row-mehr)) .btn { flex: 1; }

/* Das Zeichen und der Text bleiben auf derselben Zeile.
   Hier stand `.row-main { flex: 1 0 100% }` — dadurch rutschte der Text auf
   eine eigene Zeile und der Schluessel stand allein darueber. Bei einem
   Zugangslink brauchte eine Zeile so vier Zeilen Hoehe. */
.row:has(.row-actions .btn):not(:has(.row-mehr)) .row-main { flex: 1; min-width: 0; }

/* Eine Zeile, die als Ganzes antippbar ist — die Benutzerliste. Der Pfeil
   rechts sagt, dass dahinter etwas steckt. */
.row.ist-antippbar { cursor: pointer; }
.row.ist-antippbar:active { background: var(--fill); }
.row-pfeil { flex: none; color: var(--muted); font-size: var(--schrift-titel); line-height: 1; padding: 0 var(--raum-1); }

/* --------------------------- 5. Ablagen: eine Ebene, feste Leiste unten */

/* Am Schreibtisch ist der aufklappbare Baum richtig — man sieht mehrere
   Ebenen zugleich und vergleicht. Auf dem Telefon sieht man sechs Zeilen;
   der Vergleich findet nicht statt, die Einrueckung kostet nur Platz.
   Deshalb: eine Ebene je Ansicht, und der Pfad oben fuehrt zurueck. */
/* Kleben darf nur der Pfad der Ablagen — er ist der Weg zurueck und muss
   erreichbar bleiben, wie weit man auch scrollt.

   Vorher galt das fuer JEDE Werkzeugleiste. Im Konto ist eine davon aber nur
   eine Abschnittsueberschrift („Dateitransfer"): Sie blieb beim Scrollen
   stehen und legte sich ueber die Zeile darueber, von der dann nur noch die
   obere Haelfte zu sehen war. */
.toolbar {
  flex-wrap: nowrap; gap: var(--raum-2);
  /* Ein negatives Mass gibt es nur als Rechnung: `-var(...)` ist kein
     gueltiger Wert, `calc(var(...) * -1)` schon. */
  padding: var(--raum-2) var(--raum-3);
  margin: calc(var(--raum-4) * -1) calc(var(--raum-4) * -1) var(--raum-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.toolbar:has(.crumbs) { position: sticky; top: 0; z-index: 5; }

/* Eine Werkzeugleiste ohne Pfad ist eine Ueberschrift. Sie braucht weder den
   vollen Anschnitt noch einen eigenen Grund. */
.toolbar:not(:has(.crumbs)):not(:has(.kennzahlen)) {
  margin: var(--raum-4) 0 var(--raum-3); padding: 0;
  background: transparent; border-bottom: 0;
}

.crumbs { flex-wrap: nowrap; overflow: hidden; }

/* Ein langer Name wie „BWL, Bundesamt für wirtschaftliche Landesversorgung"
   wurde vorher mitten im Wort abgeschnitten, ohne dass man es sah. Jetzt
   endet er mit drei Punkten — der Schritt zurueck daneben bleibt ganz. */
.crumbs .crumb[aria-current="page"] {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* Der Pfad ist auf dem Telefon der Weg zurueck — also ein Bedienelement wie
   jedes andere und keine Beschriftung. 40 Pixel, damit man ihn trifft. */
.crumb { white-space: nowrap; font-size: var(--schrift-klein); padding: var(--raum-2) var(--raum-3); min-height: var(--ziel-klein); }

/* Von einem Pfad „Ablagen / Stadt Bern / M365 / Bilder" bleiben auf 375
   Pixeln zwei Dinge uebrig, die wirklich zaehlen: wo man ist, und der Schritt
   zurueck. Alles dazwischen waere abgeschnittener Text.

   `:has(+ …)` waehlt genau den Eintrag VOR dem aktuellen — der ist der Weg
   zurueck. Ueber `:last-of-type` ginge das nicht: Der letzte Knopf ist der
   aktuelle selbst.

   Zwischen zwei Knoepfen steht ein Trennzeichen `.crumb-sep`. Der Nachbar
   davor ist deshalb NICHT `+ .crumb`, sondern `+ .crumb-sep + .crumb` — beide
   Formen stehen hier, weil das Trennzeichen vor dem ersten Eintrag fehlt. */
.crumb-sep { display: none; }
.crumbs .crumb { display: none; }
.crumbs .crumb[aria-current="page"],
.crumbs .crumb:has(+ .crumb[aria-current="page"]),
.crumbs .crumb:has(+ .crumb-sep + .crumb[aria-current="page"]) { display: inline-block; }

.crumbs .crumb:has(+ .crumb[aria-current="page"]),
.crumbs .crumb:has(+ .crumb-sep + .crumb[aria-current="page"]) {
  color: var(--accent); font-weight: 600;
}
.crumbs .crumb:has(+ .crumb[aria-current="page"])::before,
.crumbs .crumb:has(+ .crumb-sep + .crumb[aria-current="page"])::before { content: '‹ '; }

/* Die Handlungen der Ebene wandern an den unteren Rand. Wer 40 Dateien
   durchgescrollt hat, erreicht "Hochladen" sonst nur durch Zurueckscrollen. */
.toolbar-aktionen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-4) calc(var(--raum-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px -18px rgba(13, 42, 45, .5);
}
.toolbar-aktionen .btn { flex: 1; min-height: 46px; }
/* Die erste Handlung ist die wichtigste — sie bekommt das Gewicht. */
.toolbar-aktionen .btn-outline:only-child { flex: 1; }

/* Das Logo steht oben rechts, ueber dem Pfad — und bekommt seinen Platz.

   Mit 28 Pixeln war es zu klein, und schlimmer: Die Werkzeugleiste darunter
   zieht sich mit einem negativen oberen Rand nach oben, klebt dort und schob
   sich dabei ueber das Logo. Am Geraet sah man ein halbes, angeschnittenes
   Wappen. Wo ein Logo steht, entfaellt der Zug nach oben. */
.kundenkopf { margin: 0 0 var(--raum-3); }
.kundenkopf-logo { height: 40px; max-width: 150px; }
.kundenkopf + .toolbar { margin-top: 0; }

.state { padding: var(--raum-6) var(--raum-4); }
.state-title { font-size: var(--schrift-feld); }

/* Ablagefeld: Auf einem Telefon gibt es nichts zu ziehen. Aus der Flaeche
   wird eine Schaltflaeche — der Text darin sagt das auch. */
.sendefeld { padding: var(--raum-5) var(--raum-4); min-height: 0; }
.sendefeld-quellen { display: flex; gap: var(--raum-2); margin-top: var(--raum-4); width: 100%; }
.sendefeld-quellen .btn { flex: 1; min-height: var(--ziel); padding: var(--raum-3) var(--raum-2); }

/* ---------------------------------------- 6. Formulare, Kacheln, Tabellen */

.card-pad { padding: var(--raum-4) var(--raum-4); }
.auth-wrap { padding: var(--raum-4) var(--raum-4) 90px; }
.auth-card { max-width: none; }
.auth-logo { width: 92px; height: auto; }
.auth-title { font-size: var(--schrift-titel); }

/* Die drei Kacheln des Einstiegs untereinander, in fester Reihenfolge:
   anmelden, Zugangslink, Passwort vergessen. Keine halbleeren Spalten. */
.einstieg { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
.einstieg .auth-card, .einstieg-neben { grid-column: 1; grid-row: auto; }

/* Kennzahlen sind eine Zahl und ein kurzes Wort — zwei nebeneinander gehen
   gut und sparen zwei Bildschirmhoehen Scrollen. */
.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2); }
.kennzahlen .card-pad { padding: var(--raum-3) var(--raum-3); }
.kennzahlen .page-title { font-size: var(--schrift-titel); }

/* Auswahllisten dagegen brauchen die ganze Breite: „Sicherheit gesamt (mit
   Passwörtern, 2FA, Widerruf)" ist auf halber Breite nicht mehr lesbar. */
.filterleiste { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }

/* Datumsfelder brauchen eine ausdrueckliche Breitenbegrenzung.
   `input[type="date"]` bringt auf iOS und Android eine eigene Mindestbreite
   mit, die groesser ist als die Spalte — „Von" und „Bis" ragten deshalb ueber
   den rechten Rand hinaus. `min-width: 0` hebt sie auf, `width: 100%` setzt
   die Spaltenbreite durch. */
.filterleiste .field { min-width: 0; }
.input[type="date"], .input[type="datetime-local"], .input[type="time"] {
  width: 100%; min-width: 0; max-width: 100%;
}

/* --------------------------------- Kopf des Dateitransfers */

/* Die wichtigste Handlung zuoberst und allein: "Neue Sendung".
   Darunter, was schon laeuft. Vorher teilten sich Kacheln und Knopf eine
   Zeile — die Kacheln wurden so schmal, dass „abrufbar" abgeschnitten war,
   und der Knopf stand klein daneben. */
.toolbar:has(.kennzahlen) {
  position: static;
  flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  gap: var(--raum-3); padding: var(--raum-4);
}
.toolbar:has(.kennzahlen) > .btn {
  order: -1; width: 100%;
  min-height: 50px; font-size: var(--schrift-feld);
}
.toolbar:has(.kennzahlen) > .topbar-spacer { display: none; }

/* Drei Kacheln nebeneinander: je rund 118 Pixel — genug fuer die Zahl und
   ihr Wort, ohne dass eines davon abbricht. Bei vieren waeren es 88, und
   „ohne Freigabe" braeche um; dann lieber zwei Reihen zu zweit. */
.kennzahlen-schmal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-2); }
.kennzahlen-schmal:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kennzahlen-schmal .card-pad { padding: var(--raum-3) var(--raum-2); text-align: center; }
.kennzahlen-schmal .page-title { font-size: var(--schrift-titel); }
.kennzahlen-schmal .hint { font-size: var(--schrift-meta); margin-top: 2px; }

/* Der Zeitstempel steht unter dem Text, nicht daneben. */
.row .protokoll-zeit { width: auto; flex: 1 0 100%; order: 3; }

.bilanz { padding: 2px var(--raum-3); }
.bilanz-zeile { font-size: var(--schrift-klein); }

/* Der Versandbereich: Empfaengerfelder und Knoepfe in voller Breite. */
.feldpaar > * { width: 100%; }
.schnellwahl .btn { flex: 1 1 calc(50% - 3px); }

/* ------------------------------------------------------- 7. Fusszeile */

.standzeile {
  /* Auf dem Telefon steht sie mittig unter dem Inhalt: rechtsbuendig waere
     sie halb unter dem Daumen und halb im Nichts. */
  text-align: center;
  padding-bottom: calc(var(--raum-4) + env(safe-area-inset-bottom));
}
.standzeile-name, .standzeile-wert { display: block; }
/* Zwei Zeilen brauchen keinen Mittelpunkt zwischen sich. */
.standzeile-wert::before { content: none; }