/* ==========================
   Allgemeine Form-Styles
========================== */
.svd-form {
    max-width: 900px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    color: #333;
}

fieldset {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

/* ==========================
   Flexbox für Zeilen
========================== */
.svd-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.svd-row > label {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}

.svd-row input[type="text"],
.svd-row input[type="email"],
.svd-row input[type="date"],
.svd-row input[type="tel"] {
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

/* ==========================
   Radio-Buttons
========================== */
.svd-radio-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Jeder Radio-Button */
.svd-radio {
    width: 120px;              /* Breite des Buttons */
    height: 50px;             /* Höhe des Buttons */
    cursor: pointer;
    display: inline-flex;       /* Label als Flexbox */
}

/* Input verstecken */
.svd-radio input {
    display: none;
}

/* Button-Styling */
.svd-radio span {
    display: flex;             /* Flexbox für Text */
    align-items: center;       /* vertikal zentrieren */
    justify-content: center;   /* horizontal zentrieren */
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Aktiver Button */
.svd-radio input:checked + span {
    background-color: #000000;
    color: #fff;
    border-color: #000000;
}

/* ==========================
   Checkboxen für Abteilungen & Familien
========================== */
.abteilungen label, .family-member label {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.abteilungen input[type="checkbox"]:checked + span,
.family-member input[type="checkbox"]:checked + span {
    background: #ffffff;
    border-color: #000000;
}

/* Container als Grid */
.svd-abteilungen-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Jede Checkbox als Block */
.abteilung-block {
    display: flex;
    flex-direction: column;      /* Checkbox oben, Text darunter */
    align-items: center;         /* zentriert */
    width: 150px;                /* feste Breite */
    cursor: pointer;
    transition: transform 0.2s;
}

/* Checkbox verstecken */
.abteilung-block input[type="checkbox"] {
    display: none;
}

/* Styling der Box */
.abteilung-block span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s;
}

/* Aktivierte Checkbox */
.abteilung-block input[type="checkbox"]:checked + span {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    font-weight: 600;
    transform: scale(1.05);   /* kleiner Hover/Markierungseffekt */
}



/* Familienmitglieder Box */
.family-member {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.8rem;
    margin-bottom: 1rem;
    background: #fdfdfd;
    transition: all 0.3s ease;
}

/* Buttons */
button, .button-primary, .svd-submit input[type="submit"] {
    background: #0d6efd;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

button:hover, .button-primary:hover, .svd-submit input[type="submit"]:hover {
    background: #0b5ed7;
}

/* Rechtliches / DSGVO */
.svd-legal label {
    display: block;
    margin-bottom: 0.5rem;
}

/* ==========================
   Responsive
========================== */
@media(max-width: 768px){
    .svd-row {
        flex-direction: column;
    }
}

/* Standardmäßig versteckt */
.svd-hidden {
    display: none !important;
}