.familien-zugang {
    max-width: 600px;
    margin: auto;
    padding: 2em 1em;
    font-family: sans-serif;
}
.familien-zugang .familien-zugang-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1.5em;
}
.familien-zugang .familien-zugang-button {
    padding: .75em 1.5em;
    border: 2px solid #444;
    background: #fff;
    color: #444;
    cursor: pointer;
    border-radius: 6px;
    font: inherit;
    flex: 1;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}
.familien-zugang .familien-zugang-button:hover { background: #f0f0f0; }
.familien-zugang .familien-zugang-button[aria-expanded="true"] {
    background: #444;
    color: #fff;
    font-weight: bold;
}
.familien-zugang .familien-zugang-button:focus-visible { outline: 3px solid #2271b1; outline-offset: 3px; }
.familien-zugang [data-access-panel] { margin-top: 1em; }
.familien-zugang [hidden] { display: none !important; }
.familien-zugang input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; box-sizing: border-box; }
@media (max-width: 500px) {
    .familien-zugang .familien-zugang-buttons { flex-direction: column; }
    .familien-zugang .familien-zugang-button { width: 100%; }
}