/* ============================================================================
   LDC MULTI-LAYOUT & SLOT SYSTEM (ldc_layout.css)
   Font: Montserrat (ldgroup)
   ============================================================================ */

/* Haupt-Viewport zwischen Header und Footer */
.ldc-app-viewport {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Der universelle Grid-Container */
.ldc-layout-grid {
    display: grid;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --------------------------------------------------------------------------
   PRESET 1: "default" (2-Spalten: Sidebar Links 280px + Hauptbereich)
   Ideal für: Kalender, Standard-Verwaltung
   -------------------------------------------------------------------------- */
.ldc-layout-grid[data-preset="default"] {
    grid-template-columns: 280px 1fr;
    grid-template-areas: 
        "slot-a slot-b";
}

/* --------------------------------------------------------------------------
   PRESET 2: "trainer-desktop" (3-Spalten: Stepsheet / Hauptfenster / Playlist)
   Ideal für: Kursmodus am PC oder Tablet Querformat
   -------------------------------------------------------------------------- */
.ldc-layout-grid[data-preset="trainer-desktop"] {
    grid-template-columns: 320px 1fr 300px;
    grid-template-areas: 
        "slot-a slot-b slot-c";
}

/* --------------------------------------------------------------------------
   PRESET 3: "stacked-tablet" (1-Spalte: Gestapelt untereinander)
   Ideal für: Hochkant-Tablet oder schmale Bildschirme
   -------------------------------------------------------------------------- */
.ldc-layout-grid[data-preset="stacked-tablet"] {
    grid-template-columns: 1fr;
    grid-template-areas: 
        "slot-b"
        "slot-a"
        "slot-c";
}

/* --------------------------------------------------------------------------
   SLOT-ZUWEISUNGEN
   -------------------------------------------------------------------------- */
.ldc-slot-a { grid-area: slot-a; }
.ldc-slot-b { grid-area: slot-b; }
.ldc-slot-c { grid-area: slot-c; }

/* Blendet Slots automatisch aus, wenn sie im jeweiligen Preset leer/nicht benötigt sind */
.ldc-slot:empty {
    display: none;
}