/* ========================================
           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: #333;
  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);
  /*overflow: hidden;*/
}

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

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

.welcome-logo {
  display: block;
  width: calc(100% + 50px) !important;
  max-width: none !important;
  height: auto;
  margin: -25px -25px 20px -25px;
}

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

.welcome-content {
  text-align: left;
  margin: 0 0 30px;
  background: #d8dad9;
  padding: 25px;
  border-radius: 8px;
  overflow: hidden;
}

.welcome-content h3 {
  color: #1856a3;
  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: #1856a3 !important;
  color: white !important;
  border: none !important;
  padding: 12px 35px !important;
  /* Kleiner: war 15px 40px */
  font-size: 0.8rem !important;
  /* Kleiner: war 1.1rem */
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.3s;
}

.swp-container .start-button:hover {
  background: #143a6c !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 77, 143, 0.3);
}

/* ========================================
           PROGRESS BAR
        ======================================== */
.progress-bar {
  background: #1856a3;
  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;
  /* NEU */
  transition: all 0.3s;
  /* NEU */
}

.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 {
  /* NEU */
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

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

.progress-step.active::before {
  background: white;
  color: #1856a3;
}

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

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

.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;
}
/* ========================================
   REDUZIERTES FORMULAR - PROGRESS BAR
======================================== */
.progress-step[style*="display: none"] {
  display: none !important;
}

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

/* Hinweis für reduziertes Formular (optional) */
.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: #1856a3;
  margin: -40px -40px 30px -40px;
  padding: 20px 40px;
}

.section-title {
  background: #1856a3;
  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%;
}

/* Spezieller Style für Label-Dropdown Kombinationen */
.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: #333;
  margin-bottom: 8px;
  display: block;
}

.required {
  color: #e74c3c;
}

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 #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background: #f9f9f9;
  transition: all 0.3s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #1a4d8f;
  background: white;
  box-shadow: 0 0 0 3px rgba(26, 77, 143, 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 #ccc;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  text-align: center;
}

.radio-button:hover {
  background: #e8e8e8;
  border-color: #999;
}

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

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

.checkbox-label:hover {
  background: #e8e8e8;
  border-color: #999;
}

.checkbox-label.checked {
  background: #d3e4f8;
  border-color: #1a4d8f;
}

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

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

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

.conditional-group {
  display: none;
  background: #f0f7ff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 4px;
  border-left: 4px solid #1a4d8f;
}

.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: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.info-box.success {
  background: #d4edda;
  border-color: #28a745;
}

.info-box.error {
  background: #f8d7da;
  border-color: #dc3545;
}

.info-box.info {
  background: #d1ecf1;
  border-color: #17a2b8;
}

/* ========================================
           NAVIGATION BUTTONS
        ======================================== */
/* ========================================
   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 #e8e8e8;
}

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

.swp-container .nav-button.prev {
  background: #dce6f4 !important;
  color: #333 !important;
  margin-right: auto;
  /* Bleibt links */
}

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

.swp-container .nav-button.save {
  background: #1a4d8f !important;
  /* Orange für Speichern */
  color: white !important;
}

.swp-container .nav-button.save:hover {
  background: #143a6c !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.swp-container .nav-button.next {
  background: #1a4d8f !important;
  color: white !important;
  margin-left: auto;
  /* Immer rechts */
}

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

.swp-container .nav-button.submit {
  background: #4caf50 !important;
  color: white !important;
  margin-left: auto;
  /* Immer rechts */
}

.swp-container .nav-button.submit:hover {
  background: #45a049 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

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

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

.upload-area:hover {
  border-color: #1a4d8f;
  background: #f0f7ff;
}

.upload-area.dragover {
  border-color: #1a4d8f;
  background: #d3e4f8;
}

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

.upload-text {
  color: #666;
  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 #e8e8e8;
  border-radius: 4px;
  margin-bottom: 10px;
}

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

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

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

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

/* ========================================
   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 #ccc;
  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: #999;
  background: #f0f0f0;
}

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

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

.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 #1a4d8f;
  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: #f0f7ff;
}

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

.multi-option span {
  flex: 1;
}

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

.pill {
  background: #1a4d8f;
  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;
}

/* Empty State */
.selected-pills:empty::before {
  content: "Keine Auswahl";
  color: #999;
  font-size: 0.9rem;
  font-style: italic;
}

/* ========================================
   TOOLTIP STYLES
======================================== */
.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: #4a90e2 !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: #357abd !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25) !important;
  transform: scale(1.1);
}

.tooltip-content {
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #333 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  max-width: 320px !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;
  margin-bottom: 12px !important;
  pointer-events: none !important;
  text-align: left !important;
}

.tooltip-content::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-color: #333 !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;
}

/* ========================================
   SUMMARY ACCORDION
======================================== */
.summary-accordion {
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

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

.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: #f0f0f0;
}

.summary-header.active {
  background: #d3e4f8;
  color: #1a4d8f;
}

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

.summary-header.active .summary-arrow {
  color: #1a4d8f;
}

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

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

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

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

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

.action-btn {
  padding: 10px 25px !important;
  /* Kleiner: war 12px 30px */
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  /* Kleiner: war 1rem */
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background: #1856a3 !important;
  color: white !important;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #007ab8 !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 77, 143, 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: #1a4d8f;
  text-decoration: none;
}

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

/* ========================================
   FINAL MESSAGE (Abschlusschart)
======================================== */
.final-message {
  background: linear-gradient(135deg, #d3e4f8 0%, #f0f7ff 100%);
  border: 3px solid #1a4d8f;
  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: #1a4d8f;
  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 #ff0000;
  font-size: 0.85rem;
  color: #666;
  text-align: left;
}

@media (max-width: 768px) {
  .final-content {
    flex-direction: column;
    text-align: center;
  }

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

  .mascot-image {
    width: 150px;
  }
}

/* ========================================
   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: #1a4d8f;
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: bold;
}

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

/* NEU: Flex Container für Maskottchen + Info nebeneinander */
.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: #f0f7ff;
  padding: 30px;
  border-radius: 8px;
  border-left: 4px solid #1a4d8f;
  text-align: left;
}

.thank-you-info h3 {
  color: #1a4d8f;
  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: #333;
  border-bottom: 1px solid #e0e0e0;
}

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

/* Responsive */
@media (max-width: 768px) {
  .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 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;
  /* Kleiner: war 12px 30px */
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  /* Kleiner: war 1rem */
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  background: #1a4d8f;
  color: white;
  transition: all 0.3s;
  white-space: nowrap;
}

.toggle-summary-btn:hover {
  background: #143a6c;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(26, 77, 143, 0.3);
}

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

/* Akkordeon Slide-Animation */
.summary-accordion {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .summary-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

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

/* ========================================
   SWP DRAFT SYSTEM - CSS
   Füge diesen Code in deinen bestehenden <style> Block ein
======================================== */

/* Animation für Notifications */
@keyframes swpSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal Overlay */
#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: #1a4d8f;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

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

#save-success-modal .swp-modal-link-box {
  background: #f5f5f5;
  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: #333;
}

#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 #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  background: white;
}

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

#save-success-modal .swp-copy-btn:hover {
  background: #143a6c;
}

#save-success-modal small {
  display: block;
  margin-top: 10px;
  color: #999;
  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: #1a4d8f;
  color: white;
}

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

#save-success-modal .swp-modal-btn.secondary {
  background: #e8e8e8;
  color: #333;
}

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

/* 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 #e0e0e0;
  border-top-color: #1a4d8f;
  border-radius: 50%;
  animation: swpSpin 1s linear infinite;
  margin: 0 auto 20px;
}

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

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

/* Notification Styles */
.swp-notification {
  font-family: inherit;
}

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

/* Responsive Modal */
@media (max-width: 768px) {
  #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%;
  }
}
/* ========================================
     SWP FARBPALETTE - Corporate Design
     =========================================
     Primär (Vollton):    #1856A3
     Hintergrund 1:       #d8dad9
     Hintergrund 2:       #dce6f4
     Sekundär Gelb:       #f1d000
     Sekundär Schwarz:    #000000
     Grün:                green
     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);
  /*overflow: hidden;*/
}

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

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

.welcome-logo {
  display: block;
  width: calc(100% + 50px) !important;
  max-width: none !important;
  height: auto;
  margin: -25px -25px 20px -25px;
}

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

.welcome-content {
  text-align: left;
  margin: 0 0 30px;
  background: #d8dad9;
  padding: 25px;
  border-radius: 8px;
  overflow: hidden;
}

.welcome-content h3 {
  color: #1856a3;
  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: #1856a3 !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: #1856a3;
  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); /* ← HIER ÄNDERN */
  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: #1856a3;
}

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

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

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

/* ========================================
     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: #1856a3;
  margin: -40px -40px 30px -40px;
  padding: 20px 40px;
}

.section-title {
  background: #1856a3;
  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%;
}

/* Spezieller Style für Label-Dropdown Kombinationen */
.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: #1856a3;
  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: #1856a3;
}

.radio-button.active {
  background: #1856a3;
  color: white;
  border-color: #1856a3;
  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: #1856a3;
}

.checkbox-label.checked {
  background: #dce6f4;
  border-color: #1856a3;
}

.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 #1856a3;
  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 #1856a3;
}

.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: #1856a3;
}

/* ========================================
     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: #1856a3 !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: #1856a3 !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: #1856a3;
  background: #dce6f4;
}

.upload-area.dragover {
  border-color: #1856a3;
  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;
}

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

/* ========================================
     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: #1856a3;
  background: #dce6f4;
}

.multi-select-dropdown.open .multi-select-trigger {
  border-color: #1856a3;
  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 #1856a3;
  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;
}

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

.pill {
  background: #1856a3;
  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;
}

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

/* ========================================
     TOOLTIP STYLES
  ======================================== */
.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: #1856a3 !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: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #000000 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  max-width: 320px !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;
  margin-bottom: 12px !important;
  pointer-events: none !important;
  text-align: left !important;
}

.tooltip-content::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-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;
}

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

.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: #1856a3;
}

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

.summary-header.active .summary-arrow {
  color: #1856a3;
}

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

/* ========================================
     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: #1856a3;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #1856a3;
  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: #1856a3;
  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 (Abschlusschart)
  ======================================== */
.final-message {
  background: linear-gradient(135deg, #dce6f4 0%, #f0f7ff 100%);
  border: 3px solid #1856a3;
  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: #1856a3;
  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;
}

@media (max-width: 768px) {
  .final-content {
    flex-direction: column;
    text-align: center;
  }

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

  .mascot-image {
    width: 150px;
  }
}

/* ========================================
     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: #1856a3;
  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;
}

/* NEU: Flex Container für Maskottchen + Info nebeneinander */
.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 #1856a3;
  text-align: left;
}

.thank-you-info h3 {
  color: #1856a3;
  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;
}

/* Responsive */
@media (max-width: 768px) {
  .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 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: #1856a3 !important;
  color: white !important;
  transition: all 0.3s;
  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);
}

/* Akkordeon Slide-Animation */
.summary-accordion {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .summary-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

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

/* ========================================
     SWP DRAFT SYSTEM - CSS
  ======================================== */

/* Animation für Notifications */
@keyframes swpSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal Overlay */
#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: #1856a3;
  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: #1856a3;
  color: white;
  transition: all 0.3s;
  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: #1856a3;
  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: #1856a3;
  border-radius: 50%;
  animation: swpSpin 1s linear infinite;
  margin: 0 auto 20px;
}

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

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

/* Notification Styles */
.swp-notification {
  font-family: inherit;
}

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

/* Responsive Modal */
@media (max-width: 768px) {
  #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%;
  }
}

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

/* Info-Button in Progress Bar */
.progress-steps .header-info-tooltip {
  position: static;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 8px;
}

.progress-steps .header-info-tooltip .info-button {
  background: white !important;
  color: #1856a3 !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  border: 2px solid #1856a3 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Original tooltip-content im DOM komplett ausblenden – JS-Klon übernimmt */
.progress-steps .header-info-tooltip .tooltip-content {
  display: none !important;
}

.progress-steps .header-info-tooltip .info-button:hover {
  background: #dce6f4 !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

/* ========================================================================
   MOBILE-OPTIMIERUNG  (Stand 12.08.2026, Runde 3 - kompakt)
   ------------------------------------------------------------------------
   Alles hier liegt ausschliesslich in @media-Bloecken. Desktop bleibt
   unberuehrt. Keine Farbwerte, keine border-radius-Werte, keine
   font-family. Der Block steht am Dateiende, weil maske.css zwei
   vollstaendige Style-Bloecke enthaelt (Z. 1-1542 alt, ab 1543 aktuell)
   und nur die jeweils letzte Regel 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. */
  .progress-steps .header-info-tooltip {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    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, unvollstaendig rot - letzteres
     kommt unveraendert aus dem Bestand. Der Pfeil bleibt immer schwarz.
     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 green;
  }

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

  /* Das Logo bricht mit negativen Raendern aus .welcome-content aus. Die
     -25px waren auf das Desktop-Padding gerechnet; bei 12px Innenabstand
     ragte es 13px pro Seite darueber hinaus und wurde vom overflow:hidden
     des Containers abgeschnitten. Jetzt exakt buendig. */
  .welcome-logo {
    width: calc(100% + 24px) !important;
    margin: -12px -12px 12px !important;
  }

  .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 auf der Danke-Seite mobil ausblenden (Entscheidung
     13.08.2026, gilt fuer alle drei Instanzen). Es ist auf kleinen
     Schirmen unscharf und kostet nur Platz; das Maskottchen im
     Kopfbanner der Willkommensseite bleibt davon unberuehrt. */
  .thank-you-mascot {
    display: none;
  }
}

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