/* Button-Abstände sicherstellen */
.gap-4 {
    gap: 1.5rem !important;
}

/* Alternative: Direkt auf Buttons in Flex-Container */
.d-flex > .btn:not(:last-child) {
    margin-right: 1rem;
}

/* Sicherstellen dass text-danger auf allen Geräten rot ist */
.text-danger {
    color: #d63939 !important;
}

/* Alert-Boxen auf allen Geräten mit Umrandung anzeigen */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-info {
    color: #022c54;
    background-color: #cde2f6;
    border-color: #9bc5ed;
}

/* Sicherstellen dass Alerts auf Tablets/Mobil sichtbar sind */
@media (max-width: 991px) {
    .alert {
        border: 2px solid transparent !important;
    }

    .alert-success {
        border-color: #badbcc !important;
    }

    .alert-danger {
        border-color: #f5c2c7 !important;
    }

    .alert-info {
        border-color: #9bc5ed !important;
    }
}

/* Fieldset-Umrandung auf allen Geräten sicherstellen */
.form-fieldset {
    border: 1px solid #e6e7e9;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Fieldset-Umrandung auf Tablets extra deutlich machen */
@media (max-width: 991px) {
    .form-fieldset {
        border: 2px solid #e6e7e9 !important;
        padding: 1rem !important;
    }
}

/* Verhindert horizontales Scrollen auf iPad */
@media (min-width: 768px) and (max-width: 1400px) {
    html, body {
        overflow-x: hidden !important;
    }
}

/* Registrierungsformular immer zentrieren */
@media (min-width: 768px) and (max-width: 1400px) {

    /* Äußerer Container */



    /* Das Formular selbst */
    #registrierungsformular {
        width: 100% !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }

    /* Bootstrap Rows korrekt einrasten lassen */
    #registrierungsformular .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Großes Tablet-Formular (iPad) */
@media (min-width: 768px) and (max-width: 1400px) {

    /* Labels */
    #registrierungsformular label {
        font-size: 20px !important;
        font-weight: 500;
        margin-bottom: 6px;
    }

    /* Eingabefelder */
    #registrierungsformular input,
    #registrierungsformular select,
    #registrierungsformular textarea {
        font-size: 20px !important;
        padding: 16px 20px !important;
        height: 58px !important;
        line-height: 1.5 !important;
    }

    /* Mehr Abstand zwischen den Formgruppen */
    #registrierungsformular .form-group,
    #registrierungsformular .mb-3 {
        margin-bottom: 24px !important;
    }

    /* Titel größer */
    #registrierungsformular h1,
    #registrierungsformular h2,
    #registrierungsformular .form-title {
        font-size: 28px !important;
        margin-bottom: 24px;
        font-weight: 600;
    }
}

/* iPad: moderat vergrößerte Checkboxen */
@media (min-width: 768px) and (max-width: 1400px) {

    /* Checkbox etwas größer, aber nicht übertrieben */
    #registrierungsformular .form-check-input {
        width: 20px !important;      /* Standard ist ca. 16px */
        height: 20px !important;
        margin-top: 4px;
        cursor: pointer;
    }

    /* Text daneben leicht größer und sauber ausgerichtet */
    #registrierungsformular .form-check-label {
        font-size: 18px !important;
        margin-left: 10px !important;
        line-height: 1.3;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* Abstand der Checkbox-Gruppen */
    #registrierungsformular .form-check {
        margin-bottom: 14px !important;
    }

    /* Checkbox + Text sauber horizontal nebeneinander ausrichten */
    #registrierungsformular .form-check {
        display: flex !important;
        align-items: center !important;   /* Text und Checkbox auf eine Höhe bringen */
    }

    /* Checkbox leicht vergrößert und vertikal zentriert */
    #registrierungsformular .form-check-input {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;             /* entfernt den Bootstrap-Offset */
        margin-right: 10px !important;    /* Abstand zum Text */
        position: relative;
        top: 0;                            /* garantiert: nicht nach oben verschoben */
    }

    /* Text optisch gut neben der Box */
    #registrierungsformular .form-check-label {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin: 0 !important;             /* kein unnötiger Einzug */
    }

    .text-primary{
        margin-left: 10px;
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: underline;
    }


    /* gesamter Button größer */
    #registrierungsformular .form-selectgroup-label {
        font-size: 1.1rem !important;
        padding: 0.75rem 1.25rem !important;
        min-width: 120px !important;   /* Breite der Buttons */
        line-height: 1.5 !important;
    }

    /* Icons im Button größer */
    #registrierungsformular .form-selectgroup-label svg,
    #registrierungsformular .form-selectgroup-label i {
        transform: scale(1.4);
        margin-right: 6px;
    }

}


/* Navigation nebeneinander */
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 20px; /* Abstand zwischen den Punkten */
}

/* Entfernt den Standard-Block-Stil der Listeneinträge */
.navbar-nav .nav-item {
    display: flex !important;
    align-items: center;
}

/* Optional: schöner Hover-Effekt */
.navbar-nav .nav-link {
    padding: 8px 12px;
    font-size: 18px;
    white-space: nowrap; /* verhindert Umbrüche */
}