/* === 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="text"],
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);
}

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

/* === 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. */
body:not(.admin-body) button,
body:not(.admin-body) .btn,
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:hover,
body:not(.admin-body) .btn:hover,
body:not(.admin-body) input[type="submit"]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

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

body:not(.admin-body) button,
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;
}
.pi-search-input {
  width: 100%;
  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;
  height: 100%;
  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;
}

.array-item .sub-field input[type="text"],
.array-item .sub-field input[type="number"],
.array-item .sub-field input[type="email"],
.array-item .sub-field input[type="tel"],
.array-item .sub-field input[type="date"],
.array-item .sub-field input[type="file"] {
  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;
}

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

.clerk-cancel-row {
  text-align: center;
  padding-top: 0.25rem;
}
.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-text {
  font-family: var(--cb-serif);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--cb-ink);
}

/* Die Inline-Marke [2] im Antworttext ist ebenfalls anklickbar. */
.cb-app .cb-text .cb-beleg { 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; }
}