/* ==========================================================
   layout.css — Container, grid utilities, section structure
   ========================================================== */

/* --------------------------------------------------------
   Container — Centered content area
   -------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* --------------------------------------------------------
   Sections — Vertical spacing
   -------------------------------------------------------- */
.section {
    padding-block: var(--section-gap);
}

.section--alt {
    background-color: var(--color-offwhite);
}

/* --------------------------------------------------------
   Section header — Heading + introductory text
   -------------------------------------------------------- */
.section__header {
    margin-bottom: var(--section-inner-gap);
}

.section__header h2 {
    margin-bottom: var(--space-md);
}

/* --------------------------------------------------------
   Grid — Responsive column layouts
   -------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--2 {
    grid-template-columns: 1fr;
}

.grid--3 {
    grid-template-columns: 1fr;
}

.grid--4 {
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 48rem) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: Full column count */
@media (min-width: 64rem) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------
   Flex-Utilities
   -------------------------------------------------------- */
.flex {
    display: flex;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--gap-sm {
    gap: var(--space-sm);
}

.flex--gap-md {
    gap: var(--space-md);
}

.flex--gap-lg {
    gap: var(--space-lg);
}

/* --------------------------------------------------------
   Page layout — Sticky footer
   Body → Header + Main + Footer, footer stays at bottom.
   -------------------------------------------------------- */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page__main {
    flex: 1;
}

/* --------------------------------------------------------
   Text alignment
   -------------------------------------------------------- */
.text-center {
    text-align: center;
}

.margin-inline-auto {
    margin-inline: auto;
}

.margin-bottom-section {
    margin-bottom: var(--section-inner-gap);
}

.legal__content {
    max-width: var(--text-max-width);
}

/* Visual ALL-CAPS without buchstabieren bei Screenreadern.
   Used for DSGVO Art. 21 Widerspruchsrecht emphasis paragraphs. */
.legal__caps {
    text-transform: uppercase;
}

/* --------------------------------------------------------
   Visibility
   -------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hidden but accessible for ARIA live regions —
   visibility change triggers screen reader announcements
   more reliably than display:none toggling. */
.hidden {
    display: none !important;
}

/* For ARIA live regions (role="status", role="alert"):
   use this class instead of .hidden to ensure announcements work. */
.hidden[role="status"],
.hidden[role="alert"] {
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
}