/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 2.0.0
*/

/* ==========================================================================
   TEIL A: ELEMENTOR FORMS (Beibehalten für bestehende Seiten)
   ========================================================================== */

.elementor-form .elementor-field-group input:not([type="submit"]),
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
    font-family: "Spectral", serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.6em !important;
    color: #313B41 !important;
}

.elementor-form .elementor-field-group input:not([type="submit"]):not([type="file"]) {
    padding: 10px 0 15px 0 !important;
    border: none !important;
    border-bottom: 1px solid #313B41 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.elementor-button[type="submit"],
.elementor-file-upload-button {
    background-color: #313B41 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 20px 50px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   NINJA FORMS - KOMPLETT-STYLING (CLEAN & SYNCHRONISIERT)
   ========================================================================== */

/* 1. TYPOGRAFIE-BASIS FÜR ALLE FELDER */
body .nf-form-cont .nf-field-element input:not([type="button"]),
body .nf-form-cont .nf-field-element textarea,
body .nf-form-cont .nf-field-element select {
    font-family: "Spectral", serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.6em !important;
    color: #313B41 !important;
}

/* 2. HEADLINES (Custom Class: form-titel-block) */
body .nf-form-cont .nf-field-container.form-titel-block .nf-field-element {
    font-family: "Spectral", serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #313B41 !important;
    margin-top: 60px !important;
    margin-bottom: 25px !important;
    display: block !important;
    border: none !important;
}

/* 3. INPUTS (Linien-Look für Vorname, E-Mail etc.) */
body .nf-form-cont .nf-field-element input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    padding: 10px 0 15px 0 !important;
    border: none !important;
    border-bottom: 1px solid #313B41 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

/* 4. BOX-STYLING (Nachricht & Dropdown) - Der Ninja-Forms-Killer */
body .nf-form-cont .nf-field-element textarea.ninja-forms-field,
body .nf-form-cont .nf-field-element select.ninja-forms-field {
    background-color: #f7f7f7 !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 0 !important;
    
    /* Typografie */
    font-family: "Spectral", serif !important;
    font-size: 18px !important;
    color: #313B41 !important;

    /* HIER DIE ENTSCHEIDENDEN ZEILEN */
    display: block !important;
    width: 100% !important;
    height: 58px !important;       /* Überschreibt die 50px aus der display-structure.css */
    min-height: 58px !important;   /* Doppelte Absicherung für Safari */
    line-height: 1 !important;
    padding: 10px 15px !important; /* Etwas weniger Padding oben/unten bei fester Höhe */
    
    /* Safari Fixes */
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

/* Textarea soll natürlich wachsen dürfen */
body .nf-form-cont .nf-field-element textarea.ninja-forms-field {
    height: auto !important;
    min-height: 150px !important;
}

/* Den Pfeil wieder einbauen, da appearance:none ihn löscht */
body .nf-form-cont .nf-field-element select.ninja-forms-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23313B41' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px !important;
}

/* 6. BUTTONS (Absoluter Equalizer für Senden & Upload) */
body .nf-form-cont .nf-field-element input[type="button"].nf-element, 
body .nf-form-cont .nf-field-element input[type="submit"].nf-element, 
body .nf-form-cont .nf-field-element button.nf-element, 
body .nf-form-cont .nf-field-element .nf-fu-fileinput-button {
    background-color: #313B41 !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important; 
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    
    /* Erzwungene Identität */
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    -webkit-appearance: none !important;
}

body .nf-form-cont .nf-field-element input[type="button"]:hover,
body .nf-form-cont .nf-field-element button:hover {
    background-color: #000000 !important;
}

/* Fix für den Text im Datei-Upload-Button */
body .nf-form-cont .nf-field-element button span {
    color: #ffffff !important;
    line-height: 1 !important;
}

/* ==========================================================================
   NINJA FORMS - DATENSCHUTZ CHECKBOX (MULTI-LINE FIX)
   ========================================================================== */

/* 1. Der Container wird zum Grid */
body .nf-form-cont .nf-field-container.checkbox-container .field-wrap {
    display: grid !important;
    grid-template-columns: 30px 1fr !important; /* Spalte 1: Checkbox, Spalte 2: Text */
    grid-template-areas: 
        "check label"
        "check desc";
    align-items: start !important;
    gap: 0 15px !important; /* Kein Abstand zwischen den Textzeilen, 15px zur Checkbox */
}

/* 2. Die Checkbox in den Grid-Bereich "check" schieben */
body .nf-form-cont .nf-field-container.checkbox-container .nf-field-element {
    grid-area: check !important;
    margin-top: 5px !important; /* Richtet Box an der ersten Textzeile aus */
}

body .nf-form-cont .nf-field-container.checkbox-container .nf-element[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

/* 3. Das Label ("Einverständniserklärung") */
body .nf-form-cont .nf-field-container.checkbox-container .nf-field-label {
    grid-area: label !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .nf-form-cont .nf-field-container.checkbox-container .nf-field-label label {
    font-family: "Spectral", serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #313B41 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* 4. Die Description (Der lange Text mit Link) */
body .nf-form-cont .nf-field-container.checkbox-container .nf-field-description {
    grid-area: desc !important;
    margin: 5px 0 0 0 !important; /* Kleiner Abstand zum Titel oben */
    padding: 0 !important;
}

body .nf-form-cont .nf-field-container.checkbox-container .nf-field-description p {
    font-family: "Spectral", serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    color: #313B41 !important;
    margin: 0 !important;
}

/* 5. Link-Styling */
body .nf-form-cont .nf-field-container.checkbox-container .nf-field-description a {
    color: #313B41 !important;
    text-decoration: underline !important;
}