/* === Radikaler CSS Reset === */
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* === Google Fonts: Poppins === */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --primary: #255FFE;
  --primary-dark: #1A45B8;
  --primary-accent: #649DFF;
  --primary-light: #EBF0FF;
  --primary-bg-alpha: rgba(37, 95, 254, 0.1);
  --background-grey: #FAFAF9;
  --formfield-bg: #EBF0FF;
  --danger-red: #EF4444;
  --text-dark: #1C1917;
  --text-light: #57534E;
  --border-grey: #E7E5E4;
  --border-light: #F0EFED;
  --border-radius: 6px;
  --font: 'Avenir Next', Avenir, 'Inter', system-ui, sans-serif;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Basisstile === */
html {
  font-size: 16px;
}

body {
  font-family: var(--font);
  color: var(--text-dark);
  background-color: var(--background-grey);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  padding: 2rem;
  flex: 1;
}

/* Bürgerseite: Hauptinhalt auf gleiche Breite wie .site-header-topbar/navzone (1280px) zentrieren.
   Scope per direktem Body-Kind: Clerk-Layout (main innerhalb .clerk-main) und Admin (eigene CSS)
   sind nicht betroffen. `width: 100%` ist nötig, weil body ein Flex-Column-Container ist und
   `margin: auto` ohne explizite Breite Flex-Items auf ihre Content-Breite kollabieren lässt. */
body > main {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* === Listen-Stile === */
ul {
  list-style-type: disc;
  margin: 2rem 0;
  padding-left: 2rem;
}

ol {
  list-style-type: decimal;
  margin: 1rem 0;
  padding-left: 2rem;
}

ul li,
ol li {
  padding: 0.3rem 0;
}

/* Entfernung aller speziellen Listen-Stylings */
.timeline-list,
.info-timeline,
.data-timeline,
.applicant-data,
.child-data-list,
.timeline-list::before,
.info-timeline::before,
.data-timeline::before,
.applicant-data::before,
.child-data-list::before,
.timeline-list li,
.info-timeline li,
.data-timeline li,
.applicant-data li,
.child-data-list li,
.timeline-list li:last-child,
.info-timeline li:last-child,
.data-timeline li:last-child,
.applicant-data li:last-child,
.child-data-list li:last-child,
.timeline-list li::before,
.info-timeline li::before,
.data-timeline li::before,
.applicant-data li::before,
.child-data-list li::before {
  /* Reset aller speziellen Styles */
  all: unset;
}

/* === Überschriften === */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.2rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--primary);
  text-decoration: none;

  &:visited {
    color: var(--primary-dark);
  }
}

a:hover {
  text-decoration: underline;
}

/* === Layout === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* === Header & Navigation === */
header {
  background: white;
  box-shadow: var(--shadow);
  padding: 1rem 0;
}

nav {
  display: flex;
  align-items: center;
}

/* === Prozess-Navigation === */
.process-steps {
  display: flex;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
}

.process-steps li {
  padding: 0.6rem 1.5rem;
  background: white;
  border-radius: 2rem;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}

.process-steps li.active {
  background: var(--primary);
  color: white;
}

/* === Tabellen === */
table {
  width: auto;
  /* Nicht volle Breite */
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* Table Header */
th {
  font-weight: 600;
  color: var(--text-dark);
  background: white;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border-light);
}

/* Table Cells */
td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
  background: white;
}

/* Abwechselnde Zeilenfarbe (striped) */
tr:nth-child(even) td {
  background-color: var(--background-grey);
}

/* Letzte Zeile ohne Border */
tr:last-child td {
  border-bottom: none;
}

/* Hover-Effekt auf Zeilen */
tr:hover td {
  background: var(--formfield-bg);
  transition: background 0.2s;
}

/* === Form-Elemente === */
form {
  margin: 1.5rem 0;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}

table form {
  max-width: fit-content;
  padding: 0;
}

/* Labels */
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--text-light);
}

/* Input-Felder, Select-Menüs, Textareas */
/* `input[type="search"]` stand hier bis 2026-09-21 NICHT drin. Ein Suchfeld
   bekam dadurch weder Rahmen noch Hintergrund noch Polster und war auf hellem
   Grund kaum als Eingabefeld zu erkennen (Rückmeldung 2026-09-21). Achtung:
   `input[type="search"]` ist mit (0,1,1) spezifischer als eine Klasse — wer
   einem Suchfeld ein eigenes Aussehen gibt, braucht dafür mindestens
   `input.klasse`. Die beiden vorhandenen Fälle sind unten bzw. in admin.css
   entsprechend nachgezogen. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.8rem;
  background: var(--formfield-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-bg-alpha);
}

/* ───────────────────────────────────────────────────────────────────────────
   EINHEIT HINTER DER EINGABE („12 €", „30 km").
   Erzeugt von FormBuilder::mitEinheit(), wenn ein Feld `einheit` trägt.

   DER UMSCHLAG TRÄGT DEN ABSTAND, NICHT DAS FELD. Grund: gewöhnliche Felder
   haben margin-bottom: 1rem, die Felder einer Positionsliste dagegen 0. Würde
   die Einheit über die Höhe des Umschlags samt Feldabstand zentriert, sässe sie
   je nach Zusammenhang mal richtig und mal 8 Pixel zu tief. So ist die Höhe des
   Umschlags immer genau die Höhe des Feldes — und `top: 0; bottom: 0` zentriert
   überall gleich.

   Zweite Falle: bei type="number" zeichnet der Browser rechts seinen
   Zähler-Pfeil. Die Einheit muss links davon bleiben, sonst überlappen beide.
   ─────────────────────────────────────────────────────────────────────────── */
.feld-mit-einheit {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}

.feld-mit-einheit > input {
  margin-bottom: 0;
  padding-right: 2.6rem;
}

.feld-mit-einheit > input[type="number"] {
  padding-right: 4rem;
}

/* In Positionslisten sitzen die Felder dicht — dort trägt auch der Umschlag
   keinen Abstand (die Feldregeln dort setzen margin-bottom ohnehin auf 0). */
.array-item .sub-field .feld-mit-einheit,
.aufsicht-row .feld-mit-einheit {
  margin-bottom: 0;
}

/* ── Und hier muss der Platz für die Einheit EIGENS reserviert werden. ──
   `.array-item .sub-field input[type="number"]` ist spezifischer (0,3,1) als die
   Regel oben (0,2,1) und gewinnt damit unabhängig von der Reihenfolge — ihre
   padding-Kurzschreibweise setzt padding-right auf 0,6rem zurück. Ohne die
   folgenden Regeln klebt die Einheit auf der letzten Ziffer: in einer schmalen
   Zelle (dreispaltiges Raster, auf dem Handy ~95px) beginnt die Kollision bei
   vier Ziffern — „1234km" ohne jeden Abstand. Eine Wegstrecke von 1234 km ist
   ein völlig normaler Eintrag.

   Der Zähler-Pfeil entfällt in diesen Zellen: er kostet genau den Platz, den die
   Einheit braucht, auf Touchgeräten zeichnet ihn ohnehin kein Browser, und in
   einer 95px-Zelle ist er ohne Nutzen. Bei gewöhnlichen Feldern bleibt er. */
.array-item .sub-field .feld-mit-einheit > input,
.aufsicht-row .feld-mit-einheit > input {
  padding-right: 2rem;
}

.array-item .sub-field .feld-mit-einheit > input[type="number"],
.aufsicht-row .feld-mit-einheit > input[type="number"] {
  padding-right: 2rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.array-item .sub-field .feld-mit-einheit > input[type="number"]::-webkit-outer-spin-button,
.array-item .sub-field .feld-mit-einheit > input[type="number"]::-webkit-inner-spin-button,
.aufsicht-row .feld-mit-einheit > input[type="number"]::-webkit-outer-spin-button,
.aufsicht-row .feld-mit-einheit > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.array-item .sub-field .feld-mit-einheit > input[type="number"] ~ .feld-einheit,
.aufsicht-row .feld-mit-einheit > input[type="number"] ~ .feld-einheit {
  right: 0.6rem;
}

.array-item .sub-field .feld-einheit,
.aufsicht-row .feld-einheit {
  font-size: 0.85rem;
}

.feld-einheit {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.9rem;
  display: flex;
  align-items: center;
  color: var(--text-muted, #6b7280);
  font-size: 0.95rem;
  pointer-events: none;
}

.feld-mit-einheit > input[type="number"] ~ .feld-einheit {
  right: 2.2rem;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* Checkboxen & Radio-Buttons */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.5rem;
  accent-color: var(--primary);
}

/* Gruppierung von Formularfeldern */
.form-group {
  margin-bottom: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row>* {
  flex: 1;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  a {
    margin-right: 1rem !important;
  }
}
/* DOM order is [Forward, Back] so that Enter-key submit hits the Forward
   button (browsers default to first <button type=submit> in tree order).
   CSS `order` flips the visual layout back to the conventional [Back, Forward]. */
.button-row .wizard-btn-back    { order: 1; }
.button-row .wizard-btn-forward { order: 2; }
/* „Zurück" gehört an den linken Rand, nicht zwischen zwei Aktionen. Betrifft
   Schritt 4, wo neben „Zurück" noch „Entwurf speichern" steht — beide tragen
   `wizard-btn-back`, unterschieden werden sie über den abgesendeten Wert. */
.button-row .wizard-btn-back[value="back"] { order: 0; }

/* Rangfolge in der Knopfleiste.
   Die globale Themung weiter unten — der Block, der für
   `body:not(.admin-body) button, body:not(.admin-body) input[type="submit"]`
   nur `background-color` setzt — färbt JEDEN Knopf per !important in der
   Hausfarbe. (Bewusst ohne Zeilenangabe: die verrutscht bei jeder Einfügung
   darüber; die älteren Verweise in dieser Datei zeigen genau das.)
   Damit sahen in Schritt 4
   „Entwurf speichern", „Zurück" und „Antrag absenden" identisch aus: drei
   gleich schwere Flächen nebeneinander, ohne erkennbaren Haupteinstieg. Die
   vorhandene `.btn-secondary`-Regel hat kein !important und verlor.
   Hier gewinnt die höhere Spezifität (Scope `.button-row`) und stellt die
   Abstufung her: die weiterführende Aktion bleibt gefüllt, alles Begleitende
   wird Umriss-Knopf.
   Bewusst POSITIV aufgezählt statt per :not() ausgeschlossen — in Schritt 1
   trägt „Weiter" gar keine Klasse und würde sonst mit stillgelegt. Die Liste
   deckt alle vier Wizard-Schritte und die Beschaffungskarten ab, die die
   Zweitrangigkeit jeweils anders auszeichnen. */
body:not(.admin-body) .button-row .wizard-btn-back,
body:not(.admin-body) .button-row button.secondary,
body:not(.admin-body) .button-row .btn-secondary {
  background-color: #fff !important;
  /* Bewusst neutrale Tinte statt var(--primary): die Themenfarbe ist als
     Fläche mit weißer Schrift gedacht, nicht als Schrift auf Weiß. Bei
     `green`, `sand` und `amber` läge sie mit 2,9–3,3:1 unter dem
     Mindestkontrast von 4,5:1; so sind es in JEDEM Theme rund 10:1.
     Die Hausfarbe trägt weiterhin der gefüllte Hauptknopf daneben. */
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}
body:not(.admin-body) .button-row .wizard-btn-back:hover,
body:not(.admin-body) .button-row button.secondary:hover,
body:not(.admin-body) .button-row .btn-secondary:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
}

/* === Buttons ===
   Diese globalen Regeln gelten nur für die Bürger-Wizards (`body` ohne
   `.admin-body`). Im Admin-Layout würden sie sonst eigene Button-/Tab-
   Komponenten aus admin.css überschreiben — auch via Theme-Farbe. */
/* `:not(.picker-trigger)` — der Auslöser eines Auswahl-Pickers ist technisch ein
   <button>, aber fachlich ein FELD: Er zeigt den gewählten Wert und steht
   zwischen Eingabefeldern. Diese Regel färbt jeden Knopf in der Themenfarbe ein,
   Hintergrund und Schriftfarbe zudem mit !important (siehe weiter unten). Ein
   Feld daraus zu machen, hiesse gegen !important anzuschreiben — stattdessen
   nehmen wir den Auslöser aus der Regel heraus und gestalten ihn eigens
   (Abschnitt „Auswahl-Picker" direkt darunter). Ein <button> bleibt es, damit
   Tastaturbedienung und Screenreader-Rolle ohne Nachbau erhalten bleiben. */
body:not(.admin-body) button:not(.picker-trigger),
body:not(.admin-body) .btn:not(.picker-trigger),
body:not(.admin-body) input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: white;
  font-weight: 500;
  font-size: 1rem !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  border-radius: var(--border-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  color: white !important;
}

body:not(.admin-body) button:not(.picker-trigger):hover,
body:not(.admin-body) .btn:not(.picker-trigger):hover,
body:not(.admin-body) input[type="submit"]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* ── Auswahl-Picker: der Auslöser sieht aus wie ein Feld ────────────────────
   Er ist ein <button class="btn picker-trigger">, zeigt aber den gewählten Wert
   und steht zwischen Eingabefeldern. Als Knopf gestaltet sah er aus wie eine
   Schaltfläche mitten im Formular: andere Höhe, andere Breite, Themenfarbe.

   Die Werte sind DIESELBEN wie bei `input[type="text"]` weiter oben — der
   Auslöser soll seinen Nachbarn gleichen, nicht ungefähr ähneln. Gilt in BEIDEN
   Bereichen: Auch im Verwaltungsbereich rendert der FormBuilder schmucklose
   Eingabefelder, es steht also dieselbe Geometrie daneben.

   Ohne !important: Der Selektor (0,2,0) schlägt `body:not(.admin-body) button`
   (0,1,2) und `.btn` (0,1,0). Die drei !important-Angaben jener Regel
   (font-size, font-family, line-height) treffen den Auslöser nicht mehr, weil
   er per :not() aus ihr herausgenommen ist — und ihre Werte wären hier ohnehin
   die gewünschten. */
.picker-field .picker-trigger {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  margin-bottom: 1rem;
  padding: 0.8rem 2.2rem 0.8rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: inherit;
  background-color: var(--formfield-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
  /* Pfeil nach unten, damit der Auslöser als Auswahl lesbar ist und nicht als
     Schaltfläche, die etwas absendet. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4 6.5l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.85rem;
}
.picker-field .picker-trigger:hover {
  border-color: #c7d2fe;
  transform: none;
}
.picker-field .picker-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 95, 254, 0.25);
}
/* Noch nichts gewählt: wie ein Platzhalter, nicht wie ein Wert. Die Klasse
   setzen FormBuilder::renderPicker() und der Runner gemeinsam — ohne sie liesse
   sich „Bitte wählen …" nicht von einem Eintrag dieses Namens unterscheiden. */
.picker-field .picker-count.leer {
  color: #6b7280;
}

/* ── Auswahl-Picker: die Knöpfe IM Dialog ──────────────────────────────────
   Derselbe Grund wie bei der Wizard-Knopfleiste weiter oben, nur an einer
   anderen Stelle sichtbar geworden: Die globale Themung färbt JEDEN Knopf in
   der Hausfarbe. Im Auswahl-Dialog traf das fünf Knöpfe auf einmal — „Alle",
   „Keine", das Schliesskreuz, „Abbrechen" und „Übernehmen" — und alle fünf
   sahen gleich schwer aus. Zwei Hilfsschalter neben dem Suchfeld wogen damit
   optisch so viel wie die Bestätigung.

   WARUM DIE STILE DES RUNNERS NICHT REICHEN: `public/js/form-logic-runner.js`
   bringt für den Dialog eigene Regeln mit (`.picker-modal-footer button` und
   Nachbarn). Die sind niedriger spezifisch als `body:not(.admin-body) button`
   und tragen kein !important — sie verlieren, und zwar unabhängig davon, in
   welcher Reihenfolge sie eingefügt werden. Deshalb steht die Gestaltung hier
   und nicht dort. Der dortige Block darf bleiben: Er greift überall, wo diese
   Datei nicht geladen ist.

   Nebenbei berichtigt: Der Bestätigungsknopf trug im Runner ein hart
   verdrahtetes #2563eb — in keinem Theme die Hausfarbe. Dort steht jetzt
   ebenfalls var(--primary); das musste in die JS-Datei, weil im
   Verwaltungsbereich (`admin-body`) dieser Abschnitt hier absichtlich nicht
   greift und der Runner dort allein gestaltet.

   Die Auswahl trägt `.picker-modal` mit im Selektor, obwohl die Klassen darunter
   schon eindeutig sind: Damit steht sie eine Stufe höher (0,3,2) als die beiden
   globalen Regeln (0,2,2) und gewinnt unabhängig von der Reihenfolge. Ohne das
   hing es daran, welche Regel weiter unten steht — und weiter unten steht noch
   eine zweite (`background-color: var(--primary) !important`), die genau das
   zunichte gemacht hat. */
body:not(.admin-body) .picker-modal .picker-modal-toolbar {
  align-items: center;
}
body:not(.admin-body) .picker-modal .picker-modal-toolbar button,
body:not(.admin-body) .picker-modal .picker-modal-footer button {
  padding: 0.4rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 500;
  background-color: #fff !important;
  /* Neutrale Tinte statt var(--primary) — aus demselben Grund wie in der
     Wizard-Knopfleiste: Die Themenfarbe ist als Fläche mit weisser Schrift
     gedacht; als Schrift auf Weiss unterschreitet sie in mehreren Themes den
     Mindestkontrast. */
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none;
}
body:not(.admin-body) .picker-modal .picker-modal-toolbar button:hover,
body:not(.admin-body) .picker-modal .picker-modal-footer button:hover {
  background-color: #f3f4f6 !important;
  transform: none;
}
/* Die eine weiterführende Aktion bleibt gefüllt — sie ist der Grund, warum der
   Dialog offen ist. */
body:not(.admin-body) .picker-modal .picker-modal-footer .btn-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
body:not(.admin-body) .picker-modal .picker-modal-footer .btn-primary:hover {
  background-color: var(--primary-dark) !important;
}
/* Das Schliesskreuz ist kein Knopf im Sinne einer Aktion, sondern ein Symbol. */
body:not(.admin-body) .picker-modal .picker-modal-close {
  padding: 0 !important;
  width: 2rem;
  height: 2rem;
  background-color: transparent !important;
  color: #6b7280 !important;
  border: 0 !important;
  box-shadow: none;
  font-size: 1.25rem !important;
}
body:not(.admin-body) .picker-modal .picker-modal-close:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  transform: none;
}

body:not(.admin-body) button.secondary,
body:not(.admin-body) .btn.secondary,
body:not(.admin-body) .btn-secondary {
  background: #e0e0e0;
}

body:not(.admin-body) button.secondary:hover,
body:not(.admin-body) .btn.secondary:hover,
body:not(.admin-body) .btn-secondary:hover {
  background: #d0d0d0;
}

/* Icon-Buttons in Tabellen */

table button:not(.btn-primary):hover,
table .btn:not(.btn-primary):hover {
  background: var(--formfield-bg);
  transform: none;
}

/* Button mit Icon */
button svg,
.btn svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

/* Zurück/Weiter-Buttons */
.nav-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.nav-buttons .btn-previous {
  background: white;
  color: var(--text-dark);
  border: 1px solid var(--border-grey);
}

.nav-buttons .btn-next {
  margin-left: auto;
}

/* === Cards & Panels === */
.card,
.panel {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card-title,
.panel-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.card-title svg,
.panel-title svg {
  margin-right: 0.5rem;
  color: var(--primary);
}

/* === Icons === */
.icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  color: inherit;
  vertical-align: middle;
}

/* === Status-Anzeigen === */
.status-indicator {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-success {
  background: var(--primary-bg-alpha);
  color: var(--primary);
}

.status-error {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger-red);
}

/* === Utility-Klassen === */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

/* === Responsive Design === */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  table {
    font-size: 0.9rem;
  }

  th,
  td {
    padding: 0.6rem;
  }
}

/* Spezifische Überschreibungen für bestehende HTML-Struktur */
#phoneField {
  display: none;
}

.form-group.half-width {
  width: 48%;
}

table {
  border: none !important;
}

th,
td {
  border: none !important;
}

input,
select,
textarea {
  border-color: #D6E4FF !important;
}

/* Auch hier der Auslöser des Auswahl-Pickers ausgenommen: Diese Regel ist der
   Grund, warum ein Knopf im Bürgerbereich nicht zum Feld zu gestalten ist —
   `background-color` mit !important. Siehe Abschnitt „Auswahl-Picker". */
body:not(.admin-body) button:not(.picker-trigger),
body:not(.admin-body) input[type="submit"] {
  background-color: var(--primary) !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.error {
  color: var(--danger-red);
  font-weight: 500;
  margin: 0.5rem 0;
}

/* Tabellen mit spezifischen Breiten wie im Design */
.table-container {
  overflow-x: auto;
  max-width: 100%;
}

/* Löschen-Button Überschreibung */
button[type="submit"][style*="background-color:red"]:not(.removeAufsichtBtn),
button[style*="background-color:red"]:not(.removeAufsichtBtn),
.cancel-button:not(.removeAufsichtBtn) {
  background-color: var(--danger-red) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  /* Text verstecken */
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

/* X-Symbol als ::before-Element */
button[type="submit"][style*="background-color:red"]:not(.removeAufsichtBtn)::before,
button[style*="background-color:red"]:not(.removeAufsichtBtn)::before,
.cancel-button:not(.removeAufsichtBtn)::before {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 2px !important;
  background-color: white !important;
  transform: rotate(45deg) !important;
}

/* X-Symbol als ::after-Element */
button[type="submit"][style*="background-color:red"]:not(.removeAufsichtBtn)::after,
button[style*="background-color:red"]:not(.removeAufsichtBtn)::after,
.cancel-button:not(.removeAufsichtBtn)::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 2px !important;
  background-color: white !important;
  transform: rotate(-45deg) !important;
}

/* Hover-Effekt für den Löschen-Button */
button[type="submit"][style*="background-color:red"]:hover,
button[style*="background-color:red"]:hover,
.cancel-button:hover {
  background-color: #c0392b !important;
}


/* === Ticket-Section Styling === */
.ticket-section {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary);
  width: 100%;
  box-sizing: border-box;
}

.ticket-section h2,
.ticket-section h3 {
  color: var(--text-dark);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

/* Daten-Zeilen innerhalb der Ticket-Section */
.ticket-section .data-row {
  display: flex;
  margin-bottom: 0.8rem;
}

.ticket-section .data-label {
  font-weight: 500;
  min-width: 180px;
  color: var(--text-light);
}

.ticket-section .data-value {
  font-weight: 500;
  color: var(--text-dark);
}

/* Status-Anzeigen im Ticket */
.ticket-status {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--primary-bg-alpha);
  color: var(--primary);
}

.ticket-status.open {
  background: var(--primary-bg-alpha);
  color: var(--primary);
}

.ticket-status.closed {
  background: rgba(100, 100, 100, 0.1);
  color: #666;
}

.ticket-status.urgent {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger-red);
}

/* === Ticket-Detailseite === */
/* Ticket-Überschrift */
h1.ticket-title,
h2.ticket-title {
  font-size: 1.6rem;
  color: var(--text-dark);
  margin-bottom: 2rem;
  font-weight: 600;
}

/* Basis-Container */
.form1,
.child_data {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary);
}

/* Kind-Container */
.child_data {
  border-left-color: #5dade2;
  /* Blau für Kinder */
}

/* Formular-Überschriften */
.form1 h3,
.child_data h3 {
  color: var(--text-dark);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

/* Daten-Zeilen */
.ticket-info-row {
  margin-bottom: 0.8rem;
  display: flex;
}

.ticket-info-label {
  font-weight: 500;
  min-width: 180px;
  color: var(--text-light);
}

.ticket-info-value {
  font-weight: 500;
  color: var(--text-dark);
}

/* Item-Bereich */
.item {
  background: var(--background-grey);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 3px solid #5dade2;
}

.item h4 {
  color: var(--text-dark);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Status und Priority Styles */
.status-open,
.status-medium,
.status-closed,
.status-high {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-open {
  background: var(--primary-bg-alpha);
  color: var(--primary);
}

.status-medium {
  background: rgba(93, 173, 226, 0.1);
  color: #3498db;
}

.status-closed {
  background: rgba(100, 100, 100, 0.1);
  color: #666;
}

.status-high {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger-red);
}

/* Zeitstempel */
.timestamp {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* Verbesserte Darstellung auf der Ticket-Detailseite */
body:has(.form1, .child_data) {
  background-color: #f5f7fa;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* === Ticket Container === */
.ticket-container {
  width: 100%;
  max-width: none;
  margin: 1.5rem 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.ticket-header {
  background-color: var(--primary);
  color: white;
  padding: 1rem 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.ticket-header.blue {
  background-color: #3498db;
}

.ticket-data {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ticket-data li {
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.ticket-data li:last-child {
  border-bottom: none;
}

.ticket-data li strong {
  min-width: 150px;
  color: #666;
}

/* Für eine mögliche nebeneinander-Anordnung */
.tickets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Masonry Layout für Tickets */
.tickets-masonry {
  column-count: 2;
  column-gap: 1.5rem;
  margin: 2rem 0;
}

/* Bei schmalen Bildschirmen nur eine Spalte */
@media (max-width: 768px) {
  .tickets-masonry {
    column-count: 1;
  }
}

/* Ticket-Container im Masonry-Layout */
.tickets-masonry .ticket-container {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.5rem 0;
  break-inside: avoid;
  /* Verhindert, dass Container über Spalten gebrochen werden */
}

.tickets-row .ticket-container {
  flex: 1;
  min-width: 300px;
}

/* Spezifische Styles für Kind-Container */
.ticket-container.child {
  border-left: 3px solid #5dade2;
}

.ticket-container.child .ticket-header {
  background-color: #5dade2;
}

/* === Kinder Container Styles === */
#kinder_container,
.kinder_container,
.child-form-container {
  margin: 2rem 0;
  max-width: 100%;
  background-color: white;
}

.kind-form {
  border: 1px solid var(--primary) !important;
}

.upload-section {
  background-color: #f4f9f8 !important;
}

.upload-section .upload-label {
  display: block;
  margin-bottom: 0.5em;
}

/* Input-Felder in Fieldsets – global rules handle styling, just ensure full width */
fieldset input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
fieldset select,
fieldset textarea {
  width: 100%;
}

/* Überschriftstypen (blau & grün) */
.section-header {
  padding: 0.8rem 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: white;
}

.section-header.blue {
  background-color: #3498db;
}

.section-header.green {
  background-color: var(--primary);
}

/* Timeline-Stil für Antragsteller/Kinder-Daten - spezifische Klassen */
.timeline-list,
.info-timeline,
.data-timeline,
.applicant-data,
.child-data-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline-list::before,
.info-timeline::before,
.data-timeline::before,
.applicant-data::before,
.child-data-list::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #eaeaea;
  z-index: 0;
}

.timeline-list li,
.info-timeline li,
.data-timeline li,
.applicant-data li,
.child-data-list li {
  position: relative;
  padding: 12px 0 12px 45px;
  margin: 0;
  border-bottom: 1px solid #f1f1f1;
}

.timeline-list li:last-child,
.info-timeline li:last-child,
.data-timeline li:last-child,
.applicant-data li:last-child,
.child-data-list li:last-child {
  border-bottom: none;
}

.timeline-list li::before,
.info-timeline li::before,
.data-timeline li::before,
.applicant-data li::before,
.child-data-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 50%;
  z-index: 1;
}

/* Override für die generellen Listen-Styles */
.timeline-list li::before,
.info-timeline li::before,
.data-timeline li::before,
.applicant-data li::before,
.child-data-list li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  content: attr(data-count);
}

/* Spezifische Klassen für Info-Labels und Values */
.timeline-label,
.info-label,
.data-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 3px;
}

.timeline-value,
.info-value,
.data-value {
  display: block;
  font-weight: 500;
  color: var(--text-dark);
}

/* Header-Styles für die Abschnitte */
.section-header,
.info-header,
.data-section-header {
  padding: 10px 15px;
  background-color: #3498db;
  color: white;
  font-weight: 600;
  margin-bottom: 15px;
}

.section-header.green,
.info-header.green,
.data-section-header.green {
  background-color: var(--primary);
}

.ticket-container {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}



/* === Alerts & Messages === */
.alert {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 500;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.alert-error,
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.text-success {
  color: var(--primary);
  font-weight: bold;
}

.text-error,
.text-danger {
  color: var(--danger-red);
  font-weight: bold;
}

/* === Password Rules === */
.rule-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5em;
  display: none;
}

.rule-list li {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.rule-list li::before {
  content: "🔴";
  margin-right: 0.5em;
  color: var(--danger-red);
}

.rule-list li.valid::before {
  content: "🟢";
  color: var(--primary);
}

/* Link utilities */
.link-primary {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.link-primary:hover {
  text-decoration: underline;
}

/* === Utilities added during cleanup === */
.btn-danger {
  background-color: var(--danger-red) !important;
  color: white !important;
}

.btn-danger:hover {
  background-color: #c0392b !important;
}

.styled-fieldset {
  margin-top: 1em;
  padding: 0.75em;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.styled-fieldset legend {
  /* Klassisches Fieldset: die Beschriftung unterbricht den sichtbaren Rahmen.
     Deshalb den globalen Float zuruecknehmen — hier ist das Sonderverhalten
     des <legend> ausdruecklich gewollt. */
  float: none;
  font-weight: 600;
  width: auto;
  border-bottom: none;
  margin-bottom: 0;
}

.form-label-block {
  display: block;
  margin: 0.25em 0;
}

/* === Overview View Utilities === */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1em;
  margin-bottom: 1em;
}

.radio-group {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  flex: 1;
}

.radio-group label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Hinweis: #filterInput wird heute ausschließlich über .dash-search-input
   gestylt (mit padding-left:36px für das Lupen-Icon). Frühere ID-Regeln
   überschrieben dieses Padding wegen höherer Spezifität und ließen die Lupe
   mit dem Placeholder überlappen — daher bewusst entfernt. */

@media (max-width: 600px) {
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.application-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.actions-center {
  text-align: center;
  margin-top: 30px;
}

.inline-form {
  display: inline;
}

.small-note {
  font-size: 0.8em;
  color: #555;
  margin-top: 5px;
}

/* === Wizard Step 4 Styles === */
.flag .upload-inline label {
  margin-bottom: .25rem;
  font-weight: 600;
}

.form-section {
  margin: 1em 0;
  padding: 1em;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.image-preview {
  max-width: 200px;
  max-height: 200px;
  margin-top: 10px;
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.preview-container {
  margin-top: 10px;
}

.file-info {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
}

.is-hidden {
  display: none !important;
}

.existing-preview {
  max-width: 100%;
  height: 200px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.flag small {
  display: block;
  margin: .25rem 0 1.25rem;
  font-size: .75rem;
  color: #6c757d;
  line-height: 1.4;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.form-row .form-field label {
  display: block;
  margin-bottom: .25rem;
}

.form-row .form-field label {
  font-weight: normal !important;
}

.form-row .form-field input,
.form-row .form-field textarea,
.form-row .form-field select {
  width: 100%;
  box-sizing: border-box;
}

/* Fieldsets nebeneinander */
.fieldset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* responsiv einklappen */
@media (max-width: 900px) {

  .form-row,
  .fieldset-row {
    grid-template-columns: 1fr;
  }
}

/* Declaration List Styles */
.declaration-list {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.declaration-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: #333;
}

/* === Extracted from PHP Views === */
.edit-fields-container fieldset {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
}

.edit-fields-container fieldset legend {
  /* Wie .styled-fieldset: Beschriftung im Rahmen, kein Float. */
  float: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  padding: 0 10px;
  width: auto;
  border-bottom: none;
  margin-bottom: 15px;
}

.edit-fields-container .fields-row {
  margin-top: 10px;
}

/* Adjustments for FormBuilder styles in portal context if needed */
.field-group {
  background: #fff;
}

table#application {
  width: 100%;
  border-collapse: collapse;
  /* Ensure nice borders */
}

table#application th,
table#application td {
  padding: 12px;
  vertical-align: middle;
  /* Center content vertically */
  text-align: left;
}

/* Specific column widths adjusted */
table#application th:nth-child(1) {
  width: 15%;
}

/* Antragsnummer */
table#application th:nth-child(2) {
  width: 20%;
}

/* Antragstyp */
table#application th:nth-child(3) {
  width: 20%;
}

/* Aktualisiert am */
table#application th:nth-child(4) {
  width: auto;
}

/* Status */
table#application th:last-child {
  width: 280px;
}

/* Aktionen */

table#application .inline-form button,
table#application a.btn {
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  /* Ensure anchors behave like blocks for width */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 10px;
}

.small-note {
  margin-top: 5px;
  font-size: 0.85em;
  color: #666;
  /* Die Aktionsspalte ist auf Button-Breite geschrumpft (width: 1%). Ohne
     Mindestbreite bricht ein längerer Hinweis dort Wort für Wort um und zieht
     die Zeile in die Höhe. */
  min-width: 200px;
  max-width: 280px;
}

/* Lange Schritt-Beschreibungen: eingeklappt, per „mehr anzeigen" aufklappbar
   (src/Views/partials/small_note.php). Natives <details>, Beschriftung über
   CSS-content — kein JS nötig. */
details.small-note-clamped summary {
  cursor: pointer;
  list-style: none;
}
details.small-note-clamped summary::-webkit-details-marker {
  display: none;
}
details.small-note-clamped .note-toggle::after {
  content: 'mehr anzeigen';
  color: #2563eb;
  white-space: nowrap;
  margin-left: 4px;
}
details.small-note-clamped[open] .note-toggle::after {
  content: 'weniger anzeigen';
}
details.small-note-clamped[open] summary .note-preview {
  display: none;
}
details.small-note-clamped .note-full {
  margin-top: 3px;
}

/* ===== Auth Pages (Login / Register) ===== */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 3rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  overflow: hidden;
}

.auth-card.wide { max-width: 520px; }

.auth-card-header {
  text-align: center;
  padding: 2rem 2rem 0;
}

.auth-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-light, #EBF0FF);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

.auth-icon.clerk {
  background: #FEF3C7;
  color: #D97706;
}

.auth-title {
  margin: 0 0 .35rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
}

.auth-subtitle {
  margin: 0;
  font-size: .9rem;
  color: #6B7280;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.25rem 2rem 0;
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  line-height: 1.5;
}

.auth-alert.error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.auth-alert.success {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.auth-alert i { margin-top: 2px; flex-shrink: 0; }

.auth-form {
  padding: 1.5rem 2rem 2rem !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.auth-field {
  margin-bottom: 1rem;
}

.auth-label {
  display: block !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: .4rem !important;
}

.auth-hint {
  font-weight: 400;
  color: #9CA3AF;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: .85rem;
  pointer-events: none;
  z-index: 1;
}

.auth-input {
  width: 100% !important;
  padding: 10px 12px 10px 38px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
  background: #FAFAFA !important;
  color: #111827 !important;
  transition: border-color .15s, box-shadow .15s !important;
  margin: 0 !important;
}

.auth-input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-bg-alpha, rgba(37,95,254,.1)) !important;
  background: #fff !important;
}

.auth-input::placeholder {
  color: #BBBDC0;
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.auth-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 11px 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .15s, transform .1s !important;
  text-decoration: none;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 !important;
}

.auth-btn:hover {
  background: var(--primary-dark) !important;
  transform: none !important;
}

.auth-btn.secondary {
  background: #F3F4F6 !important;
  color: #374151 !important;
}

.auth-btn.secondary:hover {
  background: #E5E7EB !important;
}

.auth-btn-row {
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
}

.auth-btn-row .auth-btn { flex: 1; }

.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 2rem 1.75rem;
}

.auth-link {
  font-size: .85rem;
  color: #6B7280;
  text-decoration: none;
  transition: color .15s;
}

.auth-link:hover { color: var(--primary); }

.auth-link.highlight {
  color: var(--primary);
  font-weight: 600;
}

.auth-link-sep {
  width: 1px;
  height: 16px;
  background: #E5E7EB;
}

@media (max-width: 500px) {
  .auth-card { border-radius: 0; box-shadow: none; }
  .auth-form { padding: 1.25rem 1.25rem 1.5rem !important; }
  .auth-card-header { padding: 1.5rem 1.25rem 0; }
  .auth-links { padding: 0 1.25rem 1.5rem; }
  .auth-row { grid-template-columns: 1fr; }
}

/* ===== Portal Index ===== */
.pi-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.pi-banner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-size: .92rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.pi-banner i { flex-shrink: 0; margin-top: .15rem; font-size: 1rem; }
.pi-banner--info    { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.pi-banner--info i  { color: #2563EB; }
.pi-banner--warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.pi-banner--warning i { color: #D97706; }
.pi-banner--success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.pi-banner--success i { color: #059669; }
.pi-banner--error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.pi-banner--error i { color: #DC2626; }

.pi-hero {
  text-align: center;
  padding: 2.5rem 1rem 2.25rem;
}

.pi-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0 0 .6rem;
  letter-spacing: -.3px;
}

.pi-hero-sub {
  font-size: 1.05rem;
  color: #6B7280;
  margin: 0;
}

/* Suchfeld unter Hero — filtert live die Cards in den Kategorie-Sektionen */
.pi-search {
  position: relative;
  margin: 1.25rem auto 0;
  max-width: 520px;
}
.pi-search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}
/* `input.` davor, damit die Regel die neue Zeile fuer input[type="search"]
   oben nicht verliert: gleiche Spezifitaet (0,1,1), und diese steht spaeter. */
input.pi-search-input {
  width: 100%;
  margin-bottom: 0;
  padding: .65rem 2.5rem .65rem 2.25rem;
  font-size: .95rem;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #111827;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
}
.pi-search-input:focus {
  outline: none;
  border-color: var(--primary, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .15);
}
.pi-search-input::-webkit-search-cancel-button { display: none; }
.pi-search-clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  cursor: pointer;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pi-search-clear:hover { background: #F3F4F6; color: #111827; }
.pi-search-status {
  margin: .5rem 0 0;
  text-align: center;
  font-size: .8rem;
  color: #6B7280;
  min-height: 1.1em;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
}

/* Kategorie-Sektion (Lebens-/Geschäftslage) — aufklappbar via <details>.
   Pro Kategorie deutlich Abstand zur nächsten, damit die Trennung optisch
   greift. Aufklapp-Zustand merkt sich pro Bürger via localStorage. */
.pi-section {
  margin: 0 0 2.5rem;
}
.pi-section:last-of-type {
  margin-bottom: 1.5rem;
}
.pi-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.pi-section > summary::-webkit-details-marker {
  display: none;
}
.pi-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #E5E7EB;
  transition: border-color .15s ease;
}
.pi-section[open] > summary .pi-section-header {
  border-bottom-color: #93C5FD;
}
.pi-section-header-drafts {
  margin-top: 3rem;
}
.pi-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}
.pi-section-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6B7280;
  background: #F3F4F6;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.pi-section-toggle {
  color: #6B7280;
  font-size: .85rem;
  transition: transform .2s ease, color .2s ease;
}
.pi-section[open] > summary .pi-section-toggle {
  transform: rotate(180deg);
  color: #1e3a8a;
}
.pi-section-hint {
  margin: 0.4rem 0 1rem;
  font-size: 0.85rem;
  color: #6B7280;
}

/* Entwurfs-Karte: dezenter visueller Unterschied, signalisiert "noch nicht öffentlich" */
.pi-card-draft {
  border: 1px dashed #FCD34D;
  opacity: 0.88;
}
.pi-card-draft:hover {
  opacity: 1;
}

/* Vorschau-Modus-Banner: durchgängig sichtbar, solange ein SB die Bürger-Sicht
   einer unveröffentlichten Leistung testet. Auffälliger Streifen oben, ohne
   den eigentlichen Content zu verdecken. */
.preview-banner {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #fff;
  border-bottom: 3px solid #fbbf24;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.preview-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.preview-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fbbf24;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.preview-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.preview-banner-text strong {
  font-size: 0.95rem;
}
.preview-banner-sub {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: .15rem;
}
.preview-banner-sub code {
  background: rgba(255,255,255,.15);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}
.preview-banner-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
/* Globales `form { background:white; padding:2rem; box-shadow }` (siehe Zeile 248)
   würde sonst die Buttons in eine weiße Karte wrappen — hier neutralisieren. */
.preview-banner form {
  margin: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Höhere Spezifität + !important nötig, weil global `button` in dieser styles.css
   `color: white !important` und `font-size: 1rem !important` setzt. */
.preview-banner a.preview-banner-btn,
.preview-banner button.preview-banner-btn {
  background: #fbbf24 !important;
  color: #1e293b !important;
  border: 1px solid #fbbf24 !important;
  padding: .4rem .8rem !important;
  border-radius: 6px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.preview-banner a.preview-banner-btn:hover,
.preview-banner button.preview-banner-btn:hover {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  transform: none;
}
.preview-banner a.preview-banner-btn-ghost,
.preview-banner button.preview-banner-btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
}
.preview-banner a.preview-banner-btn-ghost:hover,
.preview-banner button.preview-banner-btn-ghost:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.85) !important;
}
@media (max-width: 640px) {
  .preview-banner-inner { flex-wrap: wrap; }
  .preview-banner-actions { width: 100%; justify-content: flex-end; }
}

/* Empty state — no apps available for this user */
.pi-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6B7280;
}
.pi-empty i {
  font-size: 2.6rem;
  color: #D1D5DB;
  margin-bottom: 1rem;
}
.pi-empty h2 {
  font-size: 1.15rem;
  color: #374151;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.pi-empty p {
  font-size: 0.92rem;
  margin: 0 auto;
  max-width: 440px;
  line-height: 1.5;
}

/* Card — uses --card-accent set inline per app for banner gradient,
   icon color, CTA bg and badge text. Falls back to theme primary. */
.pi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.pi-card:focus-visible {
  outline: 3px solid var(--card-accent, var(--primary));
  outline-offset: 3px;
}

/* Banner default = system theme primary (per Admin UI: leere color_style →
   "Theme-Farbe verwenden"). Inline style="background:..." aus color_style
   überschreibt den Default und gibt der App eigene Tile-Identität.
   accent_color bleibt für Icon/CTA/Badge — subtiler Per-App-Akzent. */
.pi-card-banner {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Icon frame — fixed 72×72 white tile centered in banner.
   Normalises imgs of any aspect ratio and font-icons onto the same stage. */
.pi-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  font-size: 2.2rem;
  color: var(--card-accent, var(--primary));
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  overflow: hidden;
}
.pi-icon img {
  max-width: 80% !important;
  max-height: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Badge — neutral counter chip, accent-tinted, sits above the banner */
.pi-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--card-accent, var(--primary));
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 1;
}

/* Entwurf-Badge — signalisiert eine noch nicht veröffentlichte Leistung
   (nur für Super-Admins sichtbar). Oben links, damit es nicht mit dem
   Counter-Chip (.pi-badge, oben rechts) kollidiert. */
.pi-draft-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff4d6;
  color: #8a6100;
  border: 1px solid #e0b200;
  border-radius: 999px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 1;
}

/* „Keine Berechtigung"-Badge — die Leistung ist sichtbar (Super-Admin), aber
   ohne Antragsteller-Berechtigung nicht einreichbar. Unten links, damit es
   nicht mit dem Entwurf-Badge (oben links) kollidiert. */
.pi-noperm-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fdecea;
  color: #a12622;
  border: 1px solid #e0736c;
  border-radius: 999px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 1;
}

/* „Extern"-Badge — interne Leistung, die per externem Link (external_url_clerk)
   direkt nach außen verweist statt einen Wizard/Antrag zu starten. Oben rechts,
   kollidiert damit weder mit Entwurf- (oben links) noch Keine-Berechtigung-Badge. */
.pi-ext-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e0edff;
  color: #1e40af;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 1;
}

.pi-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.pi-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.pi-card-desc {
  margin: 0;
  font-size: .9rem;
  color: #6B7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA — replaces the old role tag. Pinned to the bottom of the body so
   cards in the same row align CTAs even when descriptions differ.
   Uses theme primary (not card accent), since accent_color is documented
   in admin as "Buttons/Links *inside* the app" — not for the portal tile. */
.pi-card-cta {
  margin-top: auto;
  padding-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
}
.pi-card-cta i {
  font-size: 0.78rem;
  transition: transform .2s ease;
}
.pi-card:hover .pi-card-cta i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .pi-card,
  .pi-card-cta i {
    transition: none;
  }
  .pi-card:hover {
    transform: none;
  }
  .pi-card:hover .pi-card-cta i {
    transform: none;
  }
}

/* Form-POST-Variante der .pi-card — z.B. interne Antragsstrecken
   (clerk/internal_start.php). Die <form> trägt CSRF + hidden inputs,
   ist selbst Grid-Item; der <a class="pi-card"> drin ist die sichtbare
   Karte (gleiches Markup wie Bürger-Sicht) und submittet die Form via
   onclick. Identische optische Parität ohne <button>-Overlay (das wird
   durch die globale Button-Default-Regel grau eingefärbt). */
.pi-card-form {
  margin: 0;
  display: contents; /* Form ist im Layout transparent — der <a> wird Grid-Item */
}

/* Legacy: keep old portal-card-banner name working if referenced elsewhere */
.portal-card-banner { height: 150px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.portal-icon-container img { width: 100% !important; height: 100% !important; object-fit: contain; }

.workflow-history-container {
  width: 100%;
  margin: 1.5rem 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  overflow: hidden;
}

.workflow-history-container h3 {
  margin: 0;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
}

.workflow-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.workflow-history-table thead th {
  background: var(--primary-dark);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.workflow-history-table tbody tr {
  border-bottom: 1px solid #F3F4F6;
  transition: background .1s;
}

.workflow-history-table tbody tr:last-child { border-bottom: none; }
.workflow-history-table tbody tr:nth-child(even) { background: #FAFAFA; }
.workflow-history-table tbody tr:hover { background: var(--primary-light, #EEF2FF) !important; cursor: default; }

.workflow-history-table td {
  padding: 10px 14px;
  vertical-align: top;
  color: #374151;
}

.workflow-history-table small {
  display: block;
  line-height: 1.4;
  color: #6B7280;
}

/* ── Details-Spalte: Label/Wert-Raster (Design A) ──────────────────────────── */
.workflow-history-table .wfh-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: baseline;
  font-size: .82rem;
  line-height: 1.45;
}
.workflow-history-table .wfh-kv .wfh-k { color: #9CA3AF; white-space: nowrap; }
.workflow-history-table .wfh-kv .wfh-v { color: #374151; }
.workflow-history-table .wfh-kv .wfh-num {
  /* Werte bleiben linksbündig wie Text (gemischte Spalte) — nur tabellarische
     Ziffern, damit Beträge einheitlich breit wirken. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.workflow-history-table .wfh-kv .wfh-kv-long { grid-column: 1 / -1; }
.workflow-history-table .wfh-kv-long .wfh-detail summary { cursor: pointer; list-style: none; }
.workflow-history-table .wfh-kv-long .wfh-detail summary::-webkit-details-marker { display: none; }
.workflow-history-table .wfh-kv-long .wfh-k { color: #9CA3AF; }
.workflow-history-table .wfh-kv-long .wfh-more { color: #2563EB; font-size: .7rem; }
.workflow-history-table .wfh-longbox {
  margin: .25rem 0 .5rem 0;
  padding: .4rem .6rem;
  background: #F8FAFC;
  border-left: 3px solid #CBD5E1;
  white-space: pre-wrap;
  font-size: .85rem;
  line-height: 1.4;
}

/* ── Vollbreite, aufklappbare Detail-Zeile (Design C) ──────────────────────── */
.workflow-history-table .wfh-toggle {
  display: inline-block;
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary, #1C4E8A);
  text-decoration: none;
  cursor: pointer;
}
.workflow-history-table .wfh-toggle::before { content: "\25B8\00a0"; } /* ▸ */
.workflow-history-table .wfh-toggle[aria-expanded="true"]::before { content: "\25BE\00a0"; } /* ▾ */
.workflow-history-table .wfh-toggle:hover { text-decoration: underline; }
.workflow-history-table .wfh-toggle:focus-visible {
  outline: 2px solid var(--primary, #1C4E8A);
  outline-offset: 2px;
}
.workflow-history-table tr.wfh-panel-row:hover { background: transparent !important; }
/* Grauer Kanal, in dem die Detail-Karte sitzt (kräftiger als die Karte selbst,
   damit sich die Karte klar abhebt). */
.workflow-history-table tr.wfh-panel-row > td {
  padding: 0 14px 12px;
  background: #EEF2F7;
  border-top: none;
}
/* (1) Abgesetzte Karte mit Akzent-Balken + (4) Connector-Notch nach oben. */
.workflow-history-table .wfh-panel-inner {
  position: relative;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--primary, #1C4E8A);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(2, 6, 23, .08);
  padding: .7rem .95rem .8rem;
}
.workflow-history-table .wfh-panel-inner::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 2rem;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #E2E8F0;
  border-top: 1px solid #E2E8F0;
  transform: rotate(45deg);
}
/* (4) Sanftes Aufklappen — nur ohne reduce-motion. */
@media (prefers-reduced-motion: no-preference) {
  .workflow-history-table .wfh-panel-inner { animation: wfhReveal .18s ease-out; }
  @keyframes wfhReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}
/* (2) Kopfzeile im Panel. */
.workflow-history-table .wfh-panel-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary, #1C4E8A);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #EEF2F7;
}
.workflow-history-table .wfh-panel-head .wfh-panel-count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #64748B;
  background: #F1F5F9;
  border-radius: 999px;
  padding: .05rem .5rem;
}
/* (3) Zwei gleich breite Spalten mit Zeilen-Trennern statt raggedem Gutter. */
.workflow-history-table .wfh-panel-inner .wfh-kv-wide {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2.5rem;
}
@media (min-width: 640px) {
  .workflow-history-table .wfh-panel-inner .wfh-kv-wide { grid-template-columns: 1fr 1fr; }
}
.workflow-history-table .wfh-kv-wide .wfh-kv-row {
  display: grid;
  grid-template-columns: minmax(100px, 38%) 1fr;
  gap: .15rem .75rem;
  padding: .3rem 0;
  border-bottom: 1px solid #F1F5F9;
  align-items: baseline;
}
.workflow-history-table .wfh-kv-wide .wfh-kv-row.wfh-kv-long {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}
/* Lange Labels umbrechen statt in die Wert-Spalte überlaufen (feste Track-Breite
   + nowrap aus dem A-Raster würde sonst überlappen). min-width:0 erlaubt beiden
   Zellen, unter ihre Inhaltsbreite zu schrumpfen und umzubrechen. */
.workflow-history-table .wfh-kv-wide .wfh-kv-row .wfh-k {
  color: #9CA3AF;
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
.workflow-history-table .wfh-kv-wide .wfh-kv-row .wfh-v {
  color: #374151;
  min-width: 0;
  overflow-wrap: anywhere;
}

h1 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.ticket-meta {
  background: #f5f5f5;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.ticket-container {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.ticket-header {
  background: var(--primary);
  color: white;
  padding: 10px 15px;
  font-weight: bold;
}

.ticket-data,
.nested-data {
  list-style-type: none;
  padding: 15px;
  margin: 0;
}

.ticket-data>li,
.nested-data>li {
  margin-bottom: 8px;
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.ticket-array-item {
  background: #f9f9f9;
  padding: 10px;
  margin: 10px;
  border-left: 3px solid #ccc;
}

.attachments {
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
}

.attachments ul {
  list-style-type: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.attachments li {
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.preview-container {
  margin-top: 10px;
}

.ticket-container.wide-2 {
  grid-column: span 2;
}

@media (max-width: 1200px) {
  .ticket-container.wide-2 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .ticket-container.wide-2 {
    grid-column: span 1;
  }
}

.ticket-image-preview {
  max-width: 100%;
  max-height: 200px;
  display: block;
  margin: 5px 0;
  border: 1px solid #ddd;
}

.ticket-pdf-preview {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  margin: 5px 0;
}

.pdf-preview {
  height: 400px;
  border: 1px solid #ddd;
  margin: 5px 0;
}

.section-heading {
  list-style: none;
  text-align: left;
  position: relative;
}

.section-heading span {
  background: #fff;
  padding: 0 12px;
  font-weight: 600;
  font-size: 1rem;
  color: #555;
  position: relative;
  z-index: 1;
}

.section-heading::before {
  content: "";
  display: block;
  height: 1px;
  background: #ddd;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 0;
}

.ticket-data>li.subsection-heading {
  display: block;
  list-style: none;
  margin-top: 25px;
  margin-bottom: 5px;
  padding: 0 0 5px 10px;
  width: 40%;
  text-align: left;
}

.ticket-data>li.subsection-heading span {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  text-align: left;
  display: block;
}

.ticket-data>li.subsection-heading::after {
  display: none;
}


.ticket-header {
  flex: 0 0 auto;
}

.ticket-data,
.attachments {
  flex: 1 1 auto;
}

.ticket-data>li {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.ticket-data>li>strong {
  text-align: left;
  padding-left: 10px;
}

.ticket-data>li>span,
.ticket-data>li:not(:has(strong)) {
  text-align: center;
}

.nested-data>li {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
}

.nested-data>li>strong {
  text-align: left;
}

.nested-data>li>span {
  text-align: center;
}

.ticket-data>li.kv-row,
.nested-data>li.kv-row {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  gap: 8px;
}

.kv-row>.kv-key {
  text-align: left;
  padding-left: 10px;
  color: #555;
}

.kv-row>.kv-value {
  text-align: center;
  justify-self: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.kv-row>.kv-nested {
  grid-column: 1 / -1;
  width: 100%;
}

.kv-row>.kv-nested>.nested-data,
.kv-row>.kv-nested>.ticket-data {
  padding-left: 0;
  margin-top: 6px;
}

.ticket-data>li.section-heading,
.nested-data>li.section-heading {
  display: block;
}

.ticket-data>li,
.nested-data>li {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.ticket-data li:has(.ticket-array-item),
.nested-data li:has(.ticket-array-item) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: stretch;
}

.ticket-array-item {
  display: flex;
  flex-direction: column;
  /* Keine Prozent-Höhe: gleiche Kartenhöhen kommen aus align-items: stretch
     des Rasters oben. Als height: 100% löste sich der Wert in der internen
     Antragsansicht gegen den gestreckten Container .kv-nested auf — dort wurde
     JEDE Positionskarte so hoch wie der ganze Container, und ab der zweiten
     Position lief die Karte heraus und überlagerte die Folgeabschnitte. */
  background: #f9f9f9;
  padding: 10px;
  border-left: 3px solid #ccc;
  margin: 0;
}

.ticket-array-item h4 {
  margin: 0 0 .5rem;
}

.ticket-array-item .nested-data,
.ticket-array-item .ticket-data {
  padding: 0;
  margin: 0;
}

/* ===== Clerk Dashboard ===== */
.dash-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dash-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.dash-count {
  background: var(--primary-light, #EEF2FF);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Aktiver Leistungs-Filter (Weg über die Portalkachel): der Zusatz im Titel
   bleibt sichtbar untergeordnet, damit „Meine Anträge" die Seite benennt und
   die Leistung nur präzisiert. */
.dash-title-filter {
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}

/* Weg zurück zur ungefilterten Übersicht. Ohne ihn bleibt der Bürger in der
   gefilterten Sicht und hält seine übrigen Anträge für verschwunden. */
.dash-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--primary-light, #EEF2FF);
  border-radius: 20px;
  white-space: nowrap;
}

.dash-filter-clear:hover,
.dash-filter-clear:focus-visible {
  background: var(--primary-light, #EEF2FF);
  text-decoration: none;
}

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

.dash-filters { display: flex; align-items: center; flex: 1; gap: .5rem; flex-wrap: wrap; }

.dash-search-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  justify-content: flex-end;
}

.dash-select {
  padding: 7px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  font-size: .875rem;
  background: #FAFAFA;
  color: #374151;
  max-width: 220px;
  cursor: pointer;
  /* Globales select-margin-bottom (1rem) neutralisieren — sonst sitzt das
     Dropdown in der align-items:center-Zeile 8px höher als das Suchfeld. */
  margin-bottom: 0;
  transition: border-color .15s;
}

/* Sicherheitsnetz: Alle Bedien-Elemente in der Filter-Zeile tragen kein
   globales margin-bottom, damit sie in der zentrierten Flex-Zeile bündig
   bleiben (globale input/select-Regel setzt sonst 1rem). */
.dash-search-row > input,
.dash-search-row > select {
  margin-bottom: 0;
}

.dash-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg-alpha, rgba(37,95,254,.1));
}

.dash-assign-select {
  padding: 3px 5px;
  border: 1px solid #D1D5DB;
  border-radius: 5px;
  font-size: .78rem;
  background: #FAFAFA;
  cursor: pointer;
  max-width: 160px;
  transition: border-color .15s;
}
.dash-assign-select:focus {
  outline: none;
  border-color: var(--primary);
}
.dash-assign-select:disabled {
  opacity: .5;
  cursor: wait;
}

.dash-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.dash-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: .85rem;
  pointer-events: none;
  z-index: 1;
}

input.dash-search-input {
  padding: 7px 10px 7px 36px;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  font-size: .875rem;
  width: 100% !important;
  /* Globales input-margin-bottom (1rem) zurücksetzen — sonst wird der
     position:relative-Wrapper 16px höher als das Feld, und die per top:50%
     zentrierte Lupe sitzt unterhalb der Feldmitte. */
  margin-bottom: 0;
  transition: border-color .15s;
}

input.dash-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg-alpha, rgba(37,95,254,.1));
}

.dash-table-wrap {
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

table#application,
.dash-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: .9rem;
}

.dash-table thead th {
  background: var(--primary-dark);
  color: #fff;
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.dash-table tbody tr {
  border-bottom: 1px solid #F3F4F6;
  transition: background .1s;
}

.dash-table tbody tr:last-child { border-bottom: none; }
.dash-table tbody tr:nth-child(even) { background: #FAFAFA; }
.dash-table tbody tr:hover { background: var(--primary-light, #EEF2FF) !important; }

.dash-table td {
  padding: 10px 14px;
  vertical-align: middle;
  color: #374151;
}

.dash-table td.dash-id {
  font-weight: 700;
  color: var(--primary);
  width: 1%;
  white-space: nowrap;
}

.dash-table td.dash-date {
  white-space: nowrap;
  font-size: .84rem;
  color: #6B7280;
  width: 1%;
}

/* "Schmale" Spalten (Fallnummer, ggf. weitere kurze Felder) — shrink-to-content,
   damit der freie Platz den Text-/Status-/Aktion-Spalten zugutekommt. Padding
   wird reduziert, weil der Header (uppercase + letter-spacing) sonst die
   Mindestbreite auf ~108px hochzieht. */
.dash-table td.dash-col-narrow,
.dash-table th.dash-col-narrow {
  width: 1%;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}

/* Aktion-Spalte ist in allen dash-table-Views immer die letzte Spalte.
   Shrink auf Button-Breite — der Button selbst hat schon `white-space:nowrap`,
   wir vermeiden hier aber nowrap am td, damit `.small-note` (Hinweistext)
   weiter umbrechen darf und die Spalte nicht künstlich breit zieht. */
.dash-table th:last-child,
.dash-table td:last-child {
  width: 1%;
}

.dash-table td.dash-notes {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6B7280;
  font-size: .85rem;
  position: relative;
  cursor: default;
}
.dash-table td.dash-notes:not([title=""]):hover {
  z-index: 10;
}
.dash-table td.dash-notes:not([title=""]):hover::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 250px;
  max-width: 400px;
  padding: .5rem .75rem;
  background: #1F2937;
  color: #fff;
  font-size: .82rem;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 100;
  pointer-events: none;
}

/* Status badges */
.dash-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.dash-status.ds-open     { background: #DBEAFE; color: #1D4ED8; }
.dash-status.ds-progress { background: #FEF3C7; color: #92400E; }
.dash-status.ds-resolved { background: #D1FAE5; color: #065F46; }
.dash-status.ds-rejected { background: #FEE2E2; color: #991B1B; }
.dash-status.ds-neutral  { background: #F3F4F6; color: #6B7280; }
.dash-status.ds-incomplete { background: #FEF3C7; color: #92400E; }

/* Payment-Badge — eigener Pill statt dash-status-Mischmasch, damit
   Label + Betrag im selben Element optisch sauber zweigeteilt sind. */
.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: 3px 4px 3px 10px;   /* rechts schmaler — Amount-Sektion polstert selbst */
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
    margin-left: .3em;
}
.pay-badge__icon { font-size: .85em; opacity: .9; }
.pay-badge__label { letter-spacing: .01em; }
.pay-badge__amount {
    padding: 1px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.pay-badge--paid     { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.pay-badge--pending  { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.pay-badge--canceled { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.pay-badge--failed   { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
.pay-badge--init     { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }

/* Re-Try-Button passt zum failed/canceled-Status der Bezahl-Badge. */
.pay-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: 3px 10px;
    border-radius: 20px;
    background: #F59E0B;
    color: #FFF;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: .3em;
    border: 1px solid #D97706;
    transition: background .15s ease;
}
.pay-retry-btn:hover { background: #D97706; color: #FFF; }

/* Citizen-Data-Badge (Open Banking / Tink) — analog zur Payment-Badge,
   eigene Farbpalette damit Bürger Zahlung und Bankdaten-Abruf nicht
   verwechselt. */
.citizen-badge {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
    margin-left: .3em;
}
.citizen-badge__icon { font-size: .85em; opacity: .9; }
.citizen-badge__label { letter-spacing: .01em; }
.citizen-badge--fetched  { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.citizen-badge--pending  { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.citizen-badge--declined { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.citizen-badge--expired  { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.citizen-badge--revoked  { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }

/* Cluster: Badge + dezente Text-Links untereinander. Hält die Status-Spalte
   kompakt — kein zweiter prominenter Button neben dem Status-Badge. */
.citizen-cluster {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15em;
    margin-left: .3em;
    vertical-align: middle;
}
.citizen-cluster .citizen-badge {
    margin-left: 0;
}
.citizen-cluster .inline-form {
    margin: 0;
    display: inline;
}

/* Sekundär-Aktionen als reine Text-Links — bewusst KEINE Buttons,
   damit die Status-Zelle nicht überladen wirkt. */
.citizen-link {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    font-size: .72rem;
    font-weight: 500;
    color: #1D4ED8;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, .35);
    text-underline-offset: 2px;
    cursor: pointer;
    line-height: 1.2;
}
.citizen-link:hover {
    color: #1E3A8A;
    text-decoration-color: currentColor;
}
.citizen-link--danger {
    color: #991B1B;
    text-decoration-color: rgba(153, 27, 27, .35);
}
.citizen-link--danger:hover {
    color: #7F1D1D;
}

/* DSGVO-Transparenz-Aufklapp: Bürger klickt aufs Badge und sieht, welche
   konkreten Bankdaten die Behörde einsehen kann, bevor er entscheidet,
   ob er widerruft. Damit ist der Widerrufen-Knopf KEIN blindes Element
   mehr in der Status-Spalte. */
.citizen-disclosure {
    display: inline-block;
    vertical-align: middle;
}
.citizen-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    user-select: none;
}
.citizen-disclosure > summary::-webkit-details-marker {
    display: none;
}
.citizen-disclosure__hint {
    font-size: .7rem;
    color: #1D4ED8;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, .35);
    text-underline-offset: 2px;
}
.citizen-disclosure[open] .citizen-disclosure__hint {
    color: #1E3A8A;
}
.citizen-disclosure__body {
    margin-top: .5rem;
    padding: .75rem 1rem;
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 8px;
    font-size: .85rem;
    min-width: 280px;
    max-width: 420px;
    color: #1E3A8A;
}
.citizen-disclosure__intro {
    margin: 0 0 .5rem 0;
    font-size: .8rem;
    color: #1E40AF;
}
.citizen-disclosure__list {
    margin: 0 0 .75rem 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .75rem;
    row-gap: .25rem;
}
.citizen-disclosure__list dt {
    color: #6B7280;
    font-weight: 500;
}
.citizen-disclosure__list dd {
    margin: 0;
    color: #111827;
}
.citizen-disclosure__list dd.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.dash-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 6px 14px !important;
  background: var(--primary);
  color: #fff !important;
  border: none;
  border-radius: 7px;
  font-size: .875rem !important;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transform: none !important;
}

.dash-action-btn:hover { background: var(--primary-dark); color: #fff; }
a.dash-action-btn { color: #fff !important; text-decoration: none; font-size: .82rem; }

/* Aktions-Spalte: alle Buttons einheitlich breit. Die Spalte ist width:1%
   (shrink-to-fit auf den breitesten Button); mit width:100% wird jeder Button
   so breit wie die Spalte -> alle gleich breit, Spalte bleibt kompakt.
   Gilt für <a>- und <button>-Varianten (Letztere im inline-form-Wrapper). */
/* Der <button> steckt in einem .inline-form-Wrapper. Ein display:block-Wrapper
   füllt in einer auto-Layout-Tabellenzelle die Spalte NICHT zuverlässig (das
   %-width des Blocks löst gegen die Button-Textbreite auf, nicht gegen die
   Spalte) und bringt zudem einen vertikalen Default-Margin mit -> Fortsetzen-
   Button war schmaler UND in einer höheren Zelle als die <a>-Variante.
   display:contents nimmt den Wrapper aus dem Box-Baum: der Button liegt dann
   direkt in der Zelle wie die <a>-Variante, sein width:100% greift korrekt. */
.dash-table td:last-child .inline-form { display: contents; }
.dash-table td:last-child .dash-action-btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Einheitliche Größe für ALLE dash-action-btn — auch die <button>-Variante
   (z.B. „Fortsetzen"). Der globale Reset `body:not(.admin-body) button`
   (~Z. 351) setzt font-size/padding mit !important UND höherer Spezifität als
   `.dash-action-btn` -> <button> wurde größer als die <a>-Variante („Ansehen"),
   die den kompakten Stil behielt. Diese Regel hat höhere Spezifität als der
   globale Reset (2 Klassen vs. 1) und zwingt beide auf dieselbe Größe. */
body:not(.admin-body) .dash-action-btn {
  padding: 6px 14px !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
}

.dash-dash { color: #D1D5DB; font-size: 1.1rem; }

.dash-shared-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #EEF2FF; color: #4338CA; border: 1px solid #A5B4FC;
  padding: .15rem .45rem; border-radius: 99px; margin-left: .4rem;
  white-space: nowrap;
}
.dash-overdue-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B;
  padding: .15rem .45rem; border-radius: 99px; margin-left: .4rem;
  white-space: nowrap;
}
/* Auto-Löschungs-Countdown („verschwindet bald") — DSGVO-Aufbewahrung. */
.dash-retention-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #E0E7FF; color: #3730A3; border: 1px solid #818CF8;
  padding: .15rem .45rem; border-radius: 99px; margin-left: .4rem;
  white-space: nowrap;
}
.dash-retention-badge--overdue {
  background: #FEE2E2; color: #991B1B; border-color: #EF4444;
}

.dash-reminder-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 600;
  background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B;
  padding: .3rem .6rem; border-radius: 6px; cursor: pointer;
  margin-top: .35rem; transition: background .15s;
}
.dash-reminder-btn:hover { background: #FDE68A; }

.dash-reminded-info {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600;
  color: #065F46; background: #D1FAE5; border: 1px solid #6EE7B7;
  padding: .2rem .5rem; border-radius: 6px; margin-top: .3rem;
}

.ov-new-antrag {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-start;
}

.ov-new-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.ov-new-btn:hover { background: var(--primary-dark); }

.dash-section-divider {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 2rem 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.dash-pagination {
  display: flex;
  gap: .4rem;
  justify-content: center;
  margin-top: 1rem;
}

.dash-page-btn {
  padding: 5px 12px;
  border: 1px solid #D1D5DB;
  background: #fff;
  border-radius: 6px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.dash-page-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.dash-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.dash-page-btn:disabled { opacity: .4; cursor: default; }

/* Modal */
#confirmModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

#confirmModal.active { display: flex; }

#confirmModal .modal-inner {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.modal-icon {
  width: 48px;
  height: 48px;
  background: #FEF3C7;
  color: #D97706;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

#confirmModal h3 {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.6;
}

.modal-btn-row {
  display: flex;
  gap: .75rem;
}

.modal-btn-confirm {
  flex: 1;
  padding: 10px;
  background: #16A34A;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.modal-btn-confirm:hover { background: #15803D; }

.modal-btn-cancel {
  flex: 1;
  padding: 10px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.modal-btn-cancel:hover { background: #E5E7EB; }

.ticket-form { margin: 0; }
.ticket-form button { white-space: nowrap; }

.status-message {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius, 8px);
  font-weight: 500;
}

.status-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

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

.page-header .breadcrumb {
  font-size: 0.9rem;
  color: #666;
}

.page-header .breadcrumb a {
  color: #0056b3;
  text-decoration: none;
}

.clerk-info-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius, 8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.clerk-info-card h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.clerk-info-card .email {
  color: #666;
  font-size: 0.95rem;
}

.permissions-card {
  background: white;
  border-radius: var(--border-radius, 8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.permissions-card .card-header {
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  color: #333;
}

.permissions-card .card-body {
  padding: 1.5rem;
}

.form-check {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.form-check:hover {
  background-color: #f8f9fa;
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin-right: 0.75rem;
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-label img {
  height: 24px !important;
  width: auto !important;
  max-width: 40px !important;
  object-fit: contain !important;
  margin-right: 5px;
}

.portal-badge {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: white;
}

.portal-type-text {
  font-size: 0.85rem;
  color: #666;
}

.super-admin-section {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.super-admin-section .form-check {
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
}

.super-admin-section .form-check:hover {
  background: rgba(255, 255, 255, 0.2);
}

.super-admin-section .form-check-label {
  color: white;
}

.super-admin-section .form-text {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius, 6px);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: var(--primary-color, #0056b3);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark, #004494);
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.action-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

.ticket-container {
  border: 1px solid #ccc;
  padding: 1em;
  margin-bottom: 2em;
}

.section {
  margin-bottom: 1.5em;
  padding: 1em;
  border-radius: 5px;
}

h3.section-title {
  margin-top: 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5em;
}

.data-row {
  display: flex;
  margin-bottom: 0.5em;
}

.data-label {
  font-weight: bold;
  min-width: 200px;
}

.week-booking {
  display: inline-block;
  margin-right: 1em;
  padding: 0.3em 0.6em;
  border-radius: 3px;
}

.frueh-booking {
  font-weight: bold;
}

/* Document Preview Modal */
#documentPreviewModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
}

#documentPreviewModal .modal-content {
  background: white;
  margin: 2% auto;
  width: 90%;
  max-width: 1200px;
  height: 90%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#documentPreviewModal .modal-header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

#documentPreviewModal .modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#documentPreviewModal .document-list {
  width: 250px;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  padding: 10px;
}

#documentPreviewModal .document-item {
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 4px;
  background: #f5f5f5;
}

#documentPreviewModal .document-item:hover,
#documentPreviewModal .document-item.active {
  background: #e0f7fa;
}

#documentPreviewModal .pdf-viewer {
  flex: 1;
  padding: 10px;
}

#documentPreviewModal #pdfViewer {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#documentPreviewModal .modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#documentPreviewModal .btn-confirm {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

#documentPreviewModal .btn-confirm:hover {
  background: #218838;
}

#documentPreviewModal .btn-cancel {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

#documentPreviewModal .btn-cancel:hover {
  background: #5a6268;
}

#documentPreviewModal .loading {
  text-align: center;
  padding: 50px;
  font-size: 18px;
  color: #666;
}

#documentPreviewModal .error {
  text-align: center;
  padding: 50px;
  color: #dc3545;
}

/* Document generation overlay */
#docGenerationOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.doc-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: docSpin 0.8s linear infinite;
}
@keyframes docSpin { to { transform: rotate(360deg); } }
.doc-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 2px;
  animation: docProgress 8s ease-out forwards;
}
@keyframes docProgress {
  0%   { width: 0%; }
  30%  { width: 40%; }
  60%  { width: 65%; }
  80%  { width: 80%; }
  100% { width: 95%; }
}

/* Fix badge wrapping in table */
.user-table .badge {
  white-space: normal !important;
  display: inline-block;
  height: auto;
  text-align: left;
  line-height: 1.2;
  padding: 5px 8px;
  max-width: 250px;
  /* Optional: limit width to force better wrapping */
  margin-bottom: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius, 6px);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: var(--primary-color, #0056b3);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark, #004494);
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
}

.user-table th,
.user-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.user-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.user-table tr:last-child td {
  border-bottom: none;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Modal Styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius, 8px);
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

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

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-text {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
}

.rule-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5em;
  display: none;
}

.rule-list li::before {
  content: "🔴";
  margin-right: 0.5em;
  color: red;
}

.rule-list li.valid::before {
  content: "🟢";
  color: green;
}

.aufsicht-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: .75rem;
  /* Cells start at the top so a taller file cell (with persistent preview chip
     hanging below the input) doesn't push neighboring text inputs down. */
  align-items: start;
  margin-top: .5rem;
}

.aufsicht-row .sub-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.aufsicht-row label {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.aufsicht-row input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 0 !important;
}

/* File cell — visual order Label → File-Input → Persistent-Chip via flex `order`,
   so the input always sits flush under the label (same baseline as text-input
   cells). The chip dangles underneath without affecting neighbor cells.
   Empty preview-container is hidden so it doesn't reserve space. */
.aufsicht-row .sub-field--file > label                                 { order: 0; }
.aufsicht-row .sub-field--file > .preview-container                    { order: 1; }
.aufsicht-row .sub-field--file > input[type="file"]                    { order: 2; }
.aufsicht-row .sub-field--file > .array-file-preview.persistent-preview { order: 3; margin-top: .35rem; }
.aufsicht-row .sub-field--file > .preview-container:empty              { display: none; }

/* Single global hint above all rows of an array-list with file sub-fields. */
.array-list-hint {
  font-size: .75rem;
  color: #6B7280;
  margin: .25rem 0 .65rem;
}

.aufsicht-row button.removeAufsichtBtn {
  /* height/margin managed via flex container to guarantee pixel perfection */
  padding: 0.4rem 0.8rem;
  border: none;
  background-color: #dc3545;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  height: 40px;
  /* Force identical explicit default height as an unstyled input field box just in case */
}

.aufsicht-row button.removeAufsichtBtn:hover {
  background-color: #bb2d3b;
}

@media (max-width: 900px) {
  .aufsicht-row {
    grid-template-columns: 1fr;
  }

  .aufsicht-row button.removeAufsichtBtn {
    width: 100%;
  }
}

.flag small {
  display: block;
  margin: .25rem 0 1.25rem;
  font-size: .75rem;
  color: #6c757d;
  line-height: 1.4;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.form-row .form-field label {
  display: block;
  /* font-weight: 600; */
  margin-bottom: .25rem;
}

.form-row .form-field label {
  font-weight: normal !important;
}


.form-row .form-field input,
.form-row .form-field textarea,
.form-row .form-field select {
  width: 100%;
  box-sizing: border-box;
}

:root {
  --wf-primary: #10b981;
  --wf-primary-hover: #059669;
  --wf-bg: #f0fdfa;
  --wf-border: #ccfbf1;
  --wf-text: #1f2937;
  --wf-label: #6b7280;
  --control-height: 40px;
}

body {
  background: #f8fafc;
  color: var(--wf-text);
}

.main-header {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: white;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Workflow Steps */
.step-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.step-header {
  background: #fff;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
}

.step-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: #111827;
}

.step-id {
  font-family: monospace;
  color: #64748b;
  font-size: 0.8rem;
  background: #f1f5f9;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-left: 0.75rem;
  font-weight: 600;
}

/* Standardized Form Controls - FORCE PARITY */
.wf-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--wf-label);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
  letter-spacing: 0.05em;
  height: 1rem;
  line-height: 1rem;
}

.wf-control {
  display: block;
  width: 100%;
  height: var(--control-height) !important;
  padding: 0 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: var(--control-height) !important;
  color: var(--wf-text) !important;
  background-color: var(--wf-bg) !important;
  border: 1px solid var(--wf-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}

.wf-control:focus {
  background-color: #fff !important;
  border-color: var(--wf-primary) !important;
  outline: 0 !important;
}

.wf-control:read-only {
  background-color: var(--wf-bg) !important;
  border-color: var(--wf-border) !important;
  opacity: 1 !important;
  cursor: default !important;
}

textarea.wf-control {
  height: auto !important;
  min-height: var(--control-height) !important;
  line-height: 1.5 !important;
  padding: 0.6rem 0.85rem !important;
}

select.wf-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1.25em 1.25em !important;
}

/* Buttons matching the theme */
.btn-wf-primary {
  background-color: var(--wf-primary);
  color: white;
  border: none;
  height: var(--control-height);
  padding: 0 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.btn-wf-primary:hover {
  background-color: var(--wf-primary-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-wf-primary:active {
  transform: translateY(0);
}

.btn-wf-outline {
  background-color: transparent;
  color: var(--wf-primary);
  border: 1px solid var(--wf-primary);
  height: var(--control-height);
  padding: 0 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.btn-wf-outline:hover {
  background-color: var(--wf-bg);
  color: var(--wf-primary-hover);
  border-color: var(--wf-primary-hover);
}

.btn-wf-danger {
  background-color: #ef4444;
  color: white !important;
  border: none;
  height: var(--control-height);
  padding: 0 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.btn-wf-danger:hover {
  background-color: #dc2626;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-separator {
  margin: 2.5rem 0 1.5rem;
  border-top: 1px solid #e2e8f0;
  position: relative;
}

.section-label {
  position: absolute;
  top: -10px;
  left: 1.5rem;
  background: #f8fafc;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.action-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: #fff;
  overflow: hidden;
  transition: all 0.3s;
}

.action-header {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.action-header:hover {
  background: #f8fafc;
}

.status-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  margin-left: auto;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.status-badge.open {
  background: #ecfdf5;
  color: #059669;
  border-color: #d1fae5;
}

.status-badge.closed {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fee2e2;
}

.status-badge.neutral {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}

.config-panel {
  background: #fff;
  padding: 1.5rem;
  border-top: 1px solid #f1f5f9;
}

.fields-container {
  background: #f8fafc;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.field-item {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

:root {
  --card-border-color: #e2e8f0;
  --card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --primary-color: #3b82f6;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --bg-installed: #f1f5f9;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-bottom: 2rem;
}

.app-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-card {
  background: white;
  border: 1px solid var(--card-border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Grid View Hover */
.app-grid:not(.list-view) .app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
  border-color: transparent;
}

/* List View Specifics */
.list-view .app-card {
  flex-direction: row;
  align-items: center;
  height: auto;
  padding: 1rem 1.5rem;
}

.app-card.installed {
  background-color: var(--bg-installed);
  border-style: dashed;
}

.app-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list-view .app-card-body {
  flex-direction: row;
  padding: 0;
  align-items: center;
  width: 100%;
}

.app-icon-placeholder {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #64748b;
}

.list-view .app-icon-placeholder {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  margin-bottom: 0;
  margin-right: 1.25rem;
}

.app-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list-view .app-content-wrapper {
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.app-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-main);
  line-height: 1.4;
}

.list-view .app-title {
  margin-bottom: 0;
  width: 25%;
  min-width: 200px;
}

.app-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.list-view .app-desc {
  margin-bottom: 0;
  width: 40%;
  padding-right: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-meta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-view .app-meta {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-left: auto;
  width: auto;
}

.slug-badge {
  background: #f1f5f9;
  color: #64748b;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.installed {
  background-color: #dcfce7;
  /* green-100 */
  color: #166534;
  /* green-800 */
}

/* Form Check */
.custom-check {
  width: 1.25rem;
  height: 1.25rem;
  border-color: #cbd5e1;
  cursor: pointer;
}

.list-view .checkbox-wrapper {
  margin-right: 1.5rem;
}

/* Sticky Actions Bar */
.sticky-actions {
  position: sticky;
  top: 1rem;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
  height: 66px;
}

.search-group {
  position: relative;
  flex: 0 0 400px;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.search-input {
  padding-left: 3.5rem !important;
  /* Increased from 2.75rem to prevent overlap */
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  height: 42px !important;
  /* Force matched height */
  margin: 0 !important;
  /* Remove any potential default margins */
  background-color: white !important;
}

.view-toggles {
  flex-shrink: 0;
}

.view-toggles .btn {
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  width: 42px !important;
  /* Match Input Height */
  height: 42px !important;
  /* Match Input Height */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: white !important;
  border-radius: 6px !important;
  margin-right: -1px;
}

.view-toggles .btn i {
  font-size: 1.1rem;
  line-height: 1;
}

.view-toggles .btn.active {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border-color: #94a3b8 !important;
  z-index: 1;
}

.view-toggles .btn:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  z-index: 2;
}

.action-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-install {
  background-color: #2563eb !important;
  color: white !important;
  border: none !important;
  height: 42px !important;
  /* Match Input Height */
  padding: 0 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: background 0.2s;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}

.btn-install:hover:not(:disabled) {
  background-color: #1d4ed8 !important;
}

.btn-install:disabled {
  background-color: #94a3b8 !important;
  opacity: 0.7;
}

.custom-check {
  width: 1.25rem;
  height: 1.25rem;
  border-color: #cbd5e1;
  cursor: pointer;
  margin: 0 !important;
  /* Reset component margins */
}

body {
  background: #f5f7fa;
}

.main-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toolbar {
  background: white;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toolbar button {
  margin-right: 0.5rem;
}

.editor-tabs {
  background: white;
  border-bottom: 1px solid #dee2e6;
}

.editor-tabs .nav-link {
  color: #6c757d;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1rem 1.5rem;
  transition: all 0.2s;
}

.editor-tabs .nav-link:hover {
  background: #f8f9fa;
  color: #495057;
}

.editor-tabs .nav-link.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background: white;
  font-weight: 600;
}

.section-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.section-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1rem 1.5rem;
  border-bottom: 2px solid #dee2e6;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  user-select: none;
  color: #212529;
}

.section-header:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.section-header .grip {
  color: #adb5bd;
  font-size: 1.2rem;
  margin-right: 1rem;
  cursor: grab;
}

.section-header .grip:active {
  cursor: grabbing;
}

.section-header h5 {
  color: #212529;
}

.section-toolbar {
  background: #f8f9fa;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.field-item {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.75rem 0;
  transition: all 0.2s;
  position: relative;
}

.field-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #ced4da;
  transform: translateY(-2px);
}

.field-item.editing {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.field-item .field-handle {
  color: #adb5bd;
  margin-right: 1rem;
  cursor: grab;
  font-size: 1.1rem;
}

.field-item .field-handle:active {
  cursor: grabbing;
}

.field-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.field-icon i {
  font-size: 1.5rem;
  color: #1976d2;
}

.inline-editor {
  background: #f0f4ff;
  border: 2px solid #667eea;
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 0.75rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: 0;
  }
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  min-width: 180px;
  z-index: 9999;
}

.context-menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.1s;
  display: flex;
  align-items: center;
}

.context-menu-item:hover {
  background: #f8f9fa;
  color: #667eea;
}

.context-menu-item i {
  margin-right: 0.75rem;
  width: 16px;
}

.context-menu-divider {
  height: 1px;
  background: #dee2e6;
  margin: 0.5rem 0;
}

.field-type-card {
  position: relative;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.field-type-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.field-type-card.selected {
  border-color: #667eea;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.field-type-icon {
  font-size: 2rem;
  color: #667eea;
  margin-bottom: 0.5rem;
}

.field-type-card.selected .field-type-icon {
  color: #5568d3;
}

.field-type-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
}

.field-type-card.selected .field-type-label {
  color: #212529;
  font-weight: 600;
}

.selected-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #28a745;
  font-size: 1.25rem;
}

.preview-panel {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #6c757d;
}

.empty-state i {
  font-size: 4rem;
  color: #dee2e6;
  margin-bottom: 1rem;
}

.drag-ghost {
  opacity: 0.5;
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* ── FormBuilder Modern Design ───────────────────────── */

fieldset {
  border: none;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 0 11px rgba(0,0,0,0.07);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

/* Abschnitts-Beschriftung als Überschrift über der Feldgruppe.
 *
 * `float: left` ist hier kein Layout-Trick um seiner selbst willen, sondern die
 * einzige verlässliche Art, ein <legend> in den normalen Textfluss zu holen:
 * Ohne Float setzt der Browser es IN den border des <fieldset> und damit
 * ausserhalb des Fieldset-Paddings. Mit `width: 100%` ragte die Beschriftung
 * dadurch seitlich über den Container hinaus und lag optisch auf dessen Kante —
 * gut sichtbar an der blauen Unterlinie, die links vor dem Rahmen begann.
 *
 * Der Float braucht ein `clear` am Folgeelement, sonst rutschen die ersten
 * Felder neben die Beschriftung. Fieldsets, deren Beschriftung bewusst IM
 * Rahmen sitzen soll (sichtbarer Border, `width: auto`), nehmen den Float
 * ausdrücklich zurück — s. unten. */
legend {
  float: left;
  width: 100%;
  padding: 0 0 0.65rem;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark, #1a1a1a);
  border-bottom: 2px solid var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

legend + * {
  clear: both;
}

.fields-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 1.25rem;
}

.form-field-wrapper {
  flex: 0 0 100%;
  box-sizing: border-box;
  min-width: 0;
}

.form-field-wrapper.half-width {
  flex: 0 0 calc(50% - 0.75rem);
  max-width: calc(50% - 0.75rem);
}

.form-field-wrapper.one-third {
  flex: 0 0 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}

@media (max-width: 900px) {
  .form-field-wrapper.one-third { flex: 0 0 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); }
}
@media (max-width: 600px) {
  .form-field-wrapper.half-width,
  .form-field-wrapper.one-third { flex: 0 0 100%; max-width: 100%; }
}

/* === B4: Pflichtfeld-Markierung & Inline-Validierungsfehler === */
.required-marker {
  color: var(--danger-red, #EF4444);
  margin-left: 2px;
  font-weight: 700;
}
.form-field-wrapper.has-error input,
.form-field-wrapper.has-error select,
.form-field-wrapper.has-error textarea {
  border-color: var(--danger-red, #EF4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.form-field-wrapper.has-error label {
  color: var(--danger-red, #EF4444);
}
.form-field-wrapper .field-error {
  margin-top: 0.35rem;
  padding: 0.35rem 0.55rem;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--danger-red, #EF4444);
  color: #991b1b;
  font-size: 0.82rem;
  line-height: 1.35;
  border-radius: 3px;
}

/* File upload */
.upload-inline {
  margin-top: 0.25rem;
  padding: 0.9rem 1rem;
  background: var(--formfield-bg);
  border: 1.5px dashed var(--primary);
  border-radius: 8px;
}

.upload-inline label {
  font-weight: 600;
  font-size: 0.88rem;
  color: #374151;
  display: block;
  margin-bottom: 0.4rem;
}

/* Subheadline */
h4 {
  width: 100%;
  margin: 0.5rem 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark, #1a1a1a);
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 0.5rem;
}

h5 {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1F2937;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.4rem;
  display: block;
}

/* Field group sub-card */
.field-group {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  padding: 1.25rem;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 1rem;
  width: 100%;
}

.field-group h5 {
  width: 100%;
  margin: 0 0 0.75rem;
  color: var(--primary);
  font-size: 0.9rem;
}

.field-group .form-field-wrapper { flex: 0 0 100%; }
.field-group .form-field-wrapper.half-width { flex: 0 0 calc(50% - 0.75rem); }
.field-group .form-field-wrapper.one-third  { flex: 0 0 calc(33.333% - 1rem); }

/* Radio options – pill style */
.flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.flags-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  font-size: 0.88rem;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  margin: 0;
}

.flags-row label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-bg-alpha);
  color: var(--primary);
}

.flags-row input[type="radio"] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* Array rows */
.array-item {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.array-item .sub-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.array-item .sub-field > label {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

/* Zellen einer Wiederholungszeile.

   ANKER IST `.sub-field`, NICHT die Zeilenklasse. Die Zeilenklasse ist über
   `row_class` je Leistung frei setzbar (Standard `array-item`, der
   Dienstreiseantrag nutzt `mitreisende-row`). Hing die Regel an `.array-item`,
   blieb jede Liste mit eigener `row_class` komplett ungestylt — Eingaben und
   Dropdowns fielen auf die globale Feldregel zurueck und standen dort in
   unterschiedlicher Hoehe nebeneinander. `.sub-field` erzeugt ausschliesslich
   der array_list-Zweig des FormBuilder, greift also genau hier und ueberall.

   Die Typenliste MUSS jeden Unterfeld-Typ nennen, den der Baukasten rendern
   kann: ein fehlender faellt ebenfalls auf die globale Regel zurueck (padding
   0.8rem, font-size 1rem, margin-bottom 1rem) und steht hoeher als seine
   Nachbarn. Ausnahme `textarea` — die braucht eine variable Hoehe, feste 40px
   machten daraus ein einzeiliges Scrollfeld. */
.sub-field input[type="text"],
.sub-field input[type="number"],
.sub-field input[type="email"],
.sub-field input[type="tel"],
.sub-field input[type="date"],
.sub-field input[type="time"],
.sub-field input[type="file"],
.sub-field select {
  width: 100%;
  height: 40px;
  padding: 0.45rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* File cell: persistent preview chip dangles below without pushing
   the file input out of alignment. Empty preview-container is hidden. */
.array-item .sub-field--file > label                                 { order: 0; }
.array-item .sub-field--file > .preview-container                    { order: 1; }
.array-item .sub-field--file > input[type="file"]                    { order: 2; }
.array-item .sub-field--file > .array-file-preview.persistent-preview { order: 3; margin-top: .35rem; }
.array-item .sub-field--file > .preview-container:empty              { display: none; }

.array-item .sub-field button.btn-remove,
.array-item .sub-field button.removeAufsichtBtn {
  height: 40px;
  box-sizing: border-box;
}

.btn-remove {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  border-radius: 6px;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.15s;
  height: 100%;
}

.btn-remove:hover {
  background: #FEE2E2;
}

.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 1rem;
  margin-top: 0.5rem;
  background: #fff;
  color: var(--primary);
  border: 1.5px dashed var(--primary);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-add:hover {
  background: var(--primary-bg-alpha);
}

/* Notice / Info box */
.notice-box {
  margin: 0.25rem 0 0.25rem;
  padding: 0.85rem 1.1rem;
  background: var(--primary-bg-alpha);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1F2937;
}

/* Checkbox */
.check-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: #374151;
  line-height: 1.5;
}

.check-inline input[type="checkbox"] {
  accent-color: var(--primary);
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Site Header – Two-Zone (Citizen) ───────────────── */
.site-header {
  background: #0A1A3F;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

/* Zone 1: Brand + User */
.site-header-topbar {
  height: 48px;
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Zone 2: Navigation */
.site-header-navzone {
  height: 38px;
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  gap: 0.25rem;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-brand:hover { text-decoration: none; }

.site-brand-logo {
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.site-brand-icon {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.site-brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}

.site-header-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.user-name {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.site-logout-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.site-logout-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

/* Nav links (zone 2) */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.site-nav-link,
.site-nav-link:link,
.site-nav-link:visited {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 5px;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.site-nav-link:hover,
.site-nav-link:active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  text-decoration: none;
}
.site-nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  font-weight: 600;
}
.site-nav-link.active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: #fff;
  border-radius: 2px 2px 0 0;
}
.site-nav-link { position: relative; }

/* ── Site Footer ─────────────────────────────────────── */
.site-footer {
  background: #0A1A3F;
  padding: 1rem 0;
}
.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.site-footer-links {
  display: flex;
  gap: 1.5rem;
}
.site-footer-links a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer-links a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* ── Clerk Sidebar Layout ────────────────────────────── */
.clerk-layout {
  display: flex;
  min-height: 100vh;
}

.clerk-sidebar {
  --sidebar-x: 1.25rem;
  width: 240px;
  flex-shrink: 0;
  background: #0A1A3F;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
}

.clerk-main {
  margin-left: 240px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.clerk-main main {
  flex: 1;
  padding: 2rem;
  max-width: none !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
.clerk-main .site-footer {
  margin-top: auto;
}

/* Sidebar: brand (Variant A — Logo zentriert, Mandantenname als Subline darunter)
   Logo-Frame ist aspect-ratio-aware: quadratische Wappen werden bis 56px hoch,
   wide wordmarks füllen die Breite. Beide wirken dadurch ähnlich gewichtet. */
.clerk-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem var(--sidebar-x);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  min-width: 0;
  text-align: center;
}
.clerk-sidebar-brand:hover { text-decoration: none; }
.clerk-sidebar-brand .site-brand-logo {
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.clerk-sidebar-brand .site-brand-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.clerk-sidebar-brand .site-brand-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar: Betriebsart-Hinweis (OF-6). Nur im Modulbetrieb gerendert — er sagt,
   dass das Antragsportal abgeschaltet ist, damit niemand die fehlende
   Leistungskonfiguration für einen Fehler hält. Ruhig gehalten: Dauerzustand,
   kein Alarm. */
.clerk-sidebar-betriebsart {
  margin: 0;
  padding: 0.7rem var(--sidebar-x);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.clerk-sidebar-betriebsart i {
  margin-top: 0.15rem;
  flex-shrink: 0;
  opacity: 0.75;
}

.clerk-sidebar-link,
.clerk-sidebar-link:link,
.clerk-sidebar-link:visited {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem var(--sidebar-x);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-radius: 0;
  position: relative;
}
.clerk-sidebar-link i {
  width: 16px;
  min-width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.82rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s;
}
.clerk-sidebar-link:hover,
.clerk-sidebar-link:hover i {
  background: rgba(255, 255, 255, 0.10);
  color: #fff !important;
  text-decoration: none;
}
.clerk-sidebar-link.active,
.clerk-sidebar-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  font-weight: 600;
}
.clerk-sidebar-link.active i,
.clerk-sidebar-link[aria-current="page"] i { color: #fff; }
.clerk-sidebar-link.active::before,
.clerk-sidebar-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary-accent, #fff);
}

/* Keyboard focus — visible on every interactive sidebar element */
.clerk-sidebar a:focus-visible,
.clerk-sidebar button:focus-visible {
  outline: 2px solid var(--primary-accent, #fff);
  outline-offset: -2px;
  border-radius: 2px;
}

/* Sidebar: section label */
.clerk-sidebar-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.6rem 0 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.clerk-sidebar-body > .clerk-sidebar-section:first-child {
  border-top: none;
  padding-top: 0.75rem;
}
.clerk-sidebar-section-title {
  margin: 0;
  padding: 0.5rem var(--sidebar-x) 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

/* Sidebar: collapsible section — native <details>/<summary>, kein JS für das
   Auf-/Zuklappen nötig (Persistenz separat via localStorage). */
details.clerk-sidebar-section > summary.clerk-sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
details.clerk-sidebar-section > summary.clerk-sidebar-section-title::-webkit-details-marker {
  display: none;
}
details.clerk-sidebar-section > summary.clerk-sidebar-section-title:hover {
  color: rgba(255, 255, 255, 0.75);
}
.clerk-sidebar-section-title-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clerk-sidebar-section-toggle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}
details.clerk-sidebar-section:not([open]) > summary .clerk-sidebar-section-toggle {
  transform: rotate(-90deg);
}

/* Section-level badge in der summary — nur sichtbar wenn eingeklappt, damit es
   beim Aufklappen nicht mit den Per-Item-Badges doppelt. */
.clerk-sidebar-section-badge {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
details.clerk-sidebar-section[open] > summary .clerk-sidebar-section-badge {
  display: none;
}

/* Sidebar: Sub-Gruppen-Label innerhalb einer Sektion (z.B. Verwaltung →
   Zugriff / Inhalte & Strecken / System). Leiser als die Sektions-Überschrift. */
.clerk-sidebar-subsection-title {
  margin: 0.45rem 0 0.05rem;
  padding: 0.2rem var(--sidebar-x) 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
}
.clerk-sidebar-subsection-title:first-of-type {
  margin-top: 0.15rem;
}

/* Sidebar: Antragsportale nach Leistungskategorie gruppiert, je Kategorie
   einklappbar (Ticket #4). Optik leiser als die Sektions-Überschrift; nutzt
   dieselbe <details>/<summary>-Mechanik + Klappzustand-Persistenz. */
details.clerk-sidebar-subsection {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
summary.clerk-sidebar-subsection-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  margin: 0.35rem 0 0.1rem;
  padding: 0.2rem var(--sidebar-x) 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.36);
}
summary.clerk-sidebar-subsection-heading::-webkit-details-marker {
  display: none;
}
summary.clerk-sidebar-subsection-heading:hover {
  color: rgba(255, 255, 255, 0.6);
}
summary.clerk-sidebar-subsection-heading > i:first-child {
  font-size: 0.66rem;
  width: 0.9rem;
  text-align: center;
  flex-shrink: 0;
}
.clerk-sidebar-subsection-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
details.clerk-sidebar-subsection > summary .clerk-sidebar-section-toggle {
  font-size: 0.6rem;
}
details.clerk-sidebar-subsection:not([open]) > summary .clerk-sidebar-section-toggle {
  transform: rotate(-90deg);
}
details.clerk-sidebar-subsection[open] > summary .clerk-sidebar-section-badge {
  display: none;
}
/* Leistungen innerhalb einer Kategorie leicht einrücken (Hierarchie sichtbar). */
details.clerk-sidebar-subsection > .clerk-sidebar-link {
  padding-left: calc(var(--sidebar-x) + 0.6rem);
}

/* Sidebar: badge — neutral counter (not an alert color) */
.clerk-sidebar-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
.clerk-sidebar-link.active .clerk-sidebar-badge,
.clerk-sidebar-link[aria-current="page"] .clerk-sidebar-badge {
  background: rgba(255, 255, 255, 0.22);
}

/* Sidebar: scrollable body — only this scrolls; sidebar wrapper hides overflow */
.clerk-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.clerk-sidebar-body::-webkit-scrollbar { width: 4px; }
.clerk-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.clerk-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Sidebar: app dot — bigger, with subtle outline so weak accent colors stay visible on dark navy */
.clerk-sidebar-app-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  transition: transform 0.15s;
}
.clerk-sidebar-app-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-accent, #6c757d);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.clerk-sidebar-link:hover .clerk-sidebar-app-dot,
.clerk-sidebar-link.active .clerk-sidebar-app-dot,
.clerk-sidebar-link[aria-current="page"] .clerk-sidebar-app-dot {
  transform: scale(1.1);
}
.clerk-sidebar-app-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar: legal links (Impressum / Datenschutz) */
.clerk-sidebar-legal {
  padding: 0.5rem var(--sidebar-x);
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.clerk-sidebar-legal a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  text-decoration: none;
  transition: color 0.15s;
}
.clerk-sidebar-legal a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Sidebar: footer (user info + actions) — two rows so long names get full width */
.clerk-sidebar-footer {
  padding: 0.75rem var(--sidebar-x);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}
.clerk-sidebar-footer-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.clerk-sidebar-footer-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.clerk-sidebar-username {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar: unified icon-button (tour & logout share style) */
.clerk-sidebar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.clerk-sidebar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.32);
  text-decoration: none;
}
/* Intro.js tour overrides */
.omnia-tour-tooltip.introjs-tooltip {
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  font-family: inherit;
  max-width: 340px;
}
.omnia-tour-tooltip .introjs-tooltip-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.omnia-tour-tooltip .introjs-tooltiptext {
  font-size: .875rem;
  color: #374151;
  line-height: 1.6;
}
.omnia-tour-tooltip .introjs-button {
  border-radius: 6px;
  font-size: .8rem;
  padding: .35rem .8rem;
  text-shadow: none;
  border: none;
}
.omnia-tour-tooltip .introjs-nextbutton {
  background: #4f46e5;
  color: #fff;
}
.omnia-tour-tooltip .introjs-nextbutton:hover { background: #4338ca; }
.omnia-tour-tooltip .introjs-prevbutton {
  background: #f3f4f6;
  color: #374151;
}
.omnia-tour-tooltip .introjs-donebutton {
  background: #10b981;
  color: #fff;
}
.omnia-tour-tooltip .introjs-donebutton:hover { background: #059669; }
.omnia-tour-tooltip .introjs-progress { background: #e5e7eb; height: 4px; border-radius: 2px; }
.omnia-tour-tooltip .introjs-progressbar { background: #4f46e5; border-radius: 2px; }
/* Light theme icon buttons (tour + logout) */
body.theme-silver .clerk-sidebar-icon-btn,
body.theme-fog    .clerk-sidebar-icon-btn,
body.theme-pebble .clerk-sidebar-icon-btn {
  color: #4B5563 !important;
  border-color: rgba(0,0,0,0.15);
}
body.theme-silver .clerk-sidebar-icon-btn:hover,
body.theme-fog    .clerk-sidebar-icon-btn:hover,
body.theme-pebble .clerk-sidebar-icon-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #111827 !important;
  border-color: rgba(0,0,0,0.28);
}

/* ── Theme: Green (Original) ──────────────────────── */
body.theme-green {
  --primary: #06AC74;
  --primary-dark: #048f60;
  --primary-accent: #34C896;
  --primary-light: #f0fbf7;
  --primary-bg-alpha: rgba(6, 172, 116, 0.12);
  --formfield-bg: #f0fbf7;
}
body.theme-green .site-header,
body.theme-green .clerk-sidebar,
body.theme-green .site-footer { background: linear-gradient(135deg, #06AC74 0%, #048f60 100%); }
body.theme-green .site-nav-link.active { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Theme: Red (Kommunal) ────────────────────────── */
body.theme-red {
  --primary: #B51519;
  --primary-dark: #8B1013;
  --primary-accent: #D4171C;
  --primary-light: #FEF0F0;
  --primary-bg-alpha: rgba(181, 21, 25, 0.12);
  --formfield-bg: #FEF0F0;
}
body.theme-red .site-header,
body.theme-red .clerk-sidebar,
body.theme-red .site-footer { background: #5C0B0D; }
body.theme-red .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Slate (Schieferblau) ─────────────────────── */
body.theme-slate {
  --primary: #3B6FA0;
  --primary-dark: #2A5180;
  --primary-accent: #5B9BC8;
  --primary-light: #EEF5FB;
  --primary-bg-alpha: rgba(59, 111, 160, 0.12);
  --formfield-bg: #EEF5FB;
}
body.theme-slate .site-header,
body.theme-slate .clerk-sidebar,
body.theme-slate .site-footer { background: linear-gradient(160deg, #1C3A5C 0%, #2A5180 100%); }
body.theme-slate .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Teal (Petrol) ────────────────────────────── */
body.theme-teal {
  --primary: #0F766E;
  --primary-dark: #0A5C55;
  --primary-accent: #2DD4BF;
  --primary-light: #F0FDFA;
  --primary-bg-alpha: rgba(15, 118, 110, 0.12);
  --formfield-bg: #F0FDFA;
}
body.theme-teal .site-header,
body.theme-teal .clerk-sidebar,
body.theme-teal .site-footer { background: linear-gradient(160deg, #0A3D3A 0%, #0F766E 100%); }
body.theme-teal .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Violet (Aubergine) ───────────────────────── */
body.theme-violet {
  --primary: #7C3AED;
  --primary-dark: #5B21B6;
  --primary-accent: #A78BFA;
  --primary-light: #F5F3FF;
  --primary-bg-alpha: rgba(124, 58, 237, 0.12);
  --formfield-bg: #F5F3FF;
}
body.theme-violet .site-header,
body.theme-violet .clerk-sidebar,
body.theme-violet .site-footer { background: linear-gradient(160deg, #2E1065 0%, #5B21B6 100%); }
body.theme-violet .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Amber (Bernstein) ────────────────────────── */
body.theme-amber {
  --primary: #C97B2A;
  --primary-dark: #9A5C1A;
  --primary-accent: #E8A44A;
  --primary-light: #FEF6EC;
  --primary-bg-alpha: rgba(201, 123, 42, 0.12);
  --formfield-bg: #FEF6EC;
}
body.theme-amber .site-header,
body.theme-amber .clerk-sidebar,
body.theme-amber .site-footer { background: linear-gradient(160deg, #5C3210 0%, #9A5C1A 100%); }
body.theme-amber .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Graphite (Anthrazit) ─────────────────────── */
body.theme-graphite {
  --primary: #4B5563;
  --primary-dark: #374151;
  --primary-accent: #9CA3AF;
  --primary-light: #F3F4F6;
  --primary-bg-alpha: rgba(75, 85, 99, 0.12);
  --formfield-bg: #F3F4F6;
}
body.theme-graphite .site-header,
body.theme-graphite .clerk-sidebar,
body.theme-graphite .site-footer { background: linear-gradient(160deg, #111827 0%, #374151 100%); }
body.theme-graphite .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Stone (Warmgrau) ─────────────────────────── */
body.theme-stone {
  --primary: #78716C;
  --primary-dark: #57534E;
  --primary-accent: #A8A29E;
  --primary-light: #FAFAF9;
  --primary-bg-alpha: rgba(120, 113, 108, 0.12);
  --formfield-bg: #F5F5F4;
}
body.theme-stone .site-header,
body.theme-stone .clerk-sidebar,
body.theme-stone .site-footer { background: linear-gradient(160deg, #1C1917 0%, #44403C 100%); }
body.theme-stone .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Navy (Marineblau) ────────────────────────── */
body.theme-navy {
  --primary: #1E3A5F;
  --primary-dark: #0F1F33;
  --primary-accent: #4A7FA5;
  --primary-light: #EEF3F9;
  --primary-bg-alpha: rgba(30, 58, 95, 0.12);
  --formfield-bg: #EEF3F9;
}
body.theme-navy .site-header,
body.theme-navy .clerk-sidebar,
body.theme-navy .site-footer { background: linear-gradient(160deg, #060D18 0%, #0F1F33 100%); }
body.theme-navy .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Ocean (Ozeanblau) ────────────────────────── */
body.theme-ocean {
  --primary: #0369A1;
  --primary-dark: #075985;
  --primary-accent: #38BDF8;
  --primary-light: #E0F2FE;
  --primary-bg-alpha: rgba(3, 105, 161, 0.12);
  --formfield-bg: #E0F2FE;
}
body.theme-ocean .site-header,
body.theme-ocean .clerk-sidebar,
body.theme-ocean .site-footer { background: linear-gradient(160deg, #0C2340 0%, #075985 100%); }
body.theme-ocean .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Indigo ───────────────────────────────────── */
body.theme-indigo {
  --primary: #3730A3;
  --primary-dark: #2E1F8A;
  --primary-accent: #818CF8;
  --primary-light: #EEF2FF;
  --primary-bg-alpha: rgba(55, 48, 163, 0.12);
  --formfield-bg: #EEF2FF;
}
body.theme-indigo .site-header,
body.theme-indigo .clerk-sidebar,
body.theme-indigo .site-footer { background: linear-gradient(160deg, #1E1B4B 0%, #2E1F8A 100%); }
body.theme-indigo .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Forest (Waldgrün) ────────────────────────── */
body.theme-forest {
  --primary: #166534;
  --primary-dark: #14532D;
  --primary-accent: #4ADE80;
  --primary-light: #DCFCE7;
  --primary-bg-alpha: rgba(22, 101, 52, 0.12);
  --formfield-bg: #DCFCE7;
}
body.theme-forest .site-header,
body.theme-forest .clerk-sidebar,
body.theme-forest .site-footer { background: linear-gradient(160deg, #052E16 0%, #14532D 100%); }
body.theme-forest .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Sage (Salbei) ────────────────────────────── */
body.theme-sage {
  --primary: #4E6B53;
  --primary-dark: #3A5140;
  --primary-accent: #86EFAC;
  --primary-light: #F0FDF4;
  --primary-bg-alpha: rgba(78, 107, 83, 0.12);
  --formfield-bg: #F0FDF4;
}
body.theme-sage .site-header,
body.theme-sage .clerk-sidebar,
body.theme-sage .site-footer { background: linear-gradient(160deg, #1A2E1E 0%, #3A5140 100%); }
body.theme-sage .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Olive ────────────────────────────────────── */
body.theme-olive {
  --primary: #4D7C0F;
  --primary-dark: #3A5C0B;
  --primary-accent: #84CC16;
  --primary-light: #F7FEE7;
  --primary-bg-alpha: rgba(77, 124, 15, 0.12);
  --formfield-bg: #F7FEE7;
}
body.theme-olive .site-header,
body.theme-olive .clerk-sidebar,
body.theme-olive .site-footer { background: linear-gradient(160deg, #1A2E06 0%, #3A5C0B 100%); }
body.theme-olive .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Bordeaux (Weinrot) ───────────────────────── */
body.theme-bordeaux {
  --primary: #7F1D1D;
  --primary-dark: #6B1515;
  --primary-accent: #F87171;
  --primary-light: #FEF2F2;
  --primary-bg-alpha: rgba(127, 29, 29, 0.12);
  --formfield-bg: #FEF2F2;
}
body.theme-bordeaux .site-header,
body.theme-bordeaux .clerk-sidebar,
body.theme-bordeaux .site-footer { background: linear-gradient(160deg, #3F0D0D 0%, #6B1515 100%); }
body.theme-bordeaux .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Rose (Beere) ─────────────────────────────── */
body.theme-rose {
  --primary: #BE185D;
  --primary-dark: #9D174D;
  --primary-accent: #F472B6;
  --primary-light: #FDF2F8;
  --primary-bg-alpha: rgba(190, 24, 93, 0.12);
  --formfield-bg: #FDF2F8;
}
body.theme-rose .site-header,
body.theme-rose .clerk-sidebar,
body.theme-rose .site-footer { background: linear-gradient(160deg, #4C0526 0%, #9D174D 100%); }
body.theme-rose .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Terracotta ───────────────────────────────── */
body.theme-terracotta {
  --primary: #C2522D;
  --primary-dark: #9A3E22;
  --primary-accent: #FB923C;
  --primary-light: #FFF7ED;
  --primary-bg-alpha: rgba(194, 82, 45, 0.12);
  --formfield-bg: #FFF7ED;
}
body.theme-terracotta .site-header,
body.theme-terracotta .clerk-sidebar,
body.theme-terracotta .site-footer { background: linear-gradient(160deg, #431407 0%, #9A3E22 100%); }
body.theme-terracotta .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Midnight ─────────────────────────────────── */
body.theme-midnight {
  --primary: #475569;
  --primary-dark: #334155;
  --primary-accent: #94A3B8;
  --primary-light: #F1F5F9;
  --primary-bg-alpha: rgba(71, 85, 105, 0.12);
  --formfield-bg: #F1F5F9;
}
body.theme-midnight .site-header,
body.theme-midnight .clerk-sidebar,
body.theme-midnight .site-footer { background: linear-gradient(160deg, #020408 0%, #0F172A 100%); }
body.theme-midnight .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Theme: Sand ─────────────────────────────────────── */
body.theme-sand {
  --primary: #B5904A;
  --primary-dark: #8A6A2E;
  --primary-accent: #D4A959;
  --primary-light: #FEFCE8;
  --primary-bg-alpha: rgba(181, 144, 74, 0.12);
  --formfield-bg: #FEFCE8;
}
body.theme-sand .site-header,
body.theme-sand .clerk-sidebar,
body.theme-sand .site-footer { background: linear-gradient(160deg, #3D2A0E 0%, #8A6A2E 100%); }
body.theme-sand .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Light theme shared overrides ─────────────────────── */
body.theme-silver, body.theme-fog, body.theme-pebble {
  --light-theme-text: #374151;
  --light-theme-text-muted: #6B7280;
  --light-theme-border: rgba(0,0,0,0.10);
}
body.theme-silver .user-avatar,
body.theme-fog .user-avatar,
body.theme-pebble .user-avatar {
  background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); color: #374151;
}
body.theme-silver .user-name,
body.theme-fog .user-name,
body.theme-pebble .user-name { color: #374151 !important; }
body.theme-silver .site-logout-btn,
body.theme-fog .site-logout-btn,
body.theme-pebble .site-logout-btn {
  color: #4B5563 !important; border-color: rgba(0,0,0,0.18);
}
body.theme-silver .site-logout-btn:hover,
body.theme-fog .site-logout-btn:hover,
body.theme-pebble .site-logout-btn:hover {
  background: rgba(0,0,0,0.06); color: #111827 !important; border-color: rgba(0,0,0,0.25);
}
body.theme-silver .clerk-sidebar-section,
body.theme-fog .clerk-sidebar-section,
body.theme-pebble .clerk-sidebar-section { border-top-color: rgba(0,0,0,0.08); }
body.theme-silver .clerk-sidebar-section-title,
body.theme-fog .clerk-sidebar-section-title,
body.theme-pebble .clerk-sidebar-section-title { color: rgba(0,0,0,0.55); }
body.theme-silver details.clerk-sidebar-section > summary.clerk-sidebar-section-title:hover,
body.theme-fog    details.clerk-sidebar-section > summary.clerk-sidebar-section-title:hover,
body.theme-pebble details.clerk-sidebar-section > summary.clerk-sidebar-section-title:hover { color: rgba(0,0,0,0.8); }
body.theme-silver .clerk-sidebar-section-toggle,
body.theme-fog    .clerk-sidebar-section-toggle,
body.theme-pebble .clerk-sidebar-section-toggle { color: rgba(0,0,0,0.4); }
/* Sidebar-Gruppen-/Kategorie-Überschriften. Basisfarbe ist weiß (für dunkle
   Sidebars); auf den hellen Themes muss sie dunkel werden, sonst weiß auf grau
   (unlesbar). Betrifft ZWEI Klassen: -subsection-title (Admin-Gruppen „Zugriff",
   „Inhalte & Strecken" unter Verwaltung) UND -subsection-heading (Portal-
   Kategorien wie „Familie & Kind"). */
body.theme-silver .clerk-sidebar-subsection-title,
body.theme-fog    .clerk-sidebar-subsection-title,
body.theme-pebble .clerk-sidebar-subsection-title,
body.theme-silver summary.clerk-sidebar-subsection-heading,
body.theme-fog    summary.clerk-sidebar-subsection-heading,
body.theme-pebble summary.clerk-sidebar-subsection-heading { color: rgba(0,0,0,0.55); }
body.theme-silver summary.clerk-sidebar-subsection-heading:hover,
body.theme-fog    summary.clerk-sidebar-subsection-heading:hover,
body.theme-pebble summary.clerk-sidebar-subsection-heading:hover { color: rgba(0,0,0,0.78); }
body.theme-silver .clerk-sidebar-section-badge,
body.theme-fog    .clerk-sidebar-section-badge,
body.theme-pebble .clerk-sidebar-section-badge { background: rgba(0,0,0,0.10); color: #1F2937; }
body.theme-silver .clerk-sidebar-footer,
body.theme-fog .clerk-sidebar-footer,
body.theme-pebble .clerk-sidebar-footer { border-top-color: rgba(0,0,0,0.08); }
body.theme-silver .clerk-sidebar-username,
body.theme-fog .clerk-sidebar-username,
body.theme-pebble .clerk-sidebar-username { color: #1F2937; }
body.theme-silver .clerk-sidebar-badge,
body.theme-fog .clerk-sidebar-badge,
body.theme-pebble .clerk-sidebar-badge {
  background: rgba(0,0,0,0.10); color: #1F2937;
}
body.theme-silver .clerk-sidebar-link.active .clerk-sidebar-badge,
body.theme-silver .clerk-sidebar-link[aria-current="page"] .clerk-sidebar-badge,
body.theme-fog    .clerk-sidebar-link.active .clerk-sidebar-badge,
body.theme-fog    .clerk-sidebar-link[aria-current="page"] .clerk-sidebar-badge,
body.theme-pebble .clerk-sidebar-link.active .clerk-sidebar-badge,
body.theme-pebble .clerk-sidebar-link[aria-current="page"] .clerk-sidebar-badge {
  background: rgba(0,0,0,0.18);
}
body.theme-silver .clerk-sidebar-body,
body.theme-fog .clerk-sidebar-body,
body.theme-pebble .clerk-sidebar-body {
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
body.theme-silver .clerk-sidebar-body::-webkit-scrollbar-thumb,
body.theme-fog .clerk-sidebar-body::-webkit-scrollbar-thumb,
body.theme-pebble .clerk-sidebar-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
body.theme-silver .site-footer,
body.theme-fog .site-footer,
body.theme-pebble .site-footer { border-top: 1px solid rgba(0,0,0,0.08); }

/* ── Theme: Silber (Helles Grau) ─────────────────────── */
body.theme-silver {
  --primary: #6B7280; --primary-dark: #4B5563; --primary-accent: #9CA3AF;
  --primary-light: #F9FAFB; --primary-bg-alpha: rgba(107, 114, 128, 0.10); --formfield-bg: #F9FAFB;
}
body.theme-silver .site-header,
body.theme-silver .clerk-sidebar,
body.theme-silver .site-footer { background: #F3F4F6; }
body.theme-silver .site-header { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
body.theme-silver .site-header-topbar { border-bottom-color: #E5E7EB; }
body.theme-silver .clerk-sidebar-brand { border-bottom-color: #E5E7EB; }
body.theme-silver .clerk-sidebar .site-brand-name,
body.theme-silver .site-header .site-brand-name { color: #6B7280 !important; }
body.theme-silver .site-nav-link,
body.theme-silver .site-nav-link:link,
body.theme-silver .site-nav-link:visited { color: #4B5563 !important; }
body.theme-silver .site-nav-link:hover { background: rgba(0,0,0,0.06); color: #111827 !important; }
body.theme-silver .site-nav-link.active { background: rgba(0,0,0,0.08); color: #111827 !important; }
body.theme-silver .site-nav-link.active::after { background: #4B5563; }
body.theme-silver .clerk-sidebar-link,
body.theme-silver .clerk-sidebar-link:link,
body.theme-silver .clerk-sidebar-link:visited { color: #4B5563 !important; }
body.theme-silver .clerk-sidebar-link i { color: #9CA3AF; }
body.theme-silver .clerk-sidebar-link:hover,
body.theme-silver .clerk-sidebar-link:hover i { background: rgba(0,0,0,0.05); color: #111827 !important; }
body.theme-silver .clerk-sidebar-link.active,
body.theme-silver .clerk-sidebar-link[aria-current="page"],
body.theme-silver .clerk-sidebar-link.active i,
body.theme-silver .clerk-sidebar-link[aria-current="page"] i { color: #111827 !important; }
body.theme-silver .clerk-sidebar-link.active,
body.theme-silver .clerk-sidebar-link[aria-current="page"] { background: rgba(0,0,0,0.08); }
body.theme-silver .clerk-sidebar-link.active::before,
body.theme-silver .clerk-sidebar-link[aria-current="page"]::before { background: #6B7280; }
body.theme-silver .site-header-user { color: #4B5563; }

/* ── Theme: Nebel (Kühles Hellgrau) ──────────────────── */
body.theme-fog {
  --primary: #64748B; --primary-dark: #475569; --primary-accent: #94A3B8;
  --primary-light: #F8FAFC; --primary-bg-alpha: rgba(100, 116, 139, 0.10); --formfield-bg: #F8FAFC;
}
body.theme-fog .site-header,
body.theme-fog .clerk-sidebar,
body.theme-fog .site-footer { background: #E2E8F0; }
body.theme-fog .site-header { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
body.theme-fog .site-header-topbar { border-bottom-color: #CBD5E1; }
body.theme-fog .clerk-sidebar-brand { border-bottom-color: #CBD5E1; }
body.theme-fog .clerk-sidebar .site-brand-name,
body.theme-fog .site-header .site-brand-name { color: #475569 !important; }
body.theme-fog .site-nav-link,
body.theme-fog .site-nav-link:link,
body.theme-fog .site-nav-link:visited { color: #475569 !important; }
body.theme-fog .site-nav-link:hover { background: rgba(0,0,0,0.06); color: #0F172A !important; }
body.theme-fog .site-nav-link.active { background: rgba(0,0,0,0.08); color: #0F172A !important; }
body.theme-fog .site-nav-link.active::after { background: #475569; }
body.theme-fog .clerk-sidebar-link,
body.theme-fog .clerk-sidebar-link:link,
body.theme-fog .clerk-sidebar-link:visited { color: #475569 !important; }
body.theme-fog .clerk-sidebar-link i { color: #94A3B8; }
body.theme-fog .clerk-sidebar-link:hover,
body.theme-fog .clerk-sidebar-link:hover i { background: rgba(0,0,0,0.05); color: #0F172A !important; }
body.theme-fog .clerk-sidebar-link.active,
body.theme-fog .clerk-sidebar-link[aria-current="page"],
body.theme-fog .clerk-sidebar-link.active i,
body.theme-fog .clerk-sidebar-link[aria-current="page"] i { color: #0F172A !important; }
body.theme-fog .clerk-sidebar-link.active,
body.theme-fog .clerk-sidebar-link[aria-current="page"] { background: rgba(0,0,0,0.08); }
body.theme-fog .clerk-sidebar-link.active::before,
body.theme-fog .clerk-sidebar-link[aria-current="page"]::before { background: #64748B; }
body.theme-fog .site-header-user { color: #475569; }

/* ── Theme: Kiesel (Warmes Hellgrau) ─────────────────── */
body.theme-pebble {
  --primary: #78716C; --primary-dark: #57534E; --primary-accent: #A8A29E;
  --primary-light: #FAFAF9; --primary-bg-alpha: rgba(120, 113, 108, 0.10); --formfield-bg: #FAFAF9;
}
body.theme-pebble .site-header,
body.theme-pebble .clerk-sidebar,
body.theme-pebble .site-footer { background: #E7E5E4; }
body.theme-pebble .site-header { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
body.theme-pebble .site-header-topbar { border-bottom-color: #D6D3D1; }
body.theme-pebble .clerk-sidebar-brand { border-bottom-color: #D6D3D1; }
body.theme-pebble .clerk-sidebar .site-brand-name,
body.theme-pebble .site-header .site-brand-name { color: #57534E !important; }
body.theme-pebble .site-nav-link,
body.theme-pebble .site-nav-link:link,
body.theme-pebble .site-nav-link:visited { color: #57534E !important; }
body.theme-pebble .site-nav-link:hover { background: rgba(0,0,0,0.06); color: #1C1917 !important; }
body.theme-pebble .site-nav-link.active { background: rgba(0,0,0,0.08); color: #1C1917 !important; }
body.theme-pebble .site-nav-link.active::after { background: #57534E; }
body.theme-pebble .clerk-sidebar-link,
body.theme-pebble .clerk-sidebar-link:link,
body.theme-pebble .clerk-sidebar-link:visited { color: #57534E !important; }
body.theme-pebble .clerk-sidebar-link i { color: #A8A29E; }
body.theme-pebble .clerk-sidebar-link:hover,
body.theme-pebble .clerk-sidebar-link:hover i { background: rgba(0,0,0,0.05); color: #1C1917 !important; }
body.theme-pebble .clerk-sidebar-link.active,
body.theme-pebble .clerk-sidebar-link[aria-current="page"],
body.theme-pebble .clerk-sidebar-link.active i,
body.theme-pebble .clerk-sidebar-link[aria-current="page"] i { color: #1C1917 !important; }
body.theme-pebble .clerk-sidebar-link.active,
body.theme-pebble .clerk-sidebar-link[aria-current="page"] { background: rgba(0,0,0,0.08); }
body.theme-pebble .clerk-sidebar-link.active::before,
body.theme-pebble .clerk-sidebar-link[aria-current="page"]::before { background: #78716C; }
body.theme-pebble .site-header-user { color: #57534E; }

/* ── Theme: Tricolor (Blau-Gelb-Rot mit Anthrazit) ──── */
body.theme-tricolor {
  --primary: #2253a0;
  --primary-dark: #173872;
  --primary-accent: #faf013;
  --primary-light: #EAF0FA;
  --primary-bg-alpha: rgba(34, 83, 160, 0.12);
  --formfield-bg: #EAF0FA;
  --danger-red: #d60828;
}
body.theme-tricolor .site-header,
body.theme-tricolor .clerk-sidebar,
body.theme-tricolor .site-footer { background: #2b2b2b; }
body.theme-tricolor .site-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; }

/* Light-theme overrides for sidebar legal links */
body.theme-silver .clerk-sidebar-legal a,
body.theme-fog .clerk-sidebar-legal a,
body.theme-pebble .clerk-sidebar-legal a { color: #4B5563; }
body.theme-silver .clerk-sidebar-legal a:hover,
body.theme-fog .clerk-sidebar-legal a:hover,
body.theme-pebble .clerk-sidebar-legal a:hover { color: #111827; }

/* Light-theme overrides for page footer links */
body.theme-silver .site-footer-links a,
body.theme-fog .site-footer-links a,
body.theme-pebble .site-footer-links a { color: rgba(0,0,0,0.45); }
body.theme-silver .site-footer-links a:hover,
body.theme-fog .site-footer-links a:hover,
body.theme-pebble .site-footer-links a:hover { color: rgba(0,0,0,0.8); }

/* ── Ticket Detail – Page Toolbar ────────────────────── */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-toolbar-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  flex: 1;
}
.page-toolbar-right {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
}
.page-back-bar {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2rem;
}
/* Buttons in der Back-Bar: Icon-Abstand + dezente Secondary-Optik. Das
   !important kontert die globale Theme-Einfärbung von button/.btn im
   Bürger-/Clerk-Bereich (siehe body:not(.admin-body) button) — gleiches
   Muster wie der .dash-pager in den internen Listen. */
body:not(.admin-body) .page-back-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
body:not(.admin-body) .page-back-bar .btn-secondary {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db;
  box-shadow: none;
}
body:not(.admin-body) .page-back-bar .btn-secondary:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af;
}

/* ── Ticket Detail – Workflow Stepper Bar ─────────────── */
.wf-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 0;
  background: var(--bg-light, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--border-radius);
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
}
.wf-stepper-line {
  width: 28px;
  height: 2px;
  background: var(--border-color, #dee2e6);
  flex-shrink: 0;
}
.wf-stepper-line.completed { background: var(--success, #28a745); }
.wf-step {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 20px;
  font-size: .82rem;
  white-space: nowrap;
  background: #e9ecef;
  color: #6c757d;
}
.wf-step.completed { background: #d4edda; color: #155724; }
.wf-step.current   { background: #cce5ff; color: #004085; font-weight: 600; }

/* ── Ticket Detail – Action Card ──────────────────────── */
.ticket-action-card {
  background: #fff;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.ticket-action-card form {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  width: 100%;
}
.ticket-action-card fieldset {
  min-inline-size: 0;
  width: 100%;
  box-sizing: border-box;
}
.ticket-action-card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--text-dark);
}

/* ── Ticket Sharing ──────────────────────────────────── */
.share-form {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.share-input {
  flex: 1;
  height: 40px;
  padding: 0 .75rem;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: var(--border-radius);
  font-size: .9rem;
  box-sizing: border-box;
  margin: 0;
}
.share-btn {
  white-space: nowrap;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
}
.share-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.share-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light, #f8f9fa);
  padding: .65rem 1rem;
  border: 1px solid var(--border-light, #eee);
  border-radius: var(--border-radius);
}
.share-revoke-btn {
  font-size: .8rem;
  padding: .3rem .7rem;
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.share-flash {
  padding: .65rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.share-flash.flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.share-flash.flash-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ── Ticket Display – Modern Restyle ─────────────────── */

/* Grid wrapper — single column: cards stack vertically full-width */
div.form-container,
.form-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Card */
div.form-container > .ticket-container,
.form-container > .ticket-container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 0 11px rgba(0,0,0,0.07);
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}
/* wide-2 is a no-op in single-column layout */

/* Card header */
.ticket-container .ticket-header {
  background: none !important;
  color: rgba(0,0,0,0.4) !important;
  padding: 1rem 1.25rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left !important;
  border-bottom: 1px solid #F3F4F6;
}

/* Meta block (Ticketnummer, Status, Datum) */
.ticket-meta {
  background: none;
  padding: 1.1rem 1.25rem 0.5rem;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid #F3F4F6;
}
.ticket-meta h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.35rem;
  width: 100%;
}
.ticket-meta p {
  margin: 0;
  font-size: 0.82rem;
  color: #6B7280;
}
.ticket-meta p strong {
  color: #374151;
  font-weight: 600;
}

/* Data list */
.ticket-data,
.nested-data {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

/* kv rows */
.ticket-data > li.kv-row,
.nested-data > li.kv-row {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid #F9FAFB;
}
.ticket-data > li.kv-row:last-child,
.nested-data > li.kv-row:last-child { border-bottom: none; }

.kv-row > .kv-key {
  font-size: 0.9rem;
  color: #9CA3AF;
  font-weight: 500;
  text-align: left;
  padding-left: 0;
  line-height: 1.4;
}
.kv-row > .kv-value {
  font-size: 0.975rem;
  color: #1F2937;
  font-weight: 500;
  text-align: left;
  justify-self: start;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kv-row > .kv-nested {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0.25rem 0 0.5rem;
}

/* Section headings within data */
.ticket-data > li.section-heading,
.nested-data > li.section-heading {
  display: block;
  padding: 0.6rem 1.25rem 0.35rem;
  border-bottom: none;
  background: none;
  text-align: left !important;
}
.ticket-data > li.section-heading::before { display: none; }
.section-heading span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  background: none;
  padding: 0;
}
.ticket-data > li.subsection-heading {
  padding: 0.5rem 1.25rem 0.2rem;
  margin: 0;
  border-bottom: none;
}
.ticket-data > li.subsection-heading span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6B7280;
  text-transform: none;
  letter-spacing: 0;
}

/* Array items (Aufsichtspersonen etc.) */
.ticket-data li:has(.ticket-array-item),
.nested-data li:has(.ticket-array-item) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: none;
  align-items: stretch;
}
.ticket-array-item {
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.ticket-array-item h4 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #E5E7EB;
}
.ticket-array-item .nested-data,
.ticket-array-item .ticket-data { padding: 0; margin: 0; width: 100%; }
.ticket-array-item .kv-row {
  padding: 0.3rem 0;
  grid-template-columns: 44% 56%;
  width: 100%;
}
.ticket-array-item .kv-row:last-child { border-bottom: none; }

/* Attachments */
.attachments {
  border-top: 1px solid #F3F4F6;
  padding: 0.85rem 1.25rem;
  background: none;
  margin-top: auto;
}
.attachments > strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9CA3AF;
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
}
.attachments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.attachment-item {
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
}
.attachment-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.attachment-type {
  font-size: 0.72rem;
  font-weight: 400;
  color: #9CA3AF;
}
.ticket-image-preview {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin-bottom: 0.35rem;
}
.ticket-pdf-preview {
  width: 100%;
  height: 180px;
  border: none;
  border-radius: 6px;
  display: block;
  margin-bottom: 0.35rem;
}
.attachments .preview-container a {
  font-size: 0.78rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

/* ── Clerk Step1 Layout ───────────────────────────────── */
.clerk-step1-layout {
  display: block;
}
.clerk-step1-data {
  width: 100%;
  margin-bottom: 1.5rem;
}
.clerk-step1-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.clerk-step1-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.clerk-step1-header h2 { margin: 0; }

.clerk-workflow-stepper {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}
.clerk-workflow-stepper-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 0.5rem;
}
.wf-connector {
  width: 24px;
  height: 2px;
  background: #E5E7EB;
  flex-shrink: 0;
}
.wf-connector.done { background: #6EE7B7; }

.clerk-form-card,
.clerk-notes-card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
.clerk-form-card h3,
.clerk-notes-card h3 {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9CA3AF;
}
.clerk-notes-card h3 { margin-bottom: 0.75rem; }
.clerk-notes-card textarea {
  margin-bottom: 0.75rem;
  min-height: 80px;
  resize: vertical;
}

.clerk-action-pills {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.clerk-action-pills label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: border-color 0.15s, background 0.15s;
}
.clerk-action-pills label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.clerk-action-pills input[type="radio"] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.clerk-notify-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
}
.clerk-notify-box p { margin: 0 0 0.5rem; font-weight: 600; color: #065F46; }
.clerk-notify-box label { display: flex; align-items: center; gap: 0.4rem; color: #065F46; cursor: pointer; }

.clerk-email-tpl-box {
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}
.clerk-email-tpl-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #C7D2FE;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  color: #1E1B4B;
}
.clerk-email-preview-btn {
  margin-top: .5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.clerk-email-preview-btn:hover { background: #4f46e5; }

.clerk-form-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.clerk-form-buttons button { flex: 1; min-width: 100px; }

/* Sitzt seit dem Bündeln als Fussnote IN der Karte „Vorgang verwalten" und
   nicht mehr frei darunter — deshalb eine Trennlinie wie die Teile darüber. */
.clerk-cancel-row {
  text-align: center;
  padding-top: 0.65rem;
  margin-top: 0.25rem;
  border-top: 1px solid #F1F5F9;
}
.attachments .preview-container a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════ */

/* ── 1. Clerk Sidebar: Hamburger Menu ───────────────── */
.clerk-hamburger {
  display: none !important;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 301;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--primary-dark, #0A1A3F);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.clerk-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}

@media (max-width: 768px) {
  .clerk-hamburger {
    display: flex !important;
  }
  .clerk-sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .clerk-sidebar.open {
    transform: translateX(0);
  }
  .clerk-sidebar-overlay.active {
    display: block;
  }
  .clerk-main {
    margin-left: 0 !important;
  }
  .clerk-main main {
    padding: 1rem;
    padding-top: 60px;
  }
}

/* ── 2. Tables: Horizontal Scroll ───────────────────── */
@media (max-width: 768px) {
  .dash-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-table {
    min-width: 700px;
  }

  /* Toolbar stacking */
  .dash-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-filters {
    flex: unset;
    width: 100%;
    overflow-x: auto;
  }
  .dash-search-row {
    flex: unset;
    width: 100%;
    justify-content: stretch;
  }
  .radio-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .radio-group label {
    font-size: 0.78rem;
  }
}

/* ── 3. Citizen Header: Responsive Nav Stacking ─────── */
.site-nav-toggle {
  display: none !important;
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: auto;
  margin-right: 0.5rem;
}

@media (max-width: 600px) {
  .site-nav-toggle {
    display: inline-flex !important;
    order: 1;
  }
  .site-header-user {
    order: 2;
  }
  .site-header-user .user-name {
    display: none;
  }
  .site-header-navzone {
    display: none;
    height: auto;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .site-header-navzone.open {
    display: flex;
  }
  .site-nav {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .site-nav-link {
    padding: 0.6rem 0.5rem !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    width: 100%;
  }
  .site-brand-name {
    font-size: 1.1rem;
  }

  /* Citizen dashboard adjustments */
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .ov-new-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ─────────────────────────────────────────────────────
   OMNIA Terminkalender (FullCalendar 6)
   ───────────────────────────────────────────────────── */
.om-cal-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.om-cal-container { min-height: 500px; }
.om-cal-container .fc-toolbar-title { font-size: 1.15rem; }
.om-cal-container .fc-button-primary {
    background: #374151; border-color: #374151; text-transform: capitalize;
}
.om-cal-container .fc-button-primary:hover { background: #1f2937; border-color: #1f2937; }
.om-cal-container .fc-button-primary:not(:disabled).fc-button-active,
.om-cal-container .fc-button-primary:not(:disabled):active { background: #111827; border-color: #111827; }
.om-cal-error {
    color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
    padding: .6rem .8rem; border-radius: 4px; margin-top: .6rem;
}
.om-cal-hint {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    padding: .5rem .75rem; border-radius: 4px; margin-bottom: 1rem; font-size: .9rem;
}

/* Citizen-request box inside calendar edit dialog */
.om-cal-citizen-req {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: .6rem .75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: #78350f;
}
.om-cal-citizen-req-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
#omCal-citizenReqNote { white-space: pre-wrap; }
/* Terminliste — Aktions-Buttons. Die globale Themung
   `body:not(.admin-body) button { background:var(--primary) !important }` (styles.css ~556)
   zwingt JEDEN Portal-Button blau und überstimmt .btn-danger/.btn-primary per
   Spezifität+!important. Hier mit höherer Spezifität (Scope .om-appt-card) die
   Farbcodierung wiederherstellen (Annehmen grün, Ablehnen rot), Icon-Abstand
   (FontAwesome-<i> bekommt sonst keinen, nur <svg>) und kompaktere Größe
   (globales font-size:1rem !important sonst -> btn-sm wirkungslos). */
body:not(.admin-body) .om-appt-card .btn { gap: .4rem; }
body:not(.admin-body) .om-appt-card .btn-sm {
    padding: .4rem .7rem;
    font-size: .82rem !important;
    box-shadow: none;
}
body:not(.admin-body) .om-appt-card .btn-success { background-color: #16a34a !important; }
body:not(.admin-body) .om-appt-card .btn-success:hover { background-color: #15803d !important; }
body:not(.admin-body) .om-appt-card .btn-danger  { background-color: #dc2626 !important; }
body:not(.admin-body) .om-appt-card .btn-danger:hover  { background-color: #b91c1c !important; }
/* Termin-Dialoge (außerhalb der Card) konsistent: Ablehnen/Absagen rot. */
body:not(.admin-body) #omApptDeclineDialog .btn-danger,
body:not(.admin-body) #omApptCancelDialog .btn-danger { background-color: #dc2626 !important; }
body:not(.admin-body) #omApptDeclineDialog .btn-danger:hover,
body:not(.admin-body) #omApptCancelDialog .btn-danger:hover { background-color: #b91c1c !important; }

/* Dashboard: open citizen appointment request badge */
.dash-appt-req-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .3rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    vertical-align: middle;
}
.dash-appt-req-badge i { font-size: .7rem; }

/* Calendar mode switch (service ↔ my appointments) */
.om-cal-modeswitch {
    display: inline-flex;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.om-cal-modeswitch-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.om-cal-modeswitch-tab:hover { color: #111827; background: rgba(255,255,255,0.6); }
.om-cal-modeswitch-tab.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.om-cal-modeswitch-tab i { font-size: .82rem; }

/* Calendar edit dialog: responsible clerk meta */
.om-cal-clerk-meta {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: .4rem .7rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .85rem;
}
.om-cal-clerk-meta i { margin-right: .3rem; }

/* Responsible clerk tag on calendar events */
.om-cal-event-clerk {
    font-size: .7rem;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 1px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Month/list views: tuck the clerk next to the title */
.fc-daygrid-event .om-cal-event-clerk,
.fc-list-event .om-cal-event-clerk {
    display: inline-block;
    margin-left: .3rem;
    opacity: 0.75;
}

/* Befund 1: Vorschlag (tentative) visuell als "unbestätigt" — gestrichelter
   Rahmen + leicht transluzente Fläche, damit es sich von bestätigten Terminen
   abhebt (Füllfarbe ist amber aus dem Feed). */
.fc-event.om-evt-tentative {
    border-style: dashed !important;
    border-width: 2px !important;
    opacity: 0.92;
}
/* Highlight (Termin des aktuell betrachteten Vorgangs): kräftiger roter Rahmen. */
.fc-event.om-evt-highlight { border-width: 2px !important; }

/* Befund 2: Status/Anfrage/Leistung als Badges im Event statt im Titel-Text. */
.om-cal-evt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 2px;
}
.om-cal-evt-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(255,255,255,.85);
    color: #1f2937;
    white-space: nowrap;
}
.om-cal-evt-badge.is-tentative { background:#fff7ed; color:#b45309; }
.om-cal-evt-badge.is-req       { background:#fef2f2; color:#b91c1c; }
.om-cal-evt-badge.is-svc       { background:rgba(255,255,255,.9); color:#374151; }

/* Kalender-Legende (erklärt Muster, nicht die pro-Leistung-Farbe). */
.om-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    align-items: center;
    margin: .5rem 0 .25rem;
    font-size: .78rem;
    color: #4b5563;
}
.om-cal-legend .lg { display: inline-flex; align-items: center; gap: .35rem; }
.om-cal-legend .sw {
    width: 22px; height: 12px; border-radius: 3px; display: inline-block;
    background: #3b82f6; border: 1px solid #3b82f6;
}
.om-cal-legend .sw.tentative { background:#fde68a; border:2px dashed #f59e0b; }
.om-cal-legend .sw.highlight { background:#fff; border:2px solid #dc2626; }

/* Calendar standalone toolbar (mode switch + service dropdown) */
.om-cal-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    min-height: 38px;
}
.om-cal-toolbar-service {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    /* Override the global form { background, shadow, padding } rule */
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-height: 38px;
}
.om-cal-toolbar-service > label,
form.om-cal-toolbar-service > label {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    font-weight: 500;
    font-size: .9rem;
    color: #374151;
    line-height: 38px;
    height: 38px;
}
.om-cal-toolbar-service > .dash-select {
    height: 38px;
    line-height: 1;
    margin: 0;
    box-sizing: border-box;
}
/* Match mode-switch visual height to the dropdown */
.om-cal-toolbar .om-cal-modeswitch {
    min-height: 38px;
    box-sizing: border-box;
}
@media (max-width: 720px) {
    .om-cal-toolbar-service { margin-left: 0; width: 100%; }
    .om-cal-toolbar-service .dash-select { flex: 1; }
}

/* ── Wizard Step Indicator (Bürger-Antragsstrecke) ───────────────────────── */
/* Wird oben in jeder Wizard-Step-View via partials/wizard_progress.php
   eingebunden. Visualisiert die 4 Phasen Start → Datenschutz → Antragsteller
   → Formular mit Status (done/current/upcoming). */
.wizard-progress {
    margin: 0 0 2rem;
    padding: 1.25rem 0.5rem 0;
}
.wizard-progress-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 960px;
}
.wizard-progress-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    text-align: center;
    /* min-width verhindert, dass die Slots auf die natürliche Inhaltsbreite
       (= Zirkel-Breite) schrumpfen. Mit 120px je Slot hat jedes Label
       garantiert ~80-90px Atemraum + Trennung zum Nachbarn. */
    min-width: 120px;
}
/* Verbindungslinie zwischen den Schritten (gerendert als ::after auf jedem
   Schritt außer dem letzten, beginnt rechts vom Kreis). */
.wizard-progress-step::after {
    content: "";
    position: absolute;
    top: 18px;
    /* Linie startet rechts vom Kreis und reicht bis zum nächsten Kreis.
       -1rem im right-Offset überbrückt den gap zwischen flex-Items. */
    left: calc(50% + 22px);
    right: calc(-50% + 22px - 1rem);
    height: 2px;
    background: var(--border-grey);
    z-index: 0;
}
.wizard-progress-step:last-child::after { display: none; }
.wizard-progress-step--done::after { background: var(--primary); }
.wizard-progress-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-grey);
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all var(--transition);
}
.wizard-progress-step--done .wizard-progress-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.wizard-progress-step--current .wizard-progress-circle {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-bg-alpha);
}
.wizard-progress-label {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.2;
    /* Standard: bricht nur an Wortgrenzen, nicht mitten im Wort.
       Unsere Labels sind alle ≤13 Zeichen und passen bei max-width 960px
       locker in ihre flex-Slots (~225px). */
    overflow-wrap: normal;
    word-break: normal;
}
.wizard-progress-step--current .wizard-progress-label {
    color: var(--text-dark);
    font-weight: 600;
}
.wizard-progress-step--done .wizard-progress-label {
    color: var(--text-dark);
}
@media (max-width: 600px) {
    .wizard-progress { padding-top: 0.75rem; }
    .wizard-progress-list { gap: 0.4rem; }
    .wizard-progress-step { min-width: 60px; }
    .wizard-progress-circle { width: 30px; height: 30px; font-size: 0.85rem; }
    .wizard-progress-step::after {
        top: 15px;
        left: calc(50% + 18px);
        right: calc(-50% + 18px - 0.4rem);
    }
    .wizard-progress-label { font-size: 0.72rem; }
}

/* ===========================================================================
   Chatbot: Formatierung der Modellantwort
   Erzeugt von public/js/chatbot-markdown.js. Hier und nicht in der Ansicht,
   weil ZWEI Ansichten dieselben Elemente rendern: Gespraechsfenster und
   Verlauf.
   =========================================================================== */
/* Formatierung der Modellantwort. Der Renderer im Skript unten erzeugt genau
   diese Elemente — Aufzählungen, Fettung, Zwischenüberschriften, Belegstellen. */
.cb-text p { margin: 0 0 .55rem; }
.cb-text p:last-child { margin-bottom: 0; }
.cb-text ul, .cb-text ol { margin: .35rem 0 .65rem; padding-left: 1.4rem; }
.cb-text li { margin: .15rem 0; }
.cb-text ul ul, .cb-text ol ul, .cb-text ul ol, .cb-text ol ol { margin: .15rem 0; }
.cb-text code { background: #f3f4f6; padding: .05rem .3rem; border-radius: 3px; font-size: .9em; }
.cb-text .cb-rang { font-weight: 600; margin-top: .8rem; }
.cb-text .cb-trenner { border: 0; border-top: 1px solid #e5e7eb; margin: .9rem 0; }
/* Belegstelle: [2] wird zur Marke, damit sie beim Weiterverwenden der Antwort
   nicht als beliebige Zahl überlesen wird. Sie verweist auf die Fundstelle
   gleicher Nummer in der rechten Spalte. */
.cb-text .cb-beleg,
.cb-belege .cb-beleg {
    display: inline-block;
    min-width: 1.15rem;
    text-align: center;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    padding: 0 .25rem;
    margin: 0 .1rem;
    vertical-align: baseline;
}

/* Belege: gestaltet im Chatfenster-Abschnitt weiter unten (.cb-app .cb-belege*). */

/* Fundstellen mit Auszug: unter dem Gespraech, ueber die ganze Breite. In der
   schmalen rechten Spalte standen Belegtext und Auszug uebereinander gequetscht
   -- also genau dort schlecht lesbar, wo man nachliest, ob die Stelle passt.
   Als Raster passen auf breiten Bildschirmen mehrere nebeneinander. */
/* Das Raster fuer die Fundstellen-Karten ist entfallen -- siehe unten. */
/* Fundstellen-Karten: gestaltet im Chatfenster-Abschnitt weiter unten. */

/* ═══════════════════════════════════════════════════════════════════════
   CHATBOT-GESPRÄCHSFENSTER — Chat-Gestaltung (2026-08-20)
   Ansicht: src/Views/clerk/chatbot/index.php

   LEITIDEE: Die Fundstelle ist die RANDSPALTE der Antwort, nicht ein Chip
   darunter — wie Randnummern im Gesetzeskommentar. Wer den linken Rand
   entlangliest, sieht die tragenden Vorschriften, bevor er einen Satz
   gelesen hat. Deshalb ist die Frage ein Bedienelement (getönte Blase
   rechts) und die Antwort ein Dokument (Serifen, festes Lesemaß, keine
   Blase). Bewusst asymmetrisch: Blasen-Pingpong ist bei langen,
   belegpflichtigen Rechtstexten die falsche Form.

   DREI REGELN, die hier nicht verhandelbar sind — die Datei ist mit
   Bürger-, Sachbearbeiter- und Admin-Bereich geteilt:

   1. JEDE Regel liegt unter `.cb-app`. Kein Selektor wirkt außerhalb.
   2. KEINE nackte Element-Regel. Gemessen: eine `textarea`-Regel träfe 34
      Felder im Produkt, `.icon` ist in 71 Stellen der Views vergeben,
      `.field` in 60, `.body` in 57.
   3. Die Neutralen kommen aus den BESTEHENDEN Tokens (--text-dark,
      --border-grey, --background-grey). Sie sind warm (Stone); eine eigene
      kühle Palette hätte den Chat im Produkt fremd wirken lassen.

   KEIN DUNKELMODUS: Das Produkt hat keinen (0 Vorkommen von
   prefers-color-scheme in styles.css und admin.css). Der Chat wäre der
   einzige dunkle Bildschirm.

   FARBE AUS DEM PORTAL-THEME, und die Rollen sind gemessen, nicht gewählt:
   Weißer Text auf --primary fällt bei den hellen Themes durch die
   Kontrastprüfung (Grün 2,93 · Sand 2,98 · Amber 3,31 : 1), auf
   --primary-dark scheitert Grün noch mit 4,12. Daher trägt die Theme-Farbe
   LINIEN UND MARKEN, keinen Kleintext; gefüllte Flächen werden abgedunkelt
   (0 von 23 Themes fallen durch); Adressen stehen in Tinte.
   ═══════════════════════════════════════════════════════════════════════ */

.cb-app {
  /* Die abgeleiteten Rollen MÜSSEN hier liegen, nicht auf :root: das Theme
     setzt --primary per `body.theme-<name>`, und Custom Properties erben
     abwärts. Auf :root berechnet bliebe die Farbe beim Standardblau. */
  --cb-accent: var(--primary);
  --cb-accent-solid: color-mix(in srgb, var(--primary-dark, var(--primary)) 88%, #000);
  --cb-accent-tint: var(--primary-bg-alpha, rgba(37, 95, 254, .1));
  --cb-ink: var(--text-dark, #1C1917);
  --cb-muted: var(--text-light, #57534E);
  --cb-faint: #8A8580;
  --cb-rule: var(--border-grey, #E7E5E4);
  --cb-rule-soft: var(--border-light, #F0EFED);
  --cb-paper: var(--background-grey, #FAFAF9);
  --cb-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Charter, "Times New Roman", serif;
  --cb-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Randspalte + Lesemaß. 36rem Georgia sind ~68 Zeichen; 40rem waren mit
     ~78 Zeichen messbar zu breit. */
  --cb-rand: 10.5rem;
  --cb-mass: 36rem;
  --cb-spalt: 1.4rem;
  --cb-luft: 1.25rem;

  color: var(--cb-ink);

  /* Die Anwendung fuellt die Hoehe, damit die Eingabe UNTEN sitzt und nicht auf
     halber Seite schwebt. Der Abzug deckt das Innenmass von `.clerk-main main`
     (2rem oben/unten) plus die Fusszeile. Ohne das stand die Eingabe im
     Leerzustand mitten im Bild: `sticky` hat ohne scrollbaren Inhalt nichts,
     woran es kleben koennte. */
}

/* Die feste Hoehe gehoert NUR zum Gespraechsfenster. Auf `.cb-app` allgemein
   schnitt sie die Verlaufsansicht unten ab: dort waechst ein Blatt mit dem
   Inhalt, und `overflow: hidden` fuer die runden Ecken hat den Rest geschluckt. */
.cb-app-fenster {
  height: calc(100dvh - 9rem);
  min-height: 30rem;
  display: flex;
  flex-direction: column;
}

/* Zwei Spalten: Gespraech links im Lesemass, Nebensaechliches rechts. Vorher
   stapelten sich „Grundlage" und „Fruehere Gespraeche" unter dem Chat, waehrend
   zwei Drittel der Breite leer blieben. */
.cb-app .cb-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Die Chat-Spalte bekommt genau ihr Lesemass, nicht den ganzen Rest: Als
     `1fr` blieben zwischen Chat und Nebenspalte rund 500 px Nichts stehen.
     `justify-content: center` haelt das Paar in der Mitte. */
  grid-template-columns: minmax(0, calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass))) 17rem;
  justify-content: center;
  gap: 3rem;
}
.cb-app .cb-haupt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass)
                  + 2 * var(--cb-luft));
  /* Die Abgrenzung: weisse Flaeche, Rahmen, eigene Kante. Vorher war hier
     blanke Seite und das Gespraech hatte keinen Rand. */
  background: #fff;
  border: 1px solid var(--cb-rule);
  border-radius: var(--border-radius, 6px);
  overflow: hidden;
}
.cb-app .cb-seite {
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-left: 1.6rem;
  border-left: 1px solid var(--cb-rule-soft);
}
.cb-app .cb-seite-block { min-width: 0; }

/* Der Verlauf nimmt den freien Platz; dadurch rutscht die Eingabe nach unten,
   auch wenn noch keine Nachricht steht. */
.cb-app .cb-haupt .cb-strom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.3rem var(--cb-luft);
}

/* ── Kopfzeile: klebt oben, damit Bestand und Modus beim Lesen sichtbar
      bleiben. Sticky statt fester Höhe — so braucht das Gerüst KEINE
      Arithmetik über Kopf- und Fußzeile des Clerk-Layouts. ───────────── */
.cb-app .cb-topbar {
  /* Nicht mehr `sticky`: die Seite scrollt nicht mehr, der Verlauf tut es im
     Fenster. Ein klebender Streifen ohne Scrollbewegung war sinnlos. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  /* Waagerechtes Innenmass: die Flaeche ist weiss und sichtbar, ohne Luft
     stiess der Text an ihre Kante. Das Mass wird oben mitgerechnet, damit die
     AUSSENkante weiter auf dem Gesamtmass des Spaltenpaars liegt. */
  padding: .65rem var(--cb-luft) .7rem;
  width: 100%;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass)
                  + 3rem + 17rem + 2 * var(--cb-luft));
  margin: 0 auto .9rem;
  /* Weiss ist ab jetzt dem FENSTER vorbehalten: eine zweite weisse Flaeche
     darueber liess die Abgrenzung verschwimmen. */
  background: transparent;
}

.cb-app .cb-picker { display: flex; align-items: center; gap: .5rem; }
.cb-app .cb-picker-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-faint);
  margin: 0;
}
/* margin-bottom:0 ist Pflicht: die globale select-Regel setzt 1rem und
   verschiebt das Feld gegen sein Label. */
.cb-app .cb-select {
  margin-bottom: 0;
  min-width: 18rem;
  max-width: 26rem;
}

/* Der Modus-Chip trägt echte Information: wie streng geantwortet wird.
   Text in Tinte, Theme-Farbe nur als Punkt und Rahmen. */
.cb-app .cb-modus {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--cb-accent-tint);
  color: var(--cb-ink);
  border: 1px solid var(--cb-accent);
  white-space: nowrap;
}
.cb-app .cb-modus-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cb-accent-solid);
}

.cb-app .cb-topbar-fuell { flex: 1 1 1rem; }

.cb-app .cb-basis {
  font-size: .8rem;
  color: var(--cb-muted);
  line-height: 1.4;
  margin: 0;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass));
}

/* Seitenüberschrift: klein gesetzt, weil das Fenster eine Anwendung ist und
   keine Textseite — aber vorhanden, sonst fehlt der Seite die Gliederung. */
.cb-app .cb-titel {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}

/* Der fachliche Hinweis (keine Einzelfallprüfung) ist keine Zierde: er bleibt
   dauerhaft sichtbar, nicht nur im Leerzustand. */
.cb-app .cb-intro {
  flex: 0 0 auto;
  color: var(--cb-muted);
  font-size: .85rem;
  line-height: 1.45;
  margin: 0;
  padding: .6rem var(--cb-luft);
  border-bottom: 1px solid var(--cb-rule-soft);
  background: var(--cb-paper);
}

/* Eigener Flash: der Chatbot setzt $_SESSION['flash'] als Array, das geteilte
   partials/clerk_flash.php liest dagegen flash_message — es passt hier nicht. */
.cb-app .cb-flash {
  padding: .7rem .9rem;
  border-radius: var(--border-radius, 6px);
  margin-bottom: 1.1rem;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #166534;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass));
}
.cb-app .cb-flash-fehler {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

/* Frühere Gespräche: nachrangige Navigation, deshalb unten und ruhig. */
.cb-app .cb-gespraeche {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass));
}
.cb-app .cb-gespraeche li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--cb-rule-soft);
}
.cb-app .cb-gespraeche li:last-child { border-bottom: 0; }
.cb-app .cb-gespraeche .cb-basis {
  display: block;
  text-align: left;
  max-width: none;
  font-size: .78rem;
}

/* ── Verlauf ─────────────────────────────────────────────────────────── */
.cb-app .cb-strom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass));
}

/* Leerzustand mittig im freien Raum. Vorher hing er am Rand-Versatz von knapp
   190 px und stand damit eingerueckt in der Luft, ohne dass links etwas war. */
.cb-app .cb-leer {
  color: var(--cb-muted);
  margin: auto 0;
  padding: 2rem 0;
  max-width: 34rem;
  align-self: center;
  text-align: center;
}
.cb-app .cb-leer-text {
  font-family: var(--cb-serif);
  font-size: 1.15rem;
  color: var(--cb-ink);
  margin: 0 0 1.2rem;
}
.cb-app .cb-leer-hinweis {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cb-faint);
  margin: 0 0 .5rem;
}
.cb-app .cb-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.cb-app .cb-vorschlag {
  cursor: pointer;
  font-size: .88rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--cb-rule);
  background: #fff;
  color: var(--cb-ink);
}
.cb-app .cb-vorschlag:hover {
  border-color: var(--cb-accent);
  background: var(--cb-accent-tint);
}

/* Frage: getönte Fläche mit Akzentrahmen und DUNKLER Tinte. Gefüllt mit
   weißer Schrift wäre sie bei den hellen Themes nicht lesbar. */
.cb-app .cb-frage-blase {
  align-self: flex-end;
  max-width: 32rem;
  background: var(--cb-accent-tint);
  border: 1px solid var(--cb-accent);
  border-radius: var(--border-radius, 6px) var(--border-radius, 6px) 2px var(--border-radius, 6px);
  padding: .55rem .8rem;
  font-size: .95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Antwort: wird Dokument. */
.cb-app .cb-antwort-block { display: block; }
.cb-app .cb-rolle {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cb-faint);
  margin: 0 0 .5rem calc(var(--cb-rand) + var(--cb-spalt));
}

.cb-app .cb-doc {
  display: grid;
  grid-template-columns: var(--cb-rand) minmax(0, var(--cb-mass));
  gap: 0 var(--cb-spalt);
}
.cb-app .cb-doc-rand { text-align: right; }

/* Umschlag um den Markdown-Koerper. Dessen Inhalt wird bei jedem Textstueck
   ersetzt (zeigeAntwort setzt innerHTML) -- Auszuege und die „Lag vor"-Zeile
   sind deshalb Geschwister und liegen hier, nicht darin. */
.cb-app .cb-doc-spalte { min-width: 0; }
.cb-app .cb-doc-text {
  font-family: var(--cb-serif);
  font-size: 1.02rem;
  line-height: 1.62;
  min-width: 0;
}

/* Der Markdown-Körper wird nur INNERHALB des Chatfensters auf Serifen
   gestellt — die Verlaufsansicht (gespraech.php) nutzt `.cb-text`
   ebenfalls und bleibt unberührt, bis sie bewusst nachgezogen wird. */
.cb-app .cb-doc-text.cb-text code { font-family: var(--cb-mono); }

/* ── Belege im Rand ──────────────────────────────────────────────────── */
.cb-app .cb-belege {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-end;
}
.cb-app .cb-belege-titel {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-faint);
  font-weight: 600;
}
/* Adresse in TINTE, Theme-Farbe nur als Linie darunter. */
.cb-app .cb-belege-zeile {
  font-family: var(--cb-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--cb-muted);
  text-align: right;
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.cb-app .cb-belege-adr {
  border-bottom: 1px dotted var(--cb-accent);
  padding-bottom: 1px;
}

/* Anklickbar: der Auszug klappt an der Antwort auf. KEIN <button>, weil die
   globale Regel `body:not(.admin-body) button` jeden Knopf per !important
   einfaerbt (auch `color: white !important`) -- eine textartige Schaltflaeche
   waere unsichtbar. Daher role="button" und die Zustaende hier von Hand. */
.cb-app .cb-belege-zeile[role="button"] { cursor: pointer; }
.cb-app .cb-belege-zeile[role="button"]:hover { color: var(--cb-ink); }
.cb-app .cb-belege-zeile[role="button"]:hover .cb-belege-adr { border-bottom-style: solid; }
.cb-app .cb-belege-zeile[aria-expanded="true"] { color: var(--cb-ink); }
.cb-app .cb-belege-zeile[aria-expanded="true"] .cb-belege-adr { border-bottom-style: solid; }

/* Aufgeklappter Auszug: im Lesemass, mit Akzentkante an der Seite. */
.cb-app .cb-auszug {
  margin: .6rem 0 .2rem;
  border: 1px solid var(--cb-rule-soft);
  border-left: 3px solid var(--cb-accent);
  border-radius: 0 var(--border-radius, 6px) var(--border-radius, 6px) 0;
  background: #fff;
  padding: .6rem .8rem;
  max-width: var(--cb-mass);
}
.cb-app .cb-auszug[hidden] { display: none; }
.cb-app .cb-auszug-kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--cb-mono);
  font-size: .76rem;
  color: var(--cb-muted);
  margin-bottom: .35rem;
}
.cb-app .cb-auszug-seite {
  font-family: var(--cb-mono);
  font-size: .76rem;
  color: var(--cb-accent-solid, #2563eb);
  text-decoration: underline;
  white-space: nowrap;
}
.cb-app .cb-auszug-text {
  font-family: var(--cb-serif);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--cb-ink);
  /* Der Auszug zeigt den Abschnitt jetzt GANZ (bis 1500 Zeichen), damit auch die
     fünfte zitierte Stelle einer Fundstelle sichtbar ist. Damit ein langer
     Paragraf die Antwort nicht aus dem Bild schiebt, wird hier gescrollt statt
     gekürzt — Weglassen hieße wieder raten, welche Stelle gemeint ist. */
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Zeilen UND Spaltenabstaende erhalten: der Auszug gibt den Abschnitt so
     wieder, wie er im Dokument steht. Ohne pre-wrap faellt die Ausrichtung
     einer Tabelle im Browser wieder weg, und das Gebuehrenverzeichnis liest
     sich erneut als Wortkette. */
  white-space: pre-wrap;
}
/* Ein Tabellenblock im Auszug. Festbreite, weil die Spaltenausrichtung in
   Leerzeichen steht und in einer Proportionalschrift verschwindet — genau daran
   sah das Gebuehrenverzeichnis auch mit richtig extrahiertem Text wieder wie
   eine Wortkette aus. Statt umzubrechen (was die Spalten erneut zerreisst),
   scrollt der Block waagerecht: 36rem Satzbreite reichen fuer die gemessenen
   94 Spalten nicht. */
.cb-app .cb-auszug-tab {
  font-family: var(--cb-mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--cb-ink);
  border: 1px solid var(--cb-rule-soft);
  border-radius: var(--border-radius, 6px);
  margin: .45rem 0;
  padding: .45rem .55rem;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* SCHATTEN AN DER KANTE, wo es weitergeht. Gemessen: das
     Gebuehrenverzeichnis braucht 100 Spalten = 711 px, das Lesemass gibt
     546 px. Kleiner setzen hiesse unter 10 px Schriftgroesse — dann ist die
     Tabelle ausgerichtet und unlesbar. Also scrollt sie, und der Schatten sagt
     es: sonst haelt man die abgeschnittene Spalte fuer das Ende der Tabelle
     (die Betraege stehen rechts!). Reines CSS ueber
     `background-attachment: local` — der Verlauf scrollt mit, der Schatten
     nicht. */
  /* Flaeche aus dem Token --cb-paper, nicht kuehles Slate: Die Palette dieses
     Bereichs ist warm gehalten, und ihr eigener Kommentar verwirft kuehle Toene
     ausdruecklich. `transparent` im Verlauf statt einer ausgeschriebenen Farbe,
     damit hier keine zweite Fassung des Tokens entsteht. */
  background:
    linear-gradient(to right, var(--cb-paper) 45%, transparent) left / 36px 100% no-repeat local,
    linear-gradient(to left, var(--cb-paper) 45%, transparent) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 25, 23, .16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 25, 23, .16), transparent) right / 12px 100% no-repeat scroll,
    var(--cb-paper);
}

/* Marke, Absatzangabe und das Satzzeichen dahinter bleiben zusammen. Sonst
   rutscht der Punkt hinter „[2]" allein in die naechste Zeile — die Marke ist
   ein inline-block und schafft damit eine Umbruchstelle. */
.cb-text .cb-marke,
.cb-belege .cb-marke { white-space: nowrap; }
/* Und ohne Luft nach rechts, sonst schwebt der Punkt neben der Marke. Der
   Abstand zum naechsten Wort steckt im Leerzeichen des Textes, nicht hier; die
   Absatzangabe bringt ihren eigenen mit. */
.cb-text .cb-marke .cb-beleg,
.cb-belege .cb-marke .cb-beleg { margin-right: 0; }

/* Die Absatzangabe neben einer Marke: „[5] Abs. 1 Nr. 1". Sie gehoert zum
   Beleg, ist aber kein eigener — also die Schrift der Marke, jedoch ohne
   Flaeche. Anlass 2026-08-27: Das Modell schreibt die Angabe je Antwort in
   dieselbe Klammer wie die Nummer; verschluckt haette die Anzeige die genauere
   Auskunft. */
.cb-text .cb-beleg-zusatz,
.cb-belege .cb-beleg-zusatz {
    font-size: .78em;
    font-variant-numeric: tabular-nums;
    color: var(--cb-muted, #57534E);
    margin-left: .15rem;
    white-space: nowrap;
}

/* Die Inline-Marke [2] im Antworttext ist ebenfalls anklickbar — samt der
   Absatzangabe daneben, die zur selben Marke gehoert. */
.cb-app .cb-text .cb-beleg,
.cb-app .cb-text .cb-marke[data-nr] { cursor: pointer; }
.cb-app .cb-text .cb-beleg.cb-beleg-aktiv {
  background: var(--cb-accent-solid);
  color: #fff;
}

/* Nicht herangezogene Stelle: gleicher Weg, ruhiger gesetzt. */
.cb-app .cb-uebrig-marke {
  cursor: pointer;
  border-bottom: 1px dotted var(--cb-rule);
}
.cb-app .cb-uebrig-marke:hover {
  color: var(--cb-ink);
  border-bottom-color: var(--cb-accent);
}

/* Kennzahlen in der Rollenzeile (frueher Fusszeile am Seitenende). */
.cb-app .cb-rolle-zusatz { text-transform: none; letter-spacing: 0; }
.cb-app .cb-beleg-nr {
  font-weight: 600;
  color: var(--cb-ink);
}

/* Die Inline-Marke [2] im Antworttext: im Chatfenster in der Hausfarbe statt
   im festen Indigo. Die gemeinsame Vorgabe fuer die Verlaufsansicht bleibt
   unangetastet, bis sie bewusst nachgezogen wird. */
.cb-app .cb-text .cb-beleg {
  background: var(--cb-accent-tint);
  color: var(--cb-accent-solid);
}
.cb-app .cb-belege-herkunft {
  display: block;
  font-family: var(--font, system-ui), sans-serif;
  font-size: .7rem;
  color: var(--cb-faint);
}
.cb-app .cb-belege-warnung {
  font-size: .75rem;
  color: #92400E;
  text-align: right;
  line-height: 1.35;
}
/* Diese Liste steht UNTER dem Antworttext, nicht im Rand: im 8,5rem breiten
   Rand brach sie auf fuenf rechtsbuendige Zeilen und war unlesbar. Sie bleibt
   sichtbar -- dass eine Stelle vorlag und nicht herangezogen wurde, ist die
   eigentliche Information bei einer schwachen Antwort. */
.cb-app .cb-belege-uebrig {
  font-family: var(--font, system-ui), sans-serif;
  font-size: .78rem;
  color: var(--cb-muted);
  text-align: left;
  line-height: 1.45;
  margin-top: .7rem;
  padding-top: .45rem;
  border-top: 1px solid var(--cb-rule-soft);
  max-width: var(--cb-mass);
}

/* ── Hinweise im Verlauf (abgewiesene Frage, Fehler) ─────────────────── */
.cb-app .cb-hinweis {
  display: grid;
  grid-template-columns: var(--cb-rand) minmax(0, var(--cb-mass));
  gap: 0 var(--cb-spalt);
}
.cb-app .cb-hinweis-marke {
  text-align: right;
  font-family: var(--cb-mono);
  font-size: .76rem;
  color: #92400E;
}
.cb-app .cb-hinweis-text {
  border-radius: var(--border-radius, 6px);
  padding: .6rem .8rem;
  font-size: .88rem;
  line-height: 1.45;
  background: #FBF0DC;
  border: 1px solid #E8CFA0;
}
.cb-app .cb-hinweis-fehler .cb-hinweis-text {
  background: #FDEAEA;
  border-color: #F0BFBF;
}
.cb-app .cb-hinweis-fehler .cb-hinweis-marke { color: #9B1C1C; }

/* ── Eingabe: klebt unten, wächst mit ────────────────────────────────── */
.cb-app .cb-composer {
  /* Kein `sticky` mehr: das Fenster hat eine feste Hoehe, die Eingabe sitzt
     durch das Flex-Layout an seiner Unterkante -- auch bei leerem Verlauf. */
  flex: 0 0 auto;
  margin: 0;
  padding: .55rem var(--cb-luft) .65rem;
  background: #fff;
  border-top: 1px solid var(--cb-rule);
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass));
}
.cb-app .cb-feld {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--cb-rule);
  border-radius: var(--border-radius, 6px);
  padding: .3rem .3rem .3rem .65rem;
}
.cb-app .cb-feld:focus-within { border-color: var(--cb-accent); }
.cb-app .cb-eingabe {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  resize: none;
  margin: 0;
  padding: .2rem 0;
  min-height: 1.6rem;
  max-height: 9rem;
  overflow-y: auto;
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--cb-ink);
  box-shadow: none;
}
.cb-app .cb-eingabe:focus { outline: none; box-shadow: none; }

.cb-app .cb-fuesse {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--cb-faint);
  line-height: 1.4;
}
.cb-app .cb-taste {
  font-family: var(--cb-mono);
  font-size: .72rem;
  background: var(--cb-paper);
  border: 1px solid var(--cb-rule);
  border-radius: 3px;
  padding: 0 .25rem;
}

/* Der Absende-Knopf bleibt ein <button> und damit von der globalen
   `body:not(.admin-body) button`-Regel themen-eingefärbt — das ist hier
   ERWÜNSCHT, er soll die Hausfarbe tragen. Nur Maße und Abstand hier. */
/* Der Knopf bleibt ein <button> und damit von der globalen Regel
   `body:not(.admin-body) button` geformt -- die faerbt ihn mit `var(--primary)`
   und erzwingt `color: white !important`.
   GEMESSEN: Weiss auf --primary ergibt bei Gruen 2,93 : 1, bei Sand 2,98 und
   bei Amber 3,31 -- alle unter AA (4,5). Deshalb hier der abgedunkelte Ton, mit
   dem alle 23 Themes bestehen. `background` traegt in der globalen Regel KEIN
   !important, die Ueberschreibung greift also.
   Der gleiche Mangel besteht produktweit fuer jeden Knopf; das ist eine eigene
   Entscheidung und hier bewusst nicht mitgeloest. */
.cb-app .cb-senden {
  white-space: nowrap;
  margin: 0;
  /* Die globale Regel gibt jedem Knopf `padding: .6rem 1.2rem` -- damit war er
     43 px hoch und zog das Eingabefeld auf 60 px, obwohl das Textfeld nur 29 px
     braucht. Schriftgroesse und Zeilenhoehe sind dort !important und bleiben. */
  padding: .3rem .8rem;
  /* Die globale Knopf-Regel setzt inline-flex ohne Abstand; vorher hielt ein
     Inline-Stil am <i> die Luecke, den es nicht mehr gibt. */
  gap: .45rem;
  /* !important ist hier kein Geschmack: styles.css setzt fuer jeden Knopf im
     Nicht-Admin-Bereich `background-color: var(--primary) !important`, und eine
     !important-Langform schlaegt jede Kurzform. Ohne das blieb der Knopf beim
     hellen Themefarbton -- weiss darauf sind bei Gruen 2,93 : 1. */
  background-color: var(--cb-accent-solid) !important;
}
.cb-app .cb-senden:hover {
  background-color: color-mix(in srgb, var(--cb-accent-solid) 85%, #000) !important;
}
.cb-app .cb-status {
  font-size: .8rem;
  color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
}

/* Streaming: ein Cursor, keine hüpfenden Punkte. */
.cb-app .cb-cursor {
  display: inline-block;
  width: .5ch;
  height: 1.05em;
  background: var(--cb-accent-solid);
  vertical-align: -.16em;
  margin-left: .06em;
  animation: cbBlink 1.05s steps(1) infinite;
}
@keyframes cbBlink { 50% { opacity: 0; } }

/* „Grundlage der Antwort" und „Frühere Gespräche" -- ruhige Bloecke unter dem
   Gespraech. Die Fundstellen-KARTEN am Seitenende sind entfallen: sie zeigten
   nur die letzte Antwort und wurden bei jeder neuen Frage ueberschrieben.
   Der Auszug klappt jetzt an der Antwort auf und bleibt im Verlauf stehen. */
.cb-app .cb-fundstellen-bereich { margin-top: 2rem; }
.cb-app .cb-fundstellen-titel {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cb-faint);
  font-weight: 600;
  margin: 0 0 .6rem;
}

/* ── Nur in der Verlaufsansicht (gespraech.php) ──────────────────────── */

/* Das Blatt: dieselbe Abgrenzung wie das Chatfenster, aber es WAECHST mit dem
   Inhalt und scrollt nicht in sich -- ein Protokoll liest man von oben nach
   unten. Ohne Rahmen wirkte die Ansicht unfertig neben dem Fenster. */
.cb-app .cb-blatt {
  background: #fff;
  border: 1px solid var(--cb-rule);
  border-radius: var(--border-radius, 6px);
  overflow: hidden;
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass)
                  + 2 * var(--cb-luft));
}
.cb-app .cb-blatt .cb-strom {
  padding: 1.3rem var(--cb-luft);
}

/* Der Loesch-Block liegt unter dem Blatt und nimmt dasselbe Mass -- sonst lief
   er ueber die ganze Breite und stand quer zum Blatt darueber. */
.cb-app .cb-blatt ~ .cb-fundstellen-bereich {
  max-width: calc(var(--cb-rand) + var(--cb-spalt) + var(--cb-mass)
                  + 2 * var(--cb-luft));
}

/* Zeitstempel unter der Frage. Im Gesprächsfenster gibt es ihn nicht: dort ist
   die Frage gerade eben gestellt worden. */
.cb-app .cb-frage-zeit {
  align-self: flex-end;
  font-size: .72rem;
  color: var(--cb-faint);
  margin: -1.1rem .15rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* Vorgelegt, aber nicht herangezogen: sichtbar, aber zurückgenommen. Dass eine
   Stelle vorlag und die Antwort sie nicht nutzte, ist eine Information. */
.cb-app .cb-belege-zeile-uebrig { opacity: .65; }
.cb-app .cb-belege-zeile-uebrig .cb-belege-adr { border-bottom-color: var(--cb-rule); }

/* Suchkennzahlen des Protokolls. Ausführlicher als im Gesprächsfenster, weil
   hier die Nachvollziehbarkeit der Zweck der Seite ist. */
.cb-app .cb-suche {
  font-size: .78rem;
  color: var(--cb-faint);
  line-height: 1.45;
  margin: .7rem 0 0;
  padding-top: .45rem;
  border-top: 1px solid var(--cb-rule-soft);
  max-width: var(--cb-mass);
}

/* Löschen: eigene Farbe, weil dieser Knopf ein Protokoll vernichtet und nicht
   die Regelhandlung der Seite ist. Weiß auf #991B1B ergibt 8,9 : 1; die
   Hausfarbe wäre hier missverständlich (sie steht für die Regelhandlung), und
   --danger-red (#EF4444) erreicht mit weißer Schrift nur 3,3 : 1. */
.cb-app .cb-loeschen { background-color: #991B1B !important; }
.cb-app .cb-loeschen:hover { background-color: #7F1717 !important; }

@media (max-width: 1100px) {
  .cb-app .cb-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cb-app .cb-seite {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--cb-rule-soft);
    padding-top: 1.2rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .cb-app .cb-seite-block { flex: 1 1 18rem; }
}

/* ── Eng: der Rand wird zur Zeile über dem Absatz ────────────────────── */
@media (max-width: 900px) {
  .cb-app .cb-doc,
  .cb-app .cb-hinweis {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }
  .cb-app .cb-doc-rand,
  .cb-app .cb-hinweis-marke { text-align: left; }
  .cb-app .cb-belege {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem .7rem;
  }
  .cb-app .cb-belege-zeile,
  .cb-app .cb-belege-warnung,
  .cb-app .cb-belege-uebrig { text-align: left; }
  .cb-app .cb-belege-herkunft { display: inline; margin-left: .3rem; }
  .cb-app .cb-rolle,
  .cb-app .cb-leer { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-app .cb-cursor { animation: none; }
}

/* ── Wiedervorlage im Arbeitsvorrat ─────────────────────────────────────────
   Zwei Zustände, zwei Farben: Ein zurückgestellter Vorgang ruht (ruhiges Grau-
   Blau, er verlangt gerade nichts), ein fälliger verlangt Aufmerksamkeit
   (Bernstein, wie die Frist-Mahnung daneben). Dieselbe Form wie die übrigen
   Marken der Liste — sie stehen nebeneinander und sollen als eine Familie
   lesen. */
.dash-wv-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  background: #EEF2F7; color: #475569; border: 1px solid #CBD5E1;
  padding: .15rem .45rem; border-radius: 99px; margin-left: .4rem;
  white-space: nowrap;
}
.dash-wv-badge--faellig {
  background: #FEF3C7; color: #92400E; border-color: #F59E0B;
}

/* ── Sterne-Bewertung (Feldtyp `bewertung`, EKMA-Analyse 5.4) ────────────────
   Die Sterne stehen RÜCKWÄRTS im Quelltext (5 … 1) und werden hier per
   row-reverse zurückgedreht. Nur dadurch kann ein Nachbar-Selektor die Sterne
   links des gewählten treffen — `~` greift ausschließlich nach vorn. Der
   Kniff spart das JavaScript: Ohne ihn wäre nicht zu sehen, was gewählt ist. */
.om-sterne {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .15rem;
  margin: .25rem 0 .35rem;
}
.om-sterne-stern {
  font-size: 1.75rem;
  line-height: 1;
  color: #D1D5DB;
  cursor: pointer;
  margin-bottom: 0;
  transition: color .1s ease-in-out;
}
/* Der gewählte Stern und alle links davon. */
.om-sterne-radio:checked ~ .om-sterne-stern { color: #F59E0B; }

/* Solange die Maus über der Reihe liegt, gilt NUR die Vorschau: Erst ALLE
   Sterne zurücknehmen, dann den überfahrenen Bereich füllen. Ohne die
   Rücknahme blieben beim Überfahren beide Bereiche gefüllt und man sähe nicht,
   was ein Klick bewirkt.

   DIE RÜCKNAHME MUSS SCHWACH SEIN. Sie greift alle Sterne über eine Klasse und
   den Zustand der Reihe (drei Stufen). Ein erster Versuch nahm stattdessen den
   gewählten Stand über `:checked ~` zurück — fünf Stufen, und damit schlug sie
   die Regel für den überfahrenen Stern SELBST (vier Stufen). Beim Überfahren
   des zweiten Sterns leuchtete dann nur der erste vor. Im Browser gemessen,
   nicht am Quelltext geraten: Die Reihenfolge der Regeln allein entscheidet
   nur bei GLEICHER Spezifität. */
.om-sterne:hover .om-sterne-stern { color: #D1D5DB; }
.om-sterne:hover .om-sterne-stern:hover,
.om-sterne:hover .om-sterne-stern:hover ~ .om-sterne-stern { color: #FBBF24; }

/* Der Radio selbst ist unsichtbar; die Tastatur-Markierung muss deshalb am
   Stern erscheinen, sonst ist das Feld ohne Maus nicht bedienbar. */
.om-sterne-radio:focus-visible + .om-sterne-stern {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 3px;
}
.om-sterne-keine {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: #6B7280;
  cursor: pointer;
}
/* Globale Falle: `input { margin-bottom: 1rem }` würde diesen Radio aus der
   Zeile seiner Beschriftung schieben. */
.om-sterne-keine input { margin-bottom: 0; }

.om-sterne-kommentar-label {
  display: block;
  margin-top: .6rem;
  font-size: .85rem;
}

/* ── „Vorgang verwalten" ─────────────────────────────────────────────────────
   Wiedervorlage, interne Notiz und Stornieren in EINER Karte. Alle drei
   betreffen die Verwaltung des Vorgangs statt des Antrags und sind im Normalfall
   leer — als drei Karten kosteten sie Platz für nichts.

   Die Statuszeile bleibt immer sichtbar: Eine gesetzte Wiedervorlage und eine
   vorhandene Notiz MELDEN etwas, und was hinter einem zugeklappten Teil liegt,
   sieht niemand. */
.clerk-manage-card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
.clerk-manage-title {
  margin: 0 0 .5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9CA3AF;
}
.clerk-manage-status {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 0 0 .75rem;
  font-size: .82rem;
  color: #374151;
}
.clerk-manage-flag { display: inline-flex; align-items: center; gap: .3rem; }
.clerk-manage-flag i { color: #B45309; }
.clerk-manage-flag.is-due { color: #92400E; font-weight: 600; }
.clerk-manage-leer { color: #9CA3AF; }

.clerk-manage-part { border-top: 1px solid #F1F5F9; }
.clerk-manage-part > summary {
  cursor: pointer;
  padding: .55rem 0;
  font-size: .84rem;
  font-weight: 600;
  color: #374151;
  /* Der Standard-Marker sitzt in Firefox und Chrome unterschiedlich; ein
     eigener Pfeil wäre ein weiteres Zeichen zu pflegen. list-style genügt. */
  list-style-position: inside;
}
.clerk-manage-part > summary:hover { color: #111827; }
.clerk-manage-part[open] > summary { margin-bottom: .4rem; }
.clerk-manage-part textarea {
  margin-bottom: 0.75rem;
  min-height: 80px;
  resize: vertical;
}
/* Die globale Regel `form { background:white; box-shadow; padding:2rem }` ist
   für eigenständige Formulare gedacht. In einem Teil dieser Karte erzeugt sie
   einen Kasten IM Kasten und frisst genau den Platz, den das Bündeln einsparen
   soll. Der Fehler ist älter als die Karte — er stand vorher unbemerkt in den
   drei Einzelkarten. Bewusst nur hier zurückgenommen und nicht an
   `.clerk-notes-card`: die trägt noch andere Ansichten. */
.clerk-manage-part form {
  margin: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}