/* ============================================================================================
   Kontor am Tresen — die Bauteile aus adb/03-UX-DESIGN.md §5.
   Was hier nicht steht, gibt es nicht (§5, erster Satz).

   ORDNUNG DIESER DATEI = ORDNUNG DER BAUANLEITUNG
     0  Grundlage und Raster (§4)
     1  Kopfzeile, Kapitelmarke, Kolumnentitel   §5.1
     2  Widget in drei Groessen                  §5.2
     3  Symbolkachel                             §5.3
     4  Plakette                                 §5.4
     5  Dock und Leiste                          §5.5
     6  Seitenpunkte                             §5.6
     7  Suche                                    §5.7
     8  Gruppierte Liste                         §5.8
     9  Segmentwaehler                           §5.9
    10  Bottom-Sheet                             §5.10
    11  Formularzeile                            §5.11
    12  Wischgeste                               §5.12
    13  Knoepfe                                  §5.13
    14  Leerzustand                              §5.14
    15  Ladezustand                              §5.15
    16  Fehlerzustand und Toast                  §5.16
    17  Der erklaerende Satz                     §5.17
    18  Der Anteilsbalken                        §5.18

   DREI REGELN, DIE IN JEDER ZEILE GELTEN
   §3.3  Kein font-size in dieser Datei. Schriftgroessen kommen ausschliesslich aus den
         Stufenklassen in tokens.css (.s1..s8, .z1..z7, .t1..t5, .v1..v8, dazu die vier
         benannten Sonderstufen .feldschrift, .wischschrift, .auswahlschrift,
         .summenschrift). Ein font-size hier waere eine Groesse ausserhalb der Tabelle und
         damit ein Fehler.
   §2    Keine Farbe als Literal. Auch nicht die, die §5 woertlich nennt: solange sie hier
         als Literal steht, hat eine Ansicht kein Vorbild und schreibt sich ihre eigene.
         Genau so ist #fff in view-mitarbeiter.css entstanden. Farben kommen aus tokens.css.
         Zwei Ausnahmen stehen noch hier, beide mit Paragraf im Kommentar: die Papierwaerme
         (§2.8, ein Lichtschein, kein Zustand) und der Schlagschatten des Schalterknopfs
         (§5.11a, neutral schwarz — keine Farbe im Sinn von §2).
   §4.1  Abstaende nur aus 2 · 4 · 6 · 8 · 12 · 16 · 20 · 28 · 40 px. Ausgenommen sind die
         in §5 woertlich genannten Bauteilmasse (Hoehen, Breiten, Versaetze) und
         env(safe-area-inset-*). Jedes solche Mass traegt hier den Paragrafen im Kommentar.
   ============================================================================================ */

/* ============================================================================================
   0  GRUNDLAGE UND RASTER
   ============================================================================================ */

.kontor,
.kontor *,
.kontor *::before,
.kontor *::after {
  box-sizing: border-box;
}

.kontor {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  position: relative;
  /* §7.8 / O-4: eine Spalte, zentriert, Hoechstbreite 430 px. Der Rechner bekommt
     dieselbe Oberflaeche, nur mit Rand. */
  max-width: 430px;
  margin: 0 auto;
  transition: background-color var(--t-thema) var(--ease), color var(--t-thema) var(--ease);
}

/* §2.8 Papierwaerme — zwei sehr blasse Lichter. Beleuchtung, kein Zustand:
   pointer-events none, z-index 0, nichts darf darauf beruhen. */
.kontor::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--waerme);
  background-image:
    radial-gradient(circle at 16% 6%, var(--brass-wash), transparent 46%),
    radial-gradient(circle at 96% 0%, rgba(155, 2, 23, .045), transparent 40%);
}

.kontor > * {
  position: relative;
  z-index: 1;
}

/* §4.1 Das 4-Spalten-Raster. Bei 390 px Fenster: Inhaltsbreite 350 px,
   Spalte = (350 - 3 x 12) / 4 = 78,5 px. */
.k-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
}

.k-spalten-2 { grid-column: span 2; }
.k-spalten-4 { grid-column: span 4; }

/* Der Seitenrand (§4.1: --pad = 20 px). */
.k-rand {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---- Die Huelle jeder Ansicht ausser Start (seitenRahmen in parts.js) ----------------------
   Vorher stand dieser Rahmen fuenfmal in vier Ansichtsdateien: .gb-blatt, .k-buch,
   .d-blatt, .k-einst, .k-c-seite. Es war jedes Mal dasselbe Blatt: es scrollt senkrecht,
   unten steht die feste Leiste (§5.5), links und rechts deckt es die alte Oberflaeche ab.
   Jetzt steht es einmal hier.

   Der untere Innenabstand ist genau die Leiste: 64 px sind ihr in §5.5 woertlich genanntes
   Bauteilmass (§4.1 nimmt solche Masse von der Abstandsskala aus). */
.k-seite {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* Links und rechts der 430-px-Spalte schiene sonst die Flaeche der ALTEN Oberflaeche durch
   — public/app.css faerbt den <body> mit ihrem eigenen --paper. Faellt ersatzlos weg,
   sobald die alte Oberflaeche verschwindet. */
.k-seite::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
}

/* Das Blatt scrollt selbst (data-scrollt). Ohne das haengt kolumneVerhalten() seinen
   Zuhoerer an <html>, und dorthin steigt ein Dokument-Scrollereignis nie ab. */
.k-seite-blatt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.k-seite-blatt > .k-rand {
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 40px;
}

/* Der Kolumnentitel klebt (position: sticky) und naehme sonst 50 px Fliessraum ein, die
   oben als leere Bank stuenden, solange er unsichtbar ist. Er wird um genau seine eigene
   Bauteilhoehe aus §5.1 zurueckgezogen. */
.k-seite-blatt > .k-kolumne {
  margin-bottom: calc(0px - 50px - env(safe-area-inset-top));
}

/* ============================================================================================
   SEITENTITEL                                                                         §3.3
   HELDENZAHL                                                                       §7.1 R5
   Beide fuellen den `kopf`-Schlitz von seitenRahmen(). Die Heldenzahl gab es dreimal —
   .gb-held (Kassa), .k-buch-held (Rechnungen), .k-c-held (Preisentwicklung) — mit drei
   verschiedenen Abstaenden fuer dieselbe Rolle. Hier steht sie einmal.
   ============================================================================================ */

/* S1 links, die Nur-lesen-Marke rechts. Der Kolumnentitel darueber steht sticky und blendet
   sich beim Scrollen ein — deshalb hier oben nur wenig Abstand. */
.k-seitentitel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 12px;
}

/* Kein Papier, kein Rahmen: die Zahl steht frei, damit sie nicht mit dem Widget darunter um
   dieselbe Bauform streitet (§7.1 R5). */
.k-held {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 12px;
}

.k-held-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Zeitangabe und Stueckzahl stehen zusammen rechts, nicht auseinandergezogen. */
.k-held-zusatz {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
}

.k-held-zahl {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* §4.4 Trefferflaechen: sichtbar darf kleiner sein, die Flaeche wird ausgeweitet.
   Jede Trefferflaeche in dieser Datei geht ueber diese eine Klasse. */
.k-treffer {
  position: relative;
}

.k-treffer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Alles Bedienbare ist ein Knopf oder ein Link ohne Browser-Zutaten.
   :where() macht diesen Zuruecksetzer spezifitaetslos. Ohne das haette `.kontor button`
   (0,1,1) mehr Gewicht als jede Bauteilklasse (0,1,0) und wuerde deren padding, border
   und text-align wieder wegnehmen — genau der Fehler, der beim ersten Musterbogen die
   Listenzeilen auf halbe Hoehe gedrueckt und dem Zweitknopf den Rand genommen hat. */
:where(.kontor button, .kontor a) {
  font: inherit;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

:where(.kontor button) {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

/* Die alte Oberflaeche setzt in public/app.css Regeln auf BLANKE Elemente, und die gelten
   dokumentweit — auch hier drin:
     button, .nav-btn, .ghost, .primary { min-height: 44px }   (app.css:74)
     label { display:block; font-size:.85rem; font-weight:600; margin-bottom:8px }  (app.css:218)
     h1 { font-family: var(--sans); font-weight: 800; margin: 6px 0 10px }  (app.css:207)
   Gemessen hat das jede Kapitelmarke von 14 auf 44 px gebracht und die Suchpille von 34
   auf 44 — Seite 1 lief dadurch um 97 px ueber.
   Hier stehen die Regeln zurueck. :where() haelt die Spezifitaet auf (0,0,1) — genauso
   hoch wie die alte Regel, aber diese Datei wird spaeter geladen und gewinnt deshalb;
   und jede Bauteilklasse (0,1,0) gewinnt ueber beide, also behalten .k-zeile und
   .k-verweis ihre eigenen 44 px Mindesthoehe.
   Diese sechs Zeilen fallen ersatzlos weg, sobald die alte Oberflaeche verschwindet. */
:where(.kontor) button { min-height: 0; }
:where(.kontor) label { display: block; font-size: inherit; font-weight: inherit; margin-bottom: 0; }
:where(.kontor) h1,
:where(.kontor) h2,
:where(.kontor) h3,
:where(.kontor) p { margin: 0; font-family: inherit; font-weight: inherit; }

.kontor :focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

.k-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================================================
   1  KOPFZEILE MIT KAPITELMARKE                                                        §5.1
   ============================================================================================ */

/* Zeile 1: Datum links, 1-px-Linie als Zwischenraum, Name rechts. */
.k-kopf-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.k-kopf-zeile .k-sp {
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

.k-kopf-wer {
  color: var(--brass-ink);
  letter-spacing: +.140em;
}

/* Zeile 3: Titelstrich, 1 px, --ink, Deckkraft 0,8, Abstand 8 px. */
.k-kopf-strich {
  height: 1px;
  background: var(--ink);
  opacity: .8;
  margin-top: 8px;
}

/* Kapitelmarke: [Ziffer] [WORT] --------- [MEHR]
   20 px ueber der Marke, 6 px darunter, 8 px Luecke zwischen den Teilen. */
.k-kapitel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 6px;
}

.k-kapitel-linie {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Das Verweiswort rechts ist antippbar (44 px hoch). Die Kapitelmarke selbst ist kein Knopf. */
.k-kapitel-mehr {
  color: var(--brass-ink);
  flex: 0 0 auto;
}

.k-kapitel-mehr::after {
  right: -8px;
  left: -8px;
}

/* Mitlaufender Kolumnentitel: 50 px hoch plus safe-area, Milchglas,
   1-px-Fortschrittsstrich in --brass an der Unterkante. */
.k-kolumne {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(50px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--pad) 0;
  display: flex;
  align-items: center;
  background: var(--milch);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-kolumne) var(--ease), transform var(--t-kolumne) var(--ease);
}

.k-kolumne.k-an {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.k-kolumne::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: var(--k-fortschritt, 0%);
  background: var(--brass);
}

/* ============================================================================================
   2  WIDGET IN DREI GROESSEN                                                           §5.2
   Ein Widget ist Papier. Es steht auf dem 4-Spalten-Raster.
   Ein Widget ist immer ein Link auf genau eine Ansicht und traegt NIE eine Plakette.
   ============================================================================================ */

.k-widget {
  display: block;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
  transition: background-color var(--t-gedrueckt) var(--ease);
}

html.dark .k-widget {
  border-color: var(--rule);
}

.k-widget:active {
  background: var(--brass-wash);
}

/* Groessen (§5.2). Die Mindesthoehen sind Bauteilmasse, keine Abstaende. */
.k-w-s {
  grid-column: span 2;
  min-height: 58px;
}

.k-w-m {
  grid-column: span 4;
  min-height: 96px;
}

.k-w-l {
  grid-column: span 4;
  min-height: 148px;
}

/* Kopfreihe: Beschriftung links, Zeitangabe rechts. */
.k-w-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.k-w-kopf > i {
  font-style: normal;
  letter-spacing: +.090em;
  font-weight: 500;
  flex: 0 0 auto;
}

/* Die Zahl. Waehrungszeichen davor als <span class="einheit">. */
/* Der Zusatz (T5) steht neben der Zahl, solange er neben sie passt, sonst darunter.
   Gemessen: "€ 150,00" plus "Letzter Tag" passt in einem 169 px breiten W-S nicht in eine
   Zeile — ohne Umbruch stuende der Zusatz zweizeilig und gequetscht neben der Zahl. */
.k-w-zahl {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ink);
}

.k-w-zahl > i {
  white-space: nowrap;
}

/* Deltazeile: Zustandswort + Pfeil + Prozent + Vergleichszeitraum. */
.k-w-delta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sage-ink);
}

.k-w-delta.k-kritisch {
  color: var(--ember-ink);
}

.k-w-delta .ico {
  width: 12px;
  height: 12px;
}

.k-w-delta u {
  text-decoration: none;
  color: var(--ink-3);
  font-weight: 400;
}

/* Verlaufslinie: 27 px hoch, preserveAspectRatio none. Der laufende Zeitraum steckt im
   Wert, nicht in der Kurve. Ohne Zeitreihe wird sie NICHT gezeichnet — eine erfundene
   Kurve waere eine Behauptung ueber Zahlen, die wir nicht haben. */
.k-w-linie {
  margin-top: 4px;
  display: block;
  width: 100%;
  height: 27px;
  color: var(--ink-2);
}

/* Fusszeile: 1 px oben, 6 px Abstand, Text links, gepunktete Fuehrung, Wert rechts. */
.k-w-fuss {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-3);
}

.k-w-fuss b {
  color: var(--ink-2);
  flex: 0 0 auto;
}

/* Zustand "kritisch" am W-S: 2 px Zustandskante oben (§4.3). Das ist der Zustand,
   den die Bauanleitung "Zaehlwerk hot" nennt. */
.k-w-s.k-heiss {
  border-top: 2px solid var(--ember);
}

.k-w-s.k-heiss .k-w-kopf,
.k-w-s.k-heiss .k-w-zahl {
  color: var(--ember-ink);
}

/* Leer, Laedt, Fehler: Rahmen und Beschriftung bleiben stehen, statt der Zahl ein Satz. */
.k-w-satz {
  margin-top: 6px;
  color: var(--ink-3);
  display: block;
}

.k-w-satz.k-fehler {
  color: var(--ember-ink);
}

/* Punktfuehrung (§5.8), hier und in der Liste dieselbe. */
.k-fuehrung {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--rule);
  margin-bottom: 6px;
  min-width: 12px;
}

/* ============================================================================================
   3  SYMBOLKACHEL                                                                      §5.3
   Quadrat 50 x 50, Radius 14, Glyph 23 x 23. Beschriftung 6 px darunter, S7, hoechstens
   zwei Zeilen. Ganze Zelle = Trefferflaeche (78,5 x >= 74 px).
   Gesperrt gibt es nicht: wer etwas nicht darf, sieht es nicht.
   ============================================================================================ */

.k-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 0;
}

.k-quadrat {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  transition: transform var(--t-knopf) var(--ease);
}

.k-quadrat .ico {
  width: 23px;
  height: 23px;
  display: block;
}

.k-kachel:active .k-quadrat {
  transform: scale(.92);
}

.k-name {
  text-align: center;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* §2.6 Kachelflaechen — Messing in zwei Helligkeitsstufen, vier Deckungsgrade.
   PRUEFREGEL: In der gesamten Kachel-CSS kommt genau EIN RGB-Tripel je Modus vor.
   Es steht in tokens.css als --kachel-rgb und wird hier viermal mit anderer Deckung
   gelesen. Ein zweiter Farbton in einer Kachelflaeche ist ein Fehler. */
.k-g-geld .k-quadrat { background: rgba(var(--kachel-rgb), var(--a-geld)); }
.k-g-beleg .k-quadrat { background: rgba(var(--kachel-rgb), var(--a-beleg)); }
.k-g-betrieb .k-quadrat { background: rgba(var(--kachel-rgb), var(--a-betrieb)); }
.k-g-sys .k-quadrat { background: rgba(var(--kachel-rgb), var(--a-sys)); }

.k-kachel .k-quadrat {
  border: 1px solid rgba(var(--kachel-rgb), .30);
  color: var(--kachel-glyph);
}

/* ============================================================================================
   4  PLAKETTE                                                                          §5.4
   Plaketten zaehlen, sie rechnen nicht. Geld steht nie in einer Plakette.
   0 oder leer -> das Element existiert nicht im DOM (das entscheidet parts.js).
   ============================================================================================ */

.k-plakette {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--ember);
  color: var(--plakette-ink);
  display: grid;
  place-items: center;
  border: 1.5px solid var(--paper);
  white-space: nowrap;
}

/* Aufziehen: genau einmal je Ladevorgang, alle gleichzeitig, ohne Versatz (§6.2). */
.k-zieht-auf .k-plakette {
  animation: k-plakette-auf var(--t-plakette) var(--spring) both;
}

@keyframes k-plakette-auf {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================================================
   5  DOCK UND LEISTE                                                                   §5.5
   Das Dock wechselt nie den Inhalt — auch nicht beim Blaettern der Seiten.
   ============================================================================================ */

.k-dock {
  margin: 0 -6px 4px;
  padding: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  border-radius: 20px;
}

html.dark .k-dock {
  background: var(--paper-2);
}

.k-dock .k-quadrat {
  width: 48px;
  height: 48px;
}

.k-dock .k-kachel {
  min-height: 72px;
}

/* Plakettenring in der Flaeche darunter (§5.4). */
.k-dock .k-plakette {
  border-color: var(--paper-3);
}

html.dark .k-dock .k-plakette {
  border-color: var(--paper-2);
}

/* Rueckt das Dock auf drei Zellen zusammen, bleibt es zentriert (§5.5). */
.k-dock .k-raster {
  justify-content: center;
}

.k-dock-3 { grid-template-columns: repeat(3, 78.5px); justify-content: center; }
.k-dock-2 { grid-template-columns: repeat(2, 78.5px); justify-content: center; }
.k-dock-1 { grid-template-columns: repeat(1, 78.5px); justify-content: center; }

/* Die Leiste auf allen anderen Ansichten (§5.5): 64 px hoch, Milchglas, 1 px oben. */
.k-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 0 var(--pad) env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  /* §4.4 will zwischen Bedienelementen OHNE Rahmen 24 px. 20 px ist die Untergrenze, aus
     der space-between mit dem uebrigen Platz mehr macht — statt dass die Ziele links
     zusammenkleben und rechts eine leere Haelfte bleibt. */
  gap: 20px;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  background: var(--milch);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  max-width: 430px;
  margin: 0 auto;
}

.k-leiste-ziel {
  color: var(--ink-3);
  position: relative;
  padding: 12px 0;
  white-space: nowrap;
}

.k-leiste-ziel.k-an {
  color: var(--ink);
}

.k-leiste-ziel.k-an::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brass);
}

/* Die eine Marke der ganzen App (§5.13): "Beleg scannen" rechts in der Leiste. */
.k-marke {
  margin-left: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: var(--marke-schatten);
  flex: 0 0 auto;
  transition: transform var(--t-knopf) var(--ease);
}

.k-marke:active {
  transform: scale(.92);
}

.k-marke .ico {
  width: 20px;
  height: 20px;
}

/* ============================================================================================
   6  SEITENPUNKTE                                                                      §5.6
   Jeder Punkt ist ein Knopf mit 44 x 44 px Trefferflaeche — die Pflicht-Alternative
   zur Geste. Bei nur einer Seite steht die Reihe nicht da (das entscheidet parts.js).
   ============================================================================================ */

.k-punkte {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 44px;
}

.k-punkt {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 -19.5px;
}

.k-punkt > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rule);
  display: block;
  transition: background-color var(--t-gedrueckt) var(--ease);
}

.k-punkt[aria-current="true"] > i {
  background: var(--brass);
}

/* ---- Die Blaetterzeile langer Listen -----------------------------------------------------
   §5 kennt kein Blaetter-Bauteil, deshalb hat es JEDE Gruppe erfunden: .k-c-blattern
   (Artikel), .gb-blaettern (Umsaetze), .k-buch-blaettern (Rechnungen) — drei Klassen, drei
   Regelsaetze, dieselben fuenf Zeilen (flex, center, space-between, gap 12px, Abstand nach
   oben 16/20/20 px). Hier steht sie einmal, mit 20 px, dem Wert der zwei von dreien.
   Die drei alten Regeln sind aus den Ansichts-CSS geloescht.
   ------------------------------------------------------------------------------------------ */

.k-blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}

/* Die Knoepfe behalten ihre Breite, der Stand in der Mitte gibt nach. */
.k-blaettern > .k-knopf {
  flex: 0 0 auto;
}

/* ============================================================================================
   7  SUCHE                                                                             §5.7
   ============================================================================================ */

/* Geschlossen: Pille 168 x 34 px, Trefferflaeche 44 px. */
.k-suchpille {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 168px;
  height: 34px;
  /* KEIN `margin: 0 auto`. Ein Bauteil setzt seine eigene Ausrichtung nicht — die Pille
     stand deshalb ueberall mittig, und view-rechnungen.css musste es Zeile fuer Zeile
     wieder zuruecknehmen. Wer sie mittig will, sagt es an seiner Stelle. */
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: var(--paper-2);
  color: var(--ink-3);
}

.k-suchpille .ico {
  width: 15px;
  height: 15px;
}

/* Die Zeile, in der die Pille steht: mittig, mit dem Abstand aus §4.4 nach oben und unten.
   Sie steht HIER und nicht in einer Ansicht, weil sie inzwischen an zwei Stellen gebraucht
   wird — auf dem Tresen und ueber der Lieferantenliste. Vorher stand sie als
   `.k-start-suche` in start.css; das war die erste Stelle, und solange es EINE war, war das
   richtig. Bei der zweiten waere es die zweite Fassung derselben drei Zeilen gewesen
   (§11.2). Die Werte sind unveraendert uebernommen. */
.k-suchzeile {
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

/* Offen: Ueberlagerung ueber die ganze Flaeche. */
.k-suchflaeche {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--milch);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
}

.k-such-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) var(--pad) 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.k-such-feld {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--ink-3);
}

.k-such-feld input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  color: var(--ink);
  font-family: var(--sans);
  min-width: 0;
}

/* Der Fokus liegt am FELD, nicht am nackten Eingabeelement: sonst stuenden zwei Rahmen
   ineinander (§5.11c "Fokus: Rand --brass, kein Leuchtring"). */
.k-such-feld:focus-within {
  border-color: var(--brass);
}

.k-such-feld input:focus-visible {
  outline: none;
}

/* Safari und Chrome haengen an type="search" ihren eigenen Loeschknopf. Wir haben einen
   eigenen (§5.7 nennt ihn ausdruecklich) — zwei Kreuze nebeneinander sind einer zu viel. */
.k-such-feld input::-webkit-search-cancel-button,
.k-such-feld input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.k-such-feld .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.k-such-leeren {
  width: 44px;
  height: 44px;
  margin-right: -12px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.k-such-koerper {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--pad) calc(40px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================================
   8  GRUPPIERTE LISTE                                                                  §5.8
   Das Arbeitspferd. Volle Breite von Seitenrand zu Seitenrand, kein Kasten, kein Radius.
   Eine Liste ist kein Kasten (§4.2).
   ============================================================================================ */

.k-abschnitt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 6px;
}

.k-abschnitt-linie {
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

.k-liste {
  display: block;
}

.k-zeile {
  display: block;
  width: 100%;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  min-height: 44px;
  position: relative;
  background: transparent;
  transition: background-color var(--t-gedrueckt) var(--ease);
}

.k-zeile:active {
  background: var(--brass-wash);
}

.k-zeile.k-aus {
  opacity: .3;
  pointer-events: none;
}

/* Kritisch: 2 px Marke links in --ember, 11 px oben und unten eingerueckt,
   die Zeile bekommt 12 px linken Innenabstand. */
.k-zeile.k-kritisch {
  padding-left: 12px;
}

.k-zeile.k-kritisch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 2px;
  background: var(--ember);
}

/* (a) Datenzeile */
.k-zeile-1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.k-zeile-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.k-zeile-betrag {
  flex: 0 0 auto;
  color: var(--ink);
}

.k-zeile-2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.k-zeile-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zustandswort mit Zeichen. Farbe traegt nie allein — es steht immer ein Wort daneben. */
.k-zustand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.k-zeichen {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.k-zustand-gut { color: var(--sage-ink); }
.k-zustand-gut .k-zeichen { background: var(--sage); }
.k-zustand-kritisch { color: var(--ember-ink); }
.k-zustand-kritisch .k-zeichen { background: var(--ember); }
.k-zustand-offen { color: var(--ink-3); }
.k-zustand-offen .k-zeichen { background: none; border: 1.5px solid var(--ink-3); }

/* (b) Verweiszeile */
.k-verweis {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color var(--t-gedrueckt) var(--ease);
}

.k-verweis:active {
  background: var(--brass-wash);
}

.k-verweis.k-mit-untertitel {
  min-height: 54px;
}

.k-verweis .k-verweis-kopf {
  flex: 1;
  min-width: 0;
}

.k-verweis .k-verweis-name {
  color: var(--ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-verweis-wert {
  flex: 0 0 auto;
  color: var(--ink-3);
}

.k-verweis-wert.k-aktiv {
  color: var(--brass-ink);
  font-weight: 600;
}

.k-verweis .ico {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.k-verweis-symbol {
  width: 23px;
  height: 23px;
  color: var(--kachel-glyph);
  flex: 0 0 auto;
}

/* Summenzeile: Linie oben 1 px --rule, Linie unten 2 px --ink. */
.k-summe {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 2px;
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
}

.k-summe .k-summe-wort {
  color: var(--ink);
  font-weight: 600;
}

/* §5.8: Wert eine Stufe groesser als Z5. Die Groesse steht jetzt als Stufe .summenschrift
   in tokens.css — hier bleibt nur, was Anordnung ist. */
.k-summe-wert {
  color: var(--ink);
  flex: 0 0 auto;
}

/* ============================================================================================
   9  SEGMENTWAEHLER                                                                    §5.9
   Reiter, kein Pillenschalter. Hoechstens 5 auf dem Telefon, mindestens 2.
   Text ODER Symbol, nie beides. Auswahl und Aktion nicht mischen.
   ============================================================================================ */

.k-segmente {
  position: sticky;
  top: calc(50px + env(safe-area-inset-top));
  z-index: 20;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--milch);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
}

.k-segment {
  padding: 16px 0 12px;
  min-height: 44px;
  color: var(--ink-3);
  position: relative;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.k-segment[aria-selected="true"] {
  color: var(--ink);
}

.k-segment[aria-selected="true"] > i {
  color: var(--brass-ink);
}

/* Der aktive Strich gleitet — eine Leiste, nicht vier Raender. */
.k-segment-strich {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brass);
  transition: transform var(--t-segment) var(--ease), width var(--t-segment) var(--ease);
}

/* Summenzeile am Waehler: wechselt mit dem Segment, nie mit dem Aufbau der Zeile darunter. */
.k-segment-summe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

/* ============================================================================================
   10  BOTTOM-SHEET MIT RASTPUNKTEN                                                    §5.10
   Nur ein Sheet gleichzeitig. Ein "Fertig" steht nie allein.
   ============================================================================================ */

.k-schleier {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--schleier);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-schleier) var(--ease);
}

.k-schleier.k-an {
  opacity: 1;
}

.k-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  max-width: 430px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--rule);
  box-shadow: var(--shadow);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  transform: translateY(101%);
  transition: transform var(--t-sheet) var(--ease);
}

.k-sheet.k-an {
  transform: translateY(0);
}

/* Rastpunkt mittel = 50 % der vollen Hoehe. */
.k-sheet.k-rast-mittel {
  height: 42vh;
}

.k-sheet.k-rast-gross {
  height: 84vh;
}

/* Griff: Pflicht, sobald das Sheet zwei Rastpunkte hat. 38 x 4 px, Radius 2 px. */
/* Ohne Griff (ein Rastpunkt) faengt das Blatt oben mit Luft an, nicht auf Kante. */
.k-sheet > .k-sheet-kopf:first-child {
  padding-top: 20px;
}

.k-griff {
  width: 100%;
  height: 20px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.k-griff > i {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  display: block;
}

.k-sheet-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--pad) 12px;
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}

/* §5.10 sagt an einer Stelle "Titel S4 links" und an einer anderen, mit HIG-Beleg,
   "Abbrechen/Schliessen LINKS oben, Fertig RECHTS oben". Beides zusammen geht nur, wenn
   der Titel in die Mitte rueckt. Der belegte Satz gewinnt; die Luecke ist in
   adb/03-UX-DESIGN.md §5.10 geschlossen. */
.k-sheet-titel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.k-sheet-koerper {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) calc(28px + env(safe-area-inset-bottom));
}

/* ---- §7.2 Der Schreibkonflikt --------------------------------------------------------------
   Er stand zweimal im Haus, mit VERTAUSCHTEN Knoepfen: wer in den Rechnungen gelernt hat,
   dass rechts gespeichert wird, verlor bei Mitarbeiter seine Eingabe. Jetzt steht er
   einmal, in shell.js, und diese Regeln gelten nur ihm.

   Er ist eine Frage mit zwei Antworten, kein Formular: er nimmt die Hoehe, die er braucht,
   hoechstens die eines grossen Sheets. Und er traegt KEIN data-sheet-schleier und KEIN
   data-sheet-zu — ein Konflikt hat genau zwei Ausgaenge, und beide stehen als Knopf da. */
.k-sheet.k-konflikt {
  height: auto;
  max-height: 84vh;
}

.k-konflikt-kopf {
  justify-content: center;
}

.k-konflikt-wert {
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}

/* D-K1: still LINKS, haupt RECHTS. So steht es ueberall sonst in der App, und die
   Hauptaktion rechts ist die Gewohnheit des Geraets.

   SIE HEISST NICHT MEHR .k-konflikt-knoepfe. Die Knopfreihe am Fuss eines Blattes ist
   nicht die Sache des Schreibkonflikts, sondern die Sache JEDES Dialogs, der eine Frage
   mit zwei Antworten stellt — seit §8 Zeile 27 sind das zwei: der Konflikt und das
   Abmelden. Eine zweite Reihe mit denselben Werten daneben waere die vierte Fassung
   derselben zwoelf Pixel gewesen (§11.2). */
.k-dialog-knoepfe {
  display: flex;
  gap: 12px;
  padding: 20px 0 8px;
}

.k-dialog-knoepfe > .k-knopf {
  flex: 1 1 0;
}

/* Die Frage selbst steht ueber den Knoepfen: ein Satz, keine Aufzaehlung. */
.k-dialog-frage {
  margin: 0;
  padding-top: 4px;
}

/* ============================================================================================
   11  FORMULARZEILE                                                                   §5.11
   Drei Bauformen, alle in der gruppierten Liste, alle mit Mindesthoehe 54 px.
   ============================================================================================ */

.k-form-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

.k-form-kopf {
  flex: 1;
  min-width: 0;
}

.k-form-name {
  color: var(--ink);
  display: block;
}

/* Ein <label> um ein echtes Feld: "Die ganze Zeile schaltet, nicht nur der Schalter". */
label.k-form-zeile {
  position: relative;
  cursor: pointer;
}

/* (a) Schalter: 46 x 28 px. Das Kaestchen selbst ist unsichtbar und traegt den Wert; der
   sichtbare Schalter haengt an seinem :checked. Vorher war das ein <button> mit
   aria-checked — der traegt keinen Wert, weshalb Einstellungen und Mitarbeiter je ein
   eigenes Feld daruntergelegt haben, das eine mit role="switch", das andere ohne. */
.k-schaltfeld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.k-schalter {
  width: 46px;
  height: 28px;
  border-radius: 9999px;
  background: var(--rule);
  padding: 3px;
  flex: 0 0 auto;
  transition: background-color var(--t-schalter) var(--ease);
}

.k-schalter > i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--weiss);
  /* §5.11a nennt diesen Schlagschatten woertlich; er ist neutral schwarz, keine Farbe
     aus §2, und traegt deshalb kein Farbtoken. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform var(--t-schalterknopf) var(--ease);
}

.k-schaltfeld:checked ~ .k-schalter {
  background: var(--brass);
}

.k-schaltfeld:checked ~ .k-schalter > i {
  /* §5.11a nennt den Versatz woertlich: 46 - 22 - 2 x 3 = 18 px. */
  transform: translateX(18px);
}

.k-schaltfeld:disabled ~ .k-schalter {
  opacity: .3;
}

/* Die ganze Zeile ist schon auf .3 gedimmt (.k-form-zeile.k-aus). Ohne diese Regel legte
   sich die Dimmung des Schalters DARUEBER — 0,3 x 0,3 = 0,09, also praktisch unsichtbar.
   Gedimmt wird einmal, von der Zeile. */
.k-form-zeile.k-aus .k-schalter {
  opacity: 1;
}

.k-schaltfeld:focus-visible ~ .k-schalter {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 9999px;
}

/* (b) Auswahl bis 3 Moeglichkeiten: Knopfgruppe rechts in der Zeile, aus echten
   Radiofeldern in role="radiogroup". */
.k-auswahl {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}

.k-auswahl-teil {
  position: relative;
  display: flex;
  border-left: 1px solid var(--rule);
  cursor: pointer;
}

.k-auswahl-teil:first-child {
  border-left: 0;
}

.k-auswahl-teil > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.k-auswahl-teil > span {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--ink-2);
  transition: background-color var(--t-gedrueckt) var(--ease);
  /* Die Schrift (§5.11b) steht als Stufe .auswahlschrift in tokens.css und wird von
     formAuswahl() an dieses span gehaengt. */
}

.k-auswahl-teil > input:checked + span {
  background: var(--ink);
  color: var(--paper);
}

.k-auswahl-teil > input:focus-visible + span {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

/* (b) Auswahl ab 4 Moeglichkeiten: die Liste des Systems in der Formularzeile. */
.k-listenzeile {
  position: relative;
  cursor: pointer;
}

.k-listenzeile > select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  text-align: right;
  text-align-last: right;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.k-listenzeile > .ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}

/* (c) Eingabe: Beschriftung ueber dem Feld, Feld 44 px hoch. */
.k-eingabe-block {
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

.k-eingabe-name {
  display: block;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.k-eingabe {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  outline: none;
  transition: border-color var(--t-gedrueckt) var(--ease);
}

/* Fokus: Rand --brass, kein Leuchtring. */
.k-eingabe:focus {
  border-color: var(--brass);
}

.k-eingabe.k-fehler {
  border-color: var(--ember);
}

/* public/app.css faerbt input[type="password"] dokumentweit (0,1,1) und schlaege damit die
   Bauteilklasse (0,1,0). Zwei Klassen halten dagegen. Faellt mit der alten Oberflaeche weg.
   Sie steht hier und nicht in einer Ansichtsdatei, weil sie zum Bauteil gehoert: seit der
   Konsolidierung tragen Mein Bereich, Anmelden, Kassa und Mitarbeiter dieselben Felder. */
.kontor .k-eingabe {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
}

.kontor .k-eingabe:focus {
  border-color: var(--brass);
}

/* (c) Eingabe, mehrzeilig. */
.kontor .k-flaeche {
  height: auto;
  padding: 12px;
  resize: vertical;
  line-height: 1.4;
}

.k-feld-fehler {
  display: block;
  margin-top: 4px;
  color: var(--ember-ink);
}

.k-form-zeile.k-aus,
.k-eingabe-block.k-aus {
  opacity: .3;
  pointer-events: none;
}

/* Nur lesen: der Wert steht als Text, kein Feld, kein Schalter (§5.11, §7.3). */
.k-nur-lesen-wert {
  color: var(--ink-2);
  flex: 0 0 auto;
}

/* §7.3 Textmarke "Nur lesen" — keine Farbe, kein Warnton, es ist kein Fehler. */
.k-nur-lesen-marke {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  color: var(--ink-3);
}

/* ============================================================================================
   12  WISCHGESTE AUF LISTENZEILEN                                                     §5.12
   Jede Wischaktion hat dieselbe Wirkung auch als sichtbaren Knopf im Detail.
   Es gibt keinen Volldurchzug. Loeschen fragt immer nach.
   ============================================================================================ */

/* Aktionen und Inhalt liegen in DERSELBEN Rasterzelle. Mit position:absolute waren die
   Aktionsflaechen zwei Pixel hoeher als die Zeile und lugten unten als Farbstreifen
   hervor; im Raster sind beide per Bauart genau gleich hoch. */
.k-wisch {
  display: grid;
  overflow: hidden;
  touch-action: pan-y;
}

.k-wisch-aktionen {
  grid-area: 1 / 1;
  display: flex;
  pointer-events: none;
}

.k-wisch-links,
.k-wisch-rechts {
  display: flex;
  pointer-events: auto;
}

.k-wisch-rechts {
  margin-left: auto;
}

.k-wisch-aktion {
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--weiss);
}

.k-wisch-aktion .ico {
  width: 19px;
  height: 19px;
}

.k-wisch-bezahlt { background: var(--sage); }
.k-wisch-mehr { background: var(--mute); }
.k-wisch-loeschen { background: var(--ember); }

.k-wisch-inhalt {
  grid-area: 1 / 1;
  position: relative;
  background: var(--paper);
  transition: transform var(--t-wisch) var(--spring);
  will-change: transform;
}

/* Waehrend des Ziehens rechnen wir den Wert selbst — die Umgehung, nicht die Loesung (§6.3). */
.k-wisch.k-zieht .k-wisch-inhalt {
  transition: none;
}

/* Nach "Bezahlt" blendet die Zeile aus. */
.k-wisch.k-weg {
  opacity: 0;
  transition: opacity var(--t-weg) var(--ease);
}

/* Ueber der Liste steht im Klartext, was die Gesten tun. */
.k-wisch-hinweis {
  color: var(--ink-3);
  padding: 12px 2px 0;
  display: block;
}

/* ============================================================================================
   13  KNOEPFE IN IHREN ROLLEN                                                         §5.13
   Farbe gehoert den Daten, Tinte gehoert der Bedienung. Ein Knopf ist schwarz oder
   umrandet — nie messingfarben, ausser der einen Marke im Dock.
   Kein Knopf traegt eine Plakette. Keine Knoepfe bis an die Fensterkante.
   ============================================================================================ */

.k-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  transition: transform var(--t-knopf) var(--ease), background-color var(--t-gedrueckt) var(--ease);
}

.k-knopf:active {
  transform: scale(.985);
}

.k-knopf[disabled],
.k-knopf[aria-busy="true"] {
  opacity: .3;
  cursor: default;
  transform: none;
}

.k-knopf-haupt {
  background: var(--ink);
  color: var(--paper);
}

.k-knopf-zweit {
  border: 1px solid var(--ink);
  color: var(--ink);
}

.k-knopf-still {
  border: 1px solid var(--rule);
  color: var(--ink-2);
}

.k-knopf-erledigt {
  background: var(--sage-wash);
  border: 1px solid var(--sage);
  color: var(--sage-ink);
  pointer-events: none;
}

.k-knopf-zerstoerend {
  border: 1px solid var(--ember);
  color: var(--ember-ink);
}

/* Textknopf: nur Schrift, 44 px hoch. */
.k-knopf-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-3);
}

/* Rundknopf: 40 x 40 sichtbar, 46 x 46 antippbar, Glyph 18 px. */
.k-rundknopf {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
  flex: 0 0 auto;
  transition: transform var(--t-knopf) var(--ease);
}

.k-rundknopf::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

.k-rundknopf:active {
  transform: scale(.92);
}

.k-rundknopf .ico {
  width: 18px;
  height: 18px;
}

/* ============================================================================================
   14  LEERZUSTAND                                                                     §5.14
   Ein Satz, mittig, 44 px Abstand oben und unten, S6, --ink-3. Kein Bild, kein Symbol,
   kein Knopf — ausser der Leerzustand hat genau einen naechsten Schritt.
   Kein Leerzustand behauptet, es gaebe etwas zu tun, wenn es nichts gibt.
   ============================================================================================ */

.k-leer {
  text-align: center;
  color: var(--ink-3);
  padding: 44px 0;
}

/* §5.14: "dann steht DARUNTER ein Zweitknopf." Diese Regel stand hier von Anfang an, war
   aber nie benutzt — und `display: inline-flex` liess den Knopf in derselben Zeile weiter-
   laufen wie der Satz. Im Bild stand er NEBEN "Keine Rechnungen.", nicht darunter. Kein
   Pruefstand konnte das sehen: die Klassen waren alle richtig, nur der Umbruch fehlte.
   `display: flex` ist blocknah und bricht die Zeile; `width: fit-content` haelt die Breite
   am Inhalt (§5.13 verbietet Knoepfe ueber die volle Breite bis an die Kante), und die
   beiden `auto`-Raender stellen ihn unter den Satz in dessen Mitte. */
.k-leer .k-knopf {
  margin: 20px auto 0;
  width: fit-content;
  padding: 0 20px;
  display: flex;
}

/* ============================================================================================
   15  LADEZUSTAND                                                                     §5.15
   Kein Vollbild-Spinner nach dem ersten Start. Der Rahmen bleibt stehen.
   Ab 400 ms der Ladesatz, ab 2 s zusaetzlich der Kreis — eigene Setzung, siehe §5.15.
   ============================================================================================ */

.k-laedt {
  color: var(--ink-3);
  display: block;
}

.k-laedt-mittig {
  text-align: center;
  padding: 44px 0;
}

/* Der allererste Bildschirm (§5.15, tresenBoot in shell.js). Kein Fussraum: beim Booten
   gibt es noch keine Leiste, die einen braeuchte. Der Kreis steht in der Mitte statt oben,
   weil sonst nichts auf der Flaeche ist, woran er sich ausrichten koennte. */
.k-boot {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-kreis {
  width: 20px;
  height: 20px;
  margin: 0 auto 12px;
  border: 2px solid var(--rule);
  border-top-color: var(--brass);
  border-radius: 50%;
  animation: k-dreht 900ms linear infinite;
}

@keyframes k-dreht {
  to { transform: rotate(360deg); }
}

/* ============================================================================================
   16  FEHLERZUSTAND UND TOAST                                                         §5.16
   Drei Raenge, streng getrennt: Zeile, Feldfehler, Dialog. Rechte sind kein Fehler.
   ============================================================================================ */

.k-fehler-zeile {
  color: var(--ember-ink);
  padding: 12px 0;
  display: block;
}

/* "Nur fuer Admin." ist kein Fehler, sondern ein Zustand. */
.k-hinweis-zeile {
  color: var(--ink-3);
  padding: 12px 0;
  display: block;
}

/* Erfolg: Pille, --ink auf --paper, 86 px ueber der Unterkante, 2,5 s sichtbar.
   Nur bei Vorgaengen, die Geld oder Daten schreiben. */
.k-toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 80;
  transform: translate(-50%, 8px);
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-toast) var(--ease), transform var(--t-toast) var(--ease);
}

.k-toast.k-an {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================================================
   17  DER ERKLAERENDE SATZ                                                            §5.17
   Genau ein Satz, hoechstens zwei Zeilen bei 350 px. Der kritische Teil als <em> in
   --ember-ink, NICHT kursiv. Zahlen werden ausgeschrieben (P1: der Satz steht in Fraunces).
   ============================================================================================ */

.k-satz {
  margin: 8px 0 0;
  color: var(--ink);
}

.k-satz em {
  font-style: normal;
  color: var(--ember-ink);
}

/* ============================================================================================
   18  DER ANTEILSBALKEN                                                               §5.18
   Zulaessig nur unter drei Bedingungen (§2.7): jedes Segment direkt beschriftet,
   2-px-Fuge, jede Stufe >= 3:1 gegen ihre Flaeche. Faellt eine weg, faellt der Balken weg.
   ============================================================================================ */

.k-balken {
  display: flex;
  gap: 2px;
  height: 9px;
  margin-top: 8px;
}

.k-balken > span {
  display: block;
  height: 100%;
  border-radius: 1px;
  min-width: 2px;
  transition: flex-grow var(--t-balken) var(--ease);
}

.k-balken > span:first-child { border-radius: 4px 1px 1px 4px; }
.k-balken > span:last-child { border-radius: 1px 4px 4px 1px; }

.k-teil-1 { background: var(--s1); }
.k-teil-2 { background: var(--s2); }
.k-teil-3 { background: var(--s3); }

/* Legende: ohne sie kein Balken. */
.k-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--ink-2);
}

.k-legende-teil {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.k-legende-punkt {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.k-legende b {
  font-weight: 600;
}

/* Der Balken waechst einmal je Render ueber 0,9 s in die Breite. */
.k-balken.k-waechst > span {
  animation: k-balken-auf var(--t-balken) var(--ease) both;
}

@keyframes k-balken-auf {
  from { flex-grow: 0.0001; }
}


/* ============================================================================================
   DIE ECKBOEGEN, DIE ANSICHTEN BRAUCHEN                                    §11.2 Regel 1
   "Keine Ansicht setzt font-size, border-radius, border-width oder eine Farbe. […] Braucht
   eine Ansicht etwas, das es nicht gibt, kommt es in parts.css — nicht in die Ansicht."

   Zwoelf border-radius-Deklarationen standen trotzdem in drei Ansichtsdateien: acht allein
   in view-mitarbeiter.css, drei in view-anmelden.css, eine in view-steuer.css. Sechs der
   neun view-*.css waren sauber. Die WERTE waren nie das Problem — jeder einzelne liegt in
   der geschlossenen Menge §4.2 (1 · 2 · 4 · 8 · 14 · 20 · 9999 px, dazu 50% und 0). Das
   Problem ist der Ort: solange eine Ansicht einen Eckbogen selbst setzen darf, setzt die
   naechste einen, den §4.2 nicht kennt — genau so entstanden die 16 px am Anmelde-Logo und
   die 12 px an der PIN-Taste, die in der letzten Runde zurueckgeholt werden mussten.

   Die Selektoren stehen unveraendert. Nichts am Markup hat sich geaendert, nichts sieht
   anders aus; die Deklaration ist nur dort, wo die Regel sie haben will. parts.css wird
   nach app.css und vor allen view-*.css geladen — die Kaskade bleibt dieselbe.
   ============================================================================================ */

/* ---- Mitarbeiter und Mein Bereich ---------------------------------------------------------- */

/* Der Punkt der Betriebsart-Auswahl und sein Kern (§5.11b). */
.d-punkt,
.kachel-modus > input:checked ~ .d-punkt::after {
  border-radius: 50%;
}

/* Der Ueberweisungs-QR eines Lohnzettels: §4.2 "Knopf, Eingabefeld, Auswahl" — 8 px. */
.d-qr img {
  border-radius: 8px;
}

/* Das Personenzeichen in Mein Bereich. */
.d-ich-zeichen {
  border-radius: 50%;
}

/* Der Kachelblock (D-030) traegt in app.css Flaeche, Rahmen und Eckbogen. Innerhalb von
   .kontor gilt das hier: keine Flaeche, kein Rahmen, keine Ecke. Der Eckbogen 0 ist
   ausdruecklich Teil von §4.2 — er nimmt einen fremden zurueck, er erfindet keinen.
   Spezifitaet 0,2,0 gegen die 0,1,0 aus app.css; app.css bleibt unberuehrt. */
.kontor .kachel-block,
.kontor .kachel-admin-note,
.kontor .kachel-group,
.kontor .kachel-item {
  border-radius: 0;
}

/* ---- Anmeldung ------------------------------------------------------------------------------ */

/* Das Logo ist eine Kachel — §4.2 "Karte, Widget, Symbolkachel": 14 px. */
.k-anmelden-logo {
  border-radius: 14px;
}

/* Ein PIN-Punkt ist rund. */
.k-anmelden-punkt {
  border-radius: 50%;
}

/* Eine PIN-Taste ist ein Knopf — §4.2 "Knopf, Eingabefeld, Auswahl": 8 px. */
.k-anmelden-taste {
  border-radius: 8px;
}

/* ---- Steuer --------------------------------------------------------------------------------- */

/* Die Saeule des Monatsverlaufs (§7.6). §4.2 kennt 2 px als kleinsten Bogen. */
.gb-monat-saeule {
  border-radius: 2px;
}