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

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

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

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

legend {
  float: none;
  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;
}

.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); }
body.theme-silver .clerk-sidebar-subsection-title,
body.theme-fog    .clerk-sidebar-subsection-title,
body.theme-pebble .clerk-sidebar-subsection-title { color: rgba(0,0,0,0.42); }
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;
  width: 100%;
  margin-top: 2rem;
}

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