/* ===================================================================
   Schriften -- selbst gehostet, nichts wird von aussen nachgeladen.
   Ein Google-Fonts-Link braeche offline (die Uhr soll ohne Netz laufen)
   und truege bei fremden Kunden deren IP an Google. Die Dateien liegen
   deshalb im Paket, der Service Worker zieht sie beim Installieren mit.
   Herkunft, Groessen und die Begruendung fuer genau diese fuenf Dateien:
   public/fonts/HERKUNFT.md

   Die Pfade sind relativ zu DIESER Datei (/css/app.css), nicht zur Seite --
   "../fonts/x.woff2" loest deshalb zu /fonts/x.woff2 auf.

   font-display:swap ist Absicht: die Oberflaeche ist sofort lesbar und
   wechselt nach, statt bis zu drei Sekunden leer zu bleiben. Bei einer
   Stoppuhr zaehlt der erste Blick.

   Archivo kommt als variable Schrift (Achse wght 100..900) -- eine Datei
   statt vier Schnitten. IBM Plex Mono hat keine variable Fassung, deshalb
   dort genau die drei Schnitte, die die Oberflaeche benutzt: 400, 500, 600.
   =================================================================== */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(../fonts/archivo-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Partnernamen stehen in der Sans und koennen Lukasz oder Simek heissen --
   ohne latin-ext faellt genau ein Buchstabe im Namen aus der Schrift. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(../fonts/archivo-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* In der Mono stehen nur Ziffern, Doppelpunkte und Waehrungszeichen --
   latin reicht, latin-ext waere Ballast im Pre-Cache. */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:400;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:600;
  src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Die eigene Schrift zuerst, dahinter unveraendert der alte Systemstapel --
   faellt eine WOFF2-Datei aus (404, Cache leer, Firmennetz mit Filter), sieht
   die App aus wie vorher, statt in einer Ersatzschrift zu zerfallen. */
:root{
  --font-sans:'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* ===================================================================
   public/css/app.css  --  Entwurf. Tokens zuerst, danach Bausteine.
   =================================================================== */
:root,
.app[data-theme="light"]{
  --papier:#f4f5f8; --flaeche:#ffffff; --flaeche-2:#f7f8fa;
  --tinte:#15181f; --gedaempft:#616b7c; --schwach:#8a93a3;
  --linie:#e1e4eb; --linie-stark:#cfd4de;
  --akzent:#3b35a0; --akzent-schwach:#eceafb;
  --gut:#136f49; --gut-schwach:#e4f2ec;
  --warte:#9a5b0c; --warte-schwach:#fbf0df;
  --schlecht:#b3352c; --schlecht-schwach:#fbeae8;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --btn-circle-size:168px;
  --rahmen-schatten:0 24px 60px -12px rgba(21,24,31,.28), 0 0 0 1px rgba(21,24,31,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0e1116; --flaeche:#1b1f25; --flaeche-2:#22272f;
    --tinte:#e7eaf0; --gedaempft:#98a2b3; --schwach:#798394;
    --linie:#2b313a; --linie-stark:#3a4250;
    --akzent:#9a93ff; --akzent-schwach:#232544;
    --gut:#4fbb8b; --gut-schwach:#16302a;
    --warte:#d99a3f; --warte-schwach:#33281a;
    --schlecht:#e88a80; --schlecht-schwach:#361f1e;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --rahmen-schatten:0 24px 60px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(231,234,240,.08);
  }
}
:root[data-theme="dark"],
.app[data-theme="dark"]{
  --papier:#0e1116; --flaeche:#1b1f25; --flaeche-2:#22272f;
  --tinte:#e7eaf0; --gedaempft:#98a2b3; --schwach:#798394;
  --linie:#2b313a; --linie-stark:#3a4250;
  --akzent:#9a93ff; --akzent-schwach:#232544;
  --gut:#4fbb8b; --gut-schwach:#16302a;
  --warte:#d99a3f; --warte-schwach:#33281a;
  --schlecht:#e88a80; --schlecht-schwach:#361f1e;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --rahmen-schatten:0 24px 60px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(231,234,240,.08);
}

*{box-sizing:border-box}
/* Die WURZEL scrollt nicht. Gescrollt wird ausschliesslich in `.inhalt`.
   Gefunden am 2026-09-02 von Jess an der installierten PWA am S24: die untere
   Leiste rutschte beim Wischen nach unten aus dem Bild und kam erst am Ende
   des Scrollwegs zurueck -- und der KOPF wanderte mit. Es bewegte sich also
   nicht die Leiste im Fenster, sondern die ganze `.app` im Dokument. Auch auf
   "Freigaben", wo gar nichts steht: die Ueberhoehe hing nicht am Inhalt.

   Die Ursache waren zwei verschiedene Hoehen fuer dieselbe Seite:

     html/body  height:100%    -> Layout-Ausschnitt (ICB), MIT Gestenleiste
     .app       height:100dvh  -> dynamische Ansicht,     OHNE Gestenleiste

   `viewport-fit=cover` in index.html laesst Chrome die PWA randlos zeichnen;
   der Layout-Ausschnitt reicht damit unter die Gestenleiste. `body` war rund
   48 px hoeher als `.app`, darunter stand ein Streifen leerer Body -- und
   genau der war scrollbar. `100dvh` an `.app` allein half nicht: es macht
   `.app` richtig hoch, sagt `body` aber nicht, dass es auch kleiner sein soll.

   Drei Riegel, und der mittlere ist der eigentliche:

   1. `height:100dvh` auch hier, mit `100%` davor als Rueckfall fuer Browser
      ohne `dvh` -- dieselbe Doppelung wie an `.app`.
   2. `overflow:hidden` -- damit KANN das Dokument nicht mehr scrollen, egal
      welche Hoehe herauskommt und egal, wie sich eine Systemleiste morgen
      verhaelt. Das schliesst die Klasse und nicht die Stelle.
   3. `overscroll-behavior:none` -- kein Ueberziehen am Rand, kein
      Ziehen-zum-Neuladen, und `.inhalt` setzt sein Scrollen am Anschlag nicht
      in die Wurzel fort.

   ⚠️ Auf dem Schreibtisch entsteht die Ueberhoehe gar nicht (keine
   Gestenleiste, `100%` == `100dvh`) -- gemessen, auf jedem Tab 0 px. Der
   Rauchtest stellt sie deshalb VON HAND und prueft die Absicht:
   tests/rauchtest/leiste-steht-fest.spec.js */
html,body{height:100%; height:100dvh; height:var(--app-hoehe, 100dvh); overflow:hidden; overscroll-behavior:none}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}

/* [hidden] gilt fuer ALLES, und zwar staerker als jede Klasse.
   Die Marke `hidden` ist nur eine UA-Regel (`[hidden]{display:none}`), und
   die verliert gegen jede Autor-Regel mit `display` -- unabhaengig von der
   Spezifitaet, weil sie aus einem schwaecheren Blatt kommt. Ein Element mit
   `class="spalte" hidden` bleibt also sichtbar, obwohl im Markup wortwoertlich
   "hidden" steht.
   Das war 2026-08-30 an EINER Stelle aufgefallen (der unteren Leiste) und
   dort einzeln repariert. Am 2026-08-31 hat Jess denselben Fehler am Geraet
   wiedergefunden: das Feld "Name der Kategorie" samt "Anlegen" stand dauerhaft
   da. Betroffen war ausserdem das Stornofeld. Eine Falle, die man zweimal
   einzeln repariert, ist eine Regel, die fehlt -- deshalb steht sie jetzt hier
   und nicht mehr an einzelnen Marken. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- App-Gerüst ---------- */
/* height:100% allein braucht einen Hoehengeber bis zur Wurzel -- html/body
   liefern ihn oben. 100dvh zusaetzlich, weil auf dem Handy die Adressleiste
   ein- und ausblendet: 100vh/100% zaehlt sie mal mit, mal nicht, 100dvh
   nicht. Ohne eine dieser beiden faellt .app auf auto zurueck, .inhalt
   scrollt nie in sich, und die untere Leiste haengt mitten auf der Seite
   statt am unteren Rand. */
.app{height:100%; height:100dvh; height:var(--app-hoehe, 100dvh); display:flex; flex-direction:column; background:var(--flaeche); position:relative}
.statusleiste{height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; font-family:var(--font-mono); font-size:11px; color:var(--gedaempft); flex:none}
.appkopf{display:flex; align-items:center; gap:10px; padding:4px 18px 12px; flex:none}
.appkopf .titel{font-size:19px; font-weight:700; letter-spacing:-.01em}
.appkopf .zurueck{background:none;border:0;padding:6px 8px 6px 0;cursor:pointer;color:var(--gedaempft);font-size:17px;line-height:1}
.appkopf .rechts{margin-left:auto; display:flex; gap:4px}
.ikon{background:none; border:0; padding:7px; border-radius:8px; cursor:pointer; color:var(--gedaempft); line-height:0}
.ikon:hover{background:var(--flaeche-2); color:var(--tinte)}
.ikon svg{width:20px;height:20px;display:block}

.inhalt{flex:1; overflow-y:auto; padding:0 18px 24px; display:flex; flex-direction:column; gap:14px}

/* ---------- Untere Leiste + virtuelle Tastatur ----------
   Ist die Tastatur da, verschwindet die Leiste: sonst schiebt die Tastatur
   sie ueber das Feld, in dem gerade getippt wird.

   MASSGEBLICH ist seit dem 2026-09-01 `.app.keyboard-open` -- start.js misst
   die Tastatur am `visualViewport` und setzt die Klasse. Die Fokusregel
   darunter ist nur noch der RUECKFALL fuer Browser ohne visualViewport und
   fuer den Fall, dass das Skript gar nicht laeuft. */
nav.bottom-nav{
  flex:none; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linie); background:var(--flaeche);
  /* `env(...)` ist hier eine VERSICHERUNG, keine Rechnung.

     Seit `viewport-fit=cover` raus ist (2026-09-02), ist der Ausschnitt die
     nutzbare Flaeche und dieser Einzug meldet 0 -- die 14px sind wieder das,
     was sie immer waren: Gestaltungsabstand.

     Stehen bleibt er trotzdem, weil ein Browser das randlose Zeichnen auch von
     sich aus erzwingen kann (Android 15 tut das fuer Apps). Traete das ein,
     lagen die Knoepfe unter der Systemleiste -- und seit `overflow:hidden` kann
     man die Leiste nicht mehr hochschieben. Dann meldet `env` einen Wert, und
     die Knoepfe weichen von selbst.

     Was hier NICHT stehen darf, ist eine Zahl fuer ein bestimmtes Geraet.
     Genau daran ist der erste Anlauf gescheitert: 56 px Ueberhoehe und 56 px
     Polster hoben sich auf Jess' S24 gegenseitig auf und woanders nicht. */
  padding:6px 4px calc(14px + env(safe-area-inset-bottom));
}
nav.bottom-nav button{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--schwach);font-size:11px;font-weight:500;border-radius:8px;position:relative}
nav.bottom-nav button svg{width:22px;height:22px}
nav.bottom-nav button[aria-current="true"]{color:var(--akzent)}
nav.bottom-nav .zaehler{position:absolute; top:1px; right:calc(50% - 20px); min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--schlecht); color:#fff; font-size:10.5px; font-weight:600; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono)}
/* Der gemessene Weg. `keyboard-open` setzt start.js:aktualisiereTastatur,
   sobald visualViewport meldet, dass unten Platz weggenommen wird.

   Bis zum 2026-09-01 stand diese Klasse hier im CSS und wurde von NIEMANDEM
   gesetzt -- eine tote Verzweigung, dieselbe Fehlerklasse wie die toten
   Knoepfe. */
.app.keyboard-open nav.bottom-nav{visibility:hidden}

/* Der Rueckfall, und er greift NUR ohne Messung (`:not(.tastatur-gemessen)`,
   gesetzt von start.js, sobald visualViewport da ist).

   Warum er ueberhaupt bleibt: ohne JS oder ohne visualViewport gaebe es sonst
   gar keine Regel mehr, und die Tastatur schoebe die Leiste wieder ueber das
   Feld. Warum er NICHT mehr die Hauptregel ist: Fokus ist kein Beweis fuer
   eine Tastatur. An einem Rechner, an einem angesteckten Keyboard, an einem
   readonly-Feld verschwand die Leiste, obwohl nie eine kam.

   NUR bei einem Feld, in das man tippt -- nicht bei jedem Fokus.
   Gemessen am 2026-08-31, nachdem Jess dreimal gemeldet hatte, dass der
   ERSTE Tipp auf einen Knopf nichts tut ausser "das Fenster wackeln":

     vor dem Fokus    Knopf y=412  sichtbarer Bereich 500  Leiste da
     nach dem Fokus   Knopf y=482  sichtbarer Bereich 570  Leiste weg
     -> der Knopf wandert 70 px unter dem Finger weg, bei 46 px Hoehe

   `:focus-within` griff bei JEDEM Element -- auch bei einem Knopf. Der
   bekommt beim Antippen den Fokus, die Leiste verschwindet, `#inhalt` wird
   70 px hoeher, der Browser klemmt scrollTop auf das neue Maximum, und der
   Klick landet neben dem Knopf. Beim zweiten Tipp ist die Leiste schon weg,
   nichts springt, und es klappt -- genau das Muster aus Jess' Bericht.

   Ein Knopf oeffnet keine Tastatur. Ausgenommen sind deshalb auch die
   Feldarten, die keine bringen: Datum, Kreuzchen, Auswahl, Datei. */
.app:not(.tastatur-gemessen):has(.erfassung textarea:focus) nav.bottom-nav,
.app:not(.tastatur-gemessen):has(.erfassung input:not([type="date"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus) nav.bottom-nav{visibility:hidden}

/* `visibility` und nicht `display` -- der Unterschied ist der ganze Punkt.
   `display:none` nimmt der Leiste ihren PLATZ, `#inhalt` wird 70 px hoeher,
   der Browser klemmt scrollTop auf das neue Maximum, und alles springt. Das
   passiert in BEIDE Richtungen und wurde am 2026-08-31 zweimal gemessen:

     Knopf antippen   -> Leiste weg  -> Inhalt springt -> Klick geht daneben
     ins Feld tippen, dann auf einen Knopf
                      -> Feld verliert den Fokus beim Druck
                      -> Leiste kommt ZURUECK -> Inhalt springt zurueck
                      -> `mouseup` landet auf <div id="app">, gemessen

   Mit `visibility:hidden` bleibt der Platz stehen: die Leiste ist weg und
   verdeckt kein Eingabefeld mehr -- aber unter dem Finger bewegt sich nichts.
   Die 70 px, die man dabei nicht gewinnt, sind der Preis dafuer, dass jeder
   erste Tipp sitzt.

   Wichtig: fuer tablose Bildschirme gilt weiterhin `display:none`, denn dort
   raeumt `[hidden]` die Leiste ganz weg -- und dabei springt nichts, weil
   kein Fokuswechsel im Spiel ist. */

/* ---------- Kategoriezeile: Auswahl + „Neue Kategorie" ----------
   Von Jess am 2026-08-31 am Geraet gefunden: vom Auswahlfeld war nur noch das
   Pfeilchen zu sehen, der Knopf daneben nahm die ganze Breite.

   Die Ursache steckte in zwei Regeln, die einzeln richtig sind. `.knopf` hat
   `width:100%` (jeder Knopf in diesem Projekt ist sonst ein Blockknopf), und
   die Zeile gab dem Knopf `flex:none` -- also `flex:0 0 auto`, und die
   Grundgroesse kommt dann aus `width`. Der Knopf forderte damit 100 % der
   Zeile fuer sich; fuer die Auswahl blieb nichts, und `.wachse` traegt
   `min-width:0`, schrumpfte also klaglos auf null statt umzubrechen.

   Auf einem breiten Bildschirm faellt das nicht auf -- da ist Platz genug.
   Deshalb ist es durch jede Abnahme gekommen: die Bildschirmentwuerfe kennen
   diese Zeile gar nicht, sie ist beim Bauen dazugekommen.

   Jetzt: der Knopf ist so breit wie sein Text, die Auswahl bekommt den Rest
   und faellt nie unter 150px -- reicht der Platz nicht, rutscht der Knopf in
   die naechste Zeile. */
.katzeile{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end}
.katzeile .auswahl{flex:1 1 150px; min-width:150px}
.katzeile .knopf{flex:0 0 auto; width:auto}

/* Abschnitte -- die Zeitstuecke einer Buchung (Entwurf Abschnitte, 6).
   Die Zeile muss bei 360 px lesbar bleiben UND zwei Zeitfelder samt Knopf
   tragen: flex-wrap statt fester Spalten, damit der Knopf notfalls auf eine
   eigene Zeile rutscht statt die Felder auf das Pfeilchen zu quetschen --
   genau der Fehler, den die Kategoriezeile am 2026-08-31 hatte. */
.zeitstuecke{display:flex; flex-direction:column; gap:8px}
.zeitstueckliste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.zeitstueck{background:var(--flaeche-2); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px}
.zeitpaar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.zeitpaar input[type="time"]{flex:0 1 auto; width:auto; min-width:96px}
.zeitpaar .knopf{flex:0 0 auto; width:auto}
.knopf.schmal{padding:8px 12px; font-size:13px}
/* Die Marke selbst ist klein und ruhig -- sie zeigt an, sie schreit nicht.
   Der lesbare Text daneben ist der eigentliche Traeger (Barrierefreiheit). */
.marke{font-family:var(--font-mono); font-weight:700; color:var(--warte); font-size:15px}
/* Ein PLUS wird hervorgehoben, ein Minus steht ruhig daneben: nur die eine
   Richtung hat einen Anreiz (Entwurf 3.2). */
.hervor{color:var(--warte); font-weight:600}

/* ---------- Bausteine ---------- */
/* Dreifachschalter fuer die Darstellung */
.segment{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:12px; background:var(--flaeche-2); border:1px solid var(--linie)}
.segment button{padding:9px 4px; border:0; border-radius:9px; background:none; color:var(--gedaempft); font-size:13.5px; font-weight:500; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px}
.segment button svg{width:19px; height:19px}
/* Die Sprachwahl hat so viele Knoepfe, wie es Kataloge gibt -- feste
   drei Spalten wuerden ab der vierten Sprache quetschen. */
.segment.sprachen{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.segment button[aria-pressed="true"]{background:var(--flaeche); color:var(--tinte); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.10)}

.karte{background:var(--flaeche-2); border:1px solid var(--linie); border-radius:14px; padding:14px}
.karte.flach{background:none}
.zeile{display:flex; align-items:center; gap:12px}
.spalte{display:flex; flex-direction:column; gap:10px}
.wachse{flex:1; min-width:0}
.klein{font-size:12.5px; color:var(--gedaempft); line-height:1.5}
.mini{font-size:11.5px; color:var(--schwach); line-height:1.5}
.eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--schwach); font-weight:600}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.trenner{height:1px; background:var(--linie); margin:2px 0}
h3.abschnitt{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--schwach); font-weight:600; margin:8px 0 -4px}

.knopf{display:block; width:100%; padding:14px; border-radius:12px; border:1px solid transparent; background:var(--tinte); color:var(--flaeche); font-weight:600; font-size:15px; cursor:pointer}
.knopf:hover{opacity:.9}
.knopf:disabled{opacity:.4; cursor:not-allowed}
.knopf.zweit{background:none; color:var(--tinte); border-color:var(--linie-stark)}
.knopf.gut{background:var(--gut); color:#fff}
.knopf.gefahr{background:none; color:var(--schlecht); border-color:var(--schlecht)}
.knopf.text{background:none; color:var(--akzent); border:0; font-weight:500; padding:10px; font-size:14px}
.knopfreihe{display:flex; gap:10px}
.knopfreihe .knopf{flex:1}

label.feld{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--gedaempft)}
label.feld input,label.feld select,label.feld textarea{
  padding:11px 12px; border-radius:10px; border:1px solid var(--linie-stark); background:var(--flaeche);
  font-size:15px; font-weight:400; color:var(--tinte); width:100%}
label.feld textarea{resize:vertical; min-height:74px; line-height:1.5}
label.feld .hint{font-weight:400; font-size:11.5px; color:var(--schwach)}
.gesperrt{padding:11px 12px; border-radius:10px; border:1px dashed var(--linie-stark); background:var(--flaeche-2); color:var(--gedaempft); font-size:15px}

.marke{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap}
.marke.gut{background:var(--gut-schwach); color:var(--gut)}
.marke.warte{background:var(--warte-schwach); color:var(--warte)}
.marke.schlecht{background:var(--schlecht-schwach); color:var(--schlecht)}
.marke.neutral{background:var(--flaeche-2); color:var(--gedaempft); border:1px solid var(--linie)}
.marke.hinweis{background:none; color:var(--gedaempft); border:1px dashed var(--linie-stark)}

.punkt{width:9px; height:9px; border-radius:50%; flex:none}
.eintrag{display:flex; gap:11px; align-items:flex-start; padding:12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); cursor:pointer; text-align:left; width:100%}
.eintrag:hover{border-color:var(--linie-stark)}
.eintrag .pfeil{color:var(--schwach); font-size:17px; align-self:center}
.eintrag .titelzeile{display:flex; align-items:baseline; gap:8px}
.eintrag .titelzeile .dauer{font-family:var(--font-mono); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.markenreihe{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; align-items:center}

.chips{display:flex; gap:6px; overflow-x:auto; padding:0 18px 2px; margin:0 -18px; flex:none}
.chips button{flex:none; padding:6px 12px; border-radius:999px; border:1px solid var(--linie-stark); background:none; font-size:13px; color:var(--gedaempft); cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--tinte); color:var(--flaeche); border-color:var(--tinte); font-weight:600}

.streifen{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.45; flex:none}
.streifen.warn{background:var(--warte-schwach); color:var(--warte)}
.streifen.info{background:var(--akzent-schwach); color:var(--akzent)}
.streifen.err{background:var(--schlecht-schwach); color:var(--schlecht)}
.streifen.gut{background:var(--gut-schwach); color:var(--gut)}
.streifen svg{width:17px;height:17px;flex:none}

/* ---------- Uhr ----------
   Der runde Knopf sass in einem flex-column-Container ohne flex-shrink:0 --
   sobald Offline-Streifen und Warteschlange darunter kamen, hat ihn der
   Container zum Ei gequetscht. aspect-ratio haelt ihn rund, flex-shrink:0
   haelt ihn gross. */
.uhrfeld{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:34px 0 26px; flex:none}
.uhrzahl{font-family:var(--font-mono); font-size:52px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.uhrzahl.ruht{color:var(--schwach)}
.uhrunter{font-size:13px; color:var(--gedaempft); text-align:center}

.btn-start,.btn-stop{
  flex-shrink:0;
  aspect-ratio:1 / 1;
  width:var(--btn-circle-size);
  height:var(--btn-circle-size);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:0; cursor:pointer;
  font-size:21px; font-weight:700; letter-spacing:.06em;
}
.btn-start{background:var(--tinte); color:var(--flaeche)}
.btn-stop{background:var(--schlecht); color:#fff}
.pulsring{position:relative; flex-shrink:0; width:var(--btn-circle-size); margin:0 auto}
.pulsring::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--schlecht); opacity:.3; animation:puls 2.4s ease-out infinite; pointer-events:none}
@keyframes puls{0%{transform:scale(.96);opacity:.42}100%{transform:scale(1.06);opacity:0}}

/* ---------- Anteile ---------- */
.balken{display:flex; gap:2px; height:38px; margin:4px 0 2px}
.balken span{border-radius:2px}
.balken span:first-child{border-radius:5px 2px 2px 5px}
.balken span:last-child{border-radius:2px 5px 5px 2px}
.anteilzeile{display:flex; align-items:center; gap:10px; padding:9px 0}
.anteilzeile+.anteilzeile{border-top:1px solid var(--linie)}
.anteilzeile .pz{font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; font-size:15px}
.anteilzeile .wert{font-family:var(--font-mono); font-size:12px; color:var(--gedaempft); font-variant-numeric:tabular-nums}

.kv{display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:14px}
.kv+.kv{border-top:1px solid var(--linie)}
.kv dt{color:var(--gedaempft)}
.kv dd{margin:0; text-align:right; font-weight:500}

.stimmen{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex:none}

.marke-block{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.marke-block img{max-width:220px; max-height:96px; object-fit:contain}
.marke-name{font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.marke-produkt{font-size:11.5px; color:var(--schwach); letter-spacing:.04em}

.logofeld{display:flex; align-items:center; gap:12px; padding:12px; border:1px dashed var(--linie-stark); border-radius:12px; background:var(--flaeche-2)}
.logofeld .probe{width:92px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden}
.logofeld .probe img{max-width:100%; max-height:100%; object-fit:contain}
.logofeld .probe.hell{background:#ffffff}
.logofeld .probe.dunkel{background:#0e1116}
.logofeld .probe .fehlt{font-size:10.5px; color:#8a93a3}
.logofeld input[type="file"]{display:none}
.logofeld .waehlen{border:1px solid var(--linie-stark); background:var(--flaeche); border-radius:9px; padding:8px 12px; font-size:13px; cursor:pointer}

.leer{text-align:center; color:var(--schwach); font-size:13px; padding:34px 10px; line-height:1.6}

/* Was schon entschieden ist (2026-09-20). Bewusst RUHIGER als die offenen
   Zeilen darueber: der obere Teil will eine Handlung, der untere ist ein
   Nachweis. Gleiche Groesse haette beide gleich wichtig gemacht -- und der
   Bildschirm heisst "Freigaben", nicht "Archiv". */
.zeile.erledigt{padding:8px 2px; border-bottom:1px solid var(--linie)}
.zeile.erledigt:last-child{border-bottom:0}
.zeile.erledigt .wachse > div:first-child{font-size:13.5px; color:var(--gedaempft)}
.erledigt-zeichen{flex:none; width:18px; text-align:center; font-size:14px;
  color:var(--schwach); font-variant-numeric:tabular-nums}
.fuss{margin-top:auto; padding-top:22px; text-align:center}
.fuss .kennung{font-family:var(--font-mono); font-size:11px; color:var(--schwach); user-select:all}

.sprung-mobil{display:none}