/* Allgemeine Formular-Gruppierung */
.form-group {
    margin-bottom: 20px;
}

/* Stile für Labels */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Stile für Input-Felder nach ID (sehr spezifisch für dieses Formular) */
#first_name, #email {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Validierungs-Stile für Inputs */
input.valid {
    border-color: #28a745;
}

input.invalid {
    border-color: #dc3545;
}

input.warning {
    border-color: #ffc107;
}

/* Feedback-Nachrichten */
.feedback {
    margin-top: 5px;
    font-size: 14px;
    min-height: 20px;
}

.feedback.success {
    color: #28a745;
}

.feedback.error {
    color: #dc3545;
}

.feedback.warning {
    color: #856404;
}

/* Korrekturvorschläge (z.B. für E-Mail) */
.correction-suggestion {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
}

.correction-link {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}

/* Datenschutz-Checkbox Styling */
.privacy-group {
    margin: 25px auto; /* Zentriert horizontal mit auto */
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-sizing: border-box; /* Wichtig für korrekte Breite mit Padding */
}

.privacy-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.privacy-checkbox input[type="checkbox"] {
    margin-top: 3px;
    transform: scale(1.2);
}

.privacy-checkbox label {
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.4;
}

.privacy-link {
    color: #007bff;
    text-decoration: underline;
}

.privacy-link:hover {
    color: #0056b3;
}



.loading {
    display: none;
    color: #6c757d;
    font-style: italic;
}

/* --- Responsive Layout für das Formular --- */

/* Mobile First: Standardmäßig alles untereinander */
#newsletter-form {
    display: flex;
    flex-direction: column; /* Die Hauptbereiche (form-row-top, form-row-bottom) untereinander */
    gap: 20px; /* Abstand zwischen den Hauptbereichen */
}

.form-row-top {
    display: flex;
    flex-direction: column; /* Vorname und E-Mail untereinander auf Mobil */
    gap: 20px; /* Abstand zwischen Vorname und E-Mail */
}

.form-row-bottom {
    display: flex;
    flex-direction: column; /* Datenschutz und Button untereinander auf Mobil */
    gap: 20px; /* Abstand zwischen Datenschutz und Button */
    align-items: center; /* Zentriert Datenschutz und Button horizontal in diesem Container */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
}

/* Spezifische Breiten für Datenschutz und Button für alle Bildschirmgrößen */
.privacy-group {
    max-width: 500px;
    width: 100%;
}

#submit_btn {
    max-width: 500px;
    width: 100%;
}


/* Desktop-Anpassungen (ab 891px) */
@media screen and (min-width: 891px) {
    /* Die oberen Felder (Vorname, E-Mail) gehen nebeneinander */
    .form-row-top {
        flex-direction: row; /* Vorname und E-Mail nebeneinander */
        flex-wrap: wrap;     /* Ermöglicht Umbruch, falls nötig */
        justify-content: space-between; /* Verteilt die Elemente */
        column-gap: 30px; /* Abstand zwischen den Spalten */
    }

    /* Vornamen- und E-Mail-Feld sollen je ca. 50% Breite einnehmen */
    .form-row-top .form-group { /* Spezifischer Selektor für form-group innerhalb form-row-top */
        flex: 1 1 calc(50% - 15px); /* Nimmt 50% abzüglich halbem column-gap */
        max-width: calc(50% - 15px); /* Stellt sicher, dass es nicht breiter wird */
    }
}