/* ==========================================================================
   App-Shell — Rahmen der Anwendung: Kopfzeilen, Navigation, Dashboard,
   Modaldialoge, Tabellen und Formulare der Verwaltungsseiten.

   Stand aus index.html herausgelöst (war dort ein 1118-zeiliger
   Inline-Block, der jede Regel aus main.css überschrieben hat).
   ========================================================================== */

/* -----------------------------------------------------------------
   Sicherung: Umfang (Info), Vorschau einer Akte vor dem Einspielen
   ----------------------------------------------------------------- */

.sicherung-umfang:where(:not([hidden]):not(.hidden)) { display: flex; }

/* Serversicherung (M5): Zustand als Wort, Farbe nur für Fehler und Warnung. */
.ss-fehler { color: var(--ui-danger); }
.ss-warnung { color: var(--ui-warning); }

.sicherung-umfang {
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
}

.sicherung-dateiname {
  align-self: center;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
}

.akte-vorschau {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--ui-linie-fein) solid var(--ui-border);
}

.akte-kopf {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: var(--ui-text-base);
}

.akte-meta {
  font-size: var(--ui-text-md);
  font-weight: 400;
  color: var(--ui-text-muted);
}

.akte-hinweis {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text);
  background: var(--ui-surface-muted);
  border-left: var(--ui-linie-markierung) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

/* Ein bestehender Klient ist der Fall, in dem man genau hinsehen muss. */
.akte-hinweis--warnung {
  border-left-color: var(--ui-warning);
  background: var(--ui-warning-bg, var(--ui-surface-muted));
}

.sicherung-umfang .kennzahl:where(:not([hidden]):not(.hidden)) {
  display: flex;
  flex-direction: column;
  font-size: var(--ui-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ui-sperrung-gross);
  color: var(--ui-text-muted);
}

.sicherung-umfang .kennzahl strong {
  font-size: var(--ui-text-lg);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ui-text);
}

.akte-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem 2rem;
  margin-bottom: 1.25rem;
}

.akte-journal {
  max-height: 420px;
  overflow-y: auto;
  margin-bottom: 1.25rem;
}

.akte-eintrag {
  padding: 0.75rem 0;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}

.akte-eintrag:last-child { border-bottom: none; }

/* Bereits vorhandene Einträge treten zurück — sie werden nicht eingespielt. */
.akte-eintrag.ist-vorhanden {
  opacity: 0.55;
}

.akte-eintrag-kopf {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
}

.akte-eintrag p {
  margin: 0;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text);
  white-space: pre-wrap;
}

.akte-liste {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  font-size: var(--ui-text-md);
  color: var(--ui-text);
}

/* Zuordnung beim Einspielen: welchen Klienten meint dieses Archiv? Die
   Zeile aus Kästchen und Beschriftung (`.akte-zuordnung .rv-checkbox`) steht
   bei den Kontrollkästchen-Zeilen in `03-components/forms.css`. */
.akte-zuordnung {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

/* „Alle Daten“ einspielen: je Klient eine Zeile — wer, Status, Wahl. Lang
   wird die Liste bei vielen Klienten; sie rollt in sich, die Zahlen und der
   Knopf bleiben im Blick. Am Handy steht die Wahl unter dem Namen. */
.alle-daten-liste {
  max-height: 30rem;
  overflow-y: auto;
  margin: 0.75rem 0 1.25rem;
}

.alle-daten-zeile:where(:not([hidden]):not(.hidden)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(10rem, 18rem);
  gap: 0.375rem 1rem;
  align-items: center;
}

.alle-daten-wer { min-width: 0; overflow-wrap: anywhere; }

.alle-daten-wahl { width: 100%; }

@media (max-width: 760px) {
  .alle-daten-zeile:where(:not([hidden]):not(.hidden)) { grid-template-columns: minmax(0, 1fr) auto; }
  .alle-daten-wahl { grid-column: 1 / -1; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { 
  font-family: var(--ui-font); 
  background: var(--ui-bg); 
  min-height: 100vh;
  color: var(--ui-text);
}

.form-group input:focus { 
  outline: none; 
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-focus-legacy);
}

/* Schaltflächen — eine Grösse, zwei Gewichtungen. Keine Farbverläufe,
   keine Sprünge beim Überfahren. */

/* ============ APP LAYOUT ============ */
#app-view { display: none; min-height: 100vh; background: var(--ui-surface-muted); }
#app-view.active:where(:not([hidden]):not(.hidden)) { display: block; }

/* App Section Header - extended for controls */
/* Die Kopfzeile der Klienten-Module trägt zwei Suchfelder. Ohne Begrenzung
   brachen sie in eine zweite Zeile um — die Kopfzeile war dort 109 statt
   64 Pixel hoch und sah anders aus als überall sonst. */
.app-section-header h1 {
  white-space: nowrap;
}

/* Die Suchfelder dürfen schrumpfen — ihr Behälter liess es nicht zu
   (`flex-shrink: 0` der Kopfzeilen-Bedienung): bei 590 Pixeln ragten Sprache
   und Abmelden 125 Pixel über den rechten Rand, und die Seite rollte seitlich.
   So bleibt die Kopfzeile bis etwa 600 Pixel einzeilig; darunter bekommen die
   Suchfelder eine eigene Zeile (unten, bei 620). */
.app-section-header .app-nav-controls {
  flex: 0 1 auto;
  min-width: 0;
}

/* Bei wenig Platz tritt der Benutzername zurück — der Titel und die
   Abmelde-Schaltfläche bleiben immer sichtbar. (Das Datum steht seit M12.4
   nicht mehr in der Kopfzeile.) */
@media (max-width: 900px) {
  .section-header .header-username,
  .dashboard-header .header-username { display: none; }
}

/* Auswahllisten und Zeilen (sidebar-dropdown-*, app-searchable-*, rv-suche-*)
   stehen bei den durchsuchbaren Auswahllisten in `03-components/suchliste.css`,
   das app-module-select in `03-components/forms.css`. */

/* generic searchable dropdown (converts select elements) */
.app-searchable-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.app-searchable-input {
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: var(--ui-linie-fein) solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  font-size: var(--ui-text-md);
  box-sizing: border-box;
}

/* App Content Area */
.app-content-area {
  padding: 0;
  overflow: auto;
  /* Genau unter die Kopfzeile — mit 62 statt 64 Pixeln rollte die ganze
     Seite um 2 Pixel, sobald ein Eintrag unten in der Liste den Fokus bekam. */
  height: calc(100vh - var(--ui-header-height, 64px));
}
.module-container { /* Grau ist der Raum (app-view), Weiss ist nur der Inhalt der Boxen (Flächenmodell, Issue 1057): der Behälter hält selbst keine Fläche — die weisse Inhaltskarte trägt klienten-modul.css (.kl-inhalt). */
  min-height: 400px;
}

/* Akte mit Modul-Navigation (M12.5, Issue 802): am Computer rollen Liste und
   Modul je für sich, die Liste bleibt stehen. Nur Wörter (Regel 9) — die
   Zeichen braucht erst die Leiste unten, dort rollt der ganze Bereich. */
@media (min-width: 761px) {
  .app-content-area.seitennavi-rahmen { overflow: hidden; }
  .app-content-area > .seitennavi { overflow-y: auto; }
  .app-content-area > .seitennavi-inhalt { overflow: auto; }
  .app-content-area > .seitennavi > a > i { display: none; }
  /* Einklappbar (Rückmeldung Owner): «« oben rechts, eingeklappt bleibt ein
     schmaler Streifen mit »». Gemerkt im Browser (plattform/akte-navi.js). */
  /* Einstellungen und Arbeitsbereich tragen dieselbe Leiste (Owner, 25.10.2026), mit eigenem Knopf. */
  :is(.app-content-area, .einstellungen-rahmen, .arbeitsbereich-rahmen) > .seitennavi > :is([data-akte-zu], [data-navi-zu-knopf]) { align-self: flex-end; justify-content: center; width: 2rem; min-height: 2rem; padding: 0; color: var(--ui-text-subtle); }
  :is(.app-content-area, .einstellungen-rahmen, .arbeitsbereich-rahmen).seitennavi-rahmen[data-navi-zu] { grid-template-columns: 2.75rem minmax(0, 1fr); }
  :is(.app-content-area, .einstellungen-rahmen, .arbeitsbereich-rahmen)[data-navi-zu] > .seitennavi { padding-inline: 0.375rem; }
  :is(.app-content-area, .einstellungen-rahmen, .arbeitsbereich-rahmen)[data-navi-zu] > .seitennavi > :not([data-akte-zu], [data-navi-zu-knopf]) { display: none; }
}

/* Main Content (kept for potential other use) */






/* Empty State */

/* Modal */

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ui-surface-muted);
}
::-webkit-scrollbar-thumb {
  background: var(--ui-text-subtle);
  border-radius: var(--ui-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ui-text-subtle);
}

/* Ensure "Neuer Klient" button maintains consistent styling */
#new-client-btn {
  background: var(--ui-accent);
  color: white;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--ui-radius);
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: background var(--ui-zeit-mittel);
}
#new-client-btn:hover {
  background: var(--ui-accent-hover);
}

/* Verbergen: Löschen Buttons und Benutzer- / Abmelden-Anzeige sowie
   Aktionsbox und untere Benutzerbox in der Sidebar. Dadurch bleibt
   die JS-Logik unverändert. 'Neuer Klient' wird wieder angezeigt. */
#new-client-btn, #delete-client-btn, #logout-btn, #dashboard-logout-btn, #dashboard-user, #current-user {
  display: none;
}

/* ============ DASHBOARD STYLES ============ */
#dashboard-view { display: none; min-height: 100vh; background: var(--ui-bg); }
#dashboard-view.active:where(:not([hidden]):not(.hidden)) { display: block; }

/* Gleiche Masse wie .section-header — das Dashboard ist die Startseite und
   hat keinen Zurück-Pfeil, sonst soll die Kopfzeile identisch wirken. */
.dashboard-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  padding: 0.75rem 1.5rem;
  background: var(--ui-surface);
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}
.dashboard-header h1 {
  margin: 0;
  font-size: var(--ui-text-xl);
  font-weight: 600;
  line-height: var(--ui-zeile-eng);
  color: var(--ui-text);
}
.app-brand { display: flex; align-items: center; gap: 0.625rem; }
.app-brand-logo { max-height: 30px; max-width: 160px; width: auto; object-fit: contain; }

/* ============ UNIFIED HEADER USER INFO ============ */
.header-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  white-space: nowrap;
}
.header-user-info .header-username {
  color: var(--ui-text);
  font-size: 0.9rem;
  font-weight: 500;
}
.header-user-info .header-logout-btn {
  margin-left: 0.25rem;
}
/* Divider line before user info in section headers */
.section-header .header-user-info::before,
.app-nav-controls .header-user-info::before {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: var(--ui-border-strong);
  margin-right: 0.25rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Fläche, Rand und Ecke trägt `.card` (Referenz). Hier bleibt nur die Anordnung:
   die Kachel ist eine Schaltfläche, `margin-bottom: 0` hält den Abstand des Rasters. */
.dashboard-card {
  padding: 1.75rem 1.5rem;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
}
.dashboard-card .card-icon:where(:not([hidden]):not(.hidden)) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 0.875rem;
  font-size: 1rem;
  border-radius: var(--ui-radius);
  background: var(--tone-bg, var(--ui-surface-hover));
  color: var(--tone-fg, var(--ui-text-muted));
}
/* Der Abstand unter dem Titel ist der der Referenzkarte (`.card h3`, 1rem). */
.dashboard-card h3 { font-size: var(--ui-text-base); color: var(--ui-text); font-weight: 600; }
.dashboard-card p { color: var(--ui-text-muted); font-size: var(--ui-text-sm); line-height: var(--ui-zeile-text); }

/* Am Handy kompakt (M12.9, Issue 806): zwei Kacheln je Zeile, Zeichen und
   Titel; die Beschreibung entfällt — der Titel sagt genug. */
@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem; }
  .dashboard-card { padding: 1rem 0.75rem; }
  .dashboard-card .card-icon:where(:not([hidden]):not(.hidden)) { margin-bottom: 0.5rem; }
  .dashboard-card h3 { margin: 0; font-size: var(--ui-text-sm); overflow-wrap: anywhere; }
  .dashboard-card p { display: none; }
}

/* ============ SECTION VIEW STYLES ============ */
.section-view { display: none; min-height: 100vh; background: var(--ui-surface-muted); }
.section-view.active:where(:not([hidden]):not(.hidden)) { display: block; }

/* Kopfzeile einer Ansicht — überall gleich hoch, Pfeil und Titel auf einer
   Grundlinie. Zusätzliche Bedienelemente hängen sich rechts an (siehe
   .section-header-controls), ohne die Höhe zu verändern. */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  /* **Kein `overflow: hidden` hier.** Die Auswahllisten von „Klient suchen"
     und „Modul suchen" hängen absolut unter ihren Feldern und ragen aus der
     Kopfzeile heraus — geklippt wären sie unbenutzbar. Dass nichts über den
     rechten Rand läuft, regelt der Titel: er darf schrumpfen (siehe unten). */
  padding: 0.75rem 1.5rem;
  background: var(--ui-surface);
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}
/* Die Gestalt der Zurück-Schaltfläche trägt 03-components/buttons.css
   (`.section-header .back-btn`). */
.section-header h1:where(:not([hidden]):not(.hidden)) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--ui-text-xl);
  font-weight: 600;
  line-height: var(--ui-zeile-eng);
  color: var(--ui-text);
  white-space: nowrap;
}

/* Symbole am Anfang einer Überschrift — der Abstand kommt aus der Regel,
   nicht mehr aus einem margin am Element. */
h2 > i:first-child,
h3 > i:first-child,
h4 > i:first-child {
  margin-right: 0.5rem;
  color: var(--ui-text-subtle);
}

/* Symbol der Ansicht — dieselbe Tönung wie auf der Dashboard-Karte */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
  border-radius: var(--ui-radius-sm);
  background: var(--tone-bg, var(--ui-surface-hover));
  color: var(--tone-fg, var(--ui-text-muted));
}

/* Der Titel nimmt den freien Platz ein; alles Weitere sitzt rechts.

   `min-width: 0` ist dabei nicht kosmetisch: ein Flex-Element schrumpft ohne
   diese Angabe nie unter seine Inhaltsbreite. Mit `white-space: nowrap` am
   Titel schob er deshalb bei schmalen Fenstern die Bedienelemente und den
   Abmelden-Knopf über den rechten Rand — die Seite rollte seitlich, obwohl
   „Titel und Abmelden bleiben" die Absicht war. Jetzt weicht zuerst der
   Titel. */
.section-header h1,
.dashboard-header h1 {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
}

/* Titel statt Symbol (ruhige Oberfläche, Regel 9; M12.4): Die Kopfzeile
   nennt die Ansicht beim Namen, auch auf dem Telefon — dort etwas kleiner
   und, wenn es gar nicht reicht, mit „…“. Vorher trat der Titel auf ein
   eingefärbtes Symbol zurück, das man erraten musste. */
@media (max-width: 780px) {
  /* Grundbreite null: der Titel nimmt, was neben den Symbolen frei bleibt,
     und schiebt sie nicht in eine zweite Zeile. */
  .section-header h1 { flex: 1 1 0; font-size: var(--ui-text-lg); }
  .section-header h1 > span { overflow: hidden; text-overflow: ellipsis; }
}

/* Auf dem Telefon: Zurück, Titel, Glocke, Abmelden (Regel 6). Sprache und
   Hilfe stehen dort nur noch in der Kopfzeile des Dashboards, damit der
   Titel lesbar bleibt; ebenso entfällt der Trennstrich. */
@media (max-width: 560px) {
  .section-header .sprachwahl--kopf,
  .section-header .hilfe-einstieg,
  .section-header .header-user-info::before { display: none; }
}

/* Bedienelemente rechts in der Kopfzeile — eine Regel für alle Ansichten.
   Vorher gab es .settings-header-controls und .leistungen-header-controls;
   letztere stand nur in unified-styles.css, die von nichts geladen wird —
   deshalb war die Kopfzeile von "Leistungen & Verrechnen" zerlegt. */
.section-header-controls,
.section-header .header-user-info:where(:not([hidden]):not(.hidden)),
.dashboard-header .header-user-info:where(:not([hidden]):not(.hidden)) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Die Auswahlfelder in der Kopfzeile bleiben schmal, damit nichts umbricht */
.section-header-controls { min-width: 0; }


.section-content { padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }

/* Toolbar */
.section-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.section-toolbar .search-input {
  width: 300px;
  max-width: 100%;
  min-height: var(--ui-control-height);
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--ui-text-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
/* Der Fokusring des Suchfelds steht in 03-components/forms.css. */

/* Data Table */
/* Zeilenaktionen in Tabellen — identisch zu .rv-icon-btn in der ResourceView.
   Ohne font-family: inherit fallen sie auf die Browser-Schrift zurück. */

.duration-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--ui-surface-hover);
  color: var(--ui-accent-hover);
  border-radius: var(--ui-radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  /* Die Angabe gehört auf eine Zeile — sonst wächst die Zeilenhöhe der
     ganzen Tabelle mit der schmalsten Spalte. */
  white-space: nowrap;
}

/* Tabs */

/* Einstellungen und Arbeitsbereich: die Bereiche links, gebaut wie die
   Module der Akte (Owner, 25.10.2026): eine Leiste über die ganze Höhe mit
   Fläche und Linie, in Gruppen, einklappbar; Liste und Inhalt rollen je für
   sich, der Inhalt mit denselben Abständen. Am Handy ist dieselbe Liste eine
   Übersicht (seitennavi.css, „Übersicht“). */
@media (min-width: 761px) {
  :is(#settings-view, #arbeitsbereich-view) .section-content { max-width: none; padding: 0; }
  :is(.einstellungen-rahmen, .arbeitsbereich-rahmen) { height: calc(100vh - var(--ui-header-height, 64px)); overflow: hidden; }
  :is(.einstellungen-rahmen, .arbeitsbereich-rahmen) > .seitennavi { overflow-y: auto; }
  :is(.einstellungen-rahmen, .arbeitsbereich-rahmen) > .seitennavi-inhalt { overflow: auto; padding: 1.5rem 2rem; }
  /* Der Arbeitsbereich nutzt die ganze Breite neben der Leiste (Owner, 26.10.2026: „der Platz ist zu
     schlecht genutzt“) — E-Mail und Kalender auch die ganze Höhe (05-modules/arbeitsbereich.css). */
  .einstellungen-rahmen > .seitennavi-inhalt > .tab-content { max-width: 1200px; margin-inline: auto; }
}
@media (max-width: 760px) {
  /* Am Handy keine Karten (Regel 3, M12.12): Abschnitte mit feiner Linie dazwischen. */
  .einstellungen-rahmen .card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .einstellungen-rahmen .card + .card { padding-top: 1rem; border-top: var(--ui-linie-fein) solid var(--ui-border); }
}

/* LLM/API settings: use platform settings card style for consistency */
#tab-llm .api-settings-grid:where(:not([hidden]):not(.hidden)) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}
/* Dieselbe Kartenfläche wie überall: `.card`. */
#tab-llm .api-settings-grid .card {
  margin-bottom: 0;
  padding: 1.5rem;
}
#tab-llm .api-settings-grid .full-width {
  grid-column: 1 / -1;
}
#tab-llm .inline-with-btn:where(:not([hidden]):not(.hidden)) {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#tab-llm .inline-with-btn > input,
#tab-llm .inline-with-btn > select {
  flex: 1;
  min-width: 200px;
}
.result-box {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--ui-radius);
  border: var(--ui-linie-fein) solid var(--ui-surface-hover);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  font-size: 0.92rem;
}
/* Ergebnis eines Verbindungstests: neutral (läuft), Erfolg oder Fehler. Ungebunden (Issue 404): KI, Docling und Collabora nutzen denselben Baustein. */
.ki-pruefung { padding: 0.75rem; border-radius: var(--ui-radius); color: var(--ui-text-muted); background: var(--ui-surface-muted); }
.ki-pruefung--ok { color: var(--ui-success); background: var(--ui-success-bg); border: var(--ui-linie-fein) solid var(--ui-success-border); }
.ki-pruefung--fehler { color: var(--ui-danger); background: var(--ui-danger-bg); border: var(--ui-linie-fein) solid var(--ui-danger-border); }
.ki-pruefung--ok i, .ki-pruefung--fehler i { margin-right: 0.3rem; }
/* Statusmeldung neben einer Schaltfläche: der Zustand kommt von `zustand()` im Skript. */
.ki-zustand--neutral { color: var(--ui-text-muted); }
.ki-zustand--ok { color: var(--ui-success); }
.ki-zustand--fehler { color: var(--ui-danger); }
#tab-llm .subtle-text {
  color: var(--ui-text-muted);
  font-size: 0.86rem;
  line-height: var(--ui-zeile-text);
  margin-bottom: 0.75rem;
}

/* Form Modal (shared) — die Kartenfläche steht in 03-components/cards.css. */
.card:not(:where(.kl-modul *)) h3 { font-size: var(--ui-text-base); color: var(--ui-text); margin-bottom: 1rem; font-weight: 600; }

.doc-options-list { display: flex; flex-direction: column; gap: 0.35rem; }
.doc-option-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--ui-radius);
  cursor: pointer;
  transition: background-color var(--ui-zeit-schnell) var(--ui-kurve-standard);
}
.doc-option-item:hover { background: var(--ui-surface-hover); }
.doc-option-item input[type="checkbox"] {
  margin-top: 0.1rem;
  width: 14px;
  height: 14px;
  accent-color: var(--ui-accent);
  cursor: pointer;
}
.doc-option-title {
  color: var(--ui-text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: var(--ui-zeile-eng);
}

.docling-modal {
  max-width: 700px;
  width: min(92vw, 700px);
  padding: 1.1rem 1.1rem 0.95rem;
  border-radius: var(--ui-radius-lg);
  border: var(--ui-linie-fein) solid var(--ui-border);
  box-shadow: var(--ui-shadow-dialog);
}
.docling-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
.docling-modal-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.docling-modal h2 {
  margin: 0;
  font-size: 1.14rem;
  line-height: var(--ui-zeile-eng);
  color: var(--ui-accent-hover);
  letter-spacing: var(--ui-sperrung-eng);
}
.docling-modal-subtitle {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.84rem;
  line-height: var(--ui-zeile-text);
}
.docling-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: var(--ui-linie-fein) solid var(--ui-info-bg);
  background: var(--ui-info-bg);
  color: var(--ui-info);
  border-radius: var(--ui-radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--ui-sperrung-fein);
  padding: 0.3rem 0.58rem;
  white-space: nowrap;
}
.docling-state-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  flex: 0 0 auto;
}
.docling-modal-body {
  /* Rollt selbst und gibt bei niedrigem Fenster nach: die Hülle verbirgt
     Überstand, die Schliessen-Zeile muss auch bei 480px Höhe im Bild bleiben. */
  flex: 1 1 auto;
  min-height: 0;
  max-height: 64vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.docling-status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
  padding: 0.62rem 0.72rem;
}
.docling-spinner-wrap {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.docling-status-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1;
}
.docling-status-text {
  color: var(--ui-accent);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: var(--ui-zeile-eng);
}
.docling-status-help {
  color: var(--ui-text-muted);
  font-size: 0.8rem;
  line-height: var(--ui-zeile-eng);
}
.docling-progress-wrap {
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  padding: 0.58rem 0.65rem 0.62rem;
}
.docling-progress-track {
  height: 7px;
  background: var(--ui-border);
  border-radius: var(--ui-radius-pill);
  overflow: hidden;
}
.docling-progress-bar {
  height: 7px;
  width: 0%;
  background: var(--ui-accent);
  transition: width var(--ui-zeit-mittel) var(--ui-kurve-standard);
}
.docling-phase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.52rem;
}
.docling-phase {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.52rem;
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: 0.76rem;
  line-height: var(--ui-zeile-eng);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docling-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-border-strong);
  flex: 0 0 auto;
}
.docling-phase.active {
  border-color: var(--ui-info-border-strong);
  background: var(--ui-info-bg);
  color: var(--ui-info);
}
.docling-phase.active .docling-phase-dot { background: var(--ui-accent); }
.docling-phase.done {
  border-color: var(--ui-success-border-strong);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}
.docling-phase.done .docling-phase-dot { background: var(--ui-success); }
.docling-output {
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  overflow: hidden;
}
/* ===== Groups & Permissions: Improved layout ===== */
.permissions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}
/* Right column: default columns and helper */
/* Container for default columns: keep neutral so inner .perm-section provides the box */
#group-default-columns { padding: 0; }
/* Make each column item visually match permission sections (card-like) */
/* Badges for permissions in list */
 /* Make the group form visually stand out and scroll nicely when tall
   Expand max-width to match the settings content/table width so boxes align */
 #group-form-card { max-width:1200px; margin:0 auto; width:100%; box-sizing: border-box; }
#group-form-card .form-actions { position:sticky; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.95)); padding-top:0.5rem; }
/* Tighter alignment for Groups tab to match Users tab */
#tab-groups .section-toolbar { gap: 0.75rem; }
#tab-groups .section-toolbar .search-input { width: 320px; }
/* Ensure the groups table uses same card spacing as users */
#tab-groups .data-table { margin-top: 0.75rem; }
/* Make the add/edit group form use same form styling as user form */
#group-form-card .form-row { gap: 0.75rem; }
.docling-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  border-bottom: var(--ui-linie-fein) solid var(--ui-surface-hover);
  padding: 0.48rem 0.62rem;
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: var(--ui-sperrung-fein);
}
.docling-output pre {
  margin: 0;
  max-height: 28vh;
  overflow: auto;
  padding: 0.7rem;
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: var(--ui-zeile-text);
  color: var(--ui-accent);
  background: var(--ui-surface);
}
.docling-modal .modal-actions {
  flex: 0 0 auto;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: var(--ui-linie-fein) solid var(--ui-surface-hover);
}
.docling-modal.state-processing .docling-state-pill { border-color: var(--ui-info-bg); background: var(--ui-info-bg); color: var(--ui-info); }
.docling-modal.state-processing .docling-state-pill .dot { background: var(--ui-accent); }
@media (max-width: 760px) {
  .docling-modal {
    width: min(96vw, 700px);
    padding: 0.9rem 0.82rem 0.78rem;
  }
  .docling-modal h2 {
    font-size: 1.02rem;
  }
  .docling-modal-subtitle {
    font-size: 0.78rem;
  }
  .docling-state-pill {
    font-size: 0.69rem;
    padding: 0.27rem 0.5rem;
  }
  .docling-phase-row {
    grid-template-columns: 1fr;
  }
  .docling-output pre {
    max-height: 24vh;
  }
  .docling-modal .modal-actions .btn {
    width: 100%;
  }
}

/* Die schmale Knopfform ist entfallen: Schaltflächen sehen überall gleich
   aus. `.btn-sm` steht in keiner Regel mehr — und seit Stufe 7b2 auch in
   keiner Aufrufstelle. */

/* Placeholder */

/* Permission checkbox labels */

/* Hidden dashboard cards */
.dashboard-card.hidden-by-permission { display: none; }

/* ==========================================================================
   Dialoge in "Leistungen & Verrechnen"

   Das JavaScript schaltet diese Dialoge über die Klasse .show; die passenden
   Regeln standen bislang ausschliesslich in unified-styles.css, die von keiner
   Seite geladen wird. Deshalb wurden die Dialoge dauerhaft im Seitenfluss
   angezeigt statt als Overlay.
   ========================================================================== */

#leistungen-generate-modal,
#leistungen-create-invoice-modal,
#leistungen-invoice-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--ui-zone-dialog);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(24, 24, 27, 0.35);
}

#leistungen-generate-modal.show:where(:not([hidden]):not(.hidden)),
#leistungen-create-invoice-modal.show:where(:not([hidden]):not(.hidden)),
#leistungen-invoice-modal.show:where(:not([hidden]):not(.hidden)) {
  display: flex;
}



/* ==========================================================================
   Schaltflächen mit eigenem Klassennamen an die gemeinsame Vorlage binden.
   Sie sollen sich in Höhe, Schrift und Textausrichtung nicht von .btn
   unterscheiden.
   ========================================================================== */

/* ==========================================================================
   Kontrollkästchen, Auswahlknöpfe und Farbfelder
   ========================================================================== */


/* ---------- Blöcke in den Einstellungen ----------
   Dieselbe Optik, die die bestehenden Karten bisher als Inline-Style trugen —
   damit ein neuer Block ohne eigene Werte auskommt. */

.card > .form-card-titel:where(:not([hidden]):not(.hidden)) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  /* Dieselbe Grösse wie die Kartenüberschrift — der Block ist nur die Variante
     mit Symbol, keine eigene Stufe. */
  font-size: var(--ui-text-base);
  font-weight: 600;
  color: var(--ui-text);
}

.card > .form-card-titel i {
  color: var(--ui-text-muted);
}

.form-card-text {
  margin: -0.5rem 0 1.25rem;
  max-width: 62ch;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text-muted);
}

/* Ein Hinweis unter einem Feld oder Schalter. Stand an mehreren Stellen im
   Markup (Sicherung, Laufwerk), war aber nirgends gestaltet — der Text sah
   aus wie der Haupttext und lief in der Zeile weiter. */
.form-hinweis:where(:not([hidden]):not(.hidden)) { display: block; }

.form-hinweis {
  margin-top: 0.25rem;
  font-size: var(--ui-text-sm);
  font-weight: 400;
  line-height: var(--ui-zeile-text);
  /* Muted, nicht subtle: subtle erreicht auf Weiss nur 2,6:1; muted 4,8:1 auf Weiss
     und 4,6:1 auf der gedämpften Fläche — genug für Text dieser Grösse (WCAG AA). */
  color: var(--ui-text-muted);
}

/* In zwei Teams Mitglied: Satz und heller Knopf in einer Zeile, auf dem Handy bricht der Knopf um (`gemeinsam/team-tags.js`). */
.form-hinweis.zwei-teams:where(:not([hidden]):not(.hidden)) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.5rem; }

/* Ein Schalter mit Erklärung: Kästchen oben, nicht mittig neben zwei Zeilen. */
.kl-schalterzeile:has(.form-hinweis) { align-items: flex-start; }
.kl-schalterzeile:has(.form-hinweis) input { margin-top: 0.2rem; }

/* Aktionen linksbündig — die Karten in den Einstellungen führen keine
   Dialogknöpfe, sondern eine Handlung am Anfang der Zeile. */
.form-actions--links {
  justify-content: flex-start;
}

/* Ergebnis neben einer Schaltfläche („Gespeichert“, Fehlermeldung). Die Farbe
   setzt das Skript; sichtbar ist die Zeile nur über das hidden-Attribut. */
.einstellungs-meldung {
  margin-left: 0.5rem;
  font-size: var(--ui-text-md);
}

/* ---------- Dashboard: letzte Journal-Einträge ----------
   Eine ruhige Liste, keine Kachelsammlung: das Dashboard soll einen Überblick
   geben, nicht mit dem Journal konkurrieren. */

.db-journal {
  /* Dieselbe Spur wie .dashboard-grid — sonst beginnt die Liste am Fensterrand,
     während die Kacheln darüber zentriert sitzen. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

@media (max-width: 760px) {
  .db-journal { padding: 0 1rem 1rem; }
  .db-journal-titel { margin-bottom: 0.5rem; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
}

.db-journal-titel {
  margin: 0 0 0.875rem;
  font-size: var(--ui-text-base);
  font-weight: 600;
  color: var(--ui-text);
}

.db-eintraege {
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
}

/* Ein Klick öffnet den ganzen Eintrag (journal-ansicht.js, eintragLesen). */
.db-eintrag {
  padding: 0.875rem 1.125rem;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
  cursor: pointer;
}
.db-eintrag:hover { background: var(--ui-surface-muted); }
.db-eintrag:hover .db-eintrag-titel { text-decoration: underline; }
.db-eintrag:focus-visible { outline: var(--ui-linie-fokus) solid var(--ui-accent); outline-offset: -2px; }

.db-eintrag:last-child { border-bottom: none; }

/* Bricht um, wenn der Platz nicht reicht: Marke und Datum rutschen unter
   den Titel, statt ihn zusammenzudrücken und rechts abgeschnitten zu werden. */
.db-eintrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
}

.db-eintrag-titel {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}

.db-eintrag-datum {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  min-width: 0;
  font-size: var(--ui-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-subtle);
}

/* Zwei Zeilen Klartext — der ganze Eintrag steht im Dialog. */
.db-eintrag-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0.25rem 0 0;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text-muted);
}

.db-eintrag-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4375rem;
}

.db-eintrag-bezug {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
}

.db-eintrag-bezug i {
  font-size: 0.6875rem;
  color: var(--ui-text-subtle);
}

.db-leer {
  margin: 0;
  padding: 1.25rem 1.125rem;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
}

/* Aufklappbarer, unveränderlicher Teil eines Prompts */
.prompt-basis > summary {
  font-size: var(--ui-text-md);
  font-weight: 500;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0.25rem 0;
}

.prompt-basis > textarea {
  width: 100%;
  margin-top: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ui-text-sm);
  line-height: var(--ui-zeile-text);
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Einstellungen → Dokument-Vorlage
   --------------------------------------------------------------------------
   Zwei Spalten: links das Briefpapier — der Stand als eine Zeile Text, die
   eine Hauptaktion ein Knopf, das Seltenere stille Textaktionen — und
   darunter die Platzhalter; rechts die Vorschau, die immer sichtbar
   danebensteht und auf weiten Bildschirmen mitwandert. Kein Abzeichen,
   kein Kasten um den Status.
   -------------------------------------------------------------------------- */

.pdf-vorlage {
  display: grid;
  /* Die Vorschau bekommt etwas mehr als die Hälfte — das Blatt ist der
     Arbeitsgegenstand, die linke Spalte nur Bedienung. Verhältnis statt fester
     Breite: bei 1000 und bei 1600 Pixeln bleibt der Eindruck derselbe. */
  grid-template-columns: minmax(0, 5fr) minmax(400px, 7fr);
  gap: 1.25rem;
  align-items: start;
}

.pdf-vorlage-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Der Abstand kommt aus dem Raster, nicht aus der Karten-Gewohnheit. */
.pdf-vorlage > .card,
.pdf-vorlage-spalte > .card { margin-bottom: 0; }

/* Die Vorlagen als Listen (Issue 737): drei Karten, eine Zeile —
   `scripts/dokumente/vorlagen-liste.js`. Kopf mit Titel, „?“ und den Knöpfen
   der Karte; je Vorlage Symbol der Dateiart, Name, grauer Stand und rechts
   die Symbolknöpfe, das Seltenere im Menü „⋯“. */
.vl-kopf:where(:not([hidden]):not(.hidden)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.vl-kopf .form-card-titel { margin: 0; }
.vl-kopf-knoepfe:where(:not([hidden]):not(.hidden)) { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.vl-liste { margin: 0; padding: 0; list-style: none; }
.vl-zeile:where(:not([hidden]):not(.hidden)) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vl-zeile { padding: 0.5rem 0; }
.vl-zeile + .vl-zeile { border-top: var(--ui-linie-fein) solid var(--ui-border); }
.vl-text { flex: 1; min-width: 0; }
.vl-name {
  display: block;
  font-weight: 600;
  color: var(--ui-text);
  overflow-wrap: anywhere;
}
.vl-stand { display: block; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.vl-nichts { padding: 0.5rem 0; font-size: var(--ui-text-md); color: var(--ui-text-muted); }
.vl-aktionen:where(:not([hidden]):not(.hidden)) { display: flex; align-items: center; gap: 0.25rem; flex: none; }

/* Vorlagen in Unterordnern von „Word“ und „Excel“: je Gruppe eine kleine graue
   Überschrift (`kl-abschnitt-titel`) mit dem Pfad; die Vorlagen direkt im
   Ordner stehen zuoberst ohne. Ab neun Vorlagen ein Suchfeld darüber. */
.vl-gruppe { margin-top: 1rem; }
.vl-gruppe:first-child { margin-top: 0.25rem; }
.vl-suche:where(:not([hidden]):not(.hidden)) { display: block; }
.vl-suche { width: 100%; margin: 0 0 0.5rem; }

/* Das Menü „⋯“ der Zeilen, der Knopf „Beispiel“ und „Hochladen“ mit
   Unterordnern sind das Zeilenmenü der Plattform
   (`03-components/zeilenmenue.css`, Issue 747); hier nur der kleine Pfeil,
   der sagt, dass der Knopf ein Menü öffnet. */
.vl-beispiel-pfeil { margin-left: 0.15rem; font-size: var(--ui-text-xs); color: var(--ui-text-muted); }

.word-vorlage-link:where(:not([hidden]):not(.hidden)) { display: inline-flex; }.word-vorlage-link:where(:not([hidden]):not(.hidden)) { display: inline-flex; }

.word-vorlage-link {
  position: relative;
  align-items: center;
  min-height: 2rem;
  padding: 0;
  font-family: inherit;
  background: none;
  border: 0;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
  cursor: pointer;
}

.word-vorlage-link:hover:not(:disabled) {
  color: var(--ui-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.word-vorlage-link:focus-visible {
  outline: var(--ui-linie-fokus) solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

.word-vorlage-link:disabled { opacity: 0.5; cursor: default; }

.word-vorlage-status-text {
  font-size: var(--ui-text-sm);
  color: var(--ui-text-subtle);
}

/* Rückmeldung inline unter den Aktionen — still, und nur wenn etwas ist. */
.word-vorlage-meldung {
  margin: 0.75rem 0 0;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
}

.word-vorlage-meldung:empty { display: none; }

/* Die Vorschau: immer sichtbar in der rechten Spalte, auf weiten
   Bildschirmen klebt sie oben mit — man arbeitet mit ihr. Der Kopf trägt
   Titel, Lademeldung und den stillen «Neu laden»; Fehler stehen an der
   Stelle des Blatts. */
.pdf-vorschau {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

.pdf-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pdf-vorschau-kopf .form-card-titel { margin: 0; }

/* Einstellungs-Bausteine (Ticket 336, Hälfte 2): Abstände, Raster und Zeilen, die
   mehrere Einstellungs-Blöcke teilen. Einzelfälle sind ID-Regeln unten. */
.einst-text { margin: 0 0 0.75rem; }
.einst-abstand { margin-top: 1rem; }
.einst-abstand--gross { margin-top: 1.5rem; }
.einst-abstand--klein { margin-top: 0.75rem; }
.einst-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 600px; }
.einst-titel--klein { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ui-text); }
.aktions-zeile { display: flex; align-items: center; gap: 0.5rem; }

#branding-kopf:where(:not([hidden]):not(.hidden)) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; }
#branding-logo-preview:where(:not([hidden]):not(.hidden)) {
  display: flex; align-items: center; justify-content: center;
  width: 220px; height: 110px; padding: 0.75rem;
  background: var(--ui-surface-muted);
  border: var(--ui-linie-fein) dashed var(--ui-border-strong);
  border-radius: var(--ui-radius);
}
#branding-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
#branding-logo-empty { font-size: 0.8rem; color: var(--ui-text-muted); }
#branding-logo-hinweis { max-width: 220px; margin-top: 0.5rem; }
#branding-formular { flex: 1 1 260px; min-width: 240px; }
#branding-app-name { max-width: 320px; }
/* Akzentfarbe (Issue 359): Farbfelder, eigene Farbe, Vorschau an zwei Mustern. */
.akzent-wahl:where(:not([hidden]):not(.hidden)) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.akzent-farbe {
  width: 2rem; height: 2rem; padding: 0;
  background: var(--akzent-muster);
  border: none;
  border-radius: 50%;
  outline: var(--ui-linie-fein) solid var(--ui-border-strong);
  outline-offset: var(--ui-linie-kante);
  cursor: pointer;
}
/* Die gewählte Farbe trägt einen dunklen Ring; der Tastaturfokus zusätzlich den Fokusschatten. */
.akzent-farbe[aria-checked="true"] { outline: var(--ui-linie-fokus) solid var(--ui-text); }
.akzent-farbe:focus-visible { box-shadow: var(--ui-shadow-focus); }
.akzent-eigen:where(:not([hidden]):not(.hidden)) { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.form-group .akzent-eigen label { margin: 0; font-weight: 400; }
#akzent-eigen { width: 2.5rem; height: 2rem; padding: 0; border: var(--ui-linie-fein) solid var(--ui-border-strong); border-radius: var(--ui-radius); background: none; cursor: pointer; }
.akzent-vorschau:where(:not([hidden]):not(.hidden)) { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.akzent-muster-knopf { padding: 0.375rem 0.875rem; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-on-accent); font-size: var(--ui-text-sm); font-weight: 500; }
.akzent-muster-flaeche { padding: 0.375rem 0.875rem; border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-accent); font-size: var(--ui-text-sm); box-shadow: 0 0 0 var(--ui-linie-markierung) var(--ui-accent-ring); }
#akzent-hinweis { margin-top: 0.5rem; }
#setting-currency { max-width: 200px; }
#setting-invoice-template { max-width: 400px; }
#org-plz { max-width: 110px; }
#zimmer-kopf:where(:not([hidden]):not(.hidden)) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#zimmer-kopf h3 { margin: 0; font-size: 1.05rem; color: var(--ui-text); }
#module-order-list { list-style: none; padding: 0; max-width: 500px; }
#reset-module-order-btn { margin-left: 0.5rem; }
#delete-user-warnung { color: var(--ui-danger); }

.pdf-vorschau-kopf .word-vorlage-status-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Das Blatt: der Viewer zeigt eine Seite (Chrome und Firefox kennen keine
   Doppelseite per Adresse), also steht der Rahmen hochkant wie A4 — nie
   endlos: oben durch die Fensterhöhe begrenzt, unten durch eine Mindesthöhe,
   bei der die Werkzeugleiste des Viewers noch Platz für die Seite lässt. */
.pdf-vorschau iframe:where(:not([hidden]):not(.hidden)) { display: block; }

.pdf-vorschau iframe {
  width: 100%;
  aspect-ratio: 5 / 6;
  min-height: 420px;
  max-height: 80vh;
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
}

/* Die Fehlermeldung der Vorschau — an der Stelle, an der sonst das Blatt
   steht. Mehr leeren Zustand braucht es nicht. */
.word-vorlage-vorschau-leer {
  margin: 0;
  font-size: var(--ui-text-md);
  color: var(--ui-text-muted);
}

.word-vorlage-vorschau-leer.fehler { color: var(--ui-danger); }

/* Der Klient der Vorschau: eine Zeile über dem Blatt, nicht in der Karte
   links — er gehört zum Blatt, das man sich damit ansieht. Beschriftung links,
   Auswahl daneben; auf dem Telefon untereinander. */
.word-vorlage-klientwahl {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.word-vorlage-klientwahl label {
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-label);
}

.word-vorlage-klientwahl select {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 22rem;
  height: var(--ui-control-height);
  padding: 0.375rem 0.6rem;
  font-family: inherit;
  font-size: var(--ui-text-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
}

/* Den Fokusring des Auswahlfelds trägt 03-components/forms.css. */
.word-vorlage-klientwahl .form-hinweis {
  flex: 1 1 100%;
  margin-top: 0;
}

@media (pointer: coarse) {
  /* Ohne Maus trifft nur der Daumen die stille Aktion — sie braucht Höhe. */
  .word-vorlage-link { min-height: 2.75rem; }
}

/* ==========================================================================
   Die Platzhalterliste (`scripts/gemeinsam/platzhalter-liste.js`)

   Ein Knopf, ein Fenster, an allen fünf Stellen: der Knopf «Platzhalter»
   öffnet einen Dialog der Anwendung — Kopf, Suche, Liste, Fusszeile, sonst
   nichts. Gesucht wird über dem Namen, der Bedeutung und dem Beispiel;
   angeboten wird, was der angegebene Kontext füllt.

   **Zwei Ebenen, eine Gestalt.** Der Knopf ist ein Wort mit Icon, kein Symbol
   allein; die Zeile ist eine ruhige Platte ohne Rahmen um jede einzelne. Was
   aktiv ist, bekommt die Fläche der Auswahl — auch mit der Maus, sonst
   wüsste die Taste nicht, was Enter treffen würde.

   Das Fenster liegt über jedem anderen Dialog: es wird aus Dialogen heraus
   geöffnet (Serienbrief, «Neues Dokument», Berichtsvorlagen), und es gehört
   nicht unter deren Hintergrund.
   ========================================================================== */

/* Der Knopf im Hinweis unter einem Feld: im Fluss des Satzes, mit einem
   kleinen Abstand davor — er liest sich als zweiter Satz, nicht als Knopf
   neben einem Satz. */
.platzhalter-angebot { margin-top: 0.3rem; }

.platzhalter-angebot .platzhalter-knopf { margin-left: 0; }

/* Der Knopf am Feld. Er steht im Hinweis unter dem Feld und liest sich wie
   eine Textaktion: «Platzhalter» sagt, was er aufmacht. Wort und Icon schreibt
   `binden()` in den Knopf — an allen Stellen dasselbe. */
.platzhalter-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.5rem;
  padding: 0 0.35rem;
  margin: 0;
  font-family: inherit;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text);
  background: none;
  border: 0;
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  transition: background var(--ui-transition), color var(--ui-transition);
}

.platzhalter-knopf:hover { background: var(--ui-surface-hover); }
.platzhalter-knopf:focus-visible { outline: var(--ui-linie-fokus) solid var(--ui-accent); outline-offset: 1px; }

/* Gesperrt, solange die Liste fehlt (siehe `word-vorlage-ansicht.js`). */
.platzhalter-knopf:disabled { opacity: 0.5; cursor: default; }
.platzhalter-knopf:disabled:hover { background: none; }

/* --- Das Fenster ---------------------------------------------------------- */

/* Über Dialogen, Dokumentvorschauen und Rückfragen: es wird aus
   einem Dialog heraus geöffnet und ist der Mittelpunkt des Geschehens, bis
   man sich wieder entscheidet. `overscroll-behavior`, damit das Rad über dem
   Rahmen nicht die Seite dahinter blättert. */
.phl-overlay {
  z-index: var(--ui-zone-fokus);
  padding: 1.5rem;
  overscroll-behavior: contain;
}

/* Etwas breiter als der Dialog «Neues Dokument»: drei Spalten (Name, Bedeutung,
   Aktion) brauchen Luft, und 620 Pixel machten aus jeder Beschreibung drei
   Zeilen. Die Regel heischt `.phl-overlay .phl-dialog`, weil die Breitenklasse
   des Dialogs (`modal-breit`) sonst schwerer wiegt. */
.phl-overlay .phl-dialog { max-width: min(680px, 96vw); }

/* Derselbe Dialog wie überall: `modal-kopf`, `modal-koerper`, `modal-fuss`.
   Kopf und Fuss stehen, die Liste blättert — sonst wächst ein Katalog mit
   sechzig Plätzen aus dem Bild und lässt sich nicht mehr scrollen. */
.phl-dialog {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: min(620px, 88vh);
  overflow: hidden;
}

.phl-dialog .modal-koerper {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.phl-dialog .modal-fuss {
  padding: 0.45rem 1.25rem;
  font-size: var(--ui-text-xs);
  color: var(--ui-text-subtle);
}

/* Die Suche über der Liste. Die Lupe steht **neben** dem Feld, nicht darin:
   die Anwendung kleidet jedes Eingabefeld selbst (`forms.css`), und gegen
   diese Regel mit `:not()`-Ketten anzutreten wäre eine specificity-Schlacht
   um ein paar Pixel. So sieht das Feld aus wie jede andere Suche der
   Anwendung — und die Lupe steht daneben. */
.phl-suchzeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.6rem 1rem;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}

.phl-lupe {
  flex: none;
  font-size: 0.8rem;
  color: var(--ui-text-subtle);
}

.phl-suche {
  flex: 1 1 auto;
  min-width: 0;
}

.phl-liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0.75rem 0.75rem;
}

.phl-gruppe:last-child { margin-bottom: 0; }

/* Der Gruppenname bleibt oben stehen, während man durch die Liste blättert —
   sonst wüsste man nicht, in welcher Gruppe man ist. */
.phl-gruppenname {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.65rem 0.5rem 0.3rem;
  font-size: var(--ui-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ui-sperrung-gross);
  color: var(--ui-text-subtle);
  background: var(--ui-surface);
}

/* Die Zeile: Name links, Bedeutung in der Mitte, Aktion rechts. Ohne Rahmen um
   jede einzelne Zeile — der Name ist der Anker, der Raum trennt den Rest. */
.phl-zeile {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--ui-radius);
  cursor: pointer;
  transition: background var(--ui-transition);
}

.phl-zeile:hover,
.phl-zeile.ist-aktiv { background: var(--ui-surface-hover); }

/* Der Name ist ein Kärtchen: links steht immer derselbe Platz, an dem man
   sucht. Ohne Fläche zerfließen die Klammern in der Beschreibung. */
.phl-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.phl-name code {
  padding: 0.1rem 0.4rem;
  font-size: var(--ui-text-sm);
  background: var(--ui-surface-hover);
  border-radius: var(--ui-radius-sm);
  overflow-wrap: anywhere;
}

.phl-zeile.ist-aktiv .phl-name code,
.phl-zeile:hover .phl-name code { background: var(--ui-surface); }

/* Die Bedeutung, darunter das Beispiel in eigener Zeile: «z. B. Maria Muster»
   gehört zur Bedeutung, ist aber nicht sie — läuft es mit, bräuchte es einen
   Punkt als Trenner, und der stünde am Zeilenende. */
.phl-beschr {
  min-width: 0;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text-muted);
}

.phl-beispiel {
  display: block;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-subtle);
}

/* Der Wert bei der gewählten Person (Berichtsvorlagen, Issue 1144) — dunkler als das Beispiel. */
.phl-wert {
  display: block;
  font-size: var(--ui-text-sm);
  color: var(--ui-text);
}

/* Das Pflicht-Markerchen: ein Wort in einer Linie, kein rotes Abzeichen. */
.phl-pflicht {
  flex: none;
  padding: 0 0.4rem;
  font-size: var(--ui-text-xs);
  font-weight: 600;
  letter-spacing: var(--ui-sperrung-gross);
  color: var(--ui-text-muted);
  border: var(--ui-linie-fein) solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
}

/* Die Aktion der Zeile: ein gewöhnlicher Knopf der Anwendung, nur ruhiger und
   ohne Rand, bis der Zeiger über ihm ist. Sichtbar bleibt er immer — ohne Maus
   gäbe es kein Überfahren, und die Taste liest den Namen ohnehin aus der
   Zeile. */
.phl-aktion {
  gap: 0.35rem;
  padding: 0 0.6rem;
  border-color: transparent;
  color: var(--ui-text-muted);
  white-space: nowrap;
}

.phl-aktion:hover { color: var(--ui-text); border-color: var(--ui-border-strong); }

/* Nichts gefunden, nichts geladen, nichts vorhanden — ein Satz an der Stelle
   der Liste, ohne roten Kasten: das ist kein Fehler, sondern ein leeres Feld. */
.phl-leer {
  margin: 0;
  padding: 1.5rem 0.75rem;
  font-size: var(--ui-text-md);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text-muted);
  text-align: center;
}

/* Die Fusszeile: links die Tasten, rechts der Stand der Liste. Die Tasten sind
   eine Zeile für die, die sie brauchen — ohne Zeigergerät verschwinden sie,
   dort nehmen die Zeilen die Höhe eines Fingers an. */
.phl-tasten { display: block; }

.phl-tasten kbd:where(:not([hidden]):not(.hidden)) {
  display: inline-block;
  min-width: 1.1rem;
  margin-right: 0.15rem;
  padding: 0.05rem 0.25rem;
  font-family: inherit;
  font-size: var(--ui-text-xs);
  text-align: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
}

.phl-stand { flex: none; }

/* Telefon (375 Pixel): das Fenster nimmt den ganzen Bildschirm, die Liste
   blättert darin, und die Zeile stapelt — Name und Aktion in einer Zeile, die
   Bedeutung darüber zwei Zeilen lang. Ohne die Bedeutung wäre die Liste ein
   Katalog von Klammern. */
@media (max-width: 30rem) {
  .phl-overlay { padding: 0; }
  /* `.phl-overlay .phl-dialog` statt `.phl-dialog`: die Breitenklasse des
     Dialogs (`.modal.modal-breit`) wiegt schwerer als eine einfache Klasse —
     sonst blieben die 97 Prozent von `modal.css` stehen und es bliebe ein
     schmaler Rand links und rechts. */
  .phl-overlay .phl-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .phl-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name aktion' 'beschr beschr';
    row-gap: 0.1rem;
    padding: 0.5rem;
  }
  .phl-zeile > .phl-name { grid-area: name; }
  .phl-zeile > .phl-aktion { grid-area: aktion; }
  .phl-zeile > .phl-beschr { grid-area: beschr; font-size: var(--ui-text-sm); }
  /* Kopf und Fuss dürfen auf dem Telefon weniger brauchen: die Liste ist das,
     worum es geht — sie soll den ganzen Bildschirm haben. */
  .phl-dialog .modal-kopf { padding: 0.85rem 1rem; }
  .phl-dialog .modal-kopf-untertitel { font-size: var(--ui-text-xs); }
  .phl-suchzeile { padding: 0.5rem 0.75rem; }
  .phl-tasten { display: none; }
  .phl-dialog .modal-fuss { justify-content: flex-end; }
}

@media (pointer: coarse) {
  /* Der Knopf am Feld, das Suchfeld und jede Aktion: ein Daumen trifft sie. */
  .platzhalter-knopf { min-height: 3rem; }
  .phl-suche { min-height: 3rem; }
  .phl-zeile { min-height: 3rem; }
  .phl-aktion { min-height: 3rem; padding: 0 0.75rem; }
  .phl-tasten { display: none; }
  .phl-dialog .modal-fuss { justify-content: flex-end; }
}

/* Telefon: der Hauptknopf nimmt die Breite der Karte (ein Daumen trifft ihn
   überall), die stillen Aktionen bekommen 44 Pixel Höhe, die Vorschau
   weniger Rand und eine Höhe, die auf den Bildschirm passt. */
@media (max-width: 640px) {
  .word-vorlage-link { min-height: 2.75rem; }
  .pdf-vorschau iframe {
    aspect-ratio: 3 / 4;
    min-height: 440px;
    max-height: 75vh;
  }
}


.llm-umfang-titel {
  margin: 1rem 0 0.5rem;
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}

/* Änderungsprotokoll
   --------------------------------------------------------------------------
   Die Filterzeile war aus dem Dokumente-Modul entlehnt (`doc-filter-chip`) und
   trug dessen Masse mit: Beschriftungen im Feld, eigene Höhen, eigene
   Abstände. Hier steht sie auf einem Raster — alle Felder gleich hoch, die
   Beschriftung darüber, und sie bricht sauber um. */

.prot-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.prot-feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 130px;
  /* Filter und geänderte Felder in der Tabelle teilen die Klasse und die Schrift. */
  font-size: var(--ui-text-sm);
  line-height: var(--ui-zeile-text);
  color: var(--ui-text-muted);
}

.prot-feld > span {
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-label);
}

.prot-feld select,
.prot-feld input {
  min-height: var(--ui-control-height);
  padding: 0 0.625rem;
  font: inherit;
  font-size: var(--ui-text-md);
  color: var(--ui-text);
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

.prot-feld select:focus,
.prot-feld input:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.prot-feld-schmal { min-width: 92px; }

.prot-suchfeld {
  flex: 1 1 240px;
  min-width: 200px;
  /* Auf gleicher Höhe wie die Felder daneben — das Suchfeld hat keine
     Beschriftung über sich, es sitzt also direkt auf der Grundlinie. */
  align-self: flex-end;
}

.prot-zuruecksetzen { align-self: flex-end; }

.prot-stand {
  margin: 0.875rem 0 0.375rem;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
}

/* Die Tabelle innen (`data-table`) zeichnet den Rahmen; hier bleibt nur das Rollen. */
.prot-tabelle-rahmen {
  overflow-x: auto;
}

#prot-tabelle { margin: 0; }

#prot-tabelle td { vertical-align: top; }

.prot-feld code {
  color: var(--ui-text);
}

.prot-feld .fa-arrow-right {
  font-size: 0.7em;
  opacity: 0.6;
  margin: 0 0.15rem;
}

/* Zeilen mit Ziel führen zum betroffenen Datensatz. Ein Protokoll, aus dem
   man nicht dorthin kommt, ist eine Liste von Behauptungen. */
tr.prot-klickbar { cursor: pointer; }
tr.prot-klickbar:hover td { background: var(--ui-surface-hover); }

.prot-pfeil {
  font-size: 0.7em;
  opacity: 0.35;
  margin-left: 0.25rem;
}

tr.prot-fehlgeschlagen td {
  background: color-mix(in srgb, var(--ui-danger) 6%, transparent);
}

.prot-hinweis {
  font-size: var(--ui-text-sm);
  color: var(--ui-danger);
}

/* Die Anleitung zeigt Bausteine so, wie sie im Feld stehen — sonst rät man,
   wo Klammern und Kommas hingehören. */


/* Schmale Bildschirme: die Vorschau rutscht unter die linke Spalte — dann
   ist sie nicht mehr die Nebenspur, die mitwandert. */
@media (max-width: 1000px) {
  .pdf-vorlage { grid-template-columns: minmax(0, 1fr); }
  .pdf-vorschau { position: static; }
}

/* --------------------------------------------------------------------------
   Einstellungen → Klienten-Module
   --------------------------------------------------------------------------
   Je Modul eine Karte: was es ist, woher es kommt, ob es läuft, und die
   Felder aus seinem Manifest.
   -------------------------------------------------------------------------- */

.plugin-karte {
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius);
}

/* Ein abgeschaltetes Modul bleibt lesbar und tritt zurück — es ist nicht
   weg, es läuft nur nicht. */
.plugin-karte.plugin-aus { opacity: 0.6; }

.plugin-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.plugin-titel { margin-right: auto; min-width: 12rem; }

/* Die Beschreibung in eigener Zeile unter dem Kopf. Sie ist um Icon (1.75rem)
   und Kopf-Abstand (0.75rem) eingerückt und so mit dem Titel bündig. Damit
   bleibt die Kopfzeile (Titel links, Herkunft/Version/Schalter/Icons rechts)
   bei jeder Beschreibungslänge gleich aufgebaut. */
.plugin-beschreibung {
  margin: 0.25rem 0 0 2.5rem;
}

.plugin-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
  cursor: pointer;
}

.plugin-rechte { margin: 0.5rem 0 0; }

/* API-Freigaben eines Moduls (Issue 929): je Freigabe ein Schalter in einer
   Zeile, die umbricht. Offenes steht als grauer Text daneben. */
.plugin-freigaben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  font-size: var(--ui-text-sm);
}

/* Ein abgelegtes Modul über einem mitgelieferten. Ruhig, solange es das
   neuere ist; ist das verdeckte neuer, kommt keine Änderung am Modul mehr
   an — das ist eine Warnung. */
.plugin-ueberlagert {
  margin: 0.625rem 0 0;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
}

.plugin-ueberlagert--warnung {
  padding: 0.5rem 0.75rem;
  color: var(--ui-warning);
  background: var(--ui-warning-bg);
  border: var(--ui-linie-fein) solid var(--ui-warning-border);
  border-radius: var(--ui-radius-sm);
}

/* Der Weg zu dem Bereich, in dem das Modul verwaltet wird. */
.plugin-verwaltung {
  margin: 0.625rem 0 0;
}

/* Die Einstellungen eines Moduls stehen im Dialog (Issue 578), nicht auf der
   Karte: Abschnitte nach `gruppe`, je Abschnitt eine Spalte. Schalter wie im
   Gruppen-Dialog, lange Listen eingeklappt (`.rv-falt`). */
.me { display: flex; flex-direction: column; gap: 1.25rem; }
.me-abschnitt { display: flex; flex-direction: column; gap: 0.75rem; }
.me-abschnitt + .me-abschnitt { padding-top: 1rem; border-top: var(--ui-linie-fein) solid var(--ui-border); }
.me-abschnitt > .re-titel { margin-bottom: 0; }
.me .form-group { margin-bottom: 0; }

/* Der Schalter steht vor seinem Text; mit Hinweis oben bündig. */
.me .rv-checkbox.me-schalter { align-items: flex-start; }
.me .rv-checkbox.me-schalter > input { margin-top: 0.125rem; }
.me-titel { display: block; font-weight: 500; }
.me-schalter .rv-hint { margin-top: 0.125rem; }

/* Eine Zahl braucht nicht die ganze Breite. */
.me input[type="number"] { max-width: 12rem; }

.me-falt > summary { font-size: var(--ui-text-md); }
.me-stand {
  margin-left: 0.375rem;
  font-size: var(--ui-text-sm);
  font-weight: 400;
  color: var(--ui-text-muted);
}
.me-falt textarea { width: 100%; }
.me-falt .kg-textknopf { margin-top: 0.375rem; }

.plugin-werkzeuge { display: flex; gap: 0.5rem; }
.plugin-aktionen { display: inline-flex; gap: 0.25rem; }

/* PDF-Gestaltung eines Moduls: Felder links, Vorschau rechts — wie im
   Reiter PDF-Vorlage, nur im Dialog. */
.mpdf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 1.25rem;
  align-items: start;
}

.mpdf-felder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mpdf-vorschau {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.mpdf-vorschau-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.mpdf-vorschau iframe {
  width: 100%;
  height: 60vh;
  background: var(--ui-surface-muted);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius);
}

.mpdf-abschnitte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpdf-abschnitt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--ui-surface-muted);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

.mpdf-abschnitt label:where(:not([hidden]):not(.hidden)) { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.mpdf-abschnitt-aktionen { display: inline-flex; gap: 0.25rem; }
.mpdf-fehler { color: var(--ui-danger); }

@media (max-width: 900px) {
  .mpdf-raster { grid-template-columns: minmax(0, 1fr); }
  .mpdf-vorschau { position: static; }
}


/* ==========================================================================
   Schmaler Schirm — Telefon

   Gemessen bei 373 Pixeln: die Kopfzeile ragte um **151 Pixel** über den
   rechten Rand. Der Grund ist nicht die Kopfzeile selbst, sondern das
   Auswahlfeld darin (`min-width: 320px`) neben Zurück-Knopf, Symbol und
   Abmelden.

   Unter 780px tritt der Titel bereits auf sein Symbol zurück (weiter oben).
   Hier geht es weiter: **das Auswahlfeld bekommt eine eigene Zeile.** Es
   schmaler zu quetschen hilft nicht — „Änderungsprotokoll" muss lesbar
   bleiben, sonst wählt man blind.
   ========================================================================== */

/* Die Kopfzeile der Klienten-Module: Zurück, Titel, „Klient wählen“, rechts
   Anzeige und Abmelden. Seit das Suchfeld „Modul suchen“ weg ist (M12.5)
   passt das auch auf dem Telefon in eine Zeile; der Titel kürzt sich. Der
   Trennstrich vor dem Namen kostete dort die nötigen Pixel. */
@media (max-width: 620px) {
  .app-section-header .header-user-info::before { display: none; }
  /* Der Klient gehört neben den Titel, nicht ans Ende (vgl. 560 unten). */
  .app-section-header .app-nav-controls { order: 0; }
}
@media (max-width: 420px) {
  .app-section-header { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 560px) {
  /* Die Kopfzeile darf umbrechen und wächst dabei. Ohne `height: auto`
     schöbe die zweite Zeile den Inhalt darunter über den Rand. */
  .section-header,
  .dashboard-header {
    height: auto;
    min-height: var(--ui-header-height, 64px);
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Oben bleiben Zurück, Symbol und Abmelden — die drei, die man immer
     braucht. Das Auswahlfeld rutscht auf die zweite Zeile und nimmt sie
     ganz. */
  .section-header-controls {
    order: 10;
    flex-basis: 100%;
    min-width: 0;
  }


  /* Das Dashboard hat keine Suchfelder: seine Kopfzeile bleibt einzeilig.
     Sonst stand der Name allein oben und darunter eine zweite Zeile mit den
     Symbolen — ein Fünftel des Telefons für die Kopfzeile. Ein langer Name
     weicht mit „…“, das Logo wird schmaler. */
  .dashboard-header {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .dashboard-header h1 { font-size: var(--ui-text-md); }
  .dashboard-header .header-user-info:where(:not([hidden]):not(.hidden)) { gap: 0.5rem; }
  .app-brand { gap: 0.5rem; }
  .app-brand-logo { max-height: 24px; max-width: 64px; }
  .app-brand > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* „Abmelden“ als Symbol — der Text bleibt im Knopf, Vorleseprogramme
     sagen weiter „Abmelden“. */
  .header-user-info .header-logout-btn {
    font-size: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .header-user-info .header-logout-btn::before {
    content: '\f2f5';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: var(--ui-text-md);
  }

  /* Datum und Benutzername sind hier längst weg (1100px bzw. 900px);
     übrig bleibt „Abmelden" — ohne den Knopf käme man auf dem Telefon nicht
     mehr aus einer fremden Sitzung heraus. */

  /* Werkzeugleisten brechen um, statt zu überstehen. Drei Knöpfe
     nebeneinander sind 495 Pixel — das passt auf keinem Telefon. */
  .form-actions,
  .section-toolbar {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Einstellungen → Laufwerk (WebDAV)
   -------------------------------------------------------------------------- */

.laufwerk-untertitel {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--ui-text-md);
  font-weight: 600;
  color: var(--ui-text);
}

.laufwerk-status {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.laufwerk-status-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}


.laufwerk-code {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  font-size: var(--ui-text-sm);
  background: var(--ui-surface-muted);
  border-radius: var(--ui-radius-sm);
  white-space: pre-wrap;
}

.laufwerk-details summary { cursor: pointer; color: var(--ui-text-muted); }

/* --------------------------------------------------------------------------
   Einstellungen → Info (Issue 692): der Verlauf als eine Reihe schmaler
   Balken, je Monat einer — eine Reihe, darum ohne Legende; der Wert steht
   im Tooltip. Die Höhe kommt als Anteil (`--anteil`) vom Skript.
   -------------------------------------------------------------------------- */

.info-verlauf {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3rem;
  margin-top: 0.25rem;
}

.info-verlauf-balken {
  flex: 1 1 0;
  max-width: 1.5rem;
  height: calc(var(--anteil, 0) * 100%);
  background: var(--ui-text-muted);
  border-radius: var(--ui-radius-xs) var(--ui-radius-xs) 0 0;
}

.info-verlauf-balken:hover { background: var(--ui-accent); }

.info-verlauf-achse {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0 0;
  font-size: var(--ui-text-xs);
}

.info-warnungen p { margin: 0.25rem 0; }

.info-uhrzeit { width: auto; }

/* --------------------------------------------------------------------------
   Einstellungen → Massenänderungen (Issue 930): drei Zahlen nebeneinander,
   darunter die gesperrten Konten — Name und Grund links, Aufheben rechts.
   -------------------------------------------------------------------------- */

.massen-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
}

.massen-sperren { margin: 0; padding: 0; list-style: none; }

.massen-sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}

.massen-sperre > span:where(:not([hidden]):not(.hidden)) { display: flex; flex-direction: column; }
.massen-sperre small { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

/* --------------------------------------------------------------------------
   Meine Unterschriften (Issue 894): die Liste und der Editor im Dialog.
   Die Vorschau rechnet in mm — so steht die Unterschrift in Druckgrösse
   über einer Unterschriftszeile.
   -------------------------------------------------------------------------- */

.ue-liste { margin: 0; padding: 0; list-style: none; }

.ue-eintrag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: var(--ui-linie-fein) solid var(--ui-border);
}

.ue-klein {
  width: 6rem;
  height: 2.25rem;
  object-fit: contain;
}

.ue-text { display: flex; flex-direction: column; margin-right: auto; }
.ue-text small { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

.ue { display: flex; flex-direction: column; gap: 1rem; }

.ue-flaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--ui-surface-muted);
  border-radius: var(--ui-radius-sm);
}

.ue-flaeche canvas { max-width: 100%; touch-action: none; cursor: crosshair; }
.ue-wahl { cursor: pointer; }
.ue-wahl--klein { align-self: flex-end; }

.ue-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0 1rem;
  align-items: end;
}

.ue-ausrichtung { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ue-schalter { margin: 0; }

.ue-vorschau {
  overflow-x: auto;
  padding: 1rem;
  background: var(--ui-surface);
  border: var(--ui-linie-fein) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

/* Die Unterschriftszeile: darüber das Bild, darunter der Name. */
.ue-zeile {
  display: flex;
  align-items: flex-end;
  min-height: 12mm;
  border-bottom: var(--ui-linie-fein) solid var(--ui-text);
}

.ue-name { margin-top: 0.25rem; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

.laufwerk-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 1rem;
}

.laufwerk-kopierzeile {
  display: flex;
  gap: 0.5rem;
}

.laufwerk-kopierzeile input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }

/* Das frisch erzeugte Passwort fällt auf — es wird nur dieses eine Mal gezeigt. */

.laufwerk-anleitung ol {
  margin: 0 0 0.5rem 1.25rem;
  padding: 0;
  line-height: var(--ui-zeile-weit);
}

.laufwerk-anleitung code { overflow-wrap: anywhere; }

/* Einstellungen → PDF-Vorlage → Eigene Schriften */
.pdf-schriften-liste { display: flex; flex-direction: column; margin: 0 0 1rem; padding: 0; list-style: none; }