/* ===================================================================
   CLAUDE: contact-form.css – Contact Form 7 Styling
   CLAUDE: Styles für WP Contact Form 7 Plugin (CF7)
   CLAUDE: Design-Token-basiert, responsiv, accessibility-optimiert
   CLAUDE: Max. 200 Zeilen, nur Formular-Logik
   =================================================================== */

/* CLAUDE: ===== Design-Tokens (CSS Custom Properties) ===== */
/* CLAUDE: Zentrale Farb- und Spacing-Variablen für einfache Anpassung */
/* CLAUDE: Ändern: Farben an Theme-Palette anpassen (siehe base.css oder theme.json) */
:root {
  /* CLAUDE: Textfarben – für Labels, Placeholder, Body-Text */
  --cdi-text: #333;                    /* CLAUDE: Haupttextfarbe (dunkelgrau) */
  --cdi-muted: #666;                   /* CLAUDE: Sekundärtext (Placeholder, Hints) */

  /* CLAUDE: Hintergrundfarben – für Inputs und Response-Boxen */
  --cdi-bg: #faf8f4;                   /* CLAUDE: Off-White (Seiten-Hintergrund, Disabled-State) */
  --cdi-input-bg: #fff;                /* CLAUDE: Input-Hintergrund (weißer Kontrast) */

  /* CLAUDE: Rand- und Akzentfarben – für Borders, Focus, Buttons */
  --cdi-border: #dcd7ce;               /* CLAUDE: Feiner Rand (neutrales Beige) */
  --cdi-focus: #8F2330;                /* CLAUDE: Fokus-Akzent (Rotbraun) – für Focus-Ring und Button */
  --cdi-accent: #3B2A1A;               /* CLAUDE: Tiefbraun (Labels, Headings) */
  --cdi-ocker: #C19A6B;                /* CLAUDE: Ocker-Highlight (Reserve für Icons/Badges) */

  /* CLAUDE: Border-Radius – für abgerundete Ecken */
  --cdi-radius: 8px;                   /* CLAUDE: Standard-Radius (Inputs, Buttons) */

  /* CLAUDE: Schatten – für subtile Tiefe */
  --cdi-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); /* CLAUDE: Weicher Schatten (0.06 = 6% Opazität) */
}

/* CLAUDE: ===== Formular-Container ===== */
/* CLAUDE: Wrapper für das gesamte Kontaktformular */
/* CLAUDE: Ändern: max-width für breitere/schmalere Formulare anpassen */
.cdi-form,
.wpcf7 {
  /* CLAUDE: Maximale Breite des Formulars (720px = optimale Lesbarkeit) */
  max-width: 720px;

  /* CLAUDE: Zentriert das Formular horizontal */
  margin: 0 auto;

  /* CLAUDE: Innenabstand – Verhindert Rand-Kollision auf Mobile */
  padding: 8px;

  /* CLAUDE: Textfarbe für Labels und Body-Text */
  color: var(--cdi-text);
}

/* CLAUDE: ===== Formular-Zeilen (Rows) ===== */
/* CLAUDE: Vertikaler Abstand zwischen einzelnen Form-Feldern */
/* CLAUDE: Ändern: margin für engere/weitere Abstände anpassen */
.cdi-row,
.wpcf7 p {
  /* CLAUDE: 18px Abstand nach unten – verhindert visuelle Überladung */
  margin: 18px 0;
}

/* CLAUDE: ===== Labels (Feldbezeichnungen) ===== */
/* CLAUDE: Styles für <label>-Elemente über Inputs */
/* CLAUDE: Ändern: font-size oder color für andere Label-Styles */
.cdi-row label,
.wpcf7 label {
  /* CLAUDE: Block-Display – Label nimmt volle Breite ein */
  display: block;

  /* CLAUDE: Abstand zum Input-Feld (8px = kompakt, aber luftig) */
  margin-bottom: 8px;

  /* CLAUDE: Fett-Schrift – Labels deutlich hervorheben */
  font-weight: 700;

  /* CLAUDE: Farbe aus Design-Token (Tiefbraun für hohen Kontrast) */
  color: var(--cdi-accent);
}

/* CLAUDE: ===== Input-Felder (Text, Email, Tel, etc.) ===== */
/* CLAUDE: Standard-Styles für alle Textfelder und Textareas */
/* CLAUDE: Ändern: padding für größere/kleinere Touch-Targets anpassen */
.cdi-input,
.cdi-textarea,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea {
  /* CLAUDE: Volle Breite des Containers (100% = responsive) */
  width: 100%;

  /* CLAUDE: Weißer Hintergrund für klaren Kontrast */
  background: var(--cdi-input-bg);

  /* CLAUDE: Feiner Rand aus Design-Token (1px solid) */
  border: 1px solid var(--cdi-border);

  /* CLAUDE: Abgerundete Ecken (8px = modernes Design) */
  border-radius: var(--cdi-radius);

  /* CLAUDE: Innenabstand – 12px vertikal, 14px horizontal (Touch-freundlich) */
  padding: 12px 14px;

  /* CLAUDE: Schriftgröße – 16px = verhindert Auto-Zoom auf iOS */
  font-size: 16px;

  /* CLAUDE: Zeilenhöhe – 1.4 = optimale Lesbarkeit */
  line-height: 1.4;

  /* CLAUDE: Subtiler Schatten – verleiht Input Tiefe */
  box-shadow: var(--cdi-shadow);

  /* CLAUDE: Smooth-Transition für Hover/Focus-Effekte (0.15s = schnell, aber wahrnehmbar) */
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* CLAUDE: ===== Textarea-Spezifika ===== */
/* CLAUDE: Zusätzliche Styles nur für <textarea>-Elemente */
/* CLAUDE: Ändern: min-height für größere/kleinere Textareas anpassen */
.cdi-textarea,
.wpcf7-form-control.wpcf7-textarea {
  /* CLAUDE: Minimale Höhe – 160px = ~8 Zeilen Text */
  min-height: 160px;

  /* CLAUDE: Vertikales Resize – User kann Höhe anpassen (nicht Breite) */
  resize: vertical;
}

/* CLAUDE: ===== Placeholder-Styling ===== */
/* CLAUDE: Dezente Farbe für Placeholder-Text */
/* CLAUDE: Ändern: opacity für helleren/dunkleren Placeholder */
.cdi-input::placeholder,
.cdi-textarea::placeholder,
.wpcf7-form-control::placeholder {
  /* CLAUDE: Mittlere Graufarbe (--cdi-muted = #666) */
  color: var(--cdi-muted);

  /* CLAUDE: 80% Opazität – macht Placeholder noch dezenter */
  opacity: 0.8;
}

/* CLAUDE: ===== Fokus-Zustand (Inputs/Textareas) ===== */
/* CLAUDE: Visuelles Feedback beim Klicken/Fokussieren eines Feldes */
/* CLAUDE: Ändern: Focus-Ring-Farbe für andere Akzente */
.cdi-input:focus,
.cdi-textarea:focus,
.wpcf7-form-control:focus {
  /* CLAUDE: Standard-Browser-Outline entfernen (für Custom-Focus-Ring) */
  outline: none;

  /* CLAUDE: Rand-Farbe auf Akzentfarbe setzen (Rotbraun) */
  border-color: var(--cdi-focus);

  /* CLAUDE: Focus-Ring – 3px breiter Schatten in 20% Opazität der Akzentfarbe */
  /* CLAUDE: color-mix() = moderne CSS-Funktion (Safari 16.2+, Chrome 111+, Firefox 113+) */
  /* CLAUDE: Fallback: siehe Browser-Kompatibilität unten */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdi-focus) 20%, transparent);
}

/* CLAUDE: Fallback für ältere Browser ohne color-mix() */
/* CLAUDE: Wird nur in Safari <16.2, Chrome <111, Firefox <113 genutzt */
@supports not (color: color-mix(in srgb, red 20%, transparent)) {
  .cdi-input:focus,
  .cdi-textarea:focus,
  .wpcf7-form-control:focus {
    /* CLAUDE: Statischer Focus-Ring in rgba-Farbe (Rotbraun mit 20% Opazität) */
    box-shadow: 0 0 0 3px rgba(143, 35, 48, 0.2);
  }
}

/* CLAUDE: ===== Disabled-State (deaktivierte Inputs) ===== */
/* CLAUDE: Visuelles Feedback für nicht-editierbare Felder */
/* CLAUDE: Ändern: opacity für stärkere/schwächere Disabled-Optik */
.cdi-input:disabled,
.cdi-textarea:disabled,
.wpcf7-form-control:disabled {
  /* CLAUDE: Hintergrund auf Off-White setzen (nicht editierbar) */
  background: var(--cdi-bg);

  /* CLAUDE: 60% Opazität – signalisiert "nicht verfügbar" */
  opacity: 0.6;

  /* CLAUDE: Cursor auf "not-allowed" – klares Feedback bei Hover */
  cursor: not-allowed;
}

/* CLAUDE: ===== DSGVO/Privacy-Text ===== */
/* CLAUDE: Styles für Datenschutz-Hinweis über Checkbox */
/* CLAUDE: Ändern: font-size oder line-height für bessere Lesbarkeit */
.cdi-privacy-text {
  /* CLAUDE: Abstand oben (14px) und unten (8px) – trennt Text visuell von anderen Elementen */
  margin: 14px 0 8px;

  /* CLAUDE: Standard-Textfarbe (Dunkelgrau) */
  color: var(--cdi-text);

  /* CLAUDE: Zeilenhöhe – 1.6 = luftiger für längere Texte */
  line-height: 1.6;
}

/* CLAUDE: Links im Privacy-Text (z.B. "Datenschutzerklärung lesen") */
/* CLAUDE: Ändern: color für andere Link-Farben */
.cdi-privacy-text a {
  /* CLAUDE: Link-Farbe = Akzentfarbe (Rotbraun) */
  color: var(--cdi-focus);

  /* CLAUDE: Unterstreichung aktivieren (für Accessibility) */
  text-decoration: underline;

  /* CLAUDE: Abstand zwischen Text und Unterstreichung (2px = luftiger) */
  text-underline-offset: 2px;
}

/* CLAUDE: ===== Acceptance-Checkbox (DSGVO) ===== */
/* CLAUDE: Styles für CF7-Acceptance-Checkbox */
/* CLAUDE: Ändern: width/height für größere/kleinere Checkbox */
.cdi-acceptance .wpcf7-list-item {
  /* CLAUDE: Entfernt Standard-Margin von CF7-Listen */
  margin: 0;
}

.cdi-acceptance input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
  /* CLAUDE: Checkbox-Größe – 18x18px = Touch-freundlich */
  width: 18px;
  height: 18px;

  /* CLAUDE: Abstand rechts vom Label-Text (10px = luftig) */
  margin-right: 10px;

  /* CLAUDE: Vertikale Ausrichtung – zentriert Checkbox mit Text */
  vertical-align: middle;

  /* CLAUDE: Moderne Browser: Checkbox-Farbe (Akzentfarbe) */
  /* CLAUDE: Funktioniert in Chrome 93+, Safari 15.4+, Firefox 92+ */
  accent-color: var(--cdi-focus);
}

/* CLAUDE: ===== Submit-Button ===== */
/* CLAUDE: Styles für den Absende-Button */
/* CLAUDE: Ändern: padding oder font-size für größere/kleinere Buttons */
.cdi-btn--primary,
.wpcf7-submit {
  /* CLAUDE: Inline-Block – ermöglicht padding und zentriert Button */
  display: inline-block;

  /* CLAUDE: Hintergrundfarbe = Akzentfarbe (Rotbraun) */
  background: #7c4a21;
  border-color: #f7f5f2;
  /* CLAUDE: Weiße Schrift für hohen Kontrast */
  color: #fff;

  border-width: 2px;
  border-style: solid;

  /* CLAUDE: Border entfernen (modernes Button-Design) */
  border: none;

  /* CLAUDE: Abgerundete Ecken (8px = konsistent mit Inputs) */
  border-radius: var(--cdi-radius);

  /* CLAUDE: Innenabstand – 12px vertikal, 18px horizontal (Touch-freundlich) */
  padding: 12px 18px;

  /* CLAUDE: Schriftgröße – 16px = gut lesbar, Touch-optimiert */
  font-size: 16px;

  /* CLAUDE: Fett-Schrift – Button hebt sich visuell ab */
  font-weight: 700;

  /* CLAUDE: Cursor auf Pointer – signalisiert Klickbarkeit */
  cursor: pointer;

  /* CLAUDE: Subtiler Schatten – verleiht Button Tiefe */
  box-shadow: var(--cdi-shadow);

  /* CLAUDE: Transition für Hover/Active-Effekte (transform = smooth-push) */
  transition: transform 0.05s ease, background 0.15s ease;
}

/* CLAUDE: Hover-Effekt – Button wird dunkler bei Mouse-Over */
/* CLAUDE: Ändern: Prozentsatz in color-mix() für helleren/dunkleren Hover */
.cdi-btn--primary:hover,
.wpcf7-submit:hover {
  /* CLAUDE: Fallback für Browser ohne color-mix() (Safari <16.2) */
  background: #7a1e28;

  /* CLAUDE: Moderne Browser: 12% Schwarz hinzufügen = dunklerer Rotbraun */
  background: color-mix(in srgb, var(--cdi-focus) 88%, #000 12%);
}

/* CLAUDE: Active-Effekt – Button "senkt sich" beim Klicken */
.cdi-btn--primary:active,
.wpcf7-submit:active {
  /* CLAUDE: 1px nach unten verschieben = Push-Effekt */
  transform: translateY(1px);
}

/* CLAUDE: ===== Loading-State (Button disabled während Absenden) ===== */
/* CLAUDE: Zeigt Spinner während CF7 das Formular absendet */
/* CLAUDE: Ändern: Spinner-Größe (width/height) für größere/kleinere Buttons */
.wpcf7-submit[disabled],
.cdi-btn--primary:disabled {
  /* CLAUDE: Opazität reduzieren – signalisiert "nicht klickbar" */
  opacity: 0.7;

  /* CLAUDE: Cursor auf "not-allowed" setzen */
  cursor: not-allowed;

  /* CLAUDE: Text transparent machen (für Spinner-Overlay) */
  color: transparent;

  /* CLAUDE: Relative Position – ermöglicht absolute Positionierung des Spinners */
  position: relative;
}

/* CLAUDE: Spinner-Animation (Pseudo-Element) */
/* CLAUDE: Wird nur angezeigt, wenn Button disabled ist */
.wpcf7-submit[disabled]::after,
.cdi-btn--primary:disabled::after {
  /* CLAUDE: Leeres Pseudo-Element für Spinner */
  content: '';

  /* CLAUDE: Absolute Position – zentriert Spinner im Button */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* CLAUDE: Spinner-Größe – 16x16px (passt in Button) */
  width: 16px;
  height: 16px;

  /* CLAUDE: Runder Border – 2px weiß, oben transparent (Spinner-Effekt) */
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;

  /* CLAUDE: Animation – rotiert 360° in 0.6s (unendlich) */
  animation: spin 0.6s linear infinite;
}

/* CLAUDE: Keyframes für Spinner-Rotation */
@keyframes spin {
  /* CLAUDE: Von 0° auf 360° drehen = 1 volle Umdrehung */
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* CLAUDE: ===== Fehlermeldungen (Inline-Validierung) ===== */
/* CLAUDE: Erscheint direkt unter fehlerhaften Feldern */
/* CLAUDE: Ändern: color für andere Fehlerfarben */
.wpcf7-not-valid-tip {
  /* CLAUDE: Abstand nach oben – trennt Fehler vom Input */
  margin-top: 8px;

  /* CLAUDE: Kleinere Schrift – 14px = dezent, aber lesbar */
  font-size: 14px;

  /* CLAUDE: Fehlerfarbe – Rot (#c0382b = WordPress-Standard) */
  color: #c0382b;
}

/* CLAUDE: ===== Response-Boxen (Erfolg/Fehler-Messages) ===== */
/* CLAUDE: Erscheinen nach Formular-Absenden oben oder unten */
/* CLAUDE: Ändern: padding oder border-radius für andere Optik */

/* CLAUDE: Erfolgs-Nachricht (Formular erfolgreich abgesendet) */
.wpcf7 form.sent .wpcf7-response-output {
  /* CLAUDE: Grüner Rand – signalisiert Erfolg */
  border: 1px solid #46b450;

  /* CLAUDE: Hellgrüner Hintergrund – konsistent mit Border */
  background: #f0fff4;

  /* CLAUDE: Padding für Innenabstand (standardmäßig von CF7 gesetzt) */
}

/* CLAUDE: Fehler-Nachricht (Validierung fehlgeschlagen oder Server-Error) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  /* CLAUDE: Roter Rand – signalisiert Fehler */
  border: 1px solid #dc3232;

  /* CLAUDE: Hellroter Hintergrund – konsistent mit Border */
  background: #fff5f5;
}

/* CLAUDE: ===== Responsive Anpassungen (Mobile) ===== */
/* CLAUDE: Optimiert für Bildschirme unter 600px Breite */
/* CLAUDE: Ändern: Breakpoint (600px) für andere Geräte-Größen */
@media (max-width: 600px) {
  /* CLAUDE: Formular-Container – weniger Padding auf Mobile */
  .cdi-form,
  .wpcf7 {
    /* CLAUDE: 4px Padding – maximiert Nutzfläche auf kleinen Screens */
    padding: 4px 0;
  }

  /* CLAUDE: Inputs/Textareas – leicht kleinere Schrift (15px statt 16px) */
  /* CLAUDE: Verhindert Auto-Zoom auf iOS (16px ist Minimum, aber 15px ist okay mit user-scalable=yes) */
  .cdi-input,
  .cdi-textarea,
  .wpcf7-form-control {
    font-size: 15px;
  }

  /* CLAUDE: Submit-Button – volle Breite auf Mobile */
  /* CLAUDE: Macht Button einfacher zu treffen (Touch-Target) */
  .cdi-btn--primary,
  .wpcf7-submit {
    /* CLAUDE: 100% Breite – Button füllt Container */
    width: 100%;

    /* CLAUDE: Text zentrieren – konsistent mit voller Breite */
    text-align: center;
  }
}