/*
 * layout.css — Container, Section, Spacing-Utilities, Responsive-Helfer
 * Standard-Breakpoints (R9): Mobile ≤599, Tablet ≥600, Desktop ≥900, Wide ≥1200.
 */

/* ───────── Container ───────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-narrow {
    max-width: 800px;
}

/* ───────── Section ───────── */
.section {
    padding: 4rem 0;
}

.section-tight {
    padding: 2rem 0;
}

/* ───────── Flex-Helfer ───────── */
.flex-row    { display: flex; flex-direction: row; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-sm  { gap: 0.5rem; }
.gap-md  { gap: 1rem; }
.gap-lg  { gap: 1.5rem; }
.gap-xl  { gap: 2rem; }

/* ───────── Margin-Spacer-Utilities ───────── */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

/* ───────── Karten-Raster (responsive auto-fit) ───────── */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* ───────── Sichtbarkeit pro Breakpoint ───────── */
.hide-on-mobile {
    display: none;
}

@media (min-width: 900px) {
    .hide-on-mobile {
        display: revert;
    }
    .hide-on-desktop {
        display: none !important; /* Override Tag-Default revert für Mobile-only-Elemente */
    }
}

/* Im Mobile-Off-Canvas-Menü sichtbar */
.mobile-only {
    display: block;
}

@media (min-width: 900px) {
    .mobile-only {
        display: none;
    }
}