/*
 * Cockpit der Ferienwohnungssteuerung — Gestaltungsgrundlage.
 *
 * Aufbau, Maße, Schriften und Bausteine sind die des BVV-Cockpits (C:\Tools\BVV-Homepage,
 * app-cockpit/src/shared/ui/stil.css, Stand 2026-10-05): dunkle Symbolschiene links, fester Seitenkopf,
 * Karten, Knopf-System „Fingerbreit“. Eigen ist nur die Signalfarbe: Blau statt Baustellengelb.
 * Sie steht wie dort in `--akzent` und ist Fläche, Rahmen oder Markierung — Text auf ihr ist
 * `--akzent-auf`. Verweise im Fließtext nehmen `--verweis`. gestaltung.test.js bewacht die Kontraste.
 *
 * Die Farben, Schriften und die Tonalität der Ferienwohnung sind noch nicht festgelegt; wer sie
 * ändert, ändert die Variablen im ersten Block und im Abschnitt „Ferienwohnung“ am Ende.
 *
 * Schriften: Archivo Black (Überschriften) und Inter (Text), selbst gehostet unter schriften/
 * (SIL Open Font License, Lizenztexte daneben), nie von einem fremden Server.
 *
 * Handgeschrieben, 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 Blau — Flaeche, Rahmen, Markierung; Text darauf ist --akzent-auf */
  --akzent: light-dark(#1d4ed8, #2563eb);
  --akzent-dunkel: light-dark(#1e40af, #1d4ed8);
  --akzent-leise: light-dark(#e3ebfd, #1b2a4d);
  /* Text auf getoenten Flaechen und Hervorhebungen: Tinte, nie Gelb. */
  --akzent-text: light-dark(#111111, #f3f2ee);
  /* Text auf der Signalfarbe. */
  --akzent-auf: #ffffff;
  --akzent-schein: light-dark(rgba(17, 17, 17, 0.18), rgba(37, 99, 235, 0.3));
  /* Gelber Tagesstreifen im Kalender. */
  --heute-tint: light-dark(rgba(29, 78, 216, 0.1), rgba(37, 99, 235, 0.14));

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

  /* Schiene: dunkel in beiden Themes. Gelb 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: #8fb0ff;

  /* 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);

  /* 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;
}

/*
 * Warnband „lokale Instanz“: der Server setzt es nur auf lokalen Instanzen (nie im Image) als erstes
 * Element in die Schale und die Klasse `mit-lokalhinweis` an den body. Die Höhe steht in `--lokal-hoehe`;
 * die Vollhöhen-Flächen (.geruest, .anmeldung) ziehen sie ab, damit nichts darunter überläuft.
 */
:root { --lokal-hoehe: 0px; }
.mit-lokalhinweis { --lokal-hoehe: 30px; padding-top: var(--lokal-hoehe); }
.lokalhinweis {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: var(--lokal-hoehe);
  display: flex; align-items: center; justify-content: center; padding: 0 12px; overflow: hidden;
  background: var(--mittel-leise); color: var(--mittel);
  font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis;
  border-bottom: 2px solid var(--mittel);
}
.lokalhinweis { gap: 0.5em; }
.lokalhinweis a { color: inherit; text-decoration: underline; }
@media print { .lokalhinweis { display: none; } .mit-lokalhinweis { padding-top: 0; } }

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 gelber Balken wächst von links nach rechts, an seiner Spitze
 * läuft ein gelber Kreis mit Schraubenschlüssel mit. Gelb ist hier Fläche, das
 * Symbol Tinte (`--akzent-auf`) — nie Gelb 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: calc(100vh - var(--lokal-hoehe));
  height: calc(100dvh - var(--lokal-hoehe));
  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 var(--schatten-farbe-symbol));
  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 gelbe 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 gelbe 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: var(--bild-hinweis-grund);
  color: var(--text-auf-farbe);
  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: gelbe Flaeche, Tinte darauf (12,15: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 */

/*
 * Der Tabellenkopf bleibt immer sichtbar (Vorgabe von Marcel, wie im BVV-Cockpit). `overflow: auto`
 * macht den Rahmen zum eigenen Scrollbereich — ohne Hoehenbegrenzung scrollt aber nie er, sondern die
 * Buehne, und das `position: sticky` der Kopfzellen laeuft ins Leere. Darum bekommt der Rahmen eine
 * Maximalhoehe: lange Tabellen scrollen in sich, der Kopf steht oben fest. Kurze Tabellen bleiben so
 * hoch wie ihr Inhalt.
 */
.tabelle-rahmen {
  overflow: auto;
  max-height: max(320px, calc(100dvh - 220px));
}

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

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);
}

.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;
}

/*
 * 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: var(--zeilenhinweis);
}

.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 var(--knopf-kante);
}

.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"],
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 var(--schatten-farbe-banner);
}

.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 var(--linie-fein);
}

.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: var(--schleier);
}

.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;
  height: 100dvh;
  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: var(--schleier-seite);
  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: var(--papier);
  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: calc(100vh - var(--lokal-hoehe));
  min-height: calc(100dvh - var(--lokal-hoehe));
  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;
}

/* ------------------------------------------------- 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: var(--papier);
  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);
}

/*
 * Touch-Ziele (Skill baustein-gestaltung, cockpit-bausteine.md, Punkt 2): Mit Zeiger bleiben die Knöpfe
 * bei 36 px, damit das Cockpit am Rechner dicht bleibt; auf Geräten mit grobem Zeiger (Tablet, Handy)
 * und auf schmalen Bildschirmen sind alle Bedienziele mindestens 44 px. Nur die Maße ändern sich.
 */
@media (pointer: coarse), (max-width: 860px) {
  :root {
    --knopf-hoehe: 44px;
    --knopf-hoehe-klein: 36px;
    --knopf-hoehe-filter: 40px;
    --knopf-glyph: 44px;
  }

  .verlauf__knopf {
    width: 44px;
    height: 44px;
  }

  .seitenkopf__umschalter {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-knopf {
    min-height: 44px;
  }
}

/* Abgedunkelter Hintergrund hinter der geöffneten Schublade; Tippen darauf schließt sie. */
.schleier { display: none; }

@media (max-width: 860px) {
  .geruest[data-menue="offen"] .schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: var(--schleier);
  }

  /*
   * 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: var(--papier);
}

@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: var(--papier);
  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 var(--papier-hilfslinie);
  color: var(--papier-hilfslinie);
  font-size: 10px;
  line-height: 1;
}

.designer__hilfslinie span {
  position: absolute;
  padding: 1px 3px;
  background: var(--papier-hilfslinie-schild);
  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: var(--papier-hilfslinie-flaeche);
}

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

.designer__textbereich {
  position: absolute;
  border: 1px dashed var(--linie-kraeftig);
  background: var(--papier-textbereich);
}

.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 var(--papier-falzmarke);
}

.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: var(--mandant-grund);
  color: var(--text-auf-farbe);
  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: var(--papier);
  color: var(--papier-tinte);
}

.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: gelbe Tageszahl im Kopf, heller gelber 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 gelb, 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.
 * Gelb 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 var(--schatten-farbe-klein);
}
.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 var(--schatten-farbe-klein);
}
.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; }

/* 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);
  height: calc(100dvh - 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: var(--papier);
  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;
}

/* ====================================================================================== */
/* Ferienwohnung                                                                          */
/* ====================================================================================== */

/*
 * Alles oberhalb ist die Schale des BVV-Cockpits. Ab hier stehen die Regeln, die nur dieses Cockpit
 * braucht: Belegungsplan, Monatsraster, Einrichtungsassistent, Anmeldung, Formularbausteine aus
 * shared/ui/bausteine.js. Sie benutzen dieselben Variablen; was es oben nicht gibt, steht hier.
 */
:root {
  /* Verweise im Fließtext und Markierungen, die auf der Fläche lesbar sein müssen. */
  --verweis: light-dark(#1d4ed8, #8fb0ff);
  /* Fokusring auf farbigen Balken des Belegungsplans. */
  --fokus: light-dark(#b45309, #fbbf24);

  --schrift-fest: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --abstand: 16px;
  --abstand-klein: 8px;
  --abstand-gross: 24px;
  --lesebreite: 38rem;

  /* Zustände: Flächen und Schrift aus der Ampel der Schale, dazu „Info“ und „neutral“. */
  --info: light-dark(#1e3a8a, #c9dbff);
  --info-leise: light-dark(#e0edff, #172a52);
  --ok-grund: var(--gut-leise);       --ok-text: var(--gut);          --ok-rand: var(--gut);
  --warn-grund: var(--mittel-leise);  --warn-text: var(--mittel);     --warn-rand: var(--mittel);
  --fehler-grund: var(--schlecht-leise); --fehler-text: var(--schlecht); --fehler-rand: var(--schlecht);
  --info-grund: var(--info-leise);    --info-text: var(--info);       --info-rand: var(--info);
  --neutral-grund: var(--flaeche-still); --neutral-text: var(--text-leise); --neutral-rand: var(--linie-kraeftig);
  --gefahr-fuellung: light-dark(#b91c1c, #dc2626);
  --gefahr-text: var(--schlecht);

  /* Belegungsplan */
  --balken-hoehe: 2rem;
  /* Plan über alle Wohnungen: Breite der Datumsspalte und je Wohnungsspalte, Höhe einer halben Tageszeile */
  --datumbreite: 5.4rem;
  --spaltenbreite: 8.5rem;
  --halbzeile: 1.4rem;
  /* Kalender einer Wohnung: Höhe der Zeile mit der Tageszahl und Rand unter den Balken */
  --wkal-zahlenhoehe: 1.7rem;
  --wkal-rand: 0.4rem;
  --balken-eigen: light-dark(#1d4ed8, #2563eb);
  --balken-import: #0f766e;
  --balken-import-streifen: #0b5a54;
  --balken-sperr: light-dark(#3b4656, #5b6b80);
  --sperr-muster: 0.08;
  /* Zahl auf dem aktiven Menüpunkt: Signalfarbe als Schrift auf der hellen Zahlfläche. */
  --akzent-dunkel-text: #1e40af;
  --balken-anfrage-grund: light-dark(#fdf0d2, #3a2a08);
  --balken-anfrage-text: light-dark(#5c3203, #fde3a1);
  --balken-anfrage-rand: light-dark(#b45309, #fbbf24);
  --konflikt: #b91c1c;
  --konflikt-streifen: #7f1d1d;
  --konflikt-rand: #fbbf24;
  --heute: var(--akzent-leise);

  /*
   * Feste Farben, die dem Dunkelmodus mit Absicht NICHT folgen — jede mit Grund. Ausserhalb dieses
   * Blocks steht in dieser Datei kein Farbwert (gestaltung.test.js bewacht das).
   */
  /* Papier bleibt in beiden Darstellungen weiss: Briefblatt, Beleg, Unterschrift, QR-Code (braucht hellen Rand). */
  --papier: #ffffff;
  --papier-tinte: #111111;
  --papier-hilfslinie: #1f6a9c;
  --papier-hilfslinie-flaeche: rgba(42, 127, 184, 0.06);
  --papier-hilfslinie-schild: rgba(255, 255, 255, 0.85);
  --papier-textbereich: rgba(74, 93, 120, 0.03);
  --papier-falzmarke: #999999;
  /* Beim Drucken gilt immer schwarz auf weiss. */
  --druck-grund: #ffffff;
  --druck-tinte: #000000;
  /* Schrift auf kräftigen Farbflächen (Balken, rote Bestätigung, Bildhinweis, Mandantenwahl). */
  --text-auf-farbe: #ffffff;
  /* Weisse Lichtfarbe des Sperrzeit-Karos als Kanäle, damit der Deckgrad (--sperr-muster) getrennt bleibt. */
  --balken-licht: 255 255 255;
  /* Überlagerungen und Schatten: schwarz auf jedem Grund. */
  --schleier: rgba(24, 26, 30, 0.36);
  --schleier-seite: rgba(24, 26, 30, 0.22);
  --bild-hinweis-grund: rgba(0, 0, 0, 0.45);
  --schatten-farbe-symbol: rgba(0, 0, 0, 0.35);
  --schatten-farbe-banner: rgba(0, 0, 0, 0.18);
  --schatten-farbe-klein: rgba(0, 0, 0, 0.14);

  /* Folgen dem Dunkelmodus (waren vorher feste Werte, die im Dunkeln unlesbar oder zu hell standen). */
  --zeilenhinweis: light-dark(#6b4a0c, #d9a13c);
  --linie-fein: light-dark(#edeceb, #2f2f2c);
  --knopf-kante: light-dark(#111111, #000000);
  --mandant-grund: light-dark(#111111, #2a2a27);
}

[hidden] { display: none !important; }

/*
 * Seiten dieses Cockpits hängen ihre Karten direkt in den Behälter des Routers. Seiten aus dem
 * BVV-Cockpit (Büro, Projektmappe) bringen ihre Bühne selbst mit (`buehne()` aus seitenbausteine.js).
 * Ohne eigene Bühne bekommt der Behälter deren Ränder und Breite.
 */
.inhalt__buehne > .seite:not(:has(> .buehne)) { padding: 4px 44px var(--dock-freiraum); }
.seite:not(:has(> .buehne)) > * { max-width: 1240px; }
.seite:not(:has(> .buehne)) > * + * { margin-top: 16px; }
.seite__untertitel { margin: 0; color: var(--text-leise); max-width: 60rem; }
/* Eine Seite ohne Gerüst (Fehlerseite vor der Anmeldung) trägt Titel und Knöpfe selbst. */
.seite__kopf h1 { font-family: var(--schrift-anzeige); font-weight: var(--anzeige-gewicht); font-size: 28px; margin: 0 0 8px; }
@media (max-width: 860px) {
  .inhalt__buehne > .seite:not(:has(> .buehne)) { padding: 4px 14px var(--dock-freiraum); }
  /* Die eingefahrene Schiene wirft keinen Schatten in die Seite. */
  .geruest:not([data-menue="offen"]) .seitenleiste { box-shadow: none; }
}

:where(.seite, dialog, .anmeldung) :is(h2, h3, h4) { line-height: 1.25; margin: 0 0 8px; }
:where(.seite, dialog, .anmeldung) h2 { font-size: 15px; font-weight: 650; }
:where(.seite, dialog, .anmeldung) h3 { font-size: 14px; font-weight: 650; }
:where(.seite, dialog, .anmeldung) h4 { font-size: 13.5px; font-weight: 650; }
:where(.seite, dialog, .anmeldung) p { margin: 0 0 8px; }
:where(.seite, dialog, .anmeldung) :is(ul, ol) { margin: 0 0 8px; padding-left: 1.4rem; }
:where(.seite, dialog, .anmeldung) :is(code, pre) { font-family: var(--schrift-fest); font-size: 0.92em; }
:where(.seite, dialog, .anmeldung) code { background: var(--flaeche-still); padding: 0.1em 0.35em; border-radius: var(--radius-klein); overflow-wrap: anywhere; }
:where(.seite, dialog, .anmeldung) pre { white-space: pre-wrap; margin: 0; }
:where(.seite, dialog, .anmeldung) a, .verweis { color: var(--verweis); text-underline-offset: 0.15em; }
strong { font-weight: 650; }

.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); align-items: center; }
.lade { color: var(--text-leise); padding: var(--abstand); margin: 0; }
a.knopf { text-decoration: none; }
:where(.seite, dialog, .anmeldung) a.knopf { color: var(--text); }
:where(.seite, dialog, .anmeldung) a.knopf--haupt { color: var(--akzent-auf); }

/* Zahl hinter einem Menüpunkt (offene Anfragen, offene Meldungen). */
.nav-zahl {
  flex: none; min-width: 20px; padding: 0 6px; border-radius: 99px; text-align: center;
  font-size: 11.5px; font-weight: 650; line-height: 20px;
  background: var(--schiene-hover); color: var(--schiene-stark);
}
.nav-knopf[aria-current="page"] .nav-zahl { background: var(--akzent-auf); color: var(--akzent-dunkel-text); }
/* Zugeklappt sitzt die Zahl als Punkt am Symbol. */
.nav-punkt { position: absolute; left: 30px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--schiene-marke); }

/* Wortmarke in der Schiene: Schriftzug statt Zeichnung, bis es eine Marke gibt. */
.marke__name { font-family: var(--schrift-anzeige); font-weight: var(--anzeige-gewicht); font-size: 17px; color: var(--schiene-stark); margin-left: 10px; }
.marke__zeichen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Das Benutzermenü hängt in der dunklen Schiene, ist aber eine helle Fläche: eigene Schriftfarbe statt der geerbten. */
.menue { color: var(--text); }
.menue__zeile { color: var(--text-leise); }

/* Darstellung (hell/dunkel) im Benutzermenü. */
.menue__zeile { display: flex; align-items: center; gap: 9px; padding: 6px 10px; font-size: 13.5px; }
.menue__zeile select { width: auto; flex: 1; }

/* Karten */
.karte--gefahr { border-color: var(--schlecht); }
.kartenraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--abstand); align-items: start; }
.kartenraster > .karte { margin-top: 0; }
.karte__kopf > :first-child { min-width: 0; flex: 1; }

/* Merkzeichen: Zustand steht immer als Wort da */
.marke-zeichen--info { background: var(--info-leise); color: var(--info); }
.abzeichenliste { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

/* Meldungen */
.meldung__text > * + * { margin-top: 0.4rem; }
.meldung__text { overflow-wrap: anywhere; }
.meldung a { color: inherit; font-weight: 600; }
.meldung--hinweis { background: var(--info-leise); border-color: var(--info-leise); border-left-color: var(--info); }
.meldung--hinweis .meldung__zeichen { color: var(--info); }

.hinweisliste { position: fixed; left: 50%; bottom: var(--abstand); transform: translateX(-50%); z-index: 200; display: grid; gap: 0.5rem; width: min(34rem, calc(100vw - 2rem)); pointer-events: none; }
.hinweis { padding: 0.7rem 1rem; border-radius: var(--radius); border: 1px solid var(--linie); border-left: 4px solid var(--gut); background: var(--flaeche); box-shadow: var(--schatten-hoch); pointer-events: auto; font-size: 13px; }
.hinweis--warnung { border-left-color: var(--mittel); }
.hinweis--fehler { border-left-color: var(--schlecht); }

.leer__aktionen { display: flex; justify-content: center; gap: var(--abstand-klein); }
.leerzustand__text { color: var(--text-leise); margin: 0; }

.beschreibungsliste { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 var(--abstand); }
.beschreibungsliste dt { color: var(--text-leise); }
.beschreibungsliste dd { margin: 0; overflow-wrap: anywhere; }

.kennzahl { font-size: 14px; }
.kennzahl__zahl { font-size: 25px; font-weight: 640; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-right: 0.25rem; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; }

/* Formulare aus bausteine.js#feld: Beschriftung, Hinweis, Eingabe, Fehler untereinander */
.feld > label { display: block; font-size: 12px; color: var(--text-leise); margin-bottom: 4px; font-weight: 550; }
.feld > .feld__hinweis { margin: 0 0 4px; }
.feld__pflicht { color: var(--text-still); }
.feld__fehler { margin: 4px 0 0; color: var(--schlecht); background: var(--schlecht-leise); border-radius: var(--radius-klein); padding: 4px 9px; font-size: 12.5px; }
.feld__fehler::before { content: 'Fehler: '; font-weight: 700; }
.eingabe {
  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%;
}
textarea.eingabe { min-height: 4.5rem; resize: vertical; }
.eingabe[readonly] { background: var(--flaeche-still); }
.eingabe[aria-invalid='true'] { border-color: var(--schlecht); border-width: 2px; }
.feld--schalter label { display: flex; align-items: center; gap: 0.6rem; font-size: 13.5px; color: var(--text); font-weight: 550; cursor: pointer; }
input.schalter { width: 1.2rem; height: 1.2rem; accent-color: var(--akzent); flex: 0 0 auto; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 14px; align-items: start; }
.feldgruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--abstand-klein) var(--abstand); margin: 0 0 var(--abstand); }
.feldgruppe legend { padding: 0 0.4rem; font-weight: 650; font-size: 13px; }
.formular--schmal { max-width: var(--lesebreite); }
.kopierfeld { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); align-items: flex-end; }
.kopierfeld .feld { flex: 1 1 18rem; margin: 0; }
.akzentfarbe { display: flex; gap: var(--abstand-klein); align-items: flex-start; }
.akzentfarbe .feld { flex: 1 1 auto; }
.farbwaehler { width: 3rem; height: 2.2rem; padding: 0.1rem; border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); background: var(--flaeche); margin-top: 1.25rem; cursor: pointer; }
details.erweitert, details.anleitung { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0.5rem 0.75rem; background: var(--flaeche-still); }
details > summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: var(--abstand-klein); }

/* Dialoge aus dialog.js */
dialog.dialog--breit { max-width: min(880px, calc(100vw - 32px)); }
.dialog__beschreibung { margin: 4px 0 0; color: var(--text-leise); font-size: 13px; }
.dialog__fehler { margin: var(--abstand) 0 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--schlecht); border-radius: var(--radius); background: var(--schlecht-leise); font-size: 13px; }
.dialog__fehler::before { content: 'Fehler: '; font-weight: 700; }

/* Das Monatsraster ist eine Tabelle; `.raster` der Schale ist ein Kartenraster. */
table.raster { display: table; }

/* ------------------------------------------------------------------------- */
/* Seiten der Ferienwohnung */
/* ------------------------------------------------------------------------- */

/* Anmeldung */
/* Rahmen, Zeichen und Titel kommen aus der Schale (.anmeldung, .anmeldung__karte, .anmeldung__marke). */
.anmeldung__titel { outline: none; }
/* Zweiter Faktor mit QR-Code und Wiederherstellungscodes braucht etwas mehr Breite als das Anmeldeformular. */
.anmeldung__karte { max-width: 420px; }
.anmeldung__schritt { margin-bottom: var(--abstand-klein); }
.anmeldung__fehler:empty { display: none; }
.qrcode-huelle { display: flex; justify-content: center; padding: var(--abstand-klein); }
.qrcode { width: 14rem; height: 14rem; background: var(--papier); border: 1px solid var(--linie-kraeftig); }
.geheimnis code { font-size: 1.15rem; letter-spacing: 0.08em; display: inline-block; padding: 0.4rem 0.7rem; }
.codeliste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.codeliste code { display: block; text-align: center; font-size: 1.05rem; padding: 0.4rem; }
.startpasswort code { font-size: 1.3rem; padding: 0.5rem 0.9rem; display: inline-block; }

/* Übersicht, Listen */
.meldungsliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-klein); }
.meldungsliste__eintrag { border: 1px solid var(--linie-kraeftig); border-left-width: 6px; border-radius: var(--radius-klein); padding: 0.6rem 0.8rem; }
.meldungsliste__eintrag--fehler { border-left-color: var(--fehler-rand); }
.meldungsliste__eintrag--warnung { border-left-color: var(--warn-rand); }
.meldungsliste__eintrag--hinweis { border-left-color: var(--info-rand); }
.meldungsliste__kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.meldungsliste__eintrag p { margin-bottom: 0.25rem; }
.wohnungsliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-klein); }
.wohnungsliste__eintrag { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0.6rem 0.8rem; }
.wohnungsliste__kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.fehlendliste { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.fehlendliste li { margin-bottom: 0.25rem; }

/* Anfragen */
.anfrage { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); padding: var(--abstand); background: var(--flaeche); }
.anfrage + .anfrage { margin-top: var(--abstand-klein); }
.anfrage__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-klein); align-items: center; margin-bottom: var(--abstand-klein); }
.anfrage__kopf h3 { margin: 0; }

/* Einstellungen */
.platzhalterliste { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.platzhalterliste dd { margin: 0; }
.mailvorlage + .mailvorlage { margin-top: var(--abstand); }
.mailbeispiel { margin-top: var(--abstand-klein); }
.mailbeispiel__text { background: var(--flaeche-still); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0.75rem; }

/* Wohnungen: Portale und Assistent */
.portal { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); padding: var(--abstand); margin-bottom: var(--abstand); }
.portal__kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: var(--abstand-klein); }
.portal__kopf h3 { margin: 0; }
.portalblock { border-top: 1px solid var(--linie); padding-top: var(--abstand-klein); margin-top: var(--abstand-klein); }
.portalblock > * + * { margin-top: var(--abstand-klein); }
.anleitung ol { margin-bottom: var(--abstand-klein); }
.anleitung__links { list-style: none; padding: 0; margin: 0 0 var(--abstand-klein); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.anleitung > * + * { margin-top: var(--abstand-klein); }
.assistent { background: var(--flaeche); border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); padding: var(--abstand-gross); box-shadow: var(--schatten); }
.assistent > * + * { margin-top: var(--abstand); }
.assistent h2 { outline: none; }
.assistent__aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-klein); border-top: 1px solid var(--linie); padding-top: var(--abstand); }
.schrittleiste { list-style: none; padding: 0; margin: 0 0 var(--abstand); display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--abstand-klein); counter-reset: s; }
.schrittleiste__schritt { border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein); background: var(--flaeche); }
.schrittleiste__schritt--aktuell { border-color: var(--verweis); box-shadow: inset 0 0 0 2px var(--verweis); }
.schrittleiste__text { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem 0.7rem; color: var(--text); }
.schrittleiste__schritt a { text-decoration: none; display: block; }
.schrittleiste__schritt a:hover .schrittleiste__text { background: var(--flaeche-still); }
.schrittleiste__nummer { font-weight: 700; color: var(--text-leise); font-size: 0.85rem; }
.schrittliste { list-style: none; padding: 0; }
.schrittliste__eintrag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-klein); align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.schrittliste__eintrag p { margin: 0.2rem 0 0; }

/* Preise */
.preis__summe { font-size: 1.1rem; margin: var(--abstand-klein) 0; }
.preisauswahl > * + * { margin-top: var(--abstand-klein); }
.feldreihe--drei { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }


/* ------------------------------------------------------------------------- */
/* Belegungsplan (Hauptansicht)                                           */
/* ------------------------------------------------------------------------- */

.plan-bedienung { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); align-items: flex-end; }
/* Kopfzeile des Plans: Legende links, Bedienung rechts. */
.plan-leiste { display: flex; flex-wrap: wrap; gap: var(--abstand-klein) var(--abstand); align-items: flex-end; justify-content: space-between; margin-bottom: var(--abstand-klein); }
.plan-leiste .legende--kompakt { margin-bottom: 0; }
.plan-bedienung .feld { margin: 0; }
.plan-bedienung__blaettern { display: flex; gap: 0; }
/* Verbundene Knopfleiste: gemeinsame Rundung außen, Ränder überlappen, damit keine doppelte Linie entsteht. */
.plan-blaettern__knopf { width: 40px; padding: 0; font-size: 18px; line-height: 1; border-radius: 0; }
.plan-blaettern__knopf + .plan-blaettern__knopf { margin-left: -1px; }
.plan-blaettern__knopf:first-child { border-radius: var(--knopf-radius) 0 0 var(--knopf-radius); }
.plan-blaettern__knopf:last-child { border-radius: 0 var(--knopf-radius) var(--knopf-radius) 0; }
.plan-blaettern__knopf:only-child { border-radius: var(--knopf-radius); }
.plan-blaettern__knopf:hover:not(:disabled), .plan-blaettern__knopf:focus-visible { position: relative; z-index: 1; }
.plan-blaettern__knopf:nth-child(2) { font-size: 12px; }
.plan-bedienung__ansicht { display: flex; gap: var(--abstand-klein); flex-wrap: wrap; }
.konfliktliste { margin: 0.4rem 0 0; }

/*
 * Plan über alle Wohnungen, senkrecht: Wohnungen als Spalten, Tage als Zeilen (zwei Gitterzeilen je Tag, damit
 * der Wechseltag eine halbe Zelle ist). Der Plan scrollt selbst, nur dann bleiben Kopf (sticky oben) und
 * Datumsspalte (sticky links) beim Scrollen stehen.
 */
.plan { overflow: auto; max-height: max(320px, calc(100dvh - 20rem)); background: var(--flaeche); border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); margin-bottom: var(--abstand); }
.plan__innen { min-width: calc(var(--datumbreite) + var(--spalten) * var(--spaltenbreite)); }
.plan__kopf, .plan__tage { display: grid; }
.plan__kopf { position: sticky; top: 0; z-index: 6; background: var(--flaeche-still); box-shadow: 0 1px 0 var(--linie-kraeftig); grid-template-rows: auto auto; }
.plan__eck { position: sticky; left: 0; z-index: 7; background: var(--flaeche-still); border-right: 1px solid var(--linie-kraeftig); padding: 0.3rem 0.5rem; display: flex; align-items: flex-end; font-weight: 650; color: var(--text-leise); font-size: 0.85rem; }
.plan__gruppe { padding: 0.3rem 0.6rem 0.1rem; font-weight: 650; border-left: 1px solid var(--linie-kraeftig); min-width: 0; font-size: 0.85rem; color: var(--text-leise); }
.plan__gruppenname { position: sticky; left: calc(var(--datumbreite) + 0.6rem); }
.plan__wohnung { padding: 0.1rem 0.6rem 0.4rem; font-weight: 600; border-left: 1px solid var(--linie-kraeftig); min-width: 0; overflow-wrap: anywhere; }
.plan__tage { grid-auto-flow: row; position: relative; }
.plan__tag { position: sticky; left: 0; z-index: 4; background: var(--flaeche); border-right: 1px solid var(--linie-kraeftig); border-top: 1px solid var(--linie); padding: 0.15rem 0.5rem; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; font-size: 0.8rem; min-width: 0; }
.plan__wochentag { color: var(--text-leise); }
.plan__tagzahl { font-weight: 650; font-variant-numeric: tabular-nums; }
.plan__monat { font-weight: 700; font-size: 0.75rem; white-space: nowrap; }
.plan__tag.wochenende { background: var(--wochenende); }
.plan__tag.heute { background: var(--heute); box-shadow: inset 3px 0 0 var(--verweis); }
.plan__tag.heute .plan__tagzahl { color: var(--verweis); }
.plan__tag.monatsanfang, .plan__zelle.monatsanfang { border-top: 2px solid var(--linie-kraeftig); }
.plan__zelle { border-left: 1px solid var(--linie); border-top: 1px solid var(--linie); cursor: copy; min-width: 0; }
.plan__zelle.wochenende { background: var(--wochenende); }
.plan__zelle.heute { background: var(--heute); }
.plan__zelle:hover { background: var(--akzent-leise); }
.plan__spaeter { display: block; margin: 0.4rem auto; }
.plan__hinweis:empty { display: none; }

/* Balken im senkrechten Plan: Text darf umbrechen, die Breite ist die der Wohnungsspalte */
.plan__tage .balken { display: flex; align-items: flex-start; margin: 0 3px; padding: 0.15rem 0.4rem; line-height: 1.2; white-space: normal; overflow: hidden; text-align: left; font-size: 0.78rem; }
.plan__tage .balken__text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.balken--offen-oben { border-top-left-radius: 0; border-top-right-radius: 0; }
.balken--offen-unten { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Balken: Typ erkennbar an Muster UND Beschriftung (Wort davor), nicht nur an der Farbe */
.balken {
  position: relative; z-index: 1; margin: 2px 0; padding: 0 0.45rem; border: 0; border-radius: var(--radius-klein);
  font: inherit; font-size: 0.8125rem; line-height: calc(var(--balken-hoehe) - 4px); text-align: left; color: var(--text-auf-farbe);
  cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
.balken__text { display: block; overflow: hidden; text-overflow: ellipsis; }
.balken--eigen { background: var(--balken-eigen); }
.balken--import { background: repeating-linear-gradient(135deg, var(--balken-import) 0 7px, var(--balken-import-streifen) 7px 14px); }
.balken--sperrzeit {
  background-color: var(--balken-sperr);
  background-image:
    linear-gradient(45deg, rgb(var(--balken-licht) / var(--sperr-muster)) 25%, transparent 25%, transparent 75%, rgb(var(--balken-licht) / var(--sperr-muster)) 75%),
    linear-gradient(45deg, rgb(var(--balken-licht) / var(--sperr-muster)) 25%, transparent 25%, transparent 75%, rgb(var(--balken-licht) / var(--sperr-muster)) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.balken--anfrage { background: var(--balken-anfrage-grund); color: var(--balken-anfrage-text); border: 2px dashed var(--balken-anfrage-rand); line-height: calc(var(--balken-hoehe) - 8px); font-weight: 600; }
.balken--konflikt {
  background: repeating-linear-gradient(45deg, var(--konflikt) 0 6px, var(--konflikt-streifen) 6px 12px);
  color: var(--text-auf-farbe); font-weight: 700; outline: 2px solid var(--konflikt-rand); outline-offset: -2px; border: 0;
  line-height: calc(var(--balken-hoehe) - 4px);
}
.balken--offen-links { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.balken--offen-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.balken:hover { filter: brightness(1.1); }
.balken:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; z-index: 3; }

.legende { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.5rem 1rem; }
.legende__eintrag { display: flex; gap: 0.6rem; align-items: center; }
/* Kompakte Leiste über dem Plan: Muster und Name in einer Zeile, die Erklärung steht im Tooltip. */
.legende--kompakt { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-bottom: var(--abstand-klein); font-size: 0.85rem; }
.legende--kompakt .legende__eintrag { gap: 0.4rem; }
.legende--kompakt .legende__muster { flex: 0 0 2.2rem; height: 1.1rem; line-height: 1.1rem; font-size: 0.7rem; }
.legende__muster { flex: 0 0 3.5rem; height: 1.5rem; line-height: 1.5rem; cursor: default; text-align: center; margin: 0; padding: 0; }

/* Monatsraster der Wohnung */
.monatsraster__kopf { display: flex; gap: var(--abstand-klein); align-items: center; margin-bottom: var(--abstand-klein); flex-wrap: wrap; }
.monatsraster__titel { min-width: 10rem; text-align: center; font-size: 1.1rem; }
.raster { width: 100%; min-width: 40rem; border-collapse: collapse; table-layout: fixed; }
.raster th { background: var(--flaeche-still); padding: 0.3rem; font-size: 0.85rem; border: 1px solid var(--linie); }
.raster__tag { vertical-align: top; height: 5.5rem; padding: 0.2rem; border: 1px solid var(--linie); overflow: hidden; }
.raster__tag--fremd { background: var(--flaeche-still); color: var(--text-leise); }
.raster__tag--heute { box-shadow: inset 0 0 0 3px var(--verweis); }
.raster__tag--konflikt { background: var(--fehler-grund); }
.raster__zahl { display: block; font-weight: 650; font-size: 0.85rem; margin-bottom: 0.15rem; }
.raster__konflikt { display: block; color: var(--fehler-text); font-weight: 700; font-size: 0.75rem; }
.raster__eintrag { display: block; width: 100%; margin: 0 0 2px; line-height: 1.4; font-size: 0.75rem; min-height: 1.1rem; padding: 0 0.3rem; }
.raster__abreise { display: block; font-size: 0.72rem; color: var(--text-leise); font-style: italic; }

/* Kalender einer Wohnung (zweite Ansicht des Belegungsplans): Monate untereinander, Wochen als Gitter mit 14 Spalten (zwei je Tag) */
.wkal {
  max-height: max(320px, calc(100dvh - 20rem)); overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); margin-bottom: var(--abstand);
}
.wkal__wochentage {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--flaeche-still); border-bottom: 1px solid var(--linie-kraeftig);
}
.wkal__wochentag { padding: 0.35rem 0.2rem; text-align: center; font-size: 0.85rem; font-weight: 650; color: var(--text-leise); }
.wkal__monatsname { margin: 0; padding: 0.9rem 0.8rem 0.35rem; font-size: 1.15rem; }
.wkal__woche { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); border-top: 1px solid var(--linie); position: relative; }
.wkal__tag { border-left: 1px solid var(--linie); cursor: copy; padding: 0.2rem 0.35rem; min-width: 0; }
.wkal__tag:first-child { border-left: 0; }
.wkal__tag--leer { cursor: default; background: var(--flaeche-still); }
.wkal__tag.wochenende { background: var(--wochenende); }
.wkal__tag.heute { background: var(--heute); box-shadow: inset 0 3px 0 var(--verweis); }
.wkal__tag.vergangen .wkal__zahl { color: var(--text-leise); }
.wkal__tag:not(.wkal__tag--leer):hover { background: var(--akzent-leise); }
.wkal__zahl { font-weight: 650; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.wkal__tag.heute .wkal__zahl { color: var(--verweis); }
.wkal__frueher, .wkal__spaeter { display: block; margin: 0.5rem auto; }

/* ------------------------------------------------------------------------- */
/* Kleine Bildschirme                                                     */
/* ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --datumbreite: 4.8rem; --spaltenbreite: 6.5rem; }
  .beschreibungsliste { grid-template-columns: 1fr; }
  .beschreibungsliste dd { margin-bottom: 0.4rem; }
  .assistent { padding: var(--abstand); }
  .dialog__fuss .knopf { flex: 1 1 auto; }
  .codeliste { grid-template-columns: 1fr; }
  .platzhalterliste { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .seitenleiste, .hinweisliste, .plan-bedienung, .aktionen { display: none !important; }
  /* Gedruckt wird immer in der hellen Darstellung, auch wenn der Bildschirm dunkel ist. */
  :root:root { color-scheme: light; }
  body { background: var(--druck-grund); color: var(--druck-tinte); }
}

/* Nachträge zur Schale */
.sprunglink { position: absolute; left: -999px; top: 0; z-index: 100; }
.sprunglink:focus { left: var(--abstand); top: var(--abstand-klein); }
/* Bestätigende Aktion, die etwas löscht oder storniert: gefüllt wie die Hauptaktion, aber rot. */
.knopf--haupt.knopf--haupt-gefahr, .knopf--haupt.knopf--haupt-gefahr:hover:not(:disabled) { background: var(--gefahr-fuellung); border-color: var(--gefahr-fuellung); color: var(--text-auf-farbe); }

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

/*
 * Gestaltung der handgepflegten Fragmente unter modules/projektmappe/inhalt/ und der Reiter Issues
 * und Ausbringung — aus dem BVV-Cockpit (dort eine eigene Datei projektmappe.css, die nachgeladen
 * wird; dieses Cockpit hat ein Stylesheet). Alles hängt unter `.pm`, damit die kurzen Klassennamen
 * der Fragmente (`.chip`, `.step`, `.stat` …) nirgends sonst wirken.
 */
.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; }

/* Architekturzeichnung (architektur.html): Inline-SVG, Farben nur aus den Tokens. */
.pm .arch { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-klein); margin: 14px 0 22px; background: var(--flaeche); padding: 8px; }
.pm .arch svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--schrift); }
.pm .arch text { fill: var(--text); font-size: 12px; }
.pm .arch .t { font-weight: 650; font-size: 13px; }
.pm .arch .s { fill: var(--text-leise); font-size: 11.5px; }
.pm .arch .zt { fill: var(--text-still); font-size: 11px; letter-spacing: 0.04em; }
.pm .arch rect.zone { fill: none; stroke: var(--linie-kraeftig); stroke-dasharray: 5 4; }
.pm .arch rect.k { fill: var(--flaeche-still); stroke: var(--linie-kraeftig); }
.pm .arch rect.k.kern { stroke: var(--text); stroke-width: 1.6; }
.pm .arch .pfeil { fill: none; stroke: var(--text); stroke-width: 1.6; marker-end: url(#arch-spitze); }
.pm .arch .pfeil.zurueck { stroke-dasharray: 5 3; }
.pm .arch .pfeil.code { stroke: var(--text-leise); }
.pm .arch .spitze { fill: var(--text); }
.pm .arch circle.nr { fill: var(--akzent); stroke: var(--akzent-auf); stroke-width: 1; }
.pm .arch text.nr { fill: var(--akzent-auf); font-size: 11px; font-weight: 700; text-anchor: middle; }
.pm .arch-legende { margin: -10px 0 18px; font-size: 12.5px; color: var(--text-leise); }

/* 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 .pm-schrittaktion { margin: 12px 0 4px; }

.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;
}

/* Eigen: Verweise in der Mappe sind als Verweise erkennbar; Zahlen auf den Pfeilen der Zeichnung. */
.pm a:not(.knopf):not(.issue) { color: var(--verweis); }
.pm .arch text.nr { fill: var(--akzent-auf); }

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

/*
 * Touch (siehe oben, „Touch-Ziele"): Belegungsplan und Eingabefelder. Steht ganz hinten, damit der Wert
 * gegen den zweiten Token-Block gewinnt. 16 px in Feldern verhindern das Hineinzoomen auf iOS.
 */
@media (pointer: coarse), (max-width: 860px) {
  :root { --balken-hoehe: 2.75rem; }
  .eingabe { font-size: 16px; min-height: var(--knopf-hoehe); }
}

/* ---------- Icon und Fotos der Wohnung ---------- */

.wohnungs-icon {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; vertical-align: middle; margin-right: 0.5rem;
  background: var(--akzent-leise); color: var(--akzent-text); font-weight: 700; font-size: 0.85rem; line-height: 1;
}
.wohnungs-icon--mittel { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.wohnungs-icon--gross { width: 4rem; height: 4rem; font-size: 1.6rem; border-radius: 0.6rem; }
.wohnungs-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fotos { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.foto { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.foto__bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.4rem; background: var(--linie); }
.foto__kopf { display: flex; align-items: center; gap: 0.4rem; min-height: 1.5rem; }
.foto__aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.foto--titel .foto__bild { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Ablagefläche für Fotos (Ziehen und Ablegen) */
.ablage { display: grid; gap: 0.5rem; justify-items: start; margin: 1rem 0; padding: 1.25rem; border: 2px dashed var(--linie-kraeftig); border-radius: 0.5rem; background: var(--flaeche-still); }
.ablage--aktiv { border-color: var(--akzent); background: var(--akzent-leise); }
.ablage--beschaeftigt { opacity: 0.7; }
.ablage__text { margin: 0; font-weight: 700; }
.ablage__hinweis { margin: 0; color: var(--text-leise); font-size: 0.9rem; }
.ablage__stand { margin: 0; min-height: 1.25rem; }