/* =============================================================================
   Reisekostenabrechnung — Custom CSS für WS Form Pro
   Theme: Twenty Twenty-Five | Mobile-First | WCAG 2.1 AA
   Erstellt von Pixel (Design-Agent), Team Nox
   Stand: 2026-02
   ============================================================================= */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
  /* Farbpalette */
  --rk-primary:        #1a365d;  /* Dunkelblau — Vertrauen, Seriosität */
  --rk-primary-hover:  #153050;  /* Dunkelblau dunkler für Hover */
  --rk-accent:         #3182ce;  /* Mittelblau — aktive Elemente */
  --rk-accent-light:   #ebf4ff;  /* Hellblau — Info-Hintergrund */
  --rk-accent-border:  #bee3f8;  /* Hellblau — Info-Rahmen */
  --rk-success:        #38a169;  /* Grün — berechnete Felder */
  --rk-success-light:  #f0fff4;  /* Hellgrün — berechnetes Feld BG */
  --rk-success-border: #9ae6b4;  /* Grün — berechnetes Feld Rahmen */
  --rk-bg:             #f7fafc;  /* Formular-Hintergrund */
  --rk-card:           #ffffff;  /* Card-Hintergrund */
  --rk-text:           #2d3748;  /* Haupt-Text */
  --rk-text-muted:     #718096;  /* Gedimmter Text, Hilfe */
  --rk-text-light:     #a0aec0;  /* Sehr heller Text */
  --rk-error:          #e53e3e;  /* Fehler-Rot */
  --rk-error-light:    #fff5f5;  /* Fehler-Hintergrund */
  --rk-border:         #e2e8f0;  /* Standard-Rahmen */
  --rk-border-focus:   #3182ce;  /* Fokus-Rahmen */
  --rk-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --rk-shadow-md:      0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Typografie */
  --rk-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                       "Apple Color Emoji", "Segoe UI Emoji";
  --rk-font-size-xs:   0.75rem;     /* 12px */
  --rk-font-size-sm:   0.8125rem;   /* 13px — Hilfetext */
  --rk-font-size-base: 1rem;        /* 16px — Inputs */
  --rk-font-size-label:0.875rem;    /* 14px — Labels */
  --rk-font-size-lg:   1.125rem;    /* 18px — Zwischensummen */
  --rk-font-size-xl:   1.5rem;      /* 24px — Gesamtbetrag */

  /* Abstände */
  --rk-radius:         8px;
  --rk-radius-lg:      12px;
  --rk-spacing-xs:     0.25rem;
  --rk-spacing-sm:     0.5rem;
  --rk-spacing-md:     1rem;
  --rk-spacing-lg:     1.5rem;
  --rk-spacing-xl:     2rem;

  /* Touch-Targets (WCAG 2.1 AA: min. 44×44px) */
  --rk-touch-target:   44px;
}


/* =============================================================================
   2. FORM CONTAINER
   ============================================================================= */

.wsf-form {
  font-family:      var(--rk-font);
  font-size:        var(--rk-font-size-base);
  color:            var(--rk-text);
  background-color: var(--rk-bg);
  border-radius:    var(--rk-radius-lg);
  padding:          var(--rk-spacing-md);
  max-width:        800px;
  margin:           0 auto;
  line-height:      1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 640px) {
  .wsf-form {
    padding: var(--rk-spacing-xl);
  }
}


/* =============================================================================
   3. TAB-NAVIGATION (Stepper)
   ============================================================================= */

.wsf-form .wsf-group-tabs {
  display:         flex;
  flex-direction:  row;
  overflow-x:      auto;
  -webkit-overflow-scrolling: touch;
  gap:             0;
  margin-bottom:   var(--rk-spacing-lg);
  background:      var(--rk-card);
  border-radius:   var(--rk-radius);
  box-shadow:      var(--rk-shadow-sm);
  border:          1px solid var(--rk-border);
  padding:         4px;
  scroll-snap-type: x mandatory;
  /* Scrollbar verstecken aber scrollbar bleiben */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wsf-form .wsf-group-tabs::-webkit-scrollbar {
  display: none;
}

/* Einzelner Tab */
.wsf-form .wsf-group-tab {
  flex:            1 1 0%;
  scroll-snap-align: start;
  padding:         0.5rem 0.5rem;
  min-height:      var(--rk-touch-target);
  min-width:       0;
  text-align:      center;
  font-size:       var(--rk-font-size-xs);
  font-weight:     600;
  color:           var(--rk-text-muted);
  background:      transparent;
  border:          none;
  border-radius:   6px;
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease;
  display:         flex;
  align-items:     center;
  justify-content: center;
  white-space:     normal;
  position:        relative;
  text-decoration: none;
  line-height:     1.3;
  overflow:        hidden;
  text-overflow:   ellipsis;
  word-break:      break-word;
  hyphens:         auto;
}

/* Tab Hover */
.wsf-form .wsf-group-tab:hover {
  background: var(--rk-accent-light);
  color:      var(--rk-accent);
}

/* Aktiver Tab */
.wsf-form .wsf-group-tab-active,
.wsf-form .wsf-group-tab.wsf-group-tab-active {
  background: var(--rk-primary);
  color:      #ffffff;
  box-shadow: var(--rk-shadow-sm);
}

.wsf-form .wsf-group-tab-active:hover,
.wsf-form .wsf-group-tab.wsf-group-tab-active:hover {
  background: var(--rk-primary-hover);
  color:      #ffffff;
}

/* Abgeschlossene Tabs — visuell markiert mit Häkchen */
.wsf-form .wsf-group-tab[data-wsf-tab-status="complete"]::before {
  content:      "✓ ";
  color:        var(--rk-success);
  font-weight:  700;
}

/* Desktop: Tabs gleichmäßig verteilt */
@media (min-width: 768px) {
  .wsf-form .wsf-group-tabs {
    overflow-x: visible;
  }

  .wsf-form .wsf-group-tab {
    flex:      1 1 0%;
    min-width: 0;
    font-size: var(--rk-font-size-sm);
    padding:   0.625rem 0.5rem;
  }
}

/* Mobile: Kompakte Stepper-Ansicht */
@media (max-width: 767px) {
  .wsf-form .wsf-group-tabs {
    gap:        2px;
    padding:    3px;
    flex-wrap:  nowrap;
    overflow-x: auto;
  }

  .wsf-form .wsf-group-tab {
    font-size:  0.6875rem;
    padding:    0.4rem 0.375rem;
    min-width:  0;
    flex:       1 1 0%;
    line-height: 1.2;
  }
}


/* =============================================================================
   4. GRUPPEN / PANELS
   ============================================================================= */

.wsf-form .wsf-group {
  animation: rk-fade-in 0.2s ease forwards;
}

@keyframes rk-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   5. SECTIONS — Card-Styling
   ============================================================================= */

.wsf-form .wsf-section {
  background:    var(--rk-card);
  border:        1px solid var(--rk-border);
  border-radius: var(--rk-radius);
  box-shadow:    var(--rk-shadow-sm);
  padding:       var(--rk-spacing-lg);
  margin-bottom: var(--rk-spacing-lg);
}

.wsf-form .wsf-section:last-child {
  margin-bottom: 0;
}

/* Section-Überschrift */
.wsf-form .wsf-section-legend {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--rk-primary);
  padding:       0 0 var(--rk-spacing-md) 0;
  margin:        0 0 var(--rk-spacing-md) 0;
  border-bottom: 2px solid var(--rk-accent-light);
  display:       block;
  width:         100%;
  letter-spacing: 0.01em;
}

/* Section mit Trennlinie (für Zwischensummen-Abschnitte) */
.wsf-form .wsf-section.rk-section-subtotal {
  border-top: 2px solid var(--rk-border);
  padding-top: var(--rk-spacing-lg);
}


/* =============================================================================
   6. FIELD WRAPPER — Allgemeines Feld-Layout
   ============================================================================= */

.wsf-form .wsf-field-wrapper {
  margin-bottom: var(--rk-spacing-md);
}

.wsf-form .wsf-field-wrapper:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   7. LABELS
   ============================================================================= */

.wsf-form .wsf-label {
  display:       block;
  font-size:     var(--rk-font-size-label);
  font-weight:   600;
  color:         var(--rk-text);
  margin-bottom: var(--rk-spacing-xs);
  cursor:        default;
  line-height:   1.4;
}

/* Pflichtfeld-Marker */
.wsf-form .wsf-label .wsf-required {
  color:       var(--rk-error);
  margin-left: 2px;
  font-weight: 700;
  /* Sicherstellen, dass Text-Beschreibung auch vorhanden ist für SR */
  aria-hidden: true;
}


/* =============================================================================
   8. EINGABEFELDER — Input, Select, Textarea
   ============================================================================= */

.wsf-form .wsf-field {
  width:            100%;
  min-height:       var(--rk-touch-target);
  padding:          0.625rem 0.875rem;
  font-size:        var(--rk-font-size-base);
  font-family:      var(--rk-font);
  color:            var(--rk-text);
  background-color: var(--rk-card);
  border:           1.5px solid var(--rk-border);
  border-radius:    var(--rk-radius);
  transition:       border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-sizing:       border-box;
  appearance:       none;
  -webkit-appearance: none;
  line-height:      1.5;
}

/* Hover */
.wsf-form .wsf-field:hover {
  border-color: var(--rk-accent);
}

/* Focus — sichtbarer Fokus-Ring (WCAG 2.1) */
.wsf-form .wsf-field:focus {
  outline:      3px solid var(--rk-accent);
  outline-offset: 1px;
  border-color: var(--rk-border-focus);
  box-shadow:   0 0 0 3px rgba(49, 130, 206, 0.2);
}

/* Textarea */
.wsf-form textarea.wsf-field {
  min-height:  120px;
  resize:      vertical;
  line-height: 1.6;
}

/* Select */
.wsf-form select.wsf-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  background-size:     16px 16px;
  padding-right:       2.5rem;
  cursor:              pointer;
}

/* Placeholder */
.wsf-form .wsf-field::placeholder {
  color:   var(--rk-text-light);
  opacity: 1;
}


/* =============================================================================
   9. HILFETEXT
   ============================================================================= */

.wsf-form .wsf-help {
  display:    block;
  font-size:  var(--rk-font-size-sm);
  color:      var(--rk-text-muted);
  margin-top: var(--rk-spacing-xs);
  line-height: 1.4;
}


/* =============================================================================
   10. FEHLERMELDUNGEN
   ============================================================================= */

.wsf-form .wsf-invalid-feedback {
  display:     block;
  font-size:   var(--rk-font-size-sm);
  color:       var(--rk-error);
  margin-top:  var(--rk-spacing-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* Feld im Fehlerzustand */
.wsf-form .wsf-field.wsf-is-invalid,
.wsf-form .wsf-field:invalid:not(:placeholder-shown) {
  border-color:     var(--rk-error);
  background-color: var(--rk-error-light);
}

.wsf-form .wsf-field.wsf-is-invalid:focus {
  outline:    3px solid var(--rk-error);
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
}


/* =============================================================================
   11. BERECHNETE FELDER (readonly) — Success-Styling
   ============================================================================= */

.wsf-form .wsf-field[readonly],
.wsf-form .wsf-field[readonly="readonly"] {
  background-color: var(--rk-success-light);
  border-color:     var(--rk-success-border);
  color:            #276749;  /* Dunkelgrüner Text — Kontrast 4.7:1 auf hellgrünem BG */
  font-weight:      600;
  cursor:           default;
}

.wsf-form .wsf-field[readonly]:focus {
  outline:    3px solid var(--rk-success);
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2);
  border-color: var(--rk-success);
}

/* Berechnetes Feld — Label-Farbe anpassen */
.wsf-form .wsf-field-wrapper:has(.wsf-field[readonly]) .wsf-label {
  color: #276749;
}

/* Readonly-Icon: kleines Rechner-Symbol per Pseudo-Element am Wrapper */
.wsf-form .wsf-field-wrapper:has(.wsf-field[readonly]) {
  position: relative;
}


/* =============================================================================
   12. ZWISCHENSUMMEN — Größere Schrift, Trennlinie
   Konvention: Section mit Klasse .rk-subtotal oder Felder mit Klasse .rk-subtotal
   ============================================================================= */

/* Subtotal-Felder — per WS Form Custom Class auf dem Feld */
.wsf-form .wsf-field-wrapper.rk-subtotal .wsf-field {
  font-size:   var(--rk-font-size-lg);
  font-weight: 700;
  color:       var(--rk-primary);
  border-top:  2px solid var(--rk-border);
  padding-top: var(--rk-spacing-md);
  margin-top:  var(--rk-spacing-md);
}

.wsf-form .wsf-field-wrapper.rk-subtotal .wsf-label {
  font-size:   var(--rk-font-size-label);
  font-weight: 700;
  color:       var(--rk-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size:   0.75rem;
}


/* =============================================================================
   13. GESAMTBETRAG — Prominentes Highlight-Styling
   Konvention: Feld/Wrapper mit Klasse .rk-total
   ============================================================================= */

.wsf-form .wsf-field-wrapper.rk-total {
  background:    linear-gradient(135deg, var(--rk-primary) 0%, #2a4a7f 100%);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-lg);
  margin-top:    var(--rk-spacing-lg);
  box-shadow:    var(--rk-shadow-md);
}

.wsf-form .wsf-field-wrapper.rk-total .wsf-label {
  color:          #ffffff;
  font-size:      0.875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  var(--rk-spacing-sm);
  opacity:        0.85;
}

.wsf-form .wsf-field-wrapper.rk-total .wsf-field {
  background-color: rgba(255, 255, 255, 0.15);
  border-color:     rgba(255, 255, 255, 0.3);
  color:            #ffffff;
  font-size:        var(--rk-font-size-xl);
  font-weight:      700;
  text-align:       right;
  letter-spacing:   0.02em;
}

.wsf-form .wsf-field-wrapper.rk-total .wsf-field[readonly] {
  background-color: rgba(255, 255, 255, 0.15);
  border-color:     rgba(255, 255, 255, 0.4);
  color:            #ffffff;
}

.wsf-form .wsf-field-wrapper.rk-total .wsf-field:focus {
  outline:    3px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}


/* =============================================================================
   14. HINWEIS-TEXTE (texteditor) — Info-Box-Styling
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="texteditor"] {
  background:    var(--rk-accent-light);
  border:        1px solid var(--rk-accent-border);
  border-left:   4px solid var(--rk-accent);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-md) var(--rk-spacing-md) var(--rk-spacing-md) calc(var(--rk-spacing-md) + 4px);
  margin-bottom: var(--rk-spacing-lg);
}

.wsf-form .wsf-field-wrapper[data-type="texteditor"] p,
.wsf-form .wsf-field-wrapper[data-type="texteditor"] li {
  font-size:   var(--rk-font-size-sm);
  color:       #2b6cb0;  /* Dunkleres Blau für Kontrast auf hellblauem BG — 5.4:1 */
  line-height: 1.6;
  margin:      0 0 var(--rk-spacing-xs) 0;
}

.wsf-form .wsf-field-wrapper[data-type="texteditor"] strong {
  font-weight: 700;
  color:       var(--rk-primary);
}

.wsf-form .wsf-field-wrapper[data-type="texteditor"] ul {
  padding-left: var(--rk-spacing-lg);
  margin:       var(--rk-spacing-xs) 0;
}

/* Info-Icon vor Hinweis-Boxen */
.wsf-form .wsf-field-wrapper[data-type="texteditor"]::before {
  content:      "ℹ";
  display:      block;
  font-size:    1.125rem;
  color:        var(--rk-accent);
  margin-bottom: var(--rk-spacing-xs);
  font-style:   normal;
  line-height:  1;
}


/* =============================================================================
   15. FILE UPLOAD — Drag-Drop-Zone-Styling
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="file"] {
  border:        2px dashed var(--rk-border);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-xl);
  text-align:    center;
  background:    var(--rk-card);
  transition:    border-color 0.15s ease, background-color 0.15s ease;
  cursor:        pointer;
  min-height:    120px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
}

.wsf-form .wsf-field-wrapper[data-type="file"]:hover,
.wsf-form .wsf-field-wrapper[data-type="file"]:focus-within {
  border-color: var(--rk-accent);
  background:   var(--rk-accent-light);
}

/* Upload-Icon — über Pseudo-Element */
.wsf-form .wsf-field-wrapper[data-type="file"]::before {
  content:      "📎";
  font-size:    2rem;
  display:      block;
  margin-bottom: var(--rk-spacing-sm);
  opacity:      0.6;
}

/* Datei-Input selbst unsichtbar machen, WS Form steuert das UI */
.wsf-form .wsf-field-wrapper[data-type="file"] input[type="file"] {
  min-height: var(--rk-touch-target);
}

/* Upload-Hilfetext */
.wsf-form .wsf-field-wrapper[data-type="file"] .wsf-help {
  text-align: center;
  font-size:  var(--rk-font-size-sm);
}

/* Liste hochgeladener Dateien */
.wsf-form .wsf-field-wrapper[data-type="file"] .wsf-file-list {
  text-align:  left;
  width:       100%;
  margin-top:  var(--rk-spacing-md);
  padding-top: var(--rk-spacing-md);
  border-top:  1px solid var(--rk-border);
}

.wsf-form .wsf-field-wrapper[data-type="file"] .wsf-file-item {
  font-size:   var(--rk-font-size-sm);
  color:       var(--rk-text);
  padding:     var(--rk-spacing-xs) 0;
  display:     flex;
  align-items: center;
  gap:         var(--rk-spacing-sm);
}


/* =============================================================================
   16. SIGNATUR-FELD
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="signature"] {
  border:        1.5px solid var(--rk-border);
  border-radius: var(--rk-radius);
  background:    var(--rk-card);
  overflow:      hidden;
  padding:       var(--rk-spacing-sm);
}

/* Signatur-Canvas */
.wsf-form .wsf-field-wrapper[data-type="signature"] canvas {
  display:       block;
  width:         100%;
  min-height:    160px;  /* Groß genug für Finger */
  border:        1px dashed var(--rk-border);
  border-radius: 4px;
  background:    #fafafa;
  touch-action:  none;   /* Wichtig: verhindert Scrollen beim Signieren */
  cursor:        crosshair;
}

.wsf-form .wsf-field-wrapper[data-type="signature"]:focus-within {
  border-color: var(--rk-accent);
  box-shadow:   0 0 0 3px rgba(49, 130, 206, 0.2);
}

/* Hint-Text unter Signatur */
.wsf-form .wsf-field-wrapper[data-type="signature"]::after {
  content:     "✍ Bitte hier unterschreiben";
  display:     block;
  font-size:   var(--rk-font-size-sm);
  color:       var(--rk-text-muted);
  text-align:  center;
  margin-top:  var(--rk-spacing-xs);
  font-style:  italic;
}

/* Signatur Label */
.wsf-form .wsf-field-wrapper[data-type="signature"] .wsf-label {
  font-size:     var(--rk-font-size-label);
  margin-bottom: var(--rk-spacing-sm);
}

/* Löschen-Button der Signatur */
.wsf-form .wsf-field-wrapper[data-type="signature"] button[type="button"] {
  min-height:    var(--rk-touch-target);
  min-width:     var(--rk-touch-target);
  padding:       0.5rem var(--rk-spacing-md);
  margin-top:    var(--rk-spacing-sm);
  font-size:     var(--rk-font-size-sm);
  color:         var(--rk-error);
  border:        1.5px solid var(--rk-error);
  border-radius: var(--rk-radius);
  background:    transparent;
  cursor:        pointer;
  transition:    background 0.15s ease, color 0.15s ease;
}

.wsf-form .wsf-field-wrapper[data-type="signature"] button[type="button"]:hover {
  background: var(--rk-error);
  color:      #ffffff;
}

.wsf-form .wsf-field-wrapper[data-type="signature"] button[type="button"]:focus {
  outline:    3px solid var(--rk-error);
  outline-offset: 2px;
}


/* =============================================================================
   17. CHECKBOXEN
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="checkbox"] .wsf-label {
  font-weight: 500;
}

/* Checkbox-Item */
.wsf-form .wsf-field-wrapper[data-type="checkbox"] .form-check {
  display:     flex;
  align-items: flex-start;
  gap:         var(--rk-spacing-sm);
  padding:     var(--rk-spacing-xs) 0;
  min-height:  var(--rk-touch-target);
  cursor:      pointer;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  width:              24px;
  height:             24px;
  min-width:          24px;
  min-height:         24px;
  margin-top:         0;
  cursor:             pointer;
  border-radius:      5px;
  border:             2px solid var(--rk-border);
  background:         var(--rk-card);
  transition:         background 0.15s ease, border-color 0.15s ease;
  position:           relative;
  display:            inline-flex;
  align-items:        center;
  justify-content:    center;
  flex-shrink:        0;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"]:checked {
  background:   var(--rk-primary);
  border-color: var(--rk-primary);
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"]:checked::after {
  content:        "";
  display:        block;
  width:          6px;
  height:         12px;
  border:         solid #ffffff;
  border-width:   0 2.5px 2.5px 0;
  transform:      rotate(45deg);
  margin-top:     -2px;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"]:focus {
  outline:        3px solid var(--rk-accent);
  outline-offset: 2px;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] .form-check-label {
  font-size:   var(--rk-font-size-base);
  color:       var(--rk-text);
  cursor:      pointer;
  line-height: 1.5;
  padding-top: 2px;
}

/* Einwilligungs-Checkbox — besonders hervorgehoben */
.wsf-form .wsf-field-wrapper[data-type="checkbox"].rk-consent {
  background:    var(--rk-accent-light);
  border:        1px solid var(--rk-accent-border);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-md);
}


/* =============================================================================
   18. NUMBER-FELDER
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="number"] .wsf-field {
  text-align:    right;
  font-variant-numeric: tabular-nums;  /* Zahlen gleichmäßig */
  letter-spacing: 0.02em;
}

/* Native Spin-Buttons ausblenden */
.wsf-form .wsf-field-wrapper[data-type="number"] input[type="number"]::-webkit-inner-spin-button,
.wsf-form .wsf-field-wrapper[data-type="number"] input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wsf-form .wsf-field-wrapper[data-type="number"] input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Minimalistisches Flat-Design: Angle-Arrows für Number-Felder */
.wsf-form .wsf-field-wrapper[data-type="number"] {
  position: relative;
}
.wsf-form .wsf-field-wrapper[data-type="number"]:not([class*="readonly"]) .wsf-field-inner {
  position: relative;
}
.wsf-form .wsf-field-wrapper[data-type="number"] .wsf-field:not([readonly]) {
  padding-right: 2.5rem;
}


/* =============================================================================
   19. SUBMIT-BUTTON
   ============================================================================= */

.wsf-form .wsf-field-wrapper[data-type="submit"] {
  margin-top: var(--rk-spacing-xl);
  text-align: center;
}

.wsf-form .wsf-field-wrapper[data-type="submit"] button,
.wsf-form .wsf-field-wrapper[data-type="submit"] input[type="submit"] {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--rk-spacing-sm);
  width:            100%;
  min-height:       var(--rk-touch-target);
  padding:          0.875rem var(--rk-spacing-xl);
  font-size:        1.0625rem;
  font-weight:      700;
  font-family:      var(--rk-font);
  color:            #ffffff;
  background:       var(--rk-primary);
  border:           2px solid var(--rk-primary);
  border-radius:    var(--rk-radius);
  cursor:           pointer;
  transition:       background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow:       var(--rk-shadow-md);
  letter-spacing:   0.02em;
  text-transform:   none;
}

.wsf-form .wsf-field-wrapper[data-type="submit"] button:hover,
.wsf-form .wsf-field-wrapper[data-type="submit"] input[type="submit"]:hover {
  background:  var(--rk-primary-hover);
  box-shadow:  0 6px 12px rgba(26, 54, 93, 0.3);
  transform:   translateY(-1px);
}

.wsf-form .wsf-field-wrapper[data-type="submit"] button:active,
.wsf-form .wsf-field-wrapper[data-type="submit"] input[type="submit"]:active {
  transform:  translateY(0);
  box-shadow: var(--rk-shadow-sm);
}

.wsf-form .wsf-field-wrapper[data-type="submit"] button:focus,
.wsf-form .wsf-field-wrapper[data-type="submit"] input[type="submit"]:focus {
  outline:        3px solid var(--rk-accent);
  outline-offset: 3px;
}

/* Desktop: Button nicht full-width */
@media (min-width: 640px) {
  .wsf-form .wsf-field-wrapper[data-type="submit"] button,
  .wsf-form .wsf-field-wrapper[data-type="submit"] input[type="submit"] {
    width: auto;
    min-width: 220px;
  }
}

/* Mobile: Submit-Button sticky */
@media (max-width: 639px) {
  .wsf-form .wsf-field-wrapper[data-type="submit"] {
    position:   sticky;
    bottom:     0;
    background: var(--rk-bg);
    padding:    var(--rk-spacing-md) 0;
    margin-top: var(--rk-spacing-md);
    z-index:    10;
    border-top: 1px solid var(--rk-border);
  }
}


/* =============================================================================
   20. TAB-NAVIGATIONS-BUTTONS (Zurück / Weiter)
   ============================================================================= */

/* Gemeinsame Basis */
.wsf-form .tab_previous,
.wsf-form .tab_next {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--rk-spacing-xs);
  min-height:    var(--rk-touch-target);
  min-width:     120px;
  padding:       0.625rem var(--rk-spacing-lg);
  font-size:     var(--rk-font-size-base);
  font-weight:   600;
  font-family:   var(--rk-font);
  border-radius: var(--rk-radius);
  cursor:        pointer;
  transition:    background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  border:        2px solid transparent;
  text-decoration: none;
  line-height:   1;
}

/* Weiter-Button — Primär */
.wsf-form .tab_next {
  background: var(--rk-accent);
  color:      #ffffff;
  border-color: var(--rk-accent);
}

.wsf-form .tab_next:hover {
  background:  #2563a0;
  border-color: #2563a0;
  box-shadow:  0 4px 8px rgba(49, 130, 206, 0.3);
  transform:   translateY(-1px);
}

.wsf-form .tab_next:focus {
  outline:        3px solid var(--rk-accent);
  outline-offset: 3px;
}

/* Zurück-Button — Sekundär */
.wsf-form .tab_previous {
  background:   transparent;
  color:        var(--rk-text-muted);
  border-color: var(--rk-border);
}

.wsf-form .tab_previous:hover {
  background:   var(--rk-bg);
  color:        var(--rk-text);
  border-color: var(--rk-text-muted);
}

.wsf-form .tab_previous:focus {
  outline:        3px solid var(--rk-accent);
  outline-offset: 3px;
}

/* Button-Leiste */
.wsf-form .wsf-group-button-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--rk-spacing-md);
  margin-top:      var(--rk-spacing-xl);
  padding-top:     var(--rk-spacing-lg);
  border-top:      1px solid var(--rk-border);
}

@media (max-width: 639px) {
  .wsf-form .tab_previous,
  .wsf-form .tab_next {
    flex: 1;
  }
}


/* =============================================================================
   21. FORTSCHRITTS-ANZEIGE (optional, falls WS Form Progress Bar nutzt)
   ============================================================================= */

.wsf-form .wsf-progress {
  height:           6px;
  background:       var(--rk-border);
  border-radius:    3px;
  overflow:         hidden;
  margin-bottom:    var(--rk-spacing-lg);
}

.wsf-form .wsf-progress-bar {
  height:           100%;
  background:       linear-gradient(90deg, var(--rk-accent), var(--rk-success));
  border-radius:    3px;
  transition:       width 0.4s ease;
}


/* =============================================================================
   22. SUCCES-MESSAGE / CONFIRMATION
   ============================================================================= */

.wsf-form .wsf-message-success,
.wsf-form .wsf-confirmation {
  background:    var(--rk-success-light);
  border:        1.5px solid var(--rk-success-border);
  border-left:   4px solid var(--rk-success);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-lg);
  color:         #276749;
  font-size:     var(--rk-font-size-base);
  line-height:   1.6;
  text-align:    center;
}

.wsf-form .wsf-message-error {
  background:    var(--rk-error-light);
  border:        1.5px solid #feb2b2;
  border-left:   4px solid var(--rk-error);
  border-radius: var(--rk-radius);
  padding:       var(--rk-spacing-lg);
  color:         #742a2a;
  font-size:     var(--rk-font-size-base);
  line-height:   1.6;
}


/* =============================================================================
   23. LOADING-ZUSTAND
   ============================================================================= */

.wsf-form.wsf-form-loading {
  opacity:        0.7;
  pointer-events: none;
}

.wsf-form .wsf-spinner {
  display:       inline-block;
  width:         20px;
  height:        20px;
  border:        2px solid rgba(255,255,255,0.4);
  border-top:    2px solid #ffffff;
  border-radius: 50%;
  animation:     rk-spin 0.8s linear infinite;
}

@keyframes rk-spin {
  to { transform: rotate(360deg); }
}


/* =============================================================================
   24. RESPONSIVE GRID — 2-Spalten-Layout für Desktop
   ============================================================================= */

/* Felder in einer Row (WS Form nutzt Bootstrap-ähnliches Grid) */
@media (min-width: 640px) {
  .wsf-form .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-spacing-md);
    margin: 0 calc(var(--rk-spacing-md) / -2);
  }

  .wsf-form .col-sm-6 {
    flex: 0 0 calc(50% - var(--rk-spacing-md) / 2);
    max-width: calc(50% - var(--rk-spacing-md) / 2);
  }

  .wsf-form .col-sm-4 {
    flex: 0 0 calc(33.333% - var(--rk-spacing-md) * 2 / 3);
  }

  .wsf-form .col-sm-8 {
    flex: 0 0 calc(66.666% - var(--rk-spacing-md) / 3);
  }
}

/* Mobile: immer full-width */
@media (max-width: 639px) {
  .wsf-form .wsf-field {
    width: 100%;
  }

  .wsf-form [class*="col-"] {
    width: 100%;
    flex:  0 0 100%;
    max-width: 100%;
  }
}


/* =============================================================================
   25. ACCESSIBILITY — Focus-Visible, Reduced Motion, High Contrast
   ============================================================================= */

/* Focus nur bei Tastatur (nicht bei Mausklick) */
.wsf-form *:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.wsf-form *:focus-visible {
  outline:        3px solid var(--rk-accent);
  outline-offset: 2px;
}

/* Animationen reduzieren für prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wsf-form *,
  .wsf-form *::before,
  .wsf-form *::after {
    animation-duration:   0.01ms;
    animation-iteration-count: 1;
    transition-duration:  0.01ms;
  }

  .wsf-form .wsf-group {
    animation: none;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .wsf-form .wsf-field {
    border: 2px solid ButtonText;
  }

  .wsf-form .wsf-field:focus {
    outline: 3px solid Highlight;
  }

  .wsf-form .tab_next,
  .wsf-form .wsf-field-wrapper[data-type="submit"] button {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  .wsf-form .wsf-field[readonly] {
    background-color: Mark;
    color: MarkText;
  }
}

/* Skip-Link für Screenreader */
.wsf-form .wsf-sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  clip-path: inset(50%);
  border:    0;
  white-space: nowrap;
}


/* =============================================================================
   26. DATUM-/UHRZEIT-FELDER
   ============================================================================= */

.wsf-form input[type="date"],
.wsf-form input[type="datetime-local"],
.wsf-form input[type="time"] {
  min-height:   var(--rk-touch-target);
  font-size:    var(--rk-font-size-base);
  color-scheme: light;
}

/* iOS: Datum-Picker Hintergrund */
.wsf-form input[type="date"]::-webkit-date-and-time-value {
  min-width: 120px;
}


/* =============================================================================
   27. PRINT-STYLES — Sauberer Ausdruck
   ============================================================================= */

@media print {
  .wsf-form {
    background:  #ffffff;
    box-shadow:  none;
    padding:     0;
    max-width:   100%;
    font-size:   11pt;
    color:       #000000;
  }

  /* Keine Tab-Navigation im Druck */
  .wsf-form .wsf-group-tabs,
  .wsf-form .tab_previous,
  .wsf-form .tab_next,
  .wsf-form .wsf-field-wrapper[data-type="submit"] {
    display: none;
  }

  /* Alle Tabs sichtbar machen */
  .wsf-form .wsf-group {
    display:    block;
    page-break-inside: avoid;
  }

  /* Sections als klare Boxen */
  .wsf-form .wsf-section {
    border:     1px solid #cccccc;
    box-shadow: none;
    page-break-inside: avoid;
    margin-bottom: 12pt;
  }

  .wsf-form .wsf-section-legend {
    color:       #000000;
    border-bottom: 1px solid #cccccc;
  }

  /* Felder für Druck */
  .wsf-form .wsf-field {
    border:  1px solid #aaaaaa;
    background: #ffffff;
    color:   #000000;
  }

  .wsf-form .wsf-field[readonly] {
    background: #f0f0f0;
    color:      #000000;
    border:     1px solid #aaaaaa;
  }

  /* Gesamtbetrag im Druck */
  .wsf-form .wsf-field-wrapper.rk-total {
    background:  #f0f0f0;
    border:      2px solid #000000;
    border-radius: 0;
  }

  .wsf-form .wsf-field-wrapper.rk-total .wsf-label,
  .wsf-form .wsf-field-wrapper.rk-total .wsf-field {
    color: #000000;
  }

  /* Labels */
  .wsf-form .wsf-label {
    color:       #000000;
    font-weight: bold;
  }

  /* Hinweis-Boxen */
  .wsf-form .wsf-field-wrapper[data-type="texteditor"] {
    background:  #f8f8f8;
    border-left: 3pt solid #333333;
    border-color: #cccccc;
  }

  .wsf-form .wsf-field-wrapper[data-type="texteditor"] p,
  .wsf-form .wsf-field-wrapper[data-type="texteditor"] li {
    color: #000000;
  }

  /* File Upload + Signatur im Druck */
  .wsf-form .wsf-field-wrapper[data-type="file"],
  .wsf-form .wsf-field-wrapper[data-type="signature"] {
    border:    1px solid #aaaaaa;
    min-height: 60pt;
  }

  /* Kein sticky auf Print */
  .wsf-form .wsf-field-wrapper[data-type="submit"] {
    position: static;
  }

  /* Pagebreaks */
  .wsf-form .wsf-section {
    break-inside: avoid;
  }

  /* Links im Druck sichtbar */
  .wsf-form a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color:    #444444;
  }

  /* Fehler-/Hilfe-Texte ausblenden */
  .wsf-form .wsf-help,
  .wsf-form .wsf-invalid-feedback {
    display: none;
  }
}


/* =============================================================================
   28. DARK MODE (optional — respektiert Systemeinstellung)
   ============================================================================= */

/* Dark Mode entfernt — Kundenentwicklung, kein Dark Mode gewünscht */


/* =============================================================================
   ENDE — reisekosten-form.css
   Pixel (Design-Agent), Team Nox | 2026-02
   ============================================================================= */