/* ========================================
   SWP FARBPALETTE - Corporate Design
   =========================================
   Primär (Vollton):    #0093d3
   Hintergrund 1:       #d8dad9
   Hintergrund 2:       #dce6f4
   Sekundär Gelb:       #f1d000
   Sekundär Schwarz:    #000000
   Grün:                green / #4caf50
   Rot:                 red
   ========================================= */

/* ========================================
   RESET & BASE STYLES
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  background: #d8dad9;
  color: #000000;
  line-height: 1.6;
}

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */
.swp-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.form-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   WELCOME SCREEN
   ======================================== */
.welcome-screen {
  padding: 40px;
  text-align: center;
  display: none;
}

.welcome-screen.active {
  display: block;
}

.welcome-logo {
  width: 200px;
  max-width: 200px;
  height: auto;
  margin: 0 auto 30px;
}

.welcome-title {
  color: #0093d3;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.welcome-content {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 30px;
  background: #d8dad9;
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid #0093d3;
}

.welcome-content h3 {
  color: #0093d3;
  margin-bottom: 15px;
}

.welcome-content ul {
  margin-left: 20px;
  margin-top: 15px;
}

.welcome-content li {
  margin-bottom: 10px;
}

/* Start Button */
.swp-container .start-button {
  background: #0093d3 !important;
  color: white !important;
  border: none !important;
  padding: 12px 35px !important;
  font-size: 0.8rem !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.3s;
}

.swp-container .start-button:hover {
  background: #007ab8 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 147, 211, 0.3);
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.progress-bar {
  background: #0093d3;
  padding: 20px;
  display: none;
}

.progress-bar.active {
  display: block;
  border-radius: 8px 8px 0 0;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}

.progress-step {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s;
}

.progress-step::before {
  content: attr(data-display-step);
  display: block;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin: 0 auto 8px;
  line-height: 30px;
  font-weight: bold;
}

.progress-step.active {
  color: white;
}

.progress-step:hover {
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

.progress-step.active:hover {
  color: white;
}

.progress-step.active::before {
  background: white;
  color: #0093d3;
}

.progress-step.completed::before {
  background: #4caf50;
  color: white;
  content: "✓";
}

.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  z-index: -1;
}

.progress-step.completed:not(:last-child)::after {
  background: green;
}

.progress-step.incomplete::before {
  background: white;
  color: red;
  border: 2.5px solid red;
}

/* ========================================
   REDUZIERTES FORMULAR - PROGRESS BAR
   ======================================== */
.progress-step[style*="display: none"] {
  display: none !important;
}

.progress-step:not([style*="display: none"])
  + .progress-step[style*="display: none"]
  + .progress-step:not([style*="display: none"])::after {
  width: 200%;
  left: -100%;
}

.reduced-form-notice {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 10px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-content {
  padding: 40px;
  display: none;
}

.form-content.active {
  display: block;
}

.form-step {
  display: none;
  animation: slideIn 0.3s ease;
}

.form-step.active {
  display: block;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   SECTION HEADERS
   ======================================== */
.section-header {
  background: #0093d3;
  margin: -40px -40px 30px -40px;
  padding: 20px 40px;
}

.section-title {
  background: #0093d3;
  color: white;
  padding: 10px 20px;
  margin: -20px -40px 20px -40px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}

.section-subtitle {
  color: #fff;
  font-size: 0.95rem;
  margin-top: 10px;
}

/* ========================================
   FORM FIELDS
   ======================================== */
.field-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.field-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.field-group.full-width {
  flex: 1 0 100%;
}

.field-group.half-width {
  flex: 0 0 48%;
}

.field-group.third-width {
  flex: 0 0 31%;
}

.field-group.quarter-width {
  flex: 0 0 23%;
}

.label-dropdown-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.label-dropdown-row label {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
}

.label-dropdown-row select {
  flex: 0 0 200px;
}

label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
  display: block;
}

.required {
  color: red;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #d8dad9;
  border-radius: 4px;
  font-size: 1rem;
  background: #f9f9f9;
  transition: all 0.3s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #0093d3;
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 147, 211, 0.1);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ========================================
   RADIO & CHECKBOX STYLES
   ======================================== */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-group.horizontal,
.checkbox-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-button {
  background: #f9f9f9;
  border: 2px solid #d8dad9;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  text-align: center;
}

.radio-button:hover {
  background: #dce6f4;
  border-color: #0093d3;
}

.radio-button.active {
  background: #0093d3;
  color: white;
  border-color: #0093d3;
  font-weight: bold;
}

.checkbox-label {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f9f9f9;
  border: 2px solid #d8dad9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.checkbox-label:hover {
  background: #dce6f4;
  border-color: #0093d3;
}

.checkbox-label.checked {
  background: #dce6f4;
  border-color: #0093d3;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 10px;
}

/* ========================================
   CONDITIONAL FIELDS
   ======================================== */
.conditional-field {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #dce6f4;
  border-left: 4px solid #0093d3;
  border-radius: 4px;
  animation: slideDown 0.3s ease;
}

.conditional-field.active {
  display: block;
}

.conditional-group {
  display: none;
  background: #dce6f4;
  padding: 20px;
  margin-top: 20px;
  border-radius: 4px;
  border-left: 4px solid #0093d3;
}

.conditional-group.active {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box {
  background: #fffbe6;
  border-left: 4px solid #f1d000;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.info-box.success {
  background: #e6ffe6;
  border-color: green;
}

.info-box.error {
  background: #ffe6e6;
  border-color: red;
}

.info-box.info {
  background: #dce6f4;
  border-color: #0093d3;
}

/* ========================================
   NAVIGATION BUTTONS
   ======================================== */
.swp-container .form-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid #d8dad9;
}

.swp-container .nav-button {
  padding: 10px 25px !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background-color: #dce6f4 !important;
  color: #000000 !important;
}

.swp-container .nav-button.prev {
  background: #dce6f4 !important;
  color: #000000 !important;
  margin-right: auto;
}

.swp-container .nav-button.prev:hover {
  background: #d8dad9 !important;
}

.swp-container .nav-button.save {
  background: #0093d3 !important;
  color: white !important;
}

.swp-container .nav-button.save:hover {
  background: #007ab8 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 147, 211, 0.3);
}

.swp-container .nav-button.next {
  background: #0093d3 !important;
  color: white !important;
  margin-left: auto;
}

.swp-container .nav-button.next:hover {
  background: #007ab8 !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 147, 211, 0.3);
}

.swp-container .nav-button.submit {
  background: green !important;
  color: white !important;
  margin-left: auto;
}

.swp-container .nav-button.submit:hover {
  background: darkgreen !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 128, 0, 0.3);
}

.swp-container .nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   UPLOAD AREA
   ======================================== */
.upload-area {
  border: 2px dashed #d8dad9;
  border-radius: 4px;
  padding: 30px;
  text-align: center;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #0093d3;
  background: #dce6f4;
}

.upload-area.dragover {
  border-color: #0093d3;
  background: #dce6f4;
}

.upload-icon {
  font-size: 3rem;
  color: #d8dad9;
  margin-bottom: 10px;
}

.upload-text {
  color: #000000;
  font-size: 0.95rem;
}

.uploaded-files {
  margin-top: 20px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #d8dad9;
  border-radius: 4px;
  margin-bottom: 10px;
}

.file-name {
  flex: 1;
  margin-right: 10px;
}

.file-remove {
  color: red;
  cursor: pointer;
  font-weight: bold;
}

.file-remove:hover {
  text-decoration: underline;
}

/* ========================================
   MULTI-SELECT WITH PILLS
   ======================================== */
.multi-select-wrapper {
  position: relative;
}

.multi-select-dropdown {
  position: relative;
  width: 100%;
}

.multi-select-trigger {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #d8dad9;
  border-radius: 4px;
  background: #f9f9f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  min-height: 44px;
}

.multi-select-trigger:hover {
  border-color: #0093d3;
  background: #dce6f4;
}

.multi-select-dropdown.open .multi-select-trigger {
  border-color: #0093d3;
  background: white;
}

.dropdown-arrow {
  transition: transform 0.3s;
  color: #000000;
}

.multi-select-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.multi-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #0093d3;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 0;
  overflow: hidden;
  z-index: 1000;
  transition: max-height 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.multi-select-dropdown.open .multi-select-options {
  max-height: 300px;
  overflow-y: auto;
}

.multi-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  background: white;
  margin: 0;
  font-weight: normal;
}

.multi-option:hover {
  background: #dce6f4;
}

.multi-option input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.multi-option span {
  flex: 1;
}

.selected-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 20px;
}

.pill {
  background: #0093d3;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  animation: pillIn 0.2s ease;
}

@keyframes pillIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pill-remove {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.pill-remove:hover {
  opacity: 1;
}

.selected-pills:empty::before {
  content: "Keine Auswahl";
  color: #000000;
  font-size: 0.9rem;
  font-style: italic;
}

/* ========================================
   TOOLTIP STYLES - KOMPLETT (position: fixed)
   ======================================== */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  z-index: 1;
}

.info-button {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #0093d3 !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transition: all 0.3s;
  text-transform: none !important;
  font-style: normal !important;
}

.info-button:hover,
.info-button:focus {
  background: #007ab8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 147, 211, 0.25) !important;
  transform: scale(1.1);
}

.tooltip-content {
  position: fixed !important;
  background: #000000 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  width: max-content !important;
  max-width: min(420px, 90vw) !important;
  white-space: normal !important;
  line-height: 1.5 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  text-align: left !important;
}

.tooltip-content::after {
  display: none !important;
  content: "" !important;
  position: absolute !important;
  left: var(--arrow-left, 50%) !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
}

.tooltip-content.tooltip-up::after {
  top: 100% !important;
  bottom: auto !important;
  border-top-color: #000000 !important;
}

.tooltip-content.tooltip-down::after {
  bottom: 100% !important;
  top: auto !important;
  border-bottom-color: #000000 !important;
}

.info-tooltip:hover .tooltip-content,
.info-tooltip:focus-within .tooltip-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Label Flex Layout für Tooltip-Integration */
.swp-container label.with-tooltip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Info-Button in Progress Bar - GRÜN */
.progress-steps .header-info-tooltip {
  position: relative;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
}

.progress-steps .header-info-tooltip .info-button {
  background: #4caf50 !important;
  color: white !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
  line-height: 30px !important;
}

.progress-steps .header-info-tooltip .info-button:hover {
  background: #45a049 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4) !important;
}

/* ========================================
   SUMMARY ACCORDION
   ======================================== */
.summary-accordion {
  border: 2px solid #d8dad9;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;
}

.summary-section {
  border-bottom: 1px solid #d8dad9;
}

.summary-section:last-child {
  border-bottom: none;
}

.summary-header {
  padding: 15px 20px;
  background: #f9f9f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  user-select: none;
}

.summary-header:hover {
  background: #dce6f4;
}

.summary-header.active {
  background: #dce6f4;
  color: #0093d3;
}

.summary-arrow {
  font-size: 0.9rem;
  transition: transform 0.3s;
  color: #000000;
}

.summary-header.active .summary-arrow {
  color: #0093d3;
}

.summary-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: white;
}

.summary-content.active {
  max-height: 1000px;
  padding: 15px 20px;
}

.summary-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #d8dad9;
}

.summary-row:last-child {
  border-bottom: none;
}

.sum-label {
  flex: 0 0 200px;
  font-weight: 600;
  color: #000000;
}

.sum-value {
  flex: 1;
  color: #000000;
}

/* Summary Header mit Button */
.summary-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 20px;
}

.toggle-summary-btn {
  padding: 10px 25px !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background: #0093d3 !important;
  color: white !important;
  white-space: nowrap;
}

.toggle-summary-btn:hover {
  background: #007ab8 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 147, 211, 0.3);
}

.toggle-summary-btn:active {
  transform: translateY(0);
}

/* ========================================
   ACTION BUTTONS (SPEICHERN/DRUCKEN)
   ======================================== */
.action-buttons {
  display: flex;
  gap: 15px;
  margin: 20px 0;
  justify-content: center;
}

.action-btn {
  padding: 10px 25px !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background: white;
  color: #0093d3;
}

.action-btn:hover {
  background: #0093d3;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 147, 211, 0.3);
}

/* ========================================
   CHECKBOX LARGE (für lange Texte)
   ======================================== */
.checkbox-large {
  align-items: flex-start;
  padding: 15px;
  line-height: 1.6;
}

.checkbox-large input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}

.checkbox-large span {
  flex: 1;
}

.checkbox-large a {
  color: #0093d3;
  text-decoration: none;
}

.checkbox-large a:hover {
  text-decoration: underline;
}

/* Hinweisbox auf Seite 9: sieht aus wie ein checkbox-large-Label, hat aber
   keine Checkbox und ist nicht klickbar. Sie traegt bewusst dieselben
   Klassen, damit sie alle Mobile-Anpassungen der Labels automatisch erbt.
   Da sie ein div und kein label ist, greift die globale label-Regel nicht,
   deshalb stehen font-size, font-weight und color hier noch einmal.
   Die Mobile-Regeln fuer .checkbox-label kommen im Stylesheet spaeter und
   ueberschreiben das bei gleicher Spezifitaet weiterhin korrekt. */
.hinweis-box,
.hinweis-box:hover {
  background: #f9f9f9;
  border-color: #d8dad9;
  cursor: default;
  font-size: 0.85rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
}

/* Das 44px-Touch-Target der Labels wuerde hier ueber der darunter
   liegenden Checkbox liegen und deren Klick abfangen. */
.hinweis-box::after {
  content: none;
}

/* ========================================
   FINAL MESSAGE
   ======================================== */
.final-message {
  background: linear-gradient(135deg, #dce6f4 0%, #f0f7ff 100%);
  border: 3px solid #0093d3;
  border-radius: 12px;
  padding: 40px;
  margin-top: 30px;
  text-align: center;
}

.final-content {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.mascot-image {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.final-text {
  flex: 1;
  text-align: left;
}

.final-text h3 {
  color: #0093d3;
  font-size: 1.5rem;
  margin-bottom: 15px;
  line-height: 1.4;
}

.final-note {
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.7);
  border-left: 4px solid red;
  font-size: 0.85rem;
  color: #000000;
  text-align: left;
}

/* ========================================
   THANK YOU SCREEN
   ======================================== */
.thank-you-screen {
  padding: 40px;
  text-align: center;
  display: none;
  background: white;
  min-height: 100vh;
  animation: fadeIn 0.5s ease;
}

.thank-you-screen.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thank-you-title {
  color: #0093d3;
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.thank-you-subtitle {
  color: #000000;
  font-size: 1.3rem;
  margin-bottom: 40px;
  font-weight: normal;
}

.thank-you-content {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto 40px;
}

.thank-you-mascot {
  width: 280px;
  flex-shrink: 0;
  height: auto;
  animation: bounce 1s ease;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.thank-you-info {
  flex: 1;
  background: #dce6f4;
  padding: 30px;
  border-radius: 8px;
  border-left: 4px solid #0093d3;
  text-align: left;
}

.thank-you-info h3 {
  color: #0093d3;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.thank-you-info ul {
  list-style: none;
  padding: 0;
}

.thank-you-info li {
  padding: 12px 0;
  font-size: 1.1rem;
  color: #000000;
  border-bottom: 1px solid #d8dad9;
}

.thank-you-info li:last-child {
  border-bottom: none;
}

/* ========================================
   SWP DRAFT SYSTEM - CSS
   ======================================== */
@keyframes swpSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#save-success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#save-success-modal .swp-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

#save-success-modal .swp-modal-content {
  position: relative;
  background: white;
  padding: 40px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: swpModalIn 0.3s ease;
}

@keyframes swpModalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#save-success-modal .swp-modal-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

#save-success-modal h2 {
  color: #0093d3;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

#save-success-modal p {
  color: #000000;
  margin-bottom: 10px;
  line-height: 1.5;
}

#save-success-modal .swp-modal-link-box {
  background: #d8dad9;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: left;
}

#save-success-modal .swp-modal-link-box label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000000;
}

#save-success-modal .swp-link-copy-row {
  display: flex;
  gap: 10px;
}

#save-success-modal .swp-link-copy-row input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d8dad9;
  border-radius: 4px;
  font-size: 0.85rem;
  background: white;
}

#save-success-modal .swp-copy-btn {
  padding: 10px 25px !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background: #0093d3;
  color: white;
  white-space: nowrap;
}

#save-success-modal .swp-copy-btn:hover {
  background: #007ab8;
}

#save-success-modal small {
  display: block;
  margin-top: 10px;
  color: #000000;
  font-size: 0.85rem;
}

#save-success-modal .swp-modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

#save-success-modal .swp-modal-btn {
  padding: 12px 25px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  font-weight: 500;
}

#save-success-modal .swp-modal-btn.primary {
  background: #0093d3;
  color: white;
}

#save-success-modal .swp-modal-btn.primary:hover {
  background: #007ab8;
  transform: translateY(-2px);
}

#save-success-modal .swp-modal-btn.secondary {
  background: #dce6f4;
  color: #000000;
}

#save-success-modal .swp-modal-btn.secondary:hover {
  background: #d8dad9;
}

/* Loading Overlay Spinner */
#swp-loading-overlay .swp-loading-content {
  text-align: center;
}

#swp-loading-overlay .swp-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #d8dad9;
  border-top-color: #0093d3;
  border-radius: 50%;
  animation: swpSpin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes swpSpin {
  to {
    transform: rotate(360deg);
  }
}

#swp-loading-overlay p {
  color: #0093d3;
  font-size: 1.1rem;
  margin: 0;
}

.swp-notification {
  font-family: inherit;
}

.swp-notification button:hover {
  opacity: 1 !important;
}

/* ========================================
   VALIDATION STYLES
   ======================================== */
.validation-error {
  border-color: red !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
}

.validation-error.radio-group .radio-button {
  border-color: red !important;
}

.validation-message {
  background: #fff5f5;
  border: 2px solid red;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  animation: shake 0.5s ease;
}

.validation-message .validation-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.validation-message .validation-text {
  flex: 1;
}

.validation-message .validation-text ul {
  margin: 10px 0 0 20px;
  padding: 0;
}

.validation-message .validation-text li {
  margin-bottom: 5px;
  color: #c00;
}

.validation-message button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.validation-message button:hover {
  color: #333;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
  .swp-container {
    padding: 10px;
  }

  .form-content,
  .welcome-screen {
    padding: 20px;
  }

  .field-row {
    flex-direction: column;
  }

  .field-group.half-width,
  .field-group.third-width,
  .field-group.quarter-width {
    flex: 1 0 100%;
  }

  .label-dropdown-row {
    flex-direction: column;
    align-items: stretch;
  }

  .label-dropdown-row select {
    flex: 1 0 100%;
  }

  .progress-step {
    font-size: 0.6rem;
  }

  .progress-step::before {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 0.8rem;
  }

  .final-content {
    flex-direction: column;
    text-align: center;
  }

  .final-text {
    text-align: center;
  }

  .mascot-image {
    width: 150px;
  }

  .thank-you-title {
    font-size: 1.8rem;
  }

  .thank-you-subtitle {
    font-size: 1.1rem;
  }

  .thank-you-content {
    flex-direction: column;
    gap: 30px;
  }

  .thank-you-mascot {
    width: 200px;
  }

  .thank-you-info {
    text-align: center;
  }

  .summary-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .toggle-summary-btn {
    width: 100%;
  }

  #save-success-modal .swp-modal-content {
    padding: 25px;
    margin: 10px;
  }

  #save-success-modal .swp-modal-actions {
    flex-direction: column;
  }

  #save-success-modal .swp-link-copy-row {
    flex-direction: column;
  }

  #save-success-modal .swp-copy-btn {
    width: 100%;
  }
}

/* ========================================================================
   MOBILE-OPTIMIERUNG SWP  (Stand 13.08.2026, portiert aus SPOT)
   ------------------------------------------------------------------------
   Alles hier liegt ausschliesslich in @media-Bloecken. Desktop bleibt
   unberuehrt. Keine neuen Farbwerte, keine border-radius-Werte, keine
   font-family.

   INSTANZ SWP. Uebernommen aus SPOT (Stand 12.08.2026, Runde 3), angepasst
   an die SWP-Werte: Pfeilkreise tragen den Hintergrund (#dce6f4) und die
   Textfarbe (#000000) des Zurueck-Knopfes, der erledigt-Ring das Gruen der
   Fortschrittskreise (#4caf50). Die SPOT-Korrektur fuer .welcome-logo
   entfaellt: das SWP-Logo ist ein zentriertes 200px-Bild neben, nicht in
   .welcome-content - dort gibt es kein overflow:hidden, das es abschneiden
   koennte. maske.css hat hier nur einen Style-Block; der neue steht trotzdem
   am Dateiende, damit er die bestehenden 768px-Regeln ab Z. 1503 gewinnt.

   SYSTEM
   Typo   16 / 16 / 13 / 12 px  (Titel / Eingabe / Auswahl / Label)
          16px an Eingaben ist Pflicht, sonst zoomt iOS Safari beim Fokus.
   Raster 3 / 6 / 10 / 12 px
   Sichtbare Bedienhoehe 36-44px, Trefferflaeche immer 44px - kleinere
   Knoepfe bekommen die fehlenden Pixel ueber ein transparentes
   Pseudo-Element dazu, statt optisch aufzublasen.
   ======================================================================== */

@media (max-width: 768px) {
  /* ---- 1. Buehne und Karte ------------------------------------------
     #antrag traegt die Theme-Klasse .section-l, die padding-left/right per
     !important setzt (~21px) und oben 90px Leerraum erzeugt.
     #antrag stand ausserdem auf overflow:hidden (beide Achsen) und war
     damit ein Scroll-Container - darin heftet sich position:sticky nicht
     an den Viewport an. clip klemmt weiterhin horizontal ab, erzeugt aber
     keinen Scrollport; overflow-y muss dafuer explizit visible sein. */
  #antrag {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: clip;
    overflow-y: visible;
  }

  .swp-container {
    padding: 0;
  }

  .form-content,
  .welcome-screen {
    padding: 0 12px 12px;
  }

  /* ---- 2. Section-Header --------------------------------------------
     Die negativen Raender -40px waren auf das Desktop-Padding gerechnet
     und ragten mobil aus dem Viewport. Padding braucht !important, weil
     das Theme .section-header ebenfalls per !important bedient. */
  .section-header {
    margin: 0 -12px 12px;
    padding: 10px 12px !important;
  }

  .section-title {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1rem;
    line-height: 1.25;
  }

  .section-subtitle {
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 3px;
  }

  /* ---- 3. Fortschritt: Balken statt Nummernkreise ---------------------
     Neun beschriftete Kreise standen mit 1px Abstand nebeneinander. Jetzt
     ein kompakter Zaehler mit Pfeilen:  (i)   < 3/9 >

     Sichtbar bleiben nur drei der neun Schritte: der aktuelle traegt den
     Zaehler, seine beiden Nachbarn werden zu Pfeilen. Den Vorgaenger holt
     :has(+ .active) - der einzige Weg, in CSS auf ein vorheriges
     Geschwisterelement zuzugreifen. Beide Pfeile bleiben echte
     .progress-step-Elemente, ihr onclick aus dem HTML funktioniert also
     unveraendert weiter.
     Die Pfeilflaechen sind 44x44 gross, aber unsichtbar - es rendert nur
     der Chevron. So bleibt die Leiste flach und trotzdem gut treffbar.
     Verbindungslinie und Nummernkreise entfallen, beides war Dekoration. */
  .progress-bar {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: max(10px, calc((100% - 360px) / 2));
    padding-right: max(10px, calc((100% - 360px) / 2));
    overflow: visible;
  }

  .progress-steps {
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow: visible;
  }

  /* Das "i" wird aus dem Fluss genommen und links verankert, damit die
     Zaehler-Gruppe exakt in der Leistenmitte sitzt und nicht durch die
     Breite des i-Buttons nach rechts geschoben wird. Ein Inline-Style des
     Themes setzt .info-tooltip auf "position: relative !important" -
     daher hier ebenfalls !important und der spezifischere Klassenname.

     Zentriert wird ueber height:100% + align-items, NICHT ueber
     transform: translateY(-50%) wie bei SPOT. Grund: ein Vorfahre mit
     transform wird zum Bezugsrahmen fuer position:fixed - der Tooltip
     unten zentrierte sich dann auf den 26px-Knopf statt auf den Viewport
     und lief links aus dem Bild (gemessen -127px). SPOT und REWAG faellt
     das nicht auf, weil dort ein JS-Klon am <body> haengt und das
     Original per display:none stillgelegt ist; SWP hat diesen Klon nicht
     und zeigt den echten Tooltip.

     display und height brauchen !important, weil ein Snippet-Stylesheet
     ".info-tooltip { display: inline-block !important }" setzt - das
     schlaegt jede Spezifitaet. Ohne die beiden bleibt der Knopf oben
     haengen: bottom:0 streckt einen inline-block nicht.
     Gemessen: Knopfmitte exakt auf Leistenmitte (Versatz 0.0px; die
     SPOT-Variante lag hier 21.9px zu hoch). */
  .progress-steps .header-info-tooltip {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Gleich gross wie die Pfeilkreise. box-sizing muss mit, weil ein
     unset-Reset des Themes den Button auf content-box zurueckstellt -
     sonst kommen die 2px Rahmen oben drauf und er bleibt 30px.
     Die 44px-Trefferflaeche liegt weiterhin auf ::after. */
  .progress-steps .header-info-tooltip .info-button {
    box-sizing: border-box !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .progress-step {
    display: none;
  }

  .progress-step::before {
    display: none;
  }

  .progress-step:not(:last-child)::after {
    display: none;
  }

  /* Zaehler, z. B. "3/9" - die Ziffer kommt aus dem data-Attribut,
     das HTML bleibt unangetastet. */
  .progress-step.active {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    font-size: 0;
    height: 44px;
    line-height: 44px;
  }

  .progress-step.active::after {
    content: attr(data-display-step) "/9";
    display: inline;
    position: static;
    transform: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    white-space: nowrap;
    letter-spacing: 0.5px;
  }

  .progress-step:has(+ .progress-step.active),
  .progress-step.active + .progress-step {
    display: block;
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    font-size: 0;
    /* Wie der Zurueck-Knopf unten: derselbe CI-Wert, damit der Chevron
       ueberhaupt sichtbar ist. Als reines currentColor war er
       halbtransparentes Weiss auf Blau und praktisch unsichtbar. */
    color: #000000;
  }

  /* Sichtbare Knopfflaeche: 26px, der vorhandene border-radius von 50%
     bleibt unangetastet. Die 44px des Elements bleiben Trefferflaeche. */
  .progress-step:has(+ .progress-step.active)::before,
  .progress-step.active + .progress-step::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  /* Alle Pfeilkreise gleich hell gefuellt. Den Zustand traegt der Ring,
     nicht die Flaeche: erledigt gruen (#4caf50, das Gruen der erledigten
     Fortschrittskreise dieser Instanz), unvollstaendig rot - letzteres kommt
     unveraendert aus dem Bestand.
     Die Fuellung muss die gruene Flaeche des Bestands ueberschreiben,
     daher die hoehere Spezifitaet ueber :has(). */
  .progress-step:has(+ .progress-step.active)::before,
  .progress-step.active + .progress-step::before {
    background: #dce6f4;
  }

  .progress-step:has(+ .progress-step.active).completed::before,
  .progress-step.active + .progress-step.completed::before {
    border: 2.5px solid #4caf50;
  }

  /* Chevron wie in der unteren Leiste: aus Rahmenkanten gebaut, damit er
     nicht vom Schriftschnitt abhaengt. currentColor erbt die vorhandene
     Textfarbe, es kommt keine neue Farbe hinzu.
     background:none ist noetig, weil dieses Pseudo-Element im Bestand die
     Verbindungslinie war - bei erledigten Schritten haette der Chevron
     sonst deren gruene Flaeche geerbt und waere als Rechteck erschienen. */
  .progress-step:has(+ .progress-step.active)::after,
  .progress-step.active + .progress-step::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 0 solid currentColor;
    background: none;
    z-index: 1;
  }

  .progress-step:has(+ .progress-step.active)::after {
    border-left-width: 2px;
    border-bottom-width: 2px;
    transform: translate(calc(-50% + 2px), -50%) rotate(45deg);
  }

  .progress-step.active + .progress-step::after {
    border-right-width: 2px;
    border-top-width: 2px;
    transform: translate(calc(-50% - 2px), -50%) rotate(45deg);
  }

  /* ---- 4. Felder -----------------------------------------------------
     DER zentrale Fix: .field-row ist mobil flex-direction:column, aber
     maske.css setzt align-items:flex-start. Dadurch schrumpfte jede
     Feldgruppe auf ihre Inhaltsbreite - auf jeder Verschachtelungsebene.
     Das war die Ursache fuer die unterschiedlich breiten Felder und
     Auswahlkaesten. stretch bringt alle auf volle Breite. */
  .field-row {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }

  .field-group {
    min-width: 0;
    max-width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 1rem;
    line-height: 1.25;
  }

  textarea {
    min-height: 72px;
  }

  label {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 3px;
  }

  .swp-container label.with-tooltip {
    display: flex !important;
    flex-wrap: wrap;
  }

  /* ---- 5. Auswahlflaechen --------------------------------------------
     Die Zeilenhoehe war der eigentliche Dickmacher: .radio-button erbte
     1.6 vom Body, also 22px pro Zeile. Bei umbrechendem "Keine Angabe"
     wurden daraus 71px hohe Knoepfe - und weil die Gruppe alle auf
     gleiche Hoehe zieht, waren auch "Ja" und "Nein" 71px hoch.
     Optionstexte gehen ausserdem von 700 auf 400, das laesst die Listen
     deutlich leichter wirken, ohne eine weitere Schriftgroesse. */
  .checkbox-label {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25;
    position: relative;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-right: 10px;
  }

  .radio-button {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 0.8125rem;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .radio-group.horizontal .radio-button,
  .checkbox-group.horizontal .radio-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .radio-group,
  .checkbox-group {
    gap: 6px;
  }

  .radio-group.horizontal,
  .checkbox-group.horizontal {
    gap: 6px;
  }

  /* Sichtbar 36-38px, angefasst 44px. */
  .radio-button::after,
  .checkbox-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* ---- 6. Bedingte Bloecke -------------------------------------------
     Verschachtelte Bloecke tragen 30px Einrueckung aus einem Inline-Style
     in maske.html (3 Stellen). !important ist noetig, weil Inline-Styles
     sonst gewinnen - das HTML bleibt unveraendert. */
  .conditional-field,
  .conditional-group {
    padding: 10px;
    margin-top: 10px;
  }

  .conditional-group .conditional-group,
  .conditional-field .conditional-group {
    margin-left: 10px !important;
    padding: 10px;
  }

  /* ---- 7. Umbruch fuer lange deutsche Komposita ----------------------- */
  label,
  .checkbox-label,
  .radio-button,
  .section-title,
  .section-subtitle {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* break-word senkt die min-content-Breite nicht; in den Flex-Labels
     braucht es "anywhere", sonst ragt "Mannschafts-/Vereinsbus" raus. */
  .checkbox-label,
  .radio-button {
    overflow-wrap: anywhere;
  }

  /* ---- 8. Sticky-Navigation: eine Reihe, nur Symbole -------------------
     Grid statt Flex, weil die drei Spuren aus der Template-Definition
     kommen und nicht aus den Items: JS setzt einzelne Buttons per inline
     display:none, die Spuren bleiben trotzdem stehen. Dadurch sitzt der
     Speichern-Button auf JEDEM Schritt exakt in der Viewport-Mitte,
     egal ob "Zurueck" existiert oder nicht.
     "Absenden" behaelt bewusst seine Beschriftung - ein blankes Symbol
     waere fuer die einzige nicht umkehrbare Aktion zu unklar. Er belegt
     Spur 2 bis 3; "Weiter" ist auf Schritt 9 ohnehin ausgeblendet. */
  .swp-container .form-navigation {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: white;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 8px;
    align-items: center;
    margin: 12px -12px 0;
    padding-top: 4px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    /* Gedeckelt wie die Fortschrittsleiste: sonst stehen die drei Symbole
       am oberen Ende des Media Query fast 300px auseinander. */
    padding-left: max(12px, calc((100% - 420px) / 2));
    padding-right: max(12px, calc((100% - 420px) / 2));
  }

  .swp-container .nav-button {
    margin: 0;
    min-height: 44px;
  }

  .swp-container .nav-button.prev {
    grid-column: 1;
    grid-row: 1;
  }

  .swp-container .nav-button.save {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .swp-container .nav-button.next {
    grid-column: 3;
    grid-row: 1;
  }

  .swp-container .nav-button.submit {
    grid-column: 2 / -1;
    grid-row: 1;
    justify-self: stretch;
    min-height: 44px;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 9px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Beschriftung stilllegen. font-size:0 allein reicht nicht - gemessen
     bleiben 22px Textrest stehen, weil der Browser eine Mindestgroesse
     erzwingt. Erst text-indent + overflow:hidden raeumt sie weg.
     Der Textknoten bleibt im Accessibility-Baum, Screenreader lesen
     weiterhin "Zurueck" bzw. "Weiter". */
  .swp-container .nav-button.prev,
  .swp-container .nav-button.save,
  .swp-container .nav-button.next {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    letter-spacing: 0;
    word-spacing: 0;
  }

  /* Pfeile als CSS-Chevron statt Unicode-Glyphe: keine Abhaengigkeit vom
     Schriftschnitt, definierte Strichstaerke, und Screenreader lesen sie
     nicht zusaetzlich vor. currentColor erbt die vorhandene Buttonfarbe,
     es kommt keine neue Farbe hinzu. */
  .swp-container .nav-button.prev::before,
  .swp-container .nav-button.next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 0 solid currentColor;
    text-indent: 0;
  }

  .swp-container .nav-button.prev::before {
    border-left-width: 2px;
    border-bottom-width: 2px;
    transform: translate(calc(-50% + 2px), -50%) rotate(45deg);
  }

  .swp-container .nav-button.next::before {
    border-right-width: 2px;
    border-top-width: 2px;
    transform: translate(calc(-50% - 2px), -50%) rotate(45deg);
  }

  /* Das Diskettensymbol kommt als <img class="emoji"> aus WordPress.
     Absolut zentriert, damit text-indent es nicht mitverschiebt.
     WordPress bemasst es per "width:1em !important" - daher !important. */
  .swp-container .nav-button.save img.emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  /* ---- 9. Start-, Toggle- und Aktions-Buttons -------------------------
     Sichtbar 40px, Trefferflaeche 44px ueber das Pseudo-Element. */
  .welcome-content {
    padding: 12px;
    margin-bottom: 12px;
  }

  /* Kein .welcome-logo-Block: SPOT korrigiert dort ein randloses Banner, das
     mit -25px aus .welcome-content ausbricht. Bei SWP ist .welcome-logo ein
     zentriertes 200px-Logo, das neben .welcome-content im .welcome-screen
     liegt - es bricht nirgends aus und wird von nichts abgeschnitten. Die
     SPOT-Regel wuerde es auf volle Breite aufblasen. */

  .swp-container .start-button {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 9px 14px !important;
    font-size: 0.875rem !important;
    white-space: normal;
    position: relative;
  }

  .swp-container .toggle-summary-btn {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px !important;
    font-size: 0.8125rem !important;
    white-space: normal;
    position: relative;
  }

  /* Zwischen "Zusammenfassung anzeigen" und "Antrag speichern" klafften
     47px, zusammengesetzt aus drei Aussenabstaenden (15 + 12 + 20).
     Jetzt gleichmaessig 12px, alle drei Knoepfe exakt gleich breit. */
  .summary-header-row {
    gap: 8px;
    margin-bottom: 0 !important;
  }

  .action-buttons {
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 !important;
  }

  .action-buttons .action-btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px !important;
    font-size: 0.8125rem !important;
    white-space: normal;
    position: relative;
  }

  .swp-container .start-button::after,
  .swp-container .toggle-summary-btn::after,
  .action-buttons .action-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* ---- 10. Info-Popup -------------------------------------------------
     Trefferflaeche des "i" auf 44px erweitern, ohne den sichtbaren Kreis
     zu vergroessern.
     Der Tooltip haengt auf dem Desktop am Icon. Mobil ist das unbrauchbar:
     er lief am rechten Rand aus dem Bild und war bei langen Texten kaum
     lesbar. Deshalb hier als mittiges Popup ueber position:fixed - das
     bezieht sich auf den Viewport, nicht auf die Karte. Der Sprechblasen-
     Zipfel entfaellt, er zeigte auf nichts mehr.
     Geoeffnet wird weiter ueber :focus-within aus dem Bestand, also durch
     Antippen des "i"; ein Tipp daneben schliesst es wieder. */
  .info-button {
    position: relative;
  }

  .info-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  .info-tooltip .tooltip-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 320px) !important;
    max-width: none !important;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0 !important;
  }

  .info-tooltip .tooltip-content::after {
    display: none !important;
  }
}

/* ========================================================================
   EINE TYPO-SKALA FUER ALLES
   ------------------------------------------------------------------------
   Massgabe sind die beiden Groessen aus der blauen Kopfleiste:
     Titel  16px / 700
     Text   12px
   Vorher liefen im Formular sieben Groessen nebeneinander - allein bei den
   Feldbeschriftungen drei (17.6 / 14.4 / 12px), dazu 28px Ueberschriften
   und 16px Fliesstext. Der Block steht bewusst am Ende und arbeitet mit
   !important, weil einzelne Beschriftungen aus spezifischeren Regeln des
   Bestands kommen.
   Eingabefelder bleiben ausdruecklich bei 16px - darunter zoomt iOS Safari
   beim Fokussieren automatisch hinein.
   ======================================================================== */
@media (max-width: 768px) {
  .swp-container h2,
  .swp-container h3,
  .swp-container h4,
  .section-title,
  .welcome-content h3,
  .thank-you-info h3 {
    font-size: 1rem !important;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .swp-container p,
  .swp-container li,
  .swp-container .info-box,
  .welcome-content,
  .thank-you-info,
  .section-subtitle,
  .conditional-field,
  .conditional-group {
    font-size: 0.75rem !important;
    line-height: 1.4;
  }

  .swp-container label,
  .swp-container label.with-tooltip,
  .label-dropdown-row label {
    font-size: 0.75rem !important;
    line-height: 1.3;
  }

  .swp-container .checkbox-label,
  .swp-container .radio-button {
    font-size: 0.75rem !important;
  }

  .swp-container .start-button,
  .swp-container .toggle-summary-btn,
  .action-buttons .action-btn,
  .swp-container .nav-button.submit {
    font-size: 0.75rem !important;
  }

  /* Die Willkommensseite passt damit ohne Scrollen auf einen Bildschirm
     (gemessen 812px Seitenhoehe bei 812px Viewport, vorher 1218px). */
  .welcome-content ul {
    margin-left: 14px;
    margin-top: 8px;
  }

  .welcome-content li {
    margin-bottom: 6px;
  }

  .welcome-screen {
    padding-bottom: 10px;
  }

  /* Maskottchen mobil ausblenden (Entscheidung 13.08.2026). Es ist auf
     kleinen Schirmen unscharf und kostet nur Platz. */
  .thank-you-mascot {
    display: none;
  }

  /* Das zweite Maskottchen sitzt auf der Willkommensseite neben der
     Ueberschrift - ein <img> ohne Klasse mit Inline-Style "width:120px"
     in der Kopfzeile von .welcome-content. Es wird ueber die Struktur
     adressiert, weil maske.html unangetastet bleibt; !important, weil
     der Inline-Style sonst gewinnt.
     Der Selektor greift bewusst nur auf Bilder INNERHALB des Kopf-Divs.
     .welcome-logo ist bei SWP ein Geschwister von .welcome-content und
     bei REWAG ein direktes Kind - beide bleiben davon unberuehrt.
     Ohne das Bild nimmt die Ueberschrift die volle Breite ein; gap und
     align-items des Inline-Flex laufen dann ins Leere. */
  .welcome-content > div > img {
    display: none !important;
  }
}

/* ========================================================================
   SEHR SCHMALE GERAETE (iPhone SE und aehnlich)
   ------------------------------------------------------------------------
   Bei 320px stehen pro Auswahlknopf nur 88px zur Verfuegung. "Keine
   Angabe" braucht bei 13px rund 82px plus Innenabstand und bricht dann
   zweizeilig um - was die ganze Gruppe auf 51px Hoehe zieht. Mit 12px
   und schmalerem Innenabstand passt es einzeilig, alle drei bleiben 36px.
   "Anfrage einreichen" faellt aus dem gleichen Grund auf 13px.
   ======================================================================== */
@media (max-width: 360px) {
  .radio-group.horizontal .radio-button {
    font-size: 0.75rem !important;
    padding: 7px 4px !important;
  }

  .swp-container .nav-button.submit {
    font-size: 0.8125rem !important;
    padding: 9px 6px !important;
  }
}