/* Bauvento Design-System: Farbtokens + Sidebar/Topbar-Shell + gemeinsame
   Komponenten (Buttons, Tabellen, Dialoge, Formulare). Wird von jeder Seite
   vor ihrem eigenen, seiteneigenen <style>-Block eingebunden - Regeln hier
   sind bewusst allgemein gehalten, seiteneigene Blöcke überschreiben/ergänzen
   nur noch das, was wirklich modul-spezifisch ist (z.B. Status-Badge-Farben). */

:root {
  --vento: #2CA9A6;
  --vento-deep: #1F7A78;
  --vento-tint: #E3F4F1;
  --sun: #F2924A;
  --sun-tint: #FCEAD9;
  --sky: #F5F8F7;
  --card: #FFFFFF;
  --ink: #232A29;
  --ink-soft: #63706D;
  --line: #E1E8E5;
  --sidebar-breite: 236px;
  --gefahr: #AE1800;
  --gefahr-tint: #FFF2EF;

  /* Der abgenommene Entwurf vom 17.09.2026 benennt dieselben Flaechen und
     Linien anders. Damit kein zweites Farbsystem daneben entsteht, stehen
     seine Namen hier als Zweitnamen auf den bestehenden Werten - wer --card
     schreibt und wer --flaeche schreibt, meint dieselbe Farbe. Neue Seiten
     duerfen beide Schreibweisen benutzen; geaendert wird die Farbe weiterhin
     nur oben an ihrem einen Platz. */
  --grund: var(--sky);        /* Seitenhintergrund */
  --flaeche: var(--card);     /* Karten, Tabellen, Dialoge */
  --leiste: var(--card);      /* Seitenleiste und Kopfzeile */
  --linie: var(--line);       /* normale Trennlinie */

  /* Diese beiden hatte das heutige System noch nicht. --still ist die ruhige
     Flaeche zwischen Grund und Karte (Zeile beim Ueberfahren, Untergrund des
     Projektasts, Summenzeile), --linie-stark die sichtbare Linie an
     Bedienelementen und unter einer Summe. */
  --still: #EDF2F1;
  --linie-stark: #C8D5D1;

  /* Kartenschatten und Rundung aus dem Entwurf. --schatten-karte traegt eine
     ruhende Flaeche, --schatten-hoch alles, was ueber der Seite schwebt
     (Dialog, Hinweis, angehobene Kachel). */
  --schatten-karte: 0 1px 2px rgba(35, 42, 41, .06);
  --schatten-hoch: 0 2px 4px rgba(35, 42, 41, .08), 0 12px 28px -18px rgba(35, 42, 41, .35);
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  background: var(--sky);
  color: var(--ink);
  margin: 0;
}

a { color: inherit; }

/* ---- Sidebar ---- */
/* #bv-sidebar/#bv-topbar stehen als leere <div>s im HTML und werden erst von
   shell.js' bvShellRendern() befüllt (Klasse + Inhalt gemeinsam gesetzt) -
   diese ID-Regeln reservieren schon vorher Breite/Höhe, damit bei langsamem
   Skript-/Netzwerk-Laden kein sichtbarer Leerraum entsteht, der sich beim
   Befüllen springhaft schließt (UX-Analyse 12.8.2026, Muss 2.1). */
#bv-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-breite); }
#bv-topbar { min-height: 60px; }

.bv-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-breite);
  background: var(--leiste);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 10;
}

.bv-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.3rem 1.2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.bv-brand img { width: 28px; height: 28px; }
.bv-brand span { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.bv-nav { display: flex; flex-direction: column; gap: .15rem; padding: .8rem; flex: 1; }

.bv-nav-item:not([hidden]) {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 500;
}
.bv-nav-item:hover { background: var(--still); color: var(--ink); }
.bv-nav-item.aktiv { background: var(--vento-tint); color: var(--vento-deep); font-weight: 700; }

.bv-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bv-nav-icon svg { width: 17px; height: 17px; }

/* Das bunte Zeichen des Entwurfs (shell.js, BV_PUNKTE.symbol). Es steht im
   selben 30px-Feld wie das bisherige SVG, damit die Zeilenhoehe der Leiste
   gleich bleibt - nur ohne den einfarbigen Chip dahinter: das Zeichen bringt
   seine Farbe selbst mit. line-height: 1 haelt es mittig, auch wenn eine
   Schriftart es mit anderem Zeilenabstand liefert. */
.bv-nav-symbol {
  background: none;
  font-size: 1.05rem;
  line-height: 1;
}

.bv-nav-luecke { flex: 1; }

.bv-nav-fuss { padding: .8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }

/* Reiter für noch nicht gebaute Module in der Projekt-Sidebar (siehe
   projektShell.js) - sichtbar, aber bewusst nicht klickbar. */
.bv-nav-item.gesperrt {
  cursor: default;
  opacity: .55;
}
.bv-nav-item.gesperrt:hover { background: none; color: var(--ink-soft); }
.bv-nav-item-hinweis { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* Bereichs-Gruppierung der Sidebar (Projekte/Personal/Betriebsmittel/
   Finanzen/Verwaltung/Betreiber) - jeder Bereich ein natives <details>,
   damit Auf-/Zuklappen ohne zusätzliches JS funktioniert. */
.bv-nav-bereich { margin-top: .35rem; }
.bv-nav-bereich-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .6rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  user-select: none;
}
.bv-nav-bereich-kopf::-webkit-details-marker { display: none; }
.bv-nav-bereich-kopf:hover { color: var(--ink); }
.bv-nav-bereich-pfeil { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; }
.bv-nav-bereich[open] .bv-nav-bereich-pfeil { transform: rotate(180deg); }
.bv-nav-bereich-inhalt { display: flex; flex-direction: column; gap: .15rem; }

/* Reiterleiste unter der Kopfzeile (Stufe 4, Paket P8): die Geschwister der
   gerade offenen Seite. shell.js zeichnet sie gemeinsam fuer alle Seiten,
   genau wie die Seitenleiste.

   Sie BRICHT UM, statt zu scrollen. Ein waagerecht scrollender Reiterstreifen
   versteckt genau die Reiter, die man sucht, und auf einem Tablet sieht man
   ihm nicht einmal an, dass rechts noch welche stehen.

   display nur mit :not([hidden]): shell.js legt die Leiste per hidden weg,
   sobald weniger als zwei Reiter sichtbar sind (eine Leiste mit einem
   einzigen Reiter sagt nichts). Eine display-Regel auf der blossen Klasse
   schluege das Attribut - dieselbe Falle wie bei .bv-fensterinhalt, siehe
   scripts/oberflaeche-hidden-falle.test.js. */
.bv-reiterleiste:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .35rem;
  padding: .5rem 1.75rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.bv-reiter {
  padding: .35rem .7rem;
  border-radius: var(--radius) var(--radius) 0 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bv-reiter:hover { background: var(--still); color: var(--ink); }
.bv-reiter[aria-current="page"] { color: var(--vento-deep); border-bottom-color: var(--vento); }

/* Fehlerzeile in Formularen und Dialogen. Stand bisher in jeder Seite als
   style="color:#dc2626; font-size:.85rem;" - als Klasse laesst sie sich an
   einer Stelle aendern, und neue Seiten schleppen keine Inline-Regel mit.
   Bewusst OHNE display: die Zeile wird per hidden gezeigt und verborgen. */
.formular-fehler { color: #dc2626; font-size: .85rem; }

/* Die seiteneigenen Reiterzeilen (.reiter-leiste in lohnabrechnungen.html,
   arbeitszeit.html, finanzen.html, mitarbeiter.html) tragen in ihrem eigenen
   <style> ein display:flex. Wer so eine Zeile per hidden weglegt - seit
   Stufe 4 tut das lohnabrechnungen.js, weil die gemeinsame Reiterleiste das
   Umschalten uebernimmt -, erreichte damit nichts: hidden ist nur die
   schwaechste denkbare display-Vorgabe, und jede eigene Regel schlaegt sie.
   Diese Regel hier ist spezifischer als die Klasse allein und gewinnt
   deshalb, ohne dass eine der vier Seiten angefasst werden muss. */
.reiter-leiste[hidden] { display: none; }

/* Projekt-Kontext-Streifen: klebt unter der Topbar, hält den Baustellen-
   Bezug seitenübergreifend sichtbar (siehe projektShell.js) - unabhängig
   davon, ob die Seitenleiste mit dem Projektast (.bv-projektast-kopf) gerade
   sichtbar oder auf Mobile hinter dem Hamburger versteckt ist. */
.bv-projekt-kontext-streifen {
  position: sticky;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.75rem;
  background: var(--vento-tint);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.bv-projekt-kontext-name { color: var(--vento-deep); font-weight: 700; text-decoration: none; }
.bv-projekt-kontext-name:hover { text-decoration: underline; }
.bv-projekt-kontext-nummer { color: var(--ink-soft); }
.bv-projekt-kontext-zurueck { margin-left: auto; color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.bv-projekt-kontext-zurueck:hover { color: var(--ink); }

/* Projektast (Stufe 4, Paket P9): die Projektebene haengt jetzt UNTER dem
   Punkt "Baustellen" derselben Leiste, statt sie zu ersetzen. Der farbige
   Streifen links und der eigene Untergrund zeigen, dass hier eine Ebene
   tiefer begonnen hat - ohne dass die neun Punkte darueber verschwinden.

   .bv-projekt-seite braucht :not([hidden]): shell.js klappt die vier Gruppen
   ueber das hidden-Attribut zu, und eine display-Regel auf der blossen Klasse
   schluege das Attribut - dieselbe Falle wie bei .bv-fensterinhalt und der
   Reiterleiste, siehe scripts/oberflaeche-hidden-falle.test.js. */
.bv-projektast {
  background: var(--still);
  border-left: 3px solid var(--vento);
  margin: .15rem 0 .35rem;
  padding: .45rem 0 .5rem;
}

.bv-projektast-kopf {
  display: flex;
  flex-direction: column;
  padding: 0 .6rem .35rem 1.1rem;
  font-size: .72rem;
  color: var(--ink-soft);
}
.bv-projektast-kopf .nummer { font-variant-numeric: tabular-nums; }
.bv-projektast-kopf strong { color: var(--ink); font-size: .8rem; }

/* Die Gruppenkoepfe: optisch wie die frueheren Bereichsueberschriften der
   Seitenleiste (.bv-nav-bereich-kopf), aber als <button> - sie klappen auf
   und zu und muessen deshalb mit der Tastatur erreichbar sein. */
.bv-projekt-gruppe {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  padding: .5rem .6rem .16rem 1.1rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.bv-projekt-gruppe:hover { color: var(--vento-deep); }
.bv-projekt-pfeil { width: .7rem; font-size: .7rem; flex-shrink: 0; }

.bv-projekt-seite:not([hidden]) {
  display: flex;
  align-items: center;
  padding: .26rem .6rem .26rem 1.65rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
}

/* Die offene Projektseite. Die Regel steht hier und nicht bei
   .bv-nav-item.aktiv: beide Selektoren wiegen gleich schwer (0,2,0), und die
   Regel darüber ist die spätere - ohne diese hier bliebe vom aktiven Eintrag
   nur der Hintergrund, Schriftfarbe und -stärke fielen wieder auf die des
   Astes zurück. :not([hidden]) aus demselben Grund wie oben. */
.bv-projekt-seite.aktiv:not([hidden]) { color: var(--vento-deep); font-weight: 700; }

.bv-projekt-schliessen {
  display: block;
  width: 100%;
  padding: .35rem .6rem .35rem 1.1rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: .74rem;
  text-align: left;
  cursor: pointer;
}
.bv-projekt-schliessen:hover { color: var(--vento-deep); }

/* Hamburger-Button (nur per CSS ab dem Mobil-Breakpoint sichtbar, siehe
   responsive.css) + Backdrop fürs Off-Canvas-Sidebar-Menü. */
.bv-hamburger-button {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.bv-hamburger-button svg { width: 20px; height: 20px; }

.bv-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35, 42, 41, .45);
  z-index: 9;
}

/* ---- Topbar + Content ---- */
.bv-content { margin-left: var(--sidebar-breite); min-height: 100vh; }

/* Sehr dezente Stadtsilhouette (moderne Architektur) hinter dem Inhalt jeder
   angemeldeten Seite - fixed statt scrollend, pointer-events:none, kein
   z-index nötig: als ::before steht sie im Malreihenfolge-Sinn VOR Topbar/
   Main und wird von deren undurchsichtigem Hintergrund einfach überdeckt. */
.bv-content::before {
  content: "";
  position: fixed;
  left: var(--sidebar-breite);
  right: 0;
  bottom: 0;
  height: 360px;
  background-image: url("../assets/stadt-silhouette.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: .05;
  pointer-events: none;
}

.bv-topbar {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.bv-topbar-titel { font-weight: 700; font-size: 1rem; }
.bv-topbar-links { display: flex; align-items: center; gap: .8rem; }

.bv-topbar-aktionen { display: flex; align-items: center; gap: .6rem; }

/* Sichtbarer Zweitweg zur Cmd/Strg+K-Befehlspalette (siehe bvPaletteOeffnen
   in shell.js) - die Tastenkombination existierte bereits, war aber ohne
   sichtbaren Hinweis kaum auffindbar. */
.bv-suche-button {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--still);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: .4rem .65rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.bv-suche-button:hover { color: var(--ink); border-color: var(--ink-soft); }
.bv-suche-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.bv-suche-kuerzel { font-size: .74rem; font-weight: 600; white-space: nowrap; }

/* ---- Buttons ---- */
.primaer-button {
  background: var(--vento);
  color: white;
  border: none;
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: .88rem;
}
.primaer-button:hover { background: var(--vento-deep); }

.sekundaer-button, .konto-link {
  background: transparent;
  border: 1px solid var(--linie-stark);
  color: var(--ink);
  padding: .55rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  font-size: .85rem;
}
/* :not([hidden]) statt display direkt auf der Klasse: sonst schlägt dieses
   explizite display die UA-Regel [hidden]{display:none} (gleiche Spezifität,
   aber Autor- vor UA-Stylesheet gewinnt immer) - Elemente mit dieser Klasse
   blieben trotz .hidden=true sichtbar. */
.sekundaer-button:not([hidden]), .konto-link:not([hidden]) { display: inline-block; }
.sekundaer-button:hover, .konto-link:hover { background: var(--still); }

.mini-button {
  background: transparent;
  border: 1px solid var(--linie-stark);
  padding: .3rem .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .78rem;
  margin-right: .3rem;
  color: var(--ink);
  text-decoration: none;
}
.mini-button:not([hidden]) { display: inline-block; }
.mini-button:hover { background: var(--still); }

.bv-sprachauswahl {
  background: transparent;
  border: 1px solid var(--linie-stark);
  color: var(--ink);
  padding: .5rem .7rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
}
.bv-sprachauswahl:hover { background: var(--still); }

#abmelden-button {
  background: transparent;
  border: 1px solid var(--linie-stark);
  color: var(--ink-soft);
  padding: .5rem .9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
}
#abmelden-button:hover { background: var(--still); color: var(--ink); }

/* ---- Layout-Hilfen ---- */
main { padding: 2rem 1.75rem; max-width: 1100px; }

/* Fenstermodus (Teil K, Stufe 1): dieselbe Seite ohne Rahmen, fuer ein
   zweites Browserfenster auf einem zweiten Bildschirm. Aufgerufen ueber
   ?fenstermodus=1.

   shell.js wird dafuer NICHT angefasst - es rendert weiter in seine
   Container, die hier nur unsichtbar sind. Eine Sonderbehandlung im
   Seitengeruest waere ein zweiter Startpfad, den danach jede Aenderung an der
   Navigation mitpflegen muesste. */
body[data-fenstermodus] #bv-sidebar,
body[data-fenstermodus] #bv-topbar,
body[data-fenstermodus] #bv-reiterleiste,
body[data-fenstermodus] .bv-sidebar-backdrop { display: none; }
body[data-fenstermodus] .bv-content { margin-left: 0; }
body[data-fenstermodus] .bv-content::before { display: none; }
body[data-fenstermodus] main { max-width: none; padding: .6rem .8rem; }
/* Das Notizbuch-Symbol schwebt ueber allem und waere hier nur im Weg. */
body[data-fenstermodus] #bv-notizbuch-symbol { display: none; }
h1 { margin-top: 0; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; }
.untertitel { color: var(--ink-soft); margin-top: -.2rem; font-size: .88rem; }

/* ---- Karten/Abschnitte (Karte im Sinn von "Card", nicht Landkarte) ---- */
.karte {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  padding: 1.3rem 1.5rem;
}
.karte h2 { margin-top: 0; font-size: 1rem; }

/* ---- Tabellen ---- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
}
th, td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
th { background: var(--sky); color: var(--ink-soft); font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* Runde 2, Punkt 7: "Unfertige Bauleistungen" ist ein vorläufiger, nicht
   steuerrechtlich verbindlicher Kennzahlen-Vorschlag - der Hinweis darauf
   muss immer sichtbar bleiben (kein Dismiss-Button), daher fester Akzent
   statt der neutralen .karte-Optik. */
.bilanz-hinweis-karte { border-left: 4px solid var(--sun); background: var(--sun-tint); margin-top: 1.5rem; }
.bilanz-hinweis-text { color: var(--ink); font-size: .82rem; font-weight: 600; margin: .2rem 0 1rem; }

/* SAP-artiger Kostenarten-Drilldown (Ultrathink-Finanzen-Audit-Erweiterung,
   18.08.): Kacheln, die per Klick eine Einzelpostenliste oeffnen, bekommen
   einen Zeiger-Cursor + dezentes Hover-Feedback, damit erkennbar ist, dass
   dort etwas anklickbar ist - ohne den bestehenden .kennzahl-karte-Look zu
   veraendern. */
.kd-klickbar { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kd-klickbar:hover { box-shadow: var(--schatten-hoch); transform: translateY(-1px); }
.kd-klickbar:focus-visible { outline: 2px solid var(--vento-deep); outline-offset: 2px; }

/* Gleicher Drilldown, aber als Tabellenzeile statt Kachel (finanzen.html,
   Ergebnis -> Baustellenergebnis). */
.berg-zeile-klickbar { cursor: pointer; }
.berg-zeile-klickbar:hover td { background: var(--still); }
.berg-zeile-klickbar:focus-visible { outline: 2px solid var(--vento-deep); outline-offset: -2px; }

/* ---- Dialoge/Formulare ---- */
dialog { position: relative; border: none; border-radius: var(--radius); box-shadow: var(--schatten-hoch); padding: 0; width: 440px; max-width: 92vw; }
dialog::backdrop { background: rgba(35, 42, 41, .45); }

#bv-kostenart-drilldown-dialog { width: min(760px, 94vw); max-height: 85vh; }
#bv-kostenart-drilldown-dialog .formular-inhalt { max-height: 85vh; overflow-y: auto; }
#bv-kostenart-drilldown-dialog tfoot td { font-weight: 700; border-top: 2px solid var(--linie-stark); border-bottom: none; background: var(--still); }

/* Automatisch von shell.js in jeden <dialog> injizierter Schließen-Knopf
   oben rechts (siehe dialogXKnoepfeVerdrahten) - unabhängig vom
   seiteneigenen Abbrechen/Schließen-Button unten im Formular. */
.dialog-x-button {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  z-index: 1;
}
.dialog-x-button:hover { background: var(--still); color: var(--ink); }

/* Reserviert Platz für den X-Knopf, damit er nicht mit Elementen am
   rechten Rand der Kopfzeile kollidiert (z.B. Status-Badges wie in
   vergabe.html/nachtraege.html/bestellungen.html). */
dialog .formular-inhalt { padding-right: 3.1rem; }
.formular-inhalt { padding: 1.5rem; }
.formular-inhalt h2 { margin-top: 0; }

/* Gemeinsame Basis-Optik für Formularfelder - ursprünglich nur auf
   .formular-inhalt (also <dialog>-Formulare) beschränkt, wodurch
   Auf-Seite-Formulare (nicht in einem Dialog) auf unformatierte
   Browser-Standardwerte zurückfielen und reihenweise eigene, im Detail
   voneinander abweichende lokale <style>-Blöcke nachgebaut haben
   (UX-Review 13.8.2026: "Textfelder systemweit vereinheitlichen"). Gilt
   jetzt für jedes Label/Feld im Hauptinhalt, nicht nur in Dialogen -
   spezifischere Selektoren an anderer Stelle (z.B. .checkbox-zeile input,
   .bv-tabellen-suche, .richtext-toolbar select, itwoShell.css) gewinnen
   dank höherer CSS-Spezifität unverändert weiter. */
/* ":not(:where([hidden]))" an beiden Selektoren: ohne den Zusatz schlägt
   dieses display:block die UA-Regel [hidden]{display:none}, und neunzehn per
   hidden weggelegte Beschriftungen stehen dauerhaft im Bild (z.B.
   #befristet-bis-feld in arbeitsvertraege.html). :where() zählt nicht zur
   Spezifität - die Selektoren bleiben (0,1,1) und (0,0,2) wie zuvor, also
   gewinnen seiteneigene Regeln wie ".checkbox-gruppe label { display: flex }"
   unverändert weiter. Ein bloßes ":not([hidden])" täte das nicht: es hübe
   die Spezifität um (0,1,0) und verschöbe ein Dutzend Seiten
   (scripts/oberflaeche-hidden-falle.test.js). */
.formular-inhalt label:not(:where([hidden])),
main label:not(:where([hidden])) {
  display: block;
  margin-bottom: .9rem;
  font-size: .85rem;
}
.formular-inhalt input,
.formular-inhalt select,
.formular-inhalt textarea,
main select,
main textarea,
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
  width: 100%;
  margin-top: .3rem;
  padding: .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-sizing: border-box;
  font-family: inherit;
  font-size: .9rem;
}
.richtext-toolbar { display: flex; gap: .3rem; align-items: center; margin-top: .3rem; }
.richtext-toolbar select { width: auto; margin-top: 0; padding: .3rem .5rem; font-size: .78rem; }
.p-langtext-editor {
  min-height: 5.5em;
  margin-top: .4rem;
  padding: .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: .85rem;
  line-height: 1.4;
  overflow-y: auto;
}
.p-langtext-editor:focus { outline: 2px solid var(--sky, #1F7A78); outline-offset: -1px; }
.p-langtext-editor p { margin: 0 0 .5em; }
.p-langtext-editor p:last-child { margin-bottom: 0; }
.feld-reihe:not([hidden]) { display: flex; gap: .6rem; }
.feld-reihe label { flex: 1; }
/* Zweispaltiges Formular-Zeilenlayout (Grid statt Flex) - übernommen aus
   arbeitsvertraege.html/projekt-einstellungen.html, dort vorher als
   lokales Duplikat definiert. */
.formular-zeile:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* :not([hidden]) wie oben bei .feld-reihe: die Rollen-Kaestchen im
   Mitarbeiter-Dialog werden fuer die Personalleitung per hidden weggelegt
   (public/js/mitarbeiter.js), und ohne diesen Zusatz schlaege das display
   hier die UA-Regel [hidden]{display:none}. */
.checkbox-zeile:not([hidden]) { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.checkbox-zeile input { width: auto; margin: 0; }
.checkbox-zeile label { margin-bottom: 0; }
.formular-aktionen { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* ---- Fehler/Hinweise ---- */
#fehlermeldung, #nicht-berechtigt, .fehler { color: #C0362C; margin-top: 1rem; }

/* Kleine Fehlerzeile direkt an einem Bedienelement (statt oben auf der Seite).
   Stand 04.09.2026 hierher gehoben: die Klasse war nur im <style> von
   finanzen.html definiert, wurde aber auf drei weiteren Seiten benutzt -
   rechnungspruefung-pruefung.html (10x), rechnungspruefung.html (2x) und
   nu-bautagesbericht-extern.html (1x). Dort erschien der Text zwar, aber in
   normaler Schriftfarbe: eine Fehlermeldung, die nicht wie eine aussieht.
   Die lokale Definition in finanzen.html bleibt unangetastet und gewinnt dort
   weiterhin - sie ist ohnehin identisch. */
.fehler-inline { color: var(--gefahr); font-size: .85rem; }

/* ---- Bestätigungsdialog: unwiderrufliche Aktionen (z.B. Löschen) ----
   shell.js bestaetigen() setzt hidden, wenn es keine Warnung gibt. Ohne den
   Zusatz ueberstimmte display:flex das hidden, und jeder Dialog zeigte eine
   leere Warnleiste. :where() haelt die Spezifitaet auf der einer Klasse. */
.bv-bestaetigen-warnung:not(:where([hidden])) {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .8rem 0 0;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: var(--gefahr-tint);
  color: var(--gefahr);
  font-weight: 700;
}
.bv-bestaetigen-warnung::before { content: "⚠"; font-size: 1.1em; }
.primaer-button.gefahr-button { background: var(--gefahr); }
.primaer-button.gefahr-button:hover { background: #8A1200; }
/* Kleiner Knopf fuer eine unwiderrufliche Aktion, z.B. "Endgueltig loeschen"
   im Papierkorb. Dieselben Farben wie die seitenlokalen .gefahr-button-Regeln
   (arbeitszeit.html) - sonst saehe er aus wie der
   harmlose .mini-button direkt daneben. */
.mini-button.gefahr-button { background: #FBE2DE; color: #B3402F; border-color: #F3C3BB; }
.mini-button.gefahr-button:hover { background: #F3C3BB; }

/* ---- Sichtbarer Fokus-Stil (UX-Audit: Tastaturbedienung) ---- */
:focus-visible { outline: 2px solid var(--vento); outline-offset: 2px; border-radius: 2px; }

/* ---- Toast/Hinweis (siehe shell.js zeigeHinweis()) - Ersatz für alert() ---- */
.bv-toast-bereich {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 360px;
  width: calc(100vw - 2rem);
}
.bv-toast {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sun);
  box-shadow: var(--schatten-hoch);
  font-size: .85rem;
  color: var(--ink);
  animation: bv-toast-ein .18s ease-out;
}
.bv-toast-erfolg { border-left-color: var(--vento); }
.bv-toast-fehler { border-left-color: #B3402F; background: #FBE2DE; }
/* Teil L: der Mengenansatz meldet "gespeichert, aber mit Rechenfehlern" -
   weder Erfolg noch Fehlschlag, deshalb ein eigener Ton. */
.bv-toast-warnung { border-left-color: #B37A1E; background: #FAF1E2; }
.bv-toast-text { flex: 1; }
.bv-toast-schliessen {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  margin: -.1rem -.2rem 0 0;
}
.bv-toast-schliessen:hover { color: var(--ink); }
@keyframes bv-toast-ein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bv-toast { animation: none; } }

/* ---- Generischer Bestätigungsdialog (siehe shell.js bestaetigen()) - Ersatz für confirm() ---- */
#bv-bestaetigen-dialog { width: 400px; }
#bv-bestaetigen-dialog .formular-inhalt { padding-right: 1.5rem; }
#bv-bestaetigen-dialog p { margin: 0 0 1.2rem; font-size: .92rem; }

/* ---- Ladezustand (siehe shell.js bvLadeZeile()/bvLadeBlock()) ---- */
.bv-lade-zeile { text-align: center; color: var(--ink-soft); padding: 1.4rem !important; font-size: .85rem; }
.bv-lade-block { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 2rem; color: var(--ink-soft); font-size: .85rem; }
.bv-lade-punkte { display: inline-flex; gap: .25rem; margin-right: .5rem; }
.bv-lade-punkte span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vento);
  animation: bv-lade-puls 1s infinite ease-in-out;
}
.bv-lade-punkte span:nth-child(2) { animation-delay: .15s; }
.bv-lade-punkte span:nth-child(3) { animation-delay: .3s; }
@keyframes bv-lade-puls { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .bv-lade-punkte span { animation: none; opacity: .6; } }

/* ---- Befehlspalette (Strg/Cmd+K, siehe shell.js bvPaletteOeffnen()) ---- */
#bv-palette-dialog { width: 520px; max-width: 92vw; padding: 0; margin-top: 12vh; }
#bv-palette-dialog .dialog-x-button { display: none; }
.bv-palette-inhalt { display: flex; flex-direction: column; max-height: 60vh; }
.bv-palette-eingabe {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-family: inherit;
  border-radius: var(--radius) var(--radius) 0 0;
}
.bv-palette-eingabe:focus-visible { outline: none; }
.bv-palette-ergebnisse { overflow-y: auto; padding: .5rem; }
.bv-palette-eintrag {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: .6rem .7rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.bv-palette-eintrag svg { width: 18px; height: 18px; flex-shrink: 0; }
.bv-palette-eintrag.aktiv, .bv-palette-eintrag:hover { background: var(--vento-tint); color: var(--vento-deep); }
.bv-palette-leer { padding: 1.2rem; text-align: center; color: var(--ink-soft); font-size: .85rem; }

/* ---- Tabellen-Suche (siehe shell.js bvSucheVerdrahten()) ---- */
.bv-tabellen-suche {
  display: block;
  max-width: 320px;
  margin-bottom: .9rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: .85rem;
}

/* ---- Eingebetteter PDF-Betrachter (siehe js/pdfViewer.js) - ersetzt das
   frühere "in neuem Tab öffnen" durchgehend im ganzen Web-Frontend. ---- */
#bv-pdf-dialog { width: min(880px, 96vw); max-width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
#bv-pdf-dialog .bv-pdf-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .9rem 3.4rem .9rem 1.3rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
#bv-pdf-titel { font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-pdf-aktionen { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.bv-pdf-aktionen select { border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .5rem; font-size: .8rem; background: white; }
.bv-pdf-standard-button { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 1.05rem; padding: .2rem .3rem; line-height: 1; }
.bv-pdf-standard-button:hover, .bv-pdf-standard-button.ist-standard { color: var(--vento); }
.bv-papierformat-inline-auswahl { border: 1px solid var(--line); border-radius: var(--radius); padding: .15rem .35rem; font-size: .76rem; margin-left: .4rem; background: white; }
#bv-pdf-seiten { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; background: var(--sky); }
.bv-pdf-seite-wrapper { position: relative; box-shadow: 0 2px 10px rgba(35, 42, 41, .18); background: white; line-height: 0; }
.bv-pdf-seite-wrapper canvas { display: block; max-width: 100%; height: auto; }
.bv-pdf-unterschrift-flaeche { position: absolute; border: 2px dashed var(--vento); border-radius: var(--radius); cursor: crosshair; background: rgba(44, 169, 166, .06); }
.bv-pdf-ladehinweis, .bv-pdf-fehler { color: var(--ink-soft); font-size: .9rem; padding: 2rem; }
.bv-pdf-fehler { color: #B3402F; }

/* ---- Signatur-Pad (Zeichen-Canvas, siehe js/signaturPad.js) ---- */
#bv-signatur-dialog { width: min(560px, 94vw); }
.bv-signatur-leinwand-rahmen { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none; background: #fff; }
.bv-signatur-leinwand-rahmen canvas { display: block; width: 100%; height: 220px; cursor: crosshair; }
.bv-signatur-hinweis { font-size: .78rem; color: var(--ink-soft); margin: .5rem 0 0; }
.bv-tabellen-suche:focus-visible { outline-offset: 1px; }

/* ---- Notizbuch: schwebendes Symbol + Popup-Dialog (siehe shell.js) ---- */
.bv-notizbuch-symbol {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--vento);
  color: white;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Eigener, dichterer Schatten statt --schatten-hoch: der Entwurf setzt
     --schatten-hoch nur unter grosse Flaechen (Anwendungsrahmen, Dialog),
     wo der weite Weichzeichner mit -18px Ausdehnung noch traegt. Auf einem
     52px-Kreis schrumpft er zu nichts zusammen - im Bildschirmfoto bei
     375px verschwindet die Abhebung ganz, und der Knopf sitzt flach auf der
     Liste, ueber der er schweben soll. Deshalb bleibt es hier beim
     dichteren eigenen Wert. Gilt ebenso fuer .bv-notizbuch-fab. */
  box-shadow: 0 4px 14px rgba(35, 42, 41, .3);
  z-index: 9000;
  touch-action: none;
  cursor: grab;
  padding: 0;
}
.bv-notizbuch-dialog { width: min(480px, 94vw); height: min(80vh, 720px); padding: 0; border: none; border-radius: var(--radius); }
.bv-notizbuch-dialog .bv-notizbuch-inhalt { padding: 1.3rem 3.1rem 1.3rem 1.3rem; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.bv-notizbuch-kopf { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.bv-notizbuch-kopf h2 { margin: 0; font-size: 1.05rem; }
.bv-notizbuch-zurueck { border: none; background: none; color: var(--vento-deep); font-size: .9rem; font-weight: 600; cursor: pointer; padding: 0; }
#bv-notizbuch-liste-ansicht:not([hidden]) { position: relative; flex: 1; overflow-y: auto; }
.bv-notizbuch-eintrag { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; margin-bottom: .6rem; cursor: pointer; }
.bv-notizbuch-eintrag:hover { border-color: var(--vento); }
.bv-notizbuch-eintrag strong { display: block; font-size: .92rem; color: var(--ink); }
.bv-notizbuch-eintrag p { margin: .3rem 0 0; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-notizbuch-leer { color: var(--ink-soft); text-align: center; margin-top: 2rem; font-size: .88rem; }
.bv-notizbuch-fab {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--vento);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  /* Eigener Schatten, siehe .bv-notizbuch-symbol weiter oben. */
  box-shadow: 0 4px 14px rgba(35, 42, 41, .25);
}
#bv-notizbuch-editor-ansicht:not([hidden]) { flex: 1; display: flex; flex-direction: column; overflow: hidden; gap: .7rem; }
#bv-notizbuch-titel-feld { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; font-size: .95rem; font-weight: 600; }
.bv-notizbuch-reiter { display: flex; border-bottom: 1px solid var(--line); }
.bv-notizbuch-reiter button { flex: 1; border: none; background: none; padding: .5rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; cursor: pointer; }
.bv-notizbuch-reiter button.aktiv { color: var(--vento-deep); border-bottom-color: var(--vento); }
#bv-notizbuch-text-feld { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; font-size: .9rem; resize: none; font-family: inherit; }
#bv-notizbuch-zeichnung-bereich:not([hidden]) { flex: 1; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.bv-notizbuch-canvas-rahmen { position: relative; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none; background: #fff; }
.bv-notizbuch-canvas-rahmen canvas { display: block; width: 100%; height: 100%; }
.bv-lineal-knopf { position: absolute; top: .5rem; right: .5rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.9); color: #334155; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(35,42,41,.18); }
.bv-lineal-knopf.aktiv { border-color: #1F7A78; background: #1F7A78; color: #fff; }
.bv-notizbuch-spalte-schalter { border: none; background: none; font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; padding: 0 .2rem; }
.bv-notizbuch-spalte:not([hidden]) { position: absolute; top: 3.4rem; bottom: 0; left: 0; width: min(260px, 80%); z-index: 5; background: var(--card); border-right: 1px solid var(--line); box-shadow: 2px 0 12px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.bv-notizbuch-spalte-kopf { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.bv-notizbuch-spalte-kopf button { border: none; background: none; font-size: 1.1rem; color: var(--vento); cursor: pointer; }
#bv-notizbuch-spalte-inhalt { flex: 1; overflow-y: auto; }
.bv-notizbuch-abschnitt { border-bottom: 1px solid var(--line); }
.bv-notizbuch-abschnitt-kopf { display: flex; align-items: stretch; }
.bv-notizbuch-abschnitt-streifen { width: 5px; flex-shrink: 0; }
.bv-notizbuch-abschnitt-name { flex: 1; border: none; background: none; text-align: left; padding: .65rem .8rem; font-size: .87rem; color: var(--ink); cursor: pointer; }
.bv-notizbuch-abschnitt-name.aktiv { font-weight: 700; }
.bv-notizbuch-abschnitt-anzahl { color: var(--ink-soft); font-weight: 400; }
.bv-notizbuch-abschnitt-aktion { border: none; background: none; padding: .65rem .35rem; font-size: .9rem; cursor: pointer; }
.bv-notizbuch-abschnitt-aktion.gefahr { color: #B3402F; padding-right: .6rem; }
.bv-notizbuch-abschnitt-notizen { padding-bottom: .3rem; }
.bv-notizbuch-abschnitt-notizen button { display: block; width: 100%; border: none; background: none; text-align: left; padding: .35rem .9rem .35rem 1.3rem; font-size: .82rem; color: var(--ink-soft); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-notizbuch-abschnitt-notizen p { margin: 0; padding: .2rem .9rem .5rem 1.3rem; font-size: .78rem; color: var(--ink-soft); }
.bv-notizbuch-abschnitt-form { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.bv-notizbuch-abschnitt-form input { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .55rem; font-size: .84rem; }
.bv-notizbuch-abschnitt-form > button { border: none; border-radius: var(--radius); background: var(--vento); color: #fff; padding: .4rem; font-size: .82rem; font-weight: 700; cursor: pointer; }
.bv-notizbuch-abschnitt-farben { display: flex; gap: .35rem; }
.bv-notizbuch-abschnitt-farbe { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; }
.bv-notizbuch-abschnitt-farbe.aktiv { border: 3px solid var(--ink); }
.bv-notizbuch-abschnitt-wahl { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-soft); }
.bv-notizbuch-abschnitt-wahl select { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .5rem; font-size: .84rem; }
.bv-notizbuch-editor-aktionen { display: flex; justify-content: space-between; align-items: center; }
.bv-notizbuch-personalakte-button { border: none; background: none; color: var(--vento); padding: .5rem; font-size: .82rem; cursor: pointer; }
.bv-notizbuch-teilen-dialog { width: min(460px, 94vw); }
.bv-notizbuch-teilen-hinweis { font-size: .82rem; color: var(--ink-soft); }
.bv-notizbuch-teilen-eintrag { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .45rem; font-size: .87rem; color: var(--ink); cursor: pointer; text-align: left; }
.bv-notizbuch-teilen-eintrag.aktiv { border-color: var(--vento); color: var(--vento-deep); font-weight: 600; }
.bv-notizbuch-vorlagen { display: flex; gap: .4rem; }
.bv-notizbuch-vorlage { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-soft); padding: .35rem; font-size: .78rem; cursor: pointer; }
.bv-notizbuch-vorlage.aktiv { border: 2px solid var(--vento); background: var(--vento-tint); color: var(--vento-deep); font-weight: 700; }
.bv-notizbuch-werkzeugleiste { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem; }
.bv-notizbuch-werkzeug { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; }
.bv-notizbuch-werkzeug.aktiv { border-color: var(--vento); border-width: 2px; }
.bv-notizbuch-werkzeug:disabled { opacity: .35; cursor: default; }
.bv-notizbuch-werkzeug-punkt { display: block; border-radius: 50%; }
.bv-notizbuch-loeschen-button { border: none; background: none; color: #B3402F; padding: .5rem; font-size: .82rem; cursor: pointer; text-align: left; }
.bv-notizbuch-picker-overlay { position: fixed; inset: 0; background: rgba(35, 42, 41, .5); z-index: 9100; display: flex; align-items: center; justify-content: center; }
.bv-notizbuch-picker-karte { background: var(--card); border-radius: var(--radius); padding: 1.2rem; width: min(320px, 90vw); display: flex; flex-direction: column; gap: .8rem; }
.bv-notizbuch-picker-farben { display: flex; gap: .5rem; flex-wrap: wrap; }
.bv-notizbuch-picker-farbe { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
.bv-notizbuch-picker-farbe.aktiv { border: 2px solid var(--ink); }
.bv-notizbuch-picker-karte label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink-soft); }

.bv-bildmarkierung-dialog { width: min(600px, 96vw); height: min(85vh, 800px); padding: 0; border: none; border-radius: var(--radius); }
.bv-bildmarkierung-dialog .bv-bildmarkierung-inhalt { padding: 1.3rem 3.1rem 1.3rem 1.3rem; height: 100%; display: flex; flex-direction: column; overflow: hidden; gap: .8rem; }
.bv-bildmarkierung-canvas-aussen { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bv-bildmarkierung-canvas-rahmen { position: relative; width: 100%; max-height: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none; background: #111; }
.bv-bildmarkierung-canvas-rahmen canvas { display: block; width: 100%; height: 100%; }
.bv-bildmarkierung-aktionen { display: flex; justify-content: flex-end; gap: .6rem; }

/* Kopierfenster (Kalkulation, Konzept Kap. 3.6) - eigenstaendiges, fest
   rechts angedocktes, NICHT-modales Werkzeug (kein <dialog>, damit das
   Leistungsverzeichnis darunter weiter bedienbar bleibt). */
/* Ohne Fenstermanager: angedockt am rechten Rand, ueber der Seite liegend.
   Mit Manager (Klasse .bv-fensterinhalt, siehe fensterlayout.js) gibt das
   Kopierfenster position:fixed und z-index 8500 ab und wird ein Fenster wie
   jedes andere - sonst laege es ueber genau dem Raster, in das es kopiert. */
.kopierfenster.bv-fensterinhalt:not([hidden]) { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.kopierfenster:not([hidden]):not(.bv-fensterinhalt) { position: fixed; top: 3.4rem; bottom: 0; right: 0; width: min(680px, 96vw); z-index: 8500; background: var(--card); border-left: 1px solid var(--line); box-shadow: -4px 0 16px rgba(0,0,0,.18); display: flex; flex-direction: column; }
/* Werkzeugleiste des Preisspiegel-Fensters. Bewusst als Klasse und nicht
   als inline-Regel: ein inline display:flex haette Vorrang vor dem
   hidden-Attribut, mit dem die Leiste ein- und ausgeblendet wird. */
.ps-werkzeuge:not([hidden]) { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

/* Reihen, die per hidden-Attribut ein- und ausgeblendet werden. Bewusst
   als Klasse mit :not([hidden]) und NICHT als inline-Regel: eine inline
   display-Angabe hat Vorrang vor dem hidden-Attribut und macht es damit
   wirkungslos. Siehe scripts/oberflaeche-hidden-falle.test.js. */
/* Ressourcenauslastung - eigene Seite UND Fenster im Bauzeitenplan
   (Teil K, Stufe 6). Deshalb hier und nicht im <style> einer Seite. */
.ra-filter-reihe { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ra-filter-reihe label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.ra-tabelle-wrapper { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.ra-tabelle { border-collapse: collapse; min-width: 100%; font-size: .82rem; }
table.ra-tabelle th, table.ra-tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
table.ra-tabelle th:first-child, table.ra-tabelle td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); border-right: 1px solid var(--line); }
table.ra-tabelle thead th { background: var(--sky); color: var(--ink-soft); font-weight: 600; }
table.ra-tabelle td:first-child { font-weight: 600; }
.ra-typ-label { font-size: .72rem; color: var(--ink-soft); font-weight: 400; display: block; }
.ra-zelle-gruen { background: #E4F3E8; color: #1F6B3A; }
.ra-zelle-gelb { background: #FFF3D6; color: #8A5A00; }
.ra-zelle-rot { background: #FBE2DE; color: #B3402F; }
.ra-zelle-leer { color: var(--ink-soft); }
.ra-leer { color: var(--ink-soft); font-size: .85rem; padding: 1rem; }

.bv-reihe:not([hidden]) { display: flex; }

/* Sperrscheibe im ausgekoppelten Fenster, solange im Hauptfenster ein
   modaler Dialog offen ist. Liegt bewusst UEBER allem (auch ueber Toasts,
   die es im Nebenfenster ohnehin nicht gibt) und faengt jeden Klick ab. */
.bv-dialogsperre:not([hidden]) {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
  background: color-mix(in srgb, var(--ink, #0F172A) 45%, transparent);
  color: #fff; font-size: .95rem; line-height: 1.5;
  cursor: not-allowed;
}

.kopierfenster-kopf { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.kopierfenster-kopf button { border: none; background: none; font-size: 1rem; color: var(--ink-soft); cursor: pointer; }
.kopierfenster-koerper { flex: 1; display: flex; overflow: hidden; }
.kopierfenster-spalte-quelle { width: 240px; flex-shrink: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.kopierfenster-spalte-quelle input { margin: .6rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .84rem; }
.kopierfenster-liste { flex: 1; overflow-y: auto; }
.kopierfenster-quell-zeile { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .82rem; }
.kopierfenster-quell-zeile:hover { background: var(--vento-tint); }
.kopierfenster-quell-zeile.aktiv { background: var(--vento-tint); border-left: 3px solid var(--vento); }
.kopierfenster-quell-zeile span { color: var(--ink-soft); font-size: .76rem; }
.kopierfenster-spalte-baum { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.kopierfenster-baum { flex: 1; overflow-y: auto; padding: .4rem 0; }
.kopierfenster-quellposition-zeile { display: flex; gap: .5rem; padding: .35rem .8rem; font-size: .82rem; cursor: pointer; }
.kopierfenster-quellposition-zeile.tiefe-1 { padding-left: 1.8rem; color: var(--ink-soft); }
.kopierfenster-quellposition-zeile:hover { background: var(--vento-tint); }
.kopierfenster-quellposition-zeile.aktiv { background: var(--vento-tint); font-weight: 700; }
/* Mehrfachauswahl im Kopierfenster (Teil L, Bedienung 10). "kommt-mit" sind
   die Positionen, die ein angekreuzter Titel mitbringt: sichtbar ausgewaehlt,
   aber nicht einzeln abwaehlbar. */
.kopierfenster-quellposition-zeile { align-items: center; }
.kopierfenster-quellposition-zeile.kommt-mit { font-weight: 400; opacity: .75; cursor: default; }
.kopierfenster-quellposition-zeile.kommt-mit:hover { background: var(--vento-tint); }
.kopierfenster-haken { margin: 0; pointer-events: none; }
.kopierfenster-zeile-hinweis { margin-left: auto; font-size: .72rem; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.kopierfenster-zeile-nummer { color: var(--ink-soft); flex-shrink: 0; }
.kopierfenster-zeile-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopierfenster-fuss { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.kopierfenster-ziel-label { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft); flex: 1; }
.kopierfenster-ziel-label select { flex: 1; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .84rem; }
/* Sperrhinweis, wenn im Zielraster Ungespeichertes steht (Teil L). Der Fuss
   ist eine Zeile - der Hinweis darf sie umbrechen duerfen, sonst quetscht er
   den Zieltitel-Waehler zusammen. */
.kopierfenster-fuss { flex-wrap: wrap; }
.kopierfenster-sperrhinweis:not([hidden]) { display: block; flex-basis: 100%; order: -1; color: #B3402F; line-height: 1.35; }
@media (max-width: 720px) {
  .kopierfenster:not(.bv-fensterinhalt) { width: 100vw; top: 0; }
  .kopierfenster-koerper { flex-direction: column; }
  .kopierfenster-spalte-quelle { width: auto; max-height: 40%; border-right: none; border-bottom: 1px solid var(--line); }
}