/**
 * Layout-System: Container, Grid, Spacing
 * 
 * @package VertriebsWikinger
 */

/* ========================================
   CONTAINER
   ======================================== */

.wikinger-container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
}

.wikinger-container--voll {
    max-width: 100%;
    padding-inline: 0;
}

.wikinger-container--schmal {
    max-width: var(--container-text);
}

.wikinger-container--breit {
    max-width: var(--container-xl);
}

/* ========================================
   GRID-SYSTEM
   ======================================== */

.wikinger-grid {
    display: grid;
    gap: var(--abstand-xl);
}

/* Auto-responsive Grid (keine Media Queries nötig) */
.wikinger-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
}

/* 2-Spalten */
.wikinger-grid--2 {
    grid-template-columns: 1fr;
}

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

/* 3-Spalten */
.wikinger-grid--3 {
    grid-template-columns: 1fr;
}

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

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

/* 4-Spalten */
.wikinger-grid--4 {
    grid-template-columns: 1fr;
}

@media (min-width: 40em) {
    .wikinger-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) {
    .wikinger-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   FLEXBOX-UTILITIES
   ======================================== */

.flex {
    display: flex;
}

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

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

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

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

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

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

/* ========================================
   FULL-SCREEN SECTIONS
   ======================================== */

.sektion--vollbild {
    min-height: var(--vh-vollbild);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--abstand-sektion) var(--abstand-container);
}

.sektion--hero {
    min-height: var(--vh-hero);
    display: grid;
    place-items: center;
    padding: clamp(2rem, 10vh, 8rem) clamp(1rem, 5vw, 6rem);
}

/* ========================================
   SPACING-UTILITIES
   ======================================== */

.abstand-oben--sm { margin-top: var(--abstand-sm); }
.abstand-oben--md { margin-top: var(--abstand-md); }
.abstand-oben--lg { margin-top: var(--abstand-lg); }
.abstand-oben--xl { margin-top: var(--abstand-xl); }
.abstand-oben--2xl { margin-top: var(--abstand-2xl); }
.abstand-oben--3xl { margin-top: var(--abstand-3xl); }

.abstand-unten--sm { margin-bottom: var(--abstand-sm); }
.abstand-unten--md { margin-bottom: var(--abstand-md); }
.abstand-unten--lg { margin-bottom: var(--abstand-lg); }
.abstand-unten--xl { margin-bottom: var(--abstand-xl); }
.abstand-unten--2xl { margin-bottom: var(--abstand-2xl); }
.abstand-unten--3xl { margin-bottom: var(--abstand-3xl); }