/* dashboard/static/dashboard/geschaeft.css — gemeinsame Bausteine der
 * Geschäftsseiten (Leads, Kunden, Akte; später Kasse/Verträge).
 *
 * Warum eine eigene Datei: Die Seiten sollen sich wie EIN Produkt anfühlen —
 * gleicher Kopf, gleiche Zahlenleiste, gleiche Liste, gleicher Leerzustand.
 * Seiteneigenes CSS (akte.css, kunden.css, pipeline.css) baut NUR Anordnung
 * darauf, keine eigenen Varianten dieser Teile. Nur Tokens aus panel.css /
 * ds-tokens.css, keine festen Farben; Dunkel/Hell kommt damit von selbst.
 *
 * Bausteine (Markup knapp; `…` = Inhalt):
 *
 *  Seitenkopf
 *    <a class="g-zurueck" href="…">Leads</a>
 *    <header class="g-kopf"><div class="g-kopf-titel">[<span class="g-avatar g-avatar-lg">WK</span>]
 *      <div><h1>…</h1><p class="g-kopf-sub">…</p>[<div class="g-kopf-meta">Pille, Chips…</div>]</div></div>
 *      <div class="g-kopf-aktionen"><a class="btn">…</a><details class="g-pop g-pop-rechts">…</details></div></header>
 *  Zahlenleiste (Zelle darf <a> sein; Ton: ist-ein/-aus/-ok/-warn/-bad/-still)
 *    <div class="g-stats"><a class="g-stat ist-ein" href="…"><span class="g-stat-label">Berechnet / Monat</span>
 *      <span class="g-stat-wert">1.240 €</span><span class="g-stat-sub">3 Posten</span></a>…</div>
 *  Abschnitt (id= für Anker; :target blitzt kurz auf)
 *    <section class="g-panel" id="verlauf"><div class="g-panel-kopf"><h2 class="g-panel-titel">Verlauf</h2>
 *      <span class="g-zahl">4</span><div class="g-panel-aktion">…</div></div><div class="g-panel-inhalt">…</div></section>
 *  Liste (Spalten optional über --g-spalten an .g-liste; .g-zeile-meta-Kinder werden Spalten, mobil 2. Zeile)
 *    <div class="g-liste" style="--g-spalten: auto minmax(0,1fr) 7rem 6rem auto">
 *      <a class="g-zeile" href="…"><span class="g-avatar">WK</span><span class="g-zeile-haupt">
 *      <span class="g-zeile-titel">…</span><span class="g-zeile-sub">…</span></span>
 *      <span class="g-zeile-meta"><span>…</span><span class="g-zeile-zahl">29 €</span></span><span class="g-zeile-pfeil"></span></a></div>
 *    Zeile mit Knöpfen: <div class="g-zeile"><a class="g-zeile-link" href="…">Name</a> … <button …></div>
 *    (Link überzieht die Zeile, Knöpfe liegen darüber). Gedämpft: .g-liste.ist-gedaempft
 *  Monogramm: <span class="g-avatar [g-avatar-sm|g-avatar-lg] g-ton-{{ x.pk|stringformat:'d'|last }}" title="Name">PA</span>
 *    Stapel: <span class="g-avatare">…mehrere .g-avatar-sm…</span>
 *  Chips: <div class="g-chips"><span class="g-chip">Empfehlung</span>
 *    <label class="g-chip g-chip-toggle"><input type="checkbox" name="…" data-auto-submit checked><span class="g-avatar g-avatar-sm">PA</span>Pablo</label></div>
 *  Stepper (Knöpfe in EINEM Formular; Marker und Linie zeichnet das CSS)
 *    <form class="g-stepper" method="post">{csrf}<button class="g-stufe ist-erreicht" name="status" value="neu">Neu</button>
 *      <button class="g-stufe ist-erreicht" aria-current="step" …>Kontaktiert</button><button class="g-stufe" …>Angebot</button>
 *      [<span class="g-stepper-ende">Gewonnen</span>]</form>
 *  Datum-Abzeichen: <span class="g-badge ist-ueberfaellig|ist-heute|ist-bald|ist-leer">seit 3 Tagen</span>
 *  Popover (ohne JS; mobil Bottom-Sheet; Klick daneben schließt)
 *    <details class="g-pop [g-pop-rechts]"><summary class="btn btn-primary">+ Kunde</summary>
 *      <div class="g-pop-inhalt"><h3 class="g-pop-titel">Neuer Kunde</h3><form class="g-form">…</form></div></details>
 *    Menü darin: <div class="g-menue"><button class="g-menue-punkt">…</button><button class="g-menue-punkt ist-gefahr">Löschen</button></div>
 *    Icon-Auslöser: <summary class="btn g-icon-knopf" aria-label="Mehr">…svg…</summary>
 *  Formular: <form class="g-form"><label class="g-feld"><span>Name</span><input …></label>
 *    <label class="g-feld g-feld-voll">…<textarea …></textarea></label>
 *    <label class="g-feld-check"><input type="checkbox">Das sind wir</label>
 *    <div class="g-form-aktionen"><button class="btn btn-primary">Speichern</button></div></form>
 *  Werkzeugleiste: <form class="g-toolbar" method="get"><label class="g-suche"><span class="visually-hidden">Suche</span>
 *      <input type="search" name="q"></label><select data-auto-submit>…</select>
 *      <a class="g-toolbar-reset" href="…">Zurücksetzen</a></form>
 *  Umschalter: <nav class="g-segment"><a href="…" aria-current="page">Offen <span class="g-zahl">4</span></a><a href="…">Verloren</a></nav>
 *  Leerzustand: <div class="g-leer [ist-klein]"><span class="g-leer-icon">…svg…</span><p>Noch keine Leads.</p><a class="btn btn-primary">…</a></div>
 *  Hinweisbalken: <div class="g-hinweis [ist-warn]">…svg… <span>3 Projekte ohne Kunde</span> <details class="g-pop g-pop-rechts">…</details></div>
 *  Belegung: <meter class="g-meter" value="166" max="256" high="230"></meter>  oder  <div class="g-meter"><span style="width:65%"></span></div>
 *  Tabs: <nav class="g-tabs"><a href="…" aria-current="page">Übersicht</a><a href="…">Verlauf <span class="g-zahl">3</span></a></nav>
 *  Kleinteile: .g-zahl (Anzahl), .g-betrag[.ist-ein|.ist-aus] (Geld, mono),
 *    <button class="g-kopier" id="knr" data-copy-target="knr">K26001</button>,
 *    <a class="g-mehr" href="…">Alle in der Kasse</a>, .g-zweispaltig (2fr/1fr ab 960px), .g-stapel (senkrechter Abstand)
 */

:root {
  /* Lesbare Statusfarben für TEXT: --ok/--warn/--bad sind Flächenfarben
     und auf hellem Grund zu blass (Grün auf Weiß ~2:1). */
  --g-ok-text: var(--talvesa-color-status-text-success, var(--ok));
  --g-warn-text: var(--talvesa-color-status-text-warning, var(--warn));
  --g-bad-text: var(--talvesa-color-status-text-danger, var(--bad));
  /* Folgt dem vom Nutzer gewählten Akzent, bleibt aber in beiden Themen lesbar. */
  --g-accent-text: color-mix(in srgb, var(--accent) 72%, var(--text));
  --g-hover: color-mix(in srgb, var(--surface-2) 70%, transparent);
  --g-linie: color-mix(in srgb, var(--border) 65%, transparent);
  --g-dauer: var(--panel-motion-duration-fast);
  --g-kurve: var(--talvesa-motion-easing-standard);
  --g-icon-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 5 5 5-5 5'/%3E%3C/svg%3E");
  --g-icon-zurueck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4m5-5-5 5 5 5'/%3E%3C/svg%3E");
  --g-icon-suche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='m13.2 13.2 3.8 3.8'/%3E%3C/svg%3E");
}

/* --- Fläche ---------------------------------------------------------------
   Dasselbe Rezept wie .card in panel.css — deckend, mit Haarlinie, kein
   Glas mehr (Begründung dort) —, damit Panels, Liste und Zahlenleiste
   neben alten Karten nicht fremd wirken. Der Klassenname .g-glas bleibt,
   weil die Vorlagen ihn tragen. */
.g-glas, .g-panel, .g-liste, .g-stats {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--g-linie) inset, var(--shadow-sm);
}

/* --- Seitenkopf ------------------------------------------------------- */
.g-zurueck {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0 0 var(--space-4); padding: .2rem .45rem .2rem .25rem; margin-left: -.25rem;
  border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  transition: color var(--g-dauer) var(--g-kurve), background-color var(--g-dauer) var(--g-kurve);
}
.g-zurueck::before {
  content: ""; width: 1rem; height: 1rem; flex: none;
  background: currentColor; -webkit-mask: var(--g-icon-zurueck) center / contain no-repeat; mask: var(--g-icon-zurueck) center / contain no-repeat;
  transition: transform var(--g-dauer) var(--g-kurve);
}
.g-zurueck:hover { color: var(--text); background: var(--g-hover); }
.g-zurueck:hover::before { transform: translateX(-2px); }

.g-kopf {
  display: flex; flex-direction: column; gap: var(--space-5);
  margin: 0 0 var(--space-8);
}
.g-kopf-titel { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.g-kopf-titel > div { min-width: 0; }
.g-kopf-titel h1 { margin: 0; overflow-wrap: anywhere; }
.g-kopf-sub { margin: .3rem 0 0; color: var(--text-dim); font-size: .92rem; font-variant-numeric: tabular-nums; }
.g-kopf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: .6rem; }
.g-kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (min-width: 641px) {
  .g-kopf { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .g-kopf-aktionen { flex: none; justify-content: flex-end; }
}

/* --- Zahlenleiste ------------------------------------------------------
   Eine Fläche, Zellen durch Haarlinien getrennt. Die Linie liegt als
   Schatten links/oben an jeder Zelle; die am Rand schneidet overflow weg —
   so stimmt das Raster bei jedem Umbruch, ohne Zählerei. */
.g-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  overflow: hidden; margin: 0 0 var(--space-7);
}
.g-stat {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0;
  padding: .95rem 1.15rem 1rem;
  box-shadow: -1px 0 0 var(--g-linie), 0 -1px 0 var(--g-linie);
  color: inherit; text-decoration: none;
}
.g-stat-label { font-size: .76rem; font-weight: 550; color: var(--text-dim); letter-spacing: .01em; }
.g-stat-wert {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  /* Normalgewicht wie jede grosse Zahl der Marke: Talvesa Mono gibt es in
     400 und 700, und 650 zog die fette Datei — eine Kennzahl in fetter
     Mono ist eine andere Schrift als die Wortmarke daneben. */
  font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); font-weight: 400; font-synthesis: none; letter-spacing: -.03em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Wörter statt Zahlen („Empfehlung") nicht in Mono — Mono ist für Daten. */
.g-stat-wert.ist-text { font-family: var(--font-sans); letter-spacing: -.015em; }
.g-stat-sub { font-size: .74rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-stat.ist-ein .g-stat-wert, .g-stat.ist-ok .g-stat-wert { color: var(--g-ok-text); }
.g-stat.ist-aus .g-stat-wert, .g-stat.ist-bad .g-stat-wert { color: var(--g-bad-text); }
.g-stat.ist-warn .g-stat-wert { color: var(--g-warn-text); }
.g-stat.ist-still .g-stat-wert { color: var(--text-dim); font-weight: 500; }
a.g-stat { position: relative; transition: background-color var(--g-dauer) var(--g-kurve); }
a.g-stat::after {
  content: ""; position: absolute; top: 1rem; right: .9rem; width: .9rem; height: .9rem;
  background: var(--text-dim); -webkit-mask: var(--g-icon-pfeil) center / contain no-repeat; mask: var(--g-icon-pfeil) center / contain no-repeat;
  opacity: .45; transition: opacity var(--g-dauer) var(--g-kurve), transform var(--g-dauer) var(--g-kurve);
}
a.g-stat:hover { background: var(--g-hover); }
a.g-stat:hover::after { opacity: 1; transform: translateX(2px); }
a.g-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 640px) {
  .g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-stat { padding: .8rem .9rem .85rem; }
}

/* --- Abschnitt ---------------------------------------------------------- */
.g-panel {
  padding: 1.05rem 1.1rem 1.15rem; margin: 0 0 var(--space-5);
  scroll-margin-top: 5rem; min-width: 0;
}
@media (min-width: 641px) { .g-panel { padding: 1.25rem 1.4rem 1.35rem; } }
/* Nach dem Speichern springt die Seite per #anker zurück — ein kurzes
   Aufleuchten zeigt, WO man gelandet ist. */
.g-panel:target { animation: g-ziel 1.8s var(--g-kurve); }
@keyframes g-ziel {
  0%, 30% { box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 6px var(--accent-glow), var(--shadow-sm); }
  100% { box-shadow: 0 0 0 1px var(--g-linie) inset, 0 0 0 0 transparent, var(--shadow-sm); }
}
.g-panel-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; margin: 0 0 var(--space-5); min-height: 2rem; }
.g-panel-titel { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.g-panel-aktion { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.g-panel-inhalt { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* Ein Panel, das nur eine Liste trägt, braucht keinen eigenen Rand um sie. */
.g-panel .g-liste { background: none; box-shadow: none; padding: 0; margin: 0 -.5rem; }

.g-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.45rem; height: 1.3rem; padding: 0 .4rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-dim);
}
.g-zahl.ist-akzent { background: var(--accent-glow); color: var(--g-accent-text); }
.g-zahl.ist-warn { background: var(--warn-glow); color: var(--g-warn-text); }

/* --- Liste --------------------------------------------------------------
   Desktop: jede Zeile ein Raster nach --g-spalten (an .g-liste gesetzt),
   .g-zeile-meta löst sich auf (display: contents), ihre Kinder werden
   Spalten. Mobil: Fließzeile — Avatar, Name, Pfeil oben, Meta darunter. */
.g-liste { display: flex; flex-direction: column; padding: .35rem; margin: 0 0 var(--space-7); min-width: 0; }
.g-zeile {
  --g-spalten-std: auto minmax(0, 1fr);
  position: relative;
  display: grid; grid-template-columns: var(--g-spalten, var(--g-spalten-std)); grid-auto-flow: column; grid-auto-columns: auto;
  align-items: center; gap: .9rem;
  min-height: 3.6rem; padding: .7rem .85rem;
  border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
  transition: background-color var(--g-dauer) var(--g-kurve);
}
.g-zeile:not(:has(> .g-avatar)) { --g-spalten-std: minmax(0, 1fr); }
.g-liste > .g-zeile + .g-zeile {
  background-image: linear-gradient(var(--g-linie), var(--g-linie));
  background-size: calc(100% - 1.7rem) 1px; background-position: center top; background-repeat: no-repeat;
}
:is(a.g-zeile, .g-zeile:has(.g-zeile-link)):hover { background: var(--g-hover); }
.g-liste > :is(a.g-zeile, .g-zeile:has(.g-zeile-link)):hover + .g-zeile { background-image: none; }
a.g-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.g-zeile-haupt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.g-zeile-titel {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em; color: var(--text);
}
.g-zeile-titel > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.g-zeile-sub { font-size: .8rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-zeile-meta { display: contents; font-size: .84rem; color: var(--text-dim); }
.g-zeile-meta > * { min-width: 0; }
.g-zeile-zahl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; }
.g-zeile-zahl.ist-still { color: var(--text-dim); }
.g-zeile-pfeil {
  width: 1rem; height: 1rem; flex: none; justify-self: end;
  background: var(--text-dim); -webkit-mask: var(--g-icon-pfeil) center / contain no-repeat; mask: var(--g-icon-pfeil) center / contain no-repeat;
  opacity: .55; transition: transform var(--g-dauer) var(--g-kurve), opacity var(--g-dauer) var(--g-kurve), background-color var(--g-dauer) var(--g-kurve);
}
.g-zeile:hover .g-zeile-pfeil { opacity: 1; background: var(--accent); transform: translateX(2px); }
/* Zeile mit eigenen Knöpfen: der Link überzieht die ganze Zeile, alles
   Bedienbare liegt eine Ebene darüber. */
.g-zeile-link { color: inherit; text-decoration: none; }
.g-zeile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.g-zeile-link:focus-visible { outline: none; }
.g-zeile:has(.g-zeile-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.g-zeile :is(button, form, details, input, select, .g-kopier, a:not(.g-zeile-link)) { position: relative; z-index: 1; }
.g-liste.ist-gedaempft .g-zeile { color: var(--text-dim); }
.g-liste.ist-gedaempft :is(.g-zeile-titel, .g-zeile-zahl) { color: var(--text-dim); font-weight: 600; }
.g-liste.ist-gedaempft .g-avatar { background: none; color: var(--text-dim); box-shadow: 0 0 0 1px var(--border) inset; }
/* Kopf über einer freistehenden Liste („Eigene Firma"). */
.g-abschnitt { display: flex; align-items: center; gap: .5rem; margin: var(--space-8) 0 var(--space-3) .2rem; }
.g-abschnitt :is(h2, h3) { margin: 0; font-size: .9rem; font-weight: 650; color: var(--text-dim); letter-spacing: 0; }
@media (max-width: 640px) {
  .g-zeile { padding: .75rem .7rem; column-gap: .75rem; }
  /* Nur Zeilen MIT Meta brechen um; schlichte Zeilen bleiben ein Raster. */
  .g-zeile:has(> .g-zeile-meta) { display: flex; flex-wrap: wrap; row-gap: .45rem; }
  .g-zeile > .g-zeile-haupt { flex: 1 1 0; }
  .g-zeile > .g-zeile-pfeil { order: 2; }
  .g-zeile > .g-zeile-meta {
    order: 3; flex: 1 0 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
    font-size: .8rem;
  }
  .g-zeile:has(> .g-avatar) > .g-zeile-meta { padding-left: calc(32px + .75rem); }
  .g-zeile:has(> .g-avatar-sm) > .g-zeile-meta { padding-left: calc(24px + .75rem); }
  .g-zeile-zahl { text-align: left; }
}

/* --- Monogramm ------------------------------------------------------------
   In Tinte, für jede Person gleich. Die Endziffer der ID wählte hier eine
   von sechs Diagrammfarben (--talvesa-color-chart-*: Blau, Violett, Rosa,
   Ocker, Grün, Olive) — eine violette Kundin neben einem blauen Kollegen
   sind Farben, die nicht auf dem Markenblatt stehen und nichts bedeuten.
   Farbe heißt im Panel ok/warn/bad; unterscheiden tun die Buchstaben. Die
   Klassen g-ton-* stehen weiter in den Vorlagen und tun nichts mehr. */
.g-avatar {
  --g-ton: var(--text);
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  color: color-mix(in srgb, var(--g-ton) 72%, var(--text));
  /* Deckend (Tönung über --surface-solid): im Stapel scheint sonst der
     Nachbar durch. */
  background: linear-gradient(color-mix(in srgb, var(--g-ton) 20%, transparent), color-mix(in srgb, var(--g-ton) 20%, transparent)), var(--surface-solid);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-ton) 30%, transparent) inset;
  user-select: none;
}
.g-avatar-sm { width: 24px; height: 24px; font-size: .6rem; letter-spacing: 0; }
.g-avatar-lg {
  width: 56px; height: 56px; font-size: 1.2rem; letter-spacing: -.01em;
  background: linear-gradient(145deg, color-mix(in srgb, var(--g-ton) 32%, transparent), color-mix(in srgb, var(--g-ton) 10%, transparent)), var(--surface-solid);
}
.g-avatar.ist-mehr { --g-ton: var(--text-dim); font-family: var(--font-mono); letter-spacing: -.04em; }
.g-avatare { display: inline-flex; align-items: center; flex-direction: row; }
.g-avatare > .g-avatar { box-shadow: 0 0 0 2px var(--surface-solid); }
.g-avatare > .g-avatar + .g-avatar { margin-left: -5px; }

/* --- Chips -------------------------------------------------------------- */
.g-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.g-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 1.85rem; padding: .2rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  background: var(--g-hover); color: var(--text-dim);
  box-shadow: 0 0 0 1px var(--g-linie) inset;
}
.g-chip > .g-avatar-sm { margin-left: -.5rem; }
.g-chip-toggle { cursor: pointer; user-select: none; transition: color var(--g-dauer) var(--g-kurve), background-color var(--g-dauer) var(--g-kurve), box-shadow var(--g-dauer) var(--g-kurve); }
.g-chip-toggle > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g-chip-toggle:hover { color: var(--text); box-shadow: 0 0 0 1px var(--border-strong) inset; }
.g-chip-toggle:has(:checked) {
  color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent) inset;
}
.g-chip-toggle:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-chip-toggle:not(:has(:checked)) > .g-avatar { filter: grayscale(1); opacity: .7; }

/* --- Stepper --------------------------------------------------------------
   Jede Stufe ist ein Knopf; Punkt (::before) und Verbindung zur nächsten
   (::after) zeichnet das CSS. Erreicht = Akzent, aktuell = Ring. */
.g-stepper {
  --g-punkt: 14px;
  --g-ring: color-mix(in srgb, var(--text-dim) 55%, transparent);
  display: flex; align-items: flex-start; margin: 0 0 var(--space-7);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.g-stepper::-webkit-scrollbar { display: none; }
.g-stufe, .g-stepper-ende {
  position: relative; flex: 1 1 0; min-width: 4.6rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .35rem .25rem .3rem; margin: 0;
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-dim);
  background: none; border: 0; border-radius: var(--radius-sm);
  scroll-snap-align: start;
}
.g-stufe { cursor: pointer; transition: color var(--g-dauer) var(--g-kurve); }
.g-stufe::before, .g-stepper-ende::before {
  content: ""; position: relative; z-index: 1; flex: none;
  width: var(--g-punkt); height: var(--g-punkt); margin-top: 4px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px var(--g-ring) inset;
  transition: box-shadow var(--g-dauer) var(--g-kurve), background-color var(--g-dauer) var(--g-kurve), transform var(--g-dauer) var(--g-kurve);
}
/* Linie vom eigenen Punkt zum nächsten: von der Mitte bis zur Mitte der
   Nachbarstufe, mit etwas Luft um beide Punkte. */
/* :has(~ …) statt :last-child — versteckte Felder (csrf, weiter) dürfen
   hinter den Knöpfen stehen. */
.g-stufe:has(~ .g-stufe, ~ .g-stepper-ende)::after {
  content: ""; position: absolute; height: 2px; border-radius: 2px;
  top: calc(.35rem + 4px + var(--g-punkt) / 2 - 1px);
  left: calc(50% + var(--g-punkt) / 2 + 6px); right: calc(-50% + var(--g-punkt) / 2 + 6px);
  background: var(--border);
}
.g-stufe:hover { color: var(--text); }
.g-stufe:hover::before { box-shadow: 0 0 0 2px var(--accent) inset; }
.g-stufe:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.g-stufe.ist-erreicht { color: var(--text); }
.g-stufe.ist-erreicht::before { background: var(--accent); box-shadow: none; }
.g-stufe.ist-erreicht:not([aria-current]):has(~ .g-stufe)::after { background: var(--accent); }
.g-stufe[aria-current="step"] { color: var(--g-accent-text); font-weight: 700; }
.g-stufe[aria-current="step"]::before {
  background: radial-gradient(circle, var(--accent-ink) 0 2.5px, var(--accent) 3px);
  box-shadow: 0 0 0 5px var(--accent-glow);
  transform: scale(1.25);
}
@media (max-width: 640px) {
  .g-stufe, .g-stepper-ende { min-width: 3.9rem; font-size: .74rem; }
}
/* Das Ziel hinter der letzten Stufe — kein Knopf, nur Richtung. */
.g-stepper-ende { color: var(--text-dim); font-weight: 500; }
.g-stepper-ende::before { background: none; box-shadow: none; outline: 2px dashed var(--g-ring); outline-offset: -2px; }
.g-stufe:not(:has(~ .g-stufe)):has(~ .g-stepper-ende)::after {
  background: repeating-linear-gradient(90deg, var(--g-ring) 0 4px, transparent 4px 8px);
}

/* --- Datum-Abzeichen ------------------------------------------------------ */
.g-badge {
  --g-ton: var(--text-dim);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .55rem .16rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--g-ton-text, var(--g-ton));
  background: color-mix(in srgb, var(--g-ton) 13%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-ton) 26%, transparent) inset;
}
.g-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g-ton); flex: none; }
.g-badge.ist-ueberfaellig { --g-ton: var(--bad); --g-ton-text: var(--g-bad-text); }
.g-badge.ist-heute { --g-ton: var(--warn); --g-ton-text: var(--g-warn-text); }
.g-badge.ist-bald { --g-ton: var(--accent); --g-ton-text: var(--g-accent-text); }
.g-badge.ist-leer { background: none; box-shadow: 0 0 0 1px var(--border) inset; font-weight: 550; }
.g-badge.ist-leer::before { background: none; box-shadow: 0 0 0 1.5px var(--text-dim) inset; }

/* --- Popover ---------------------------------------------------------------
   <details> statt JS. Offen legt der Auslöser eine unsichtbare Fläche über
   den Bildschirm: ein Klick daneben trifft den Auslöser und schließt.
   Mobil wird der Inhalt ein Bottom-Sheet mit abgedunkeltem Hintergrund. */
.g-pop { position: relative; display: inline-block; }
.g-pop > summary { list-style: none; cursor: pointer; user-select: none; }
.g-pop > summary::-webkit-details-marker { display: none; }
.g-pop[open] { z-index: var(--talvesa-z-index-dropdown); }
.g-pop[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 0; cursor: default; }
.g-pop[open] > summary.btn:not(.btn-primary) { background: var(--surface-2); }
/* .btn:active skaliert — ein transform macht den Auslöser zum Bezugsrahmen
   der fixed-Klickfläche, der Klick daneben liefe dann ins Leere. */
.g-pop[open] > summary:active { transform: none; }
.g-pop-inhalt {
  position: absolute; z-index: 1; top: calc(100% + .45rem); left: 0;
  width: max-content; min-width: 15rem; max-width: min(26rem, calc(100vw - 2rem));
  padding: 1rem 1.05rem 1.05rem; border-radius: var(--radius);
  /* Deckend mit Kante und Schatten, wie der Bestätigungsdialog — kein
     Glas mehr (panel.css, „Karten: deckend, mit Haarlinie"). */
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text); text-align: left; white-space: normal;
  cursor: auto;
  animation: g-pop-auf var(--panel-motion-duration-base) var(--talvesa-motion-easing-apple-out);
}
.g-pop-inhalt:has(.g-form) { width: min(26rem, calc(100vw - 2rem)); }
.g-pop-rechts > .g-pop-inhalt { left: auto; right: 0; }
.g-pop-titel { margin: 0 0 var(--space-4); font-size: .95rem; font-weight: 650; }
@keyframes g-pop-auf { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* Solange ein Popover offen ist, liegt seine Karte eine Ebene höher —
   sonst legen sich spätere Karten über das Blatt. (Den Glas-Filter, der
   hier früher auch weg musste, tragen Karten nicht mehr.) */
:is(.g-glas, .g-panel, .g-liste, .g-stats, .card, .site-card):has(.g-pop[open]) {
  position: relative; z-index: var(--talvesa-z-index-dropdown);
}
@media (max-width: 640px) {
  .g-pop[open] > summary::before { background: var(--talvesa-color-scrim); animation: g-blende .2s linear; }
  .g-pop-inhalt, .g-pop-rechts > .g-pop-inhalt, .g-pop-inhalt:has(.g-form) {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: auto; min-width: 0; max-width: none; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.6rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0;
    animation: g-sheet-auf var(--panel-motion-duration-base) var(--talvesa-motion-easing-apple-out);
  }
  /* Griff: sagt „das ist ein Blatt", ohne Worte. */
  .g-pop-inhalt::before {
    content: ""; position: absolute; top: .55rem; left: 50%; width: 2.4rem; height: 4px; margin-left: -1.2rem;
    border-radius: 999px; background: var(--border-strong);
  }
  /* Über die klebende Navigation, damit die Abdunklung sie mit erfasst. */
  .g-pop[open], :is(.g-glas, .g-panel, .g-liste, .g-stats, .card, .site-card):has(.g-pop[open]) { z-index: var(--talvesa-z-index-modal); }
  html:has(.g-pop[open]) { overflow: hidden; }
  .g-pop-inhalt .g-form-aktionen .btn { flex: 1 1 auto; justify-content: center; }
}
@keyframes g-sheet-auf { from { transform: translateY(100%); } }
@keyframes g-blende { from { opacity: 0; } }

/* Menü im Popover („…"): volle Breite, links ausgerichtet. */
.g-menue { display: flex; flex-direction: column; gap: 2px; margin: -.45rem -.5rem; min-width: 13rem; }
.g-menue form { display: contents; }
.g-menue-punkt {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .7rem; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .88rem; font-weight: 550; text-align: left; text-decoration: none;
  background: none; color: var(--text); cursor: pointer;
}
.g-menue-punkt svg { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.g-menue-punkt:hover { background: var(--g-hover); }
.g-menue-punkt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.g-menue-punkt.ist-gefahr, .g-menue-punkt.ist-gefahr svg { color: var(--g-bad-text); }
.g-menue-punkt.ist-gefahr:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.g-menue-punkt:disabled, .g-menue-punkt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: none; }
.g-menue-trenner { height: 1px; margin: .3rem .5rem; background: var(--g-linie); }

/* Quadratischer Knopf nur mit Symbol („…", ×). aria-label nicht vergessen. */
.btn.g-icon-knopf { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; }
.btn.g-icon-knopf svg { width: 16px; height: 16px; }
.btn.g-icon-knopf.ist-still { background: none; color: var(--text-dim); box-shadow: none; }
.btn.g-icon-knopf.ist-still:hover { background: var(--g-hover); color: var(--text); }

/* --- Formular ------------------------------------------------------------- */
.g-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .85rem 1rem; align-items: end; min-width: 0;
}
.g-feld { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; }
.g-feld > span:first-child, .g-feld-label { font-size: .78rem; font-weight: 600; color: var(--text-dim); }
.g-feld :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; max-width: 100%; }
.g-feld textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.g-feld-voll { grid-column: 1 / -1; }
.g-feld-hilfe { font-size: .74rem; color: var(--text-dim); }
.g-feld-check {
  display: inline-flex; align-items: center; gap: .55rem; grid-column: 1 / -1;
  font-size: .88rem; cursor: pointer; min-height: 2.2rem;
}
.g-feld-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); }
.g-form-aktionen {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-top: .25rem;
}
.g-form-aktionen .g-form-neben { margin-left: auto; font-size: .78rem; color: var(--text-dim); }
/* Schnellwahl direkt am Feld („+3 T", „+1 W") — kleine, stille Knöpfe. */
.g-schnell { display: flex; flex-wrap: wrap; gap: .35rem; }
.g-schnell .btn { padding: .3rem .65rem; font-size: .78rem; font-family: var(--font-mono); font-weight: 600; }

/* --- Werkzeugleiste ------------------------------------------------------- */
.g-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 var(--space-5); }
.g-suche { position: relative; flex: 1 1 14rem; max-width: 26rem; margin: 0; }
.g-suche::before {
  content: ""; position: absolute; left: .75rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; pointer-events: none;
  background: var(--text-dim); -webkit-mask: var(--g-icon-suche) center / contain no-repeat; mask: var(--g-icon-suche) center / contain no-repeat;
}
.g-suche input { width: 100%; padding-left: 2.2rem; }
/* Nur die Auswahlfelder direkt in der Leiste — nicht die im Filter-Popover,
   wo `flex` in der Spalte von .g-feld zur Höhe würde. */
.g-toolbar > select { flex: 0 1 auto; }
.g-toolbar-rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.g-toolbar-reset {
  font-size: .82rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  padding: .45rem .5rem; border-radius: var(--radius-sm);
}
.g-toolbar-reset:hover { color: var(--text); background: var(--g-hover); }
@media (max-width: 640px) {
  .g-suche { flex-basis: 100%; max-width: none; }
  .g-toolbar > select { flex: 1 1 8rem; }
  .g-toolbar-rechts { margin-left: 0; }
}

/* --- Umschalter ----------------------------------------------------------- */
.g-segment {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--radius-md); background: var(--g-hover); box-shadow: 0 0 0 1px var(--g-linie) inset;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.g-segment > :is(a, button, label) {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .38rem .8rem; border: 0; border-radius: calc(var(--radius-md) - 3px);
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap;
  background: none; cursor: pointer;
  transition: color var(--g-dauer) var(--g-kurve), background-color var(--g-dauer) var(--g-kurve);
}
.g-segment > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g-segment > :is(a, button, label):hover { color: var(--text); }
.g-segment > :is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], .ist-aktiv, label:has(:checked)) {
  color: var(--text); background: var(--bg); box-shadow: var(--shadow-sm);
}
.g-segment > :is(a, button):focus-visible, .g-segment > label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-segment .g-zahl { height: 1.15rem; min-width: 1.2rem; font-size: .66rem; }

/* --- Leerzustand ---------------------------------------------------------- */
.g-leer {
  display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center;
  padding: 2.4rem 1.2rem; border-radius: var(--radius);
  border: 1px dashed var(--border); color: var(--text-dim);
}
.g-leer > p { margin: 0; font-size: .92rem; max-width: 32ch; }
.g-leer > .btn { margin-top: .3rem; }
.g-leer-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--g-hover); color: var(--text-dim); box-shadow: 0 0 0 1px var(--g-linie) inset;
}
.g-leer-icon svg { width: 20px; height: 20px; }
.g-panel .g-leer { border: 0; padding: 1.4rem .5rem; }
.g-leer.ist-klein { padding: 1.1rem .8rem; gap: .45rem; }
.g-leer.ist-klein > p { font-size: .82rem; }

/* --- Hinweisbalken -------------------------------------------------------- */
.g-hinweis {
  --g-ton: var(--accent); --g-ton-text: var(--g-accent-text);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin: 0 0 var(--space-5); padding: .6rem .7rem .6rem .95rem; border-radius: var(--radius-md);
  font-size: .88rem; color: var(--text);
  background: color-mix(in srgb, var(--g-ton) 9%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-ton) 28%, transparent) inset;
}
.g-hinweis > svg { width: 17px; height: 17px; flex: none; color: var(--g-ton-text); }
.g-hinweis > :last-child:not(:first-child):not(span):not(p) { margin-left: auto; }
.g-hinweis > p { margin: 0; flex: 1 1 12rem; }
.g-hinweis.ist-warn { --g-ton: var(--warn); --g-ton-text: var(--g-warn-text); }
.g-hinweis.ist-bad { --g-ton: var(--bad); --g-ton-text: var(--g-bad-text); }

/* --- Belegung ------------------------------------------------------------- */
.g-meter {
  display: block; width: 100%; height: 6px; overflow: hidden;
  border: 0; border-radius: 999px; background: var(--surface-2);
  -webkit-appearance: none; appearance: none;
}
.g-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.g-meter > span.ist-warn { background: var(--warn); }
.g-meter > span.ist-bad { background: var(--bad); }
.g-meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 999px; background: var(--surface-2); }
.g-meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--accent); }
.g-meter::-webkit-meter-suboptimum-value { border-radius: 999px; background: var(--warn); }
.g-meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--bad); }
.g-meter::-moz-meter-bar { border-radius: 999px; background: var(--accent); }
.g-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
.g-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--bad); }

/* --- Tabs ----------------------------------------------------------------- */
.g-tabs {
  display: flex; gap: .15rem; margin: 0 0 var(--space-7);
  box-shadow: 0 -1px 0 var(--border) inset;
  overflow-x: auto; scrollbar-width: none;
}
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs > a {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .6rem .85rem .7rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: .88rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  transition: color var(--g-dauer) var(--g-kurve), box-shadow var(--g-dauer) var(--g-kurve);
}
.g-tabs > a:hover { color: var(--text); box-shadow: 0 -2px 0 var(--border-strong) inset; }
.g-tabs > a[aria-current="page"] { color: var(--text); box-shadow: 0 -2px 0 var(--accent) inset; }
.g-tabs > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Schmal: engere Tabs, damit fünf nebeneinander passen statt dass der
   letzte angeschnitten am Rand hängt. */
@media (max-width: 640px) {
  .g-tabs { gap: 0; }
  .g-tabs > a { padding-inline: .55rem; font-size: .84rem; }
}

/* --- Kleinteile ----------------------------------------------------------- */
.g-betrag { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-betrag.ist-ein { color: var(--g-ok-text); }
.g-betrag.ist-aus { color: var(--g-bad-text); }
.g-betrag.ist-still { color: var(--text-dim); }
/* Nummer zum Kopieren (Kunden-/Projektnummer): leise, bis man hinfährt. */
.g-kopier {
  display: inline-flex; align-items: center;
  font: inherit; font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  padding: .14rem .5rem; border: 0; border-radius: 999px; cursor: copy;
  background: var(--g-hover); color: var(--text-dim); box-shadow: 0 0 0 1px var(--g-linie) inset;
  transition: color var(--g-dauer) var(--g-kurve), box-shadow var(--g-dauer) var(--g-kurve);
}
.g-kopier:hover, .g-kopier:focus-visible { color: var(--text); box-shadow: 0 0 0 1px var(--border-strong) inset; }
.g-kopier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-mehr {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .84rem; font-weight: 600; color: var(--g-accent-text); text-decoration: none;
}
.g-mehr::after {
  content: ""; width: .9rem; height: .9rem;
  background: currentColor; -webkit-mask: var(--g-icon-pfeil) center / contain no-repeat; mask: var(--g-icon-pfeil) center / contain no-repeat;
  transition: transform var(--g-dauer) var(--g-kurve);
}
.g-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-mehr:hover::after { transform: translateX(2px); }
.g-stapel { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.g-stapel > .g-panel { margin: 0; }
.g-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 960px) {
  .g-zweispaltig { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); }
}

/* --- Touch: 44px-Ziele ----------------------------------------------------- */
@media (pointer: coarse) {
  .g-chip-toggle, .g-segment > :is(a, button, label), .g-menue-punkt, .g-tabs > a, .g-toolbar-reset, .g-zurueck { min-height: 44px; }
  .g-stufe { min-height: 44px; }
  .btn.g-icon-knopf { width: 44px; height: 44px; }
  .g-kopier { position: relative; }
  .g-kopier::after { content: ""; position: absolute; inset: -8px -4px; }
  .g-zeile { min-height: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .g-panel:target, .g-pop-inhalt, .g-pop[open] > summary::before { animation: none; }
  .g-zeile-pfeil, .g-zurueck::before, a.g-stat::after, .g-mehr::after { transition: none; }
}