/* ═══════════════════════════════════════════
   LAYOUT — Container, Grid, Spacing
   ═══════════════════════════════════════════ */

/* ── Container ──────────────────────────── */

/* .l7-container spannt IMMER volle Viewport-Breite. Kein max-width.
   Inhalts-Edge = container-px links + rechts vom Viewport.
   So fluchten Logo, Hero, alle Sections + Grids automatisch auf jedem Viewport. */
.l7-container {
    width: 100%;
    padding-left: var(--l7-container-px);
    padding-right: var(--l7-container-px);
}

/* ── Content (Fließtext) ────────────────── */

.l7-content {
    max-width: var(--l7-content-max);
}

.l7-content p,
.l7-content li {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh);
}

.l7-content ul,
.l7-content ol {
    padding-left: 1.5em;
    margin: var(--l7-gap-sm) 0;
}

.l7-content li {
    margin-bottom: 0.3em;
}

.l7-content h2 { margin-top: var(--l7-gap-md); margin-bottom: var(--l7-gap-sm); }
.l7-content h3 { margin-top: var(--l7-gap-lg); margin-bottom: var(--l7-gap-xs); }
.l7-content h4 { margin-top: var(--l7-gap-md); margin-bottom: var(--l7-gap-xs); }

/* ── Section ────────────────────────────── */

.l7-section {
    position: relative;
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
}

.l7-section--dark {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

/* ── Main ───────────────────────────────── */

.l7-main {
    /* "clip" prevents horizontal overflow without creating a scroll container,
       so position:sticky inside (e.g. card-deck) still works against the viewport.
       Falls back to "hidden" in older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
}

.l7-text-muted { color: var(--l7-text-muted); }