/*
 * Zentrale — Gestaltungsgrundlage, übernommen aus dem BVV-Cockpit.
 *
 * Dieselbe Gestaltung wie die Webseite: Entwurf A „Werkstatt" (Issue #9) —
 * Schwarz, Weiß, Papiergrau und genau EINE Signalfarbe. Das war das Baustellengelb;
 * die Zentrale trägt seit 2026-10-07 Purpur (Marcels Wunsch). Die Signalfarbe markiert,
 * was man anklicken kann, und ist nur Fläche, Unterstreichung oder Markierung — NIE
 * Textfarbe auf hellem Grund. Text auf der Fläche ist `--akzent-auf` (Weiß, 5,7:1),
 * Purpur als Schrift auf dunkler Schiene ist `--akzent-hell`. Ampel und Belegung
 * sind Statusfarben und zählen nicht als zweiter Akzent.
 *
 * Schriften: Archivo Black (Überschriften) und Inter (Text), selbst gehostet
 * unter schriften/ — Kopie aus BVV-Homepage/app-cockpit/src/shared/ui/schriften/,
 * nie von einem fremden Server laden. Archivo Black hat nur einen Schnitt:
 * Überschriften bleiben bei Gewicht 400, sonst täuscht der Browser Fett vor.
 *
 * Handgeschrieben statt Tailwind, damit die App ohne Bauwerkzeug läuft.
 */
@font-face {
  font-family: "Archivo Black";
  src: url("schriften/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("schriften/inter-variabel.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/*
 * Beide Themes stehen in EINEM Satz: `light-dark(hell, dunkel)` waehlt nach
 * `color-scheme` aus. Umgeschaltet wird deshalb nur `color-scheme` (unten).
 *
 * Hell ist Papiergrau mit weissen Karten, Dunkel warmes Nahe-Schwarz. Die
 * Schiene links ist in beiden Themes dunkel („Werkstatt dunkel", Issue #88).
 */
:root {
  color-scheme: light dark;

  /* Flaechen */
  --grund: light-dark(#f3f2ee, #121211);
  --flaeche: light-dark(#ffffff, #1c1c1a);
  --flaeche-still: light-dark(#faf9f6, #232321);
  --leiste: light-dark(#ffffff, #1c1c1a);
  /* Dezente Wochenend-Tönung im Kalender. */
  --wochenende: light-dark(#f6f5f1, #242320);
  /* Halbtransparente Schwebeflaeche fuer Hover und Symbolplaetze. */
  --flaeche-schwebend: light-dark(rgba(17, 17, 17, 0.05), rgba(255, 255, 255, 0.07));

  /* Text */
  --text: light-dark(#111111, #f3f2ee);
  --text-leise: light-dark(#5f5e5a, #bdbbb3);
  --text-still: light-dark(#75746e, #8f8d86);

  /* Linien */
  --linie: light-dark(#e3e1da, #2c2c29);
  --linie-kraeftig: light-dark(#c9c7bf, #4a4944);
  /* Haarfeine Lichtkante oben auf schwebenden Flaechen. */
  --kante-licht: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 236, 220, 0.05));

  /* Signalfarbe Purpur (2026-10-07, vorher Baustellengelb) — nur Flaeche, nie Textfarbe */
  --akzent: #7c3aed;
  --akzent-dunkel: #6d28d9;
  /* Purpur als Schrift oder Zeichen auf dunkler Flaeche (Schiene, Folie): 7,1:1 auf #111111. */
  --akzent-hell: #a78bfa;
  --akzent-leise: light-dark(#efe7fd, rgba(167, 139, 250, 0.18));
  /* Text auf getoenten Flaechen und Hervorhebungen: Tinte, nie Purpur. */
  --akzent-text: light-dark(#111111, #f3f2ee);
  /* Text auf purpurner Flaeche (5,7:1). */
  --akzent-auf: #ffffff;
  /* Verweise im Fließtext der Projektmappe: blau, 6,7:1 hell auf #ffffff und 8,0:1 dunkel auf #1c1c1a. */
  --verweis: light-dark(#1d4ed8, #8fb0ff);
  --akzent-schein: light-dark(rgba(17, 17, 17, 0.18), rgba(167, 139, 250, 0.35));
  /* Purpurner Tagesstreifen im Kalender. */
  --heute-tint: light-dark(rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.1));

  /* Umgebungslicht der Grundflaeche — Werkstatt bleibt flach */
  --licht-warm: transparent;
  --licht-kuehl: transparent;

  /* Schiene: dunkel in beiden Themes. Purpur als Zeichen (nicht als Text) auf Schwarz. */
  --schiene-bg: light-dark(#111111, #0a0a09);
  --schiene-linie: light-dark(#2a2a28, #222220);
  --schiene-text: #bdbbb3;
  --schiene-stark: #ffffff;
  --schiene-blass: #8a8983;
  --schiene-hover: light-dark(#1e1e1c, #191917);
  --schiene-marke: #a78bfa;

  /* Ampel */
  --gut: light-dark(#1d7a46, #4fae74);
  --gut-leise: light-dark(#e6f3ec, #1c3226);
  --mittel: light-dark(#8a5f0f, #d9a13c);
  --mittel-leise: light-dark(#fbf0dc, #3a2c14);
  --schlecht: light-dark(#b3261e, #e0685c);
  --schlecht-leise: light-dark(#fbe9e7, #3a1f1c);

  /*
   * Reihenfarben der Diagramme (2026-10-07): Datenfarben für mehrere Reihen, getrennt von
   * der Ampel, damit Grün und Rot nicht „gut“ und „schlecht“ vortäuschen. Die ersten sechs
   * Plätze der Referenzpalette des Skills dataviz, in dieser Reihenfolge vergeben (nie
   * gemischt) und gegen die Flächen des Cockpits (Hell #ffffff, Dunkel #1c1c1a) geprüft:
   * Lichtband, Farbkraft, Trennung für Farbfehlsichtigkeit und Normalsicht bestehen. Hell
   * liegen Aqua, Gelb und Magenta unter 3:1 Kontrast; dafür gibt es Legende, Hover-Anzeige
   * und die Wertetabelle. „Weitere“ ist ein ruhiges Grau.
   */
  --reihe-1: light-dark(#2a78d6, #3987e5);
  --reihe-2: light-dark(#eb6834, #d95926);
  --reihe-3: light-dark(#1baf7a, #199e70);
  --reihe-4: light-dark(#eda100, #c98500);
  --reihe-5: light-dark(#e87ba4, #d55181);
  --reihe-6: light-dark(#008300, #008300);
  --reihe-weitere: light-dark(#6f6e69, #9a9892);

  /* Masse */
  /*
   * Die Seitenleiste ist seit Entwurf D (2026-09-05) eine schmale
   * Symbolschiene, die sich auf Zeigen oder auf Wunsch dauerhaft
   * (`data-schiene="fest"`) auf die volle Breite oeffnet.
   */
  --sidebar-breite: 64px;
  --sidebar-breite-offen: 264px;
  /* Fussabstand einer Buehne. */
  --dock-freiraum: 28px;
  --radius: 6px;
  --radius-klein: 5px;

  /*
   * Knopfmasse (Entscheidung 2026-09-05, Knopf-System 4 „Fingerbreit"):
   * Salonika wird im Stehen bedient — am Tresen, oft am Tablet, oft nebenbei.
   * Darum grosszuegige Trefferflaechen. Die Form ist seit Issue #88 die der
   * Webseite (6 px Radius statt vollrund).
   */
  --knopf-hoehe: 36px;
  --knopf-hoehe-klein: 30px;
  --knopf-hoehe-filter: 34px;
  --knopf-glyph: 32px;
  --knopf-radius: 6px;

  --schrift: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --schrift-zahl: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --schrift-anzeige: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --anzeige-gewicht: 400;

  /*
   * `light-dark()` gilt nur fuer Farben — die Schatten werden deshalb aus
   * themenabhaengigen Schattenfarben zusammengesetzt, nicht selbst umgeschaltet.
   */
  --schatten-farbe-nah: light-dark(rgba(17, 17, 17, 0.05), rgba(0, 0, 0, 0.42));
  --schatten-farbe-weit: light-dark(rgba(17, 17, 17, 0.05), rgba(0, 0, 0, 0.34));
  --schatten-farbe-tief: light-dark(rgba(17, 17, 17, 0.2), rgba(0, 0, 0, 0.6));

  --schatten: 0 1px 2px var(--schatten-farbe-nah), 0 4px 12px var(--schatten-farbe-weit);
  --schatten-hoch: 0 18px 48px var(--schatten-farbe-tief), 0 4px 12px var(--schatten-farbe-nah);
}

/* Die Wahl aus `theme.js` bzw. dem Inline-Skript in index.html. */
:root[data-theme='hell'] { color-scheme: light; }
:root[data-theme='dunkel'] { color-scheme: dark; }

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app-laedt {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-still);
}

/*
 * Ladebalken: ein purpurner Balken wächst von links nach rechts, an seiner Spitze
 * läuft ein purpurner Kreis mit Schraubenschlüssel mit. Purpur ist hier Fläche, das
 * Symbol Weiß (`--akzent-auf`) — nie Purpur als Linien- oder Textfarbe auf Weiß.
 * Der Text bleibt für Screenreader im Dokument, sieht man aber nicht.
 */
.lader {
  --lader-kreis: 44px;
  width: min(280px, 70vw);
}

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

.lader__bahn {
  position: relative;
  height: var(--lader-kreis);
  animation: lader-ein 0.3s ease-out both;
}

/* Die Schiene, auf der der Kreis läuft. */
.lader__bahn::before {
  content: "";
  position: absolute;
  inset: calc(50% - 4px) 0;
  border-radius: 4px;
  background: var(--linie-kraeftig);
}

.lader__fuellung {
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  border-radius: 4px;
  background: var(--akzent);
  animation: lader-fuellung 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.lader__kreis {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--lader-kreis);
  height: var(--lader-kreis);
  border-radius: 50%;
  background: var(--akzent);
  color: var(--akzent-auf);
  box-shadow: var(--schatten);
  animation: lader-kreis 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.lader__kreis svg {
  width: 22px;
  height: 22px;
  animation: lader-drehen 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes lader-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Balkenspitze und Kreismitte bleiben deckungsgleich. */
@keyframes lader-fuellung {
  0% { width: calc(var(--lader-kreis) / 2); }
  100% { width: calc(100% - var(--lader-kreis) / 2); }
}

@keyframes lader-kreis {
  0% { left: 0; }
  100% { left: calc(100% - var(--lader-kreis)); }
}

@keyframes lader-drehen {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lader__bahn,
  .lader__fuellung,
  .lader__kreis,
  .lader__kreis svg {
    animation: none;
  }
  .lader__fuellung { width: 50%; }
  .lader__kreis { left: calc(50% - var(--lader-kreis) / 2); }
}

/* ----------------------------------------------------------- Grundgeruest */

/*
 * Eine durchgehende Flaeche statt aneinandergestossener Panels
 * (raw/Planning-Heimsteuerung-2026-08-20.md, Sitzung 2): Seitenleiste und
 * Inhalt teilen denselben Grund, Tiefe entsteht ueber weiche Schatten und
 * Licht — nicht ueber 1px-Kanten. Die Marke sitzt oben in der Seitenleiste,
 * die Leiste laeuft deshalb ueber die volle Hoehe.
 */
.geruest {
  display: grid;
  grid-template-columns: var(--sidebar-breite) minmax(0, 1fr);
  grid-template-areas: "seitenleiste inhalt";
  height: 100vh;
  height: 100dvh;
  position: relative;
  isolation: isolate;
  background: var(--grund);
}

/*
 * Warmes Streiflicht aus der oberen linken Ecke — gibt der Flaeche Richtung,
 * ohne dass irgendwo eine Kante noetig waere. Rein dekorativ, faengt keine
 * Klicks ab.
 */
.geruest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--licht-warm) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, var(--licht-kuehl) 0%, transparent 65%);
}

/*
 * Vollflaechen-Modus (Opt-in per Seite ueber seitenkopf({ vollflaeche: true }),
 * Entscheidung 2026-08-31): der Inhalt spannt die volle Breite. Kacheln
 * reichen so bis zum selben linken Rand wie oben/rechts statt an einer
 * Navigationsspalte zu enden — z.B. das Dashboard.
 *
 * Seit Entwurf D (2026-09-05) blendet der Modus die Navigation nicht mehr
 * aus: die Schiene ist nur noch 64 px breit, und eine Seite ohne jede
 * Navigation waere eine Sackgasse. Er nimmt der Buehne stattdessen nur die
 * seitliche Polsterung, damit die Kacheln wirklich bis an den Rand reichen.
 */
.geruest--vollflaeche .buehne {
  padding-inline: 20px;
}

/*
 * Vollbild-Knopf. Schwebte von Entscheidung 2026-08-31 bis zum Umbau auf
 * Entwurf D (2026-09-05) frei oben rechts — dort kollidierte er mit den
 * Aktionen des neuen Seitenkopfs. Er steht jetzt als letztes Element in
 * dieser Kopfzeile, also weiterhin oben rechts, aber im Fluss statt darueber.
 *
 * Entscheidung 2026-08-31 (Nachtrag 2, raw/todos Z.178 — bereits
 * einmal so gewuenscht): kein Knopf-Chip (kein Hintergrund, keine
 * Kontur, kein Schatten) — nur das nackte Glyph, wie ein Icon ohne jede
 * Umrandung. `filter: drop-shadow(...)` haelt es trotzdem auf jedem
 * Hintergrund lesbar (heller wie dunkler Buehnengrund, Stilwelten), ohne
 * dafuer eine sichtbare Flaeche zu brauchen.
 */
.vollbild-knopf {
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text-leise);
  font-size: 22px;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  transition: color 0.16s ease;
}

.vollbild-knopf:hover {
  color: var(--text);
}

/* -------------------------------------------------------------- Markenblock */

/*
 * Sitzt seit Planning-Hauptmenue-Unten-2026-08-24 am linken Ende von
 * `.hauptmenue` statt oben in der Seitenleiste — darum die knappe, seitliche
 * Polsterung statt der frueheren Kopf-Abstaende.
 */
.marke {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  position: relative;
}

/*
 * Uebernimmt seit 2026-08-25 die Rolle des frueheren ⌂-Knopfs im Verlaufsdock
 * (Nutzerentscheidung) — darum ein echter Knopf statt eines reinen Deko-Blocks,
 * mit demselben Hover-Muster wie die uebrigen Leisten-Knoepfe.
 */
.marke__knopf {
  position: relative;
  /* Zugeklappt nur so breit wie die Kachel, aufgeklappt bis zum Feststell-Knopf. */
  flex: 1 1 44px;
  min-width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: var(--radius-klein);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

/*
 * Zugeklappt steht nur die purpurne Kachel, aufgeklappt die Wortmarke — beide
 * liegen uebereinander und blenden ineinander ueber. Die Wortmarke ist die
 * Zeichnung aus app-webseite/marke/, nie neu gesetzt.
 */
.marke__zeichen {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-auf);
  display: grid;
  place-items: center;
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 18px;
  transition: opacity 0.14s ease;
}

.marke__gruppe {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.marke__logo {
  display: block;
  height: 36px;
  width: auto;
  margin-left: 6px;
}

.marke__zusatz {
  font-size: 11.5px;
  color: var(--schiene-blass);
}

/* Schluessel-Zeichen fuer eine fremde Bearbeitungssperre, siehe setzeSperrAnzeige.
   Der [hidden]-Override ist noetig, weil .knopf display:inline-flex sonst mit
   gleicher Spezifitaet gegen das UA-hidden-display:none gewinnt. */
.marke__sperre {
  margin-left: auto;
  padding: 4px 6px;
  font-size: 15px;
}

.marke__sperre[hidden] {
  display: none;
}

.marke__sperre:disabled {
  cursor: default;
}

/*
 * Seitenkopf (Entwurf D, Entscheidung 2026-09-05): Pfad, Titel und die
 * Aktionen einer Seite stehen wieder auf der Seite selbst — oben links, wo
 * das Lesen anfaengt.
 *
 * Ersetzt das schwebende Dock am unteren Rand (`.fussleiste` mit
 * `.hauptmenue` und `.verlaufsleiste`, Planning-Hauptmenue-Unten-2026-08-24):
 * die Hauptebene zog in die Symbolschiene links (`.seitenleiste`), der
 * Klickverlauf hierher. Damit endet auch das Dauerreservat von 104 px am
 * unteren Bildschirmrand — `--dock-freiraum` ist nur noch der normale
 * Fussabstand einer Buehne.
 *
 * Der Kopf sitzt im `.inhalt`-Raster ueber der Buehne und ueberlebt den
 * Seitenwechsel: der Router ersetzt ausschliesslich `.inhalt__buehne`.
 */
/*
 * `max-width` haelt Aktionen und Mandant auf breiten Bildschirmen auf Hoehe
 * des Karteninhalts darunter (`.buehne__breite`, 1240px + ihre 44px Rand auf
 * jeder Seite) — sonst haengen sie am Fensterrand, weit vom eigentlichen
 * Inhalt entfernt, waehrend `.seitenkopf__marke` links unveraendert bei 44px
 * beginnt (Nutzer-Rueckmeldung 28.09.2026).
 */
.seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding: 22px 44px 14px;
  min-width: 0;
  max-width: 1328px;
}

.seitenkopf[hidden] {
  display: none;
}

.seitenkopf__marke {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.seitenkopf__text {
  min-width: 0;
}

.seitenkopf__pfad {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seitenkopf__titel {
  margin: 2px 0 0;
  font-family: var(--schrift-anzeige);
  font-size: 28px;
  font-weight: var(--anzeige-gewicht);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Der purpurne Balken unter der Ueberschrift — wie auf der Webseite. */
.seitenkopf__titel::after {
  content: "";
  display: block;
  width: 44px;
  height: 6px;
  margin-top: 10px;
  background: var(--akzent);
}

.seitenkopf__aktionen {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-left: auto;
}

/*
 * Eigener Klick-Verlauf (Nutzerentscheidung 2026-08-21) — sass bis zum
 * Umbau als eigenes Dock unten rechts, steht jetzt links vor dem Seitentitel.
 * "Heim" fehlt hier bewusst weiter: das uebernimmt die Marke in der Schiene.
 */
.verlauf {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.verlauf__knopf {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--flaeche-schwebend);
  color: var(--text-leise);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.verlauf__knopf:hover:not(:disabled) {
  background: var(--akzent-leise);
  color: var(--akzent-text);
}

.verlauf__knopf:disabled {
  opacity: 0.3;
  cursor: default;
}

/*
 * Bedienelemente einer Seite ohne eigene Karte (Zeitraum-Filter und ihre
 * Knoepfe) sitzen seit Entscheidung 2026-08-30 in der zweiten Nav-Gruppe der
 * Seitenleiste statt in einem eigenen App-Kopf — `.kopf__aktionen` bleibt der
 * Name der umschliessenden Reihe (seitenbausteine.js#seitenkopf).
 */
.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Knoepfe hier sind einheitlich hoch, auch wenn eine kleine Variante oder ein
 * Stufen-Umschalter (.stufen, z.B. Tabellarisch/Zeitstrahl) dabei ist — gilt
 * genauso im Werkzeugkopf einer Karte (karteWerkzeugkopf() in
 * seitenbausteine.js), dem seit Entscheidung 2026-08-30 haeufigsten Ort fuer
 * genau diese Mischung aus Umschalter, kleinem Filter-Knopf und Hauptknopf.
 */
.kopf__aktionen .knopf,
.karte__kopf--mit-aktion .reihe .knopf {
  height: var(--knopf-hoehe);
}

.kopf__aktionen .knopf--klein:not(.knopf--glyph),
.karte__kopf--mit-aktion .reihe .knopf--klein:not(.knopf--glyph) {
  font-size: 13px;
  padding-inline: 16px;
}

/*
 * Symbolknoepfe bleiben auch hier rund, aber genauso hoch wie ihre Nachbarn.
 * `.knopf--glyph.knopf--klein` steht weiter unten und schrumpft sie sonst auf
 * 28px (Rueckgaengig/Wiederholen neben „Zurueck" und der Mandanten-Marke).
 */
.kopf__aktionen .knopf--glyph,
.kopf__aktionen .knopf--glyph.knopf--klein,
.karte__kopf--mit-aktion .reihe .knopf--glyph,
.karte__kopf--mit-aktion .reihe .knopf--glyph.knopf--klein {
  width: var(--knopf-hoehe);
  height: var(--knopf-hoehe);
}

.kopf__aktionen .stufen,
.karte__kopf--mit-aktion .reihe .stufen {
  min-height: var(--knopf-hoehe);
}

/* Bondrucker-Auswahl im Kassenpad (Planning-Bondrucker-2026-08-23, Entscheidung 5). */
.bondrucker-auswahl {
  width: auto;
  max-width: 200px;
}

/* Kassierer-Auswahl im Kassenpad (Feature-Backlog „Automatischer Kassenlogout", 2026-09-04). */
.kassierer-auswahl {
  width: auto;
  max-width: 200px;
}

/* Suchfeld unter den Seiten-Werkzeugen (z.B. Dokumente / Alle Dokumente). */
.kopf-suche {
  width: 220px;
  border: 1px solid var(--linie-kraeftig);
  font: inherit;
  background: var(--flaeche);
  color: var(--text);
}

/* --------------------------------------------------------------- Zeitraum */

.zeitraum {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * Umschalterspur (Tabellarisch/Zeitstrahl, Zeitraumstufen): eine Spur, in der
 * genau eine Stufe steht — vollrund wie die Knoepfe, damit sie sich in
 * dieselbe Zeile fuegt.
 */
.stufen {
  display: inline-flex;
  align-items: center;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--knopf-radius);
  padding: 3px;
  gap: 2px;
}

.stufen button {
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: var(--knopf-radius);
  cursor: pointer;
}

.stufen button:hover:not(:disabled) {
  color: var(--text);
  background: var(--flaeche);
}

.stufen button[aria-pressed="true"] {
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--schatten);
}

.stufen button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.blaettern {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.blaettern__wert {
  min-width: 132px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Benutzer */

.benutzer {
  position: relative;
}

.benutzer__knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: var(--flaeche-schwebend);
  border-radius: 14px;
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 0.16s ease;
}

.benutzer__knopf:hover {
  border-color: var(--linie-kraeftig);
}

.benutzer__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.benutzer__pfeil {
  margin-left: auto;
  flex: none;
  color: var(--text-still);
  font-size: 11px;
  line-height: 1;
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--akzent-leise);
  color: var(--akzent-text);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 650;
  flex: none;
  object-fit: cover;
  overflow: hidden;
}

.avatar--gross {
  width: 56px;
  height: 56px;
  font-size: 19px;
}

.avatar--riesig {
  width: 136px;
  height: 136px;
  font-size: 40px;
}

img.avatar {
  object-fit: cover;
}

/* Auswaehlbares Bild: Klick oder Drag&Drop statt eigenem "auswaehlen"-Knopf. */
.bild-auswahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bild-auswahl__flaeche {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

.bild-auswahl__hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.bild-auswahl__hinweis .knopf-symbol {
  width: 28px;
  height: 28px;
}

.bild-auswahl__flaeche:hover .bild-auswahl__hinweis,
.bild-auswahl__flaeche--ueber .bild-auswahl__hinweis {
  opacity: 1;
}

.bild-auswahl__flaeche--ueber {
  outline: 2px dashed var(--akzent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ Seitenleiste */

/*
 * Symbolschiene (Entwurf D, Entscheidung 2026-09-05): traegt die ganze
 * Navigation — Hauptpunkte als Symbole, darunter die Unterpunkte der aktiven
 * Sektion. Vorher lag die Hauptebene im Dock am unteren Rand und hier standen
 * nur die Unterpunkte (Planning-Hauptmenue-Unten-2026-08-24).
 *
 * Sie oeffnet sich auf Zeigen und zeigt dann die Beschriftungen. Weil eine
 * Navigation, die man nur mit dem Zeiger erreicht, am Tablet unbedienbar
 * waere, laesst sie sich zusaetzlich mit dem Knopf oben dauerhaft
 * feststellen (`data-schiene="fest"` am Geruest, in `localStorage` gemerkt) —
 * dann schiebt sie den Inhalt zur Seite, statt ihn zu ueberdecken.
 */
.seitenleiste {
  grid-area: seitenleiste;
  background: var(--schiene-bg);
  color: var(--schiene-text);
  border-right: 1px solid var(--schiene-linie);
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: var(--sidebar-breite);
  z-index: 20;
  transition: width 0.18s ease;
}

/*
 * Geschnitten wird in Kopf und Navigation, nicht an der Schiene selbst: das
 * Benutzermenue im Fuss klappt ueber ihren Rand hinaus auf und wuerde von
 * einem `overflow: hidden` an der Schiene abgeschnitten.
 */
.schiene__kopf {
  overflow: hidden;
}

/* Benutzer im Fuss: transparent auf der dunklen Schiene. */
.schiene__fuss .benutzer__knopf {
  background: transparent;
  color: var(--schiene-stark);
  border-radius: var(--radius-klein);
  padding: 8px;
}

.schiene__fuss .benutzer__knopf:hover {
  background: var(--schiene-hover);
}

.schiene__fuss .avatar {
  width: 32px;
  height: 32px;
  background: var(--schiene-hover);
  color: var(--schiene-stark);
  box-shadow: inset 0 0 0 1px var(--schiene-linie);
}

.schiene__fuss .benutzer__pfeil {
  color: var(--schiene-blass);
}

/* Im schmalen Zustand oeffnet das Benutzermenue nach rechts statt nach links
   ueber den Bildschirmrand hinaus (`.menue` ist sonst rechtsbuendig). */
.schiene__fuss .menue {
  left: 0;
  right: auto;
}

/* Name und Pfeil des Benutzers passen nur in die geoeffnete Schiene. */
.schiene__fuss .benutzer__name,
.schiene__fuss .benutzer__pfeil {
  display: none;
}

.geruest[data-schiene="fest"] .schiene__fuss .benutzer__name,
.geruest[data-schiene="fest"] .schiene__fuss .benutzer__pfeil {
  display: block;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover .benutzer__name,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover .benutzer__pfeil,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within .benutzer__name,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within .benutzer__pfeil {
    display: block;
  }
}

.seitenleiste__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 14px;
  scrollbar-width: thin;
}

/*
 * Geoeffnet: ueberlagert den Inhalt, damit beim Zeigen nichts umbricht.
 * Nur auf Geraeten mit echtem Zeiger — auf dem Tablet oeffnet ausschliesslich
 * der Feststell-Knopf.
 */
@media (hover: hover) {
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-breite-offen);
    box-shadow: var(--schatten-hoch);
  }
}

/* Festgestellt: die Schiene bekommt eine echte Spalte im Raster. */
.geruest[data-schiene="fest"] {
  grid-template-columns: var(--sidebar-breite-offen) minmax(0, 1fr);
}

.geruest[data-schiene="fest"] .seitenleiste {
  width: var(--sidebar-breite-offen);
}

/* Kopf der Schiene: Marke (fuehrt zum Dashboard) und der Feststell-Knopf. */
.schiene__kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 6px;
  min-height: 64px;
}

.schiene__feststellen {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--schiene-blass);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.schiene__feststellen:hover {
  background: var(--schiene-hover);
  color: var(--schiene-stark);
}

.geruest[data-schiene="fest"] .schiene__feststellen {
  color: var(--schiene-marke);
  background: var(--schiene-hover);
}

/* Ohne Zeiger bleibt die Schiene immer fest (geruest.js) — wer sie löste,
   könnte sie ohne Hover nicht wieder öffnen. */
@media not (hover: hover) {
  .schiene__feststellen {
    display: none;
  }
}

/* Fuss der Schiene: Benutzermenue. */
.schiene__fuss {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--schiene-linie);
}

/*
 * Was nur im geoeffneten Zustand Sinn ergibt (Beschriftungen, Unterpunkte,
 * Suchfeld), wird zusammen ein- und ausgeblendet statt einzeln — sonst
 * flackert beim Oeffnen jedes Teil fuer sich.
 */
.schiene__nur-offen {
  opacity: 0;
  transition: opacity 0.14s ease;
}

.geruest[data-schiene="fest"] .schiene__nur-offen {
  opacity: 1;
}

.geruest[data-schiene="fest"] .schiene__nur-zu {
  opacity: 0;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover .schiene__nur-offen,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within .schiene__nur-offen {
    opacity: 1;
  }

  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover .schiene__nur-zu,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within .schiene__nur-zu {
    opacity: 0;
  }
}

/* Unterpunkte kosten Hoehe — geschlossen bleiben sie ganz weg. */
.seitenleiste .nav-unter {
  display: none;
}

.geruest[data-schiene="fest"] .seitenleiste .nav-unter {
  display: block;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:hover .nav-unter,
  .geruest:not([data-schiene="fest"]):not([data-schiene-ruhe]) .seitenleiste:focus-within .nav-unter {
    display: block;
  }
}

.nav-knopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--schiene-text);
  padding: 8px 10px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.nav-knopf:hover {
  background: var(--schiene-hover);
  color: var(--schiene-stark);
}

/*
 * Hauptpunkt, unter dem ein Unterpunkt aktiv ist: nur betont, KEINE Flaeche.
 * Die Markierung traegt allein die aktive Seite — sonst standen Haupt- und
 * Unterpunkt doppelt markiert und ueberlappend da.
 */
.nav-knopf--abschnitt {
  color: var(--schiene-stark);
  font-weight: 650;
}

.nav-knopf--abschnitt .nav-symbol {
  color: var(--schiene-marke);
}

/* Aktive Seite: purpurne Flaeche, Weiss darauf (5,7:1). */
.nav-knopf[aria-current="page"] {
  background: var(--akzent);
  color: var(--akzent-auf);
  font-weight: 650;
}

.nav-knopf[aria-current="page"] .nav-symbol {
  color: var(--akzent-auf);
  opacity: 1;
}

/* Unterpunkte haengen an einer Fuehrungslinie; der aktive traegt dort einen Marker. */
.nav-unter {
  position: relative;
  display: block;
  margin: 2px 0 6px 21px;
  padding-left: 14px;
}

.nav-unter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--schiene-linie);
}

.nav-unter .nav-knopf {
  font-size: 13.5px;
  padding: 6px 10px;
}

.nav-unter .nav-knopf[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--akzent);
}

.nav-symbol {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  opacity: 0.92;
  transition: color 0.16s ease;
}

/* Linien-Symbole der Navigation (symbole.js#symbolSvg). */
.nav-symbol svg,
.symbol {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- Inhalt */

/*
 * Zwei Zeilen: der Seitenkopf steht fest, darunter scrollt die Buehne. Der
 * Router ersetzt nur `.inhalt__buehne` — der Kopf ueberlebt den Seitenwechsel
 * und wird von `setzeSeitenkopf()` neu beschriftet.
 */
.inhalt {
  grid-area: inhalt;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.inhalt__buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

/*
 * Die einzige Zeile ist der Scrollbereich, egal was drinsteht: Die meisten
 * Seiten packen ihre Buehne zum Neuzeichnen in ein eigenes <div>. Dieses div
 * ist dann das Rasterfeld — und `.buehne` darin waechst mit dem Inhalt ueber
 * dessen Hoehe hinaus, statt zu scrollen. Ohne diese Regel schneidet das
 * `overflow: hidden` oben alles ab, was nicht auf den Bildschirm passt.
 * `min-height: 0` hebt die Vorgabe `min-height: auto` fuer Rasterfelder auf,
 * die sonst jedes Schrumpfen unter die Inhaltshoehe verhindert.
 */
.inhalt__buehne > :last-child {
  min-height: 0;
  overflow: auto;
}

/*
 * Oben knapper als frueher (32 px): der Seitenkopf darueber traegt den
 * Abstand zum Fensterrand jetzt selbst.
 */
.buehne {
  overflow: auto;
  padding: 4px 44px var(--dock-freiraum);
  min-width: 0;
}

/*
 * Buehnenvariante fuer Seiten mit eigenem Innenscroll (Schichtplan, Kasse,
 * Designer, 3D-Salon): denselben Randabstand wie jede andere Seite, aber
 * `overflow: hidden` plus `height: 100%` statt `overflow: auto` — gescrollt
 * wird in einer inneren Spalte/Tabelle, nicht in der Buehne selbst. Unten
 * sitzt die schmale Fussleiste fest.
 */
.buehne--plan {
  padding: 4px 44px var(--dock-freiraum);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.buehne__breite {
  max-width: 1240px;
}

/* ---------------------------------------------------------------- Karten */

/*
 * Karten sind schwebende Objekte auf dem Grund: weicher, weit gestreuter
 * Schatten plus eine haarfeine Lichtkante oben. Der frueher tragende
 * 1px-Rahmen ist nur noch eine Andeutung — Tiefe kommt aus dem Licht.
 */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten), inset 0 1px 0 var(--kante-licht);
}

.karte + .karte {
  margin-top: 16px;
}

.karte__kopf {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 10px;
}

.karte__titel {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
}

.karte__hinweis {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-still);
}

.karte__koerper {
  padding: 16px;
}

.raster {
  display: grid;
  gap: 16px;
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --------------------------------------------------------------- Kennzahl */

.kennzahl__bezeichnung {
  font-size: 12px;
  color: var(--text-leise);
  margin: 0 0 3px;
}

.kennzahl__wert {
  font-size: 25px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.kennzahl__zusatz {
  font-size: 12px;
  color: var(--text-still);
  margin: 3px 0 0;
}

/* --------------------------------------------------------------- Tabellen */

.tabelle-rahmen {
  overflow-x: auto;
}

/* Ohne eigenen Scrollbereich — der umgebende Bereich scrollt (Schichtplan). */
.tabelle-rahmen--flach {
  overflow: visible;
}

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

/*
 * Der Kartenrahmen ist gerundet, aber Kopf- und Summenzeile malen ihren
 * eigenen Hintergrund bis an den Rand — ohne diese Regel ueberdeckt er die
 * runde Ecke der Karte mit einer eckigen. Nur wenn `.tabelle-rahmen` die
 * Kante der Karte tatsaechlich beruehrt (kein Kartenkopf davor/danach).
 */
.karte > .tabelle-rahmen:first-child table.tabelle thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:first-child table.tabelle thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:last-child table.tabelle tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:last-child table.tabelle tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

/*
 * Mehrere Tabellen untereinander (Handlungsbedarf je Stufe) sollen dieselben
 * Spalten haben, nicht je Inhalt springen. Die Breiten stehen im `colgroup`;
 * unter der Mindestbreite scrollt der Rahmen, statt Knöpfe abzuschneiden.
 */
table.tabelle--spalten-fest {
  table-layout: fixed;
  min-width: 1000px;
}

.tabelle th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-leise);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  background: var(--flaeche-still);
  position: sticky;
  top: 0;
  z-index: 1;
}

/*
 * Sortierbare Spalte: die ganze Kopfzelle ist der Knopf, damit die Trefferflaeche
 * gross bleibt. Der Pfeil steht immer da (blass, wenn die Spalte nicht sortiert
 * ist) — sonst springt die Beschriftung beim Sortieren um seine Breite.
 */
.tabelle th.th--sortierbar {
  padding: 0;
}

.sortierknopf {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.tabelle th.zahl .sortierknopf {
  justify-content: flex-end;
}

.sortierknopf:hover {
  color: var(--text);
  background: var(--akzent-leise);
}

.sortierknopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}

.sortierknopf__pfeil {
  font-size: 10px;
  line-height: 1;
  opacity: 0.35;
}

th.th--sortiert {
  color: var(--text);
}

th.th--sortiert .sortierknopf__pfeil {
  opacity: 1;
  color: var(--text);
}

.tabelle td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.tabelle tbody tr:hover td {
  background: var(--flaeche-still);
}

.tabelle .zahl,
th.zahl,
td.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabelle tr.summe td {
  font-weight: 650;
  border-top: 2px solid var(--linie-kraeftig);
  background: var(--flaeche-still);
}

.tabelle tr.gruppe td {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
  background: var(--flaeche-still);
  padding-top: 8px;
  padding-bottom: 4px;
}

/*
 * Finanztabelle: Kategorie, Zeilen, Netto, Steuer, Brutto. Auf dem Handy bleiben
 * Kategorie, Netto und Brutto stehen; Zeilenzahl und Steuer gibt es nur in der
 * Breitansicht. Die Hauptsumme (Brutto) darf nie wegscrollen.
 */
table.tabelle--finanzen {
  table-layout: fixed;
  width: 100%;
}

table.tabelle--finanzen col.spalte--zeilen { width: 90px; }
table.tabelle--finanzen col.spalte--netto { width: 140px; }
table.tabelle--finanzen col.spalte--steuer { width: 130px; }
table.tabelle--finanzen col.spalte--brutto { width: 150px; }

@media (max-width: 640px) {
  table.tabelle--finanzen .nebenspalte { display: none; }
  table.tabelle--finanzen col.spalte--netto { width: 104px; }
  table.tabelle--finanzen col.spalte--brutto { width: 112px; }
  table.tabelle--finanzen th,
  table.tabelle--finanzen td { padding-left: 8px; padding-right: 8px; }
}

/* „Noch offen“ und „Storno, Gutschrift ohne Zahlungsdatum“ unter einer Summe: gehören nicht zum Ergebnis und sehen deshalb leiser aus. */
.tabelle tr.offen td {
  color: var(--text-leise);
  font-style: italic;
}

/*
 * Uebersichtstabellen tragen teils ganze Regelsaetze statt Zahlen. Damit die
 * Tabellenbreite unabhaengig von der Zahl der Eintraege konstant bleibt, ist
 * ein Objekt immer eine ZEILE (nie eine Spalte) — solche Zellen duerfen
 * umbrechen und richten sich oben aus.
 */
.tabelle td .liste-schlicht,
.tabelle td > div + .herkunft {
  display: block;
}

.tabelle .liste-schlicht {
  margin: 0;
  padding-left: 16px;
}

.liste-schlicht {
  margin: 0;
  padding-left: 16px;
}

.liste-schlicht li + li {
  margin-top: 4px;
}

.tabelle tbody td:has(.liste-schlicht) {
  vertical-align: top;
  white-space: normal;
  min-width: 240px;
}

/* Schmale Spalte, die nur einen Glyph-Knopf traegt. */
.zelle--knopf {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Mehrere Knoepfe in einer Zelle: auf einer Mittellinie, mit Abstand (inline-flex-Knoepfe haben ohne Leerraum keinen). */
.zelle--knopf > .knopf {
  vertical-align: middle;
}

.zelle--knopf > .knopf + .knopf {
  margin-left: 8px;
}

/* Schmale Spalte mit der Auswahl-Checkbox einer `auswahlTabelle()` (shared/ui/listenbaustein.js). */
.zelle--auswahl {
  width: 1%;
  white-space: nowrap;
  padding-right: 0;
}

/* Anklickbare Zeile der "Erste Schritte"-Checkliste (bueroStartSeite.js). */
.schalter-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.schalter-zeile:hover {
  background: var(--flaeche-still);
}

/*
 * Knopf, der nur aus einem Zeichen besteht (Anlegen, Bearbeiten, Entfernen).
 * Seit dem Knopf-System „Fingerbreit" eine runde Flaeche mit voller
 * Trefferbreite statt eines schmalen Kaestchens — Zeilenaktionen sind die
 * am haeufigsten danebengegriffenen Ziele.
 */
.knopf--glyph {
  width: var(--knopf-glyph);
  height: var(--knopf-glyph);
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  font-size: 15px;
}

.knopf--glyph.knopf--klein {
  width: calc(var(--knopf-glyph) - 4px);
  height: calc(var(--knopf-glyph) - 4px);
  /* `.knopf--klein` steht weiter unten und setzt sonst 14px Innenabstand: das SVG bekäme keine Breite. */
  padding: 0;
  font-size: 13.5px;
}

/* SVG-Knopfsymbol (z.B. Posteingang) statt Text-Glyph, gleiche Bezugsgröße. */
.knopf-symbol {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 15px;
}

.knopf-symbol svg {
  width: 100%;
  height: 100%;
}

/* Schmale Spalte mit dem Ziehgriff fuer Drag & Drop-Sortierung. */
.zelle--griff {
  width: 1%;
  white-space: nowrap;
}

.griff {
  display: inline-block;
  cursor: grab;
  color: var(--text-leise);
  font-size: 15px;
  padding: 2px 4px;
  user-select: none;
}

.griff:active {
  cursor: grabbing;
}

/* Ziehgriff waehrend einer Spaltensortierung — sichtbar, aber ohne Funktion. */
.griff--aus {
  cursor: default;
  color: var(--text-still);
  opacity: 0.4;
}

/*
 * Hinweise zu einer Person stehen in ihrer Zeile, nicht als Stapel ueber der
 * Tabelle (Entscheidung 2026-08-13): sonst schieben ein paar fehlende
 * Stammdaten die Zahlen aus dem Bild und man sucht die Daten.
 */
.tabelle tbody tr.zeile--hinweis td {
  background: var(--mittel-leise);
  vertical-align: top;
}

.tabelle tbody tr.zeile--hinweis:hover td {
  background: var(--mittel-leise);
}

/*
 * Rechtevergabe (Planning-Rechte-2026-08-25): eine Zelle, deren Wert vom
 * aufgeloesten Profil abweicht, bekommt denselben Hinweis-Ton wie eine
 * Personenzeile mit fehlenden Stammdaten — hier je Zelle statt je Zeile.
 */
.rechte-matrix td.rechte-matrix__abweichung {
  background: var(--mittel-leise);
}

.rechte-matrix__mitte {
  text-align: center;
}

.tabelle td.zelle--person {
  vertical-align: top;
  white-space: normal;
  max-width: 340px;
}

.zeilenhinweis {
  display: flex;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #6b4a0c;
}

.zeilenhinweis__zeichen {
  flex: none;
}

/* Link innerhalb eines Hinweis- oder Meldungstexts, der direkt zur Fundstelle fuehrt. */
.text-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}

.text-link:hover {
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 3px;
}

/* Zeile, ueber der gerade eine gezogene Zeile schwebt. */
.tabelle tbody tr.zeile--ziehziel td {
  background: var(--akzent-leise);
  box-shadow: inset 0 2px 0 var(--akzent);
}

/*
 * Kartenkopf mit einer Aktion rechts (z.B. „+" zum Anlegen). Bewusst als
 * eigene Klasse: `.karte__kopf` legt Titel und Hinweis sonst untereinander,
 * und das gilt fuer alle anderen Karten weiterhin.
 */
.karte__kopf--mit-aktion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Anker fuer ein `.menue`-Popover, das rechtsbuendig unter einem Knopf aufklappt. */
.spalten-auswahl {
  position: relative;
}

/* Der Name in der Tabelle oeffnet die Akte — schlichter Reset statt Knopf-Optik. */
.tabelle-name-knopf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tabelle-name-knopf:hover span:first-of-type,
.tabelle-name-knopf:hover strong {
  text-decoration: underline;
}

/* Ganze Tabellenzeile öffnet ihren Datensatz; der Name darin bleibt der Tastatur-Zugang. */
.tabelle tbody tr.zeile--klickbar {
  cursor: pointer;
}

/* Textbausteine einer Dokumentvorlage: Titel mit Text darunter, wie im Brief; Aktionen rechts. */
.baustein-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.baustein-kopf .abschnitt-titel {
  margin: 0;
}

.baustein-liste {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}

.baustein {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  cursor: pointer;
}

.baustein + .baustein {
  border-top: 1px solid var(--linie);
}

.baustein:hover {
  background: var(--flaeche-schwebend);
}

.baustein__inhalt {
  min-width: 0;
}

.baustein__titel {
  font-weight: 650;
}

.baustein__text {
  margin: 4px 0 0;
  color: var(--text-leise);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.baustein__aktionen {
  flex: none;
}

/* Tabelle mit Eingabefeldern in den Zellen (Staffelstufen im Dialog). */
.tabelle--eingabe td {
  padding: 5px 6px;
}

.tabelle--eingabe th.th--sortierbar .sortierknopf {
  padding: 5px 6px;
}

.tabelle--eingabe input[type='text'],
.tabelle--eingabe input[type='number'] {
  width: 100%;
  min-width: 70px;
}

.tabelle--eingabe td:first-child input {
  min-width: 160px;
}

.dialog--breit {
  max-width: min(900px, 94vw);
  width: 900px;
}

/* ---------------------------------------------------------------- Bedienung */

/*
 * Knopf-System „Fingerbreit" (Entscheidung 2026-09-05, aus vier vorgelegten
 * Systemen gewaehlt). Vier Rollen mit klar getrennter Form, damit man sie
 * ohne Lesen auseinanderhaelt — vorher unterschied sich ein Umschalter von
 * einer Hauptaktion nur durch die Fuellfarbe:
 *
 *   .knopf              Nebenaktion — getoente Flaeche, haarfeine Kante
 *   .knopf--haupt       Hauptaktion — gefuellt mit Akzentschein, EINE je Ansicht
 *   .knopf--still       Beilaeufig — nur Text
 *   .knopf--gefahr      Loeschen — nur Text in Rot, im Dialogfuss ganz links
 *   [aria-pressed]      Filter/Umschalter — Pille mit Punkt, aendert nur die Ansicht
 *   .knopf--glyph       Zeilenaktion — runde Symbolflaeche
 *
 * Die Kante der Nebenaktion ist eine Abweichung vom vorgelegten Entwurf: der
 * Dialogfuss liegt selbst auf `--flaeche-still`, ohne sie verschwaende dort
 * jedes „Abbrechen" im Untergrund.
 */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--knopf-hoehe);
  padding: 0 18px;
  border: 1px solid var(--linie);
  background: var(--flaeche-still);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  border-radius: var(--knopf-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.knopf:hover:not(:disabled) {
  background: var(--akzent-leise);
  border-color: transparent;
  color: var(--akzent-text);
}

.knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knopf--haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-auf);
  font-weight: 700;
  box-shadow: 0 2px 0 light-dark(#111111, #000000);
}

.knopf--haupt:hover:not(:disabled) {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
  color: var(--akzent-auf);
}

.knopf--haupt:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}

.knopf--still {
  border-color: transparent;
  background: transparent;
  color: var(--text-leise);
}

.knopf--still:hover:not(:disabled) {
  background: var(--flaeche-still);
  color: var(--text);
}

.knopf--gefahr {
  border-color: transparent;
  background: transparent;
  color: var(--schlecht);
}

.knopf--gefahr:hover:not(:disabled) {
  background: var(--schlecht-leise);
  border-color: transparent;
  color: var(--schlecht);
}

.knopf--klein {
  height: var(--knopf-hoehe-klein);
  padding: 0 14px;
  font-size: 12.5px;
}

/*
 * Filter und Umschalter aendern die Ansicht, nie die Daten — deshalb eine
 * eigene Form: durchsichtige Pille mit Rand, aktiv mit Punkt und Akzentton.
 * `--haupt` und `--glyph` sind ausgenommen: ein gedrueckter Symbolknopf
 * (Freigabe im Schichtplan, Raumwahl im Salon) bleibt eine Flaeche.
 */
.knopf[aria-pressed]:not(.knopf--haupt):not(.knopf--glyph) {
  height: var(--knopf-hoehe-filter);
  padding: 0 16px;
  background: transparent;
  border-color: var(--linie-kraeftig);
  color: var(--text-leise);
}

.knopf[aria-pressed]:not(.knopf--haupt):not(.knopf--glyph):hover:not(:disabled) {
  background: var(--flaeche-still);
  border-color: var(--text-still);
  color: var(--text);
}

.knopf[aria-pressed="true"]:not(.knopf--haupt):not(.knopf--glyph) {
  background: var(--akzent-leise);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.knopf[aria-pressed="true"]:not(.knopf--haupt):not(.knopf--glyph)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
}

/* Loeschen steht im Dialogfuss ganz links, weit weg von „Speichern". */
.dialog__fuss .knopf--gefahr {
  margin-right: auto;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="email"],
select,
textarea {
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  padding: 6px 9px;
  width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--flaeche-still);
  color: var(--text-still);
}

/*
 * Bedienelemente einer Werkzeugzeile (Suchfelder, Auswahllisten) tragen
 * dieselbe Hoehe und dieselbe runde Form wie die Knoepfe daneben — sonst
 * steht die Zeile auf drei verschiedenen Grundlinien. Eingabefelder in
 * Formularen und Dialogen bleiben bewusst eckig (`--radius-klein`): dort
 * steht laengerer Text, den eine Pille schlecht fasst.
 *
 * Muss NACH den `input[type=…]`-Regeln oben stehen: die sind gleich
 * spezifisch und wuerden Hoehe und Rundung sonst wieder einkassieren.
 */
.kopf__aktionen input,
.kopf__aktionen select,
.karte__kopf--mit-aktion .reihe input,
.karte__kopf--mit-aktion .reihe select,
input.kopf-suche,
input.werkzeug-feld,
select.werkzeug-feld,
select.bondrucker-auswahl,
select.kassierer-auswahl {
  height: var(--knopf-hoehe);
  padding: 0 16px;
  border-radius: var(--knopf-radius);
  /* Ohne das erben sie `width: 100%` von der Feldregel oben und sprengen die
     Werkzeugzeile in eine Spalte statt in eine Reihe. */
  width: auto;
  max-width: 260px;
}

/* Kontrollkaestchen und Schalter behalten ihre Form. */
.kopf__aktionen input[type="checkbox"],
.kopf__aktionen input[type="radio"],
.karte__kopf--mit-aktion .reihe input[type="checkbox"],
.karte__kopf--mit-aktion .reihe input[type="radio"] {
  height: auto;
  padding: 0;
  border-radius: 0;
}

input.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.feld {
  display: block;
  margin-bottom: 12px;
}

.feld__name {
  display: block;
  font-size: 12px;
  color: var(--text-leise);
  margin-bottom: 4px;
  font-weight: 550;
}

.feld__hinweis {
  font-size: 11.5px;
  color: var(--text-still);
  margin-top: 3px;
}

/* Drag&Drop-Feld für den Dateiupload im Dokumentdialog. */
.datei-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 16px;
  border: 1.5px dashed var(--linie-kraeftig);
  border-radius: var(--radius);
  background: var(--flaeche-still);
  text-align: center;
  cursor: pointer;
}

.datei-zone:hover {
  border-color: var(--text-still);
}

.datei-zone--ueber {
  border-color: var(--akzent);
  background: var(--akzent-leise);
}

.datei-zone--gefuellt {
  border-style: solid;
}

.datei-zone__eingabe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.datei-zone__text {
  font-size: 12.5px;
  color: var(--text-leise);
}

.datei-zone__dateiname {
  font-size: 13px;
  font-weight: 550;
  word-break: break-all;
}

.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 14px;
}

/*
 * Position einer Rechnung: die Bezeichnung nimmt den Platz, Menge und Steuersatz
 * sind schmal, der Preis steht rechts. Auf dem Handy rutschen Menge, Satz und
 * Preis unter die Bezeichnung.
 */
.positionszeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  align-items: flex-end;
}
.positionszeile > .feld { flex: 0 0 auto; }
.positionszeile__bezeichnung { flex: 1 1 14rem !important; min-width: 0; }
.positionszeile__menge { width: 5rem; }
.positionszeile__satz { width: 6.5rem; }
.positionszeile__preis { width: 8.5rem; }

/*
 * Zuordnungstabelle (z.B. Fremdimport Schritt 1, Kategorie → Konto): eine
 * echte Tabelle, kein Formular. Alle Zeilen teilen sich EIN Spaltenraster
 * (statt wie .feld-reihe pro Zeile neu zu rechnen) — sonst verschiebt sich
 * die Konto-Spalte je nachdem, ob eine Zeile eine Status-Zelle zeigt.
 */
.zuordnung-tabelle {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(200px, 1.2fr) minmax(150px, auto);
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
}

.zuordnung-tabelle > .zuordnung-zeile {
  display: contents;
}

.zuordnung-tabelle .feld {
  margin-bottom: 0;
}

/*
 * Kontierungsstempel ueber der Beleg-Vorschau (Planning-Bankimport-2026-08-24,
 * F14b): sieht aus wie ein Stempel, ruehrt die Datei selbst nicht an —
 * deshalb ein reines Overlay statt einer Aenderung an der Datei.
 */
.beleg-stempel {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid;
  font-size: 11.5px;
  line-height: 1.4;
  transform: rotate(-4deg);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  box-shadow: var(--schatten);
}

.beleg-stempel strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.beleg-stempel--gut { border-color: var(--gut); color: var(--gut); }
.beleg-stempel--mittel { border-color: var(--mittel); color: var(--mittel); }
.beleg-stempel--schlecht { border-color: var(--schlecht); color: var(--schlecht); }

.feld--schmal {
  max-width: 200px;
}

/* Wochentagswahl einer Wiederholung: sieben Kaestchen nebeneinander. */
.wochentagwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wochentagwahl__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 12.5px;
  cursor: pointer;
}

.wochentagwahl__tag input {
  width: auto;
  margin: 0;
}

/* Oeffnungszeiten je Wochentag (Filialen-Stammdaten): eine schmale Zeile statt der Feldraster-Karten. */
.oeffnungszeiten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oeffnungszeiten__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oeffnungszeiten__zeile input {
  width: auto;
  margin: 0;
}

.oeffnungszeiten__tag {
  width: 28px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-leise);
  font-weight: 550;
}

.oeffnungszeiten__bis {
  color: var(--text-still);
}

/* Bestehende Eintraege im gewaehlten Zeitraum (Dialog „Zeiten eintragen"). */
.eintragsliste {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-still);
}

.eintragsliste__titel {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.eintragsliste__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
}

.eintragsliste__zeile + .eintragsliste__zeile {
  border-top: 1px solid var(--linie);
}

.eintragsliste__text {
  flex: 1;
  min-width: 0;
}

.dialog__unterzeile {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-leise);
}

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13.5px;
}

.schalter input {
  width: auto;
  margin: 0;
}

.suche {
  max-width: 300px;
}

.werkzeug-feld {
  width: auto;
  min-width: 150px;
}

/* -------------------------------------------------------------- Merkzeichen */

.marke-zeichen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.marke-zeichen--gut {
  background: var(--gut-leise);
  color: var(--gut);
}

.marke-zeichen--mittel {
  background: var(--mittel-leise);
  color: var(--mittel);
}

.marke-zeichen--schlecht {
  background: var(--schlecht-leise);
  color: var(--schlecht);
}

.marke-zeichen--still {
  background: var(--flaeche-still);
  color: var(--text-leise);
  border-color: var(--linie);
}

.marke-zeichen--akzent {
  background: var(--akzent-leise);
  color: var(--akzent-text);
}

/* Kassen-Feier beim Stufensprung (Planning-Gamification-2026-08-23, F18):
   Tannenbaum mit Geschenken statt reinem Text (Forgejo-Issue "Tannenbaum-
   Visualisierung mit Geschenken"). Farben ausschliesslich aus den
   CSS-Variablen oben, wie bei jedem anderen Inline-SVG in dieser Datei. */
.stufenmeldung {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 26px 14px 18px;
  background: var(--flaeche);
  border: 1px solid var(--gut);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.stufenmeldung--sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.stufenmeldung__text-block {
  display: flex;
  flex-direction: column;
}

.stufenmeldung__stufe {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gut);
}

.stufenmeldung__text {
  font-weight: 600;
}

.stufenmeldung__baum {
  flex: none;
  line-height: 0;
}

.stufenmeldung__stamm {
  fill: var(--linie-kraeftig);
}

.stufenmeldung__krone {
  fill: var(--gut);
}

.stufenmeldung__stern {
  fill: var(--akzent-text);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 70px 25px;
}

.stufenmeldung--sichtbar .stufenmeldung__stern {
  animation: stufenmeldung-stern-ein 0.5s ease 0.15s forwards;
}

/* Geschenk, noch nicht erreicht: verpackte Silhouette ohne Schleife, keine Zahl, kein Hinweis auf die Hoehe der Stufe. */
.stufenmeldung__geschenk-box {
  fill: var(--flaeche);
  stroke: var(--linie-kraeftig);
  stroke-width: 1.4;
  stroke-dasharray: 2.4 2.2;
}

.stufenmeldung__geschenk.ist-erreicht .stufenmeldung__geschenk-box {
  fill: var(--akzent);
  stroke: var(--akzent-dunkel);
  stroke-dasharray: none;
}

.stufenmeldung__geschenk-band {
  fill: var(--akzent-text);
}

.stufenmeldung__funkel {
  fill: var(--akzent-text);
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  transform-origin: center;
}

/* Die soeben erreichte Stufe: das Geschenk poppt auf, der Funkel folgt kurz danach. */
.stufenmeldung__geschenk.ist-neu {
  opacity: 0;
  transform: scale(0);
}

.stufenmeldung--sichtbar .stufenmeldung__geschenk.ist-neu {
  animation: stufenmeldung-geschenk-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.stufenmeldung--sichtbar .stufenmeldung__geschenk.ist-neu .stufenmeldung__funkel {
  animation: stufenmeldung-funkel 0.7s ease 0.55s forwards;
}

@keyframes stufenmeldung-geschenk-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes stufenmeldung-funkel {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(20deg); }
}

@keyframes stufenmeldung-stern-ein {
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stufenmeldung__stern,
  .stufenmeldung__geschenk.ist-neu,
  .stufenmeldung__funkel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ------------------------------------------------------------- Meldungen */

.meldung {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  background: var(--flaeche);
  font-size: 13px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.meldung__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 20px;
}

.meldung__zeichen svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meldung__text {
  flex: 1;
  min-width: 0;
}

.meldung__titel {
  font-weight: 650;
  margin: 0 0 2px;
}

.meldung p {
  margin: 0;
}

/* Klickbare Meldung: die ganze Fläche führt zur Lösung, der Pfeil rechts zeigt es an. */
.meldung--klickbar {
  cursor: pointer;
}

.meldung--klickbar:hover {
  filter: brightness(0.97);
}

.meldung--klickbar:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.meldung__weiter {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-still);
}

.meldung__weiter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meldung--klickbar:hover .meldung__weiter {
  color: var(--text);
}

/* Status-Meldungen: Text bleibt Tinte, der Streifen links traegt die Farbe (auch im Dunkelmodus lesbar). */
.meldung--warnung {
  background: var(--mittel-leise);
  border-color: var(--mittel-leise);
  border-left-color: var(--mittel);
}

.meldung--warnung .meldung__zeichen { color: var(--mittel); }

/* Befristeter Supportzugang (Planning-Salonika-Zugriffssicherung-2026-09-04,
   Z4): schwebt ueber allem, damit er waehrend der ganzen Freigabe sichtbar
   bleibt, egal welche Seite gerade offen ist. */
.support-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.meldung--fehler {
  background: var(--schlecht-leise);
  border-color: var(--schlecht-leise);
  border-left-color: var(--schlecht);
}

.meldung--fehler .meldung__zeichen { color: var(--schlecht); }

.meldung--gut {
  background: var(--gut-leise);
  border-color: var(--gut-leise);
  border-left-color: var(--gut);
}

.meldung--gut .meldung__zeichen { color: var(--gut); }

.leer {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-still);
}

.leer__titel {
  font-weight: 600;
  color: var(--text-leise);
  margin: 0 0 4px;
}

.leer p {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------- Rechenweg */

.rechenweg {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche-still);
  margin: 6px 0 2px;
  font-size: 12.5px;
}

.rechenweg__zeile {
  display: flex;
  gap: 12px;
  padding: 4px 12px;
  align-items: baseline;
}

.rechenweg__zeile + .rechenweg__zeile {
  border-top: 1px solid #edeceb;
}

.rechenweg__bezeichnung {
  flex: 1;
  color: var(--text-leise);
}

.rechenweg__wert {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 550;
}

.rechenweg__zeile--ergebnis {
  background: var(--flaeche);
  font-weight: 650;
}

.rechenweg__zeile--ergebnis .rechenweg__bezeichnung {
  color: var(--text);
}

.aufklapp {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.aufklapp__pfeil {
  color: var(--text-still);
  font-size: 9px;
  transition: transform 0.14s ease;
}

.aufklapp[aria-expanded="true"] .aufklapp__pfeil {
  transform: rotate(90deg);
}

.herkunft {
  display: block;
  font-size: 11px;
  color: var(--text-still);
  font-weight: 400;
}

/* --------------------------------------------------------------- Dialoge */

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--schatten-hoch);
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
  color: var(--text);
  background: var(--flaeche);
}

dialog::backdrop {
  background: rgba(24, 26, 30, 0.36);
}

.dialog__kopf {
  padding: 15px 18px;
  border-bottom: 1px solid var(--linie);
}

.dialog__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.dialog__koerper {
  padding: 18px;
  max-height: min(66vh, 620px);
  overflow: auto;
}

.dialog__fuss {
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--flaeche-still);
  border-radius: 0 0 var(--radius) var(--radius);
}

/*
 * Seitenpanel (shared/ui/seitenPanel.js): dasselbe <dialog>, aber am rechten
 * Rand des Hauptbereichs — rechts von der Schiene, volle Höhe. Es fährt ein
 * und wieder aus; das Ausfahren geht über `display`/`overlay` mit
 * `allow-discrete`, damit der Dialog bis zum Ende der Überblendung im
 * Top-Layer bleibt. Ohne diese Unterstützung schließt er einfach sofort.
 */
dialog.dialog--seite {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  height: 100vh;
  max-height: none;
  width: min(1120px, calc(100vw - var(--sidebar-breite)));
  max-width: none;
  border-radius: 0;
  box-shadow: -12px 0 40px var(--schatten-farbe-tief);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}

dialog.dialog--seite:not([open]) {
  transform: translateX(100%);
}

@starting-style {
  dialog.dialog--seite[open] {
    transform: translateX(100%);
  }
}

dialog.dialog--seite::backdrop {
  background: rgba(24, 26, 30, 0.22);
  transition: background-color 0.28s, overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}

dialog.dialog--seite:not([open])::backdrop {
  background: transparent;
}

@starting-style {
  dialog.dialog--seite[open]::backdrop {
    background: transparent;
  }
}

dialog.dialog--seite-schmal {
  width: min(520px, calc(100vw - var(--sidebar-breite)));
}

dialog.dialog--seite > form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog--seite .dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px;
}

.dialog--seite .dialog__titel {
  font-size: 18px;
}

.dialog--seite .dialog__koerper {
  flex: 1;
  min-height: 0;
  max-height: none;
  padding: 24px 28px;
}

.dialog--seite .dialog__fuss {
  padding: 14px 28px;
  border-radius: 0;
}

@media (max-width: 860px) {
  dialog.dialog--seite,
  dialog.dialog--seite-schmal {
    width: 100vw;
  }
}

/* Steckbrief: Bilder links (bleiben beim Scrollen stehen), Texte rechts. */
.steckbrief {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.steckbrief__bilder {
  position: sticky;
  top: 0;
}

.steckbrief__texte {
  min-width: 0;
}

@media (max-width: 860px) {
  .steckbrief {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .steckbrief__bilder {
    position: static;
  }
}

/*
 * Gesperrter Übergabemodus (Planning-Unterschriftsfunktion-2026-09-04, Z10):
 * bewusst kein `.dialog__kopf/-koerper/-fuss` — das Kundengerät soll aussehen
 * wie eine eigene Kiosk-Seite, nicht wie ein Dialog über der App darunter.
 */
.uebergabemodus {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

.uebergabemodus__inhalt {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.uebergabemodus__titel {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.uebergabemodus__text {
  overflow: auto;
  flex: 0 1 auto;
  max-height: 32vh;
  line-height: 1.5;
}

.uebergabemodus__leinwand {
  flex: 1 1 auto;
  min-height: 160px;
  width: 100%;
  border: 2px dashed var(--linie);
  border-radius: var(--radius);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/*
 * T-Konto-Eingabe im Buchung-erfassen-Dialog (raw/todos Z.136):
 * Soll und Haben stehen als eigene Spalten nebeneinander, die Saldozeile
 * bleibt beim Scrollen sichtbar, damit der Ausgleich immer erkennbar ist.
 */
.t-konto__saldo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  font-size: 13px;
  font-weight: 600;
}

.t-konto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  overflow: hidden;
}

.t-konto__seite {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.t-konto__seite--soll {
  border-right: 2px solid var(--linie-kraeftig);
}

.t-konto__seite-titel {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linie);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-leise);
}

.t-konto__zeile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--linie);
}

.t-konto__zeile:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .t-konto {
    grid-template-columns: 1fr;
  }

  .t-konto__seite--soll {
    border-right: 0;
    border-bottom: 2px solid var(--linie-kraeftig);
  }
}

/* ------------------------------------------------------------- Menue */

.menue {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  min-width: 232px;
  padding: 5px;
  z-index: 40;
}

/*
 * Aus der Hauptmenue-Leiste unten heraus klappt das Benutzermenue nach oben
 * auf — unten ist kein Platz mehr. Muss nach `.menue` stehen, sonst gewinnt
 * deren `top`. Rechtsbuendig wie die Grundform, damit es am rechten
 * Bildschirmrand nicht ueberlappt.
 */
.menue--hoch {
  top: auto;
  bottom: calc(100% + 5px);
}

.menue__kopf {
  padding: 10px 10px 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 5px;
}

.menue__name {
  font-weight: 600;
}

.menue__rolle {
  font-size: 12px;
  color: var(--text-still);
}

.menue__eintrag {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-align: left;
}

.menue__eintrag:hover {
  background: var(--flaeche-still);
}

.menue__trenner {
  height: 1px;
  background: var(--linie);
  margin: 5px 0;
}

/* ---------------------------------------------------------- Anmeldeseite */

.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--grund);
}

.anmeldung__karte {
  width: 100%;
  max-width: 366px;
}

.anmeldung__marke {
  text-align: center;
  margin-bottom: 20px;
}

.anmeldung__zeichen {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-auf);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 19px;
  margin: 0 auto 11px;
}

.anmeldung__titel {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.anmeldung__zusatz {
  margin: 3px 0 0;
  color: var(--text-still);
  font-size: 13px;
}

/*
 * Honigtopf-Feld der oeffentlichen Formulare (Skill web-security): fuer Menschen unsichtbar, fuer Bots ein
 * normales Feld. Bewusst nicht `display: none` — das erkennen manche Bots und lassen das Feld leer.
 */
.fallen-feld {
  position: absolute;
  left: -9999px;
}

/* Zeile unter dem Anmeldeknopf: „Passwort vergessen?“ als leiser Knopf oder als Hinweistext. */
.anmeldung__nebenweg {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

/* ------------------------------------------------- Zweiter Faktor (2FA) */

/* Ziffernweise Codeeingabe (Einrichtung UND Anmeldung, siehe modules/auth/ui/codeEingabe.js). */
.code-eingabe {
  display: flex;
  gap: 8px;
  justify-content: center;
}

input.code-eingabe__feld {
  width: 42px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/*
 * Reines Weiß statt `--flaeche` (die im dunklen Theme kein Weiß mehr ist):
 * der QR-Code selbst ist immer schwarz auf weiß, sonst liest ihn die Kamera
 * im dunklen Theme schlechter. Kein Marken-Ton, deshalb kein Token dafür.
 */
/* Text-Knopf mit vollem Satz statt kurzem Label — darf umbrechen, die feste Knopf-Hoehe weicht dafuer auf. */
.zweiter-faktor__wiederherstellung {
  height: auto;
  min-height: var(--knopf-hoehe);
  padding: 8px 18px;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

.zweiter-faktor__qr {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.zweiter-faktor__qr svg {
  display: block;
}

.zweiter-faktor__geheimnis {
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.05em;
  padding: 10px;
  background: var(--flaeche-still);
  border-radius: var(--radius-klein);
}

.zweiter-faktor__codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.zweiter-faktor__codes code {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
  letter-spacing: 0.03em;
  padding: 8px;
  background: var(--flaeche-still);
  border-radius: var(--radius-klein);
}

/* ------------------------------------------------------------- Werkzeuge */

.reihe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Knopf, der in einer .reihe neben Auswahlfeldern steht: er sitzt auf der
 * Grundlinie der Felder statt mittig neben deren Beschriftung.
 */
.reihe__feldknopf {
  align-self: flex-end;
  margin-bottom: 12px;
}

.reihe--rechts {
  justify-content: flex-end;
  /* Zeilen-Aktionen (Bearbeiten/Löschen) sollen nie umbrechen — sonst stehen
     die Glyphen bei schmaler Spalte untereinander statt nebeneinander. */
  flex-wrap: nowrap;
}

.stapel > * + * {
  margin-top: 16px;
}

.leise {
  color: var(--text-still);
}

.klein {
  font-size: 12px;
}

.zahlenschrift {
  font-variant-numeric: tabular-nums;
}

.trennlinie {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 16px 0;
}

.abschnitt-titel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-still);
  font-weight: 650;
  margin: 0 0 9px;
}

/* ---------------------------------------------------------------- Handy */

/*
 * Menue-Knopf fuer das Handy: zog mit dem Umbau auf Entwurf D (2026-09-05)
 * aus dem entfallenen Dock in den Seitenkopf. Ausserhalb der Handy-
 * Media-Query unsichtbar — am Rechner ist die Schiene ohnehin immer da.
 */
.seitenkopf__umschalter {
  display: none;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font-size: 17px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
}

.seitenkopf__umschalter:hover {
  background: var(--flaeche-schwebend);
  color: var(--text);
}

@media (max-width: 860px) {
  /*
   * Auch mit `data-schiene="fest"` (auf dem Handy immer gesetzt, weil dort kein
   * Hover existiert): sonst behielte das Raster die 264-px-Spalte fuer die
   * Schiene, obwohl diese ueber dem Inhalt schwebt, und der Inhalt waere
   * schmal und nach rechts geschoben.
   */
  .geruest,
  .geruest[data-schiene="fest"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "inhalt";
  }

  /*
   * Auf dem Handy schiebt sich die Leiste ueber den Inhalt — dort braucht sie
   * als einziges wieder einen eigenen Grund, sonst schiene der Inhalt durch.
   */
  .seitenleiste {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-breite);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    background: var(--schiene-bg);
    box-shadow: var(--schatten-hoch);
    padding-top: 16px;
  }

  .geruest[data-menue="offen"] .seitenleiste {
    transform: translateX(0);
  }

  .seitenkopf__umschalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .buehne,
  .buehne--plan {
    padding: 4px 14px var(--dock-freiraum);
  }

  /*
   * Auf dem Handy ist die Schiene immer die volle Leiste, die sich ueber den
   * Inhalt schiebt — der Feststell-Knopf ergibt dort keinen Sinn, geoeffnet
   * wird ueber den Menue-Knopf im Seitenkopf.
   */
  .seitenleiste {
    width: var(--sidebar-breite-offen);
  }

  .schiene__feststellen {
    display: none;
  }

  .seitenleiste .nav-unter,
  .schiene__fuss .benutzer__name,
  .schiene__fuss .benutzer__pfeil {
    display: block;
  }

  .schiene__nur-offen {
    opacity: 1;
  }

  .schiene__nur-zu {
    opacity: 0;
  }

  /*
   * Zurueck/Vor sind auf dem Handy bereits Systemgesten (Planning-Hauptmenue-
   * Unten-2026-08-24, Entscheidung 2).
   */
  .verlauf {
    display: none;
  }

  .seitenkopf {
    padding: 12px 14px 10px;
  }

  .seitenkopf__titel {
    font-size: 19px;
  }

  .blaettern__wert {
    min-width: 104px;
  }

  .wochenplan-layout {
    flex-direction: column-reverse;
  }

  .akte-layout {
    flex-direction: column;
    overflow-y: auto;
  }

  /* Nebeneinander gibt es auf dem Handy nicht — die Kartei bleibt dort der
     eigene Weg zum naechsten Kunden (Entwurf D). */
  .akte-liste {
    display: none;
  }

  .akte-hauptbereich {
    min-height: auto;
  }

  .akte-panel {
    flex: none;
    overflow: visible;
  }

  /* Sechs Reiter passen nicht nebeneinander auf ein Handy — statt sie zu
     stauchen, bleibt die Reihe in ihrer eigenen Breite und laesst sich
     seitlich wischen. */
  .akte-reiter {
    overflow-x: auto;
  }

  .akte-reiter__knopf {
    flex: none;
  }

  .akte-seitenleiste {
    width: 100%;
    order: -1;
  }

  .akte-foto {
    flex-direction: row;
  }

  .akte-identitaet {
    margin-top: 0;
    text-align: left;
  }

  .akte-name-eingabe,
  .akte-rolle {
    text-align: left;
  }

  .akte-status {
    justify-content: flex-start;
  }

  .mitarbeiter-leiste {
    width: 100%;
    margin-left: 0;
    padding: 8px 20px 8px 8px;
  }

  .mitarbeiter-leiste[data-offen="true"] {
    width: 100%;
  }

  .mitarbeiter-leiste__liste {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0;
    max-height: none;
    overflow: visible;
  }

  .mitarbeiter-leiste__umschalter {
    top: -12px;
    left: auto;
    right: 12px;
  }
}

/* --------------------------------------------------------------- Drucken */

@media print {
  .seitenleiste,
  .knopf,
  .seitenkopf__aktionen,
  .verlauf,
  .mitarbeiter-leiste,
  .vollbild-knopf {
    display: none !important;
  }

  .geruest {
    display: block;
    height: auto;
  }

  .buehne {
    overflow: visible;
    padding: 0;
  }

  .buehne--plan {
    padding: 0;
  }

  /* Auf Papier gibt es keinen Scrollbereich — alles untereinander ausgeben. */
  .buehne--plan,
  .wochenplan-layout,
  .wochenplan-haupt,
  .buehne--akte,
  .akte-layout,
  .akte-hauptbereich,
  .akte-panel,
  .inhalt {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .karte {
    box-shadow: none;
    break-inside: avoid;
  }

  .druckseite {
    break-after: page;
  }
}

/* ------------------------------------------------------------ Dokumente */

.dokument-anhaenge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.entwurf-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.entwurf-vorschau {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--linie-kraeftig);
  border-radius: 6px;
  background: #fff;
}

@media (max-width: 960px) {
  .entwurf-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------- Briefkopf-Designer */

/*
 * Sitzt in `.buehne--plan` (Entscheidung: derselbe Randabstand wie jede
 * andere Seite) — die Hoehe kommt darum vom Flex-Elternteil, nicht mehr aus
 * einer eigenen 100vh-Formel.
 */
.designer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  flex: 1;
  min-height: 0;
}

/*
 * Rechte Spalte: Eigenschaften oben, Elemente unten. Das aufgeklappte Panel füllt
 * den Rest, das zugeklappte behält nur seine Kopfzeile.
 */
.designer__seitenleiste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.designer__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.designer__panel--offen {
  flex: 1;
}

.designer__panel-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.designer__panel:not(.designer__panel--offen) .designer__panel-kopf:hover {
  background: var(--flaeche-still);
}

.designer__panel--offen .designer__panel-kopf {
  cursor: default;
}

.designer__panel-pfeil {
  width: 12px;
  color: var(--text-leise);
}

.designer__panel-koerper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
}

/* Aufklappmenü „Anzeige“ in der Reiterzeile: hängt unter dem Knopf, rechtsbündig. */
.designer__menue {
  position: relative;
}

.designer__menue-fenster {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 280px;
  padding: 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}

.designer__menue-fenster .abschnitt-titel,
.designer__menue-fenster p {
  margin: 0;
}

.designer__palette-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.designer__mitte {
  display: flex;
  flex-direction: column;
  gap: 16px; /* wie der Abstand zur rechten Spalte */
  height: 100%;
  min-width: 0;
}

/* Den Abstand setzt allein die Lücke; ein leerer Hinweisstreifen soll keine zweite erzeugen. */
.designer__mitte > .designer__reiter {
  margin-bottom: 0;
}

.designer__mitte > .designer__hinweise:empty {
  display: none;
}

.designer-palette__knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.designer-palette__knopf:hover:not(:disabled) {
  background: var(--flaeche-still);
  border-color: var(--linie);
}

.designer-palette__knopf:disabled {
  color: var(--text-still);
  cursor: not-allowed;
}

.designer-palette__glyph {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-flex;
  color: var(--text-leise);
}

.designer-palette__glyph svg {
  width: 100%;
  height: 100%;
}

.designer__reiter,
.seiten-reiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.reiter-knopf {
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-leise);
}

.reiter-knopf[aria-current="true"] {
  background: var(--akzent-leise);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.designer__hinweise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.designer__hinweis {
  padding: 4px 8px;
  border: 1px solid var(--mittel);
  border-radius: 999px;
  background: var(--mittel-leise);
  color: var(--mittel);
  font-size: 12px;
  cursor: pointer;
}

/* Vorschau mit Musterdaten: nur die Mitte, ohne die rechte Spalte. */
.designer--vorschau {
  grid-template-columns: minmax(0, 1fr);
}

.designer__vorschau-huelle {
  margin: 0 auto;
  overflow: hidden;
}

.designer__vorschau {
  display: block;
  border: 0;
  background: transparent;
  transform-origin: 0 0;
}

.designer__blattrahmen {
  flex: 1;
  overflow: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
}

.designer__blatt {
  position: relative;
  width: 100%;
  background: #fff;
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}

/*
 * Hilfslinien (DIN-5008-Ränder, Adressfenster, Falz-/Lochmarke): nur zur Orientierung,
 * nie anklickbar. Das Blatt bleibt in beiden Darstellungen weiß, daher feste Farben.
 */
.designer__hilfslinie {
  position: absolute;
  pointer-events: none;
  border: 0 dashed #1f6a9c;
  color: #1f6a9c;
  font-size: 10px;
  line-height: 1;
}

.designer__hilfslinie span {
  position: absolute;
  padding: 1px 3px;
  background: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.designer__hilfslinie--x {
  top: 0;
  bottom: 0;
  border-left-width: 1px;
}

.designer__hilfslinie--x span {
  top: 2px;
  left: 2px;
}

.designer__hilfslinie--y {
  left: 0;
  right: 0;
  border-top-width: 1px;
}

.designer__hilfslinie--y span {
  top: 2px;
  right: 2px;
}

.designer__hilfslinie--rahmen {
  border-width: 1px;
  background: rgba(42, 127, 184, 0.06);
}

.designer__hilfslinie--rahmen span {
  right: 2px;
  bottom: 2px;
}

.designer__textbereich {
  position: absolute;
  border: 1px dashed var(--linie-kraeftig);
  background: rgba(74, 93, 120, 0.03);
}

.designer__textbereich-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  color: var(--text-still);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.designer__element {
  position: absolute;
  border: 1px solid transparent;
  overflow: visible;
  cursor: move;
  min-height: 8px;
}

/*
 * Gerätetyp-Wähler (Geräteliste / Einsatzzeiten): schmale Liste mit Suche
 * links, Kennzahlen rechts — wie der Designer nebenan, nur zwei statt drei
 * Spalten. Mehr als ein Häkchen zeigt rechts den Vergleich statt der
 * Einzelansicht.
 */
.typ-waehler {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
}

.typ-waehler__spalte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-right: 1px solid var(--linie);
  align-self: stretch;
}

.typ-waehler__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 560px;
  overflow-y: auto;
}

.typ-waehler__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-klein);
  font-size: 13px;
  cursor: pointer;
}

.typ-waehler__zeile input {
  width: auto;
}

.typ-waehler__zeile:hover {
  background: var(--flaeche-still);
}

.typ-waehler__zeile--aktiv {
  background: var(--akzent-leise);
  color: var(--akzent-text);
  font-weight: 600;
}

.typ-waehler__inhalt {
  min-width: 0;
}

@media (max-width: 720px) {
  .typ-waehler {
    grid-template-columns: minmax(0, 1fr);
  }

  .typ-waehler__spalte {
    border-right: none;
    border-bottom: 1px solid var(--linie);
  }

  .typ-waehler__liste {
    max-height: 220px;
  }
}

.designer__element:hover {
  border-color: var(--linie-kraeftig);
}

.designer__element--ausgewaehlt {
  border: 1px solid var(--akzent) !important;
  box-shadow: 0 0 0 1px var(--akzent);
  z-index: 5;
}

.designer__element--faltmarken {
  cursor: move;
}

.designer__faltmarke2 {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid #999;
}

.designer__marke {
  display: inline-block;
  padding: 2px 5px;
  border: 1px dashed var(--linie-kraeftig);
  border-radius: 4px;
  color: var(--text-still);
  font-size: 10px;
  white-space: nowrap;
}

.designer__griff {
  position: absolute;
  background: var(--akzent);
  opacity: 0;
}

.designer__element--ausgewaehlt .designer__griff,
.designer__textbereich:hover .designer__griff {
  opacity: 1;
}

.designer__griff--ecke {
  width: 9px;
  height: 9px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  cursor: nwse-resize;
}

.designer__griff--rechts {
  width: 6px;
  top: 0;
  bottom: 0;
  right: -3px;
  cursor: ew-resize;
}

.designer__griff--n,
.designer__griff--s {
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
}

.designer__griff--n {
  top: -3px;
}

.designer__griff--s {
  bottom: -3px;
}

.designer__griff--w,
.designer__griff--e {
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
}

.designer__griff--w {
  left: -3px;
}

.designer__griff--e {
  right: -3px;
}

/* ------------------------------------------------------ Kennzahl-Kacheln */

.dashboard-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.dashboard-raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kennzahl-kachel {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

.kennzahl-kachel:hover {
  border-color: var(--linie-kraeftig);
}

.kennzahl-kachel--aktiv {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}

.kennzahl__wert--leer {
  color: var(--text-still);
}

.kennzahl__wert--gut {
  color: var(--gut);
}

.kennzahl__wert--mittel {
  color: var(--mittel);
}

.kennzahl__wert--schlecht {
  color: var(--schlecht);
}

.kennzahl-kachel__spark {
  margin: 6px 0 2px;
  line-height: 0;
}

.kennzahl__vergleich {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-leise);
}

.kennzahl__vergleich--klein {
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-still);
}
/* ------------------------------------------------------ Bewegung sparsam */

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die
 * Uebergaenge der Schale (Navigation, Benutzerkarte, aufklappendes Menue)
 * ohne Animation — die Zustaende selbst bleiben unveraendert.
 */
@media (prefers-reduced-motion: reduce) {
  .nav-knopf,
  .nav-symbol,
  .benutzer__knopf,
  .schiene__nur-offen,
  .seitenleiste {
    transition: none;
  }
}

/* ------------------------------------------------------ Mandantenwechsler */

/*
 * Steht dauerhaft rechts im Seitenkopf: wer Buecher fuer zwei Unternehmen
 * fuehrt, muss auf jeder Seite sehen, in wessen Buechern er gerade ist.
 * Bewusst als Marke gestaltet (Akzentflaeche), nicht als beliebiges Feld.
 */
.mandant-wahl {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--knopf-hoehe);
  padding: 0 14px;
  border-radius: var(--knopf-radius);
  background: light-dark(#111111, #2a2a27);
  color: #ffffff;
  font-weight: 650;
  white-space: nowrap;
  /* Native Auswahlpfeile und Listen passend zum dunklen Chip. */
  color-scheme: dark;
}

.mandant-wahl::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--akzent);
}

.mandant-wahl__auswahl option {
  background: #ffffff;
  color: #111111;
}

.mandant-wahl__auswahl {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0 4px 0 0;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
}

.mandant-wahl__auswahl:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- Verleih */
/*
 * Nur, was die übrigen Abschnitte nicht schon können: der Belegungsplan
 * (modules/verleih/ui/belegungsplanSeite.js) und Kleinigkeiten in Reservierungsdialog
 * und Gerätestamm. Farben ausnahmslos aus den Variablen oben, damit alle
 * Farbschemata stimmen.
 */
/* Belegungsplan */
/* Der Plan scrollt selbst in beide Richtungen: `overflow-x` macht ihn zum
 * Scrollbereich, und nur dann bleibt der Tageskopf (sticky) beim Scrollen stehen. */
.vplan { overflow: auto; max-height: max(320px, calc(100dvh - 250px)); padding: 0 0 8px; }
.vplan__gruppe { min-width: fit-content; }
.vplan__zeile {
  display: grid;
  grid-template-columns: 178px repeat(var(--vplan-tage), minmax(30px, 1fr));
  grid-auto-rows: 44px;
  min-width: calc(178px + var(--vplan-tage) * 30px);
  border-bottom: 1px solid var(--linie);
}
.vplan__gruppe > .vplan__zeile:last-child { border-bottom: 0; }
.vplan__zeile--kopf { grid-auto-rows: 58px; position: sticky; top: 0; z-index: 3; background: var(--flaeche); border-bottom: 1px solid var(--linie-kraeftig); }
.vplan__kopfzelle {
  grid-column: 1; position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center; padding: 0 18px;
  background: var(--flaeche); border-right: 1px solid var(--linie);
}
.vplan__name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 0.9rem; min-width: 0; }
.vplan__name .klein { font-weight: 400; color: var(--text-still); }
.vplan__tagkopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.72rem; color: var(--text-still); }
.vplan__tagkopf strong { min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; display: grid; place-items: center; font-size: 0.86rem; font-weight: 650; color: var(--text); }
.vplan__gruppentitel {
  position: sticky; left: 0; padding: 16px 18px 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-leise);
}
/* Nur waagerechte Linien — senkrechte Zellkanten machten das Raster unruhig. */
.vplan__tag { border: 0; background: transparent; padding: 0; cursor: cell; }
.vplan__tag:disabled { cursor: default; }
.vplan__tag:not(:disabled):hover { background: var(--akzent-leise); }
.vplan__tag--wochenende { background: var(--wochenende); }
.vplan__tagkopf.vplan__tag--wochenende { background: transparent; }
/* Heute: purpurne Tageszahl im Kopf, heller purpurner Streifen durch die Zeilen. */
.vplan__tag--heute, .vplan__tag--heute.vplan__tag--wochenende { background: var(--heute-tint); }
.vplan__tagkopf.vplan__tag--heute { background: transparent; color: var(--text); font-weight: 650; }
.vplan__tagkopf.vplan__tag--heute strong { background: var(--akzent); color: var(--akzent-auf); }

.vplan__balken {
  z-index: 1; margin: 5px 2px; padding: 0 10px; min-width: 0;
  border: 0; border-left: 4px solid transparent; border-radius: var(--radius-klein);
  font: inherit; font-size: 0.78rem; font-weight: 600; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.vplan__balken:hover { filter: brightness(0.97); box-shadow: var(--schatten); }
/* Muster der Legende: steht VOR den Farbklassen, damit deren Randfarbe gewinnt. */
.vplan__muster { width: 18px; height: 12px; border-radius: 3px; border: 0; border-left: 4px solid transparent; display: inline-block; }
/* Status als Streifen links: angefragt gestrichelt, bestaetigt purpur, ausgegeben gruen, ueberfaellig rot. */
.vplan__balken--angefragt { background: var(--flaeche); color: var(--text-leise); border: 1.5px dashed var(--text-still); border-left: 4px solid var(--text-still); }
.vplan__balken--bestaetigt { background: var(--akzent-leise); color: var(--akzent-text); border-left-color: var(--akzent); }
.vplan__balken--ausgegeben { background: var(--gut-leise); color: var(--gut); border-left-color: var(--gut); }
.vplan__balken--ueberfaellig { background: var(--schlecht-leise); color: var(--schlecht); border-left-color: var(--schlecht); }
.vplan__balken--zurueckgegeben { background: var(--flaeche-still); color: var(--text-leise); border-left-color: var(--mittel); }
.vplan__balken--abgerechnet { background: var(--flaeche-still); color: var(--text-still); border-left-color: var(--linie-kraeftig); }
.vplan__balken--sperre {
  color: var(--text-leise); border-left-color: var(--linie-kraeftig);
  background: repeating-linear-gradient(135deg, var(--flaeche-still) 0 6px, var(--linie) 6px 8px);
}
.vplan__balken--konflikt { outline: 2px solid var(--schlecht); outline-offset: -1px; }

.vplan__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; font-size: 0.78rem; color: var(--text-leise); border-top: 1px solid var(--linie); }
.vplan__legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }

/* Zwei-Klick-Auswahl: Starttag kräftig, der Bereich bis zum Mauszeiger hell. Steht nach den Tag-Regeln, damit es Wochenende/heute überdeckt. */
.vplan__tag.vplan__tag--auswahl:not(:disabled) { background: var(--akzent-leise); }
.vplan__tag.vplan__tag--start:not(:disabled) { background: var(--akzent); }
.vplan__hinweis {
  flex: 1; min-width: 0; padding: 0 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 0.82rem; color: var(--text-leise);
}
.vplan__hinweis[hidden] { display: none; }

/* Reservierungsdialog */
.verleih-exemplare { display: flex; flex-wrap: wrap; gap: 8px; }
.verleih-exemplar {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); cursor: pointer; font-weight: 600;
}
.verleih-exemplar .klein { font-weight: 400; color: var(--text-still); }
.verleih-exemplar:has(input:checked) { border-color: var(--akzent); background: var(--akzent-leise); }
.verleih-exemplar--belegt { opacity: 0.6; border-style: dashed; }

/*
 * Reservierungsdialog im Vollbild (Entwurf: app-cockpit/entwuerfe/reservierung-vollbild.html).
 * Oben der Kopf mit drei Eckdaten, links der Ablauf mit allen Schritten, rechts nur der
 * gewählte Schritt, unten ein fester Fuß. Gescrollt wird nur Ablauf und Inhalt.
 * Purpur nur als Fläche („als Nächstes"), nie als Textfarbe; grün und bernstein sind Status.
 */
dialog.dialog--voll {
  position: fixed; inset: 0; margin: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  border-radius: 0; box-shadow: none; background: var(--grund);
}
dialog.dialog--voll[open] { display: flex; }
dialog.dialog--voll > form { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }

.res-kopf { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding: 8px 24px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
/* Name und Status-Marken in einer Zeile — der Kopf bleibt niedrig, der Platz rechts wird genutzt */
.res-kopf__titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.res-kopf__name { margin: 0; font-family: var(--schrift-anzeige); font-weight: var(--anzeige-gewicht); font-size: 20px; line-height: 1.15; }
.res-kopf__titel > .reihe { gap: 8px; }
.res-fakten { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.res-fakt__name { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); }
.res-fakt__wert { font-weight: 600; }
.res-zu {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); background: var(--flaeche); color: var(--text);
}
.res-zu:hover { background: var(--flaeche-schwebend); }
.res-zu:focus-visible, .res-schritt:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.res-zu .knopf-symbol { display: inline-flex; }
.res-zu svg { width: 18px; height: 18px; }

.res-rumpf { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); }

/* ---- Links: der Ablauf ---- */
.res-ablauf { overflow-y: auto; display: flex; flex-direction: column; padding: 14px 14px 14px 18px; background: var(--flaeche-still); border-right: 1px solid var(--linie); }
.res-ablauf ol { list-style: none; margin: 0; padding: 0; }
.res-ablauf__gruppe { margin: 10px 0 2px 44px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-still); }
.res-ablauf__gruppe:first-child { margin-top: 0; }
.res-ablauf__trenner { height: 1px; margin: 12px 6px 8px; background: var(--linie); }

.res-schritt {
  position: relative; display: flex; gap: 12px; width: 100%; padding: 6px 10px 6px 6px; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.res-schritt:hover { background: var(--flaeche-schwebend); }
/* Verbindungslinie zwischen den Kreisen */
.res-schritt::before { content: ""; position: absolute; left: 21px; top: 34px; bottom: -8px; width: 2px; background: var(--linie-kraeftig); opacity: 0.55; }
.res-ablauf li:last-child > .res-schritt::before { display: none; }
.res-schritt--fertig::before { background: var(--gut); opacity: 1; }

.res-nr {
  position: relative; z-index: 1; flex: none; width: 28px; height: 28px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 50%; border: 2px dashed var(--linie-kraeftig); background: var(--flaeche-still); color: var(--text-still); font-weight: 700; font-size: 13px;
}
.res-nr .knopf-symbol { display: inline-flex; }
.res-nr svg { width: 15px; height: 15px; }
.res-schritt--fertig .res-nr { border: 2px solid var(--gut); background: var(--gut); color: var(--flaeche); }
.res-schritt--teilweise .res-nr { border: 2px solid var(--mittel); background: var(--mittel-leise); color: var(--mittel); }
.res-schritt--abgebrochen .res-nr { border: 2px solid var(--schlecht); background: var(--schlecht-leise); color: var(--schlecht); }
.res-schritt--aktuell .res-nr { border: 2px solid var(--akzent); background: var(--akzent); color: var(--akzent-auf); }
.res-schritt--verlauf .res-nr { border-style: solid; }

.res-schritt__text { display: block; min-width: 0; padding-top: 1px; }
.res-schritt__titel { display: block; font-weight: 600; line-height: 1.25; }
.res-schritt__sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-leise); overflow-wrap: anywhere; }
/* ausgegraut: nicht oder noch nicht gemacht */
.res-schritt--offen .res-schritt__titel { font-weight: 500; color: var(--text-still); }
.res-schritt--offen .res-schritt__sub { color: var(--text-still); opacity: 0.85; }
.res-schritt__naechster {
  display: inline-block; margin-left: 6px; padding: 0 5px; vertical-align: 1px; border-radius: 3px;
  background: var(--akzent); color: var(--akzent-auf); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
/* der Schritt, den man rechts gerade sieht */
.res-schritt[aria-current="step"] { background: var(--flaeche); border-color: var(--linie-kraeftig); box-shadow: var(--schatten); }
.res-schritt[aria-current="step"]::after { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--text); }
.res-schritt[aria-current="step"] .res-schritt__titel { font-weight: 700; color: var(--text); }

.res-legende { margin-top: auto; padding: 14px 6px 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--text-leise); }
.res-legende span { display: flex; align-items: center; gap: 8px; }
.res-punkt { flex: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px dashed var(--linie-kraeftig); }
.res-punkt--fertig { background: var(--gut); border: 2px solid var(--gut); }
.res-punkt--teilweise { background: var(--mittel-leise); border: 2px solid var(--mittel); }
.res-punkt--aktuell { background: var(--akzent); border: 2px solid var(--akzent); }
@media (max-height: 940px) and (min-width: 961px) { .res-legende { display: none; } }

/* ---- Rechts: der Schritt ---- */
.res-inhalt { overflow-y: auto; min-width: 0; padding: 28px 40px 36px; }
.res-blatt { max-width: 780px; }
.res-blatt--breit { max-width: 1280px; }
.res-blatt__kicker { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); }
.res-blatt__titel { margin: 0; font-family: var(--schrift-anzeige); font-weight: var(--anzeige-gewicht); font-size: 28px; line-height: 1.1; }
.res-blatt__text { max-width: 62ch; margin: 6px 0 0; color: var(--text-leise); }
/* Überschrift links, Stand des Schritts (Erledigt / offen) rechts oben daneben — spart eine Zeile */
.res-blatt__kopf { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px; }
.res-blatt__kopf-titel { flex: 1 1 320px; min-width: 0; }
.res-stand { flex: 0 1 280px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.res-stand:empty { display: none; }
/* Karten eines Schritts stehen mit gleichem Abstand untereinander; leere Platzhalter fallen weg. */
.res-panel, .res-stapel { display: flex; flex-direction: column; gap: 14px; }
.res-panel[hidden] { display: none; }
.res-panel > :empty, .res-stapel:empty { display: none; }
.res-panel .feld { margin-bottom: 0; }
.res-karte > * + .feld, .res-karte > .feld + .res-haken { margin-top: 12px; }

.res-karte { padding: 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.res-karte__titel { margin-bottom: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-still); }
.res-raster { display: grid; gap: 14px; }
.res-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.res-raster--plz { grid-template-columns: 130px minmax(0, 1fr); }
.res-breit { grid-column: 1 / -1; }
.res-raster > .feld__hinweis { margin: 0; }

.res-haken { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; }
.res-haken[hidden] { display: none; }
.res-haken input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--text); }
.res-haken small { display: block; font-size: 13px; color: var(--text-leise); }
.res-haken + .res-haken { margin-top: 8px; }
.res-nachtrag { margin: 10px 0 0; font-size: 13.5px; color: var(--text-leise); }

.res-aktion { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 18px; border: 1px dashed var(--linie-kraeftig); border-radius: var(--radius); background: var(--flaeche-still); }
.res-aktion__text { flex: 1 1 220px; font-size: 14px; color: var(--text-leise); }

/* Geräte und Preis */
.res-positionen { display: flex; flex-direction: column; gap: 10px; }
.res-position { padding: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.res-position__kopf { display: flex; align-items: flex-end; gap: 12px; }
.res-position__geraet { flex: 0 1 320px; min-width: 0; }
.res-position__betrag { flex: 1 1 0; min-width: 0; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.res-position__summe { font-weight: 650; }
.res-position__rechnung { font-size: 0.8rem; color: var(--text-leise); }
.res-position__kopf .knopf--glyph { margin-bottom: 2px; }
.res-position__kopf + .stapel { margin-top: 12px; }
.res-preis__summe { font-size: 1.15rem; font-weight: 650; }
.res-preis__hinweis { margin-top: 10px; }
.res-preis__hinweis:empty { display: none; }
.res-zeitraum__text { margin-top: 14px; font-weight: 600; }
.res-zeitraum__text:empty { display: none; }

.res-tabelle { width: 100%; border-collapse: collapse; }
.res-tabelle td { padding: 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.res-tabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-tabelle tr:last-child td { padding-top: 12px; border-bottom: 0; font-weight: 700; }
.res-tabelle small { display: block; font-weight: 400; color: var(--text-leise); }
.res-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 0; }
.res-liste dt { color: var(--text-leise); }
.res-liste dd { margin: 0; font-weight: 600; }

/* Mietvertrag: links die Vorschau (die Blätter des Vertrags), rechts die Leiste mit Drucken, Fassungen und Scan */
.res-vertraege { display: flex; flex-direction: column; gap: 28px; }
.res-vertragskarte > .stapel { gap: 12px; }
.res-vertrag { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.res-vertrag__vorschau {
  display: block; width: 100%; height: max(520px, calc(100vh - 330px)); box-sizing: border-box;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); background: var(--flaeche-still);
}
.res-vertrag__seite { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.res-vertrag__seite .res-karte > p { margin: 0 0 8px; }
/* Kartenkopf: Titel links, Symbolknöpfe (Drucken, auf Papier vermerken) rechts */
.res-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.res-karte__kopf > .res-karte__titel { margin-bottom: 0; }
.res-vertrag__aktionen { display: flex; gap: 8px; }
/* Ablagefeld für den unterschriebenen Vertrag, direkt unter der Karte */
.res-vertrag__zone { min-height: 96px; }
.res-vertrag__zone .datei-zone__inhalt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.res-vertrag__zone .knopf { display: inline-flex; align-items: center; gap: 8px; }
.res-vertrag__seite .tabelle-rahmen { margin: 0; }
@media (max-width: 1100px) {
  .res-vertrag { grid-template-columns: minmax(0, 1fr); }
  .res-vertrag__vorschau { height: 60vh; }
}

/* Prüfliste: Mietvertrag, Rechnung, Zahlung */
.res-pruefliste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.res-pruefliste li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.res-pruefliste__text { flex: 1 1 200px; min-width: 0; }
.res-pruefliste small { display: block; color: var(--text-leise); font-size: 13px; }
.res-pruefliste__hinweis { color: var(--mittel); }
.res-haken-kreis { flex: none; width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; border: 2px dashed var(--linie-kraeftig); }
.res-haken-kreis .knopf-symbol { display: inline-flex; }
.res-haken-kreis svg { width: 13px; height: 13px; }
.res-pruefliste__ok .res-haken-kreis { border: 2px solid var(--gut); background: var(--gut); color: var(--flaeche); }

/* ---- Fuß ---- */
.res-fuss { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 24px; background: var(--flaeche); border-top: 1px solid var(--linie); }
.res-fuss__mitte { margin: 0 auto; font-size: 13px; color: var(--text-leise); }

/* ---- schmal (Tablet hochkant, Handy): der Ablauf wird zum Streifen oben ---- */
@media (max-width: 960px) {
  .res-rumpf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .res-ablauf { flex-direction: row; gap: 4px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--linie); }
  .res-ablauf__gruppe, .res-ablauf__trenner, .res-legende { display: none; }
  .res-ablauf ol { display: contents; }
  .res-ablauf li { flex: none; }
  .res-schritt { width: auto; align-items: center; padding: 6px 12px 6px 6px; }
  .res-schritt::before, .res-schritt[aria-current="step"]::after, .res-schritt__sub, .res-schritt__naechster { display: none; }
  .res-inhalt { padding: 20px 16px 28px; }
  .res-fakten { order: 3; width: 100%; }
  .res-stand { flex-basis: 100%; align-items: flex-start; text-align: left; }
  .res-raster--2, .res-raster--3 { grid-template-columns: minmax(0, 1fr); }
  .res-position__kopf { flex-wrap: wrap; }
  .res-position__betrag { flex-basis: 100%; order: 3; text-align: left; margin-left: 0; }
  .res-fuss__mitte { display: none; }
  .res-fuss { padding: 12px 16px; }
}

/* Zeitstrahl der Reservierung: Protokoll (Ist) oben, offene Schritte (Soll) darunter */
.verleih-zeitstrahl { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 0.9rem; }
.verleih-zeitstrahl__punkt {
  position: relative; padding: 4px 0 8px 22px; color: var(--text-leise);
  border-left: 2px solid var(--linie-kraeftig); margin-left: 6px;
}
.verleih-zeitstrahl__punkt::before {
  content: ''; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; background: var(--akzent); border: 2px solid var(--flaeche);
}
.verleih-zeitstrahl__punkt--aktion::before { border-radius: 3px; background: var(--akzent-text); }
.verleih-zeitstrahl__punkt--soll { border-left-style: dashed; }
.verleih-zeitstrahl__punkt--soll::before { background: var(--flaeche); border: 2px dashed var(--linie-kraeftig); }
.verleih-zeitstrahl__punkt--naechster::before { border: 2px solid var(--akzent); }
.verleih-zeitstrahl__punkt--ueberfaellig::before { border-color: var(--schlecht); }
.verleih-zeitstrahl__punkt:last-child { border-left-color: transparent; padding-bottom: 0; }
.verleih-zeitstrahl__text { color: var(--text); font-weight: 600; }
.verleih-zeitstrahl__punkt--soll .verleih-zeitstrahl__text { font-weight: 400; }
.verleih-zeitstrahl__punkt--naechster .verleih-zeitstrahl__text { font-weight: 600; }
.verleih-zeitstrahl__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* Gerätestamm */
.verleih-preise { display: flex; flex-wrap: wrap; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.verleih-preise span { white-space: nowrap; }

/* Gerätebild: Vorschau in der Liste und Bildauswahl im Gerätetyp-Dialog */
.geraetebild {
  display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: var(--radius-klein);
  background: var(--flaeche-still); border: 1px solid var(--linie);
}
.geraetebild--gross { width: 88px; height: 88px; }
.geraetebild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.geraetebild__platzhalter { color: var(--text-still); font-weight: 600; font-size: 1.1em; }
.geraet-zeile { display: flex; align-items: center; gap: 12px; }
/* Steckbrief im Seitenpanel: Titelbild groß, die weiteren Bilder als Raster darunter */
.bilder-titel { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-still); overflow: hidden; }
.geraetebild--titel { display: flex; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.geraetebild--titel .geraetebild__platzhalter { font-size: 4rem; }
.bilder-titel__leiste { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.bilder-titel__leiste .bilder-gewaehlt__name { flex: 1; min-width: 0; text-align: left; }
.bilder-titel__leer { margin: 0; padding: 8px 10px; border-top: 1px solid var(--linie); background: var(--flaeche); }
/* Ablage für Bilder vom Rechner: ganzes Fenster nimmt Dateien an, die linke Spalte zeigt es beim Ziehen */
.bild-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px; border: 1.5px dashed var(--linie-kraeftig); border-radius: var(--radius); background: var(--flaeche-still); }
.steckbrief__bilder--ueber .bild-ablage { border-color: var(--akzent); background: var(--akzent-leise); }
.steckbrief__bilder--ueber .bilder-titel { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bilder-weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bilder-weitere .bilder-gewaehlt__eintrag { width: auto; min-width: 0; }
.bilder-weitere .geraetebild--gross { width: 100%; height: auto; aspect-ratio: 1; }
.bilder-gewaehlt { display: flex; flex-wrap: wrap; gap: 10px; }
.bilder-gewaehlt__eintrag {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 8px 6px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
.bilder-gewaehlt__eintrag--titel { border-color: var(--akzent); background: var(--akzent-leise); }
.bilder-gewaehlt__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--text-leise); }
.bilder-gewaehlt__knoepfe { display: flex; gap: 4px; }
.bilder-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding: 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-still); }
.bilder-wahl__bild {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; cursor: pointer;
  font: inherit; color: var(--text-leise); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.bilder-wahl__bild:hover, .bilder-wahl__bild:focus-visible { border-color: var(--akzent); }
.bilder-wahl__bild span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; }
.bilder-wahl__bild--vergeben { border-color: var(--mittel); }
/* Hover-Info für Marke/Modellbezeichnung am Exemplar-Knopf der Geräteliste (Issue #82) */
.exemplar-info { position: relative; display: inline-flex; }
.exemplar-info__box {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 2; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.12s ease;
  padding: 6px 10px; font-size: 12px; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.exemplar-info:hover .exemplar-info__box,
.exemplar-info:focus-within .exemplar-info__box { opacity: 1; }

/* Warnzeichen: Bild gehört schon einem anderen Gerätetyp (Issue #100) */
.bilder-wahl__miniatur { position: relative; display: inline-flex; }
.bilder-wahl__hinweis {
  position: absolute; top: -5px; right: -5px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--mittel); border: 1.5px solid var(--flaeche);
}
.bilder-wahl__hinweis svg { width: 11px; height: 11px; fill: none; stroke: var(--flaeche); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------- Liniendiagramm */

.diagramm { position: relative; }
.diagramm svg { display: block; width: 100%; height: auto; }
.diagramm__legende { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-leise); }
.diagramm__legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.diagramm__punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.diagramm__raster { stroke: var(--linie-kraeftig); stroke-width: 1; }
.diagramm__fadenkreuz { stroke: var(--text-still); stroke-width: 1; }
.diagramm__achse { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; fill: var(--text-leise); }
.diagramm__linie { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.diagramm__markierung { fill: var(--flaeche); stroke-width: 2.5; }
.diagramm__legende { font-size: 13px; font-weight: 500; color: var(--text); }
.diagramm__punkt { width: 10px; height: 10px; }
.diagramm__tooltip {
  position: absolute; top: 28px; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 8px 10px; font-size: 12px; background: var(--flaeche); border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.diagramm__tooltip[hidden] { display: none; }
.diagramm__tooltip-monat { margin-bottom: 4px; font-weight: 600; }
.diagramm__tooltip-zeile { display: flex; align-items: center; gap: 6px; }
.diagramm__tooltip-zeile strong { margin-left: auto; padding-left: 12px; font-weight: 600; }

/* Der Plan ist 960 Einheiten breit und schrumpft auf dem Handy auf etwa 40 %: Die Achsenschrift wird dort größer, damit sie lesbar bleibt. */
@media (max-width: 640px) {
  .diagramm__achse { font-size: 22px; }
}

/* Kacheln im Raster liegen nebeneinander, nicht untereinander — kein Abstand von .karte + .karte. */
.raster > .karte + .karte { margin-top: 0; }

.raster--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ------------------------------------------- Rechnung erfassen: Beleg, Lieferant */

/* Vorschau im Erfassungsdialog: ein Klick öffnet den Beleg groß. */
.beleg-vorschau {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.beleg-vorschau:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.beleg-vorschau__hinweis {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 11.5px;
  opacity: 0;
  transition: opacity 0.12s;
}

.beleg-vorschau:hover .beleg-vorschau__hinweis,
.beleg-vorschau:focus-visible .beleg-vorschau__hinweis {
  opacity: 1;
}

/* Große Belegansicht: fast der ganze Bildschirm, gescrollt wird nur die Bühne. */
dialog.dialog--beleg {
  max-width: min(1200px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  max-height: none;
  flex-direction: column;
  overflow: hidden;
}

dialog.dialog--beleg[open] {
  display: flex;
}

.dialog__kopf--leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.dialog__kopf--leiste .dialog__titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beleg-gross__rahmen {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--flaeche-still);
}

.beleg-gross__buehne {
  margin: 0 auto;
}

.beleg-gross__seite {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--linie);
}

.beleg-gross__seite + .beleg-gross__seite {
  margin-top: 12px;
}

.beleg-gross__zoom {
  min-width: 3.5em;
  text-align: center;
}

.lieferant-suche > * + * {
  margin-top: 6px;
}

/* ------------------------------------------------ Kontierungszeilen (Eingangsrechnung) */

/* Eine Zeile = eine Karte: Konto, dann Steuerart → Satz → Betrag → MwSt, zuletzt Filiale und Text. */
.kontierzeile {
  padding: 12px 14px 4px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-still);
}

.kontierzeile + .kontierzeile {
  margin-top: 12px;
}

.kontierzeile__kopf {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.kontierzeile__kopf > .feld {
  flex: 1 1 auto;
  min-width: 0;
}

.kontierzeile__kopf > .knopf {
  flex: none;
  margin-bottom: 12px;
}

.kontierzeile__betraege {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) repeat(3, minmax(100px, 1fr));
  align-items: end;
  gap: 0 12px;
}

.kontierzeile__zusatz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 12px;
}

.kontierzeile__satz,
.kontierzeile__netto {
  background: transparent;
  border-style: dashed;
  color: var(--text-leise);
}

.kontierzeile__hinweis:empty {
  display: none;
}

.kontierzeile__hinweis {
  margin: -4px 0 10px;
}

@media (max-width: 640px) {
  .kontierzeile__betraege {
    grid-template-columns: 1fr 1fr;
  }
}

.kontierzeilen:empty {
  display: none;
}

/* ---------------------------------------------------------------- Zentrale */

/*
 * Wortmarke der Zentrale in der aufgeklappten Schiene. Das BVV-Cockpit zeigt
 * dort die gezeichnete BVV-Wortmarke; die Zentrale steht über den Projekten
 * und trägt darum ihren Namen in der Überschriftenschrift.
 */
.marke__wort {
  margin-left: 8px;
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--schiene-stark);
}

/* Kacheln im Raster stehen nebeneinander — der Abstand „Karte unter Karte" gilt dort nicht. */
.dashboard-raster > .karte {
  margin-top: 0;
}

/* ------------------------------------------------- Architektur: Projektfolie */
/* Nach raw/Zentrale-Aufbau.pptx: Zentrale als Band, darunter die Projekte mit Anschluss.
   Vier Spalten für die Projekte, eine schmale für AgenticOS, das hoch steht und das Band überlappt. */

.abschnitt__titel {
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 20px;
  margin: 0 0 6px;
}

/* Titel mit einem Werkzeug daneben (z. B. „Erneut prüfen"). */
.abschnitt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 6px;
}

.abschnitt__kopf > .abschnitt__titel {
  margin: 0;
}

.abschnitt__text {
  margin: 0 0 18px;
  color: var(--text-leise);
  max-width: 70ch;
}

.folie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr);
  grid-template-rows: auto 44px auto;
  column-gap: 16px;
  align-items: stretch;
}

.folie__zentrale {
  grid-column: 1 / 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 18px calc(18.4% + 16px) 18px 24px;
  border-radius: 18px;
  background: var(--schiene-bg);
  color: var(--schiene-stark);
  text-align: center;
}

.folie__zentrale-name {
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 26px;
  color: var(--akzent-hell);
}

.folie__zentrale-text {
  max-width: 60ch;
  font-size: 13px;
  color: var(--schiene-text);
}

.folie__leitung {
  grid-row: 2;
  justify-self: center;
  width: 2px;
  background: var(--linie-kraeftig);
}

.folie__kachel {
  grid-row: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px 12px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

/* Der Reiter ragt 16px über die Kachel; darunter braucht der Name seinen eigenen Platz. */
.folie__kachel--mit-tab {
  padding-top: 52px;
}

.folie__kachel--gewaehlt {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), var(--schatten);
}

.folie__tab {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70%;
  padding: 4px 8px;
  border: 1px solid var(--linie-kraeftig);
  border-radius: 8px;
  background: var(--flaeche);
  white-space: nowrap;
  z-index: 1;
}

.folie__tab-titel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.folie__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.folie__kopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 4px;
  border-radius: 6px;
}

.folie__name {
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 17px;
  line-height: 1.15;
}

.folie__untertitel {
  font-size: 12.5px;
  color: var(--text-leise);
}

.folie__ort {
  font-size: 12px;
  color: var(--text-still);
  line-height: 1.35;
}

.folie__oeffnen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
}

.folie__oeffnen .knopf {
  text-decoration: none;
}

.folie__oeffnen-text {
  font-size: 11.5px;
  color: var(--text-still);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.folie__os {
  grid-column: 5;
  grid-row: 1 / 4;
  display: flex;
  margin-top: 56px;
  z-index: 2;
}

.folie__os .folie__kachel {
  flex: 1;
  border-style: dashed;
  border-color: var(--linie-kraeftig);
  background: var(--flaeche-still);
}

.folie__os .folie__kachel--gewaehlt {
  border-style: solid;
  border-color: var(--akzent);
}

.folie__hinweis {
  margin: 14px 0 0;
  max-width: 90ch;
}

.folie__adresse {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .folie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    row-gap: 22px;
  }
  .folie__zentrale {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 18px 24px;
  }
  .folie__leitung { display: none; }
  .folie__kachel { grid-column: auto !important; grid-row: auto; }
  .folie__os { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}

@media (max-width: 560px) {
  .folie { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------ Architektur: Ablauf-Skizze */
/* Eine Kette von Stationen mit Pfeilen; Zentrale und Projekt unterscheiden sich im Kopfstreifen. */

.ablauf__wahl {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
}

.ablauf__reiter {
  height: var(--knopf-hoehe-klein);
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ablauf__reiter:hover { color: var(--text); background: var(--flaeche-schwebend); }

.ablauf__reiter--aktiv,
.ablauf__reiter--aktiv:hover {
  background: var(--akzent);
  color: var(--akzent-auf);
}

.ablauf__kurz {
  margin: 12px 0 18px;
  color: var(--text-leise);
}

.ablauf__kette {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ablauf__glied {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.ablauf__pfeil {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-still);
}

.ablauf__pfeil svg { width: 20px; height: 20px; }

.ablauf__station {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 12px 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--schatten);
}

.ablauf__station:hover { border-color: var(--linie-kraeftig); }

.ablauf__station:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.ablauf__station--gewaehlt,
.ablauf__station--gewaehlt:hover {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), var(--schatten);
}

.ablauf__station--geplant {
  border-style: dashed;
  background: var(--flaeche-still);
  box-shadow: none;
}

/* Kopfstreifen: Zentrale dunkel, Projekt hell — dieselbe Unterscheidung wie auf der Folie. */
.ablauf__ort {
  align-self: stretch;
  margin: 0 -12px 4px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ablauf__station--zentrale .ablauf__ort { background: var(--schiene-bg); color: var(--akzent-hell); }
.ablauf__station--projekt .ablauf__ort { background: var(--flaeche-schwebend); color: var(--text-leise); }

.ablauf__titel {
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 15px;
  line-height: 1.2;
}

.ablauf__text {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-leise);
  line-height: 1.4;
}

.ablauf__detail {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 8px;
  background: var(--flaeche);
}

.ablauf__detail p { margin: 8px 0 0; max-width: 80ch; }

.ablauf__detail-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ablauf__detail-titel {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-weight: var(--anzeige-gewicht);
  font-size: 17px;
}

.ablauf__hinweis { margin: 12px 0 0; }

@media (max-width: 1100px) {
  .ablauf__kette { flex-direction: column; gap: 0; }
  .ablauf__glied { flex: none; }
  .ablauf__pfeil { flex: 0 0 22px; transform: rotate(90deg); }
}

/* ====================================================================================== */
/* Projektmappe                                                                           */
/* ====================================================================================== */

/*
 * Gestaltung der handgepflegten Fragmente unter modules/projektmappe/inhalt/ und der Reiter Issues
 * und Ausbringung — aus der Ferienwohnung übernommen (dort Abschnitt „Projektmappe“, im BVV-Cockpit
 * eine nachgeladene Datei). Alles hängt unter `.pm`, damit die kurzen Klassennamen der Fragmente
 * (`.chip`, `.step`, `.stat` …) nirgends sonst wirken. Die Architekturzeichnung der Vorlage fehlt
 * absichtlich: die Zentrale zeigt ihre Architektur auf der Übersicht.
 */
.pm {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  padding-bottom: 48px;
}

.pm a { color: var(--akzent-text); }

.pm code.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  padding: 0 5px;
  border-radius: 4px;
}

.pm h1 { font-size: 26px; font-weight: 650; margin: 8px 0 6px; text-wrap: balance; }
.pm h2.h { font-size: 19px; font-weight: 650; margin: 40px 0 12px; scroll-margin-top: 16px; text-wrap: balance; }
.pm h3.h3 { font-size: 14.5px; font-weight: 650; margin: 20px 0 8px; }
.pm p { margin: 0 0 12px; max-width: 74ch; }
.pm .lede { font-size: 15.5px; color: var(--text-leise); max-width: 66ch; margin-bottom: 18px; }
.pm .muted { color: var(--text-still); }
.pm ul.list { margin: 0 0 14px; padding-left: 20px; max-width: 72ch; }
.pm ul.list li { margin-bottom: 6px; }

/* Link zur Homepage unter dem Einleitungssatz */
.pm .pm-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.pm .pm-aktionen a.knopf--haupt { color: var(--akzent-auf); text-decoration: none; }

/* Sprungleiste unter dem Einleitungssatz */
.pm-sprung { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }

/* Kennzahlkacheln */
.pm .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; }
.pm .stat {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--schatten);
}
.pm .stat .v { font-size: 26px; font-weight: 650; color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.pm .stat .l { font-size: 12.5px; color: var(--text-still); margin-top: 2px; }
@media (max-width: 900px) { .pm .stats { grid-template-columns: repeat(2, 1fr); } }

/* Status-Chips */
.pm .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 2px 9px;
  border-radius: 99px;
  line-height: 1.6;
}
.pm .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pm .chip.done { background: var(--gut-leise); color: var(--gut); }
.pm .chip.partial { background: var(--mittel-leise); color: var(--mittel); }
.pm .chip.open { background: var(--schlecht-leise); color: var(--schlecht); }
.pm .chip.neutral { background: var(--flaeche-still); color: var(--text-leise); border: 1px solid var(--linie); }
/* Lange Chip-Texte (Status mit Erklärung) dürfen umbrechen. Kein Flex: Sonst
   wird jedes <code>, <strong> und <a> im Text zu einer eigenen Spalte, die
   Tabelle wird breiter als ihr Rahmen und der Kopier-Knopf rutscht hinaus. */
.pm td .chip { display: inline-block; white-space: normal; border-radius: 12px; }
.pm td .chip::before { display: inline-block; vertical-align: 0.12em; margin-right: 5px; }
.pm td code { overflow-wrap: anywhere; }

/* Issue-Verweise */
.pm a.issue {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px dotted var(--linie-kraeftig);
  white-space: nowrap;
}
.pm a.issue:hover { border-bottom-style: solid; }
.pm .issues { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Hinweiskästen */
.pm .callout {
  border: 1px solid var(--linie-kraeftig);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-leise);
  border-radius: var(--radius-klein);
  padding: 13px 18px;
  margin: 16px 0;
}
.pm .callout.warn { border-left-color: var(--mittel); background: var(--mittel-leise); }
.pm .callout.gate { border-left-color: var(--schlecht); background: var(--schlecht-leise); }
.pm .callout p:last-child, .pm .callout ul:last-child { margin-bottom: 0; }
.pm .callout .t { font-weight: 650; margin-bottom: 4px; }
.pm .callout ul { margin: 6px 0 0; padding-left: 20px; max-width: 72ch; }
.pm .callout li { margin-bottom: 6px; }

/* Tabellen */
.pm .twrap { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-klein); margin: 14px 0 22px; background: var(--flaeche); }
.pm table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pm th, .pm td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.pm thead th {
  background: var(--flaeche-still);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-still);
  font-weight: 650;
}
.pm tbody tr:last-child td { border-bottom: none; }
.pm tbody tr:hover td { background: var(--flaeche-still); }
.pm td.num, .pm th.num { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm td.act, .pm th.act { width: 1%; white-space: nowrap; text-align: center; }

/* Fahrplan-Schritte */
.pm .stepper { display: flex; flex-direction: column; margin: 16px 0 8px; }
.pm .step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.pm .step .dot-col { display: flex; flex-direction: column; align-items: center; }
.pm .step .dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 650;
  border: 2px solid var(--linie-kraeftig); background: var(--flaeche); color: var(--text-still);
}
.pm .step .stem { width: 2px; flex: 1; min-height: 18px; margin-top: 2px; background: var(--linie); }
.pm .step:last-child .stem { display: none; }
.pm .step.done .dot { background: var(--gut); border-color: var(--gut); color: var(--flaeche); }
.pm .step.partial .dot { background: var(--mittel-leise); border-color: var(--mittel); color: var(--mittel); }
.pm .step .body { padding-bottom: 22px; min-width: 0; }
.pm .step .head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px;
  cursor: pointer; list-style: none;
}
.pm .step .head::-webkit-details-marker { display: none; }
.pm .step .head::before {
  content: ''; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--text-still);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.pm .step .body[open] > .head::before { transform: rotate(90deg); }
.pm .step .body:not([open]) { padding-bottom: 0; }
.pm .step .body:not([open]) .head { margin-bottom: 0; }
.pm .step .head:hover .ttl { text-decoration: underline; }
.pm .step .ttl { font-weight: 650; font-size: 14.5px; }
.pm .step .desc { font-size: 13.5px; color: var(--text-leise); max-width: 70ch; }
.pm .step .tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-still); }

/* Aufklappbarer Technik-&-Hosting-Punkt im Fahrplan */
.pm details.pm-details {
  margin-top: 10px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.pm .pm-details > summary {
  cursor: pointer;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--akzent-text);
}
.pm .pm-details[open] > summary { border-bottom: 1px solid var(--linie); }
.pm .pm-details__inhalt { padding: 4px 16px 12px; }
.pm .pm-details__inhalt .twrap { margin-bottom: 12px; }

/* Kopier-Knöpfe */
.pm .promptbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 650; line-height: 1.3;
  color: var(--akzent-text); background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig); border-radius: 7px; padding: 5px 10px;
}
.pm .promptbtn svg { width: 14px; height: 14px; flex: none; }
.pm .promptbtn .ic { display: inline-flex; }
.pm .promptbtn:hover { background: var(--akzent-leise); }
.pm .promptbtn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.pm .promptbtn.row { padding: 4px; border-color: transparent; background: none; }
.pm .promptbtn.row:hover { border-color: var(--linie-kraeftig); background: var(--akzent-leise); }
.pm .promptbtn.copied { color: var(--gut); border-color: var(--gut); background: var(--gut-leise); }

.pm .footnote { font-size: 12px; color: var(--text-still); margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linie); }

/* Mitschrift eines Ausbringungs-Auftrags (ausbringungSeite.js) */
.pm pre.pm-log {
  margin: 0 0 18px; padding: 12px 14px; max-height: 320px; overflow: auto;
  font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--flaeche-still); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Verweise in der Mappe sind als Verweise erkennbar (Token --verweis, wie in den anderen Cockpits). */
.pm a:not(.knopf):not(.issue) { color: var(--verweis); }

.pm .promptbtn .ic__bild { display: inline-flex; }