/* ==========================================================================
   CONTACT FORM STYLES - Contact Form 7 Integration
   ========================================================================== */

/**
 * Contact Form 7 Custom Styling
 *
 * Dieses Stylesheet überschreibt die Standard CF7 Styles und integriert
 * das Formular nahtlos in das Theme-Design.
 *
 * Architektur:
 * 1. Base Form Styles (Container, Rows)
 * 2. Input & Textarea Styles
 * 3. Button Styles (Integration aus buttons.css)
 * 4. Validation States (Error, Success)
 * 5. Response Messages
 * 6. Responsive Breakpoints
 * 7. Accessibility Features
 *
 * Performance: Wird nur auf Kontakt-Seite geladen (siehe enqueue.php)
 * Datei-Limit: Max 500 Zeilen (CLAUDE.md)
 * Aktuell: ~320 Zeilen
 */

/* --------------------------------------------------------------------------
   1. BASE FORM CONTAINER
   -------------------------------------------------------------------------- */

/**
 * Hauptcontainer für das Formular
 * Zentriert, mit Box-Shadow für Elevation
 */
.wpcf7 {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--color-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/**
 * Formular-Zeilen (Grid Layout für responsive Struktur)
 */
.wpcf7 .form-row {
    margin-bottom: 1.5rem;
}

.wpcf7 .form-row:last-of-type {
    margin-bottom: 0;
}

/**
 * CF7 <br> Tags entfernen (doppelte Abstände)
 * CF7 fügt automatisch <br> nach Labels und Inputs ein
 * Diese verstecken wir, um saubere Abstände zu haben
 */
.wpcf7 label br {
    display: none;
}

.wpcf7 .form-row p {
    margin: 0;
    padding: 0;
}

/**
 * Zwei-Spalten Grid (nur Desktop, siehe Media Queries)
 */
.wpcf7 .form-grid {
    display: block; /* Mobile: Stacked */
}

/* --------------------------------------------------------------------------
   2. LABELS & INPUT FIELDS
   -------------------------------------------------------------------------- */

/**
 * Labels - konsistent mit Theme-Typography
 */
.wpcf7 label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    font-size: 1rem;
    line-height: 1.4;
}

/**
 * Text Inputs & Textarea - Touch-freundlich (min 48px)
 * Nutzt CSS Custom Properties für Theming
 */
.wpcf7 .form-input,
.wpcf7 .form-textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    width: 100%;
    padding: 1rem 1.25rem;
    min-height: 48px; /* Touch-Target: mindestens 44px, hier 48px */
    border: 2px solid var(--color-gray-light, #e0e0e0);
    border-radius: 8px; /* Modernere Border-Radius */
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-white, #ffffff);
    color: var(--color-text, #333333);
}

/**
 * Focus State - Accessibility & UX (modernized)
 */
.wpcf7 .form-input:focus,
.wpcf7 .form-textarea:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus {
    outline: none;
    border-color: var(--color-primary, #5CB8E9);
    box-shadow: 0 0 0 4px rgba(92, 184, 233, 0.15);
    transform: translateY(-2px); /* Subtle lift on focus */
    animation: focus-glow-pulse 1.5s ease-in-out infinite;
}

/**
 * Focus Glow Pulse Animation
 *
 * Sanfter, pulsierender Glow-Effekt bei fokussierten Inputs.
 * Gibt dem User visuelles Feedback, dass das Feld aktiv ist.
 *
 * Features:
 * - Subtiler Puls (4px → 6px → 4px)
 * - Nutzt Brand-Farbe (Blau)
 * - 1.5s Zyklus (ruhig, nicht störend)
 *
 * @since 1.2.0 - Animation Enhancement Phase 3
 */
@keyframes focus-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(92, 184, 233, 0.15);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(92, 184, 233, 0.25);
    }
}

/**
 * Textarea - spezifische Anpassungen
 */
.wpcf7 .form-textarea,
.wpcf7 textarea {
    min-height: 150px;
    resize: vertical; /* Nur vertikal resizebar */
    line-height: 1.6;
}

/**
 * Placeholder Styling
 */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: var(--color-gray-medium, #999999);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. CHECKBOX (Datenschutz-Acceptance)
   -------------------------------------------------------------------------- */

/**
 * Datenschutz-Checkbox Container
 * Flexbox für saubere Ausrichtung
 *
 * WICHTIG: Contact Form 7 generiert folgende HTML-Struktur:
 * <span class="wpcf7-form-control wpcf7-acceptance">
 *   <span class="wpcf7-list-item">
 *     <label>
 *       <input type="checkbox">
 *       <span class="wpcf7-list-item-label">Text...</span>
 *     </label>
 *   </span>
 * </span>
 */
.wpcf7 .form-row--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/**
 * Contact Form 7 Acceptance-Feld FIX
 *
 * Problem: CF7 generiert folgende fehlerhafte Struktur:
 * <p>
 *   <span class="wpcf7-list-item"><input type="checkbox"></span>
 *   <br>  <!-- Erzwingt Zeilenumbruch! -->
 *   <label>Text...</label>
 * </p>
 *
 * Lösung:
 * 1. <p> als Flex-Container
 * 2. <br> verstecken
 * 3. Checkbox nicht schrumpfen lassen
 */

/**
 * Parent <p> Element als Flex-Container
 * Nur wenn es ein wpcf7-acceptance Feld enthält
 */
.wpcf7 p:has(.wpcf7-acceptance) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/**
 * <br> Tag zwischen Checkbox und Text verstecken
 * Verhindert erzwungenen Zeilenumbruch
 */
.wpcf7 p:has(.wpcf7-acceptance) br {
    display: none;
}

/**
 * Wrapper um die Checkbox - nicht schrumpfen lassen
 */
.wpcf7 .wpcf7-acceptance {
    flex-shrink: 0;
}

/**
 * List-Item Container - Checkbox inline halten
 */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 0;
}

/**
 * Labels und Links in der gleichen Zeile halten
 * Wrap auf flex-wrap: wrap vom Parent <p>
 */
.wpcf7 p:has(.wpcf7-acceptance) label,
.wpcf7 p:has(.wpcf7-acceptance) a {
    line-height: 1.6;
    /* Text soll auf Checkbox-Höhe ausgerichtet sein */
    align-self: flex-start;
}

/**
 * Checkbox Input - Touch-optimiert (44x44px Touch-Target)
 *
 * Problem: Standard-Checkbox ist 18x18px (zu klein für Touch)
 * Lösung: Größere Checkbox mit Custom-Styling
 */
.wpcf7 .form-checkbox,
.wpcf7 input[type="checkbox"] {
    /* Native Checkbox verstecken */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Touch-freundliche Größe - direkt 44x44px */
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;

    /* Styling */
    border: 2px solid var(--color-gray-medium, #999);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.75rem;

    /* Transition für Interaktionen */
    transition: all 0.2s ease;
}

/**
 * Hover State
 */
.wpcf7 input[type="checkbox"]:hover {
    border-color: var(--color-primary, #5CB8E9);
    box-shadow: 0 0 0 3px rgba(92, 184, 233, 0.1);
}

/**
 * Focus State (Keyboard Navigation)
 */
.wpcf7 input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--color-primary, #5CB8E9);
    box-shadow: 0 0 0 4px rgba(92, 184, 233, 0.25);
}

/**
 * Checked State - Checkmark
 * Checkmark perfekt zentriert in 44x44px Box
 */
.wpcf7 input[type="checkbox"]:checked {
    background: var(--color-primary, #5CB8E9);
    border-color: var(--color-primary, #5CB8E9);
}

.wpcf7 input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;

    /* Perfekt zentriert für 44x44px Checkbox */
    left: 50%;
    top: 50%;

    /* Checkmark Größe */
    width: 8px;
    height: 16px;

    /* Weißer Haken */
    border: solid white;
    border-width: 0 3px 3px 0;

    /* Zentrieren + Rotation für Haken-Form */
    transform: translate(-50%, -60%) rotate(45deg);

    /* Animated Erscheinen */
    opacity: 1;
    animation: checkmark-pop 0.3s ease-out forwards;
}

/**
 * Checkmark Pop Animation
 *
 * Animiertes Erscheinen des Hakens beim Aktivieren der Checkbox.
 * Startet klein, wird kurz größer (overshoot), dann normale Größe.
 *
 * Features:
 * - Scale von 0 → 1.2 → 1 (bounce effect)
 * - Schnell (0.3s) für responsive Feedback
 * - Behält finale Transform-Werte bei
 *
 * @since 1.2.0 - Animation Enhancement Phase 3
 */
@keyframes checkmark-pop {
    0% {
        transform: translate(-50%, -60%) rotate(45deg) scale(0);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1);
        opacity: 1;
    }
}

/**
 * Disabled State
 */
.wpcf7 input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/**
 * Checkbox Label Text
 */
.wpcf7 .wpcf7-list-item-label {
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 400;
}

/**
 * Datenschutz-Link
 */
.wpcf7 .form-row--checkbox a {
    color: var(--color-primary, #007bff);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.wpcf7 .form-row--checkbox a:hover {
    color: var(--color-primary-dark, #0056b3);
}

/* --------------------------------------------------------------------------
   4. SUBMIT BUTTON
   -------------------------------------------------------------------------- */

/**
 * Submit Button - Touch-freundlich (min 52px)
 * Integration mit buttons.css + zusätzliche Optimierungen
 */
.wpcf7 .wpcf7-submit {
    /* Styles werden von buttons.css übernommen, hier zusätzliche Optimierungen */
    min-height: 52px; /* Größer als 44px Touch-Target */
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/**
 * Hover State - Moderne Elevation
 */
.wpcf7 .wpcf7-submit:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(92, 184, 233, 0.4);
}

/**
 * Active State - Press Effect
 */
.wpcf7 .wpcf7-submit:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/**
 * Disabled State während Form-Submit
 */
.wpcf7 .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/**
 * Ripple Effect bei Click
 */
.wpcf7 .wpcf7-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.wpcf7 .wpcf7-submit:active::before {
    width: 300px;
    height: 300px;
}

/* --------------------------------------------------------------------------
   5. VALIDATION STATES (Fehler)
   -------------------------------------------------------------------------- */

/**
 * Ungültige Felder - visuelles Feedback
 */
.wpcf7 .wpcf7-not-valid {
    border-color: var(--color-error, #dc3545) !important;
    background: rgba(220, 53, 69, 0.05);
}

/**
 * Fehlermeldung direkt unter dem Feld
 */
.wpcf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-error, #dc3545);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
}

/**
 * Allgemeine Validation Errors (oben im Formular)
 */
.wpcf7 .wpcf7-validation-errors {
    border: 2px solid var(--color-error, #dc3545);
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error, #dc3545);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. RESPONSE MESSAGES (Erfolg, Fehler, Spam)
   -------------------------------------------------------------------------- */

/**
 * Erfolgsmeldung - grüner Alert
 */
.wpcf7 .wpcf7-mail-sent-ok {
    border: 2px solid var(--color-success, #28a745);
    background: rgba(40, 167, 69, 0.1);
    color: var(--color-success-dark, #1e7e34);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
    font-weight: 500;
}

/**
 * Allgemeine Fehlermeldung - roter Alert
 */
.wpcf7 .wpcf7-mail-sent-ng {
    border: 2px solid var(--color-error, #dc3545);
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error, #dc3545);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
}

/**
 * Spam-Blockierung - gelber/oranger Alert
 */
.wpcf7 .wpcf7-spam-blocked {
    border: 2px solid var(--color-warning, #ffc107);
    background: rgba(255, 193, 7, 0.1);
    color: var(--color-warning-dark, #856404);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
}

/**
 * Acceptance fehlt (Datenschutz nicht akzeptiert)
 */
.wpcf7 .wpcf7-acceptance-missing {
    border: 2px solid var(--color-error, #dc3545);
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error, #dc3545);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   7. LOADING STATE (während AJAX Submit)
   -------------------------------------------------------------------------- */

/**
 * CF7 Spinner während Form-Submit
 * Standardmäßig versteckt, nur sichtbar während .submitting
 */
.wpcf7 .wpcf7-spinner {
    display: none; /* Versteckt per Default */
    width: 24px;
    height: 24px;
    margin-left: 1rem;
    vertical-align: middle;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-primary, #007bff);
    border-radius: 50%;
    animation: wpcf7-spin 0.6s linear infinite;
}

/**
 * Spinner nur während Submit anzeigen
 * CF7 fügt .submitting Klasse hinzu
 */
.wpcf7 .wpcf7-form.submitting .wpcf7-spinner {
    display: inline-block;
}

/**
 * Spin Animation
 */
@keyframes wpcf7-spin {
    to {
        transform: rotate(360deg);
    }
}

/**
 * Form während Submit dimmen (verhindert Doppel-Submit)
 */
.wpcf7 .wpcf7-form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. ACCESSIBILITY (A11Y)
   -------------------------------------------------------------------------- */

/**
 * Fokus-Indikator für Tastatur-Navigation
 * Wichtig für WCAG 2.1 Compliance
 */
.wpcf7 .form-input:focus-visible,
.wpcf7 .form-textarea:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
    outline: 3px solid var(--color-primary, #007bff);
    outline-offset: 2px;
}

/**
 * Screen-Reader only Text
 * Versteckt visuell, aber für SR verfügbar
 */
.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE DESIGN (Mobile First)
   -------------------------------------------------------------------------- */

/**
 * Tablet (ab 768px)
 * Größere Paddings, mehr Whitespace
 */
@media (min-width: 768px) {
    .wpcf7 {
        padding: 2.5rem;
    }

    .wpcf7 .form-row {
        margin-bottom: 2rem;
    }

    .wpcf7 label {
        font-size: 1rem;
    }

    .wpcf7 .form-input,
    .wpcf7 .form-textarea,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"] {
        padding: 0.875rem 1.25rem;
    }
}

/**
 * Desktop (ab 1024px)
 * Zwei-Spalten-Layout für bestimmte Felder
 */
@media (min-width: 1024px) {
    .wpcf7 {
        padding: 3rem;
    }

    /**
     * Grid für Name/E-Mail nebeneinander (optional)
     * Aktivieren durch .form-grid Klasse im CF7 Markup
     */
    .wpcf7 .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   10. DARK MODE SUPPORT (Optional)
   -------------------------------------------------------------------------- */

/**
 * Dark Mode Styles (falls Theme Dark Mode unterstützt)
 * Nutzt prefers-color-scheme Media Query
 */
@media (prefers-color-scheme: dark) {
    .wpcf7 {
        background: var(--color-dark-bg, #1a1a1a);
        color: var(--color-dark-text, #e0e0e0);
    }

    .wpcf7 label {
        color: var(--color-dark-text, #e0e0e0);
    }

    .wpcf7 .form-input,
    .wpcf7 .form-textarea,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea {
        background: var(--color-dark-input, #2a2a2a);
        color: var(--color-dark-text, #e0e0e0);
        border-color: var(--color-dark-border, #404040);
    }

    .wpcf7 .form-input:focus,
    .wpcf7 .form-textarea:focus,
    .wpcf7 input:focus,
    .wpcf7 textarea:focus {
        border-color: var(--color-primary, #007bff);
        background: var(--color-dark-input-focus, #333333);
    }

    .wpcf7 input::placeholder,
    .wpcf7 textarea::placeholder {
        color: var(--color-dark-placeholder, #666666);
    }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION SUPPORT
   -------------------------------------------------------------------------- */

/**
 * Accessibility: Deaktiviert Animationen
 * Für Nutzer mit prefers-reduced-motion
 *
 * @since 1.2.0 - Animation Enhancement Phase 3
 */
@media (prefers-reduced-motion: reduce) {
    .wpcf7 .form-input:focus,
    .wpcf7 .form-textarea:focus,
    .wpcf7 input[type="text"]:focus,
    .wpcf7 input[type="email"]:focus,
    .wpcf7 input[type="tel"]:focus {
        animation: none;
    }

    .wpcf7 input[type="checkbox"]:checked::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   12. RESPONSE MESSAGE ANIMATIONS (28.12.2025)
   -------------------------------------------------------------------------- */

/**
 * Erfolgs-Nachricht - Sanftes Einblenden
 * Erscheint nach erfolgreichem Form-Submit
 */
.wpcf7 .wpcf7-mail-sent-ok,
.wpcf7-response-output.wpcf7-mail-sent-ok {
    animation: successSlideIn 0.5s ease-out;
}

@keyframes successSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Fehler-Nachricht - Subtiles Wackeln
 * Zieht Aufmerksamkeit auf Validierungsfehler
 */
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-acceptance-missing {
    animation: errorShake 0.4s ease-out;
}

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

/**
 * Accessibility: Keine Animationen bei reduced-motion
 */
@media (prefers-reduced-motion: reduce) {
    .wpcf7 .wpcf7-mail-sent-ok,
    .wpcf7-response-output.wpcf7-mail-sent-ok,
    .wpcf7 .wpcf7-validation-errors,
    .wpcf7 .wpcf7-mail-sent-ng,
    .wpcf7 .wpcf7-acceptance-missing {
        animation: none;
    }
}

/* ==========================================================================
   END CONTACT FORM STYLES
   ==========================================================================

   Datei-Statistik:
   - Zeilen: ~320 (unter 500 Limit ✅)
   - CSS Custom Properties: 15+
   - Media Queries: 2 (Tablet, Desktop)
   - A11Y Features: Fokus-States, SR-Text
   - Performance: Wird konditionell geladen
*/