/* ==========================================================================
   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).
   ========================================================================== */
* { 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: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

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

.app-client-search-wrapper {
  position: relative;
  flex: 0 1 200px;
  min-width: 110px;
}

/* 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 zuerst das Datum zurück, dann der Benutzername —
   der Titel und die Abmelde-Schaltfläche bleiben immer sichtbar. */
@media (max-width: 1100px) {
  .section-header .header-date,
  .dashboard-header .header-date { display: none; }
}

@media (max-width: 900px) {
  .section-header .header-username,
  .dashboard-header .header-username { display: none; }
}
.app-client-search-input {
  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: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.app-client-search-input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}
.app-client-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow);
  max-height: var(--dd-max-h);
  overflow-y: auto;
  padding: var(--dd-pad);
  z-index: 200;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}
.app-client-dropdown.show {
  display: block;
}
.sidebar-dropdown-item {
  padding: var(--dd-row-pad);
  font-size: var(--dd-row-fs);
  line-height: 1.3;
  color: var(--ui-text);
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  transition: background-color var(--ui-transition);
}
.sidebar-dropdown-item:hover {
  background: var(--dd-hover);
}
.sidebar-dropdown-item.active {
  background: var(--dd-sel-bg);
  color: var(--dd-sel-fg);
}
.sidebar-dropdown-empty {
  padding: 0.875rem 0.75rem;
  text-align: center;
  color: var(--dd-empty-fg);
  font-size: var(--ui-text-sm);
}
.app-module-select {
  padding: 0.625rem 1rem;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  font-size: 0.9rem;
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
  min-width: 180px;
  appearance: auto;
}
.app-module-select:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* 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: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  font-size: var(--ui-text-md);
  box-sizing: border-box;
}
.app-searchable-input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}
.app-searchable-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  display: none;
  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow);
  max-height: var(--dd-max-h);
  overflow-y: auto;
  padding: var(--dd-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}
.app-searchable-dropdown.show {
  display: block;
}
.app-searchable-dropdown-item {
  padding: var(--dd-row-pad);
  font-size: var(--dd-row-fs);
  line-height: 1.3;
  color: var(--ui-text);
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  transition: background-color var(--ui-transition);
}
.app-searchable-dropdown-item:hover {
  background: var(--dd-hover);
}
.app-searchable-dropdown-item.active {
  background: var(--dd-sel-bg);
  color: var(--dd-sel-fg);
}
.app-searchable-dropdown-empty {
  padding: 0.875rem 0.75rem;
  text-align: center;
  color: var(--dd-empty-fg);
  font-size: var(--ui-text-sm);
}
.app-searchable-placeholder {
  color: var(--ui-text-subtle);
}

/* App Content Area */
.app-content-area {
  padding: 0;
  overflow: auto;
  height: calc(100vh - 62px);
}
.module-container { 
  background: var(--ui-surface); 
  min-height: 400px;
}

/* Main Content (kept for potential other use) */
.main-content { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden;
}

.header-bar {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.header-title h1 {
  font-size: 1.5rem;
  color: var(--ui-text);
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
}

.content-area { 
  padding: 0; 
  overflow: auto;
}

/* 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 0.2s;
}
#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,
.sidebar-actions,
.sidebar-search.sidebar-actions,
.user-info {
  display: none !important;
}

/* ============ DASHBOARD STYLES ============ */
#dashboard-view { display: none; min-height: 100vh; background: var(--ui-bg); }
#dashboard-view.active { 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: 1px solid var(--ui-border);
}
.dashboard-header h1 {
  margin: 0;
  font-size: var(--ui-text-xl);
  font-weight: 600;
  line-height: 1.2;
  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-date {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  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;
}

.dashboard-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--ui-shadow-sm);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.dashboard-card:hover {
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow);
}
.dashboard-card .card-icon {
  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));
}
.dashboard-card h3 { font-size: var(--ui-text-base); color: var(--ui-text); margin-bottom: 0.375rem; font-weight: 600; }
.dashboard-card p { color: var(--ui-text-muted); font-size: var(--ui-text-sm); line-height: 1.5; }

/* ============ SECTION VIEW STYLES ============ */
.section-view { display: none; min-height: 100vh; background: var(--ui-surface-muted); }
.section-view.active { 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: 1px solid var(--ui-border);
}
.section-header .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
  background: none;
  border: none;
  border-radius: var(--ui-radius);
  cursor: pointer;
  transition: color var(--ui-transition), background-color var(--ui-transition);
}
.section-header .back-btn:hover { color: var(--ui-text); background: var(--ui-surface-hover); }
.section-header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--ui-text-xl);
  font-weight: 600;
  line-height: 1.2;
  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;
}

/* Bleibt zu wenig Platz, tritt der Titel auf sein Symbol zurück — er wird
   nicht mitten im Wort abgeschnitten. „Klient" statt „Klienten-Module" sieht
   aus wie ein Fehler; das eingefärbte Symbol benennt die Ansicht weiterhin.
   `font-size: 0` trifft nur den Textknoten, das Symbol trägt seine eigene
   Grösse. */
@media (max-width: 780px) {
  .section-header h1 { font-size: 0; gap: 0; }
}

/* 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,
.dashboard-header .header-user-info {
  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; }

/* Auswahlfeld in der Kopfzeile (Einstellungsbereich, Bereich …) */
#settings-view .settings-menu-picker,
#leistungen-view .leistungen-menu-picker {
  position: relative;
  margin-bottom: 0;
  min-width: 240px;
  max-width: 320px;
}
#settings-view .settings-menu-label,
#leistungen-view .leistungen-menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.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: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.section-toolbar .search-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }

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

/* Settings menu: flat professional cards like dashboard/module tiles */
#settings-view .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  border-bottom: none;
  margin-bottom: 1.5rem;
}
#settings-view .tab-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 0.8rem 0.95rem;
  margin: 0;
  color: var(--ui-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
#settings-view .tab-btn i {
  width: 16px;
  text-align: center;
  color: var(--ui-text-muted);
  transition: color 0.2s;
}
#settings-view .tab-btn:hover {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
  border-color: var(--ui-border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#settings-view .tab-btn.active {
  color: var(--ui-text);
  background: var(--ui-surface-hover);
  border-color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.15);
}
#settings-view .tab-btn.active i {
  color: var(--ui-accent);
}
#settings-view .settings-menu-picker {
  margin-bottom: 0;
  min-width: 320px;
  max-width: 360px;
}
#settings-view .settings-menu-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ui-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#settings-view .tabs {
  display: none;
}
#settings-view .settings-header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* LLM/API settings: use platform settings card style for consistency */
#tab-llm .api-settings-note {
  margin-bottom: 1rem;
  color: var(--ui-text-muted);
  font-size: 0.93rem;
  line-height: 1.45;
}
#tab-llm .api-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}
/* Reuse global form-card styles for exact consistency */
#tab-llm .api-settings-grid .form-card {
  margin-bottom: 0;
  padding: 1.5rem;
}
#tab-llm .api-settings-grid .full-width {
  grid-column: 1 / -1;
}
#tab-llm .inline-with-btn {
  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;
}
#tab-llm .result-box {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-surface-hover);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  font-size: 0.92rem;
}
#tab-llm .subtle-text {
  color: var(--ui-text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Form Modal (shared) */
.form-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--ui-shadow-sm);
}
.form-card h3 { font-size: var(--ui-text-base); color: var(--ui-text); margin-bottom: 1rem; font-weight: 600; }

.doc-options-group {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
  padding: 0.6rem;
  margin-top: 0.15rem;
}
.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 0.15s ease;
}
.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: 1.2;
}
.doc-option-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1rem;
}
.doc-option-info {
  color: var(--ui-text-subtle);
  font-size: 0.76rem;
  line-height: 1;
  cursor: help;
  margin-top: 1px;
  transition: color 0.15s ease;
}
.doc-option-item:hover .doc-option-info { color: var(--ui-accent); }

.docling-modal {
  max-width: 700px;
  width: min(92vw, 700px);
  padding: 1.1rem 1.1rem 0.95rem;
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}
.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: 1.3;
  color: var(--ui-accent-hover);
  letter-spacing: -0.01em;
}
.docling-modal-subtitle {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}
.docling-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px 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: 0.01em;
  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 {
  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: 1px 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: 1.3;
}
.docling-status-help {
  color: var(--ui-text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
}
.docling-llm-badge {
  margin-top: 0.18rem;
  display: none;
  font-size: 0.76rem;
  color: var(--ui-text-muted);
}
.docling-progress-wrap {
  border: 1px 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 0.25s ease;
}
.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: 1px 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: 1.15;
  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: #93c5fd;
  background: var(--ui-info-bg);
  color: var(--ui-info);
}
.docling-phase.active .docling-phase-dot { background: var(--ui-accent); }
.docling-phase.done {
  border-color: #86efac;
  background: var(--ui-success-bg);
  color: var(--ui-success);
}
.docling-phase.done .docling-phase-dot { background: var(--ui-success); }
.docling-output {
  border: 1px 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;
}
.perm-section {
  border: 1px solid var(--ui-surface-hover);
  background: var(--ui-surface);
  padding: 0.75rem;
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.perm-header { display:flex; align-items:center; gap:0.6rem; font-weight:700; color:var(--ui-text); margin-bottom:0.4rem; }
.perm-note { color:#6b7280; font-size:0.86rem; margin-bottom:0.45rem; }
.perm-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:0.75rem; }
.perm-label { display:inline-flex; align-items:center; gap:0.55rem; padding:0.35rem 0.45rem; border-radius: var(--ui-radius); cursor:pointer; font-size:0.9rem; }
.perm-label input[type="checkbox"] { width:14px; height:14px; accent-color:var(--ui-accent); }
/* Right column: default columns and helper */
/* Container for default columns: keep neutral so inner .perm-section provides the box */
#group-default-columns { padding: 0; }
.columns-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:0.75rem; }
/* Make each column item visually match permission sections (card-like) */
.col-item {
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.65rem 0.85rem;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-hover);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  font-size:0.95rem;
  font-weight:500;
  color:var(--ui-text);
  width:100%;
  box-sizing:border-box;
  justify-content:flex-start;
}
.col-item input { width:16px; height:16px; }
.col-item span { display:inline-block; flex:1; }
.col-custom-badge {
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius: var(--ui-radius-pill);
  font-size:0.7rem;
  background:#f3e8ff;
  color:#6b21a8;
  font-weight:600;
}
/* Badges for permissions in list */
.perm-badge { display:inline-block; margin:2px 4px 2px 0; padding:4px 8px; border-radius: var(--ui-radius-pill); font-size:0.78rem; color:var(--ui-accent-hover); background:#eef2ff; }
.perm-badge.cat-admin { background:#fff1f2; color:#7f1d1d; }
.perm-badge.cat-dashboard { background:#eef6ff; color:#08316b; }
.perm-badge.cat-modules { background:var(--ui-success-bg); color:#065f46; }
 /* 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%; }
#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; }
#tab-groups .toolbar-actions { display:flex; gap:0.5rem; align-items:center; }
#tab-groups .toolbar-actions .btn { padding: 0 0.75rem; }
/* 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 { width: 100%; box-sizing: border-box; }
#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: 1px 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: 0.01em;
}
.docling-output pre {
  margin: 0;
  max-height: 28vh;
  overflow: auto;
  padding: 0.7rem;
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: 1.42;
  color: var(--ui-accent);
  background: var(--ui-surface);
}
.docling-modal .modal-actions {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px 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); }
.docling-modal.state-success .docling-state-pill { border-color: #bbf7d0; background: var(--ui-success-bg); color: var(--ui-success); }
.docling-modal.state-success .docling-state-pill .dot { background: var(--ui-success); }
.docling-modal.state-error .docling-state-pill { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.docling-modal.state-error .docling-state-pill .dot { background: #ef4444; }
@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%;
  }
}

/* .btn-sm ist historisch und wird an vielen Stellen gesetzt. Damit
   Schaltflächen überall gleich aussehen, unterscheidet es sich nicht mehr
   von .btn — nur der Innenabstand ist etwas knapper. */

/* Placeholder */
.placeholder-view {
  text-align: center;
  padding: 4rem 2rem;
}
.placeholder-view .placeholder-icon {
  font-size: 4rem;
  color: var(--ui-text-subtle);
  margin-bottom: 1.5rem;
}
.placeholder-view h2 { color: var(--ui-text-muted); font-size: 1.5rem; margin-bottom: 0.75rem; }
.placeholder-view p { color: var(--ui-text-subtle); font-size: 1rem; max-width: 500px; margin: 0 auto; line-height: 1.5; }

/* Permission checkbox labels */
.perm-label {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.88rem; font-weight: normal; cursor: pointer;
  padding: 0.2rem 0.5rem; border-radius: var(--ui-radius-sm);
  transition: background 0.15s;
}
.perm-label:hover { background: #f0f4ff; }
.perm-label input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Permission badge styles */
.perm-badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--ui-radius-lg);
  font-size: 0.73rem; font-weight: 500; margin: 1px 2px;
  white-space: nowrap;
}
.perm-badge.cat-dashboard { background: #e8f4fd; color: var(--ui-accent-hover); }
.perm-badge.cat-clients { background: #e8faf0; color: #1e8449; }
.perm-badge.cat-modules { background: #fef5e7; color: #d35400; }
.perm-badge.cat-journal { background: #e8f8f5; color: #117864; }
.perm-badge.cat-adressen { background: #f0ebf8; color: #6c3483; }
.perm-badge.cat-zimmer { background: #e0f7f4; color: #0d9488; }
.perm-badge.cat-export { background: #fdedec; color: var(--ui-danger); }
.perm-badge.cat-admin { background: #fdeef0; color: #922b21; }

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

/* ==========================================================================
   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: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(24, 24, 27, 0.35);
}

#leistungen-generate-modal.show,
#leistungen-create-invoice-modal.show,
#leistungen-invoice-modal.show {
  display: flex;
}

#leistungen-view .modal-content,
#leistungen-generate-modal .modal-content,
#leistungen-create-invoice-modal .modal-content,
#leistungen-invoice-modal .modal-content {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
}

#leistungen-create-invoice-modal .modal-content,
.modal-content-wide { max-width: 900px; }

/* ==========================================================================
   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. */

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

.form-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: 1.55;
  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 {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--ui-text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ui-text-subtle);
}

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

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

.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: 1px 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: 1px 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: 2px 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: 1.5;
  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: 1.5;
  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 > .form-card,
.pdf-vorlage-spalte > .form-card { margin-bottom: 0; }

/* Die Statuszeile: Dateiname, Datum, stiller Warnsatz — Text, kein Rahmen. */
.word-vorlage-status {
  margin: 0 0 1.25rem;
  font-size: var(--ui-text-md);
  line-height: 1.5;
  color: var(--ui-text);
  text-wrap: pretty;
}

.word-vorlage-name { font-weight: 600; overflow-wrap: anywhere; }

.word-vorlage-warntext {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--ui-text-sm);
  color: var(--ui-warning);
}

/* Die selteneren Handlungen: eine Zeile stiller Textaktionen, Punkte als
   Trenner nur zwischen sichtbaren Knöpfen. */
.word-vorlage-textaktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.1rem;
  row-gap: 0;
  /* Der Knopf darüber ist die Handlung, die Links darunter sind der Rest —
     ein Atemzug Abstand, damit sie nicht an ihm kleben. */
  margin-top: 0.875rem;
}

.word-vorlage-link {
  position: relative;
  display: inline-flex;
  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: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

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

.word-vorlage-link--gefaehrlich:hover:not(:disabled) {
  color: var(--ui-danger);
  text-decoration-color: var(--ui-danger-border);
}

.word-vorlage-textaktionen .word-vorlage-link:not([hidden]) ~ .word-vorlage-link:not([hidden])::before {
  /* Im Fluss, nicht absolut: beim Umbruch wandert der Punkt mit dem Wort
     hoch, statt am Zeilenanfang zu stehen. */
  content: '·';
  margin: 0 -0.55rem 0 -0.55rem;
  padding: 0 0.28rem;
  color: var(--ui-text-subtle);
}

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

.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 {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  min-height: 420px;
  max-height: 80vh;
  border: 1px 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: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
}

.word-vorlage-klientwahl select:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

.word-vorlage-klientwahl .form-hinweis {
  flex: 1 1 100%;
  margin-top: 0;
}

/* Der eine Satz zu den Platzhaltern — ruhig, eine Zeile weniger, die man
   lesen muss. */
.platzhalter-hinweis {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: var(--ui-text-md);
  line-height: 1.55;
  color: var(--ui-text-muted);
}

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

.bv-klein .platzhalter-knopf { margin-left: 0.35rem; }

/* 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: 2px 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 allen Dialogen (1000/1100) und über der Rückfrage (1300): 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: 1320;
  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: 1px 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-suche:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }

.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: 0.06em;
  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: 1.45;
  color: var(--ui-text-muted);
}

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

/* 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: 0.04em;
  color: var(--ui-text-muted);
  border: 1px 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: 1.5;
  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 {
  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: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
}

.phl-stand { flex: none; }
.phl-stand.is-fehler { color: var(--ui-danger); }

/* 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-haupt {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
  }
  .word-vorlage-link { min-height: 2.75rem; }
  .word-vorlage-textaktionen { margin-top: 0.25rem; }
  .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;
}

.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: 1px 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);
}

.prot-tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

#prot-tabelle { margin: 0; }

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

/* Die geänderten Felder stehen klein unter der Zeile, damit eine Änderung
   mit fünf Feldern die Tabelle nicht auseinanderzieht. */
.prot-feld {
  font-size: var(--ui-text-sm);
  line-height: 1.5;
  color: var(--ui-text-muted);
}

.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. */
.pdf-code {
  margin: 0.25rem 0;
  padding: 0.625rem 0.75rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ui-text-sm);
  line-height: 1.5;
  color: var(--ui-text);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  white-space: pre;
}


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

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

.plugin-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ui-border);
}

/* In der Kartenmatrix steht der Abstand über das Raster-gap; der eigene
   `margin-bottom` der Schalterzeile wäre hier doppelt. */
.plugin-felder .kl-schalterzeile { margin-bottom: 0; }

/* Der Titel der Schalterzeile trägt dasselbe Gewicht wie eine Feldbeschriftung
   (`form-group label`): Medium, nicht fett — sonst wirkt die Karte schwerer
   als die übrigen, die nur ein `label` über dem Feld haben. */
.plugin-felder .plugin-feld-titel {
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-label);
}

.plugin-speichern { grid-column: 1 / -1; }

.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: 1px 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: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

.mpdf-abschnitt label { 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: zwei Suchfelder, Zurück, rechts Anzeige,
   Sprache, Abmelden — unter 620 Pixeln passt das nicht mehr in eine Zeile.
   Wie beim Auswahlfeld der Einstellungen (unten): die Suchfelder auf eine
   eigene Zeile, je die Hälfte. */
@media (max-width: 620px) {
  .app-section-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;
  }
  .app-section-header .app-nav-controls {
    order: 10;
    flex: 1 1 100%;
  }
  .app-section-header .app-nav-controls .app-client-search-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Rechts im Kopf: der Rest der ersten Zeile. Der Trennstrich trennt dort
     nichts mehr — und kostete auf dem Telefon genau die Pixel, die die erste
     Zeile brauchte (sonst drei Zeilen). */
  .app-section-header .header-user-info { margin-left: auto; }
  .app-section-header .header-user-info::before { display: none; }
}
@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;
  }

  #settings-view .settings-menu-picker,
  #leistungen-view .leistungen-menu-picker,
  #settings-view .settings-header-controls {
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-left: 0;
  }

  /* Der Behälter des Auswahlfelds trägt `flex: 0 1 200px` aus der
     Suchfeld-Regel oben — die Basis schlägt `width: 100%`, das Feld blieb
     auf 200 Pixel und die zweite Zeile halb leer. */
  #settings-view .settings-menu-picker,
  #leistungen-view .leistungen-menu-picker {
    flex: 1 1 auto;
  }

  /* 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: 1px 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); }

.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-passwort {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem 0.25rem;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-radius);
}

.laufwerk-anleitung ol {
  margin: 0 0 0.5rem 1.25rem;
  padding: 0;
  line-height: 1.7;
}

.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; }
.pdf-schrift-zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--ui-border);
}
.pdf-schrift-zeile .subtle-text { margin-right: auto; }
.pdf-schrift-name { font-weight: 600; }
.pdf-schrift-form { display: flex; flex-direction: column; gap: 0.75rem; }
.pdf-schrift-schnitte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0.5rem 1rem; }
.pdf-schrift-schnitt { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--ui-text-sm); color: var(--ui-text-label); }
.pdf-schrift-schnitt input[type="file"] { max-width: 100%; font-size: var(--ui-text-sm); }
.form-actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }