/* CLAUDE: Kontaktformular Erweiterungen | Ergänzt bestehendes CF7-CSS aus style.css | Anpassen: Farben via CSS-Variablen */

/* ==========================================================================
   CLAUDE: Form Row Layout - Strukturiertes Formular-Layout
   ========================================================================== */

/* CLAUDE: Form Rows für bessere Struktur */
.pvm-form-row {
    margin-bottom: var(--pvm-space-md, 1.5rem); /* CLAUDE: 24px Abstand zwischen Feldern */
}

.pvm-form-row:last-of-type {
    margin-bottom: 0; /* CLAUDE: Kein Abstand beim letzten Element */
}

/* ==========================================================================
   CLAUDE: Labels - Verbesserte Label-Struktur
   ========================================================================== */

/* CLAUDE: Labels über den Feldern */
.pvm-form-row > label,
.wpcf7-form .pvm-form-row > label {
    display: block;                        /* CLAUDE: Block für volle Breite */
    margin-bottom: 8px;                    /* CLAUDE: Abstand unter Label */
    font-weight: 500;                      /* CLAUDE: Medium Weight */
    font-size: 14px;                       /* CLAUDE: Etwas kleiner als Text */
    color: #333;                           /* CLAUDE: Dunkle Textfarbe */
}

/* CLAUDE: Pflichtfeld-Indikator */
.pvm-form-row .required,
.wpcf7-form .required {
    color: #dc3545;                        /* CLAUDE: Rot für Pflicht */
    font-weight: 400;                      /* CLAUDE: Normal */
    margin-left: 2px;                      /* CLAUDE: Kleiner Abstand */
}

/* ==========================================================================
   CLAUDE: Input & Textarea - Focus States
   ========================================================================== */

/* CLAUDE: Focus State für alle Formularfelder */
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;                         /* CLAUDE: Native Outline entfernen */
    border-color: var(--lila, #8C0AB7);    /* CLAUDE: Primary auf Focus */
    box-shadow: 0 0 0 3px rgba(140, 10, 183, 0.15); /* CLAUDE: Focus Ring */
}

/* CLAUDE: Placeholder Styling */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #999;                           /* CLAUDE: Heller Placeholder */
    opacity: 1;                            /* CLAUDE: Volle Opacity (Firefox) */
}

/* ==========================================================================
   CLAUDE: Validierung - Fehler-States
   ========================================================================== */

/* CLAUDE: Fehlerhafte Felder */
.wpcf7-not-valid {
    border-color: #dc3545 !important;      /* CLAUDE: Rot bei Fehler */
    background-color: #fff8f8;             /* CLAUDE: Leicht roter Hintergrund */
}

/* CLAUDE: Fehler-Nachricht */
.wpcf7-not-valid-tip {
    color: #dc3545;                        /* CLAUDE: Rote Fehlermeldung */
    font-size: 13px;                       /* CLAUDE: Etwas kleiner */
    margin-top: 6px;                       /* CLAUDE: Abstand nach oben */
    display: block;                        /* CLAUDE: Eigene Zeile */
}

/* ==========================================================================
   CLAUDE: Submit Button - Verbessertes Styling
   ========================================================================== */

/* CLAUDE: Submit Button Override für Kontaktseite */
.pvm-contact-form-wrapper .wpcf7-submit,
.pvm-form-row--submit .wpcf7-submit {
    width: 100%;                           /* CLAUDE: Volle Breite */
    padding: 16px 32px;                    /* CLAUDE: Großzügiges Padding */
    font-size: 16px;                       /* CLAUDE: Gut lesbar */
    font-weight: 600;                      /* CLAUDE: Semi-bold */
    color: #fff;                           /* CLAUDE: Weiße Schrift */
    background: var(--gradient, linear-gradient(36deg, #8C0AB7 0%, #4C41E0 100%)); /* CLAUDE: Gradient */
    border: none;                          /* CLAUDE: Kein Border */
    border-radius: 100px;                  /* CLAUDE: Pill-Form wie andere Buttons */
    cursor: pointer;                       /* CLAUDE: Pointer Cursor */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* CLAUDE: Smooth Transitions */
}

/* CLAUDE: Submit Button Hover */
.pvm-contact-form-wrapper .wpcf7-submit:hover,
.pvm-form-row--submit .wpcf7-submit:hover {
    transform: translateY(-2px);           /* CLAUDE: Lift-Effekt */
    box-shadow: 0 4px 20px rgba(140, 10, 183, 0.35); /* CLAUDE: Primary Glow */
}

/* CLAUDE: Submit Button Active/Focus */
.pvm-contact-form-wrapper .wpcf7-submit:active,
.pvm-form-row--submit .wpcf7-submit:active {
    transform: translateY(0);              /* CLAUDE: Zurück beim Klick */
}

/* ==========================================================================
   CLAUDE: Response Output - Erfolg/Fehler Meldungen
   ========================================================================== */

/* CLAUDE: Allgemeine Response Box */
.wpcf7-response-output {
    margin-top: 20px !important;           /* CLAUDE: Abstand nach oben */
    padding: 16px 20px !important;         /* CLAUDE: Innenabstand */
    border-radius: 10px !important;        /* CLAUDE: Abgerundete Ecken */
    font-size: 14px;                       /* CLAUDE: Gut lesbar */
    border-width: 1px !important;          /* CLAUDE: Dünner Border */
}

/* CLAUDE: Erfolgs-Meldung */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: #d4edda !important;  /* CLAUDE: Grüner Hintergrund */
    border-color: #c3e6cb !important;      /* CLAUDE: Grüner Border */
    color: #155724 !important;             /* CLAUDE: Dunkles Grün */
}

/* CLAUDE: Fehler-Meldung */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    background-color: #f8d7da !important;  /* CLAUDE: Roter Hintergrund */
    border-color: #f5c6cb !important;      /* CLAUDE: Roter Border */
    color: #721c24 !important;             /* CLAUDE: Dunkles Rot */
}

/* ==========================================================================
   CLAUDE: Datenschutz-Hinweis
   ========================================================================== */

/* CLAUDE: Datenschutz-Text unter dem Formular */
.pvm-form-privacy {
    margin-top: 20px;                      /* CLAUDE: Abstand nach oben */
    font-size: 13px;                       /* CLAUDE: Klein */
    color: #666;                           /* CLAUDE: Grau */
    text-align: center;                    /* CLAUDE: Zentriert */
    line-height: 1.5;                      /* CLAUDE: Gute Lesbarkeit */
}

.pvm-form-privacy a {
    color: var(--lila, #8C0AB7);           /* CLAUDE: Primary Farbe */
    text-decoration: underline;            /* CLAUDE: Unterstrichen */
}

.pvm-form-privacy a:hover {
    color: var(--blau, #4C41E0);           /* CLAUDE: Secondary auf Hover */
}

/* ==========================================================================
   CLAUDE: Loading Spinner
   ========================================================================== */

/* CLAUDE: Spinner während Absenden */
.wpcf7-spinner {
    margin: 16px auto 0;                   /* CLAUDE: Zentriert, Abstand oben */
    display: block;                        /* CLAUDE: Block für Zentrierung */
}

/* ==========================================================================
   CLAUDE: Responsive Anpassungen
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* CLAUDE: Kleinere Abstände auf Mobile */
    .pvm-form-row {
        margin-bottom: 16px;
    }

    /* CLAUDE: Kleinere Schrift auf Mobile */
    .pvm-form-row > label {
        font-size: 13px;
    }

    /* CLAUDE: Submit Button etwas kleiner */
    .pvm-contact-form-wrapper .wpcf7-submit,
    .pvm-form-row--submit .wpcf7-submit {
        padding: 14px 24px;
        font-size: 15px;
    }
}