/* Tiger — component kit (BRIEF §7).
 *
 * Built before any screen, and the only place components are defined. Screens
 * compose these classes and add no CSS of their own. If a screen needs
 * something this file cannot express, the component belongs HERE, not there.
 *
 * Reads tokens.css. Contains no literal colours, no literal spacing.
 */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Jedes Springen im Dokument haelt die Leiste frei: Sprungmarken, das
   Zurueckholen eines Feldes beim Tabben, jedes scrollIntoView. Ohne das
   landet das Ziel unter der schwebenden Leiste und wirkt uebersprungen.
   Ein Fingerbreit Luft dazu, damit es nicht an ihr klebt. */
html { scroll-padding-top: calc(var(--bar-raum) + var(--s-3)); }
body {
  /* Zwei weichgezeichnete Lichtkreise auf dem Grund, fest stehend, wie im
     Entwurf. Vorher lagen sie als eigenes Element (.amb) darueber; der
     Entwurf setzt sie in den Hintergrund des Koerpers, und dann gibt es kein
     Element, das jemand vergessen kann einzubinden. */
  background:
    radial-gradient(70vw 55vh at 12% -8%, var(--w1), transparent 70%),
    radial-gradient(60vw 50vh at 92% 8%, var(--w2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: var(--w-semi); }
/* Dasselbe je Ziel, nicht nur global: scroll-padding wirkt nur beim Scrollen
   des Dokuments, scroll-margin auch dort, wo ein Element in einem eigenen
   Bereich gescrollt wird. */
h1, h2, h3, h4, [id] { scroll-margin-top: calc(var(--bar-raum) + var(--s-3)); }
p { margin: 0; }
/* Verweise sind im Entwurf durchgehend nicht unterstrichen. In einer LISTE
   ist die Unterstreichung aber das einzige Zeichen dafuer, dass ein Name
   anklickbar ist: dort steht Name neben Name, und ohne sie sieht ein Verweis
   aus wie ein Datenfeld. Julian hat das am 05.09.2026 zurueckgeholt.
   Also: ohne Unterstreichung ueberall, MIT ihr in den dichten Listen —
   Kundenliste, Belegliste, Signalzeilen, Verlauf, Lagerbewegungen. */
a { color: inherit; text-decoration: none; }
.zeile .nm, .brow .nm3, .sz .nm2, .zl .n, .bz .w3, .ev .bel a,
.tablewrap a, .koh a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--stroke);
}
.zeile:hover .nm, .brow:hover .nm3, .sz:hover .nm2, .zl:hover .n,
.bz:hover .w3 { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Keyboard focus must always be visible (BRIEF §7 quality floor). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ── Hülle. Seit 25.08.2026 keine Seitenleiste mehr, sondern eine
   schwebende Glasleiste oben (prototypes/tiger-heute.html). Sie bleibt beim
   Scrollen stehen und verschwindet nie. ────────────────────────────────── */
.app { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
       padding: 0 22px 44px; }
.main { display: block; min-width: 0; }

/* Heisst .topbar und nicht .bar wie im Entwurf: .bar ist im Baukasten
   seit Schritt 2 der Fortschrittsbalken. Ein Name, zwei Bedeutungen waere die
   naechste stille Falle. Masse, Radius und Polsterung aus
   prototypes/tiger-map.html.

   ZWEI SCHICHTEN, NICHT EINE — und das ist eine Abweichung vom Entwurf, die
   Julian am 05.09.2026 ausdruecklich zurueckgeholt hat.
   Der Entwurf zeichnet die Leiste als eine durchscheinende Auflage. Am
   Bildschirm heisst das: sobald die Seite ein Stueck gescrollt ist, liest man
   die Zeilen, die unter ihr wegwandern, DURCH sie hindurch — halb verdeckt,
   doppelt gesetzt, unlesbar. Ein Entwurf wird auf einer ungescrollten Seite
   gezeichnet und kann das nicht zeigen.
   Darunter liegt deshalb ein undurchsichtiger Grund aus derselben Palette;
   die Weichzeichnung bleibt fuer das Streulicht an den Raendern. */
.topbar {
  position: sticky; top: var(--bar-top); z-index: 40;
  display: flex; align-items: center; gap: 3px;
  padding: 5px 8px; margin: var(--bar-top) 0 14px;
  border-radius: var(--r);
  background-color: var(--sticky-bg);
  background-image: linear-gradient(var(--glass), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
  backdrop-filter: blur(var(--blur)) saturate(1.15);
}
.topbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { padding: 6px 10px; border-radius: var(--r-klein);
                font-size: var(--fs-125); color: var(--dim); white-space: nowrap; }
.topbar nav a:hover { background: var(--hover); color: var(--text); }
.topbar nav a[aria-current] { background: var(--hover-2); color: var(--text);
                              font-weight: var(--w-semi); }
/* Die Zahl neben »Signale«. Wovon sie zaehlt, steht im Vorlesetext des
   Verweises — eine rote Zahl allein ist keine Auskunft. */
.topbar nav a .n {
  display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
  border-radius: 8px; background: var(--warm); color: #fff;
  font-size: var(--fs-9); font-weight: 700; text-align: center;
  margin-left: 5px; padding: 0 4px;
}
/* Das Zeichen in der Leiste: der Tigerkopf.

   Der Entwurf zeichnet ein goldenes Quadrat mit einem T darin. Genau dieses
   Quadrat stand hier schon einmal — als Platzhalter, der nie ersetzt worden
   war, bis am 26.08.2026 auffiel, dass es die Marke gar nicht ist. Ein
   Entwurf setzt an diese Stelle etwas Vorlaeufiges, weil das Bild noch nicht
   zur Hand ist; es liegt aber laengst da.
   Zurueckgeholt am 05.09.2026. Gold und Kupfer bleiben in beiden Schemata,
   wie sie sind — eine Marke darf neben der Palette der Oberflaeche stehen. */
.mk { width: 24px; height: 24px; flex: 0 0 auto; margin-right: 6px;
      background: url("../img/tiger-kopf.png") center/contain no-repeat; }
/* Die Umschaltung der Sprache. Zwei Knoepfe in einem Rahmen, wie im Entwurf —
   kein Auswahlfeld: welche Sprache gerade gilt, muss man sehen koennen, ohne
   etwas aufzuklappen. */
/* Der Sprachschalter. Bis zum 05.09.2026 ein Kasten mit harter Aussenlinie —
   das einzige Ding im Schwanz der Leiste, das eine eigene Umrandung trug, und
   dadurch aufgesetzt statt eingelassen.
   Jetzt eine Mulde: die Rille liegt VERTIEFT in der Leiste (innerer Schatten,
   keine Aussenlinie), und die gewaehlte Sprache liegt als kleine Glasplatte
   darin — Haarlinie, Lichtsaum oben, weicher Schatten. Dieselbe Hoehe wie .ic
   und .av daneben, damit der Schwanz eine Linie behaelt. */
.lang { display: flex; align-items: center; gap: 2px;
        height: 28px; padding: 3px; margin-right: 2px;
        border: 0; border-radius: var(--r-klein);
        background: var(--mulde);
        box-shadow: 0 0 0 1px var(--stroke-soft) inset,
                    0 2px 4px -2px rgba(0, 0, 0, .55) inset; }
.lang button { height: 22px; padding: 0 8px; border-radius: 4px; border: 0;
               background: none; cursor: pointer;
               font-size: var(--fs-10); font-weight: var(--w-semi);
               letter-spacing: .05em; color: var(--faint);
               transition: color .14s ease, background-color .14s ease,
                           box-shadow .14s ease; }
.lang button:hover { color: var(--text); }
/* Die gewaehlte Sprache liegt als Plaettchen in der Mulde. Der Schleier ist
   --glass, und der ist in BEIDEN Farbschemata ein Weissschleier: im Dunkeln
   hebt er die Flaeche um 5,5 %, im Hellen zieht er sie fast auf Weiss. Ein
   Verlauf waere hier falsch — er muesste in den beiden Schemata in
   entgegengesetzte Richtungen laufen, weil »mehr Tinte« im Dunkeln heller und
   im Hellen dunkler heisst. */
.lang button[aria-pressed="true"] {
  color: var(--text);
  background-color: transparent;
  background-image: linear-gradient(var(--glass), var(--glass));
  box-shadow: 0 0 0 1px var(--stroke), 0 1px 0 var(--glass) inset,
              0 2px 5px -2px rgba(0, 0, 0, .45);
}

/* Das Bildzeichen. Bis zum 26.08.2026 stand hier ein Kreis mit Farbverlauf —
   ein Platzhalter aus dem Entwurf, der nie ersetzt worden war. Jetzt der
   Tigerkopf selbst, ohne Schriftzug: das Wort „Tiger" steht direkt daneben,
   und eine Marke muss sich nicht zweimal sagen.

   Gold und Kupfer bleiben, wie sie sind, in beiden Farbschemata. Eine Marke
   darf neben der Palette der Oberflaeche stehen; die Oberflaeche laesst ihr
   Platz, nicht umgekehrt (deshalb auch kein filter, kein mix-blend-mode). */
.mark { width: 26px; height: 26px; flex: 0 0 auto;
        background: url("../img/tiger-kopf.png") center/contain no-repeat; }


.page { display: flex; flex-direction: column; gap: var(--s-4); }
/* Kopf der Seite, aus dem Entwurf. */
.head { margin: 0 0 20px; padding: 0 6px; }
.head h1 { margin: 0; font-size: var(--fs-xl); font-weight: var(--w-body);
           letter-spacing: var(--ls-titel); }
/* Titel und Umschalter in einer Zeile (prototypes/tiger-nachbestellungen-v2). */
.head__zeile { display: flex; align-items: center; gap: var(--s-4);
               flex-wrap: wrap; }





.head p { margin: 5px 0 0; font-size: 13.5px; color: var(--text-muted);
          font-weight: var(--w-secondary); }



.page__title { font-size: var(--fs-xl); font-weight: var(--w-body);
               letter-spacing: var(--ls-titel); }
.page__sub { color: var(--text-muted); font-weight: var(--w-secondary); }

/* ── Card. Die einzige Glasflaeche. Sonst nirgends. ───────────────────── */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  /* Ohne das malt eine Tabelle ihre eckigen Ecken ueber die runden der Karte.
     Der genehmigte Entwurf hat es (prototypes/tiger-app.html, .card). */
  overflow: hidden;
}
.card__body { padding: var(--s-5); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ── Stat ──────────────────────────────────────────────────────────────── */
.stat { padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--r-lg);
        border: 1px solid var(--line); }
.stat__label {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--w-medium);
}
/* Weight 300 only above ~32px — that is why it appears here and not on body. */
.stat__value {
  font-size: var(--fs-2xl); font-weight: var(--w-display);
  letter-spacing: var(--ls-kennzahl); margin-top: var(--s-2);
  line-height: var(--lh-tight);
}
.stat__note { color: var(--text-muted); font-size: var(--fs-sm);
              font-weight: var(--w-secondary); margin-top: var(--s-2); }

/* ── Tabelle. Flach, undurchsichtig, dicht. Nie weichgezeichnet (§7). ──
   Der Entwurf kennt keine Tabelle - er zeigt gepolsterte Zeilen. Uebernimmt
   man seine durchscheinende Flaeche fuer eine Liste, steht die Liste auf Glas
   ueber dem Streulicht: 1.063 Zeilen ueber einem Farbverlauf. Deshalb hier
   die Auflage des Entwurfs auf undurchsichtigem Grund derselben Palette. Die
   Karte bleibt Glas, ihre Kopfzeile auch - nur die Daten stehen fest. */
.tablewrap { overflow-x: auto;
             background-color: var(--sticky-bg);
             background-image: linear-gradient(var(--surface), var(--surface)); }
table.t { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.t th, table.t td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
table.t thead th {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--w-medium);
  /* Zwei Schichten: die Auflage des Entwurfs auf einem undurchsichtigen
     Grund. Nur mit der Auflage allein scheinen die Zeilen durch, die unter
     der Kopfzeile wegscrollen - bei 1.063 Zeilen dauerhaft sichtbar. */
  background-color: var(--sticky-bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
  border-bottom: 1px solid var(--line);
  /* top: 0 und NICHT var(--bar-raum), obwohl die schwebende Leiste genau
     dort liegt. Nachgemessen am 26.08.2026: .tablewrap hat overflow-x: auto,
     und ein Wert ungleich `visible` auf einer Achse macht die andere Achse
     zu `auto` — der Umschlag ist damit ein eigener Scrollbereich. Die
     Kopfzeile klebt an IHM, nicht am Fenster; sie kommt der Leiste also nie
     in die Quere. Mit top: 56+12px wurde sie stattdessen um 68px nach UNTEN
     geschoben und lag ueber den ersten beiden Datenzeilen. */
  position: sticky; top: 0;
}
table.t tbody tr:last-child td { border-bottom: 0; }
/* Eine Menge nennt ihre Einheit, und die Umrechnung steht klein daneben.
   „5" allein hiess je nach Herkunft 5 Beutel oder 5.000 — auf der
   Auftragsseite stand die Kartonzahl unter der Ueberschrift „Menge". */
.menge      { white-space: nowrap; font-variant-numeric: tabular-nums; }
.menge__um  { color: var(--text-muted); font-weight: var(--w-secondary); }
.menge--unklar { color: var(--warn); }

/* Ein langer Name bricht keine Zeile mehr auf. „GEM Gesellschaft fuer
   Wertstofferfassung, Wertstoffverwertung und Entsorgung Moenchengladbach
   mbH" lief ueber zwei Zeilen und schob seine Kennzeichnung auf eine dritte
   — eine Zeile war dreimal so hoch wie ihre Nachbarn. Der ganze Name steht
   im title und erscheint beim Ueberfahren; die Kundenakte hat ihn ohnehin
   ungekuerzt. `inline-block`, weil ein reines <a> kein overflow kennt. */
.trunk {
  display: inline-block; max-width: 34ch; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* In der Namensspalte darf er breiter werden — dort ist er die Hauptsache. */
.trunk--breit { max-width: 46ch; }
/* Umgekehrt in einer halbbreiten Karte: 34ch machen die Tabelle breiter als
   die Karte, und dann steht die Geldspalte ausserhalb. Dort ist der Name das
   Nachschlagewort, nicht die Hauptsache — der Verweis fuehrt zur Akte. */
.trunk--eng { max-width: 22ch; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t .num { text-align: right; font-variant-numeric: tabular-nums;
               white-space: nowrap; }
table.t .muted { color: var(--text-muted); font-weight: var(--w-secondary); }












.go { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }







/* ── Badge. State reads as shape and colour, not colour alone. ─────────── */
.badge {
  /* A badge is a label, not a paragraph: wrapping turns it into a broken box. */
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  /* Masse der .pill aus dem Entwurf: rund, nicht eckig. */
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line-soft);
}
/* Ton in Schrift, Fläche UND Rand — wie .pill.pay im Entwurf. */
.badge--ok     { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.badge--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.badge--info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.badge--quiet  { background: transparent; color: var(--text-muted); }

/* ── Bar. An ordinary shape. Nothing that needs a legend (BRIEF §7). ───── */
.bar { display: flex; align-items: center; gap: var(--s-3); }
.bar__track { flex: 1; height: 6px; min-width: 48px; border-radius: var(--r-sm);
              background: var(--surface-3); overflow: hidden; }
.bar__fill  { height: 100%; background: var(--accent); border-radius: var(--r-sm); }
.bar__fill--warn   { background: var(--warn); }
.bar__fill--danger { background: var(--danger); }
.bar__value { font-size: var(--fs-sm); color: var(--text-2); min-width: 3.5em; text-align: right; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Die Knoepfe. Drei Raenge, und man muss sie auseinanderhalten koennen, ohne
   sie zu lesen — sonst sehen »Angebot« (erzeugt ein Dokument) und
   »Bearbeiten« (klappt ein Formular auf) gleich aus, und genau das war bis
   zum 05.09.2026 der Fall: beide trugen die blanke .btn.

     .btn--primary   die eine Handlung, die etwas anlegt oder abschickt
     .btn            eine Nebenhandlung mit eigener Flaeche
     .btn--ghost     ein Weg, keine Handlung — Flaeche erst beim Zeigen

   Gemeinsam ist ihnen der Glaskoerper: eine durchscheinende Flaeche, eine
   Haarlinie und ein Lichtsaum an der Oberkante (der innere Schatten). Das ist
   dieselbe Sprache wie die Leiste und die Karten — ein Knopf soll auf der
   Flaeche liegen und nicht auf ihr kleben. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); min-height: 34px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background-color: var(--surface-2);
  background-image: linear-gradient(var(--glass), transparent);
  color: var(--text);
  font-weight: var(--w-medium); cursor: pointer;
  box-shadow: 0 1px 0 var(--glass) inset, 0 1px 2px -1px rgba(0, 0, 0, .22);
  transition: background-color .14s ease, border-color .14s ease,
              box-shadow .14s ease, transform .06s ease;
}
.btn:hover { background-color: var(--surface-3); border-color: var(--stroke); }
/* Beim Druecken sinkt der Knopf um ein halbes Pixel ein und verliert seinen
   Schatten. Das ist die einzige Bewegung, die er macht. */
.btn:active { transform: translateY(.5px); box-shadow: none; }

.btn--primary {
  background-color: var(--accent);
  background-image: linear-gradient(rgba(255, 255, 255, .16), transparent);
  color: var(--on-accent); border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset,
              0 2px 8px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn--primary:hover {
  background-color: var(--accent-2); border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset,
              0 3px 12px -3px color-mix(in srgb, var(--accent) 80%, transparent);
}

.btn--ghost {
  background-color: transparent; background-image: none;
  border-color: transparent; color: var(--text-2); box-shadow: none;
}
.btn--ghost:hover {
  background-color: var(--surface-2); border-color: var(--line-soft);
  color: var(--text); box-shadow: none;
}

.btn--danger {
  background-color: var(--danger-soft); background-image: none;
  color: var(--danger); border-color: var(--danger-line); box-shadow: none;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active { transform: none; }
.btn--icon { padding: var(--s-2); min-width: 34px; }

/* ── Fields ────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--w-medium); }
/* Auch <select> und <textarea> tragen class="input" - eine Schreibweise
   statt drei, sonst sieht ein Feld je nach Element anders aus. */
.input {
  padding: var(--s-2) var(--s-3); min-height: 34px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  width: 100%;
}
.input::placeholder { color: var(--text-faint); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--w-secondary); }

/* ── Banner. A silent sync failure is worse than a loud one (BRIEF §4). ── */
.banner {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--warn);
  background: var(--warn-soft); color: var(--text);
  font-size: var(--fs-sm);
}
.banner--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.banner--info   { border-left-color: var(--info);   background: var(--info-soft); }
.banner__label {
  font-weight: var(--w-semi); white-space: nowrap;
}




.dot { transition: r .12s; }












.tr { height: 54px; border-bottom: 1px solid var(--line-soft);
      transition: background .12s; }
.tr:last-of-type { border-bottom: 0; }
.tr:hover { background: var(--surface-2); }
.tr .nm { font-size: var(--fs-base); font-weight: var(--w-medium);
          letter-spacing: var(--ls-zeilenname);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .nm a { text-decoration: none; color: inherit; }
.tr .nm a:hover { text-decoration: underline; }
/* Segment nur, wo es NICHT der Normalfall ist: eine Spalte, in der ueberall
   dasselbe steht, ist toter Platz. */
.nm .seg { font-size: 11px; color: var(--text-faint);
           border: 1px solid var(--line); border-radius: 99px;
           padding: 1px 7px; margin-left: var(--s-2); }




/* Aktionen erscheinen beim Ueberfahren — sonst sind sie 24-mal auf der Seite. */
.tr .go { opacity: 0; transition: opacity .12s; justify-content: flex-end; }
.tr:hover .go, .tr:focus-within .go { opacity: 1; }
.tr .go .btn { padding: 5px 10px; font-size: 12.5px; }
.foot { display: flex; align-items: center; gap: var(--s-4);
        padding: 11px var(--s-5); flex-wrap: wrap;
        border-top: 1px solid var(--line-soft); font-size: 11.5px;
        color: var(--text-faint); }
.foot .spacer { margin-left: auto; }

@media (max-width: 680px) {

  .tr { grid-template-columns: 64px 1fr; height: auto; padding: 12px 16px;
        gap: 6px 12px; }
  .tr .go { opacity: 1; grid-column: 1 / -1; justify-content: flex-start; }
}









/* ── Empty state. Says plainly that there is nothing, and why. ─────────── */
.empty {
  padding: var(--s-8) var(--s-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.empty__title { font-size: var(--fs-md); font-weight: var(--w-semi); }
.empty__text {
  color: var(--text-muted); font-weight: var(--w-secondary);
  max-width: 46ch;
}

/* ── Theme toggle ──────────────────────────────────────────────────────── */
.themetoggle { display: inline-flex; background: var(--surface-2);
               border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px; }
.themetoggle button {
  border: 0; background: transparent; color: var(--text-muted);
  padding: 4px var(--s-3); border-radius: var(--r-full); cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--w-medium);
}
.themetoggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); }

/* ── Auth page. Its own component because the login screen has no shell:
     no nav, no topbar, and a measure narrow enough to read as a single task. */
.authpage { max-width: 380px; margin: 12vh auto; }
.brandrow { display: flex; align-items: center; gap: var(--s-3); }

/* ── Utilities. Deliberately few. ──────────────────────────────────────── */
.muted    { color: var(--text-muted); font-weight: var(--w-secondary); }
.mono     { font-family: var(--font-mono); font-size: var(--fs-sm); }
.row      { display: flex; align-items: center; gap: var(--s-3); }
.stack    { display: flex; flex-direction: column; gap: var(--s-3); }
.spacer   { margin-left: auto; }
.sr-only  {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Responsive (BRIEF §7 quality floor) ───────────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .nav {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-2);
  }
  .nav__brand, .nav__section { display: none; }
  .nav__item { white-space: nowrap; }
  .page { padding: var(--s-4); }
  .topbar { padding: 0 var(--s-4); }

  /* Auf einem Telefon gemessen, nicht vermutet: bei 390 px lief
     /nachbestellungen um 266 px aus dem Bild. Zwei Ursachen, beide hier. */

  /* 1. Die segmentierte Auswahl hat fünf Einträge und schrumpft nicht. Sie
        scrollt jetzt in sich, wie die Navigation darüber — umbrechen würde
        aus einem Bedienelement drei Zeilen Knöpfe machen. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }

  /* 2. Ein 95 Zeichen langer Kundenname schob die Kopfzeile auf. Er steht
        ohnehin vollständig auf der Seite darunter. */
  .topbar__title { min-width: 0; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
  .topbar__right { flex: 0 0 auto; }


  .go { grid-column: 1 / -1; justify-content: flex-start; }

  .app { padding: 0 12px 32px; }
}

/* ── Added for step 5. Components, not page rules: every one of these is used
   by more than one screen, and no screen carries CSS of its own (BRIEF §7). ── */

/* Filter bar above a list. */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
           margin-bottom: var(--s-4); }
.filters .field { min-width: 0; }
.filters__grow { flex: 1 1 16rem; }

/* Segmented control: mutually exclusive filters that read as one control. */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
       border-radius: var(--r-md); padding: 2px; gap: 2px; }
.seg a { padding: 6px var(--s-3); border-radius: calc(var(--r-md) - 3px);
         font-size: var(--fs-sm); color: var(--text-2); text-decoration: none;
         white-space: nowrap; font-weight: var(--w-medium); }
.seg a:hover { color: var(--text); background: var(--surface-3); }
.seg a[aria-current="true"] { background: var(--surface); color: var(--text);
                              box-shadow: var(--shadow-sm); }
.seg__count { color: var(--text-muted); font-weight: var(--w-secondary);
              font-variant-numeric: tabular-nums; }

/* Eine Kennzahl, die als Text laenger ist als eine Zahl - ein Datum, ein
   Zustandswort. Sie soll die Kachel nicht sprengen. */
.stat__value--text { font-size: var(--fs-lg); }

/* Vorformatierter Text, der umbrechen darf: ein Befehl oder ein Anschreiben,
   das in eine Karte passen muss statt seitlich hinauszulaufen. */
.pre { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }

/* Felder in einer Zeile: Postleitzahl schmal, Ort dehnbar, Land schmal.
   Die Breiten gehoeren dem Baukasten, nicht der einzelnen Seite. */
.field--plz  { flex: 0 0 8rem; }
.field--land { flex: 0 0 6rem; }
.field--weit { flex: 1; }

/* Key/value record display. Used by the Kundenakte and the Auftrag screen. */
/* minmax(0, 1fr) statt 1fr auf der zweiten Spur: `1fr` heisst minmax(auto, 1fr),
   und `auto` als Minimum ist die Breite des laengsten unteilbaren Inhalts. Das
   Raster wurde dadurch breiter als die Karte, statt den Text umbrechen zu
   lassen — am 02.09.2026 auf Kundenakte und Dubletten gesehen.
   (minmax laesst sich nicht schachteln; ein minmax(0, minmax(...)) macht die
   ganze Zeile ungueltig, und das Raster faellt auf eine Spalte zurueck.) */
.dl { display: grid;
      grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
      gap: var(--s-2) var(--s-4); align-items: baseline; }
.dl dt, .dl dd { min-width: 0; }
.dl dt { font-size: var(--fs-sm); color: var(--text-muted);
         font-weight: var(--w-secondary); }
.dl dd { font-size: var(--fs-base); color: var(--text); margin: 0;
         overflow-wrap: break-word; }
.dl dd .muted { font-weight: var(--w-secondary); }

/* A value that exists but is deliberately not editable here, because another
   system owns it. Reads as a fact, not as a disabled input. */
/* Ein Wert und seine Quelle nebeneinander. flex-wrap ist keine Kosmetik: ohne
   es ist die Mindestbreite die SUMME aus Wert und Quellenhinweis, und in einer
   schmalen Karte wird daraus »Kund/e« mit Umbruch mitten im Wort. */
.readonly { display: inline-flex; flex-wrap: wrap; align-items: baseline;
            gap: var(--s-1) var(--s-2); min-width: 0;
            font-variant-numeric: tabular-nums; }
.readonly__src { font-size: var(--fs-xs); color: var(--text-faint);
                 font-weight: var(--w-secondary); flex: 1 1 11rem; }

/* "Nothing here, and that is normal" — distinct from an error or a blank. */
.none { color: var(--text-muted); font-weight: var(--w-secondary);
        font-style: normal; }

.pager { display: flex; align-items: center; justify-content: space-between;
         gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-sm);
         color: var(--text-muted); font-weight: var(--w-secondary); }
.pager__links { display: flex; gap: var(--s-2); }
.pager__links a, .pager__links span {
  padding: 4px var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--line);
  color: var(--text-2); text-decoration: none; }
.pager__links a:hover { background: var(--surface-2); color: var(--text); }
.pager__links span { opacity: .4; }

/* Section heading inside a card stack. */
.section { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--s-3); margin-bottom: var(--s-3); }
/* .card selbst hat bewusst KEINEN Innenabstand: eine Tabelle muss bis an den
   Rand laufen koennen, sonst sieht eine Liste aus wie ein eingerahmtes Bild.
   Genau so loest es der Entwurf - dort traegt .sec das Polster, nicht .card.
   Also bringt jedes Kind einer Karte den Abstand selbst mit, und die wenigen,
   die randlos gehoeren, nehmen ihn ausdruecklich wieder weg.

   Die erste Fassung gab ihn nur der Ueberschrift. Auf der Kundenakte stand die
   Ueberschrift dann eingerueckt und die Eingabefelder darunter klebten am
   Rahmen - im dunklen Schema kaum zu sehen, im hellen sofort. */
.card > * { padding-left: var(--s-5); padding-right: var(--s-5); }
.card > .tablewrap, .card > .empty { padding-left: 0; padding-right: 0; }
.card > .section { padding-top: var(--s-4); margin-bottom: var(--s-3); }
.card > *:first-child:not(.section) { padding-top: var(--s-4); }
.card > *:last-child:not(.tablewrap) { padding-bottom: var(--s-4); }
.card > p { margin: 0; }
.section__title { font-size: var(--fs-md); font-weight: var(--w-semi);
                  letter-spacing: var(--ls-ueberschrift); }
.section__note { font-size: var(--fs-sm); color: var(--text-muted);
                 font-weight: var(--w-secondary); }
/* In einer Tabellenzelle ist ein Hinweis eine zweite Zeile, keine Fortsetzung
   der ersten - sonst klebt „zuletzt 21.05.2026" am Kundennamen. */
table.t .stat__hint { display: block; margin-top: 2px; }
.stat__hint { font-size: var(--fs-xs); color: var(--text-muted);
              font-weight: var(--w-secondary); margin-top: 2px; }

/* The note must yield to the title, not be clipped by the card edge. */
.section { flex-wrap: wrap; }
.section__title { min-width: 0; }
.section__note { flex: 0 1 auto; min-width: 0; text-align: right; }



/* Die Heldenseite und die alte Kartenseite sind am 05.09.2026 entfallen: die
   Landkarte IST jetzt die Startseite (prototypes/tiger-map.html). Rund 200
   Zeilen fuer .zahl, .aussage, .kreis, .kartenmaske und Verwandte stehen
   deshalb nicht mehr hier. Wer sie sucht: git show d424699^:static/css/kit.css

*/

/* ── Rechte Seite der Leiste ────────────────────────────────────────────
   Entwurf prototypes/tiger-map.html. Vorher standen hier sechs Abschnitte als
   Symbole mit Beschriftung beim Zeigen; seit dem Umbau vom 05.09.2026 sind
   die Abschnitte Woerter (siehe .topbar nav), und rechts bleiben nur Suche,
   Lampe, Sprache, Darstellung und das Kuerzel. */
.tail { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ic { position: relative; width: 28px; height: 28px; border-radius: var(--r-klein);
      display: grid; place-items: center; color: var(--faint);
      background: none; border: 0; cursor: pointer;
      transition: color .18s, background .18s; }
.ic:hover { color: var(--text); background: var(--hover); }
.ic[aria-current] { color: var(--accent);
                    background: color-mix(in srgb, var(--accent) 13%, transparent); }
/* Die Lampe zeigt das ALTER des letzten erfolgreichen Abgleichs, nicht einen
   Fehlerzaehler: ein Zaehler stand einmal auf null, waehrend gar nichts lief. */
.led { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
       margin: 0 4px; background: var(--mint); }
.led--aus { background: var(--warm); }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid;
      place-items: center; font-size: var(--fs-105); font-weight: var(--w-semi);
      color: var(--text); background: var(--hover-2);
      border: 1px solid var(--stroke); text-decoration: none;
      transition: filter .18s; }
.av:hover { filter: brightness(1.2); }
.home { display: flex; align-items: center; gap: 10px;
        padding: 4px 10px 4px 4px; border-radius: 14px; text-decoration: none;
        transition: background .18s; }
.home:hover { background: var(--surface-2); }
.home b { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }

/* Die Befehlsleiste. Ohne Skript ist sie nicht da — und jede Adresse darin
   steht auch als Symbol oder in einer Liste (BRIEF §7). */
.scrim { position: fixed; inset: 0; background: rgba(5,7,11,.55);
         -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
         z-index: 60; opacity: 0; pointer-events: none; transition: opacity .18s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.pal { position: fixed; top: 13vh; left: 50%; width: min(620px, 92vw); z-index: 61;
       transform: translate(-50%, -12px) scale(.98); opacity: 0; pointer-events: none;
       transition: transform .2s cubic-bezier(.2,.9,.3,1), opacity .18s;
       background: var(--sticky-bg); border: 1px solid var(--line);
       border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pal.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.pal .top { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
            border-bottom: 1px solid var(--line-soft); }
.pal input { flex: 1; font-size: 16px; letter-spacing: -.01em; outline: 0;
             background: none; border: 0; color: var(--text); }
.pal input::placeholder { color: var(--text-faint); }
.pal .res { max-height: 52vh; overflow: auto; padding: 6px; }
.grp { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
       color: var(--text-faint); padding: 11px 12px 5px; font-weight: 600; }
.it { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
      border-radius: 12px; cursor: pointer; }
.it[aria-selected="true"] { background: var(--surface-3); }
.it .ic2 { width: 27px; height: 27px; border-radius: 9px; background: var(--surface);
           border: 1px solid var(--line-soft); display: grid; place-items: center;
           flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
.it .tx { flex: 1; min-width: 0; }
.it .tx b { display: block; font-weight: 500; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.it .tx span { display: block; font-size: 11.5px; color: var(--text-faint);
               font-weight: var(--w-secondary); }
.it .hint { font-size: 11px; color: var(--text-faint); }
.pal .foot { display: flex; gap: 16px; padding: 10px 18px;
             border-top: 1px solid var(--line-soft); font-size: 11.5px;
             color: var(--text-faint); font-weight: var(--w-secondary); }
.pal .foot b { color: var(--text-muted); font-weight: 500; }
.leer { padding: 26px 18px; text-align: center; color: var(--text-faint);
        font-weight: var(--w-secondary); }

@media (max-width: 640px) { .home b { display: none; } }



/* Das Band steht fuer sich und beruehrt die Karte nicht mehr. Der Innenabstand
   oben ist groesser als --anriss: was ueber dem Falz zu sehen ist, ist
   deshalb Flaeche, nie eine angeschnittene Zeile. */




@keyframes herein { from { opacity: 0; transform: translateY(14px); } }
























/* ── Produkte (Entwurf prototypes/tiger-produkte.html, 27.08.2026) ──────── */
.cols { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
        gap: var(--s-4); align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }
.prod { padding: 22px 20px 18px; }
.pname { font-size: 19px; font-weight: var(--w-semi); letter-spacing: -.02em; }
.psku { font-size: 12px; color: var(--text-faint);
        font-weight: var(--w-secondary); margin-top: 2px; }
.units { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
/* Die Einheitenkachel auf dem Produktbildschirm. Sie hiess bis zum
   05.09.2026 .u — und .u heisst im Entwurf »warm betont«. Ein Name, zwei
   Bedeutungen: die Betonung stand danach in einem Kaestchen mit Rahmen. */
.einheit-kachel { padding: 9px 13px; border-radius: var(--r-md);
     background: var(--surface); border: 1px solid var(--line-soft); text-align: center; }
.einheit-kachel b { display: block; font-size: 15px; font-weight: var(--w-semi); }
.einheit-kachel span { display: block; font-size: 11px; color: var(--text-faint);
          font-weight: var(--w-secondary); margin-top: 2px; }
/* Warm betont — ein Wort, kein Kaestchen. So im Entwurf ueberall. */
.u { color: var(--warm); font-weight: var(--w-semi); }
.g { color: var(--mint); font-weight: var(--w-semi); }
.pfeilchen { color: var(--text-faint); font-size: 15px; }
.pstat { display: flex; flex-wrap: wrap; margin-top: 4px;
         border-top: 1px solid var(--line-soft); padding-top: 14px; }
.pstat .s { padding: 0 clamp(12px,2vw,24px); border-left: 1px solid var(--line-soft); }
.pstat .s:first-child { padding-left: 0; border-left: 0; }
.pstat b { display: block; font-size: 19px; font-weight: var(--w-body);
           letter-spacing: -.02em; }
.pstat span { display: block; font-size: 11.5px; color: var(--text-faint);
              margin-top: 5px; font-weight: var(--w-secondary); }
.tier { display: grid; grid-template-columns: 1fr 92px 92px; gap: 12px;
        padding: 9px 20px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.tier.h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
          color: var(--text-faint); border-top: 0; }
.tier .r { text-align: right; }
.tier .mut { color: var(--text-muted); font-weight: var(--w-secondary); }
.warn { margin: 14px 20px 18px; padding: 12px 14px; border-radius: var(--r-md);
        background: var(--warn-soft); border: 1px solid var(--warn-line);
        font-size: 12.5px; color: var(--text-muted);
        font-weight: var(--w-secondary); line-height: 1.55; }
.warn b { color: var(--text); font-weight: var(--w-semi); }
.arch { padding: 6px 20px 18px; font-size: 12.5px; color: var(--text-faint);
        font-weight: var(--w-secondary); line-height: 1.6; }
.arch b { color: var(--text-muted); font-weight: var(--w-medium); }








.tl { padding: 4px 0 8px; }
/* Vier Spuren nebeneinander (96px 1fr auto auto) haben gepasst, solange der
   Verlauf ueber die ganze Breite lief. In der Kundenakte steht er in einer
   Spalte von rund 390px, und `auto` schrumpft nicht unter seinen Inhalt: das
   Raster wurde breiter als die Karte, die Belegnummer rutschte unter die
   Marken, und »RE-1346« stand auf »Rechnung«. Jetzt zwei Reihen — Datum,
   Sache, Betrag oben; die Marken darunter, wo sie Platz haben. */
.tl .z { display: grid;
         grid-template-columns: 88px minmax(0, 1fr) auto;
         gap: 4px 12px; align-items: baseline; padding: 11px 20px;
         border-top: 1px solid var(--line-soft); font-size: 13px; }
.tl .dt     { grid-column: 1; grid-row: 1; }
.tl .was    { grid-column: 2; grid-row: 1; }
.tl .betrag { grid-column: 3; grid-row: 1; white-space: nowrap; }
.tl .marken { grid-column: 2 / -1; grid-row: 2; }
.tl .marken:empty { display: none; }
.tl .z:first-child { border-top: 0; }
.tl .z:hover { background: var(--surface-2); }
.tl .dt { color: var(--text-faint); font-weight: var(--w-secondary); font-size: 12.5px; }
.tl .was { min-width: 0; }
.tl .was b { font-weight: var(--w-medium); }
.tl .marken { display: flex; gap: 5px; flex-wrap: wrap; }
.tl .betrag { text-align: right; font-variant-numeric: tabular-nums; }








/* Belege ohne Bestellung: dieselbe Zeitleiste, leiser gesetzt. */



.pal .lupe { color: var(--text-faint); }

/* Auf einem 800 oder 900 Pixel hohen Fenster passt der Auftakt sonst nicht in
   seine eigene Bildschirmhoehe, und dann schiebt er den Falz nach unten statt
   ihn zu setzen. Gemessen an der Hoehe, nicht an der Breite: ein 1512x982
   Bildschirm ist breit UND hoch, ein 1280x800 breit und knapp. */
@media (max-height: 900px) {





}
@media (max-height: 820px) {


}

/* ── Dubletten: zwei Sätze nebeneinander, dann eine Entscheidung ────────
   Die Seite, die bleibt, steht links und trägt den Rahmen; die andere ist
   leiser. Wer hinsieht, soll in einer Sekunde erkennen, welche verschwindet. */
.paar { padding: 18px 20px; border-top: 1px solid var(--line-soft); }
.paar:first-of-type { border-top: 0; }
.paar__seiten { display: grid; grid-template-columns: 1fr 1fr;
                gap: clamp(14px, 2vw, 28px); }
/* Eine Seite eines Dublettenpaars. Sie hiess .seite — genau wie die
   Seitenspalte der Karte, und ihr Rahmen und ihre Polsterung landeten dort
   mit. Sichtbar war das kaum; falsch war es trotzdem. */
.paarseite { padding: 14px 16px; border: 1px solid var(--line-soft);
             border-radius: 16px; background: var(--surface-2); }
.paarseite--bleibt { border-color: var(--ok); background: var(--surface); }
.paarseite__kopf { display: flex; align-items: center; gap: 9px;
                   margin-bottom: 10px; }
.paarseite__kopf b { font-weight: var(--w-semi); }
.paar__grund { margin: 14px 0 12px; font-size: 12.5px; color: var(--text-faint);
               font-weight: var(--w-secondary); }
.tl .beleg { font-size: 11.5px; }
@media (max-width: 860px) { .paar__seiten { grid-template-columns: 1fr; } }





/* ── Vorgang: zwei Einheiten nebeneinander ──────────────────────────────
   Der Beleg zaehlt Beutel, Sevdesk zaehlt Kartons, und beide schreiben
   »Stk.«. Beide Zeilen stehen deshalb immer da, gleich gross, nebeneinander —
   und darunter die Gegenprobe als Satz, nicht als Haken. */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
        background: var(--line-soft); border: 1px solid var(--line-soft);
        border-radius: 16px; overflow: hidden; margin: var(--s-3) 0; }




.probe { font-size: 13px; color: var(--ok); margin: 0 0 var(--s-3);
         font-weight: var(--w-medium); }

@media (max-width: 700px) { .zwei { grid-template-columns: 1fr; } }
/* Ein Satz, der eine Karte fuellt, wo sonst eine Liste steht. */
.leerzeile { padding: 4px 0 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Der Umbau vom 05.09.2026. Bauteile aus den zehn Entwuerfen.

   Namen wie im Entwurf, ausser wo der Baukasten den Namen schon vergeben hat
   (.bar ist der Fortschrittsbalken, .karte waere zweimal da). Werte aus dem
   Entwurf uebernommen, nicht nachempfunden.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Buehne. Der Entwurf setzt je Bildschirm eine eigene Hoechstbreite —
   sieben verschiedene, jede unten als eigene Klasse. Eine Zahl fuer alle
   waere bequemer und an fuenf Stellen falsch.
   (Die Werte stehen nur in den Regeln und nicht zusaetzlich hier im Text:
   pruefe_staged.py hat eine davon als Kundenumsatz erkannt, und in einer
   Aufzaehlung steht sie ohne »px« da — genau die Sorte Zufall, die die
   Pruefung nicht von echten Daten unterscheiden kann.) */
.app         { max-width: 1180px; }
.app--eng    { max-width: 1080px; }
.app--warroom{ max-width: 1120px; }
.app--breit  { max-width: 1320px; }
.app--akte   { max-width: 1240px; }
.app--belege { max-width: 1280px; }
.app--schmal { max-width: 1000px; }

/* ── Der Gruss. Zwei Zeilen, kein Titel: der Bildschirm heisst in der Leiste
   schon so, wie er heisst. ─────────────────────────────────────────────── */
.gruss { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
         margin: 0 2px 12px; }
.gruss h1 { margin: 0; font-size: var(--fs-21); font-weight: var(--w-semi);
            letter-spacing: var(--ls-titel); }
.gruss p { margin: 0; font-size: var(--fs-13); color: var(--dim); flex: 1;
           min-width: 260px; }
.gruss p b { color: var(--text); font-weight: var(--w-semi); }
/* Auf Heute steht der Gruss untereinander und der Satz darf breiter werden. */
.gruss--breit { display: block; margin-bottom: 20px; }
.gruss--breit h1 { font-size: var(--fs-22); margin-bottom: 3px; }
.gruss--breit p { max-width: 76ch; font-size: var(--fs-135); line-height: 1.55; }

/* ── Kartenkopf und Kartenzeile. Jede Karte hat eine Ueberschrift und einen
   Weg hinaus; die Zeilen darunter sind Name links, Wert rechts. ────────── */
.kk { padding: 10px 13px 4px; display: flex; align-items: baseline;
      justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kk h2, .kk h3 { margin: 0; font-size: var(--fs-12); font-weight: var(--w-semi);
                 color: var(--dim); }
.kk a, .kk span { font-size: var(--fs-11); color: var(--faint); }
.kk a:hover { color: var(--text); }
.zl { display: grid; grid-template-columns: 1fr auto; gap: 9px;
      padding: 7px 13px; border-top: 1px solid var(--stroke-soft);
      font-size: var(--fs-125); }
.zl:hover { background: var(--hover); }
.zl .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl .n i, .zl .n span { font-style: normal; color: var(--faint);
                        font-size: var(--fs-11); margin-left: 6px; }
.zl .v { color: var(--dim); white-space: nowrap; font-size: var(--fs-12); }
.zl .v.u { color: var(--warm); font-weight: var(--w-semi); }
.zl .v.g { color: var(--mint); font-weight: var(--w-semi); }
/* Zwei Zahlen nebeneinander in einer Karte. */
.zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.zahlen .z { padding: 10px 13px; border-left: 1px solid var(--stroke-soft);
             border-top: 1px solid var(--stroke-soft); }
.zahlen .z:nth-child(odd) { border-left: 0; }
.zahlen b { display: block; font-size: var(--fs-16); font-weight: var(--w-semi);
            letter-spacing: var(--ls-zahl); line-height: var(--lh-eng); }
.zahlen span { display: block; font-size: var(--fs-105); color: var(--faint);
               margin-top: 4px; }
.zahlen .w b { color: var(--warm); }
.zahlen .g b { color: var(--mint); }
/* Der Fuss einer Karte: woher die Zahl kommt, wie alt sie ist. */
.kfuss { padding: 9px 13px; border-top: 1px solid var(--stroke-soft);
         font-size: var(--fs-105); color: var(--faint); line-height: 1.5; }
.kfuss b { color: var(--dim); font-weight: var(--w-semi); }

/* ── Die Karte (Landkarte) ─────────────────────────────────────────────── */
.buehne { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px;
          align-items: stretch; }
@media (max-width: 1000px) { .buehne { grid-template-columns: 1fr; } }
.mapkarte { position: relative; display: flex; flex-direction: column; }
.mapkopf { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
           border-bottom: 1px solid var(--stroke-soft); flex-wrap: wrap; }
.filt { display: flex; gap: 3px; flex-wrap: wrap; }
.filt a { padding: 5px 10px; border-radius: var(--r-voll);
          border: 1px solid var(--stroke-soft); background: var(--solid);
          font-size: var(--fs-115); color: var(--dim);
          display: flex; align-items: center; gap: 6px; }
.filt a:hover { color: var(--text); }
.filt a[aria-current] { background: var(--hover-2); color: var(--text);
                        border-color: var(--stroke); font-weight: var(--w-semi); }
.filt i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* Die vier Zustaende der Karte, als Klasse statt als style="" — eine Vorlage
   bringt kein eigenes CSS mit (BRIEF §7). Dieselben Farben stehen in
   karte.ZUSTAND_FARBE fuer die Punkte selbst; sie muessen zusammenpassen,
   und verify_karte.py rechnet das nach. */
.pkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
       flex: 0 0 auto; }
.pkt--im_takt   { background: var(--mint); }
.pkt--faellig   { background: var(--warm); }
.pkt--gross     { background: var(--accent); }
.pkt--verstummt { background: var(--p-gy-t); }
.mapkopf .n { margin-left: auto; font-size: var(--fs-115); color: var(--faint); }
.mapfeld { position: relative; flex: 1; min-height: 0; display: grid;
           place-items: center; padding: 6px; }
.mapfeld svg { display: block; width: 100%; height: auto;
               max-height: min(66vh, 660px); }
.dot { cursor: pointer; }
.mapfuss { padding: 8px 12px; border-top: 1px solid var(--stroke-soft);
           font-size: var(--fs-105); color: var(--faint); display: flex;
           justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seite { display: flex; flex-direction: column; gap: 12px; }
.seite .card + .card { margin-top: 0; }

/* Die Suchzeile in der Seitenspalte und auf Heute. */
.tipp { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; }
.tipp input { flex: 1; font-size: var(--fs-125); padding: 7px 0;
              background: none; border: 0; }
.tipp input::placeholder { color: var(--faint); }
.tipp .go { padding: 6px 10px; border-radius: 5px; background: var(--accent);
            color: var(--auf); font-weight: var(--w-medium); font-size: var(--fs-12); }

/* ── Heute. Entwurf prototypes/tiger-today.html ─────────────────────────── */
/* Die Eingabezeile und ihre Deutung. Die Deutung steht UNTER der Zeile und
   nicht als Sprechblase: sie ist die Antwort auf das Getippte und wird
   gelesen, nicht weggeklickt. */
.deut { margin: 0 0 20px; padding: 0 15px; font-size: var(--fs-115);
        color: var(--faint); min-height: 17px; line-height: 1.5; }
.deut b { color: var(--dim); font-weight: var(--w-semi); }

/* Vier Zahlen in einer Reihe: was diese Woche hereinkam und was hinausging. */
.seit { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px;
        background: var(--glass); border: 1px solid var(--stroke);
        border-radius: var(--r); box-shadow: var(--shadow);
        -webkit-backdrop-filter: blur(var(--blur));
        backdrop-filter: blur(var(--blur)); overflow: hidden; }
.seit .s { padding: 10px 14px; border-left: 1px solid var(--stroke-soft); }
.seit .s:first-child { border-left: 0; }
.seit b { display: block; font-size: var(--fs-17); font-weight: var(--w-semi);
          letter-spacing: var(--ls-zahl); line-height: var(--lh-eng); }
.seit b em { font-style: normal; font-size: var(--fs-11); font-weight: var(--w-body);
             color: var(--faint); margin-left: 4px; }
.seit span { display: block; font-size: var(--fs-105); color: var(--faint);
             margin-top: 4px; }
.seit .g b { color: var(--mint); }
.seit .w b { color: var(--warm); }
@media (max-width: 760px) { .seit { grid-template-columns: 1fr 1fr; } }

/* Abschnittsmarke: Versalien, gesperrt, mit einer Linie bis zum Rand. */
h2.ab { margin: 0 0 8px; padding: 0 2px; font-size: var(--fs-105);
        letter-spacing: var(--ls-versal); text-transform: uppercase;
        color: var(--faint); display: flex; align-items: center; gap: 10px;
        font-weight: var(--w-semi); }
h2.ab::after { content: ""; flex: 1; height: 1px; background: var(--stroke-soft);
               order: 9; }
h2.ab a { letter-spacing: 0; text-transform: none; font-size: var(--fs-115);
          color: var(--faint); margin-left: auto; font-weight: var(--w-body); }
h2.ab a:hover { color: var(--text); }
h2.ab span { color: var(--faint); letter-spacing: 0; text-transform: none;
             font-size: var(--fs-11); font-weight: var(--w-body); }

/* Eine Zeile im Strom: Art, Wert, Zeit — dann der Satz, dann die Knoepfe. */
.vorgang { background: var(--glass); border: 1px solid var(--stroke);
      border-radius: var(--r); box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(var(--blur));
      backdrop-filter: blur(var(--blur));
      padding: 13px 16px; margin-bottom: 9px; }
.vorgang .art { display: flex; align-items: center; gap: 7px; font-size: var(--fs-10);
           letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
           margin-bottom: 6px; flex-wrap: wrap; }
.vorgang .art i { width: 6px; height: 6px; border-radius: 50%; }
.vorgang .art .wert { letter-spacing: 0; text-transform: none; font-size: var(--fs-11);
                 color: var(--dim); font-weight: var(--w-semi);
                 background: var(--solid); padding: 1px 7px; border-radius: var(--r-marke); }
.vorgang .art .zeit { margin-left: auto; letter-spacing: 0; text-transform: none;
                 font-size: var(--fs-11); }
.vorgang h3 { margin: 0; font-size: var(--fs-145); font-weight: var(--w-semi);
         letter-spacing: -.01em; }
.vorgang h3 b { color: var(--warm); font-weight: var(--w-semi); }
.vorgang p { margin: 4px 0 0; color: var(--dim); font-size: var(--fs-125); line-height: 1.5; }
.vorgang p em { font-style: normal; color: var(--text); font-weight: var(--w-medium); }
/* Der fertige Entwurf. <details> statt Skript — ohne Skript ist er offen,
   und das ist die richtige Rueckfallebene (§7). */

.vorgang summary { cursor: pointer; list-style: none; font-size: var(--fs-115);
              color: var(--faint); padding: 5px 0; }
.vorgang summary::-webkit-details-marker { display: none; }
.vorgang summary::after { content: " ▾"; }
.vorgang details[open] summary::after { content: " ▴"; }
.vorgang summary:hover { color: var(--text); }
.tun { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.tun .rechts { margin-left: auto; }
/* Eine der wenigen Hilfsklassen: was rechts steht, steht rechts. Sie wird von
   drei Bildschirmen benutzt und ist deshalb keine Seitenregel. */
.rechts { margin-left: auto; }
.leer { padding: 26px 16px; text-align: center; color: var(--faint);
        border: 1px dashed var(--stroke); border-radius: var(--r); }
.leer b { display: block; color: var(--mint); font-size: var(--fs-16);
          font-weight: var(--w-semi); margin-bottom: 4px; }

.spalten { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
           gap: 14px; align-items: start; }
.spalten--akte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .spalten, .spalten--akte { grid-template-columns: 1fr; } }

/* ── Kundenliste. Entwurf prototypes/tiger-crm-liste.html ───────────────── */
/* Vier Kacheln ueber der Liste: was ich schulde, wer lange still ist, wo das
   Geld liegt, und die eine Zahl, die Tiger nicht hat. */
.lage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
        margin-bottom: 20px; }
@media (max-width: 900px) { .lage { grid-template-columns: 1fr 1fr; } }
.lk { background: var(--glass); border: 1px solid var(--stroke);
      border-radius: var(--r); padding: 13px 15px; box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
      backdrop-filter: blur(var(--blur)) saturate(1.15); }
.lk b { display: block; font-size: var(--fs-22); font-weight: var(--w-semi);
        letter-spacing: var(--ls-titel); line-height: var(--lh-eng); }
.lk span { display: block; font-size: var(--fs-115); color: var(--faint);
           margin-top: 6px; line-height: 1.45; }

.lk--offen b { color: var(--faint); font-weight: var(--w-body); }
.bal { height: 5px; border-radius: 3px; background: var(--grid); margin-top: 9px;
       overflow: hidden; display: flex; }
.bal i { display: block; height: 100%; flex: 0 0 auto; }
.bal .b1 { background: var(--warm); } .bal .b2 { background: var(--amber); }
.bal .b3 { background: var(--mint); }

/* Die Sichten als Reiter. Jeder traegt seine Zahl: ein Reiter ohne Zahl
   verspricht eine Liste, deren Laenge man erst nach dem Klick erfaehrt. */
.sichten { display: flex; gap: 2px; border-bottom: 1px solid var(--stroke);
           margin: 0 2px 12px; overflow-x: auto; scrollbar-width: none; }
.sichten::-webkit-scrollbar { display: none; }
.sichten a { padding: 8px 12px; font-size: var(--fs-135); color: var(--dim);
             white-space: nowrap; border-bottom: 2px solid transparent;
             margin-bottom: -1px; }
.sichten a:hover { color: var(--text); }
.sichten a[aria-current] { color: var(--text); font-weight: var(--w-semi);
                           border-bottom-color: var(--text); }
.sichten i { font-style: normal; color: var(--faint); margin-left: 6px;
             font-size: var(--fs-12); font-weight: var(--w-body); }

/* Werkzeugzeile: Suche und Filter. */
.werk { display: flex; gap: 8px; align-items: center; margin: 0 2px 12px;
        flex-wrap: wrap; }
.suche { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 9px;
         padding: 7px 12px; border-radius: var(--r-klein);
         background: var(--glass); border: 1px solid var(--stroke); }
.suche input { flex: 1; font-size: var(--fs-135); background: none; border: 0; }
/* Der kleine Knopf: derselbe Koerper wie .btn, nur eine Nummer kleiner.
   Bis zum 05.09.2026 hatte er einen eigenen Radius und keine Tiefe. */
.klein { padding: 6px 11px; border-radius: var(--r-klein);
         border: 1px solid var(--stroke);
         background-color: var(--surface-2);
         background-image: linear-gradient(var(--glass), transparent);
         box-shadow: 0 1px 0 var(--glass) inset, 0 1px 2px -1px rgba(0, 0, 0, .2);
         font-size: var(--fs-13); color: var(--dim);
         transition: background-color .14s ease, color .14s ease,
                     box-shadow .14s ease, transform .06s ease; }
.klein:hover { color: var(--text); background-color: var(--surface-3); }
.klein:active { transform: translateY(.5px); box-shadow: none; }

/* Die Liste. Keine <table>: die Zeilen sind Verweise, und ein Verweis um eine
   Tabellenzeile ist kein gueltiges HTML. */
.tab { background: var(--glass); border: 1px solid var(--stroke);
       border-radius: var(--r); box-shadow: var(--shadow);
       -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
       backdrop-filter: blur(var(--blur)) saturate(1.15); overflow: hidden; }
.kz, .zeile { display: grid;
              grid-template-columns: minmax(0, 1.5fr) 92px 104px 108px 128px;
              gap: 14px; align-items: center; padding: 0 14px; }
.kz { height: 30px; font-size: var(--fs-11); color: var(--faint);
      border-bottom: 1px solid var(--stroke); }
.zeile { min-height: 38px; border-bottom: 1px solid var(--stroke-soft); }
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: var(--hover); }
.zeile .nm { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; font-size: var(--fs-135); }
.zeile .ort { font-size: var(--fs-125); color: var(--faint); margin-left: 8px;
              font-weight: var(--w-body); }
.re { text-align: right; }
.wert { font-size: var(--fs-13); font-weight: var(--w-medium); }
/* Der Verlauf: vier Jahre als Balken, dahinter die Richtung in Prozent. */
.tr { display: flex; align-items: center; gap: 7px; }
.tr .sp { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: 1; }
.tr .sp i { flex: 1; border-radius: 1px; background: var(--mint); opacity: .75;
            min-height: 2px; }
.tr .sp i.ab { background: var(--warm); }
.tr .sp i.jetzt { opacity: .4; }
.tr .pf { font-size: var(--fs-115); font-weight: var(--w-semi); white-space: nowrap; }
.tr .pf.h { color: var(--mint); } .tr .pf.r { color: var(--warm); }
.tr .pf.g { color: var(--faint); }
.tfuss { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
         padding: 11px 16px; border-top: 1px solid var(--stroke);
         font-size: var(--fs-12); color: var(--faint); }
.tfuss b { color: var(--dim); font-weight: var(--w-semi); }
@media (max-width: 1000px) { .kz, .zeile { grid-template-columns: minmax(0,1.3fr) 96px 108px; }
  .c-tr, .c-umsatz { display: none; } }

/* ── Kundenakte. Entwurf prototypes/tiger-crm.html ──────────────────────── */
.krume { font-size: var(--fs-125); color: var(--faint); font-weight: var(--w-sub);
         margin: 0 4px 10px; }
.krume a:hover { color: var(--text); }
.akte-kopf { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
             margin: 0 4px 4px; }
.akte-kopf h1 { margin: 0; font-size: var(--fs-29); font-weight: var(--w-bold);
                letter-spacing: var(--ls-kopf); }
.marken { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.m { font-size: var(--fs-12); padding: 2px 9px; border-radius: var(--r-marke);
     color: var(--p-gy-t); background: var(--p-gy); font-weight: var(--w-medium); }
.m--ok  { color: var(--p-gr-t); background: var(--p-gr); }
.m--hot { color: var(--p-ro-t); background: var(--p-ro); }
/* Der Streifen mit den sechs Zahlen: er beantwortet den Kunden, bevor
   gescrollt wird. Jede Zahl nennt darunter, was sie ist. */
.streif { display: flex; flex-wrap: wrap; margin: 18px 4px 22px; padding: 15px 0;
          border-top: 1px solid var(--stroke-soft);
          border-bottom: 1px solid var(--stroke-soft); }
.streif .s { padding: 0 clamp(14px, 2vw, 26px); border-left: 1px solid var(--stroke-soft); }
.streif .s:first-child { padding-left: 0; border-left: 0; }
.streif b { display: block; font-size: var(--fs-20); font-weight: var(--w-body);
            letter-spacing: var(--ls-titel); line-height: var(--lh-eng); }
.streif span { display: block; font-size: var(--fs-115); color: var(--faint);
               margin-top: 5px; font-weight: var(--w-sub); }
.streif .s.hot b { color: var(--warm); }

/* Notiz erfassen. */
.neu { padding: 0 18px 14px; }
.neu .arten { display: flex; gap: 5px; margin-bottom: 9px; flex-wrap: wrap; }
.neu .arten label { padding: 6px 11px; border-radius: var(--r-voll);
                    border: 1px solid var(--stroke-soft); background: var(--solid);
                    font-size: var(--fs-12); color: var(--dim); cursor: pointer; }
.neu .arten input { position: absolute; opacity: 0; width: 0; height: 0; }
.neu .arten input:checked + label { background: var(--hover-2); color: var(--text);
                                    border-color: var(--stroke); font-weight: var(--w-semi); }
.neu .arten input:focus-visible + label { outline: var(--focus); outline-offset: 2px; }
.neu textarea { width: 100%; background: var(--sheet); border: 1px solid var(--stroke);
                border-radius: var(--r); padding: 10px 12px; font-size: var(--fs-135);
                min-height: 64px; resize: vertical; }
.neu textarea:focus { outline: 0; border-color: var(--accent); }
.neu .formzeile { display: flex; gap: 8px; align-items: center; margin-top: 9px;
              flex-wrap: wrap; }
.neu .hin { font-size: var(--fs-115); color: var(--faint); font-weight: var(--w-sub);
            margin-left: auto; }

/* Der Verlauf: eine Spalte fuer den Punkt, eine fuer alles andere. */
.ev { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 18px;
      border-top: 1px solid var(--stroke-soft); }
.ev:hover { background: var(--hover); }
.ev .sp { position: relative; display: flex; justify-content: center; }
.ev .sp::before { content: ""; position: absolute; top: -13px; bottom: -13px;
                  width: 1px; background: var(--stroke-soft); }
.ev .sp i { position: relative; width: 9px; height: 9px; border-radius: 50%;
            margin-top: 5px; background: var(--faint);
            box-shadow: 0 0 0 3px var(--bg); }
.ev--bestellung .sp i { background: var(--mint); }
.ev--beleg .sp i     { background: var(--accent); }
.ev--notiz .sp i     { background: var(--p-bl-t); }
.ev .zeit { font-size: var(--fs-115); color: var(--faint); font-weight: var(--w-sub); }
.ev .kopfz { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ev b { font-size: var(--fs-135); font-weight: var(--w-semi); }
.ev p { margin: 3px 0 0; color: var(--dim); font-weight: var(--w-sub);
        font-size: var(--fs-13); line-height: 1.5; }
.ev .von { font-size: var(--fs-11); color: var(--faint); font-weight: var(--w-sub);
           margin-left: auto; }
.ev .bel { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.ev .bel a, .ev .bel span { font-size: var(--fs-115); padding: 2px 8px;
                            border-radius: var(--r-marke); color: var(--p-bl-t);
                            background: var(--p-bl); font-weight: var(--w-medium); }
.ev .bel span.fehlt { color: var(--p-gy-t); background: var(--p-gy); }

/* Rechte Spalte: Merkmale, Personen, Entwicklung. */
.kv { padding: 4px 18px 14px; font-size: var(--fs-13); }
.kv .r { display: grid; grid-template-columns: 96px 1fr; gap: 5px 12px;
         padding: 7px 0; border-top: 1px solid var(--stroke-soft); }
.kv .r:first-child { border-top: 0; }
.kv dt { color: var(--faint); font-weight: var(--w-sub); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv .q { font-size: var(--fs-11); color: var(--faint); margin-left: 6px; }
.person { display: flex; align-items: center; gap: 11px; padding: 11px 18px;
          border-top: 1px solid var(--stroke-soft); }
.person .av2 { width: 32px; height: 32px; border-radius: 50%; background: var(--solid);
               border: 1px solid var(--stroke-soft); display: grid; place-items: center;
               font-size: var(--fs-115); font-weight: var(--w-semi); color: var(--dim);
               flex: 0 0 auto; }
.person .tx2 b { display: block; font-size: var(--fs-13); font-weight: var(--w-medium); }
.person .tx2 span { display: block; font-size: var(--fs-115); color: var(--faint);
                    font-weight: var(--w-sub); }
.jahre { display: flex; align-items: flex-end; gap: 6px; height: 56px; padding: 6px 18px 0; }
.jahre .j { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
            height: 100%; }
.jahre .bal2 { border-radius: 3px 3px 0 0; background: var(--mint); opacity: .85;
               min-height: 2px; }
.jahre .j.ab .bal2 { background: var(--warm); }
.jahre .j.jetzt .bal2 { opacity: .5; }
.jahre .lab { font-size: var(--fs-9); color: var(--faint); text-align: center;
              margin-top: 4px; font-weight: var(--w-sub); }
.rh { position: relative; height: 22px; margin: 10px 18px 0; }
.rh .l { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--grid); }
.rh i { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
        border-radius: 50%; background: var(--faint); }
.rh i.last { background: var(--accent); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.rh .now { position: absolute; top: 2px; bottom: 2px; right: 0; width: 2px;
           background: var(--warm); border-radius: 2px; }
/* Formularzeilen in der Akte und im Belegformular (Entwurf tiger-neuer-beleg). */
.f { margin-bottom: 11px; }
.f label { display: block; font-size: var(--fs-115); color: var(--dim); margin-bottom: 4px; }
.f label em { font-style: normal; color: var(--faint); margin-left: 5px; }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .zwei, .drei { grid-template-columns: 1fr; } }

/* ── Signale. Entwurf prototypes/tiger-signals.html ─────────────────────── */
/* Eine Gruppe: Zahl, Titel, Warum, Einsatz — und darunter die Zeilen. Offen
   oder zu ueber <details>; ohne Skript sind alle offen, und das ist die
   richtige Rueckfallebene (§7). */
.sgrp { background: var(--glass); border: 1px solid var(--stroke);
       border-radius: var(--r); box-shadow: var(--shadow);
       -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
       backdrop-filter: blur(var(--blur)) saturate(1.15);
       overflow: hidden; margin-bottom: 12px; }
.gk { padding: 12px 16px; display: flex; align-items: baseline; gap: 10px;
      flex-wrap: wrap; cursor: pointer; list-style: none; }
.gk::-webkit-details-marker { display: none; }
.gk:hover { background: var(--hover); }
.gk .zahl2 { font-size: var(--fs-19); font-weight: var(--w-semi);
             letter-spacing: var(--ls-zahl); min-width: 30px; }
.gk h2 { margin: 0; font-size: var(--fs-135); font-weight: var(--w-semi); }
.gk .warum2 { font-size: var(--fs-115); color: var(--faint); flex: 1; min-width: 200px; }
.gk .wert2 { font-size: var(--fs-12); color: var(--dim); font-weight: var(--w-medium); }
.gk .pf2 { color: var(--faint); font-size: var(--fs-11); }
.sgrp--w .gk .zahl2 { color: var(--warm); }
.sgrp--a .gk .zahl2 { color: var(--amber); }
.sgrp--b .gk .zahl2 { color: var(--p-bl-t); }
.sz { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1.5fr) 78px 150px;
      gap: 12px; align-items: center; padding: 9px 16px;
      border-top: 1px solid var(--stroke-soft); font-size: var(--fs-125); }
.sz:hover { background: var(--hover); }
.sz.weg { opacity: .45; }
.sz .nm2 { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; }
.sz .nm2 span { color: var(--faint); font-weight: var(--w-body); margin-left: 7px;
                font-size: var(--fs-115); }
.sz .ev2 { color: var(--dim); line-height: 1.45; }
.sz .ev2 b { color: var(--text); font-weight: var(--w-semi); }
.sz .w2 { text-align: right; font-weight: var(--w-medium); }
.sz .tun2 { display: flex; gap: 5px; justify-content: flex-end; }
/* Der Stapel. Eine Karte statt sechzig Zeilen: die Zeile war zum Lesen da,
   die Karte ist zum Entscheiden da. Deshalb bekommt sie Raum — der Name gross,
   der Beleg in ganzer Breite, die beiden Handlungen unten und weit
   auseinander, damit »Nicht jetzt« kein Nachbar von »Öffnen« ist.

   Unter der Karte die Leiste: zurueck, wo man steht, weiter. Sie ist der
   Grund, warum das ein Stapel und keine Seite ist. */
.stapel { padding: 14px 16px 16px; }
.karte2 { padding: 16px 18px 14px; border-radius: var(--r-md);
          border: 1px solid var(--stroke);
          background-color: var(--surface-2);
          background-image: linear-gradient(var(--glass), transparent);
          box-shadow: 0 1px 0 var(--glass) inset,
                      0 6px 18px -12px rgba(0, 0, 0, .55); }
.karte2.weg { opacity: .5; }
.k2kopf { display: flex; align-items: baseline; gap: 12px; }
.k2kopf .nm2 { font-size: var(--fs-16); font-weight: var(--w-semi);
               line-height: 1.25; }
.k2kopf .nm2 span { color: var(--faint); font-weight: var(--w-body);
                    font-size: var(--fs-125); margin-left: 8px; }
.k2kopf .w2 { margin-left: auto; white-space: nowrap;
              font-size: var(--fs-16); font-weight: var(--w-medium); }
.k2ev { margin: 9px 0 14px; color: var(--dim); line-height: 1.5;
        font-size: var(--fs-135); max-width: 68ch; }
.k2ev b { color: var(--text); font-weight: var(--w-semi); }
.k2tun { display: flex; gap: 8px; align-items: center; }
.k2nav { display: flex; align-items: center; justify-content: space-between;
         gap: 12px; margin-top: 12px; }
.k2zaehler { color: var(--faint); font-size: var(--fs-115);
             font-variant-numeric: tabular-nums; }
.k2durch { color: var(--faint); font-size: var(--fs-115); }
@media (max-width: 560px) {
  .k2kopf { flex-wrap: wrap; }
  .k2kopf .w2 { margin-left: 0; }
}

/* Der Knopf an einer Signalzeile. »Öffnen« fuehrt zur Akte und traegt
   deshalb die Akzentfarbe; »Nicht jetzt« legt weg und bleibt still — zwei
   Handlungen nebeneinander, die sich nicht gleichen duerfen. */
.mini2 { padding: 5px 10px; border-radius: var(--r-klein); font-size: var(--fs-115);
         font-weight: var(--w-medium); color: var(--auf);
         background-color: var(--accent);
         background-image: linear-gradient(rgba(255, 255, 255, .16), transparent);
         box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset,
                     0 2px 7px -3px color-mix(in srgb, var(--accent) 70%, transparent);
         white-space: nowrap; border: 1px solid transparent;
         transition: background-color .14s ease, color .14s ease,
                     box-shadow .14s ease, transform .06s ease; }
.mini2:active { transform: translateY(.5px); box-shadow: none; }
.mini2.q { background-color: var(--surface-2);
           background-image: linear-gradient(var(--glass), transparent);
           border-color: var(--stroke); color: var(--dim);
           box-shadow: 0 1px 0 var(--glass) inset, 0 1px 2px -1px rgba(0, 0, 0, .2); }
.mini2.q:hover { color: var(--text); background-color: var(--surface-3); }
@media (max-width: 860px) { .sz { grid-template-columns: 1fr 78px; }
  .sz .ev2, .sz .tun2 { grid-column: 1/-1; } .sz .tun2 { justify-content: flex-start; } }

/* ── War Room. Entwurf prototypes/tiger-warroom-bi.html ─────────────────── */
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.raster .breit { grid-column: 1 / -1; }
@media (max-width: 920px) { .raster { grid-template-columns: 1fr; } }
.dbody { padding: 6px 16px 4px; }
.dbody svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Der Befund unter jedem Diagramm: ein Satz, der die Zahl auslegt, und
   darunter, woraus sie gerechnet ist. Ohne den zweiten Teil ist der erste
   eine Meinung. */
.befund { padding: 10px 16px 13px; font-size: var(--fs-125); line-height: 1.6;
          color: var(--dim); border-top: 1px solid var(--stroke-soft); margin-top: 8px; }
.befund b { color: var(--text); font-weight: var(--w-semi); }
.befund .vor { display: block; margin-top: 5px; font-size: var(--fs-11);
               color: var(--faint); }
/* Das Kohortenraster: eine Zeile je Jahrgang, eine Spalte je Fenster.
   Jede Zelle traegt ihren eigenen Nenner — deshalb zwei Zeilen je Zelle. */
.koh { display: grid; grid-template-columns: 66px repeat(4, 1fr) 96px; gap: 3px;
       font-size: var(--fs-115); padding: 2px 0 0; }
.koh .h { color: var(--faint); font-size: var(--fs-105); text-align: center;
          padding-bottom: 3px; }
.koh .j { color: var(--dim); display: flex; align-items: center; }
.koh .c { padding: 6px 4px; border-radius: 4px; text-align: center;
          font-weight: var(--w-semi); color: var(--text); }
/* Fuenf Stufen statt einer stufenlosen Deckkraft: der Entwurf mischt die
   Farbe mit color-mix je Wert, und das waere eine Farbe je Zelle in der
   Vorlage. Fuenf Stufen sind ablesbar und stehen im Baukasten. */
.koh .c--1 { background: color-mix(in srgb, var(--accent)  8%, transparent); }
.koh .c--2 { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.koh .c--3 { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.koh .c--4 { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.koh .c--5 { background: color-mix(in srgb, var(--accent) 48%, transparent); }
.koh .c small { display: block; font-weight: var(--w-body); font-size: var(--fs-9);
                color: var(--faint); }
.koh .c.leer { background: none; color: var(--faint); font-weight: var(--w-body); }
.koh .n2 { display: flex; align-items: center; justify-content: flex-end;
           color: var(--faint); font-size: var(--fs-11); }

/* ── Lager. Entwurf prototypes/tiger-inventory.html ─────────────────────── */
.oben { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
        gap: 12px; margin-bottom: 12px; align-items: stretch; }
.unten { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);
         gap: 12px; align-items: start; }
@media (max-width: 1080px) { .oben, .unten { grid-template-columns: 1fr; } }
.zustand { padding: 16px 18px 14px; display: flex; flex-direction: column; }
.hz { display: flex; align-items: baseline; gap: 12px; padding-bottom: 13px;
      border-bottom: 1px solid var(--stroke-soft); }
.gross2 { font-size: var(--fs-38); font-weight: var(--w-semi);
          letter-spacing: -.04em; line-height: 1; }
.satz2 b { display: block; font-size: var(--fs-135); font-weight: var(--w-semi); }
.satz2 span { display: block; font-size: var(--fs-115); color: var(--faint);
              margin-top: 4px; line-height: 1.45; }
.zaehl-block { padding-top: 12px; margin-top: auto; }
.zaehl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
         font-size: var(--fs-13); color: var(--dim); }
.zaehl input { background: var(--sheet); border: 1px solid var(--stroke);
               border-radius: var(--r-klein); padding: 6px 9px;
               font-size: var(--fs-13); font-weight: var(--w-semi); color: var(--text); }
.zaehl input[type=date] { font-weight: var(--w-body); font-size: var(--fs-125); }
.zaehl input:focus { outline: 0; border-color: var(--accent); }
.abgleich { margin-top: 10px; font-size: var(--fs-125); color: var(--dim);
            line-height: 1.6; }
.abgleich b { color: var(--text); font-weight: var(--w-semi); }
.rechnung2 { display: block; margin-top: 6px; font-size: var(--fs-12); color: var(--faint); }
/* Die Kacheln: drei nach vorn, drei zurück. */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 620px) { .kacheln { grid-template-columns: 1fr; } }
.grt { padding: 10px 16px 2px; font-size: var(--fs-10); letter-spacing: .11em;
       text-transform: uppercase; color: var(--faint); }
/* In der Kundenliste steht dieselbe Ueberschrift ZWISCHEN Zeilen und nicht
   ueber einer Liste: sie braucht deshalb eine Linie darueber, den Innenabstand
   der Tabelle und Platz fuer ihre Zahl. Direkt unter dem Tabellenkopf keine
   zweite Linie — er bringt seine eigene mit. */
.tab .grt { display: flex; gap: 8px; align-items: baseline;
            padding: 15px 14px 5px; border-top: 1px solid var(--stroke); }
.tab .kz + .grt { border-top: 0; padding-top: 11px; }
.grt i { font-style: normal; letter-spacing: 0; color: var(--dim); }
.gz { display: grid; grid-template-columns: repeat(3, 1fr); }
.kc { padding: 13px 16px 15px; border-left: 1px solid var(--stroke-soft); }
.kc:first-child { border-left: 0; }
.kc i { display: block; font-style: normal; font-size: var(--fs-115);
        color: var(--dim); font-weight: var(--w-medium); }
.kc b { display: block; font-size: var(--fs-30); font-weight: var(--w-semi);
        letter-spacing: -.035em; line-height: 1.05; margin-top: 7px; }
.kc b em { font-style: normal; font-size: var(--fs-13); font-weight: var(--w-body);
           color: var(--faint); margin-left: 5px; letter-spacing: 0; }
.kc u { display: block; text-decoration: none; height: 4px; border-radius: 99px;
        background: var(--grid); margin-top: 9px; overflow: hidden; }
.kc u i { display: block; height: 100%; border-radius: 99px; background: var(--accent);
          font-size: 0; }
.kc u i.w { background: var(--warm); } .kc u i.g { background: var(--mint); }
.kc span { display: block; font-size: var(--fs-115); color: var(--faint);
           margin-top: 8px; line-height: 1.45; min-height: 3em; }
/* Eine fette Zahl IM Satz bleibt Fliesstext. Ohne diese Zeile erbt sie die
   30px der grossen Kachelzahl darueber, und der Satz zerfaellt. */
.kc span b { display: inline; font-size: inherit; font-weight: var(--w-semi);
             color: var(--dim); margin: 0; letter-spacing: 0; }
.kc span.w b { color: var(--warm); } .kc span.g b { color: var(--mint); }
.kc span.w { color: var(--warm); } .kc span.g { color: var(--mint); }
/* Verbrauch je Monat und die Aufschlüsselung des Meldepunkts. */
.verbr { padding: 2px 16px 12px; }
.vz { display: grid; grid-template-columns: 54px 1fr 60px; gap: 9px;
      align-items: center; padding: 3px 0; font-size: var(--fs-12); }
.vz .m2 { color: var(--faint); }
.vz .t2 { height: 7px; border-radius: 99px; background: var(--grid); overflow: hidden; }
.vz .f2 { display: block; height: 100%; border-radius: 99px; background: var(--accent);
          opacity: .75; }
.vz .f2.jetzt { opacity: .4; }
.vz .n3 { text-align: right; font-weight: var(--w-medium); }
.rp-tab { margin: 10px 16px 12px; border-top: 1px solid var(--stroke-soft); }
.rp-tab .r2 { display: flex; justify-content: space-between; gap: 12px;
              padding: 5px 0; font-size: var(--fs-12);
              border-bottom: 1px solid var(--stroke-soft); }
.rp-tab .r2:last-child { border-bottom: 0; font-weight: var(--w-semi); }
.rp-tab .r2 span { color: var(--dim); }
.rp-tab .r2 em { font-style: normal; color: var(--faint); font-size: var(--fs-115);
                 margin-left: 6px; }
.satzform { margin: 0 16px 8px; font-size: var(--fs-125); line-height: 1.55; }
/* Bewegungen. */
.bz { display: grid; grid-template-columns: 66px 1fr 74px 68px; gap: 10px;
      align-items: center; padding: 7px 16px; border-top: 1px solid var(--stroke-soft);
      font-size: var(--fs-125); }
.bz:hover { background: var(--hover); }
.bz .d2 { color: var(--faint); }
.bz .w3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz .r3 { text-align: right; color: var(--dim); }
.p2 { font-size: var(--fs-115); padding: 2px 8px; border-radius: var(--r-marke);
      font-weight: var(--w-medium); display: inline-block; white-space: nowrap; }
.p2--ein { background: var(--p-gr); color: var(--p-gr-t); }
.p2--aus { background: var(--p-gy); color: var(--p-gy-t); }
.p2--zaehlung { background: var(--p-bl); color: var(--p-bl-t); }

/* ── Belege. Entwurf prototypes/tiger-belege.html ───────────────────────── */
.bspalten { display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 14px;
            align-items: start; }
.brechts { position: sticky; top: calc(var(--bar-raum) + 8px); }
@media (max-width: 1040px) { .bspalten { grid-template-columns: 1fr; }
  .brechts { position: static; } }
.chips { display: flex; gap: 5px; padding: 0 15px 10px; flex-wrap: wrap; }
.chip { padding: 5px 9px; font-size: var(--fs-12); border-radius: var(--r-voll);
        border: 1px solid var(--stroke-soft); background: var(--solid);
        color: var(--dim); }
.chip:hover { color: var(--text); }
.chip[aria-current] { background: var(--hover-2); color: var(--text);
                      border-color: var(--stroke); font-weight: var(--w-semi); }
.bliste { max-height: min(58vh, 620px); overflow-y: auto; }
.brow { display: grid; grid-template-columns: 74px 1fr 84px; gap: 10px;
        align-items: center; padding: 8px 15px;
        border-top: 1px solid var(--stroke-soft); }
.brow:hover { background: var(--hover); }
.brow[aria-current] { background: var(--hover-2); }
.brow .nr { font-size: var(--fs-12); color: var(--faint); font-weight: var(--w-sub); }
.brow .nm3 { display: block; font-size: var(--fs-125); font-weight: var(--w-medium);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .un { display: block; font-size: var(--fs-11); color: var(--faint);
            font-weight: var(--w-sub); }
.brow .st { text-align: right; font-size: var(--fs-11); padding: 3px 8px;
            border-radius: var(--r-voll); border: 1px solid; justify-self: end;
            white-space: nowrap; }
.st--tiger { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.st--da    { color: var(--mint);   border-color: color-mix(in srgb, var(--mint) 35%, transparent); }
.st--fehlt { color: var(--faint);  border-color: var(--stroke-soft); }
/* Die Vorschau: das echte Papier, nicht eine Nachzeichnung. */
.vk { padding: 10px 14px; display: flex; align-items: center; gap: 7px;
      flex-wrap: wrap; border-bottom: 1px solid var(--stroke-soft); }
.vk h2 { margin: 0; font-size: var(--fs-125); font-weight: var(--w-semi);
         margin-right: auto; color: var(--dim); }
.papier-wrap { padding: 12px; background: var(--solid);
               border-top: 1px solid var(--stroke-soft);
               container-type: inline-size; }
.papier-rahmen { width: 100%; aspect-ratio: 210/297; border: 0; border-radius: 2px;
                 background: #fff; box-shadow: 0 20px 44px -26px rgba(0,0,0,.45),
                 0 0 0 1px rgba(0,0,0,.07); }
/* Das gezeichnete Blatt. Masse und Farben Zeile fuer Zeile aus
   prototypes/tiger-belege.html — es ist die A4-Seite, und sie soll aussehen
   wie Papier und nicht wie ein Kasten der Oberflaeche. Deshalb steht hier
   Weiss und Schwarz und nicht die Palette: das Blatt gehoert nicht zum
   Farbschema, es gehoert zum Drucker. Es dreht sich auch nicht mit dem
   Dunkelschema — ein Angebot ist auf Papier weiss. */
/* Massstabsgetreu statt auf eine Hoehe gezwungen. Der Entwurf setzte eine
   feste Hoehe und 8,4px Schrift; mit den ECHTEN Absaetzen des Angebots lief
   der Text unten aus dem Blatt und durch die Fusszeile. Das Papier ist
   210 mm breit und die Schrift 11 pt — also 1,85 % der Blattbreite. Genau das
   steht hier, in cqw: die Schrift waechst mit dem Blatt, und was auf A4
   passt, passt auch in der Vorschau. */
.papier { background: #fff; color: #111;
          font-family: 'DIN 2014', 'Barlow', system-ui, sans-serif;
          width: 100%; aspect-ratio: 210/297; margin: 0 auto;
          padding: 8.5% 8% 6%; font-size: 1.85cqw;
          box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .45),
                      0 0 0 1px rgba(0, 0, 0, .07);
          border-radius: 2px; line-height: 1.42;
          position: relative; overflow: hidden; }
.p-kopf { display: flex; justify-content: space-between; align-items: flex-start;
          margin-bottom: 5%; }
.p-logo { width: 11%; aspect-ratio: 1; border-radius: 50%;
          background: conic-gradient(from 200deg, #D9932F, #F0C57C, #D9932F); }
.p-firma { font-size: .85em; color: #555; text-align: right; line-height: 1.4; }
.p-firma b { color: #111; font-weight: 600; }
.p-absender { font-size: .7em; color: #777; text-decoration: underline;
              margin-bottom: 1.2%; }
.p-adr { line-height: 1.45; margin-bottom: 6%; min-height: 4.5em; }
.p-meta { position: absolute; right: 8%; top: 23%; text-align: right;
          font-size: .9em; line-height: 1.55; }
.p-meta b { font-weight: 600; }
.p-h1 { font-size: 1.5em; font-weight: 700; margin: 0 0 3%; letter-spacing: -.01em; }
.p-satz { margin: 0 0 3%; }
.p-tab { width: 100%; border-collapse: collapse; font-size: .92em; margin-bottom: 3%; }
.p-tab th { background: #EDEDED; font-weight: 600; text-align: center;
            padding: .6em .5em; border: 1px solid #CFCFCF; }
.p-tab td { padding: .65em .5em; border: 1px solid #CFCFCF; text-align: center;
            vertical-align: middle; }
.p-tab td:nth-child(2) { text-align: left; }
.p-sum { margin-left: auto; width: 52%; font-size: .95em; }
.p-sum div { display: flex; justify-content: space-between; padding: .25em 0; }
.p-sum .tot { border-top: 2px solid #111; margin-top: .3em; padding-top: .5em;
              font-weight: 700; }
.p-gilt { margin: 3% 0 0; font-weight: 700; }
.p-vort { margin: 3% 0 0; font-size: .9em; color: #333; padding-left: 1.1em; }
.p-vort li { margin-bottom: .35em; }
.p-gruss { margin-top: 4%; }
.p-fuss { position: absolute; left: 8%; right: 8%; bottom: 4%; font-size: .68em;
          color: #777; border-top: 1px solid #DDD; padding-top: .8em;
          display: flex; justify-content: space-between; gap: 1em; line-height: 1.5; }

.papier-leer { display: grid; place-items: center; text-align: center;
               padding: 40px 24px; color: var(--faint); font-size: var(--fs-125);
               line-height: 1.6; }
/* Die Belegart als zwei Knoepfe nebeneinander (Entwurf tiger-neuer-beleg). */
.art { display: flex; gap: 5px; margin-bottom: 12px; }
.art .btn { flex: 1; }
.summe { background: var(--sheet); border: 1px solid var(--stroke);
         border-radius: var(--r-klein); padding: 10px 12px; margin-bottom: 10px; }
/* Dieselbe Zeilenform wie in der Meldepunkt-Tabelle: Bezeichnung links,
   Zahl rechts. Ohne diese Regel stehen beide aneinandergeklebt in einer
   Zeile — .r2 ist bisher nur unter .rp-tab gesetzt. */
.summe .r2 { display: flex; justify-content: space-between; gap: 12px;
             padding: 5px 0; font-size: var(--fs-125);
             border-bottom: 1px solid var(--stroke-soft); }
.summe .r2 span { color: var(--dim); }
.summe .r2:last-child { border-bottom: 0; font-weight: var(--w-semi);
                        font-size: var(--fs-14); }
.hint { font-size: var(--fs-11); color: var(--faint); margin-top: 4px; line-height: 1.5; }
.hint b { color: var(--dim); font-weight: var(--w-semi); }
.aktion { display: flex; gap: 7px; align-items: center; padding: 11px 15px;
          border-top: 1px solid var(--stroke); flex-wrap: wrap; }
.aktion .n { margin-left: auto; font-size: var(--fs-11); color: var(--faint);
             max-width: 46ch; }
.form { padding: 8px 15px 14px; }
/* Die Zeile UNTER einem Formularfeld — Knopf und Hinweis nebeneinander.
   Sie hiess bis zum 05.09.2026 .zeile, genau wie die Zeile der Kundenliste.
   Da diese Regel weiter unten steht, hat sie der Liste ihr Raster genommen:
   Name, Ort, Zahl und Verlauf standen aneinandergeklebt in einer Reihe. Ein
   Name, zwei Bedeutungen — dieselbe Falle wie .bar, .grp, .it und .u. */
.formzeile { display: flex; gap: 8px; align-items: center; margin-top: 9px;
             flex-wrap: wrap; }

/* ── Einstellungen. Entwurf prototypes/tiger-settings.html ──────────────── */
.espalten { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px;
            align-items: start; }
@media (max-width: 800px) { .espalten { grid-template-columns: 1fr; }
  .reiter { flex-direction: row; overflow-x: auto; } }
.reiter { display: flex; flex-direction: column; gap: 1px; position: sticky;
          top: calc(var(--bar-raum) + 8px); }
.reiter a { text-align: left; padding: 7px 11px; border-radius: var(--r-klein);
            font-size: var(--fs-125); color: var(--dim); white-space: nowrap; }
.reiter a:hover { background: var(--hover); color: var(--text); }
.reiter a[aria-current] { background: var(--hover-2); color: var(--text);
                          font-weight: var(--w-semi); }
/* Die Staffeltabelle: vier Spalten, zwei davon zum Tippen. */
.st { border: 1px solid var(--stroke); border-radius: var(--r-klein);
      overflow: hidden; margin: 0 0 11px; }
.stz { display: grid; grid-template-columns: 1fr 96px 96px 110px; gap: 9px;
       align-items: center; padding: 7px 11px;
       border-top: 1px solid var(--stroke-soft); font-size: var(--fs-125); }
.stz:first-child { border-top: 0; font-size: var(--fs-105); color: var(--faint); }
.stz .input { padding: 4px 8px; font-size: var(--fs-125); }
.stz .re { text-align: right; }
.warnbox { margin: 10px 15px; padding: 10px 12px; border-radius: var(--r-klein);
           font-size: var(--fs-115); line-height: 1.55;
           background: var(--p-ge); color: var(--p-ge-t); }
.warnbox--gefahr { background: var(--p-ro); color: var(--p-ro-t); }
/* Eine Regel mit Schalter. */
.rz { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
      padding: 11px 15px; border-top: 1px solid var(--stroke-soft); }
.rz .t b { display: block; font-size: var(--fs-13); font-weight: var(--w-medium); }
.rz .t span { display: block; font-size: var(--fs-115); color: var(--faint);
              margin-top: 2px; line-height: 1.5; }
.rz .t .mark { display: inline-block; font-size: var(--fs-10); padding: 1px 7px;
               border-radius: var(--r-marke); margin-top: 5px;
               font-weight: var(--w-medium); }
.m-a { background: var(--p-gr); color: var(--p-gr-t); }
.m-f { background: var(--p-ge); color: var(--p-ge-t); }