/* ============================================================
   Verdichtungskontrollen Tool-UI — monochromes Design-System
   Quelle: Design-Doc §3 + abgesegnete Mockups (startseite-v4,
   intake-wizard-v3, screens-erzeugen-versand-v3, logo-v6).
   ============================================================ */

@font-face {
  font-family: 'Cinzel'; src: url('/static/fonts/Cinzel.ttf') format('truetype');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'Roboto'; src: url('/static/fonts/Roboto.ttf') format('truetype');
  font-weight: 100 900; font-display: swap;
}

:root {
  --bg: #F5F5F4; --surface: #FFFFFF; --ink: #1C1C1B; --muted: #8E8C88;
  --line: #E3E2DF; --line-mid: #CFCEC9;
  --gruen-stark: #0AA050; --gruen-leicht-bg: #E5F1E6;
  --gruen-leicht-text: #3F7A4D; --gruen-leicht-rand: #8FBF97;
  --cal: cubic-bezier(.16,.84,.44,1);
  /* Pillen-Palette Buendel 2a — warm-stone-Erweiterung */
  --rot-leicht-bg: #FDECEA; --rot-leicht-text: #C2382F;
  --rot-leicht-rand: #F2BDB6;
  --rot-mittel-bg: #F7C2BE; --rot-mittel-text: #A52A20;
  --rot-mittel-rand: #E59890;
  --rot-stark: #C2382F; --rot-stark-rand: #A52A20;
  --orange-text: #B25500; --orange-rand: #D67F2E;
  --gelb-leicht-bg: #FBF1C8; --gelb-leicht-text: #856404;
  --gelb-leicht-rand: #E8C547;
  /* Import-Vorschau — Konfidenz-Hintergruende je Zelle (V260619.06/.07).
     `--konfidenz-orange-bg` loest die fruehere Hartfarbe (#FFEEDE) ab.
     Die `--konfidenz-pille-*`-Toene sind BEWUSST blasser als die jeweiligen
     `*-leicht-bg`-Pillenfuellungen, damit eine Status-Pille (eigene Fuellung +
     Rand) immer sichtbar AUF dem Konfidenz-Wash der Zelle liegt und nicht
     verschmilzt — Pille bleibt lesbar (V260619.07). */
  --konfidenz-orange-bg: #FFEEDE;
  --konfidenz-pille-gruen: #F2F8F3; --konfidenz-pille-gelb: #FCF8E8;
  --konfidenz-pille-orange: #FFF6EE; --konfidenz-pille-rot: #FDF3F2;
  /* --- Standard-Lücken (Paket A 2026-06-17): additiv, ändern nichts Bestehendes --- */
  --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem;
  --space-md: 1rem;    --space-lg: 1.4rem; --space-xl: 2rem;
  --radius-sm: 4px;    --radius-md: 8px;   --radius-lg: 12px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.20);
  --fs-h1: 1.7rem; --fs-h2: 1.15rem; --fs-body: .9rem; --fs-sm: .82rem; --fs-label: .68rem;
  --dur-fast: .14s; --dur: .25s;
  --on-ink: #FFFFFF; /* Text auf dunklen Flächen */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); font-family: 'Roboto', sans-serif; color: var(--ink); }
a { color: inherit; text-decoration: none; }

/* ---- Eintritts-Choreografie ---- */
@keyframes inLeft   { from{opacity:0;transform:translateX(-34px)} to{opacity:1;transform:none} }
@keyframes inTop    { from{opacity:0;transform:translateY(-40px)} to{opacity:1;transform:none} }
@keyframes inBottom { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:none} }
@keyframes growLine { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* Scroll-getriggert: .io ist unsichtbar, bis app.js die Klasse .in setzt
   (IntersectionObserver, threshold 0.6). Variante steuert die Richtung. */
.io { opacity: 0; }
/* SEITENKOPF-STANDARD (2026-06-21): ddTop/ddBot werden ausschließlich von der
   Seitenüberschrift (<h1 class="h1 io ddTop">) und ihrem Lead genutzt. Sie
   animieren SOFORT beim Laden — NICHT scroll-/observer-getriggert. Grund: auf
   schweren Seiten (große Tabelle) wurde der Observer-Start hinter dem Layout
   eingereiht → die Überschrift hing sichtbar bei opacity:0, bevor die Animation
   begann (wirkte träge). Als Load-Animation startet sie sofort, wie auf der
   leichten Verwaltungs-Seite. NUR der verzögerte START wurde behoben — die
   GESCHWINDIGKEIT bleibt unverändert bei 2.4s (etablierte Geschwindigkeit der
   Verwaltungs-Seite + Logo). `both` füllt opacity:0→1, daher kein .in/Observer
   nötig. */
.io.ddTop { animation: inTop 2.4s var(--cal) both; }
.io.ddBot { animation: inBottom 2.4s var(--cal) both; animation-delay: .1s; }
/* Übrige Inhalts-Elemente (ddLeft) bleiben scroll-getriggert über .in. */
.io.in.ddLeft { animation: inLeft 2.4s var(--cal) both; }

/* Barrierefreiheit: Nutzer mit „Bewegung reduzieren" bekommen keine
   Transform-/Eingangsanimation — Inhalt sofort sichtbar (W3C-Empfehlung). */
@media (prefers-reduced-motion: reduce) {
  .io, .io.ddTop, .io.ddBot, .io.in.ddLeft,
  .logo .l1, .logo .l2wrap, .logo .lline {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ---- Layout ---- */
.app-main { max-width: 1280px; margin: 0 auto; padding: 2.4rem 1.5rem 4rem; }
.h1 { font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.7rem;
  text-align: center; margin: 0 0 .45rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem; }
.lead { font-size: .9rem; color: var(--muted); font-weight: 300;
  text-align: center; margin: 0 0 2rem; }
/* Überschriften IMMER Cinzel (Design-System). Zentrierung/Sondergrößen via .h1 bzw.
   scoped Regeln (.modal-head h2, .quelle-kopf h2, .kachel-name …) überschreiben die Größe. */
h1, h2, h3, h4 { font-family: 'Cinzel', serif; font-weight: 500; line-height: 1.25; color: var(--ink); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
/* Schlüssel-Wert-Liste (Detail-Daten) */
.kv-liste { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.kv-liste dt { color: var(--muted); font-size: .82rem; align-self: center; }
.kv-liste dd { margin: 0; }
.tag { font-family: 'Roboto', sans-serif; font-size: .58rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-mid); border-radius: 20px; padding: .16rem .55rem; }

/* ---- Kopfbalken ---- */
.bar { display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: .85rem 1.6rem; }

/* Logo (logo-v6): „Grimme" über „Bodengutachten", Haarlinie mittig hinter
   dem zweiten Wort. Animation läuft einmal beim Laden. */
.logo { display: inline-flex; flex-direction: column; align-items: center; }
.logo .l1 { font-family: 'Cinzel', serif; font-weight: 400; color: var(--ink);
  line-height: 1; font-size: 1.3rem; letter-spacing: .05em; padding-left: .05em;
  animation: inTop 2.4s var(--cal) both; animation-delay: .15s; }
.logo .l2wrap { position: relative; width: 100%; display: flex;
  justify-content: center; align-items: center; margin-top: .06rem;
  animation: inBottom 2.4s var(--cal) both; animation-delay: .15s; }
.logo .l2 { position: relative; z-index: 1; font-family: 'Cinzel', serif;
  font-weight: 400; color: var(--ink); line-height: 1;
  background: var(--surface); font-size: .46rem; letter-spacing: .03em;
  padding: 0 .22em; }
.logo .lline { position: absolute; top: 50%; left: -4px; right: -4px;
  height: 1px; margin-top: -.5px; transform: scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg,transparent 0%,var(--ink) 14%,var(--ink) 86%,transparent 100%);
  animation: growLine 2.5s var(--cal) both; animation-delay: 2.3s; }

/* Navigation — Signatur-Hover-Linie wächst aus der Mitte */
.nav { display: flex; gap: .3rem; }
.nav a { position: relative; font-size: .82rem; color: var(--muted);
  padding: .45rem .85rem; }
.nav a.on { color: var(--ink); }
.nav a::after { content: ''; position: absolute; left: .5rem; right: .5rem;
  bottom: .15rem; height: 1px; transform: scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg,transparent,var(--ink) 30%,var(--ink) 70%,transparent);
  transition: transform .5s var(--cal); }
.nav a.on::after, .nav a:hover::after { transform: scaleX(1); }

/* ---- Kacheln (Startseite) ---- */
.tiles { display: flex; gap: .7rem; justify-content: center; max-width: 780px;
  margin: 0 auto; flex-wrap: wrap; }
.tile { flex: 1 1 210px; max-width: 240px; position: relative;
  padding: 1.6rem 1.4rem; text-align: left; background: transparent;
  border: none; font: inherit; color: inherit; cursor: pointer;
  transition: background .4s; }
.tile .ic { width: 40px; height: 40px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; color: var(--ink);
  border: 1px solid var(--line); background: var(--surface);
  margin-bottom: .95rem; transition: background .4s; }
.tile h3 { font-size: .96rem; font-weight: 500; margin: 0 0 .35rem; }
.tile p { font-size: .79rem; color: var(--muted); font-weight: 300;
  margin: 0; line-height: 1.5; }
.tile .lineFx { position: absolute; left: 0; right: 0; height: 1px;
  transform: scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg,transparent 0%,var(--ink) 26%,var(--ink) 74%,transparent 100%);
  transition: transform .6s var(--cal); }
.tile .topFx { top: 0; } .tile .botFx { bottom: 0; }
.tile:not(.dis):hover { background: var(--surface); }
.tile:not(.dis):hover .ic { background: var(--bg); }
.tile:not(.dis):hover .lineFx,
.tile.sel .lineFx { transform: scaleX(1); }
.tile.sel { background: var(--surface); }
.tile.dis { opacity: .5; cursor: not-allowed; }
.tile .badge { position: absolute; top: 1rem; right: 1rem; font-size: .59rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 20px; padding: .14rem .52rem; }

/* ---- Aktionsleiste ---- */
.actionbar { display: flex; align-items: center; justify-content: center;
  gap: 1.4rem; margin-top: 2.4rem; flex-wrap: wrap; }
.actionbar .hint { font-size: .8rem; color: var(--muted); font-weight: 300; }

/* ---- Schritt-Indikator (Assistent) ---- */
.steps { display: flex; align-items: center; justify-content: center;
  gap: .7rem; margin-bottom: 1.6rem; }
.step { display: flex; align-items: center; gap: .45rem; font-size: .8rem;
  color: var(--muted); }
.step .n { width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--line-mid); display: flex; align-items: center;
  justify-content: center; font-size: .7rem; }
.step.act { color: var(--ink); }
.step.act .n { border-color: var(--ink); background: var(--ink); color: #fff; }
.step.done .n { border-color: var(--ink); color: var(--ink); }
.step-link { width: 34px; height: 1px;
  background: linear-gradient(90deg,transparent,var(--line-mid) 25%,var(--line-mid) 75%,transparent); }

/* ---- Panel / Tabellen ---- */
.panel { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; }

/* ---- Kachel-Hub (globale Komponente — Bericht-/Uebersichts-Hubs) ---- */
.hub { max-width: 1080px; margin: 0 auto; }
.kachelreihe { display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--cal),
    box-shadow var(--dur) var(--cal), border-color var(--dur) var(--cal); }
.kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--line-mid); }
.kachel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kachel-name { font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 1.05rem; line-height: 1.2; }
.kachel-sub { font-size: .85rem; color: var(--muted); font-weight: 300; }
.hub-sektion { margin-bottom: var(--space-xl); }
.hub-sektion-titel { font-size: .9rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 .6rem .2rem; }

/* ===== Verwaltungs-Konsolidierung — globale Klassen, lösen per-Seite-<style> ab (§8) ===== */
.kpi { text-align: right; font-variant-numeric: tabular-nums; }
.kpi .trend { color: var(--muted); font-size: .85em; }
.kuerzel-badge { display: inline-block; padding: 1px 6px; margin-right: .35rem;
  background: var(--line); border-radius: var(--radius-sm); font-size: .8rem; }
.tbl-mitte td { vertical-align: middle; }
/* Scroll-Wrapper für breite Tabellen: scrollt die Tabelle intern (z.B. Handy),
   statt die Seite breit zu machen. Titel/Panel-Inhalt drumherum bleibt stehen. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zelle-rechts { text-align: right; white-space: nowrap; }
.panel-kopf { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-md); }
.gedimmt { opacity: .55; }
.btn-loeschen:hover { color: var(--rot-stark); border-color: var(--rot-stark); }
.meldung-fehler { background: var(--rot-leicht-bg); border: 1px solid var(--rot-leicht-rand);
  border-radius: var(--radius-md); padding: .7rem .9rem; font-size: .82rem;
  color: var(--rot-leicht-text); margin: 0 auto 1rem; max-width: 900px; line-height: 1.45; }
.meldung-erfolg { background: var(--gruen-leicht-bg); border: 1px solid var(--gruen-leicht-rand);
  border-radius: var(--radius-md); padding: .7rem .9rem; font-size: .82rem;
  color: var(--gruen-leicht-text); margin: 0 auto 1rem; max-width: 900px; line-height: 1.45; }
.meldung-warnung { background: var(--gelb-leicht-bg); border: 1px solid var(--gelb-leicht-rand);
  border-radius: var(--radius-md); padding: .7rem .9rem; font-size: .82rem;
  color: var(--gelb-leicht-text); margin: 0 auto 1rem; max-width: 900px; line-height: 1.45; }

/* ---- Projektlisten-Startseite: Import-Drop-Zone (Bündel A/6) ---- */
.import-dropzone-form { max-width: 1080px; margin: 0 auto var(--space-lg); }
/* Datei-Input sichtbar verborgen, aber fokussierbar (Tastatur-Trigger). */
.import-dropzone-input { position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; }
.import-dropzone { display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2xs); text-align: center; cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  border: 1.5px dashed var(--line-mid); border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--cal), background var(--dur) var(--cal); }
.import-dropzone:hover,
.import-dropzone-form:focus-within .import-dropzone { border-color: var(--ink);
  background: var(--bg); }
.import-dropzone.dragover { border-color: var(--ink); border-style: solid;
  background: var(--bg); }
.import-dropzone-icon { font-size: 1.4rem; color: var(--muted); line-height: 1; }
.import-dropzone-titel { font-weight: 500; }
.import-dropzone-sub { font-size: .82rem; color: var(--muted); font-weight: 300;
  max-width: 46rem; line-height: 1.5; }
.import-dropzone-laden { text-align: center; color: var(--muted); font-size: .85rem;
  max-width: 1080px; margin: .5rem auto 0; }

/* ---- Projektlisten-Startseite: Resume-Panel offene Importe (Bündel A/7) ---- */
.import-resume { max-width: 1080px; margin: 0 auto var(--space-lg);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--space-md) var(--space-lg); }
.import-resume-titel { font-size: 1.05rem; margin: 0 0 .3rem; }
.import-resume-intro { color: var(--muted); font-size: .85rem; font-weight: 300;
  margin: 0 0 var(--space-sm); line-height: 1.5; }
.import-resume-liste { list-style: none; margin: 0; padding: 0; }
.import-resume-liste li { display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2xs); }
.import-resume-aktionen { display: flex; align-items: center; gap: var(--space-sm); }
.import-resume-aktionen form { display: inline; margin: 0; }

/* ---- Projektlisten-Startseite: Jahres-Karten + Verlauf-Panel (Bündel A/5) ---- */
.pl-karten { margin-bottom: var(--space-lg); }
.pl-karte-jahr { font-size: 1.5rem; letter-spacing: .01em; }
.pl-karte-aktionen { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-sm); margin-top: var(--space-xs); }
.pl-karte-aktionen form { display: inline; margin: 0; }
/* „+ Jahr anlegen"-Karte: gestrichelt, ohne Hebe-Effekt (Anlege-Aktion, kein Ziel-Link) */
.pl-karte-neu { border-style: dashed; border-color: var(--line-mid);
  background: transparent; box-shadow: none; }
.pl-karte-neu:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.pl-karte-neu .pl-karte-jahr { color: var(--muted); }
.pl-neu-jahr { padding: .3rem .5rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
  font: inherit; cursor: pointer; }
.pl-verlauf { max-width: 1080px; margin: 0 auto 1.6rem; }

/* Verwaltung-Detailseiten (2-Spalten + Regel-Editor) */
.detail-2-1 { display: grid; gap: var(--space-md); max-width: 1180px; margin: 0 auto;
  grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .detail-2-1 { grid-template-columns: 1fr; } }
.panel-pad { padding: 1.2rem 1.4rem; }
.detail-form .field { margin-bottom: .6rem; }
.inaktiv-pille { display: inline-block; padding: .15rem .55rem; margin-left: .5rem;
  background: var(--gelb-leicht-bg); color: var(--gelb-leicht-text);
  border-radius: 99px; font-size: .75rem; vertical-align: middle; }
.regel-zeile { display: flex; gap: .4rem; align-items: center; padding: .3rem 0; }
.regel-feld { flex: 1.2; max-width: 200px; }
.regel-operator { flex: .8; max-width: 130px; }
.regel-wert { flex: 2; }
.regel-loeschen { padding: .25rem .55rem; line-height: 1; }
.trenner { border: 0; border-top: 1px solid var(--line); margin: var(--space-md) 0; }

/* Mini-/Warn-Pillen + Zeilen-Highlight (Verwaltung-Listen) */
.mini-pille { display: inline-block; margin-left: .4rem; padding: .1rem .5rem;
  border-radius: 99px; font-size: .72rem; font-weight: 600; }
.mini-pille-rot { background: var(--rot-leicht-bg); color: var(--rot-leicht-text); }
.mini-pille-gelb { background: var(--gelb-leicht-bg); color: var(--gelb-leicht-text); }
.zeile-ueberlast td { background: var(--rot-leicht-bg); }

/* Filter-Leiste + Status-Pillen (Mitarbeiter-Liste) */
.filterleiste { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  padding: .6rem .8rem; margin-bottom: 1rem; background: var(--bg);
  border-radius: var(--radius-md); }
.check-pille { display: inline-flex; gap: .3rem; align-items: center;
  padding: .25rem .55rem; border-radius: 99px; background: var(--bg); font-size: .82rem; }
.status-pille { display: inline-block; padding: .15rem .55rem; border-radius: 99px;
  font-size: .78rem; font-weight: 500; vertical-align: middle; }
.ma-status-aktiv    { background: var(--gruen-leicht-bg); color: var(--gruen-leicht-text); }
.ma-status-ehemalig { background: var(--gelb-leicht-bg);  color: var(--gelb-leicht-text); }
.ma-status-neu      { background: var(--line);            color: var(--muted); }

.toolbar { display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; gap: .6rem; font-size: .79rem; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; text-align: left; padding: .7rem .8rem; }
.tbl thead tr { border-bottom: 1px solid var(--ink); }
/* Sticky-Thead (Buendel 5e) — Header bleibt beim Scrollen oben sichtbar. */
.tbl-sticky thead th { position: sticky; top: 0; background: var(--bg);
  z-index: 2; box-shadow: 0 1px 0 var(--ink); }
/* Sortier-Header (Buendel 5e) */
.tbl th.th-sort { padding: 0; }
/* L27.03 (2026-05-27): horizontales Padding auf TD-Niveau (.35rem) damit
   Spalten mit kurzem Content (Projektnummer, Auftrag, Außen) nicht durch
   den Header künstlich breiter werden. Vertikal bleibt der Header etwas
   luftiger, weil dort der Click-Bereich des Sort-Links sitzt. */
.tbl th.th-sort .sort-link { display: block; padding: .55rem .35rem;
  color: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap; }
.tbl th.th-sort .sort-link:hover { color: var(--ink); background: #FAFAF9; }
.tbl th.th-sort-aktiv .sort-link { color: var(--ink); font-weight: 600; }
.tbl th .sort-pfeil { display: inline-block; margin-left: .25em;
  font-size: .85em; opacity: .85; }
/* K6 / K26.08 (2026-05-27): Suchfeld OHNE Lupen-Wrapper — Input ist
   direkt `.inp` und optisch identisch zu Filter-Box-Triggern. Der alte
   `.suchfeld`-Wrapper wird nicht mehr benoetigt. */

/* Multi-Select-Filter mit Type-ahead (Buendel 5e) */
.multi-filter { position: relative; }
.multi-filter > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: .3rem; user-select: none; }
.multi-filter > summary::-webkit-details-marker { display: none; }
.multi-filter .multi-filter-alle { color: var(--muted); font-size: .85rem; }
.multi-filter .multi-filter-count { font-weight: 500; }
.multi-filter .multi-filter-caret { font-size: .7rem; opacity: .6;
  transition: transform .15s; }
.multi-filter[open] .multi-filter-caret { transform: rotate(180deg); }
.multi-filter-dropdown { position: absolute; left: 0; right: 0; top: 100%;
  margin-top: .3rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.08); z-index: 10;
  padding: .5rem; min-width: 240px; max-width: 360px; }
.multi-filter-search { width: 100%; margin-bottom: .4rem; font-size: .85rem; }
.multi-filter-liste { max-height: 320px; overflow-y: auto; }
.multi-filter-option { display: flex; align-items: center; gap: .5rem;
  padding: .35rem .35rem; font-size: .85rem; border-radius: 4px;
  cursor: pointer; }
.multi-filter-option:hover { background: #FAFAF9; }
.multi-filter-option input { margin: 0; }
.multi-filter-option.versteckt { display: none; }
/* P23.23.3 (2026-05-23): "-alle-" als klickbarer Listeneintrag ganz oben —
   volle Breite, linksbuendig, dezenter Hover wie die Optionen darunter. */
.multi-filter-alle-option { display: block; width: 100%; text-align: left;
  padding: .35rem .35rem; font-size: .85rem; color: var(--muted);
  border: 0; background: none; border-radius: 4px; cursor: pointer; }
.multi-filter-alle-option:hover { background: #FAFAF9; }
.multi-filter-leer { padding: .5rem; font-size: .8rem; color: var(--muted);
  text-align: center; }

/* D7 (2026-05-26): Chips unter dem Filter-Dropdown — einzeln entfernbar
   statt nur Counter "N gewaehlt". */
.filter-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; background: var(--surface);
  border: 1px solid var(--line-mid); border-radius: 999px;
  padding: .1rem .35rem .1rem .55rem; color: var(--ink); }
.filter-chip-x { background: none; border: 0; cursor: pointer;
  font-size: .9rem; line-height: 1; padding: 0 .1rem;
  color: var(--muted); }
.filter-chip-x:hover { color: var(--rot-stark); }

/* N5 / V260531.03e: Schnellauswahl + Filter-Formular liegen gemeinsam in
   einer Box (`.filter-container`). Die Box traegt jetzt die Panel-Optik +
   Maße (frueher am `#filter-form` direkt). Die Schnellauswahl ist die erste
   Zeile, durch eine duenne Trennlinie vom Formular abgesetzt. */
.filter-container { max-width: 1100px; margin: 0 auto .8rem;
  padding: 1rem 1.2rem; }
.filter-container .schnellauswahl { max-width: none; margin: 0 0 .8rem;
  padding-bottom: .8rem; border-bottom: 1px dashed var(--line); }

/* N5 / V260531.03c: Sichtbare "Dringlichkeit oben"-Checkbox rechts an der
   Pillen-Filter-Zeile (`margin-left:auto` schiebt sie nach rechts). */
.dringlichkeit-check { margin-left: auto; display: inline-flex;
  align-items: center; gap: .35rem; cursor: pointer; font-size: .8rem;
  color: var(--ink); align-self: center; }
.dringlichkeit-check input { margin: 0; cursor: pointer; }

/* K5 / Pkt 7 (2026-05-27): Pillen-Filter umgebaut — EINE Pille pro
   Status-Spalte (Bericht/Rechnung/Labor). Klick oeffnet ein Dropdown
   mit allen Zustaenden; ausgewaehlte Zustaende erscheinen als Chips
   in Spalten-Farbe. Mehrfach-Auswahl pro Spalte erlaubt. */
.pillen-filter-zeile { display: flex; flex-wrap: wrap; gap: 1rem .8rem;
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px dashed var(--line); }
.pillen-filter-block { display: flex; flex-direction: column; gap: .25rem; }
.pillen-filter-multi { position: relative; }
.pillen-filter-trigger { list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  border: 0; background: transparent; padding: 0; }
.pillen-filter-trigger::-webkit-details-marker { display: none; }
.pillen-filter-pille { background: var(--line); color: var(--ink);
  font-weight: 500; padding: .25rem .6rem; }
.pillen-filter-multi[open] .pillen-filter-pille {
  box-shadow: 0 0 0 2px var(--ink); }
.pillen-filter-dropdown { min-width: 200px; }
.pillen-filter-option { display: flex !important; align-items: center;
  gap: .5rem; padding: .3rem .35rem; }
.pillen-filter-option input { margin: 0; }
.filter-chip-pille { font-size: .7rem; padding: .15rem .35rem .15rem .5rem;
  border-radius: 999px; cursor: default; display: inline-flex;
  align-items: center; gap: .15rem; }
.filter-chip-pille .filter-chip-x { color: inherit; opacity: .7;
  margin-left: .15rem; }
.filter-chip-pille .filter-chip-x:hover { opacity: 1; }

/* L27.12 (2026-05-28): Zentrale Filter-Chip-Leiste — eine Zeile fuer
   alle aktiven Filter + "Alle entfernen"-Button am Ende. */
.filter-chips-leiste { display: flex; flex-wrap: wrap; gap: .35rem;
  align-items: center; margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--line); }
/* 03d (V260531.03d) kehrt M13 bewusst um: nur EIN Reset-Control. Der
   neutrale "Zurücksetzen"-Link ist entfernt; der rote "alle Filter
   entfernen"-Button traegt jetzt selbst `margin-left:auto` (rechtsbuendig). */
.filter-alle-entfernen { background: var(--surface); color: var(--rot-stark);
  border: 1px solid var(--line-mid); border-radius: 999px;
  font-size: .72rem; padding: .15rem .55rem; cursor: pointer;
  margin-left: auto;
  transition: background .15s, color .15s; }
.filter-alle-entfernen:hover { background: var(--rot-stark); color: #FFFFFF;
  border-color: var(--rot-stark); }

/* Pkt 2 (2026-05-26): Dringlichkeits-Toggle rechts vom Suchfeld. */
.suche-bar { display: flex; align-items: flex-start; gap: .8rem; }
.suche-input { flex: 1; font-size: .95rem; padding: .45rem .7rem; }
.suche-bar-rechts { display: flex; flex-direction: column; gap: .4rem;
  align-items: flex-start; min-width: 180px; }
.suche-bar-rechts .neues-projekt-btn { width: 100%; }
/* Ticker-Kennzahlen-Leiste oben auf /projekte (Block K) — Grid-Layout aus dem
   früheren Inline-`style` in eine Klasse gezogen (Inline-Layout vermeiden +
   ermöglicht das Ausblenden auf dem Handy, s. @media unten). #ticker-leiste
   bleibt als htmx-oob-Ziel an der id. */
.ticker-leiste { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; max-width: 1000px; margin: 0 auto 1.4rem; }
.dringlichkeit-toggle { display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; cursor: pointer; user-select: none;
  padding: .35rem .6rem; border: 1px solid var(--line-mid);
  border-radius: 6px; background: var(--surface);
  white-space: nowrap; transition: background .12s; }
.dringlichkeit-toggle:hover { background: var(--line); }
.dringlichkeit-toggle input { margin: 0; }
.dringlichkeit-toggle-text { font-weight: 500; }
.tbl td { padding: .5rem .35rem; font-size: .83rem;
  border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .25s; }
.tbl tbody tr:hover { background: #FAFAF9; }
.tbl tbody tr.on { background: #F4F4F2; }
.pnr, .rnr { font-weight: 500; }
.dim { color: var(--muted); }
.st { font-size: .76rem; color: var(--muted); }

/* ---- Lucide-Inline-SVG-Icons (Sprite _icon_sprite.html + Macro icon()) ----
   Geometrie-only <symbol>s; Optik hier. currentColor laesst das Icon die
   Textfarbe (--ink / Status-/Marker-Farben) erben -> passt ins Monochrom-System. */
.ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }

/* ---- Pills / Segment-Schalter ---- */
.pill { display: inline-block; font-size: .7rem; padding: .18rem .6rem;
  border-radius: 20px; border: 1px solid var(--line-mid); color: var(--muted);
  background: transparent; margin-right: .3rem; cursor: pointer;
  user-select: none; transition: background .25s, border-color .25s, color .25s; }
/* ---- Pillen-Zustaende (Buendel 2a, Block E) ---- */
.pill.zustand-entfaellt { background: transparent; color: var(--muted);
  border-color: transparent; padding-left: 0; padding-right: 0;
  cursor: default; }
/* L27.02-Offen-Konsistent (User-Wunsch 2026-05-27): "offen" ueberall
   intensiv-rot, KEIN Rand, weisse Schrift — Bericht/Rechnung/Labor.  */
.pill.zustand-offen { background: var(--rot-stark);
  color: #FFFFFF; border-color: transparent; font-weight: 600; }
/* ---- L27.02 Workflow-Pillen (V260529.01, 2026-05-29) ----
   User-Wortlaut 2026-05-29 (Bericht/Rechnung-Workflow rot statt gelb/gruen):
   - word:    Rand+Schrift intensiv rot, Fuellfarbe schwach rot.
   - checken: KEIN Rand, Fuellfarbe schwach rot, Schrift intensiv rot.
   - bereit:  KEIN Rand, Fuellfarbe schwach rot, Schrift schwarz/dunkel. */
.pill.zustand-word { background: var(--rot-leicht-bg);
  color: var(--rot-stark); border-color: var(--rot-stark); }
.pill.zustand-checken { background: var(--rot-leicht-bg);
  color: var(--rot-stark); border-color: transparent; font-weight: 600; }
.pill.zustand-bereit { background: var(--rot-leicht-bg);
  color: var(--ink); border-color: transparent; }
.pill.zustand-zugeordnet { background: var(--gruen-leicht-bg);
  color: var(--gruen-leicht-text); border-color: var(--gruen-leicht-rand); }
/* V260529.01 (User-Wunsch 2026-05-29): Labor in_arbeit folgt jetzt der
   Farblogik von "Word" (Bericht/Rechnung) — Fuellfarbe schwach rot,
   Rand + Schrift intensiv rot (vorher intensiv gruen ohne Rand). */
.pill.zustand-in-arbeit { background: var(--rot-leicht-bg);
  color: var(--rot-stark); border-color: var(--rot-stark); font-weight: 600; }
.pill.zustand-deadline-bald { background: var(--rot-mittel-bg);
  color: var(--rot-mittel-text); border-color: var(--rot-mittel-rand); }
.pill.zustand-ueberfaellig { background: var(--rot-stark); color: #FFFFFF;
  border-color: var(--rot-stark-rand); font-weight: 600; }
.pill.zustand-zu-kontrollieren { background: var(--surface);
  color: var(--orange-text); border-color: var(--orange-rand); }
/* Pkt 10 (2026-05-26): versendet = intensiv gruen, KEIN Rand, weisse Schrift. */
.pill.zustand-versendet { background: var(--gruen-stark);
  color: #FFFFFF; border-color: transparent; font-weight: 600; }
/* Pkt 10c (2026-05-26): erfasst = Rand+Schrift intensiv gruen, Fuellung blass. */
.pill.zustand-erfasst { background: var(--gruen-leicht-bg);
  color: var(--gruen-stark); border-color: var(--gruen-stark);
  font-weight: 500; }
/* Pkt 10c (2026-05-26): geldeingang = vollflaechig grau (auch Schrift) —
   alles abgeschlossen. */
.pill.zustand-geldeingang { background: var(--line); color: var(--muted);
  border-color: var(--line-mid); }
.pill.zustand-in-bearbeitung { background: #EEF3F8;
  color: #2C6E9B; border-color: #B6D2E6; }
.pill.zustand-fertig { background: var(--line); color: var(--muted);
  border-color: var(--line-mid); }
/* V260603.10 (2026-06-03): Die drei Mahnstufen M1/M2/M3 sind zu EINEM
   Zustand „Mahnung" kollabiert — eine gelbe Pille (Optik wie die fruehere
   Mahnstufe-Pille), KEIN eskalierendes „!"-Praefix (das frueher die Stufen
   farb-unabhaengig trennte) mehr noetig. */
.pill.zustand-mahnung { background: var(--gelb-leicht-bg);
  color: var(--gelb-leicht-text); border-color: var(--gelb-leicht-text);
  font-weight: 700; }

/* Doppelpille Labor (Pkt 7 2026-05-26): CL und BML als visuell verbundene
   Pille mit Trenner; jede Haelfte bleibt eigener Click-Trigger.
   Pille rendert manchmal direkt (read-only), manchmal als
   <details class="zelle-dropdown"><summary class="pill"> (edit-Modus). */
.pill-doppel { display: inline-flex; align-items: stretch; vertical-align: middle;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-mid); margin-right: .3rem; }
.pill-doppel > .pill,
.pill-doppel > details > summary.pill {
  border: 0; border-radius: 0; margin: 0;
  padding: .18rem .55rem; }
.pill-doppel > .pill + .pill,
.pill-doppel > details + details > summary.pill {
  border-left: 1px solid var(--line-mid); }
.pill-doppel > details { display: inline-flex; }

/* Labor "-" (Pkt 7 2026-05-26): wenn CL UND BML entfallen, reines "-" Zeichen,
   kein Pillen-Hintergrund. */
.labor-leer { color: var(--muted); padding: 0 .3rem; cursor: default; }

/* K1/Pkt 11 (2026-05-27): allgemeines "-" fuer entfallene Bericht/Rechnung.
   Im Edit-Modus klickbar (Trigger fuer das Status-Dropdown); das Hover-
   ✏-Symbol macht visuell klar, dass sich der Zustand zurueckholen laesst. */
.zelle-leer { color: var(--muted); padding: 0 .3rem; cursor: default;
  display: inline-block; }
summary.zelle-leer { cursor: pointer; position: relative;
  list-style: none; }
summary.zelle-leer::-webkit-details-marker { display: none; }
summary.zelle-leer .zelle-dropdown-edit { display: none;
  margin-left: .2rem; font-size: .7rem; color: var(--muted); }
.zelle-edit-container:hover summary.zelle-leer .zelle-dropdown-edit,
summary.zelle-leer:hover .zelle-dropdown-edit { display: inline; }

/* Notiz-Popover-Fenster (M11a / V260529.08b 2026-05-30): ersetzt den
   frueheren schmalen ::after-Tooltip (D5) durch ein echtes aufklappendes
   Notiz-Fenster (helle Card). Vorderste Ebene (z-index 80, ueber dem
   Inline-Edit-Popup mit 70), darf andere Zellen verdecken. Kein Layout-
   Shift: das Popover ist absolut positioniert (kein Platz im Fluss), der
   Marker und die zentrierte Pille bleiben exakt an ihrer Position.
   Oeffnet bei :hover UND :focus-within (Tastatur). ESC schliesst transient
   via .notiz-popover-aus (initNotizPopover in app.js). */
.notiz-marker { cursor: pointer; }
.notiz-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 80;
  display: block;
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
  border: 1px solid var(--line-mid, #c9c9c9);
  border-radius: 7px;
  padding: .5rem .65rem;
  font-size: .76rem;
  line-height: 1.4;
  text-align: left;
  font-weight: normal;
  min-width: 160px;
  max-width: 320px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.notiz-popover-kopf {
  display: block;
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #888);
  margin-bottom: .25rem;
}
.notiz-popover-text { display: block; color: var(--ink, #1a1a1a); }
/* Sichtbar bei Hover ODER Tastatur-Fokus auf dem Marker. */
.notiz-marker:hover .notiz-popover,
.notiz-marker:focus-within .notiz-popover,
.notiz-marker:focus .notiz-popover {
  opacity: 1;
  transform: translateY(0);
}
/* ESC-Unterdrueckung: solange .notiz-popover-aus auf dem <body> haengt,
   bleibt jedes Popover ausgeblendet — auch unter dem Mauszeiger. */
body.notiz-popover-aus .notiz-popover {
  opacity: 0 !important;
  transform: translateY(-3px) !important;
  pointer-events: none !important;
}

/* L27.06 (2026-05-28): Floating-Popup-Editor fuer Inline-Edit-Zellen
   (P-Nr, Vorhaben, Auftrag, Aussen). Position absolut unter der Zelle —
   verschiebt KEINE anderen Zellen oder Zeilen (im Gegensatz zum frueheren
   td-innerHTML-Replacement). ESC + Backdrop-Click schliessen via
   `initZellePopup` in app.js. */
.zelle-edit-popup { position: absolute; top: 100%; left: 0;
  z-index: 70; background: var(--surface);
  border: 1px solid var(--line-mid); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.20);
  padding: .55rem; min-width: 220px; white-space: nowrap; }
.zelle-edit-popup .zelle-edit-form { display: flex; gap: .35rem;
  align-items: center; }
.zelle-edit-popup .zelle-edit-input { flex: 1; font-size: .85rem;
  padding: .25rem .4rem; }
.zelle-edit-popup .zelle-edit-fehler { font-size: .75rem; color: #a40000;
  margin-top: .35rem; white-space: normal; }
/* Variante fuer Vorhaben — breiter, mehrere Felder. */
.zelle-edit-popup-wide { min-width: 380px; padding: .75rem;
  white-space: normal; }
.zelle-edit-popup-wide .field { margin-bottom: .35rem; }
.zelle-edit-popup-wide .lab { font-size: .72rem; color: var(--muted);
  margin-bottom: .15rem; }
.zelle-edit-popup-wide .inp { width: 100%; font-size: .85rem;
  padding: .25rem .4rem; }
.zelle-edit-popup-wide .frow { display: flex; gap: .5rem; }
.zelle-edit-popup .popup-actions { display: flex; gap: .4rem;
  justify-content: flex-end; margin-top: .4rem; }
.zelle-edit-popup .zelle-edit-abbruch { cursor: pointer;
  padding: .2rem .5rem; font-size: .82rem; color: var(--muted);
  text-decoration: none; }
.zelle-edit-popup .zelle-edit-abbruch:hover { color: var(--ink); }

/* Notiz-Inline-Editor (D6 2026-05-26): kleines Popover-Form INNERHALB der
   Zelle, kein modal-backdrop. */
.notiz-inline-popover { position: absolute; top: 3px; right: 3px;
  z-index: 60; background: var(--surface);
  border: 1px solid var(--line-mid); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  padding: .5rem; min-width: 240px; }
.notiz-inline-text { width: 100%; min-height: 4rem;
  font-size: .82rem; resize: vertical;
  border: 1px solid var(--line); border-radius: 3px;
  padding: .3rem .4rem; }
.notiz-inline-actions { display: flex; gap: .3rem; justify-content: flex-end;
  margin-top: .35rem; }
.notiz-inline-fehler { font-size: .72rem; color: #a40000;
  margin-bottom: .3rem; }

/* Zeilen-Hervorhebung (Block E P16) wurde 2026-05-24 zurueckgenommen —
   die Pillen tragen die Status-Info bereits eindeutig. Zeilen einheitlich. */

/* Admin-Eintrag (Buendel 10b): nur fuer berechtigte Personen sichtbar
   hervorgehoben, damit auf einen Blick klar ist, dass diese Zeile
   sensitiv ist. */
tr.eintrag-admin td { background: #F4EEF7; }
tr.eintrag-admin.folge td { background: #FAF6FC; }
.admin-marker { font-size: .7rem; opacity: .7; margin-left: .2rem; }

/* Maskierte Zelle (nicht-berechtigte Sicht auf Admin-Eintrag) — dezent grau,
   damit klar wird: 'die Nummer ist vergeben, aber du siehst nichts weiter'. */
td.maskiert { color: var(--muted); font-style: italic; text-align: center; }

/* ---- Schnellauswahl Jahres-Listen (Buendel 10c) ---- */
.schnellauswahl { max-width: 1000px; margin: 0 auto 1rem; display: flex;
  align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.schnellauswahl-label { color: var(--muted); margin-right: .3rem; }
.schnellauswahl-pille { display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-mid);
  border-radius: 20px; padding: .15rem .6rem; margin: 0;
  transition: background .2s; }
.schnellauswahl-pille:hover { background: var(--line); }
.schnellauswahl-x { background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 .4rem;
  margin: 0; }
.schnellauswahl-x:hover { color: var(--rot-stark-rand); }
.schnellauswahl-add { position: relative; }
.schnellauswahl-add summary { display: inline-block; cursor: pointer;
  list-style: none; color: var(--muted); padding: .15rem .6rem;
  border: 1px dashed var(--line-mid); border-radius: 20px; }
.schnellauswahl-add summary:hover { background: var(--surface); color: inherit; }
.schnellauswahl-add summary::-webkit-details-marker { display: none; }
/* Dropdown-Panel-Stil identisch zu .multi-filter-dropdown (Buendel 5i-6).
   Davor war Surface-Hintergrund mit dashed-Border-Mid + kleinerer
   Schatten — wirkte inkonsistent neben den Filter-Bar-Dropdowns. */
.schnellauswahl-form { position: absolute; top: 100%; left: 0;
  margin-top: .3rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem; min-width: 12rem; z-index: 10;
  display: flex; flex-direction: column; gap: .15rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.schnellauswahl-form label { display: flex; align-items: center; gap: .5rem;
  padding: .35rem .35rem; font-size: .85rem; border-radius: 4px;
  cursor: pointer; }
.schnellauswahl-form label:hover { background: #FAFAF9; }
.schnellauswahl-form .btn { margin-top: .5rem; font-size: .8rem;
  padding: .3rem .6rem; }

/* Liegt vor — vorhandenes Dok., wird vom NAS geholt */
.pill.liegt-vor { background: var(--gruen-leicht-bg);
  border-color: var(--gruen-leicht-bg); color: var(--gruen-leicht-text); }
/* Abgeschlossen — alle Schritte durch, gesperrt */
.pill.abgeschlossen { background: var(--gruen-leicht-bg);
  border-color: var(--gruen-leicht-rand); color: var(--gruen-leicht-text);
  cursor: default; }
/* Fuer diesen Lauf gewaehlt — immer flaechig kraeftig gruen, egal welcher Vorzustand */
.pill.vorgewaehlt { background: var(--gruen-stark); border-color: var(--gruen-stark);
  color: #fff; }
/* Gesperrt — liegt vor, aber Ablageort nicht erreichbar (nicht holbar) */
.pill.gesperrt { background: var(--line); border-color: var(--line-mid);
  color: var(--muted); cursor: default; }
/* Hinweistext unter einer Erzeugen-Screen-Pille */
.pill-hint { display: block; font-size: .66rem; color: var(--muted);
  margin-top: .3rem; }
.seg { display: inline-flex; border: 1px solid var(--line-mid);
  border-radius: 20px; overflow: hidden; }
.seg b { font-size: .71rem; font-weight: 400; padding: .22rem .66rem;
  cursor: pointer; color: var(--muted); }
.seg b.on { background: var(--ink); color: #fff; }

/* ---- Haufwerk manuelle Eingabe (Deklaration): Form-Reiter + 2D-Skizze ----
   .hf-reiter = Tab-Leiste (Signatur-Unterstrich wie .nav a, hier gruen statt ink,
   um den Tab-Charakter von der Kopf-Navigation abzusetzen). .hf-sketch/.hf-dims
   sitzen nebeneinander (Skizze links, Maß-Felder rechts), fallen bei schmalem
   Viewport per flex-wrap untereinander. */
.hf-reiter { display: flex; justify-content: center; gap: .2rem; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.hf-reiter-btn { position: relative; font-family: 'Roboto', sans-serif; font-size: .85rem;
  color: var(--muted); background: none; border: none; padding: .65rem 1.15rem;
  cursor: pointer; transition: color .25s; }
.hf-reiter-btn:hover { color: var(--ink); }
.hf-reiter-btn.on { color: var(--ink); font-weight: 500; }
.hf-reiter-btn::after { content: ''; position: absolute; left: .5rem; right: .5rem;
  bottom: -1px; height: 2px; transform: scaleX(0); transform-origin: 50% 50%;
  background: var(--gruen-stark); transition: transform .35s var(--cal); }
.hf-reiter-btn.on::after { transform: scaleX(1); }
.hf-layout { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start;
  justify-content: center; margin: .6rem 0 1rem; }
.hf-sketch-wrap { flex: 0 0 230px; display: flex; justify-content: center; }
.hf-sketch svg { display: block; width: 100%; max-width: 230px; height: auto; }
.hf-dims { flex: 1 1 260px; min-width: 240px; }

/* ---- Dokument-Status / Links ---- */
.doc { display: flex; align-items: center; gap: .5rem; }
.ck { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .56rem; flex: none; }
.acts { display: flex; gap: .85rem; margin-top: .25rem; }
.lnk { position: relative; color: var(--ink); cursor: pointer; font-size: .78rem;
  background: none; border: none; font-family: inherit; padding: 0; }
.lnk.dim { color: var(--muted); }
.lnk::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; transform: scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg,transparent,var(--ink) 28%,var(--ink) 72%,transparent);
  transition: transform .45s var(--cal); }
.lnk:hover::after { transform: scaleX(1); }
.stat { font-size: .78rem; color: var(--muted); }
.stat.rdy { color: var(--ink); }
.warn { display: inline-flex; align-items: center; gap: .35rem; }
.warn .ex { width: 15px; height: 15px; border: 1px solid var(--ink);
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .6rem; font-weight: 700; }

/* ---- Formular ---- */
.form { padding: 1.4rem 1.8rem; }
.frow { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.field { flex: 1; min-width: 140px; margin-bottom: 1.2rem; }
.field .lab { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem; }
.field .inp { border: none; border-bottom: 1px solid var(--line-mid);
  background: transparent; width: 100%; font-family: 'Roboto', sans-serif;
  font-size: .88rem; color: var(--ink); padding: .35rem .1rem;
  transition: border-color .4s; }
.field .inp:focus { outline: none; border-bottom-color: var(--ink); }
.field .hint { font-size: .72rem; color: var(--muted); margin-top: .3rem;
  font-weight: 300; }
.field .fixed { font-size: .88rem; padding: .35rem .1rem; }
.addlink { font-size: .78rem; color: var(--muted); border: none;
  background: none; cursor: pointer; padding: 0; margin-top: .55rem; }
.addlink:hover { color: var(--ink); }

/* ---- Chips ---- */
.chiprow { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem;
  border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--muted);
  flex-wrap: wrap; }

/* ---- Bild-Schritt-Thumbnails ---- */
.thumbs { display: flex; gap: .6rem; padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.thumb { width: 68px; height: 68px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--line-mid); }
.thumb.add { border-style: dashed; color: var(--muted); font-size: .66rem;
  font-weight: 300; flex-direction: column; text-align: center; line-height: 1.2; }

/* ---- Buttons ---- */
.btn { font-family: 'Roboto', sans-serif; font-size: .84rem; font-weight: 500;
  background: var(--ink); color: #fff; border: none; padding: .62rem 1.4rem;
  border-radius: 8px; cursor: pointer; transition: transform .25s, background .25s; }
.btn:hover { background: #000; transform: translateY(-1px); }
.btn:disabled { background: var(--line); color: var(--muted); cursor: default;
  transform: none; }
.btn-sec { background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-mid); }
.btn-sec:hover { background: var(--surface); border-color: var(--ink); }
.btn-ghost { background: none; color: var(--muted); border: none; font-size: .84rem;
  cursor: pointer; padding: .62rem .4rem; transition: color .25s; }
.btn-ghost:hover { color: var(--ink); }

/* ---- Fußleiste eines Screens ---- */
.foot { display: flex; align-items: center; justify-content: space-between;
  max-width: 790px; margin: 1.3rem auto 0; gap: 1rem; flex-wrap: wrap; }
.foot .info { font-size: .79rem; color: var(--muted); font-weight: 300; }
.fbtns { display: flex; gap: .5rem; align-items: center; }

/* Hover-Tooltip (Erzeugen-Screen: Hinweis auf die zwei Weiter-Buttons) */
.btnwrap { position: relative; display: inline-block; }
.tip { position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(5px); background: var(--surface);
  border: 1px solid var(--line-mid); border-radius: 8px; padding: .55rem .75rem;
  font-size: .73rem; color: var(--muted); font-weight: 300; width: 230px;
  text-align: center; line-height: 1.45; opacity: 0; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
  transition: opacity .3s, transform .3s; z-index: 5; }
.btnwrap:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Modal (Bearbeiten / Versand-Vorschau) ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(28,28,27,.32);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1.5rem; z-index: 20; }
.modal { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; max-width: 640px; width: 100%;
  max-height: 80vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.1rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.4rem; border-top: 1px solid var(--line); }

/* ---- Toast / Meldungen ---- */
.toast { position: fixed; top: 1rem; right: 1rem; background: var(--ink);
  color: #fff; padding: .7rem 1.2rem; border-radius: 8px; font-size: .82rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 30; }
.fehler { background: var(--surface); border: 1px solid var(--line-mid);
  border-radius: 8px; padding: .7rem .9rem; font-size: .8rem; color: var(--ink);
  margin: 0 auto 1rem; max-width: 790px; display: flex; gap: .5rem;
  align-items: center; }
.fehler .ex { width: 16px; height: 16px; border: 1px solid var(--ink);
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .62rem; font-weight: 700; flex: none; }

/* V260603.13: Vorjahr-Warnung beim Anlegen — deutlicher amber Banner,
   gleiche Geometrie wie .fehler (zentriert, max-width), Haus-Gelb-Variablen. */
.warnung-banner { background: var(--gelb-leicht-bg);
  border: 1px solid var(--gelb-leicht-rand); border-radius: 8px;
  padding: .7rem .9rem; font-size: .82rem; color: var(--gelb-leicht-text);
  margin: 0 auto 1rem; max-width: 790px; line-height: 1.45; }
.warnung-banner strong { color: var(--orange-text); }

/* ---- Einstellungs-Seite ---- */
.sektion { border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1.2rem; margin-bottom: 1rem; background: var(--surface); }
.sektion > summary { font-weight: 500; cursor: pointer; font-size: .9rem; }
.sektion[open] > summary { margin-bottom: .8rem; }
.feldzeile { display: grid; grid-template-columns: 260px 1fr; gap: .8rem;
  align-items: start; margin-bottom: .9rem; }
.feldzeile label { padding-top: .4rem; font-size: .82rem; }
.feldzeile .desc { color: var(--muted); font-size: .76rem; margin-top: .25rem;
  font-weight: 300; }
.feldzeile textarea { width: 100%; font-family: 'Roboto', sans-serif;
  font-size: .82rem; border: 1px solid var(--line-mid); border-radius: 6px;
  padding: .4rem .5rem; min-height: 4.5rem; }
.feldzeile input[type=text], .feldzeile input[type=password] {
  width: 100%; font-family: 'Roboto', sans-serif; font-size: .85rem;
  border: none; border-bottom: 1px solid var(--line-mid); background: transparent;
  padding: .35rem .1rem; }
.feldzeile input:focus, .feldzeile textarea:focus {
  outline: none; border-color: var(--ink); }
.submit-row { position: sticky; bottom: 0; background: var(--bg);
  padding: 1rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }

/* ---- Kollabierte Startseite: Sektionen ---- */
.sektionen { max-width: 820px; margin: 0 auto; display: flex;
  flex-direction: column; gap: 1rem; }
.quelle { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem 1.2rem; }
.quelle.dis { opacity: .55; }
.quelle-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.quelle-kopf h2 { font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 1.05rem; }
.quelle-tools { font-size: .78rem; display: flex; align-items: center;
  gap: .35rem; }
.quelle-hint { font-size: .8rem; color: var(--muted); font-weight: 300; }
.leer-hinweis { padding: 1rem; font-size: .83rem; color: var(--muted);
  text-align: center; }
.warnzone { max-width: 820px; margin: 1rem auto 0; background: var(--surface);
  border: 1px solid var(--line-mid); border-radius: 8px; padding: .7rem .9rem;
  font-size: .8rem; color: var(--ink); display: flex; gap: .5rem;
  align-items: center; }
.warnzone[hidden] { display: none; }
.warnzone .ex { width: 16px; height: 16px; border: 1px solid var(--ink);
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .62rem; font-weight: 700; flex: none; }

/* ---- Vervollstaendigungs-Seite ---- */
.vv-bloecke { max-width: 720px; margin: 0 auto; display: flex;
  flex-direction: column; gap: 1rem; }
.vv-block { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; }
.vv-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  font-size: .9rem; }
.vv-kopf-rechts { display: flex; align-items: center; gap: .8rem; }
.vv-mark { color: var(--ink); text-transform: none; font-weight: 500; }
.vv-feld .inp.vv-leer { border-bottom: 1.5px solid var(--ink); }

/* ---- R-Nr.-Pille (Erzeugen-Screen) ---- */
.rnr-pille { display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--line-mid); border-radius: 20px;
  padding: .15rem .6rem; font-size: .72rem; cursor: pointer; }
.rnr-pille.versteckt { display: none; }
.rnr-pille .rnr-edit { color: var(--gruen-leicht-text); font-size: .66rem;
  opacity: 0; transition: opacity .2s; }
.rnr-pille:hover .rnr-edit { opacity: 1; }
.rnr-pille.editiert .rnr-wert, .rnr-pille.editiert .rnr-edit { display: none; }
.rnr-pille .rnr-input { border: none; border-bottom: 1px solid var(--ink);
  background: transparent; font-size: .72rem; width: 72px; }

/* ---- R-Nr. in der Rechnung-Pille (Erzeugen-Screen) ---- */
.pill.editiert .pill-rnr-text { display: none; }
.pill-rnr-input { border: none; background: transparent; color: inherit;
  font: inherit; width: 5.4rem; padding: 0; }
.pill-rnr-edit { border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: .8rem; padding: 0 .25rem;
  vertical-align: middle; }
.pill-rnr-edit:hover { color: var(--ink); }

/* ---- Pillen-Farb-Legende (unter der Projektliste) ---- */
.pill-legende { display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .7rem; color: var(--muted); }
.pill-legende > span { display: inline-flex; align-items: center; gap: .35rem; }
.pill-legende .pill { cursor: default; margin-right: 0; }
/* Unsichtbarer Fülltext — die Legenden-Pille bekommt damit exakt Breite
   und Höhe einer „Bericht"-Pille aus der Liste. */
.leg-fuell { visibility: hidden; }

/* ---- Aussentermin-Zusatz (3c) ---- */
.aussen-zusatz { font-size: .8em; color: var(--muted); }
.notiz-symbol { color: var(--muted); font-size: .85em; cursor: help; }

/* ---- Notiz-Marker (Buendel 5g) ----
   Rot, solange der zugehoerige Status noch nicht "versendet" ist;
   grau wenn versendet; dezent bei `notiz_allgemein` ohne Status-Bezug. */
.notiz-marker { position: absolute; top: 3px; right: 3px; z-index: 3;
  font-size: .85rem; line-height: 1;
  cursor: pointer; text-decoration: none;
  display: inline-block; vertical-align: middle; }
.notiz-marker-rot { color: #C00; filter: hue-rotate(-30deg); }
.notiz-marker-grau { color: var(--muted); opacity: .6; }
.notiz-marker-dezent { color: var(--muted); opacity: .5;
  font-size: .7rem; margin-left: .25rem; }
.notiz-marker:hover { filter: brightness(1.1); }
/* V260531.04: Beim Aufklappen den ganzen Marker-Stacking-Context anheben
   (z-index 90 > .angebot-popover z85 und alle Geschwister-Symbole z3), sonst
   bleibt das Kind .notiz-popover (z80) im Marker-Context gefangen und wird von
   Geschwistern uebermalt. Gleiche Trigger wie die Popover-Sichtbarkeit. */
.notiz-marker:hover,
.notiz-marker:focus-within,
.notiz-marker:focus { z-index: 90; }

/* ---- Pfad-Hover-Kopier-Symbole (Buendel 5h) ----
   Absolute oben rechts in der Zelle, sichtbar nur bei td-Hover.
   Klick kopiert den Pfad in die Zwischenablage (JS in app.js). */
/* M7 / V260529.02: pfad-Symbole wandern von oben-rechts (Slot 2, dort liegt
   jetzt allein der Notiz-Marker) nach unten-rechts (Slot 4). So bleibt
   Slot 1 (oben-links) frei fuer das Bearbeiter-Kuerzel-Badge und keine zwei
   Symbole teilen sich eine Ecke. */
.pfad-kopier-symbol { position: absolute; bottom: 3px; right: 3px; top: auto;
  font-size: .85rem; line-height: 1; padding: .15rem .25rem;
  border-radius: 3px;
  opacity: 0; transition: opacity .12s, background .12s;
  cursor: pointer; text-decoration: none; }
.tbl tbody td:hover .pfad-kopier-symbol { opacity: 1; }
.pfad-kopier-symbol:hover { background: var(--line); }
/* Wenn zwei Symbole in derselben Zelle stehen (Rechnung: 📂 + 📑),
   rutscht das erste etwas nach links, das zweite bleibt rechts. */
.pfad-kopier-symbol-zweit { right: 24px; }

/* M7 / V260529.02: wiederverwendbares 4-Ecken-Slot-System fuer die
   Listen-Zellen. Slot 1 = oben-links, 2 = oben-rechts, 3 = unten-links,
   4 = unten-rechts. Pille bleibt zentriert; keine zwei Symbole teilen sich
   eine Ecke. */
.zelle-symbol-slot-1 { position: absolute; top: 3px; left: 3px; z-index: 3; }
.zelle-symbol-slot-2 { position: absolute; top: 3px; right: 3px; z-index: 3; }
.zelle-symbol-slot-3 { position: absolute; bottom: 3px; left: 3px; z-index: 3; }
.zelle-symbol-slot-4 { position: absolute; bottom: 3px; right: 3px;
  z-index: 3; }
.bearbeiter-kuerzel {
  font-size: .7rem; line-height: 1; font-weight: 600;
  padding: .1rem .3rem; border-radius: 3px;
  background: var(--line); color: var(--ink, #333);
  pointer-events: none;
}

/* 08j (V260529.08j): Graues "A"-Angebot-Symbol (Slot 3, unten-links).
   Markiert ein versendetes Angebot — IMMER sichtbar (Status-Marker, anders
   als die hover-only Pfad-Symbole). Dokument-Anmutung via Rahmen + leichtem
   Schlagschatten + abgeknickter unterer Ecke. Hover -> title (Angebotsnummer);
   Klick -> .angebot-popover mit NAS-Pfad (JS: initAngebotPopover). */
.angebot-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 16px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .64rem; font-weight: 700; line-height: 1;
  color: #6b6b6b; background: #f1f1f0;
  border: 1px solid #c7c7c5; border-radius: 2px 2px 2px 0;
  box-shadow: 1px 1px 0 #dcdcda;
  text-decoration: none; cursor: pointer;
}
.angebot-symbol:hover { color: #444; background: #e9e9e7; border-color: #a9a9a7; }
.angebot-symbol.offen { color: #333; border-color: #8f8f8d; background: #e4e4e2; }
.angebot-popover {
  position: absolute; bottom: calc(100% + 5px); left: 0; z-index: 85;
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--surface, #fff); border: 1px solid var(--line-mid, #c9c9c9);
  border-radius: 7px; padding: .5rem .6rem;
  min-width: 210px; max-width: 360px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  cursor: default;
}
.angebot-symbol.offen .angebot-popover {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.angebot-popover-kopf {
  font-weight: 700; font-size: .74rem; color: var(--ink, #222);
}
.angebot-popover-pfad {
  font-family: var(--mono, ui-monospace, monospace); font-size: .68rem;
  color: #555; word-break: break-all; user-select: all;
  background: #f6f6f5; border: 1px solid #e3e3e1; border-radius: 4px;
  padding: .25rem .35rem;
}
.angebot-popover-kopieren {
  align-self: flex-start; font-size: .7rem; padding: .2rem .55rem;
  border: 1px solid #bdbdbd; border-radius: 5px;
  background: #fafafa; color: #333; cursor: pointer;
}
.angebot-popover-kopieren:hover { background: #f0f0f0; border-color: #969694; }

/* Toast-Hinweis "Pfad kopiert" (Buendel 5h). */
.pfad-toast { position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%); background: var(--ink); color: #FFF;
  padding: .5rem 1rem; border-radius: 4px; font-size: .85rem;
  z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  opacity: 0; transition: opacity .15s; pointer-events: none; }
.pfad-toast.zeigt { opacity: 1; }

/* ---- Zeilen-Aktionen (Buendel 5f): Hover-Icons rechts in der Zeile ----
   Die Aktions-Spalte gibt es nicht mehr — stattdessen schwebt ein 0px-
   breiter <td> rechts in der Zeile, der absolute Icons enthaelt. Damit
   bleibt das Tabellen-Layout breit fuer Daten und die Icons erscheinen nur
   bei Zeilen-Hover. */
/* Pkt 9 (Buendel α 2026-05-26): schmale Aktions-Spalte (28px) statt 0px-
   Schwebespalte. Icons stehen UEBEREINANDER (Edit oben, Historie unten),
   bleiben innerhalb der eigenen Td-Box und ueberlappen damit nicht die
   Rechnungs-Pille im vorherigen Td. */
.tbl td.zeilen-aktionen-td { position: relative; width: 28px;
  min-width: 28px; padding: 0; border: 0; }
.tbl th.th-zeilen-aktionen { width: 28px; padding: 0; border: 0; }
/* TR positionierbar fuer Folgeauftrag-+ unten-mittig. */
.tbl tbody tr { position: relative; }
.zeilen-aktionen { position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%); display: flex; flex-direction: column;
  gap: .15rem; opacity: 0; transition: opacity .12s ease-out;
  pointer-events: none; white-space: nowrap; }
.tbl tbody tr:hover .zeilen-aktionen { opacity: 1; pointer-events: auto; }
.zeilen-aktion-icon { color: var(--ink); text-decoration: none;
  font-size: .9rem; line-height: 1;
  width: 1.35rem; height: 1.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer;
  background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.zeilen-aktion-icon:hover { background: var(--line); }
/* V260607.01c: Lösch-Button (🗑) in der Zeilen-Aktions-Spalte. Die Form ist
   nur ein No-Layout-Wrapper, damit der Button als plain POST-Submit den
   303-Redirect ausloest; der Button selbst traegt die Icon-Optik. Dezenter
   Rotton beim Hover (zurueckhaltend, kein knalliges Rot). */
.zeilen-aktion-loeschen-form { margin: 0; padding: 0; line-height: 0;
  display: contents; }
button.zeilen-aktion-loeschen { padding: 0; border: 0; font: inherit; }
button.zeilen-aktion-loeschen:hover {
  background: #f8d7da; color: #842029; }

/* ---- Status-Dropdown (Buendel 5i) ----
   Single-Select-Dropdown fuer Pillen (Bericht/Rechnung/Labor) und
   Stamm-Spalten (Auftraggeber/Leistungsart). Trigger ist meist eine
   Pille oder ein Text-Span, beide tragen `.zelle-dropdown-trigger`
   und enthalten ein ✏ als `.zelle-dropdown-edit`, sichtbar bei
   td-Hover. Das Panel folgt der Multi-Filter-Mechanik aus 5e — gleiche
   Click-Outside-Logik in app.js. */
.zelle-dropdown { position: relative; display: inline-block; }
.zelle-dropdown > summary { list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
  user-select: none; }
.zelle-dropdown > summary::-webkit-details-marker { display: none; }
/* Trigger-Variante fuer FK-Spalten (Auftraggeber/Leistungsart):
   reiner Text statt Pille. */
.zelle-dropdown-trigger-text { color: var(--ink); }
/* K4 / K26.01a (2026-05-27): Edit-Symbol IMMER als Overlay zentriert in
   der Pille — nicht mehr daneben. position:absolute zentriert relativ
   zum `.zelle-dropdown` (details, position:relative). Pille wird beim
   Hover gedaempft (.tbl tbody td:hover-Regel weiter unten), das Symbol
   tritt dadurch praegnant hervor. */
.zelle-dropdown-edit { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem; line-height: 1; color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  padding: .15rem .4rem; border-radius: 4px;
  opacity: 0; transition: opacity .12s;
  pointer-events: none; z-index: 6; }
.tbl tbody td:hover .zelle-dropdown-edit { opacity: 1; }
.zelle-dropdown-panel { position: absolute; left: 0; top: 100%;
  margin-top: .3rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.08); z-index: 12;
  padding: .5rem; min-width: 260px; max-width: 380px;
  white-space: nowrap; }
.zelle-dropdown-search { width: 100%; margin-bottom: .4rem;
  font-size: .85rem; }
.zelle-dropdown-liste { max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .15rem; }
.zelle-dropdown-option { display: flex; align-items: center; gap: .6rem;
  padding: .35rem .35rem; border-radius: 4px;
  text-decoration: none; color: var(--ink); cursor: pointer;
  font-size: .82rem; }
.zelle-dropdown-option:hover { background: #FAFAF9; }
.zelle-dropdown-option.versteckt { display: none; }
.zelle-dropdown-option.aktiv { background: var(--line);
  pointer-events: none; cursor: default; }
.zelle-dropdown-desc { color: var(--muted); font-size: .76rem; }
.zelle-dropdown-leer { padding: .5rem; font-size: .8rem;
  color: var(--muted); text-align: center; }

/* ---- Combobox (Auftraggeber/Leistungsart) — H2/V260718.10-.17 ----
   Tippbares Stammdaten-Feld im Panel-Muster von .zelle-dropdown-panel. */
.combobox { position: relative; }
.combobox-control { position: relative; display: flex; align-items: center; }
.combobox-input { width: 100%; padding-right: 1.9rem; }
.combobox-pfeil { position: absolute; right: .15rem; top: 50%;
  transform: translateY(-50%); background: none; border: 0; cursor: pointer;
  font-size: .85rem; color: var(--muted); padding: .3rem .5rem; line-height: 1; }
.combobox-pfeil:hover { color: var(--ink); }
.combobox-panel { position: absolute; left: 0; right: 0; top: 100%;
  margin-top: .3rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.08); z-index: 20;
  padding: .35rem; }
.combobox-liste { list-style: none; margin: 0; padding: 0; max-height: 260px;
  overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; }
.combobox-option { padding: .4rem .5rem; border-radius: 4px; cursor: pointer;
  font-size: .85rem; color: var(--ink); }
.combobox-option:hover { background: #FAFAF9; }
.combobox-option.aktiv { background: var(--line); }
.combobox-neu { color: var(--muted); border-top: 1px solid var(--line);
  margin-top: .1rem; }
.combobox-neu::before { content: "＋ "; }
.combobox-leer { padding: .5rem; font-size: .8rem; color: var(--muted);
  text-align: center; }
/* Provenance-Marker (Anlege): roter Akzent, gespiegelt vom versteckten id-Feld. */
.combobox-vorbefuellt .combobox-input,
.combobox-vorbefuellt .combobox-control-multi { box-shadow: inset 3px 0 0 0 #d9534f; }
/* schon gewaehlte Option in der Mehrfach-Liste */
.combobox-option.gewaehlt { background: var(--gruen-leicht-bg, #eef7ee); }
.combobox-option.gewaehlt::after { content: "✓"; color: var(--gruen-stark, #2e7d32); float: right; }
/* Mehrfach-Combobox (Leistungsart): Chips + Eingabe in EINEM Control */
.combobox-control-multi { flex-wrap: wrap; gap: .3rem;
  padding: .25rem 1.9rem .25rem .35rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); align-items: center; min-height: 2.15rem; }
.combobox-control-multi .combobox-input-multi { width: auto; flex: 1 1 8rem;
  min-width: 6rem; border: 0; outline: none; box-shadow: none; background: transparent;
  padding: .2rem .3rem; }
.combobox-chips { display: contents; }
.combobox-chip { display: inline-flex; align-items: center; gap: .25rem;
  background: var(--line); border-radius: 12px; padding: .1rem .3rem .1rem .55rem;
  font-size: .8rem; color: var(--ink); white-space: nowrap; }
.combobox-chip.is-primary { background: #e3edf7; font-weight: 600; }
.combobox-chip-text { line-height: 1.2; }
.combobox-chip-x { background: none; border: 0; cursor: pointer; font-size: .95rem;
  line-height: 1; color: var(--muted); padding: 0 .05rem; }
.combobox-chip-x:hover { color: var(--rot-stark, #c0392b); }

/* ---- K3 / 2026-05-27: Erweiterungen im Pillen-Dropdown ----
   - Rechnungs-Nr-Sektion im Rechnung-Dropdown
   - "nur Mail"-Checkbox im Bericht-Dropdown
   - Labor-Dropdown mit 4-Way-Switch + pro-Seite-Sektionen
*/
.zelle-dropdown-sektion { padding: .35rem; border-radius: 4px;
  margin-bottom: .35rem; border-bottom: 1px solid var(--line); }
.zelle-dropdown-label { display: block; font-size: .75rem;
  color: var(--muted); margin-bottom: .2rem; }
.zelle-dropdown-form { display: flex; gap: .35rem; align-items: center; }
.zelle-dropdown-form .inp { flex: 1; font-size: .85rem; padding: .25rem .4rem; }
.btn-mini { padding: .25rem .55rem; font-size: .75rem;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; }
.btn-mini:hover { background: var(--muted); color: var(--bg); }
.nur-mail-toggle { display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; cursor: pointer; }
.nur-mail-toggle input[type="checkbox"] { cursor: pointer; }

/* L27.13a (2026-05-28): Bearbeiter-Sektion im Pillen-Dropdown — eine
   vollbreite Zeile, in der ein <select> mit Mitarbeiter+Subunternehmer
   gewaehlt wird. Ohne Submit-Button (change triggert htmx). */
.zelle-dropdown-bearbeiter .zelle-dropdown-form { width: 100%; }
.zelle-dropdown-bearbeiter .inp { flex: 1; min-width: 0;
  font-size: .8rem; padding: .2rem .35rem; }
.zelle-dropdown-bearbeiter optgroup { font-size: .75rem; }

/* Labor-Panel */
.labor-panel { min-width: 320px; white-space: normal; }
.labor-panel-sektion { padding: .35rem; border-bottom: 1px solid var(--line);
  margin-bottom: .35rem; }
.labor-panel-sektion:last-child { border-bottom: none; margin-bottom: 0; }
.labor-panel-label { display: block; font-size: .75rem; font-weight: 600;
  color: var(--muted); margin-bottom: .25rem; }
.labor-4way { display: flex; gap: .25rem; flex-wrap: wrap; }
.labor-4way-opt { padding: .3rem .55rem; font-size: .8rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); cursor: pointer; color: var(--ink); }
.labor-4way-opt:hover { background: #FAFAF9; }
.labor-4way-opt.aktiv { background: var(--gruen-stark);
  color: #FFFFFF; border-color: var(--gruen-stark); }
/* L27.05a (2026-05-28): Stack-Variante mit Erklaerungstext rechts. */
.labor-4way-stack { flex-direction: column; gap: .2rem; }
.labor-4way-stack .labor-4way-opt {
  display: flex; align-items: baseline; gap: .6rem;
  width: 100%; text-align: left; padding: .35rem .55rem; }
.labor-4way-stack .labor-4way-label { min-width: 4.5rem; font-weight: 600; }
.labor-4way-stack .labor-4way-erkl { font-size: .75rem; color: var(--muted);
  font-weight: 400; }
.labor-4way-stack .labor-4way-opt.aktiv .labor-4way-erkl { color: rgba(255,255,255,.85); }
.labor-status-liste { display: flex; flex-direction: column; gap: .15rem;
  max-height: 200px; overflow-y: auto; margin-bottom: .35rem; }
.labor-datum-zeile { display: flex; gap: .35rem; align-items: center; }
.labor-datum-label { font-size: .75rem; color: var(--muted);
  min-width: 4rem; }
.labor-datum-form { display: flex; gap: .35rem; flex: 1;
  align-items: center; }
.labor-datum-input { flex: 1; font-size: .82rem; padding: .2rem .4rem; }

/* ---- Inline-Edit Zelle (Pkt 6 2026-05-26 umgebaut) ----
   Edit-Symbol ist UEBER dem Zelleninhalt zentriert (nicht mehr oben-rechts),
   Zellentext wird auf Hover blasser, damit das Symbol praegnant abhebt. */
.zelle-edit-container { position: relative; }
.zelle-edit-btn { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  font-size: 1rem; line-height: 1;
  padding: .2rem .45rem; border-radius: 4px;
  opacity: 0; transition: opacity .12s; cursor: pointer;
  z-index: 5; pointer-events: none; }
.tbl tbody td.zelle-edit-container:hover .zelle-edit-btn {
  opacity: 1; pointer-events: auto; }
.zelle-edit-btn:hover { background: var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* Pkt 6: Zellentext + Pillen werden bei Hover blasser, damit das Edit-
   Symbol darueber visuell dominant ist. Notiz, Pfad-Symbol und Aktions-
   Symbol bleiben voll sichtbar. */
.tbl tbody td.zelle-edit-container:hover {
  color: rgba(60,60,60,.4);
}
.tbl tbody td.zelle-edit-container:hover .pill { opacity: .5; }
.tbl tbody td.zelle-edit-container:hover .notiz-marker,
.tbl tbody td.zelle-edit-container:hover .pfad-kopier-symbol,
.tbl tbody td.zelle-edit-container:hover .bearbeiter-kuerzel,
.tbl tbody td.zelle-edit-container:hover .zelle-edit-btn { opacity: 1; }
/* N4 (V260531.02, 2026-05-31): Die auswaehlbaren Pillen im geoeffneten
   Edit-Dropdown-Panel sollen ihre echten Zustandsfarben ORIGINALGETREU
   zeigen. Die Hover-Daempfung oben (Pkt 6) gilt fuer alle .pill in der
   Zelle — das Panel ist DOM-Kind des td, also wurden auch die Auswahl-
   Optionen mitgedaempft (wirkten "grau hinterlegt"). Hier zuruecksetzen;
   nur die Trigger-Pille (summary, ausserhalb des Panels) bleibt gedaempft. */
.tbl tbody td.zelle-edit-container:hover .zelle-dropdown-panel .pill { opacity: 1; }
/* M9 (V260529.10, 2026-05-30): Auftraggeber/Leistungsart (FK-Dropdown-Trigger)
   tragen ein explizites color:var(--ink) (.zelle-dropdown-trigger-text) und
   erben daher NICHT die gedaempfte td-Hover-Farbe wie die Projektnummer.
   Explizite Hover-Override, damit sie genauso verblassen. Das ✏ (.zelle-dropdown-edit)
   behaelt seine eigene color:var(--ink) und bleibt praegnant. */
.tbl tbody td.zelle-edit-container:hover .zelle-dropdown-trigger-text,
.tbl tbody td.zelle-edit-container:hover summary.zelle-dropdown-trigger {
  color: rgba(60,60,60,.4);
}
/* Pkt 12: Vorhaben-Spalte bekommt den Platzgewinn aus dem reduzierten
   Cell-Padding. */
.tbl td.zelle-vorhaben { min-width: 260px; }
/* V260721.13 (UI-Nachtrag) — dezenter Datums-Hinweis unter der Bericht-Pille. */
.zelle-status-datum { display: block; font-size: .72rem; color: var(--muted);
  margin-top: .15rem; }
.zelle-edit-form { display: inline-flex; gap: .3rem; align-items: center;
  flex-wrap: wrap; }
.zelle-edit-input { padding: .2rem .35rem; font-size: .9rem;
  width: 9rem; }
.zelle-edit-ok, .zelle-edit-abbruch { display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; border-radius: 3px;
  text-decoration: none; color: var(--ink); font-size: .85rem; }
.zelle-edit-ok { background: #e0f0e0; }
.zelle-edit-ok:hover { background: #c5e1c5; }
.zelle-edit-abbruch:hover { background: var(--line); }
.zelle-edit-fehler { flex-basis: 100%; font-size: .75rem;
  color: #a40000; margin-top: .2rem; }

/* ---- Mini-Inline-Edit-Pille (Buendel δ Pkt 14a/b/c 2026-05-26) ----
   Kleines, unauffaelliges Sub-Element neben den Status-Pillen fuer
   Rechnungs-Nr + Versand-/Abschluss-Datum. Klick → wird durch ein
   schlankes Edit-Form ersetzt (target: this). */
.zelle-mini-view { display: inline-flex; align-items: center;
  gap: .15rem; margin-left: .2rem;
  font-size: .68rem; color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05rem .25rem;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  transition: background .12s, color .12s; }
.zelle-mini-view:hover { background: var(--bg); color: var(--ink); }
.zelle-mini-edit { display: inline-flex; align-items: center;
  gap: .15rem; margin-left: .2rem; vertical-align: middle; }

/* ---- Fokus-Highlight nach Anlegen (Buendel δ Pkt 19/20 2026-05-26) ----
   Zeile pulsiert kurz, damit der Benutzer die neu angelegte Zeile
   sofort sieht. Wird vom JS bei `/projekte?fokus=<id>` gesetzt. */
@keyframes zeile-fokus-puls {
  0% { background: #fff8c8; }
  100% { background: transparent; }
}
.tbl tbody tr.zeile-fokus { animation: zeile-fokus-puls 2.5s ease-out; }

/* M6 (V260529.03): Folgeauftrag-+ echt zentriert via voll-breiter Phantom-
   Zeile + Hover-Teaser der Folge, die entstehen wuerde. */
.tbl tbody tr.folge-anlege-zeile { position: relative; height: 0; }
.tbl tbody tr.folge-anlege-zeile > td { position: relative;
  padding: 0; border: 0; height: 0; }
/* V260605.08: Das „+" ist jetzt ein natives <details>-Dropdown. Das
   <details> sitzt an der frueheren Button-Position (zentriert via left:50%),
   das <summary class="folgeauftrag-plus"> ist der sichtbare +-Kreis. */
.folge-plus-dropdown { position: absolute; left: 50%; bottom: -11px;
  transform: translateX(-50%); z-index: 5; }
.folgeauftrag-plus { box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 1.1rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; user-select: none;
  list-style: none;
  opacity: 0; transition: opacity .12s ease-out, background .12s;
  pointer-events: none; }
.folgeauftrag-plus::-webkit-details-marker { display: none; }
/* + sichtbar bei Hover der Eltern-Zeile ODER der Anlege-Zeile selbst.
   Ein geoeffnetes Dropdown bleibt sichtbar/bedienbar, auch ohne Hover. */
.tbl tbody tr:hover + tr.folge-anlege-zeile .folgeauftrag-plus,
.tbl tbody tr.folge-anlege-zeile:hover .folgeauftrag-plus,
.folge-plus-dropdown[open] > .folgeauftrag-plus {
  opacity: 1; pointer-events: auto; }
.folgeauftrag-plus:hover,
.folge-plus-dropdown[open] > .folgeauftrag-plus { background: var(--line); }
/* Options-Panel: kleines Overlay unter dem +, zwei Text-Optionen. */
.folge-plus-panel { position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); margin-top: .3rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08); z-index: 12;
  padding: .35rem; min-width: 200px;
  display: flex; flex-direction: column; gap: .1rem; }
.folge-plus-option { display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: .4rem .55rem; border-radius: 4px;
  font-size: .82rem; color: var(--ink); white-space: nowrap; }
.folge-plus-option:hover { background: #FAFAF9; }
/* Teaser-Zeile: versteckt, sichtbar wenn die Anlege-Zeile gehovered wird. */
.tbl tbody tr.folge-teaser { display: none; }
.tbl tbody tr.folge-anlege-zeile:hover + tr.folge-teaser,
.tbl tbody tr.folge-teaser:hover { display: table-row; }
.tbl tbody tr.folge-teaser > td { opacity: .45; font-style: italic;
  pointer-events: none; color: var(--ink); }

/* ---- Modal-Overlay (Buendel 5f-3) ----
   Wird per htmx in #modal in base.html eingehaengt. Backdrop zentriert
   die Card; Card hat begrenzte Hoehe (90vh) und scrollt. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem; }
.modal-card { position: relative; background: var(--bg);
  border-radius: 6px; padding: 1.6rem;
  max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal-card form.panel { margin: 0; max-width: none; padding: 0;
  background: none; box-shadow: none; }
.modal-close { position: absolute; top: .6rem; right: .6rem;
  background: none; border: 0; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--muted); padding: .2rem .5rem;
  border-radius: 4px; }
.modal-close:hover { color: var(--ink); background: var(--line); }

/* ===== N7 / V260531.06j — dezenter roter Vorbefuell-Marker =====
   System-vorbefuellte (noch unbestaetigte) Felder im Anlege-Modal tragen
   data-vorbefuellt="1" (Template-Makro feld_attr). Hier der dezente rote
   Akzent dazu. BEWUSST andere Technik als der Validierungs-Fehler-Stil, der
   nur Text in #a40000 faerbt: hier ein 3px breiter linker Inset-Balken am
   Feld selbst, ohne Background und ohne volle Umrandung -> optisch klar vom
   Fehler unterscheidbar. Verschwindet automatisch, sobald app.js
   (initProjektFormular) das Attribut bei User-Edit entfernt (06h). */
.inp[data-vorbefuellt] {
  box-shadow: inset 3px 0 0 0 #d9534f;
}

/* ===== V260619.11 — Konfidenz-Balken je Feld (Import-Bearbeiten-Overlay) =====
   Spiegelt die Vorbefuell-Marker-Technik oben (Inset-Balken am Feld selbst,
   ohne Wrapper-Element), nur RECHTS statt links und in den Konfidenz-/Legenden-
   farben. NUR unsichere Felder tragen `data-konfidenz` (gelb/orange/rot;
   gruen/fehlend → kein Attribut → kein Balken). Das Attribut wird ausschliesslich
   im Import-Overlay gesetzt (konfidenz_attr-Makro), der Haupteditor/`/projekte/neu`
   bleiben byte-gleich (V260619.10). Farben aus den bestehenden Legenden-Tokens
   (gleiche Hue-Familie wie die Vorschau-Konfidenz-Legende), kein Hartwert. */
.inp[data-konfidenz="gelb"]   { box-shadow: inset -3px 0 0 0 var(--gelb-leicht-rand); }
.inp[data-konfidenz="orange"] { box-shadow: inset -3px 0 0 0 var(--orange-rand); }
.inp[data-konfidenz="rot"]    { box-shadow: inset -3px 0 0 0 var(--rot-leicht-text); }

/* Update-Banner für veraltete App-Versionen (V260705.03) — dezent, nur in
   der App sichtbar (Jinja-Gate app_update_verfuegbar). */
.update-hinweis { background: var(--gelb-leicht, #fdf6e3); color: var(--ink);
  border-bottom: 1px solid var(--line); padding: .5rem .9rem;
  font-size: .82rem; text-align: center; }
.update-hinweis a { font-weight: 600; }

/* === Mobile / Responsive (≤768px) — V260602.H6.6 (F-6) === */
@media (max-width: 768px) {
  /* Tabellen-Container horizontal scrollbar → auf 375px voll nutzbar */
  #projekt-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* kompaktere Schrift + Paddings */
  .tbl th { padding: .45rem .4rem; font-size: .6rem; }
  .tbl td { padding: .35rem .25rem; font-size: .76rem; }
  /* Vorhaben-Spalte bleibt auch auf Mobil sichtbar (V260704.13) — die Tabelle
     scrollt horizontal, kein Spalten-Ausblenden. */
  /* Modal full-width (randlos über die ganze Breite/Höhe) */
  .modal-backdrop { padding: 0; }
  .modal-card { max-width: 100%; width: 100%; border-radius: 0; padding: 1rem; max-height: 100vh; }

  /* Kopfbalken: NUR das Menüband scrollt horizontal — nicht die ganze Seite.
     min-width:0 erlaubt dem Nav-Flex-Item zu schrumpfen; overflow-x:auto scrollt
     dann sein Inhalt. Logo + Nav-Einträge bleiben voll (flex:none, nowrap). */
  .bar { padding: .7rem .9rem; }
  .logo { flex: none; }
  .nav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .nav form { white-space: nowrap; flex: none; }

  /* Ticker-Kennzahlen-Leiste auf dem Handy ausblenden — dort eher unwichtig
     und im Weg (User-Wunsch). #ticker-leiste bleibt im DOM (htmx-oob-Ziel),
     nur unsichtbar. */
  .ticker-leiste { display: none; }

  /* /projekte-Suchleiste stapelt auf dem Handy: Such-Eingabe oben, „+ Neues
     Projekt" voll darunter — beide über die volle Breite (align-items:stretch
     hebt das globale flex-start auf, sonst bliebe nur der Button voll breit). */
  .suche-bar { flex-direction: column; align-items: stretch; }
  .suche-bar-rechts { min-width: 0; width: 100%; }
  /* Filter-Dropdowns auf Anker-Breite schrumpfen (statt min-width:200/240 über
     den Viewport-Rand zu schieben) und nie breiter als der Bildschirm werden. */
  .multi-filter-dropdown { min-width: 0; max-width: 92vw; }

  /* Sicherheitsnetz gegen Seiten-Drag: jede Tabelle scrollt INTERN statt die
     ganze Seite zu ziehen — auch künftig hinzukommende. Zwei Ausnahmen mit
     eigenem Scroll-Handling werden danach per höherer Spezifität zurückgesetzt:
     die Projektliste (#projekt-tabelle) und bereits in `.tbl-scroll` gewrappte
     Tabellen. (Bewusst KEIN komplexes :not() — das würde auf älteren Browsern
     die ganze Regel verwerfen.) */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #projekt-tabelle .tbl, .tbl-scroll .tbl { display: table; overflow-x: visible; }
}

/* ---- Anmerkungen-Widget (V260604.22b) ----------------------------------
   Schmaler Streifen am rechten Rand; Hover stupst ihn raus + zeigt einen
   Chevron; Klick faehrt das Panel (links daneben) heraus. Geometrie: der
   feste Container haengt mit right:0 am Rand, [Streifen][Panel] als Flex-Zeile;
   geschlossen ist der Container um die Panel-Breite nach rechts geschoben, so
   dass nur der Streifen sichtbar bleibt. */
#anmerkung-widget {
  position: fixed; right: 0; top: 50%;
  display: flex; align-items: stretch; z-index: 900;
  transform: translate(320px, -50%);
  transition: transform .32s ease;
}
#anmerkung-widget.offen { transform: translate(0, -50%); }
/* Geschlossen + Hover: ein Stups nach links + Chevron einblenden. */
#anmerkung-widget:not(.offen):hover { transform: translate(313px, -50%); }

#anmerkung-strip {
  align-self: center;
  width: 15px; height: 84px; padding: 0;
  border: none; border-radius: 8px 0 0 8px;
  background: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: -2px 0 8px rgba(0,0,0,.12);
  transition: background .25s, width .25s;
}
#anmerkung-strip:hover { background: var(--muted); width: 16px; }
#anmerkung-strip::before {
  content: "‹"; color: #fff; font-size: 1.1rem; line-height: 1;
  opacity: .35; transition: opacity .25s, transform .25s;
}
#anmerkung-widget:not(.offen):hover #anmerkung-strip::before { opacity: 1; }
/* Geoeffnet: Chevron umdrehen (zeigt nach rechts = „zuklappen"). */
#anmerkung-widget.offen #anmerkung-strip::before {
  content: "›"; opacity: 1;
}

#anmerkung-panel {
  width: 320px; max-width: 86vw;
  background: var(--surface);
  border: 1px solid var(--line-mid); border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -8px 0 28px rgba(0,0,0,.14);
  padding: 1.1rem 1.2rem 1.25rem;
  overflow: hidden;
}
#anmerkung-panel-inhalt form { display: flex; flex-direction: column; gap: .7rem; }
.anmerkung-titel {
  font-size: 1.02rem; font-weight: 500; color: var(--ink); margin: 0;
}
.anmerkung-hinweis {
  font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.4;
}
#anmerkung-panel textarea {
  width: 100%; resize: vertical; min-height: 7.5rem;
  font-family: 'Roboto', sans-serif; font-size: .85rem; line-height: 1.45;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-mid); border-radius: 8px;
  padding: .6rem .7rem;
}
#anmerkung-panel textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--line-mid);
}
#anmerkung-panel textarea::placeholder {
  color: var(--muted); font-weight: 300; line-height: 1.4;
}
.anmerkung-senden { align-self: flex-end; }

.anmerkung-dank { padding: .4rem .2rem; }
.anmerkung-dank-titel {
  font-size: 1rem; font-weight: 500; color: var(--ink);
  margin: 0 0 .45rem;
}
.anmerkung-dank-text {
  font-size: .85rem; font-weight: 300; color: var(--muted); line-height: 1.5;
  margin: 0;
}

/* ---- Import-Vorschau: Konfidenz-Ampel je Zelle ----
   V260605.10: token-basierte Variante der bisher in vorschau.html inline
   gepflegten `.konfidenz-*`-Klassen. Gleiches Muster (Zell-Hintergrund je
   Stufe), nur ueber die Design-System-Tokens statt Hartfarben. Neu: die
   rote Stufe „braucht Antwort" — grauer Basis-Hintergrund + roter Akzent
   (linker Rand) aus der `--rot-leicht-*`-Palette. */
/* V260607.06a: alleinige Quelle der Konfidenz-Farben (inline-Quartett aus
   vorschau.html entfernt). */
.konfidenz-gruen  { background: var(--gruen-leicht-bg); }
.konfidenz-gelb   { background: var(--gelb-leicht-bg); }
.konfidenz-orange { background: var(--konfidenz-orange-bg); }
.konfidenz-rot {
  background: var(--bg);
  border-left: 3px solid var(--rot-leicht-text);
  color: var(--rot-leicht-text);
}
/* V260619.07: gedaempfte Variante fuer die Status-/Pillen-Zellen (Bericht/
   Rechnung/Labor). Blassere Toene als `.konfidenz-*` oben (und als die
   `*-leicht-bg`-Pillenfuellungen), damit die Pille klar lesbar bleibt — kein
   Verschmelzen einer gruenen Pille mit gruenem Konfidenz-Hintergrund. */
.konfidenz-pille-gruen  { background: var(--konfidenz-pille-gruen); }
.konfidenz-pille-gelb   { background: var(--konfidenz-pille-gelb); }
.konfidenz-pille-orange { background: var(--konfidenz-pille-orange); }
.konfidenz-pille-rot {
  background: var(--konfidenz-pille-rot);
  border-left: 3px solid var(--rot-leicht-text);
}
/* V260607.06b: Farb-Legende oben in der Vorschau — kompakte, dezente Chip-Reihe.
   Die Farb-Hintergruende kommen aus den vier `.konfidenz-*`-Klassen oben
   (Single Source of Truth); hier nur Layout/Spacing/Form aus den Tokens. */
.konfidenz-legende {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .2rem 0 .9rem; align-items: center;
}
.konfidenz-chip {
  font-size: .72rem; font-weight: 400; color: var(--ink);
  padding: .14rem .55rem; border-radius: 20px;
  border: 1px solid var(--line-mid); white-space: nowrap;
}
/* Rote Stufe behaelt ihren roten Akzent (linker Rand + Text) auch als Chip —
   sonst clobbert die `border`-Kurzform oben den Akzentrand aus `.konfidenz-rot`
   und das einzige Erkennungsmerkmal der roten Stufe ginge verloren. */
.konfidenz-chip.konfidenz-rot {
  border-left: 3px solid var(--rot-leicht-text);
  color: var(--rot-leicht-text);
}
/* V260607.14: Eckdaten-Zeile der Import-Vorschau (Jahr fest + Größenstufe) */
.import-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 .9rem; align-items:center; }
.import-meta-chip { font-size:.78rem; color:var(--ink); background:var(--bg);
  padding:.18rem .6rem; border-radius:6px; border:1px solid var(--line-mid); }
.import-meta-jahr { font-weight:600; background:var(--gruen-leicht-bg); border-color:var(--gruen-leicht-bg); }
.import-jahr-fest { display:inline-block; font-weight:600; font-size:1rem; color:var(--ink); padding:.1rem 0; }
/* V260607.14: Jahr-Zwangsauswahl-Maske (D12) */
.jahr-auswahl { display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0 1.1rem; }
.jahr-option { display:flex; align-items:center; gap:.4rem; padding:.45rem .9rem;
  border:1px solid var(--line-mid); border-radius:8px; cursor:pointer; font-size:.9rem; background:var(--surface); }
.jahr-option:hover { border-color:var(--ink); }

/* V260607.21: Bezahl-Gate — Preis-Panel vor der Verarbeitung (Design-Pass D11) */
.import-gate { max-width:440px; margin:2.5rem auto; padding:2rem 2rem 1.75rem;
  text-align:center; }
.import-gate-kicker { margin:0 0 .35rem; font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.import-gate-frage { margin:0 0 .5rem; font-size:1.05rem; line-height:1.45;
  color:var(--ink); }
.import-gate-preis { display:flex; flex-direction:column; align-items:center;
  gap:.2rem; padding:1.1rem 0 1.4rem; }
.import-gate-betrag { font-size:2.6rem; font-weight:600; line-height:1;
  letter-spacing:-.02em; color:var(--ink); }
.import-gate-preis-label { font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); }
.import-gate-fakten { display:flex; justify-content:center; gap:2.2rem;
  margin:0 0 1.6rem; padding:.9rem 0 0; border-top:1px solid var(--line); }
.import-gate-fakten div { display:flex; flex-direction:column; gap:.2rem; }
.import-gate-fakten dt { font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); }
.import-gate-fakten dd { margin:0; font-size:.95rem; font-weight:500; color:var(--ink); }
.import-gate-aktionen { display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.import-gate-go { width:100%; max-width:300px; padding:.7rem 1rem; font-size:.9rem; }
.import-gate-go:disabled { opacity:.7; cursor:default; }
/* V260619.01 (T7): Ladeanzeige beim „Verarbeiten (kostenpflichtig)" — CSS-Spinner,
   per `hidden`-Attribut erst beim Submit eingeblendet (Token-Farben, kein Hex). */
@keyframes import-spin { to { transform: rotate(360deg); } }
.import-gate-spinner { display:inline-block; width:1.1rem; height:1.1rem;
  border:2px solid var(--line-mid); border-top-color:var(--ink); border-radius:50%;
  animation: import-spin .7s linear infinite; }
.import-gate-spinner[hidden] { display:none; }
/* V260720.02 — Import-Gate Stufen-Fortschritt (getaktet, heuristisch). */
.import-fortschritt { margin-top: 1rem; }
.import-fortschritt[hidden] { display: none; }
.import-fortschritt-stufen { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .45rem; }
.import-fortschritt-stufen li { position: relative; padding-left: 1.6rem;
  color: var(--muted); font-size: .9rem; transition: color .25s; }
.import-fortschritt-stufen li::before { content: "○"; position: absolute;
  left: 0; color: var(--line); }
.import-fortschritt-stufen li.aktiv { color: var(--ink); font-weight: 600; }
.import-fortschritt-stufen li.aktiv::before { content: "●"; color: var(--gruen-stark); }
.import-fortschritt-eta { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.import-fortschritt-eta[hidden] { display: none; }
/* V260607.64: Sonderfall (über oberster Größen-Grenze) — neutrale Hinweis-Box,
   kein Preis/Button. Gedämpfter Akzent, nicht alarmierend. */
.import-gate-sonderfall { margin:.25rem 0 1.25rem; padding:.85rem 1rem;
  border:1px solid var(--rand, #d8dee6); border-left:4px solid #c98a2b;
  border-radius:8px; background:#fbf6ee; font-size:.95rem; line-height:1.5;
  color:var(--ink); text-align:left; }

/* ---- Geführte Seed-UI (Liste übertragen, V260607.24) ---- */
.import-seed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 1.5rem; align-items: start; }
.import-seed { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.import-seed-maske { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.1rem 1.25rem; }
.import-seed-add { display: flex; align-items: center; justify-content: center;
  gap: .5rem; border: 1.5px dashed var(--line-mid); border-radius: 12px;
  padding: .9rem 1.25rem; color: var(--muted); font-size: .9rem; }
.import-seed-add-zeichen { font-size: 1.15rem; line-height: 1; color: var(--line-mid); }
.import-seed-add-hinweis { font-size: .76rem; font-weight: 300; color: var(--muted); }
.import-seed-quelle { position: sticky; top: 1rem; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem;
  max-height: calc(100vh - 2rem); overflow: auto; }
.import-seed-quelle h2 { margin-top: 0; font-size: 1rem; }
.import-seed-quelle .liste-readonly { width: 100%; font-size: .85rem; }
.import-seed-quelle .liste-readonly td { padding: .2rem .4rem;
  border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .import-seed-grid { grid-template-columns: 1fr; }
  .import-seed-quelle { position: static; max-height: none; }
}

/* ---- Proaktive System-Rückfragen (V260607.36) ---- */
/* Neutrale, ruhige Info-Sektion: das System fragt vor der Vorschau gezielt
   nach mehrdeutigen Einträgen. Konsolidiert hier (kein inline-Doppeln, B3);
   die Optik (gedeckter Blau-Ton) entspricht dem .34-Stand. */
.proaktiv-frage { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 8px;
  background: #eef4fb; color: #1f3a5f; border: 1px solid #b9d2ee; }
.proaktiv-frage-titel { margin: 0 0 .35rem; font-weight: 600; font-size: 1.02rem; }
.proaktiv-frage-sub { margin: 0 0 .8rem; font-size: .9rem; color: #3a5275; }
.proaktiv-frage-form { margin: 0; }
.proaktiv-frage-feld { margin: 0 0 .9rem; padding: .7rem .85rem;
  border: 1px solid #cdddf0; border-radius: 6px; background: #fbfdff; }
.proaktiv-frage-feld legend { font-weight: 600; padding: 0 .3rem; }
.proaktiv-frage-feld legend code { font-weight: 400; }
.proaktiv-frage-option { display: inline-flex; align-items: center; gap: .3rem;
  margin-right: 1rem; }
.proaktiv-frage-freitext { margin-top: .5rem; }
.proaktiv-frage-freitext .inp { max-width: 22rem; }
.proaktiv-frage-aktion { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.proaktiv-frage-hinweis { margin: .7rem 0 0; font-size: .85rem; color: #3a5275; }

/* V260607.42: Bearbeiten-Symbol je Vorschau-Zeile + 5er-Limit-Hinweise (D14). */
.bearbeiten-symbol { cursor: pointer; font-size: 1rem; line-height: 1;
  padding: .1rem .4rem; }
.bearbeiten-symbol[disabled] { opacity: .4; cursor: not-allowed; }
.nachbesser-fertig-hinweis { margin-left: .5rem; font-size: .85rem; color: var(--muted); }
.nachbesser-limit-hinweis { color: #a05a00; font-style: italic; margin-left: .5rem; }

/* --- Utility-Klassen (Paket A 2026-06-17) --- */
.form-container{ max-width: 760px; margin: 0 auto; padding: var(--space-lg); }
.flex-1{ flex: 1; }
.hinweis{ background: var(--gelb-leicht-bg); color: var(--gelb-leicht-text);
          border: 1px solid var(--gelb-leicht-rand); border-radius: var(--radius-md);
          padding: var(--space-xs) var(--space-sm); }

/* --- Seed-Schritt-Leiste + Erklärung (Paket B 2026-06-17) --- */
.seed-schritte{ display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; margin:var(--space-md) 0 var(--space-2xs); }
.seed-chip{ position:relative; display:inline-flex; align-items:center; }
.seed-chip-link{ min-width:34px; height:34px; padding:0 .7rem; border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600;
  background:var(--line); color:var(--muted); text-decoration:none;
  transition:transform var(--dur) var(--cal), background var(--dur), color var(--dur); }
.seed-chip-link:hover{ transform:translateY(-2px); color:var(--ink); }
.seed-chip-link.aktiv{ background:var(--ink); color:var(--on-ink); }
/* „neu"-Pille (aktuelle Eingabe): dezenter gestrichelter Rahmen, solange nicht
   aktiv; aktiv erbt die schwarze Füllung von .seed-chip-link.aktiv. */
.seed-chip-neu{ background:var(--surface); color:var(--ink); border:1px dashed var(--line-mid); }
.seed-chip-neu.aktiv{ border-color:var(--ink); }
/* Seed-Wizard-Navigationsleiste: zurück links · abschließen mittig · weiter rechts. */
.seed-navbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
  margin-top:var(--space-md); padding-top:var(--space-sm); border-top:1px solid var(--line); }
.seed-nav-fertig{ margin:0 auto; }
.seed-chip .tooltip{ position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap; background:var(--ink); color:var(--on-ink);
  font-size:.72rem; padding:.3rem .55rem; border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; z-index:80;
  transition:opacity var(--dur-fast) var(--cal), transform var(--dur-fast) var(--cal); }
.seed-chip:hover .tooltip{ opacity:1; transform:translateX(-50%) translateY(0); }
.seed-chip-del{ position:absolute; top:-6px; right:-7px; margin:0; line-height:0;
  opacity:0; transition:opacity var(--dur-fast) var(--cal); }
.seed-chip:hover .seed-chip-del{ opacity:1; }
.seed-chip .loeschen{ width:16px; height:16px; display:grid; place-items:center; padding:0;
  border:none; border-radius:50%; background:var(--rot-stark); color:var(--on-ink);
  font-size:.72rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); }
.seed-chip .loeschen:hover{ background:var(--rot-stark-rand); }
.seed-fortschritt{ font-size:var(--fs-sm); color:var(--muted); margin:0 0 var(--space-md); }
@keyframes seed-slide-in{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:translateX(0);} }
.seed-maske-anim{ animation:seed-slide-in var(--dur) var(--cal); }
.seed-erklaer{ background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:var(--radius-md); padding:var(--space-sm) var(--space-md); margin:var(--space-md) 0; }
.seed-erklaer h3{ margin:0 0 var(--space-2xs); font-size:var(--fs-label); letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); }
.seed-erklaer ul{ margin:0; padding-left:1.1rem; }
.seed-erklaer li{ font-size:var(--fs-sm); line-height:1.55; margin-bottom:.2rem; }
.seed-erklaer code{ background:var(--line); border-radius:var(--radius-sm); padding:.02rem .3rem; font-size:.8rem; }

/* ---- Custom-Checkbox (Verdichtung-Startseite/Versand) — Port aus VK ---- */
.cb { width: 17px; height: 17px; border: 1px solid var(--line-mid);
  border-radius: 4px; display: inline-flex; align-items: center;
  justify-content: center; font-size: .62rem; color: transparent;
  cursor: pointer; flex: none; }
.cb.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Bild-Upload-Spinner (Verdichtung-Startseite Sektion 1) — Port aus VK ---- */
.bild-upload-form { display: flex; flex-direction: column; gap: .8rem; }
.bild-upload-footer { display: flex; align-items: center; gap: .9rem; }
.bild-lade-hinweis { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--muted); font-weight: 300; }
.bild-lade-hinweis[hidden] { display: none; }
@keyframes bildSpinnerDreh { to { transform: rotate(360deg); } }
.bild-spinner { display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--line-mid); border-top-color: var(--ink);
  border-radius: 50%; flex: none;
  animation: bildSpinnerDreh .8s linear infinite; }

/* Detail-Statistik (Detailseiten Mitarbeiter/Subunternehmer/Auftraggeber) */
.detail-grid { display: grid; gap: var(--space-md); max-width: 1100px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.detail-voll { grid-column: 1 / -1; }
.zeitraum-pillen { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.zeitraum-pille { display: inline-block; padding: .2rem .65rem; border-radius: 99px;
  background: var(--bg); color: inherit; text-decoration: none; font-size: .82rem; }
.zeitraum-pille.aktiv { background: var(--ink); color: var(--on-ink); }
.kpi-grid { display: grid; gap: var(--space-sm); margin-top: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi-karte { padding: var(--space-sm); background: var(--bg);
  border-radius: var(--radius-md); text-align: center; }
.kpi-zahl { font-size: var(--fs-h1); font-weight: 600; line-height: 1.1; }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); margin-top: .2rem; }

/* ============================================================
   Plattendruckversuch (DIN 18134) — Feature-scoped (.pdv-*)
   ============================================================ */
.pdv-detail-kopf { display: flex; justify-content: space-between;
  align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; }
.pdv-detail-kopf .actionbar { margin: 0; }

.pdv-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-lg); align-items: start; margin-top: var(--space-md); }
@media (max-width: 900px) { .pdv-detail-grid { grid-template-columns: 1fr; } }

.pdv-eingabe-hinweis { margin: 0 0 var(--space-sm); }
.pdv-messreihe { display: flex; flex-direction: column; gap: var(--space-md); }
.pdv-ast { padding: var(--space-md); }
.pdv-ast-titel { font-family: 'Cinzel', serif; font-size: var(--fs-h2);
  margin: 0 0 var(--space-xs); letter-spacing: .02em; }
.pdv-werte { width: 100%; }
.pdv-werte th { font-size: var(--fs-label); }
.pdv-werte td { padding: .2rem var(--space-xs); }
.pdv-sigma { font-variant-numeric: tabular-nums; color: var(--muted); width: 8rem; }
.pdv-setzung { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
.pdv-setzung:focus { border-bottom-color: var(--ink); }
.pdv-readonly { color: var(--muted); border-bottom-style: dashed; }
.pdv-mini-hint { font-size: var(--fs-label); color: var(--muted); margin-left: .4rem; }

/* Auswertungs-Panel (sticky rechts) */
.pdv-auswertung { position: sticky; top: var(--space-md); }
.pdv-ergebnis { padding: var(--space-md); }
.pdv-erg-kopf { font-family: 'Cinzel', serif; font-size: var(--fs-h2);
  margin-bottom: var(--space-sm); }
.pdv-kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs); margin-bottom: var(--space-md); }
.pdv-kz { text-align: center; padding: var(--space-xs) 0;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg); }
.pdv-kz-wert { display: block; font-size: 1.4rem; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.pdv-kz-lab { display: block; font-size: var(--fs-label); color: var(--muted);
  margin-top: .15rem; }

.pdv-abnahme { border: 1px solid var(--line-mid); border-radius: var(--radius-md);
  padding: var(--space-sm); font-variant-numeric: tabular-nums; }
.pdv-abnahme.ist-erfuellt { background: var(--gruen-leicht-bg);
  border-color: var(--gruen-leicht-rand); }
.pdv-abnahme.nicht-erfuellt { background: var(--rot-leicht-bg);
  border-color: var(--rot-leicht-rand); }
.pdv-abnahme-zeile { font-size: var(--fs-sm); line-height: 1.7; }
.pdv-haken { color: var(--gruen-stark); font-weight: 700; }
.pdv-urteil { margin-top: var(--space-xs); padding-top: var(--space-xs);
  border-top: 1px solid var(--line-mid); font-weight: 600; }
.ist-erfuellt .pdv-urteil { color: var(--gruen-stark); }
.nicht-erfuellt .pdv-urteil { color: var(--rot-stark); }

.pdv-fit { margin: var(--space-md) 0 0; display: grid;
  grid-template-columns: auto 1fr; gap: .15rem var(--space-sm);
  font-size: var(--fs-sm); }
.pdv-fit dt { color: var(--muted); }
.pdv-fit dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.pdv-warnungen { margin-top: var(--space-sm); }
.pdv-warnung { font-size: var(--fs-sm); color: var(--orange-text);
  padding: .1rem 0; }

/* Interpretation-Editor (Detailseite) */
.pdv-interp { margin-top: var(--space-md); padding: var(--space-md); }
.pdv-interp-kopf { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--space-sm); }
.pdv-interp-status { font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.pdv-interp-toggle { display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--fs-sm); margin: var(--space-sm) 0; cursor: pointer; }
.pdv-interp textarea.inp { width: 100%; resize: vertical;
  font-family: inherit; line-height: 1.4; }
.pdv-interp-aktionen { display: flex; gap: var(--space-sm);
  margin-top: var(--space-sm); }

/* Beleg-Foto-Editor (Detailseite) */
.pdv-foto { margin-top: var(--space-md); padding: var(--space-md); }
.pdv-foto-vorschau { margin: var(--space-sm) 0; max-width: 340px; }
.pdv-foto-vorschau img { width: 100%; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-md); }
.pdv-foto-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; }
.pdv-foto-btn { cursor: pointer; }
.pdv-foto-unterschrift { margin-top: var(--space-sm); }

/* Liste */
.pdv-liste th, .pdv-liste td { font-variant-numeric: tabular-nums; }
.pdv-zeile { cursor: pointer; }
.pdv-zeile:hover { background: var(--bg); }
.pdv-badge { display: inline-block; padding: .12rem .5rem;
  border-radius: 999px; font-size: var(--fs-label); font-weight: 600;
  border: 1px solid transparent; white-space: nowrap; }
.pdv-badge-ja { background: var(--gruen-leicht-bg); color: var(--gruen-leicht-text);
  border-color: var(--gruen-leicht-rand); }
.pdv-badge-nein { background: var(--rot-leicht-bg); color: var(--rot-leicht-text);
  border-color: var(--rot-leicht-rand); }
.pdv-badge-neutral { background: var(--bg); color: var(--muted);
  border-color: var(--line); }

/* Zeilen-Aktionen (Duplizieren / Löschen) in Listen + Hub */
.pdv-zeile-aktionen, .kontroll-aktionen { white-space: nowrap; }
.pdv-akt-form { display: inline; }
.pdv-akt { display: inline-block; background: none; border: none; cursor: pointer;
  padding: .1rem .35rem; margin-left: .3rem; font-size: var(--fs-label);
  font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 6px; }
.pdv-akt:hover { color: var(--ink); background: var(--bg); }
.pdv-akt-loesch:hover { color: var(--rot-leicht-text); background: var(--rot-leicht-bg); }
/* Bearbeiten-Symbol je Zeile (User 2026-08-07, V260807.verdichtung.13): taucht beim
   Hover ueber die Zeile auf — dieselbe Sprache wie das Stift-Symbol der Projekt-
   tabelle (.zelle-edit-btn). `focus-within` haelt es fuer Tastatur-Bedienung offen.
   Auf Touch-Geraeten gibt es kein Hover; dort ist es dauerhaft sichtbar, sonst waere
   die Kopf-Bearbeitung am Handy schlicht nicht erreichbar. */
.pdv-akt-edit { opacity: 0; pointer-events: none; transition: opacity .12s; }
.pdv-akt-edit .ic { vertical-align: -.2em; }
tr:hover .pdv-akt-edit, tr:focus-within .pdv-akt-edit {
  opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .pdv-akt-edit { opacity: 1; pointer-events: auto; }
}

/* Kopf-Formular */
.pdv-form { max-width: 900px; padding: var(--space-lg); }
.pdv-form-sektion { font-family: 'Cinzel', serif; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: var(--space-md) 0 var(--space-xs);
  padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--line); }
.pdv-form-sektion:first-child { margin-top: 0; }

/* ---- Verdichtungs-Hub (Scheibe C): ganze Projekt-Familie, Add-Buttons, inline
   Suffix-Edit + „im Bericht"-Schalter. Reuse pdv-liste/pdv-badge-Optik. ---- */
.kontroll-add { display: flex; flex-wrap: wrap; gap: .6rem;
  margin: var(--space-md) 0 var(--space-lg); }
.kontroll-liste-wrap { margin-top: var(--space-sm); }
.kontroll-name { font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap; }
.kontroll-name:hover { text-decoration: underline; }
.kontroll-suffix { width: 3.4rem; text-align: center; font-size: .82rem;
  font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums;
  padding: .2rem .3rem; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--ink); }
.kontroll-suffix:focus { outline: none; border-color: var(--ink); }
.kontroll-suffix::placeholder { color: var(--line-mid); }
.kontroll-toggle { display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--muted); cursor: pointer; }
.kontroll-toggle input { cursor: pointer; }
.kontroll-zeile-aus td:not(:last-child) { color: var(--muted); }
.kontroll-zeile-aus .kontroll-name { color: var(--muted); font-weight: 400;
  font-style: italic; }
.kontroll-weiter { display: flex; justify-content: flex-end; align-items: center;
  gap: .8rem; margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--line); }
.gruppen-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin: 0 auto var(--space-md); max-width: 960px; }
.gruppen-chip { font-size: .78rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line-mid); border-radius: 999px; padding: .22rem .8rem;
  background: var(--surface); transition: border-color .3s, color .3s; }
.gruppen-chip:hover { color: var(--ink); border-color: var(--ink); }
.gruppen-chip.on { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.kontroll-kennwerte { font-size: .8rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.kontroll-kw-lab { color: var(--muted); font-size: .7rem; }
.dyn-s { font-variant-numeric: tabular-nums; }
#dyn-sm { background: var(--bg); color: var(--muted); }

/* Concierge: kein Block mehr hier — der Voice-first-Screen ist ein
   Standalone-Template mit eigener Datei (app/static/concierge.css,
   V260813.concierge.33). */