/* ============================================================
   LAYOUT.CSS — Struktur, Container, Grids, Responsiveness
   (Keine Farben, keine Komponenten, kein Button-Styling!)
============================================================ */

/* ---------------------------
   GLOBAL PAGE CONTAINERS
--------------------------- */

.page-container {
    max-width: var(--container-max);
    width: 100%;
    margin: clamp(22px, 4vw, 40px) auto;
    padding: 0 clamp(16px, 3vw, 28px);
    position: relative;
}

/* Standard-Content-Breite für Texte (Lektionen, Erklärungen) */
.content-container {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* ---------------------------
   GRID / FLEX HELPERS
--------------------------- */

/* Flex-Zeile */
.row {
    display: flex;
    gap: var(--space-md);
    min-width: 0;
}

/* Center-Container (z. B. Landingpages) */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2-Spalten Layout (z. B. Erklärtext + Sidebar) */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    min-width: 0;
}

/* 3-Spalten Layout (falls benötigt später) */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    min-width: 0;
}

.row > *,
.grid-2 > *,
.grid-3 > * {
    min-width: 0;
}

/* ---------------------------
   PAGE SECTION SPACING
--------------------------- */

.section {
    margin: var(--space-xl) 0;
}

.section-sm {
    margin: var(--space-lg) 0;
}

.section-xs {
    margin: var(--space-md) 0;
}

/* ---------------------------
   SIDEBAR LAYOUT SHARED
--------------------------- */

.sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-right: 6px;
}

/* ---------------------------
   CARD-LIST-LAYOUTS (Übungen + Lektionen)
--------------------------- */

.card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

/* ---------------------------
   RESPONSIVE BREAKPOINTS
--------------------------- */

@media (max-width: 1100px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

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


    .sidebar {
        width: 100%;
        position: relative;
        top: unset;
        max-height: none;
    }
}

@media (max-width: 600px) {
    .page-container {
        padding: 0 14px;
    }

    .row {
        flex-direction: column;
    }

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