/* ═══ Layout & Responsive Fixes ═══ */

/* Verhindert Sidebar-/FAQ-Überlappung in Bootstrap-Rows */
#main-content .row.align-items-start,
#main-content .content-row {
    align-items: flex-start !important;
}

#main-content .col-lg-4 > .widget,
#main-content .col-lg-4 > .contact-card,
#main-content .col-lg-4 > aside {
    position: relative;
    z-index: 1;
}

/* Sidebar-Spalte: Karten nicht künstlich strecken */
.contact-sidebar .contact-card,
.contact-sidebar .widget {
    height: auto;
}

.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FAQ klar unter dem Hauptinhalt */
.faq-section {
    margin-top: 2.5rem;
    padding-top: .5rem;
    clear: both;
}

/* Moderne Sektionen */
.portal-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.portal-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.portal-section__head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0;
    color: var(--color-primary-dark);
}

.portal-section__head p {
    margin: .35rem 0 0;
    color: var(--color-muted);
    font-size: .95rem;
}

/* Karten-Grid moderner */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}

/* Touch-freundliche Buttons auf Mobile */
@media (max-width: 767.98px) {
    .btn, .nav-link, .quick-link {
        min-height: 44px;
    }

    .hero h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .quick-links {
        grid-template-columns: repeat(3, 1fr);
        gap: .65rem;
    }

    .quick-link {
        padding: .85rem .5rem;
    }

    .quick-link__label {
        font-size: .7rem;
    }

    .portal-section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .accordion-button {
        font-size: .9rem;
        padding: .85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .quick-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-lg-8, .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .contact-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-sidebar > * {
        flex: 1 1 280px;
    }
}