/* =============================================================================
   SynergyScope — Bausteinklassen der Bedienschale (W9)
   Aetheris GmbH · Linie Synergy · Stand 25.08.2026
   -----------------------------------------------------------------------------
   Diese Datei liefert GENAU die Klassen aus docs/MVP-OBERFLAECHE.md § 6, dazu
   das, was die neue Navigation (Projektwechsler, Favoriten, „Zuletzt
   bearbeitet", Sterne) und js/scope-modal.js an eigenem Aussehen brauchen.

   ⚠️ FARBEN AUSSCHLIESSLICH ALS `--s360-*`-TOKENS aus scope.css TEIL D (Zeile
   2724 ff., „der gewinnt" laut Auftrag) — mit einer einzigen Ausnahme: Farben
   fuer Status GIBT ES BEREITS als Tokens (--s360-erfolg/-warnung/-fehler/
   -akzent, alle aus TEIL D bzw. synergy-tokens.css) und werden hier nur
   WIEDERVERWENDET, nicht neu erfunden. Es gibt also keinen einzigen eigenen
   Hexwert in dieser Datei.

   ⚠️ GOLD IST NIE FLIESSTEXT — jede Stelle unten, an der Gold vorkommt
   (`.m-akzent`, aktiver Stern, Projektwechsler-Marke „aktiv"), trägt es als
   FLÄCHE oder RAHMEN, nie als Schriftfarbe auf hellem Grund.

   ⚠️ GESPERRTE ZUSTAENDE NIE UEBER opacity — `.sc-marke.m-neutral` und die
   Sperr-Tokens (`--s360-gesperrt-*`, schon in synergy-tokens.css definiert)
   tragen eigene Farben statt Transparenz.

   Diese Datei wird NACH scope.css eingebunden (index.html) und definiert die
   Basisklassen `.sc-marke`, `.sc-leer`, `.sc-ablage`, `.sym` NICHT neu — die
   liefert scope.css bereits; hier stehen nur ERGAENZUNGEN (Modifikatoren,
   neue Klassen), damit keine vorhandene Ansicht durch eine zweite Definition
   der gleichen Klasse verrutscht.
   ============================================================================= */

/* =============================================================================
   1. Seitenkopf — Titelzeile mit Untertitel und Aktionsknoepfen rechts
   ============================================================================= */
.sc-seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s360-abstand-3);
  margin-bottom: var(--s360-abstand-5);
}
.sc-seitenkopf-haupt { min-width: 0; }
.sc-seitenkopf h1, .sc-seitenkopf h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.625rem;
  color: var(--s360-text);
}
.sc-seitenkopf h1 .sym, .sc-seitenkopf h2 .sym { color: var(--accent-deep); }
.sc-seitenkopf-untertitel {
  font-size: var(--s360-groesse-sm);
  color: var(--s360-text-leise);
  margin-top: 4px;
  max-width: 78ch;
}
/* Lebende Angaben UNTER der Beschreibung — heute nur die Projektuebersicht
   (Projekt und Auftraggeber). Getrennt, weil die Schale die Beschreibung
   schreibt und dabei den Inhalt der Zeile darueber ersetzt; was sich zur
   Laufzeit aendert, darf dort nicht stehen. Etwas fester und kleiner, damit
   die Beschreibung die Hauptzeile bleibt. */
.sc-seitenkopf-zusatz {
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
  font-weight: var(--s360-fett-halb);
  margin-top: 3px;
}
.sc-seitenkopf-zusatz:empty { display: none; }
.sc-seitenkopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--s360-abstand-2);
  flex-wrap: wrap;
  flex: none;
}

/* =============================================================================
   2. Register (Tabs)
   ============================================================================= */
.sc-register {
  display: flex;
  gap: var(--s360-abstand-5);
  border-bottom: 1px solid var(--s360-linie);
  margin-bottom: var(--s360-abstand-4);
  /* ⚠️⚠️ `overflow-y: hidden` ist hier PFLICHT, nicht Kosmetik. Mit nur
     `overflow-x: auto` rechnet der Browser die ANDERE Achse von `visible` auf
     `auto` — und der Unterstrich des aktiven Registers ragte mit
     `bottom: -1px` genau 1 px unter den Kasten. Ergebnis war ein SENKRECHTER
     Scrollbalken mit Pfeilen am rechten Ende der Registerzeile, auf einem
     1600 px breiten Schirm, bei vier Registern, die bequem passten. Dieselbe
     Falle wie bei den Navigations-Flyouts, nur eine Etage tiefer.
     Der Unterstrich sitzt deshalb auf `bottom: 0` (siehe
     `.sc-register-blatt.aktiv::after`) und wird vom `hidden` nicht mehr
     abgeschnitten. */
  overflow-x: auto;
  overflow-y: hidden;
}
.sc-register-blatt {
  position: relative;
  border: 0;
  background: none;
  padding: 11px 1px 12px;
  color: var(--s360-text-leise);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  font-weight: var(--s360-fett-halb);
  white-space: nowrap;
  cursor: pointer;
}
.sc-register-blatt:hover { color: var(--s360-text); }
.sc-register-blatt.aktiv { color: var(--s360-text); }
.sc-register-blatt.aktiv::after {
  content: "";
  position: absolute;
  /* ⚠️ `bottom: 0`, nicht `-1px`. Der Unterstrich ragte 1 px unter den Kasten
     der Registerzeile — und weil die Zeile `overflow-x: auto` traegt, rechnete
     der Browser die andere Achse von `visible` auf `auto` und zeigte einen
     SENKRECHTEN Scrollbalken mit Pfeilen. Auf einem 1600-px-Schirm, bei vier
     Registern, die bequem passten. Der Unterstrich sitzt jetzt auf der
     Trennlinie statt einen Hauch darunter; sichtbar ist der Unterschied nicht,
     der Scrollbalken schon. */
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--s360-akzent);
}
.sc-register-blatt .sc-zahl {
  margin-left: 6px;
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}

/* =============================================================================
   3. Kennzahlenreihe
   ============================================================================= */
.sc-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s360-abstand-3);
  margin-bottom: var(--s360-abstand-4);
}
.sc-kennzahl {
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r);
  padding: 14px 15px;
}
.sc-kennzahl-etikett {
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}
.sc-kennzahl-wert {
  font-weight: var(--s360-fett-voll);
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--s360-text);
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.sc-kennzahl-zusatz {
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-zart);
  margin-top: 5px;
}

/* =============================================================================
   4. Karte
   ============================================================================= */
.sc-karte {
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r);
  overflow: hidden;
}
.sc-karte-kopf {
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s360-abstand-3);
  border-bottom: 1px solid var(--s360-linie);
}
.sc-karte-kopf-titel { font-size: var(--s360-groesse-sm); font-weight: var(--s360-fett-halb);
                       color: var(--s360-text); }
.sc-karte-kopf-untertitel { font-size: var(--s360-groesse-xs); color: var(--s360-text-leise);
                            margin-top: 2px; }
.sc-karte-leib { padding: 14px; }
.sc-karte-leib.ohne-luft { padding: 0; }

/* =============================================================================
   5. Tabelle — Kopfzeile, Zahlenspalte, eigener Querlauf
   ============================================================================= */
.sc-tabelle-rahmen { overflow-x: auto; }
.sc-tabelle { width: 100%; border-collapse: collapse; min-width: 640px; }
.sc-tabelle th, .sc-tabelle td {
  border-bottom: 1px solid var(--s360-linie);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  font-size: var(--s360-groesse-sm);
}
.sc-tabelle th {
  background: var(--s360-flaeche-tief);
  color: var(--s360-text-leise);
  font-size: var(--s360-groesse-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: var(--s360-fett-halb);
  position: sticky;
  top: 0;
}
.sc-tabelle tbody tr:hover td { background: var(--s360-flaeche-hover); }
.sc-tabelle tr.aktiv td { background: var(--s360-akzent-leise); }
.sc-tabelle td.zahl, .sc-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================================
   6. Statusmarke — ERGAENZT die vorhandene Basis `.sc-marke` (scope.css).
   Jede Marke traegt Symbol UND Text (WCAG 1.4.1 — Farbe allein ist kein
   zulaessiger Unterschied); die Symbole kommen aus dem Aufruf, nicht von hier.
   ============================================================================= */
.sc-marke.m-erfolg  { background: var(--s360-erfolg-grund);  color: var(--s360-erfolg); }
.sc-marke.m-warnung { background: var(--s360-warnung-grund); color: var(--s360-warnung); }
.sc-marke.m-fehler  { background: var(--s360-fehler-grund);  color: var(--s360-fehler); }
.sc-marke.m-neutral { background: var(--s360-gesperrt-grund); color: var(--s360-gesperrt-text);
                      border: 1px solid var(--s360-gesperrt-rand); }
/* Gold traegt hier eine FLAECHE mit dunkler Schrift (--s360-gold-ink,
   7,9:1) — nie helle/goldene Schrift auf hellem Grund. */
.sc-marke.m-akzent  { background: var(--s360-akzent); color: var(--s360-text-auf-gold, var(--accent-deep)); }

/* =============================================================================
   7. Statuspunkt vor einem Wort
   ============================================================================= */
.sc-punkt {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--s360-text-zart);
  vertical-align: middle;
}
.sc-punkt.erfolg  { background: var(--s360-erfolg); }
.sc-punkt.warnung { background: var(--s360-warnung); }
.sc-punkt.fehler  { background: var(--s360-fehler); }
.sc-punkt.akzent  { background: var(--s360-akzent); }

/* =============================================================================
   8. Formularraster
   ============================================================================= */
.sc-feldgitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s360-abstand-3);
}
.sc-feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-feld.voll { grid-column: 1 / -1; }
.sc-feld-label {
  color: var(--s360-text-leise);
  font-size: var(--s360-groesse-xs);
  font-weight: var(--s360-fett-mittel);
}

/* =============================================================================
   9. Knoepfe — dieselben Farbrollen wie `.btn`/`.btn-gold`/`.btn-ghost`, damit
   alte und neue Ansichten dieselbe Knopfsprache sprechen; eigener Klassenname,
   weil der Vertrag (§ 6) genau diesen verlangt.
   ============================================================================= */
.sc-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: var(--s360-fett-halb);
  cursor: pointer;
  white-space: nowrap;
  background: var(--s360-flaeche-tief);
  color: var(--s360-text);
  transition: background var(--s360-dauer) var(--ease), border-color var(--s360-dauer);
}
.sc-knopf:hover { background: var(--s360-linie); }
.sc-knopf:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 2px; }
.sc-knopf.primaer { background: var(--s360-akzent); color: var(--s360-text-auf-gold, var(--accent-deep)); }
.sc-knopf.primaer:hover { background: var(--s360-akzent-hover); }
.sc-knopf.stumm { background: transparent; color: var(--s360-text); border-color: var(--s360-linie); }
.sc-knopf.stumm:hover { border-color: var(--s360-text-leise); background: var(--s360-flaeche-hover); }
/* Gefahr: eigene Farbe (Rot), keine Verwechslung mit Gold-Primaer. */
.sc-knopf.sc-knopf-gefahr { background: var(--s360-fehler); color: var(--s360-weiss); }
.sc-knopf.sc-knopf-gefahr:hover { filter: brightness(.92); }
.sc-knopf:disabled {
  /* Gesperrt ueber eigene Farben, nie ueber Deckkraft. */
  background: var(--s360-gesperrt-grund);
  color: var(--s360-gesperrt-text);
  border-color: var(--s360-gesperrt-rand);
  cursor: not-allowed;
}

/* =============================================================================
   10. Leerzustand — ERGAENZT `.sc-leer` (scope.css) um Symbol/Text/Handlung,
   OHNE dessen Basis (Block, Innenabstand, Farbe) umzudefinieren: bestehende
   einfache Verwendungen ("Lade …") duerfen sich optisch nicht verschieben.
   Der neue Aufbau gilt nur, wo die Modifikatorklasse `zentriert` dabeisteht.
   ============================================================================= */
.sc-leer.zentriert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sc-leer-symbol { color: var(--s360-text-zart); margin-bottom: 4px; }
.sc-leer-titel { font-weight: var(--s360-fett-halb); color: var(--s360-text); }
.sc-leer-aktion { margin-top: var(--s360-abstand-3); }

/* =============================================================================
   11. Anwesende — ueberlappende Kuerzel (wer ist gerade an derselben Position)
   ============================================================================= */
.sc-anwesend { display: flex; align-items: center; }
.sc-anwesend-kuerzel {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .6875rem;
  font-weight: var(--s360-fett-voll);
  background: var(--s360-navy-100, var(--s360-flaeche-tief));
  color: var(--s360-navy-900, var(--s360-text));
  border: 2px solid var(--s360-flaeche-karte);
  margin-left: -8px;
}
.sc-anwesend-kuerzel:first-child { margin-left: 0; }

/* =============================================================================
   12. Projektwechsler (oben in der Seitenleiste, öffnet nach unten)
   ============================================================================= */
.sc-pw-wrap { position: relative; margin: 0 2px 4px; }
.sc-pw-knopf { justify-content: space-between; }
.sc-pw-knopf .scope-navlink-pfeil { color: var(--s360-text-leise); }
.sc-pw-flyout {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 85;
  padding: 6px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-top: 2px solid var(--s360-akzent);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.sc-pw-wrap.offen .sc-pw-flyout { display: block; }
/* Eingeklappte Leiste: der Wechsler wird zum reinen Symbolknopf, das
   Flyout bleibt erreichbar (dieselbe Regel wie bei den Hauptpunkten). */
.scope-seite.schmal .sc-pw-knopf .scope-navlink-text,
.scope-seite.schmal .sc-pw-knopf .scope-navlink-pfeil { display: none; }
.scope-seite.schmal .sc-pw-knopf { justify-content: center; }
/* ⚠️ Dieselbe Falle wie beim Navigations-Flyout: in der schmalen Leiste tritt
   auch dieses Menü seitlich heraus und wurde vom Scrollcontainer beschnitten.
   `fixed` holt es heraus; die Koordinaten setzt `flyoutAusrichten` in
   `js/scope-navigation.js`. */
.scope-seite.schmal .sc-pw-flyout { position: fixed; width: 260px; margin-left: 0; }

/* =============================================================================
   13. Favoriten — dauerhafte Liste, kein Flyout
   ============================================================================= */
/* ⚠️ Hier stand `.sc-favoriten { margin-bottom: 2px; }`. Seit dem 24.09.2026
   sind die Favoriten ein Flyout, und `.scope-unter` ist `position: fixed` —
   ein Aussenabstand tut dort nichts. Entfernt statt stehengelassen: eine Regel,
   die nichts bewirkt, liest der naechste als Absicht und traut sich nicht,
   sie anzufassen. Die Kennung `.sc-favoriten` bleibt, sie steht im Markup und
   traegt die Zeile darunter. */
.sc-favoriten .sc-leer { padding: 8px 10px; font-size: var(--s360-groesse-xs); }

/* =============================================================================
   14. Flyout-Eintraege mit Untertitel (neue Bereichs-Flyouts, „Zuletzt
   bearbeitet", Projektwechsler-Zeilen) — Erweiterung von `.scope-unterlink`
   (scope.css), das dort nur eine Zeile Text kennt.
   ============================================================================= */
.scope-unterlink.mit-untertitel {
  align-items: flex-start;
  padding: 8px 8px 8px 10px;
  gap: 9px;
}
.scope-unterlink.mit-untertitel > .sym { margin-top: 1px; }
.scope-unterlink-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scope-unterlink-titel {
  font-size: var(--s360-groesse-xs);
  font-weight: var(--s360-fett-mittel);
  color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope-unterlink-untertitel {
  font-size: .6875rem;
  color: var(--s360-text-zart);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope-unterlink.mit-untertitel.active .scope-unterlink-untertitel { color: inherit; opacity: .8; }

/* Stern-Knopf: eigenes kleines Symbol, das Klicken darauf darf die Zeile
   NICHT zugleich navigieren (dafuer sorgt `stopPropagation` in
   scope-navigation.js — hier nur das Aussehen). */
.sc-stern {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--s360-text-zart);
  cursor: pointer;
}
.sc-stern:hover { background: var(--s360-flaeche-hover); color: var(--s360-text); }
.sc-stern:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 1px; }
/* Aktiv: Symbol GEFUELLT statt nur umrissen — Farbe allein waere hier kein
   zulaessiger Unterschied (derselbe Grundsatz wie bei `.sc-marke`), das
   gefuellte Sternchen ist die Formaenderung dazu. Abgedunkeltes Gold
   (--accent-deep), nicht das reine Akzentgold: auf der hellen Kartenflaeche
   erreicht #DEA51C nur 2,2:1 — accent-deep 5,4:1. */
.sc-stern.aktiv { color: var(--accent-deep); }
.sc-stern.aktiv svg { fill: currentColor; }

/* =============================================================================
   15. Modal-System (js/scope-modal.js) — sitzt auf `.ui-overlay`/`.ui-karte`
   (scope.css) auf, damit ALLE Dialoge — die alten #ui-confirm/#ui-prompt
   ebenso wie jeder neue ctx.modal.* — optisch eins sind.
   ============================================================================= */
.sc-modal-rahmen {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* ⚠️ Hier stand `max-width: 480px`. Seit dem 24.09.2026 gilt volle Breite;
     die Begrenzung sitzt jetzt allein an der Lage des Overlays
     (`.ui-overlay { inset: 0 0 0 var(--sc-modal-links) }` in scope.css), damit es EINE Stelle
     bleibt. Zwei Breitenangaben in zwei Dateien waeren genau der Zustand,
     aus dem am 25.08.2026 „mal 440, mal 480" entstanden ist. */
  max-width: none;
  overflow: hidden;
  /* „Springt nicht": die Hoehe wird von scope-modal.js gesetzt, bevor der
     Rahmen sichtbar wird; ein spaeterer Wechsel (neuMessen) blendet ueber. */
  transition: height .18s var(--ease, ease);
  /* ⚠️⚠️ OBERGRENZE — HIER FEHLTE SIE, UND DAS WAR DER SCHWERSTE DER DREI
     MODALFEHLER. Gemessen am 25.08.2026 in einem 720 px hohen Fenster:
         `max-height: none`, Rahmenhoehe 1088 px, oben −184, unten 904
     Kopf UND Fuss lagen ausserhalb des Bildes — der Knopf war nicht
     erreichbar, und die Seite scrollt nicht mit (`body.sc-modal-offen`
     sperrt sie, zu Recht). Ein langer Hinweis war damit eine Sackgasse.
     Die 32 px waren bis zum 24.09.2026 der Innenabstand des Overlays (16 oben,
     16 unten). Den hat der Umbau auf volle Breite auf 0 gesetzt — die Zahl
     BLEIBT hier trotzdem stehen, jetzt als eigene Zusage: oben und unten je
     16 px Luft, damit der Rahmen die Bildkante nicht beruehrt und die
     Obergrenze weiter greift. Wer sie streicht, holt den Fehler von oben
     zurueck.
     ⚠️ `100dvh` zuerst mit `100vh` als Rueckfall: `vh` meint bei ein- und
     ausfahrender Browserleiste das Fenster OHNE sie, und ein Dialog waere dann
     um deren Hoehe zu hoch. Bleibt stehen, obwohl die mobilen Ansichten am
     24.09.2026 entfallen sind: es kostet eine Zeile und schuetzt auch ein
     Fenster, das jemand sehr flach zieht. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}
@media (prefers-reduced-motion: reduce) { .sc-modal-rahmen { transition: none; } }
.sc-modal-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s360-abstand-3);
  padding: var(--s360-abstand-5) var(--s360-abstand-5) var(--s360-abstand-3);
}
.sc-modal-titel { font-size: 1.125rem; color: var(--s360-text); margin: 0; }
.sc-modal-schliessen {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none;
  border-radius: var(--r-sm);
  color: var(--s360-text-leise);
  cursor: pointer;
}
.sc-modal-schliessen:hover { background: var(--s360-flaeche-hover); color: var(--s360-text); }
.sc-modal-leib {
  padding: 0 var(--s360-abstand-5) var(--s360-abstand-4);
  overflow: auto;
  /* ⚠️⚠️ `min-height: 0` IST PFLICHT, nicht Kosmetik. Ein Flex-Element hat als
     Mindesthoehe seinen Inhalt; ohne diese Zeile kann der Leib nicht
     schrumpfen, die Obergrenze des Rahmens greift nicht, und der Inhalt tritt
     unten heraus statt zu scrollen. Dieselbe Falle wie bei der
     Navigationsliste in der Seitenleiste.
     ⚠️ Der Rollbalken erscheint jetzt nur, wenn der Inhalt WIRKLICH hoeher ist
     als das Fenster — vorher erschien er immer: gemessen ein Ueberschuss von
     genau 1 px in JEDEM Dialog, weil die Rahmenhoehe aus dem ganzzahligen
     `scrollHeight` kam und die echte Hoehe gebrochen ist. Behoben in
     js/scope-modal.js (`natuerlicheHoehe`). */
  min-height: 0;
  scrollbar-width: thin;
}
.sc-modal-text { margin: 0 0 var(--s360-abstand-3); color: var(--s360-text); line-height: 1.55; }
/* Ein Dialog ohne Kopf (Bestaetigen, Nachfragen) braucht die Luft oben trotzdem
   — sonst klebt die Meldung an der Oberkante. Gleicher Wert wie der Kopf. */
.sc-modal-leib.ohne-kopf { padding-top: var(--s360-abstand-5); }
.sc-modal-leib.ohne-kopf > :last-child { margin-bottom: 0; }
.sc-modal-leib .sc-feldgitter { margin-top: var(--s360-abstand-2); }
.sc-modal-leib input.inp, .sc-modal-leib select.inp, .sc-modal-leib textarea.inp { width: 100%; }
.sc-modal-fuss {
  border-top: 1px solid var(--s360-linie);
  padding: var(--s360-abstand-3) var(--s360-abstand-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--s360-abstand-2);
}
/* Fehler-Variante: eine linke rote Kante genuegt — kein zweites, lauteres
   Erscheinungsbild, sonst wirkt ein Fehler wie eine andere Anwendung. */
.sc-modal-lage.sc-modal-fehler .sc-modal-rahmen { border-left: 3px solid var(--s360-fehler); }

/* Seiten-Scroll waehrend ein Modal offen ist sperren — ohne Sprung, weil
   `scrollbar-gutter: stable` bereits global auf <html> steht (scope.css TEIL B). */
body.sc-modal-offen { overflow: hidden; }

/* =============================================================================
   Dunkelmodus: nichts davon oben braucht einen eigenen Block — jede Farbe ist
   ein `--s360-*`-Token, und die Token selbst drehen sich in scope.css TEIL D
   (`:root[data-theme="dark"]`). Die einzige Ausnahme mit echtem Bedarf ist die
   Anwesend-Kuerzelfarbe, die auf einen Fallback-Ton zurueckgreift, falls die
   Navy-Stufen 100/900 einmal fehlen sollten — das ist bereits oben ueber
   `var(--s360-navy-100, …)` mit Rueckfall geloest, keine zusaetzliche Regel
   noetig.
   ============================================================================= */

/* =============================================================================
   Exportdialog (js/scope-export.js) — Auswahlkarten und Schalterzeilen
   -----------------------------------------------------------------------------
   ⚠️ WARUM DIESE KLASSEN HIER STEHEN UND NICHT IN EINER ANSICHTS-CSS
   Der Exportdialog ist keine Ansicht, sondern eine Erweiterung des
   Modal-Wortschatzes: `formular()` kennt Text, Zahl, Datum, Auswahl,
   Mehrzeilig, E-Mail und Passwort — aber keine Auswahlkarte und keinen
   Schalter. Beides gehoert deshalb neben die uebrigen Modal-Bausteine, damit
   der naechste Dialog, der eine Auswahlkarte braucht, sie FINDET statt sie
   nachzubauen.
   ============================================================================= */

.sc-exp-titel {
  color: var(--s360-text-leise);
  font-size: var(--s360-groesse-xs);
  font-weight: var(--s360-fett-voll);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: var(--s360-abstand-2);
}

.sc-exp-trenner {
  height: 1px;
  background: var(--s360-linie);
  margin: var(--s360-abstand-4) 0;
}

.sc-exp-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s360-abstand-2);
}

.sc-exp-karte {
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-sm);
  background: var(--s360-flaeche-tief);
  padding: var(--s360-abstand-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color var(--s360-dauer) var(--ease),
              background var(--s360-dauer) var(--ease);
}
.sc-exp-karte strong {
  font-size: var(--s360-groesse-sm);
  font-weight: var(--s360-fett-voll);
  color: var(--s360-text);
}
.sc-exp-karte span {
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}
.sc-exp-karte:hover { border-color: var(--s360-navy-900); }

/* ⚠️ Der gewaehlte Zustand traegt einen ZWEITEN, unabhaengigen Hinweis neben
   der Farbe: einen kraeftigeren Rand plus die Innenschattierung. Wer nur die
   Farbe wechselt, hat fuer eine rot-gruen-blinde Person nichts gewechselt —
   und hier steht eine Entscheidung darueber, was im Kundenpaket landet. */
.sc-exp-karte.gewaehlt {
  border-color: var(--s360-navy-900);
  box-shadow: inset 0 0 0 1px var(--s360-navy-900);
  background: var(--s360-navy-100);
}
.sc-exp-karte:focus-visible {
  outline: 2px solid var(--s360-fokus);
  outline-offset: 2px;
}

.sc-exp-schalter {
  display: flex;
  align-items: flex-start;
  gap: var(--s360-abstand-2);
  padding: 9px 0;
  cursor: pointer;
}
.sc-exp-schalter + .sc-exp-schalter { border-top: 1px solid var(--s360-linie); }
.sc-exp-schalter input { margin-top: 3px; flex: none; accent-color: var(--s360-navy-900); }
.sc-exp-schalter > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-exp-schalter strong {
  font-size: var(--s360-groesse-sm);
  font-weight: var(--s360-fett-mittel);
  color: var(--s360-text);
}
.sc-exp-schalter > span > span {
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}

/* Ein Dialog mit vier Auswahlkarten braucht mehr Breite als eine Rueckfrage.
   ⚠️ 760 statt 640 (Sascha, 25.08.2026: „Modal verbreitern"). Gemessen war der
   Exportdialog bei 640 px Breite 688 px hoch — das ist der Deckel — und sein
   Leib lief um 40 px ueber, also mit Rollbalken. Die Breite allein hilft
   wenig; entscheidend ist, dass die vier Schalterzeilen darin nebeneinander
   Platz finden (siehe `.sc-exp-schaltergitter`). Zusammen faellt der Ueberlauf
   weg. */
/* ⚠️ `.sc-modal-breit` ist seit dem 24.09.2026 WIRKUNGSLOS und steht trotzdem
   noch: die Klasse hob einen Dialog von 480 auf 760 px: seit alle Dialoge volle
   Breite haben, gaebe eine Obergrenze von 760 px den betroffenen drei
   (Export, LV einlesen, Rechtstexte) als EINZIGEN wieder eine schmale Karte —
   also das Gegenteil dessen, was der Name sagt.
   ⚠️ NICHT aus dem JavaScript entfernt (`scope-export.js`,
   `scope-lv-einlesen.js`, `scope-rechtstexte.js` setzen sie weiter). Die
   Klasse ist der Merkposten dafuer, WELCHE Dialoge als „Dokument statt
   Rueckfrage" gedacht sind; wer die volle Breite spaeter zurueckdreht,
   braucht genau diese Liste wieder. Entfernen also erst zusammen mit der
   Entscheidung, nicht vorher. */
.sc-modal-breit .ui-karte { max-width: none; }

/* =============================================================================
   Rechtstext im Modal (js/scope-rechtstexte.js)
   -----------------------------------------------------------------------------
   ⚠️ ABSICHTLICH EIN EIGENER, KLEINER SATZ REGELN — und NICHT `css/legal.css`
   mit hineingezogen. Sascha am 25.08.2026: „Keine extra Seite, kein extra
   Layout." Die Datei der Rechtsseiten bringt eine eigene Kopfzeile, einen
   eigenen Rahmen und eigene Schriftgroessen mit; im Modal waere das genau das
   zweite Layout, das weg sollte. Hier steht deshalb nur, was ein Fliesstext
   braucht, und jede Farbe ist ein Haustoken.
   ⚠️ Kein `max-width` in `ch` auf den Absaetzen: der Rahmen ist 760 px breit,
   das ergibt bei 15 px Grundtext von sich aus rund 80 Zeichen.
   ============================================================================= */
.sc-rechtstext { color: var(--s360-text); font-size: var(--s360-groesse-sm); line-height: 1.6; }
.sc-rechtstext > :first-child { margin-top: 0; }
.sc-rechtstext > :last-child { margin-bottom: 0; }
.sc-rechtstext h2 {
  font-size: var(--s360-groesse-md);
  font-weight: var(--s360-fett-halb);
  color: var(--s360-text);
  margin: var(--s360-abstand-4) 0 var(--s360-abstand-2);
}
.sc-rechtstext h3 {
  font-size: var(--s360-groesse-sm);
  font-weight: var(--s360-fett-halb);
  color: var(--s360-text);
  margin: var(--s360-abstand-3) 0 var(--s360-abstand-1, 4px);
}
.sc-rechtstext p, .sc-rechtstext ul, .sc-rechtstext ol { margin: 0 0 var(--s360-abstand-3); }
.sc-rechtstext ul, .sc-rechtstext ol { padding-left: 1.35em; }
.sc-rechtstext li { margin-bottom: 4px; }
.sc-rechtstext a { color: var(--accent-deep); }
.sc-rechtstext .muted { color: var(--s360-text-leise); }
/* Tabellen kommen in der AVV vor (Verzeichnis der Verarbeitungen). Sie sind
   der einzige Inhalt, der breiter werden kann als der Rahmen — deshalb ein
   eigener Rollbereich, damit nicht die ganze Seite quer scrollt. */
.sc-rechtstext table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--s360-groesse-xs);
  margin: 0 0 var(--s360-abstand-3);
}
.sc-rechtstext th, .sc-rechtstext td {
  border: 1px solid var(--s360-linie);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.sc-rechtstext th { background: var(--s360-flaeche-tief); font-weight: var(--s360-fett-halb); }

/* ⚠️⚠️ DIE VIER SCHALTER STANDEN UNTEREINANDER und waren damit 247 px hoch
   (gemessen: 61 + 62 + 62 + 62). Genau daran lag der Rollbalken im
   Exportdialog — nicht an zu wenig Breite. Zwei Spalten halbieren die Hoehe
   auf rund 124 px, und der Ueberschuss von 40 px ist damit weg.
   ⚠️ Der Trennstrich zwischen den Zeilen (`+ .sc-exp-schalter`) faellt im
   Gitter weg: quer waere er eine Linie zwischen zwei NEBENeinander stehenden
   Schaltern und wuerde eine Gliederung behaupten, die es nicht gibt. */
.sc-exp-schaltergitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s360-abstand-4);
}
.sc-exp-schaltergitter .sc-exp-schalter + .sc-exp-schalter { border-top: 0; }

/* Aktionsspalte der Zuschlagstabelle: drei kleine Knoepfe nebeneinander,
   ohne Umbruch — sonst rutscht "loeschen" unter "bearbeiten" und wird
   verwechselt. */
.zuschlag-aktionen {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

/* =============================================================================
   LV einlesen (js/scope-lv-einlesen.js)
   -----------------------------------------------------------------------------
   ⚠️ Nur die Zustandszeile und die laufende Flaeche — die Ablage selbst ist
   `.sc-ablage` aus scope.css. Eine zweite Ablageform waere genau die Sorte
   Dopplung, die bei den Seitenkoepfen schon einmal aufgeraeumt werden musste.
   ============================================================================= */
.sc-lv-stand {
  margin: calc(-1 * var(--s360-abstand-3)) 0 var(--s360-abstand-4);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--s360-flaeche-tief);
  color: var(--s360-text-leise);
  font-size: var(--s360-groesse-xs);
}
/* ⚠️ Der laufende Zustand ist an der SCHRIFT erkennbar, nicht nur an der Farbe
   (WCAG 1.4.1) — und ohne Bewegung, damit ein mehrminuetiger Lauf nicht
   unruhig macht. */
.sc-lv-stand.laeuft { color: var(--s360-text); font-weight: var(--s360-fett-halb); }
.sc-lv-stand.fehler {
  background: var(--s360-fehler-grund);
  color: var(--s360-fehler);
  font-weight: var(--s360-fett-halb);
}
/* Waehrend des Laufs ist die Flaeche kein Ziel mehr: ein zweiter Wurf waere ein
   zweiter kostenpflichtiger KI-Lauf auf dieselbe Datei. */
.sc-ablage.laeuft { cursor: progress; opacity: .6; pointer-events: none; }
/* Der Hinweis auf ein unvollstaendiges Ergebnis im Rollen-Dialog. */
.sc-modal-text.sc-lv-warnung {
  padding: 8px 10px;
  border-left: 3px solid var(--s360-warnung, var(--s360-akzent));
  background: var(--s360-flaeche-tief);
  border-radius: var(--r-sm);
}

/* ⚠️ DIESE KLASSE STAND SEIT E19 IM MARKUP UND HATTE KEIN CSS.
   `ablageBauen` setzt `sc-lv-ablage-wrap` auf den Umschlag aus Kachel,
   verstecktem Dateifeld und Zustandszeile — nur war der Umschlag ein nacktes
   `<div>`. Das ist nicht harmlos: `display:block` laesst den unteren Rand der
   `.sc-ablage` aus dem Umschlag HERAUSFALLEN (Randzusammenfall), und die
   Zustandszeile mit ihrem negativen Rand rutscht dann je nach Nachbarelement
   verschieden weit. `flow-root` schliesst den Umschlag ab; der Abstand nach
   unten gehoert danach ihm und nicht dem Zufall.
   ⚠️ `position:relative` steht hier fuer den Fortschritt darunter — er soll
   sichtbar zum Umschlag gehoeren und nicht zum naechsten Kasten. */
.sc-lv-ablage-wrap {
  display: flow-root;
  position: relative;
}
/* Die Schrittliste sitzt direkt unter der Zustandszeile und gehoert sichtbar
   zu ihr — deshalb hier ohne den oberen Abstand, den sie allein stehend haette. */
.sc-lv-ablage-wrap > .sc-lv-schritte { margin-top: calc(-1 * var(--s360-abstand-3)); }

/* --- Verarbeitungsstatus: die TATSAECHLICHEN Schritte (Etappe 3, § 26) ------
   ⚠️⚠️ KEIN FORTSCHRITTSBALKEN. Ein Balken behauptet einen Anteil („62 %"),
   den niemand kennt: wie lange das Lesen einer 40-MB-Datei dauert, weiss der
   Server erst hinterher. Ein Balken, der bei 90 % stehen bleibt, ist eine
   Luege mit Animation. Gezeigt wird deshalb NUR, was gemeldet wurde: eine
   Liste `{schritt, zustand, hinweis}` — und ein Schritt, den der Server nicht
   nennt, erscheint auch nicht.
   ⚠️ Jeder Zustand traegt SYMBOL UND TEXT, nie nur Farbe (WCAG 1.4.1). */
.sc-lv-schritte {
  margin: 0 0 var(--s360-abstand-4);
  padding: 10px 12px;
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-sm);
  background: var(--s360-flaeche-karte);
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}
.sc-lv-schritt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}
.sc-lv-schritt .sc-lv-schritt-name { color: var(--s360-text); }
.sc-lv-schritt-symbol { flex: none; display: inline-flex; margin-top: 1px; }
/* Offen: noch nicht gemeldet. Bewusst blass, aber ueber `--s360-text-zart`
   (4,5:1 auf Karte) und nicht ueber `opacity` — die Hausregel dazu ist
   nachgemessen und lautet: eigene Farbe, keine Deckung. */
.sc-lv-schritt.offen .sc-lv-schritt-name { color: var(--s360-text-zart); }
.sc-lv-schritt.laeuft .sc-lv-schritt-name { font-weight: var(--s360-fett-halb); }
.sc-lv-schritt.fertig .sc-lv-schritt-symbol { color: var(--s360-erfolg); }
.sc-lv-schritt.fehler .sc-lv-schritt-symbol { color: var(--s360-fehler); }
.sc-lv-schritt.fehler .sc-lv-schritt-name { color: var(--s360-fehler);
                                            font-weight: var(--s360-fett-halb); }
/* ⚠️ ZWEI ZUSTAENDE, DIE ES IM SERVER SCHON GAB (`lv_extraktion.Schritt.ergebnis`
   kennt ok | fehler | teilweise | uebersprungen), im CSS aber nicht. Ohne sie
   saehe ein teilweise gelungener Schritt aus wie ein offener — und „teilweise"
   ist genau der Fall, bei dem der Abrechner hinsehen muss: es liegen Positionen
   vor UND es fehlt etwas. Kein neuer Farbwert, nur die vorhandenen Tokens. */
.sc-lv-schritt.teilweise .sc-lv-schritt-symbol { color: var(--s360-warnung); }
.sc-lv-schritt.teilweise .sc-lv-schritt-name { font-weight: var(--s360-fett-halb); }
.sc-lv-schritt.uebersprungen .sc-lv-schritt-name { color: var(--s360-text-zart); }
.sc-lv-schritt-hinweis { color: var(--s360-text-leise); }

/* =============================================================================
   Positionstabelle (js/scope-lv-tabelle.js) — Auftrag UND Nachtraege
   -----------------------------------------------------------------------------
   ⚠️ ERGAENZT `.sc-tabelle`, definiert sie nicht um (Oberflaechenvertrag § 6).
   Neu sind hier genau vier Dinge, die eine Abrechnungstabelle braucht und eine
   Liste nicht: bearbeitbare Zellen, abgesetzte Gliederungszeilen, die
   Abweichungsmarke und die Abschnittsleiste.
   ============================================================================= */

/* ⚠️ NEUN SPALTEN BRAUCHEN MEHR MINDESTBREITE als die 640 px der Basis. Der
   Rahmen (`.sc-tabelle-rahmen`, `overflow-x:auto`) laesst sie waagerecht
   laufen — es wird KEINE Spalte ausgeblendet. In einer Abrechnungstabelle ist
   eine versteckte Spalte kein Platzgewinn, sondern eine fehlende Angabe:
   wer die Positionsart nicht sieht, zaehlt eine Bedarfsposition mit. */
.sc-lvt-tabelle { min-width: 1080px; }

/* Bearbeitbare Zelle: erkennbar, ohne dass die Tabelle wie ein Formular
   aussieht. Der gestrichelte Unterstrich erscheint erst beim Zeigen/Fokus —
   200 dauerhaft unterstrichene Zellen waeren ein Gitter aus Linien. */
.sc-lvt-klickbar { cursor: text; }
.sc-lvt-klickbar:hover { box-shadow: inset 0 -1px 0 0 var(--s360-linie-stark); }
.sc-lvt-klickbar:focus-visible { outline: 2px solid var(--s360-akzent); outline-offset: -2px; }
.sc-lvt-klickbar.speichert { color: var(--s360-text-zart); }
.sc-lvt-feld { width: 100%; min-width: 70px; box-sizing: border-box; }
.sc-lvt-feld.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ⚠️ UNSICHER ERKANNT — DEZENT. Kein roter Kasten, keine Prozentzahl: ein
   gepunkteter Unterstrich in Warnfarbe plus `title`. Wer 400 unsichere Felder
   hat, soll die Tabelle noch lesen koennen; ein Alarm je Zelle waere kein
   Hinweis mehr, sondern Rauschen. */
.sc-lvt-unsicher { text-decoration: underline dotted var(--s360-warnung);
                   text-underline-offset: 3px; }

/* Gesamt netto — gerechnet, nicht bearbeitbar. Deshalb KEIN `.sc-lvt-klickbar`
   und ein anderer Zeiger: das Feld sieht nicht so aus, als koennte man es
   anfassen, weil man es nicht kann. */
.sc-lvt-gesamt { cursor: default; white-space: nowrap; }
.sc-lvt-gesamt.abweichend { color: var(--s360-text); }
.sc-lvt-abweichung {
  display: inline-flex; vertical-align: middle;
  margin-left: 6px;
  color: var(--s360-warnung);
}

/* Gliederungszeilen: OPTISCH ABGESETZT, aber in derselben Tabelle — ein Titel
   gehoert zwischen seine Positionen, nicht in eine zweite Liste daneben. */
.sc-lvt-gliederung > td {
  background: var(--s360-flaeche-tief);
  font-weight: var(--s360-fett-halb);
}
.sc-lvt-gliederung.t-haupt > td { border-top: 2px solid var(--s360-linie-stark); }
.sc-lvt-gliederung.t-unter .sc-lvt-titeltext { padding-left: 26px; }
.sc-lvt-titelsumme { font-variant-numeric: tabular-nums; }
.sc-lvt-hinweiszeile > td { color: var(--s360-text-leise); font-style: normal; }

.sc-lvt-oz { white-space: nowrap; }
.sc-lvt-ozwert { display: inline-block; min-width: 48px; }
/* Kurztext ist die einzige Spalte, die waechst — die acht anderen tragen Zahlen,
   Einheiten und Marken fester Laenge. Ohne diese Breite verteilt der Browser den
   Rest gleichmaessig, und ein Kurztext wie „Kabelrinne 200 mm, verzinkt,
   einschliesslich Befestigungsmaterial" faellt auf vier Zeilen, waehrend die
   Zahlenspalten Luft haben. `min-width` und nicht `width`: bei wenigen kurzen
   Texten darf die Tabelle weiter schmal bleiben. */
.sc-lvt-kurz { min-width: 260px; }
.sc-lvt-aufklapper {
  background: none; border: 0; padding: 0 6px 0 0; margin: 0;
  color: var(--s360-text-leise); cursor: pointer; vertical-align: middle;
}
.sc-lvt-aufklapper:focus-visible { outline: 2px solid var(--s360-akzent); outline-offset: 2px; }

/* Langtext als aufgeklappte Zeile — volle Breite, damit ein halber Absatz
   Fliesstext bleibt und nicht in eine 12 Zeichen breite Spalte gequetscht wird. */
.sc-lvt-langtextzeile > td { background: var(--s360-flaeche-hover); }
.sc-lvt-langtext { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 4px 26px; }
.sc-lvt-langtext-label {
  font-size: var(--s360-groesse-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--s360-text-leise);
}
.sc-lvt-langtext-text { white-space: pre-wrap; color: var(--s360-text); }
.sc-lvt-zuordnung { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }

.sc-lvt-kopftaten { display: flex; align-items: center; gap: 8px; }

/* Abschnittsleiste. Sie steht UNTER der Tabelle im Kartenfuss und nicht ueber
   ihr: wer am Ende eines Abschnitts angekommen ist, findet den naechsten Schritt
   dort, wo er gerade hinsieht. */
.sc-lvt-abschnittsleiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--s360-linie);
}
.sc-lvt-abschnittstext {
  font-size: var(--s360-groesse-xs); color: var(--s360-text-leise);
  font-variant-numeric: tabular-nums;
}
.sc-lvt-sprung { margin-left: auto; max-width: 190px; }

/* =============================================================================
   Ablage: Ordnerleiste, Galerie, Dateiname im Ort (js/scope-ablage.js)
   -----------------------------------------------------------------------------
   ⚠️ Gemeinsam fuer Fotonachweise UND Dokumente — dieselbe Begruendung wie beim
   Modul selbst: zwei Kopien heissen, dass ein Zustand (Wurfziel, gezogene
   Kachel) in einer davon fehlt.
   ============================================================================= */
.sc-ordnerleiste {
  display: flex;
  align-items: center;
  gap: var(--s360-abstand-2);
  /* ⚠️ `wrap`, NICHT waagerechtes Scrollen. Ein Projekt hat selten mehr als
     zehn Ordner; eine zweite Zeile ist dann lesbarer als ein Rollbalken, den
     man erst finden muss. Bricht es doch einmal um, stehen die Reiter
     untereinander statt versteckt zu sein. */
  flex-wrap: wrap;
  margin-bottom: var(--s360-abstand-4);
}
.sc-ordnerreiter-huelle { display: inline-flex; align-items: stretch; }
.sc-ordnerreiter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-sm);
  background: var(--s360-flaeche-karte);
  color: var(--s360-text-leise);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  cursor: pointer;
}
.sc-ordnerreiter:hover { background: var(--s360-flaeche-hover); color: var(--s360-text); }
.sc-ordnerreiter.aktiv {
  color: var(--s360-text);
  font-weight: var(--s360-fett-halb);
  border-color: var(--s360-akzent);
  /* ⚠️ Der aktive Reiter traegt die goldene Kante UNTEN, nicht rundherum:
     rundherum saehe er aus wie ein Wurfziel (siehe `.wurfziel`), und die beiden
     Zustaende treten beim Ziehen gleichzeitig auf. */
  box-shadow: inset 0 -2px 0 var(--s360-akzent);
}
/* ⚠️⚠️ DAS WURFZIEL MUSS SICH VOM AKTIVEN REITER UNTERSCHEIDEN. Beim Ziehen ist
   IMMER ein Reiter aktiv; sähen beide gleich aus, wüsste niemand, wo das Foto
   landet. Deshalb Flaeche plus gestrichelte Kante — eine Form, die der aktive
   Reiter nie hat. */
.sc-ordnerreiter.wurfziel {
  border-style: dashed;
  border-color: var(--s360-akzent);
  background: var(--s360-akzent-leise);
  color: var(--s360-text);
}
.sc-ordner-menue {
  display: inline-flex; align-items: center;
  border: 1px solid var(--s360-linie); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--s360-flaeche-karte);
  color: var(--s360-text-zart);
  padding: 0 7px; cursor: pointer;
}
.sc-ordner-menue:hover { background: var(--s360-flaeche-hover); color: var(--s360-text); }
.sc-ordnerreiter-huelle .sc-ordnerreiter { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.sc-ordner-neu { margin-left: auto; }

/* --- Galerie --------------------------------------------------------------
   ⚠️ VIER JE REIHE auf dem Schreibtisch (Auftrag § 6), aber ueber `auto-fill`
   mit Mindestbreite statt `repeat(4, …)`: bei 1600 px waeren vier Kacheln
   400 px breit und die Vorschau groesser als das Bild. `minmax` haelt die
   Kachel in einer sinnvollen Groesse und fuellt die Reihe auf. */
.sc-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s360-abstand-3);
}
@media (min-width: 1100px) {
  /* Ab dieser Breite sind es genau vier — der Wert aus dem Auftrag. */
  .sc-galerie { grid-template-columns: repeat(4, 1fr); }
}
.sc-kachel {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--s360-linie);
  border-radius: var(--r);
  background: var(--s360-flaeche-karte);
  overflow: hidden;
}
.sc-kachel.wird-gezogen { opacity: .45; }
/* ⚠️⚠️ FESTES SEITENVERHAELTNIS FUER DAS BILDFELD. Ohne das haetten Hochformat
   und Querformat verschieden hohe Kacheln, und die Namenszeile stuende in jeder
   Spalte auf einer anderen Hoehe — genau das, was der Auftrag mit „einheitlich
   und sauber" ausschliesst. `object-fit: cover` schneidet dafuer die Raender an;
   das ist die richtige Seite des Tauschs, weil die Kachel eine VORSCHAU ist und
   der Klick das ganze Bild zeigt. */
.sc-kachel-bild {
  aspect-ratio: 4 / 3;
  background: var(--s360-flaeche-tief);
  cursor: zoom-in;
  overflow: hidden;
}
.sc-kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠️ `margin-top: auto` dockt die Namenszeile an den UNTEREN Rand (Auftrag:
   „optisch am unteren Rand der jeweiligen Kachel angedockt") — auch dann, wenn
   eine Kachel aus anderem Grund hoeher wird. */
.sc-kachel-fuss {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--s360-linie);
  font-size: var(--s360-groesse-xs);
  min-width: 0;
}
.sc-kachel-aktion {
  margin-left: auto; flex: none;
  border: 0; background: none; cursor: pointer;
  color: var(--s360-text-zart);
  padding: 2px;
}
.sc-kachel-aktion:hover { color: var(--s360-text); }

/* --- Dateiname im Ort ändern ---------------------------------------------- */
.sc-dateiname { display: inline-flex; align-items: baseline; min-width: 0; }
.sc-dateiname-basis {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 3px; padding: 1px 3px; margin: -1px -3px;
  cursor: text;
}
.sc-dateiname-basis:hover { background: var(--s360-flaeche-hover); }
/* ⚠️ Im Bearbeitungszustand NICHT mehr kuerzen: wer tippt, muss sehen, was er
   tippt. `text-overflow: ellipsis` waere hier ein verstecktes Zeichenlimit. */
.sc-dateiname-basis.bearbeitet {
  overflow: visible; text-overflow: clip; white-space: pre;
  background: var(--s360-flaeche);
  outline: 2px solid var(--s360-fokus);
}
/* ⚠️ Die Endung ist LEISE und nicht anfassbar — sie zeigt, dass sie zur Datei
   gehoert, aber nicht zur Eingabe. Der Server haengt sie ohnehin selbst an. */
.sc-dateiname-endung { color: var(--s360-text-zart); flex: none; }

/* --- Dokumententabelle ----------------------------------------------------- */
.sc-tabelle-akte .sc-typ-wahl { width: auto; min-width: 150px; padding: 4px 6px; }
.sc-tabelle-akte .sc-typ-frei { width: 100%; margin-top: 4px; padding: 4px 6px; }
.sc-tabelle-akte td.kurz { max-width: 260px; }
.sc-tabelle-akte tr.wird-gezogen td { opacity: .45; }

/* Rohtext einer Datei-Vorschau (24.09.2026). Gebraucht, wenn der
   Extraktionsdienst KEINE Tabellenstruktur findet — dann ist der gelesene Text
   das Einzige, was es zu zeigen gibt.
   ⚠️ `pre-wrap` und nicht `pre`: OCR-Text aus einem Scan hat sehr lange
   Zeilen, und ein waagerechter Scrollbalken in einem Dialog ist eine Sackgasse.
   ⚠️ Eigene Hoehe mit Scrollbalken, damit ein 40-Seiten-Scan den Dialog nicht
   ueber den Bildrand schiebt — die Obergrenze des Rahmens greift zwar, aber
   dann scrollte der ganze Dialog statt nur der Text. */
.sc-vorschau-text {
  margin: var(--s360-abstand-2) 0 0;
  padding: var(--s360-abstand-3);
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
  background: var(--s360-flaeche-tief);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-sm);
}

/* =============================================================================
   E27 — Markierungsliste (js/ansicht-markierungen.js)
   Zähler je Status als Knöpfe, Filterleiste, Tabelle mit Sprung in den Plan.
   ⚠️ Tippziele mindestens 44 px (Tablet auf der Baustelle): Zählerkacheln,
   Filterfelder und der Knopf „Im Plan zeigen“.
   ============================================================================= */
.mk-zaehler { margin-bottom: var(--s360-abstand-3); }
/* Fünf Kacheln: auf dem Telefon zwei bis drei je Zeile statt fünf
   übereinander — die Basis `.sc-kennzahlen` verlangt 180 px je Kachel. */
.sc-kennzahlen.mk-zaehler { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.mk-zaehler-kachel {
  font: inherit;
  text-align: left;
  min-height: 44px;
  cursor: pointer;
  color: inherit;
  transition: border-color var(--s360-dauer), background var(--s360-dauer);
}
.mk-zaehler-kachel:hover { background: var(--s360-flaeche-hover); }
.mk-zaehler-kachel:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 2px; }
.mk-zaehler-kachel.aktiv { border-color: var(--s360-akzent); background: var(--s360-akzent-leise); }
.mk-zaehler-kachel.mk-rueckfrage .sc-kennzahl-etikett { color: var(--s360-warnung); }
.mk-zaehler-kachel.mk-geklaert .sc-kennzahl-etikett { color: var(--s360-erfolg); }

.mk-filterleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s360-abstand-3);
  margin-bottom: var(--s360-abstand-3);
}
.mk-filter-feld .inp { min-height: 44px; }

.mk-knopf { min-height: 44px; }
.mk-tabelle td { vertical-align: top; }
.mk-tabelle td.zahl { white-space: nowrap; }
.mk-zeile { cursor: pointer; }
.mk-plan { font-weight: var(--s360-fett-halb); color: var(--s360-text); }
.mk-oz { font-variant-numeric: tabular-nums; font-weight: var(--s360-fett-halb); }
.mk-leise { font-size: var(--s360-groesse-xs); color: var(--s360-text-leise); margin-top: 2px; }
.mk-ohne { color: var(--s360-text-zart); }
.mk-notiz { max-width: 320px; color: var(--s360-text-leise); }
.mk-sprung { white-space: nowrap; }
.mk-fuss { padding: 10px 14px; }
.mk-unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =============================================================================
   E28 Schriftverkehr (js/ansicht-schriftverkehr.js, 03.10.2026)
   Links die Vorgänge, rechts der Verlauf. Mailtext als vorformatierter Text —
   Mails tragen ihre Zeilenumbrüche, und die sind Teil des Belegs.
   ============================================================================= */
.sv-hinweisband {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 var(--s360-abstand-4);
  padding: 8px 12px;
  border-left: 3px solid var(--s360-akzent);
  background: var(--s360-flaeche-tief);
  color: var(--s360-text);
  font-size: .875rem;
}
.sv-zaehler { margin-bottom: var(--s360-abstand-4); }
.sv-zaehler-kachel { cursor: pointer; text-align: left; border: 1px solid var(--s360-linie); background: var(--s360-flaeche-karte); }
.sv-zaehler-kachel.aktiv { border-color: var(--s360-akzent); box-shadow: inset 0 -3px 0 var(--s360-akzent); }
.sv-zaehler-kachel.sv-frist .sc-kennzahl-wert { color: var(--s360-fehler); }
.sv-raster {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--s360-abstand-4);
  align-items: start;
}
@media (max-width: 1100px) { .sv-raster { grid-template-columns: minmax(0, 1fr); } }
.sv-liste { display: flex; flex-direction: column; gap: 6px; }
.sv-eintrag {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-sm);
  color: var(--s360-text);
}
.sv-eintrag:hover { background: var(--s360-flaeche-hover); }
.sv-eintrag:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 1px; }
.sv-eintrag.aktiv { border-color: var(--s360-akzent); box-shadow: inset 3px 0 0 var(--s360-akzent); }
.sv-eintrag-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sv-eintrag-betreff { font-weight: var(--s360-fett-voll, 600); overflow-wrap: anywhere; }
.sv-eintrag-info { font-size: .8125rem; color: var(--s360-text-leise); margin-top: 3px; }
.sv-frist-text { color: var(--s360-fehler); font-weight: 600; }
.sv-leise { font-size: .8125rem; color: var(--s360-text-leise); }
.sv-vorgang { padding: var(--s360-abstand-5); }
.sv-vorgang-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s360-abstand-3); }
.sv-vorgang-kopf h2 { margin: 0 0 2px; font-size: 1.125rem; overflow-wrap: anywhere; }
.sv-vorgang-knoepfe { display: flex; gap: 8px; }
.sv-ordnung { margin: var(--s360-abstand-4) 0; }
.sv-verlauf { display: flex; flex-direction: column; gap: var(--s360-abstand-4); }
.sv-nachricht {
  border: 1px solid var(--s360-linie);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--s360-flaeche-karte);
}
.sv-nachricht.sv-aus { border-left-color: var(--s360-akzent); }
.sv-nachricht.sv-ein { border-left-color: var(--s360-linie-stark); }
.sv-nachricht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.sv-zeit { font-weight: 600; color: var(--s360-text); }
.sv-adressen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0 0 10px; font-size: .875rem; }
.sv-adressen dt { color: var(--s360-text-leise); }
.sv-adressen dd { margin: 0; overflow-wrap: anywhere; }
.sv-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: .9375rem; line-height: 1.55;
  max-height: 420px; overflow: auto;
  padding: 10px 12px;
  background: var(--s360-flaeche-tief);
  border-radius: var(--r-sm);
}
.sv-anhaenge { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-anhang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
             padding: 6px 8px; border: 1px dashed var(--s360-linie); border-radius: var(--r-sm); }
.sv-anhang-name { overflow-wrap: anywhere; }
.sv-anhang-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sv-link {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  color: var(--accent-deep, var(--s360-text)); font: inherit; font-size: .875rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.sv-link:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 1px; }
.sv-nachricht-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.sv-verfassen-text { min-height: 180px; font-family: inherit; }
.sv-anlagen { display: flex; flex-direction: column; gap: 6px; margin: var(--s360-abstand-4) 0; }
.sv-ablageliste { max-height: 200px; overflow: auto; }
.sv-schalter { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.sv-meldung { color: var(--s360-fehler); min-height: 1.2em; }
.sv-ziehen { outline: 3px dashed var(--s360-akzent); outline-offset: -6px; }