/* =========================================================================
   Layout — Container, Sections, Stack, Cluster, Grids, Form-Grid
   -------------------------------------------------------------------------
   Wird NACH base.css geladen. Stellt das Standard-Layout-Vokabular bereit,
   das alle Komponenten und Szenarien teilen.
   ========================================================================= */


/* =========================================================================
   1) Container — zentriert Inhalt, hat fluid Inline-Padding
   ========================================================================= */

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--container-inline-padding);
}

.container--prose { max-width: var(--container-prose); }
.container--md    { max-width: var(--container-md); }
.container--lg    { max-width: var(--container-lg); }
.container--xl    { max-width: var(--container-xl); }
.container--2xl   { max-width: var(--container-2xl); }

/* Legacy-Alias — .container.halfwidth wird in Szenarien noch genutzt */
.container.halfwidth {
    max-width: var(--container-md);
}

/* Wenn Container in Container verschachtelt sind, kein doppeltes Padding */
.container .container {
    padding-inline: 0;
}


/* =========================================================================
   2) Sections — vertikales Atemvolumen, mit Surface-Varianten
   ========================================================================= */

.section {
    padding-block: var(--space-section);
}

.section--sm {
    padding-block: var(--space-7);
}

.section--lg {
    padding-block: var(--space-section-lg);
}

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

.section--raised {
    background-color: var(--surface-raised);
}

.section--brand {
    background-color: var(--surface-brand);
    color: var(--text-on-brand);
}

.section--brand h1,
.section--brand h2,
.section--brand h3,
.section--brand h4 {
    color: var(--text-on-brand);
}

.section--inverse {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
}


/* =========================================================================
   3) Stack — vertikaler Rhythmus zwischen Geschwister-Elementen
   -------------------------------------------------------------------------
   Variable --stack-gap kann pro Element überschrieben werden.
   ========================================================================= */

.stack {
    --stack-gap: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
}

.stack--xs { --stack-gap: var(--space-2); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--md { --stack-gap: var(--space-5); } /* default */
.stack--lg { --stack-gap: var(--space-7); }
.stack--xl { --stack-gap: var(--space-9); }


/* =========================================================================
   4) Cluster — horizontale Gruppe mit Wrap (z.B. Button-Gruppen, Tag-Listen)
   ========================================================================= */

.cluster {
    --cluster-gap: var(--space-4);
    --cluster-justify: flex-start;
    --cluster-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
    justify-content: var(--cluster-justify);
    align-items: var(--cluster-align);
}

.cluster--center { --cluster-justify: center; }
.cluster--end    { --cluster-justify: flex-end; }
.cluster--between{ --cluster-justify: space-between; }

.cluster--sm     { --cluster-gap: var(--space-2); }
.cluster--lg     { --cluster-gap: var(--space-5); }


/* =========================================================================
   5) Grids — Basis-Grid plus Variationen
   ========================================================================= */

.grid {
    display: grid;
    gap: var(--space-5) var(--space-6);
}

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

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

@media (min-width: 64rem) {
    .grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Auto-Fit: füllt verfügbare Breite, Karten landen automatisch in Reihen */
.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Legacy-Aliase für Benefit-Wrapper, damit Szenarien stufenweise migriert
   werden können. */
.benefits-wrapper-2,
.benefits-wrapper-3 {
    display: grid;
    gap: var(--space-5) var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .benefits-wrapper-2,
    .benefits-wrapper-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .benefits-wrapper-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================================
   6) Form-Grid — 12 Spalten, greift schon ab 48rem (statt erst 1440px)
   ========================================================================= */

.form-grid,
.lp-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4) var(--space-5);
}

/* Mobile-First: alle Felder volle Breite, außer explizite Spans greifen */
.form-grid > *,
.lp-form > * {
    grid-column: span 12;
}

@media (min-width: 48rem) {
    .form-md-0  { display: none; }
    .form-md-3  { grid-column: span 6; }
    .form-md-4  { grid-column: span 6; }
    .form-md-6  { grid-column: span 6; }
    .form-md-8  { grid-column: span 8; }
    .form-md-12 { grid-column: span 12; }
}

@media (min-width: 64rem) {
    .form-md-0  { display: block; visibility: hidden; }

    .form-lg-1  { grid-column: span 2; }
    .form-lg-2  { grid-column: span 2; }
    .form-lg-3  { grid-column: span 3; }
    .form-lg-4  { grid-column: span 4; }
    .form-lg-5  { grid-column: span 5; }
    .form-lg-6  { grid-column: span 6; }
    .form-lg-7  { grid-column: span 7; }
    .form-lg-8  { grid-column: span 8; }
    .form-lg-9  { grid-column: span 9; }
    .form-lg-10 { grid-column: span 10; }
    .form-lg-11 { grid-column: span 11; }
    .form-lg-12 { grid-column: span 12; }
}


/* =========================================================================
   7) Wrapper, der zwei Spalten erzeugt — Text + Bild
   ========================================================================= */

.split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }

    .split--reverse > :first-child {
        order: 2;
    }
}