/* =============================================================================
   WEBFORM – Vollständiges Styling für das Drupal Webform Modul
   Universität zu Köln · Zentrum für Lehrer*innenbildung · Formulardienst
   =============================================================================
   Abgedeckt:
   - Basis-Formularelemente (Input, Select, Textarea, Checkbox, Radio)
   - Fieldsets & Details (collapsible sections)
   - Mehrschrittformulare (Wizard) mit Fortschrittsanzeige
   - Composite-Elemente (Adresse, Name, Telefon)
   - Mehrfachfelder (Multiple / Tableselect)
   - Datei-Upload (Managed File)
   - Datum & Uhrzeit
   - Bewertung / Rating
   - Signatur-Widget
   - Bestätigungsseite
   - Drupal States API (konditionelle Felder)
   - Barrierefreiheit & Fokus-Management
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. FORM WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */

.webform-submission-form,
.webform-submission-add-form,
.webform-submission-edit-form,
.webform-submission-test-form {
  width: 100%;
  padding: var(--space-8) var(--space-6);
}

/* Progress-Leiste: weißer Hintergrund, keine Trennlinie */
.webform-wrapper > .webform-progress {
  padding: var(--space-5) var(--space-6) var(--space-4);
  margin-bottom: 0;
  background-color: var(--color-white);
}

/* Formular: oberes Padding reduziert, da Progress direkt darüber */
.webform-wrapper .webform-submission-form,
.webform-wrapper .webform-submission-add-form,
.webform-wrapper .webform-submission-edit-form,
.webform-wrapper .webform-submission-test-form {
  padding-top: var(--space-4);
}

/* Maximale Breite für Lesbarkeit – nur einzelne Felder, keine Wrapper/Fieldsets */
.webform-submission-form:not(.webform-submission-form--full-width) .js-form-item:not(.form-wrapper):not(fieldset),
.webform-submission-form:not(.webform-submission-form--full-width) .form-actions {
  max-width: 760px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FORTSCHRITTSANZEIGE (WIZARD / MEHRSTUFIGE FORMULARE)
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper: volle Breite, weißer Hintergrund, Abstand nach unten */
.layout-content .webform-wrapper,
.layout-no-sidebars .layout-content .webform-wrapper {
  margin-inline: calc(-1 * var(--space-6));
  width: calc(100% + 2 * var(--space-6));
  background-color: var(--color-white);
  margin-bottom: var(--space-8);
}

.webform-progress {
  margin-bottom: 0;
  width: 100%;
}

/* --- Variante: Progress Bar --- */
.webform-progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.webform-progress-bar__number {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
}

.webform-progress-bar__bar-outer {
  width: 100%;
  height: 6px;
  background-color: var(--color-sand-200);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.webform-progress-bar__bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--color-uni-blau), var(--color-tuerkis));
  border-radius: var(--border-radius-full);
  transition: width var(--transition-slow);
}

.webform-progress-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.webform-progress-bar__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.webform-progress-bar__label--active {
  color: var(--color-uni-blau);
  font-weight: var(--font-weight-semibold);
}

.webform-progress-bar__label--completed {
  color: var(--color-tuerkis);
}

/* --- Variante: Progress Tracker (Schritt-Indikatoren) --- */
.webform-progress-tracker {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: var(--space-10);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.webform-progress-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 80px;
  position: relative;
  gap: var(--space-2);
}

/* Verbindungslinie zwischen Schritten */
.webform-progress-tracker__step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background-color: var(--color-sand-200);
  z-index: 0;
}

.webform-progress-tracker__step:last-child::before {
  display: none;
}

.webform-progress-tracker__step--completed::before {
  background-color: var(--color-tuerkis);
}

.webform-progress-tracker__indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-sand-200);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  position: relative;
  z-index: 1;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.webform-progress-tracker__step--completed .webform-progress-tracker__indicator {
  background-color: var(--color-tuerkis);
  border-color: var(--color-tuerkis);
  color: var(--color-white);
}

.webform-progress-tracker__step--completed .webform-progress-tracker__indicator::after {
  content: '✓';
  font-size: 0.75rem;
}

.webform-progress-tracker__step--current .webform-progress-tracker__indicator {
  background-color: var(--color-uni-blau);
  border-color: var(--color-uni-blau);
  color: var(--color-white);
  box-shadow: 0 0 0 4px var(--color-uni-blau-10);
}

.webform-progress-tracker__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-align: center;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--line-height-snug);
  max-width: 80px;
}

.webform-progress-tracker__step--current .webform-progress-tracker__label {
  color: var(--color-uni-blau);
  font-weight: var(--font-weight-semibold);
}

.webform-progress-tracker__step--completed .webform-progress-tracker__label {
  color: var(--color-tuerkis);
}

/* Wizard-Seiten-Titel */
.webform-page-title,
.webform-wizard-page h2:first-child {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-uni-blau);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-tuerkis);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. FORMULAR-ELEMENTE (LABELS, INPUTS, SELECT, TEXTAREA)
   ───────────────────────────────────────────────────────────────────────────── */

/* Form Item Wrapper */
.js-form-item,
.form-item {
  margin-bottom: var(--space-8);
}

/* Enge Items (z.B. inline) */
.form-item--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

/* Labels */
.form-item__label,
.webform-submission-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-uni-blau);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

/* Pflichtfeld-Marker */
.form-required,
.form-item__label .form-required {
  color: var(--color-uni-blau);
  margin-left: 2px;
  font-weight: var(--font-weight-bold);
}

.form-required::after {
  content: ' *';
}

.form-item__label .form-required::after {
  content: ' *';
}

/* Label optionale Kennzeichnung */
.form-item__label .form-optional {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-400);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--space-2);
}

/* Eingabefelder – alle Text-basierten */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="password"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="search"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input[type="datetime-local"],
.webform-submission-form input[type="month"],
.webform-submission-form input[type="week"],
.webform-submission-form select,
.webform-submission-form textarea,
.form-text,
.form-email,
.form-tel,
.form-url,
.form-number,
.form-date,
.form-time,
.form-select,
.form-textarea,
.form-autocomplete {
  display: block;
  width: 100%;
  padding: 0.625rem var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 2px solid var(--color-sand-200);
  border-radius: var(--border-radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
}

.webform-submission-form input::placeholder,
.webform-submission-form textarea::placeholder {
  color: var(--color-gray-400);
  font-weight: var(--font-weight-regular);
}

.webform-submission-form input:hover,
.webform-submission-form select:hover,
.webform-submission-form textarea:hover {
  border-color: var(--color-sand-300);
}

.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  outline: none;
  border-color: var(--color-tuerkis);
  box-shadow: 0 0 0 4px var(--color-tuerkis-10);
  background-color: var(--color-white);
}

/* Fehlerzustand */
.form-item--error input,
.form-item--error select,
.form-item--error textarea,
.webform-submission-form input.error,
.webform-submission-form select.error,
.webform-submission-form textarea.error {
  border-color: var(--color-korall);
  background-color: var(--color-korall-10);
}

.form-item--error input:focus,
.form-item--error select:focus,
.form-item--error textarea:focus {
  border-color: var(--color-korall);
  box-shadow: 0 0 0 4px var(--color-korall-10);
}

/* Deaktivierte Felder */
.webform-submission-form input:disabled,
.webform-submission-form select:disabled,
.webform-submission-form textarea:disabled {
  background-color: var(--color-sand-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
  border-color: var(--color-sand-200);
}

/* Nur-Lesen */
.webform-submission-form input[readonly],
.webform-submission-form textarea[readonly] {
  background-color: var(--color-sand-50);
  color: var(--color-gray-500);
}

/* Textarea */
.webform-submission-form textarea,
.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

/* Select */
.webform-submission-form select,
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23005176' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Beschreibungen / Hilfetext */
.form-item__description,
.description,
.webform-element-description {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  line-height: var(--line-height-relaxed);
}

/* Fehlermeldungen */
.form-item__error-message,
.webform-submission-form .error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-korall);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.form-item__error-message::before {
  content: '⚠';
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. CHECKBOXEN & RADIO-BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper für Checkbox/Radio-Gruppen */
.form-type--checkboxes,
.form-type--radios,
.js-form-type-checkboxes,
.js-form-type-radios {
  margin-bottom: var(--space-5);
}

/* Gruppen-Label */
.form-type--checkboxes > label,
.form-type--radios > label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-uni-blau);
  margin-bottom: var(--space-3);
}

/* Einzelne Checkbox / Radio – Grid: Box links, Label daneben,
   Beschreibung darunter (eingerückt unter dem Label, volle Breite).
   Beide Drupal-Klassenvarianten (form-type-checkbox / form-type--checkbox). */
.form-type--checkbox,
.form-type--radio,
.form-type-checkbox,
.form-type-radio,
.js-form-type-checkbox,
.js-form-type-radio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

/* Box in Spalte 1, Label in Spalte 2 (jeweils Zeile 1) */
.form-type--checkbox > input,
.form-type--radio > input,
.form-type-checkbox > input,
.form-type-radio > input,
.js-form-type-checkbox > input,
.js-form-type-radio > input {
  grid-column: 1;
  grid-row: 1;
}

.form-type--checkbox > label,
.form-type--radio > label,
.form-type-checkbox > label,
.form-type-radio > label,
.js-form-type-checkbox > label,
.js-form-type-radio > label,
.form-type--checkbox > label.option,
.form-type--radio > label.option,
.form-type-checkbox > label.option,
.form-type-radio > label.option,
.js-form-type-checkbox > label.option,
.js-form-type-radio > label.option {
  grid-column: 2;
  grid-row: 1;
}

/* Beschreibung: Spalte 2, Zeile 2 – unter dem Label, volle Breite */
.form-type--checkbox > .description,
.form-type--radio > .description,
.form-type-checkbox > .description,
.form-type-radio > .description,
.js-form-type-checkbox > .description,
.js-form-type-radio > .description,
.form-type--checkbox > .webform-element-description,
.form-type--radio > .webform-element-description,
.js-form-type-checkbox > .webform-element-description,
.js-form-type-radio > .webform-element-description {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.form-type--checkbox:hover,
.form-type--radio:hover,
.form-type-checkbox:hover,
.form-type-radio:hover {
  background-color: var(--color-sand-50);
}

.form-type--checkbox label,
.form-type--radio label,
.form-type-checkbox label,
.form-type-radio label,
.js-form-type-checkbox label,
.js-form-type-radio label,
.form-type--checkbox label.option,
.form-type--radio label.option,
.form-type-checkbox label.option,
.form-type-radio label.option,
.js-form-type-checkbox label.option,
.js-form-type-radio label.option,
label.option {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-gray-700);
  cursor: pointer;
  line-height: var(--line-height-normal);
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  display: inline-block;
}

/* Native Checkbox / Radio ausblenden, Custom-Elemente */
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"],
.form-checkbox,
.form-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-sand-300);
  border-radius: var(--border-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
}

.webform-submission-form input[type="radio"],
.form-radio {
  border-radius: 50%;
}

/* Checkbox: Checked */
.webform-submission-form input[type="checkbox"]:checked,
.form-checkbox:checked {
  background-color: var(--color-tuerkis);
  border-color: var(--color-tuerkis);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M1 5.5l4 4 8-8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Radio: Checked */
.webform-submission-form input[type="radio"]:checked,
.form-radio:checked {
  border-color: var(--color-tuerkis);
  background-image: radial-gradient(circle, var(--color-tuerkis) 42%, transparent 42%);
}

/* Focus */
.webform-submission-form input[type="checkbox"]:focus-visible,
.webform-submission-form input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-tuerkis-10), 0 0 0 2px var(--color-tuerkis);
}

/* Fehler-Checkbox */
.form-item--error input[type="checkbox"],
.form-item--error input[type="radio"] {
  border-color: var(--color-korall);
}

/* Mehrspaltige Optionen – auto-fit: Spalten bilden sich nur, wenn genug
   Platz da ist. Bei langen Labels bleibt automatisch eine breite Spalte,
   statt die Labels in zu schmale Spalten zu quetschen. */
.webform-options-display-two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.webform-options-display-three-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-4);
}

/* side-by-side: nebeneinander im Fluss, umbrechend */
.webform-options-display-side-by-side {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.webform-options-display-side-by-side .form-type--checkbox,
.webform-options-display-side-by-side .form-type--radio,
.webform-options-display-two-columns .form-type--checkbox,
.webform-options-display-two-columns .form-type--radio,
.webform-options-display-three-columns .form-type--checkbox,
.webform-options-display-three-columns .form-type--radio,
.webform-options-display-side-by-side .form-type-checkbox,
.webform-options-display-side-by-side .form-type-radio,
.webform-options-display-two-columns .form-type-checkbox,
.webform-options-display-two-columns .form-type-radio,
.webform-options-display-three-columns .form-type-checkbox,
.webform-options-display-three-columns .form-type-radio {
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* Lange Labels (z.B. Hashtags mit Unterstrichen) umbrechen lassen */
.webform-options-display-side-by-side label,
.webform-options-display-two-columns label,
.webform-options-display-three-columns label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. FIELDSETS & DETAILS (COLLAPSIBLE SECTIONS)
   ───────────────────────────────────────────────────────────────────────────── */

fieldset.form-wrapper,
.fieldset {
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background-color: var(--color-white);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

fieldset.form-wrapper legend,
.fieldset__legend {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-uni-blau);
  padding: 0 var(--space-3);
  /* Linie durch Legende */
  background-color: var(--color-white);
  margin-left: calc(-1 * var(--space-3));
}

/* Details / Accordion */
details.form-wrapper {
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-4);
  background-color: var(--color-white);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

/* Webform-Section: schlicht, als normaler Textabschnitt ohne Rahmen */
.webform-section {
  border: none;
  border-radius: 0;
  margin-bottom: var(--space-8);
  background-color: transparent;
  padding: 0;
}

.webform-section .webform-section-wrapper {
  padding: 0;
}

.webform-section-title,
.webform-section__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-uni-blau);
  margin: 0 0 var(--space-4);
  padding: 0;
}

details.form-wrapper:hover {
  box-shadow: var(--shadow-sm);
}

details.form-wrapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-uni-blau);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--transition-fast);
}

details.form-wrapper > summary:hover {
  background-color: var(--color-sand-50);
}

details.form-wrapper > summary::-webkit-details-marker,
details.form-wrapper > summary::marker {
  display: none;
}

/* Pfeil-Icon */
details.form-wrapper > summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-uni-blau);
  border-bottom: 2px solid var(--color-uni-blau);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

details[open].form-wrapper > summary::after {
  transform: rotate(-135deg);
}

/* Geöffnet: Akzentlinie oben */
details[open].form-wrapper {
  border-top-color: var(--color-tuerkis);
  border-top-width: 3px;
}

details[open].form-wrapper > summary {
  border-bottom: 1px solid var(--color-sand-200);
  background-color: var(--color-sand-50);
}

.details-wrapper,
.fieldset-wrapper {
  padding: var(--space-6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. COMPOSITE-ELEMENTE (ADRESSE, NAME, TELEFON)
   ───────────────────────────────────────────────────────────────────────────── */

/* Allgemeine Composite-Layout */
.webform-composite-elements,
.form-composite .fieldset-wrapper,
.fieldgroup.form-composite > .fieldset-wrapper,
.fieldgroup.form-composite > .details-wrapper {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

/* Mehrspaltige Fieldgroup-Layouts */
.fieldgroup.form-composite.form-composite--2col > .fieldset-wrapper,
.fieldgroup.form-composite.form-composite--2col > .details-wrapper {
  grid-template-columns: 1fr 1fr;
}

.fieldgroup.form-composite.form-composite--3col > .fieldset-wrapper,
.fieldgroup.form-composite.form-composite--3col > .details-wrapper {
  grid-template-columns: repeat(3, 1fr);
}

/* Fieldgroup Fieldset: volle Breite, kein overflow */
fieldset.fieldgroup,
.fieldgroup.form-composite {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Adress-Element */
.webform-element--type-webform-address .webform-composite-elements {
  grid-template-columns: 1fr;
}

.webform-address-container-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.webform-address-container-inline .webform-address--city {
  grid-column: 1;
}

.webform-address-container-inline .webform-address--state-province {
  grid-column: 2;
}

/* Name-Element */
.webform-element--type-webform-name .webform-composite-elements {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.webform-element--type-webform-name .form-item--webform-name-title {
  grid-column: 1 / -1;
}

/* Telefon-Element */
.webform-element--type-webform-telephone .webform-composite-elements {
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
}

/* Datum-Zeit kombiniert */
.webform-element--type-datetime .form-item--type-date,
.webform-element--type-datetime .form-item--type-time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. MEHRFACHFELDER (MULTIPLE VALUES)
   ───────────────────────────────────────────────────────────────────────────── */

.webform-multiple-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
}

.webform-multiple-table thead th {
  background-color: var(--color-uni-blau);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: none;
}

.webform-multiple-table tbody tr {
  border-bottom: 1px solid var(--color-sand-200);
}

.webform-multiple-table tbody tr:last-child {
  border-bottom: none;
}

.webform-multiple-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}

/* Zeilen-Gripper (Drag Handle) */
.webform-multiple-table td.webform-multiple-table--weight,
.webform-multiple-table .tabledrag-cell {
  width: 40px;
  cursor: grab;
  color: var(--color-gray-400);
  text-align: center;
}

.webform-multiple-table td.webform-multiple-table--operations {
  width: 48px;
  text-align: center;
}

/* Eintrag entfernen Button */
.webform-multiple-table .webform-multiple-remove-button,
.webform-multiple-table button[value="Remove"] {
  background: transparent;
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-400);
  font-size: 1rem;
  transition: all var(--transition-fast);
  padding: 0;
}

.webform-multiple-table .webform-multiple-remove-button:hover {
  background-color: var(--color-korall-10);
  border-color: var(--color-korall);
  color: var(--color-korall);
}

/* "Weiteren Eintrag hinzufügen" */
.webform-multiple-add {
  margin-top: var(--space-3);
}

.webform-multiple-add button,
.webform-multiple-add .button {
  background: transparent;
  border: 2px dashed var(--color-tuerkis-30);
  border-radius: var(--border-radius-md);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-tuerkis);
  cursor: pointer;
  width: 100%;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.webform-multiple-add button::before {
  content: '+';
  font-size: 1.25em;
  font-weight: var(--font-weight-bold);
}

.webform-multiple-add button:hover {
  background-color: var(--color-tuerkis-10);
  border-color: var(--color-tuerkis);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. DATEI-UPLOAD (MANAGED FILE)
   ───────────────────────────────────────────────────────────────────────────── */

.form-type--managed-file,
.webform-element--type-managed-file,
.js-form-managed-file {
  margin-bottom: var(--space-5);
}

/* Upload-Bereich */
.form-managed-file,
.webform-managed-file {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Drag-Drop-Zone */
.js-form-managed-file .dropzone,
.webform-managed-file .dropzone,
.dropzone {
  border: 2px dashed var(--color-sand-300);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--color-sand-50);
  cursor: pointer;
  transition: all var(--transition-base);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--color-tuerkis);
  background-color: var(--color-tuerkis-10);
}

.dropzone__icon {
  font-size: 2.5rem;
  color: var(--color-gray-400);
  margin-bottom: var(--space-3);
}

.dropzone__text {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.dropzone__text strong {
  color: var(--color-tuerkis);
}

/* Native File-Input versteckt */
.form-type--managed-file input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  position: absolute;
}

/* Von Drupal ausgeblendete Elemente (Core-Verhalten, im Theme nachgereicht).
   Ohne diese Regel bleibt z.B. der Upload-Button nach dem Hochladen sichtbar. */
.js-hide {
  display: none !important;
}

/* File-Upload-Buttons (Datei auswählen / hochladen / entfernen) */
.file-upload-button,
.js-form-managed-file .button,
.webform-file-button,
.button.button-action.webform-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-uni-blau);
  border: 2px solid var(--color-uni-blau);
  border-radius: var(--border-radius-full);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.file-upload-button:hover,
.js-form-managed-file .button:hover,
.webform-file-button:hover,
.button.button-action.webform-file-button:hover {
  background-color: var(--color-tuerkis);
  border-color: var(--color-tuerkis);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.file-upload-button:active,
.js-form-managed-file .button:active,
.webform-file-button:active,
.button.button-action.webform-file-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.file-upload-button:focus-visible,
.webform-file-button:focus-visible,
.button.button-action.webform-file-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-tuerkis-10), 0 0 0 2px var(--color-tuerkis);
}

/* Hochgeladene Datei Anzeige */
.file--mime-type,
.file-link,
.file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-sand-50);
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.file-link a {
  color: var(--color-uni-blau);
  font-weight: var(--font-weight-medium);
  word-break: break-all;
}

/* Datei entfernen */
.file-remove-button,
[data-drupal-selector*="remove"] {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--border-radius-sm);
  transition: color var(--transition-fast);
  font-size: 1rem;
}

.file-remove-button:hover {
  color: var(--color-korall);
}

/* Upload-Fortschrittsbalken */
.webform-managed-file .progress {
  height: 4px;
  background-color: var(--color-sand-200);
  border-radius: var(--border-radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}

.webform-managed-file .progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-uni-blau), var(--color-tuerkis));
  border-radius: var(--border-radius-full);
  transition: width var(--transition-base);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. DATUM & UHRZEIT
   ───────────────────────────────────────────────────────────────────────────── */

.webform-element--type-date input[type="date"],
.webform-element--type-datetime input[type="datetime-local"],
.form-date,
.form-time {
  cursor: pointer;
}

/* Datepicker Wrapper (jQuery UI) */
.ui-datepicker {
  background: var(--color-white);
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  padding: var(--space-4);
  z-index: 300;
}

.ui-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-sand-200);
}

.ui-datepicker-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-uni-blau);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
  color: var(--color-uni-blau);
  font-size: 1.25rem;
  user-select: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background-color: var(--color-sand-50);
}

.ui-datepicker table {
  width: 100%;
}

.ui-datepicker th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-400);
  padding: var(--space-1);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  background: none;
}

.ui-datepicker td {
  padding: 2px;
  text-align: center;
  border: none;
  background: none;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: 0 auto;
}

.ui-datepicker td a:hover {
  background-color: var(--color-sand-100);
  color: var(--color-uni-blau);
}

.ui-datepicker .ui-state-active {
  background-color: var(--color-uni-blau) !important;
  color: var(--color-white) !important;
}

.ui-datepicker .ui-state-highlight {
  border: 2px solid var(--color-tuerkis) !important;
  color: var(--color-tuerkis) !important;
  font-weight: var(--font-weight-bold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. BEWERTUNGS-WIDGET (RATING)
   ───────────────────────────────────────────────────────────────────────────── */

.webform-rating {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.webform-rating input[type="radio"] {
  display: none;
}

.webform-rating label {
  font-size: 1.75rem;
  color: var(--color-sand-200);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  padding: var(--space-1);
}

.webform-rating label:hover,
.webform-rating label:hover ~ label,
.webform-rating input[type="radio"]:checked ~ label {
  color: var(--color-tuerkis);
}

.webform-rating label:hover {
  transform: scale(1.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. SIGNATUR-WIDGET
   ───────────────────────────────────────────────────────────────────────────── */

.webform-signature {
  margin-bottom: var(--space-5);
}

.webform-signature-pad {
  border: 2px solid var(--color-sand-200);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  cursor: crosshair;
  display: block;
  width: 100%;
  max-width: 500px;
  height: 160px;
  transition: border-color var(--transition-fast);
}

.webform-signature-pad:hover {
  border-color: var(--color-uni-blau);
}

.webform-signature-reset {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  background: none;
  padding: 0;
  transition: color var(--transition-fast);
}

.webform-signature-reset:hover {
  color: var(--color-korall);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. TABLESELECT / TABELLE MIT AUSWAHL
   ───────────────────────────────────────────────────────────────────────────── */

.tableselect {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.tableselect thead th {
  background-color: var(--color-uni-blau);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: none;
}

.tableselect tbody tr {
  border-bottom: 1px solid var(--color-sand-100);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.tableselect tbody tr:last-child {
  border-bottom: none;
}

.tableselect tbody tr:hover {
  background-color: var(--color-sand-50);
}

.tableselect tbody tr.selected {
  background-color: var(--color-tuerkis-10);
}

.tableselect tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-700);
  border: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. RANGE / SLIDER
   ───────────────────────────────────────────────────────────────────────────── */

.webform-submission-form input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-sand-200);
  border-radius: var(--border-radius-full);
  outline: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.webform-submission-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-uni-blau);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.webform-submission-form input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.webform-submission-form input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-uni-blau);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Wert-Anzeige */
.webform-range-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.webform-range-value {
  min-width: 3rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-uni-blau);
  background-color: var(--color-uni-blau-10);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-full);
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. NUTZUNGSBEDINGUNGEN (TERMS OF SERVICE)
   ───────────────────────────────────────────────────────────────────────────── */

.webform-element--type-webform-terms-of-service {
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.webform-terms-of-service--link a,
.webform-terms-of-service--modal button {
  color: var(--color-tuerkis);
  font-weight: var(--font-weight-semibold);
}

.webform-terms-of-service--scroll {
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-sand-50);
  border-bottom: 1px solid var(--color-sand-200);
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  line-height: var(--line-height-relaxed);
  scrollbar-width: thin;
  scrollbar-color: var(--color-sand-300) transparent;
}

.webform-terms-of-service__checkbox {
  padding: var(--space-4) var(--space-5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. AKTIONSBEREICH (BUTTONS)
   ───────────────────────────────────────────────────────────────────────────── */

.form-actions,
.webform-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-sand-200);
}

/* Primär: Absenden */
.webform-button--submit,
.form-actions input[type="submit"],
.form-actions button[type="submit"] {
  background-color: var(--color-uni-blau);
  color: var(--color-white);
  border: 2px solid var(--color-uni-blau);
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
}

.webform-button--submit:hover {
  background-color: #004166;
  border-color: #004166;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.webform-button--submit:active {
  transform: translateY(0);
}

/* Wizard: Weiter */
.webform-button--next {
  background-color: var(--color-tuerkis);
  color: var(--color-white);
  border: 2px solid var(--color-tuerkis);
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.webform-button--next::after {
  content: '→';
}

.webform-button--next:hover {
  background-color: #007da3;
  border-color: #007da3;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Wizard: Zurück */
.webform-button--previous {
  background-color: transparent;
  color: var(--color-gray-500);
  border: 2px solid var(--color-sand-200);
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  order: -1;
}

.webform-button--previous::before {
  content: '←';
}

.webform-button--previous:hover {
  border-color: var(--color-gray-500);
  color: var(--color-gray-700);
}

/* Entwurf speichern */
.webform-button--draft {
  background: transparent;
  border: 2px solid var(--color-sand-200);
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: auto;
}

.webform-button--draft:hover {
  border-color: var(--color-gray-500);
  color: var(--color-gray-700);
}

/* Zurücksetzen */
.webform-button--reset,
.form-actions input[type="reset"],
.form-actions button[type="reset"] {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--transition-fast);
}

.webform-button--reset:hover {
  color: var(--color-korall);
}

/* Fokus auf alle Buttons */
.form-actions button:focus-visible,
.webform-actions button:focus-visible {
  outline: 3px solid var(--color-tuerkis);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. BESTÄTIGUNGSSEITE
   ───────────────────────────────────────────────────────────────────────────── */

.webform-confirmation {
  max-width: 640px;
  margin: var(--space-12) auto;
  text-align: center;
  padding: var(--space-12) var(--space-8);
}

.webform-confirmation__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-tuerkis-10);
  border: 3px solid var(--color-tuerkis);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: 2rem;
  color: var(--color-tuerkis);
}

.webform-confirmation__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-uni-blau);
  margin-bottom: var(--space-4);
}

.webform-confirmation__message {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  color: var(--color-gray-500);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.webform-confirmation .webform-confirmation__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-tuerkis);
  text-decoration: none;
  border: 2px solid var(--color-tuerkis);
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-6);
  transition: all var(--transition-fast);
}

.webform-confirmation .webform-confirmation__back:hover {
  background-color: var(--color-tuerkis);
  color: var(--color-white);
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. DRUPAL STATES API (KONDITIONELLE FELDER)
   ───────────────────────────────────────────────────────────────────────────── */

/* Ein-/Ausblendung konditioneller Felder.
   Doppelte Klasse = höhere Spezifität als alle display-Regeln des Themes,
   aber KEIN !important – Drupals States-JS blendet per Inline-Style ein/aus
   und muss diese Regel überschreiben können. */
.js-webform-states-hidden.js-webform-states-hidden,
fieldset.js-webform-states-hidden,
details.js-webform-states-hidden,
.js-form-item.js-webform-states-hidden,
.js-form-wrapper.js-webform-states-hidden {
  display: none;
}

/* Smooth Transitions für konditionelle Felder */
.form-item[data-drupal-states] {
  transition: opacity var(--transition-base), max-height var(--transition-slow);
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. AUTOCOMPLETE
   ───────────────────────────────────────────────────────────────────────────── */

.ui-autocomplete {
  background: var(--color-white);
  border: 1px solid var(--color-sand-200);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  z-index: 400;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-2) 0;
}

.ui-autocomplete .ui-menu-item {
  padding: 0;
  list-style: none;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  color: var(--color-gray-700);
  transition: background-color var(--transition-fast);
  display: block;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-state-active {
  background-color: var(--color-sand-50);
  color: var(--color-uni-blau);
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. INLINE-FORMULARE & SPEZIELLE LAYOUTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Zweispaltig (für breite Felder nebeneinander) */
.webform-element--wrapper--2col,
.webform-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Dreispaltig */
.webform-element--wrapper--3col,
.webform-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Abschnitt-Beschriftung */
.webform-element--type-webform-section > .form-item__label {
  font-size: var(--font-size-base);
  border-bottom: 2px solid var(--color-tuerkis);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Trennlinie */
.webform-element--type-webform-horizontal-rule hr {
  border: none;
  border-top: 1px solid var(--color-sand-200);
  margin: var(--space-6) 0;
}

/* Markup / Hinweistext / Processed Text – konsistent mit dem Formularlayout */
.webform-element--type-webform-markup,
.webform-element--type-processed-text,
.webform-element--type-webform-computed-token,
.webform-submission-form .webform-section .text-formatted,
.webform-submission-form .webform-section-wrapper p,
.webform-element--type-webform-markup p,
.webform-element--type-processed-text p {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: var(--line-height-relaxed);
}

.webform-element--type-webform-markup,
.webform-element--type-processed-text {
  margin-bottom: var(--space-5);
}

/* Hinweis-Box (webform-message): dezent hervorgehoben, klar abgetrennt */
.webform-element--type-webform-message {
  margin-block: var(--space-8);
}

.webform-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);
  background-color: var(--color-tuerkis-10);
  border: 1px solid var(--color-tuerkis-30);
  border-left: 4px solid var(--color-tuerkis);
  border-radius: var(--border-radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
}

.webform-message .webform-message__content {
  flex: 1;
  min-width: 0;
}

.webform-message .webform-message__content p:last-child {
  margin-bottom: 0;
}

.webform-message a {
  color: var(--color-uni-blau);
  font-weight: var(--font-weight-medium);
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. RESPONSIVE ANPASSUNGEN
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Progress Tracker vereinfacht */
  .webform-progress-tracker {
    gap: 0;
  }

  .webform-progress-tracker__label {
    display: none;
  }

  .webform-progress-tracker__indicator {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }

  /* Alle Mehrspaltigen → einspaltig */
  .webform-address-container-inline,
  .webform-element--type-webform-name .webform-composite-elements,
  .webform-element--type-webform-telephone .webform-composite-elements,
  .webform-element--type-datetime .form-item--type-date,
  .webform-element--wrapper--2col,
  .webform-grid-2,
  .webform-element--wrapper--3col,
  .webform-grid-3,
  .fieldgroup.form-composite.form-composite--2col > .fieldset-wrapper,
  .fieldgroup.form-composite.form-composite--2col > .details-wrapper,
  .fieldgroup.form-composite.form-composite--3col > .fieldset-wrapper,
  .fieldgroup.form-composite.form-composite--3col > .details-wrapper,
  .webform-composite-elements,
  .form-composite .fieldset-wrapper,
  .fieldgroup.form-composite > .fieldset-wrapper,
  .fieldgroup.form-composite > .details-wrapper {
    grid-template-columns: 1fr;
  }

  /* Aktionsbereich vertikal */
  .form-actions,
  .webform-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .webform-button--submit,
  .webform-button--next,
  .webform-button--previous,
  .webform-button--draft {
    width: 100%;
    justify-content: center;
    order: unset;
  }

  .webform-button--previous {
    order: 1;
  }

  .webform-button--draft {
    margin-left: 0;
  }

  /* Inline-Checkboxen → untereinander */
  .webform-options-display-side-by-side,
  .webform-options-display-two-columns,
  .webform-options-display-three-columns {
    grid-template-columns: 1fr;
  }

  /* Tabellen horizontal scrollbar */
  .webform-multiple-table,
  .tableselect {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Bestätigung */
  .webform-confirmation {
    padding: var(--space-8) var(--space-4);
    margin: var(--space-8) 0;
  }

  /* Feldgruppen */
  .details-wrapper,
  .fieldset-wrapper {
    padding: var(--space-4);
  }
}

@media (max-width: 479px) {
  /* Sehr kleine Screens */
  fieldset.form-wrapper,
  details.form-wrapper {
    padding: var(--space-4);
    border-radius: var(--border-radius-md);
  }

  .webform-progress-tracker__step::before {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. BARRIEREFREIHEIT
   ───────────────────────────────────────────────────────────────────────────── */

/* Fokus immer sichtbar */
.webform-submission-form *:focus-visible {
  outline: 3px solid var(--color-tuerkis);
  outline-offset: 2px;
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .webform-progress-bar__bar-inner,
  .webform-progress-tracker__indicator,
  .webform-rating label,
  .form-type--checkbox:hover,
  .form-type--radio:hover {
    transition: none !important;
    animation: none !important;
  }
}

/* Drucken */
@media print {
  .form-actions,
  .webform-actions,
  .webform-button--draft,
  .webform-button--reset,
  .webform-button--previous,
  .webform-button--next {
    display: none !important;
  }

  .webform-submission-form {
    max-width: 100%;
  }

  fieldset.form-wrapper,
  details.form-wrapper {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}