/* 
 * Layout CSS
 * Alle Layout-Definitionen
 * Farben müssen via Custom Properties aus der colors.css genutzt werden
 */

:root {
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Z-Index Layers */
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-modal: 300;
    --z-index-tooltip: 400;
    
    /* Tile Dimensions */
    --tile-margin: 15px;
    --tile-min-height: 150px;
    --tile-min-height-large: 200px;
    --tile-padding-mobile: 25px;
    --tile-border-thickness: 3px;
    --tile-grid-min-width: 250px;
    
    /* Form Dimensions */
    --form-textarea-min-height: 100px;
    
    /* Table Column Widths */
    --table-col-width-small: 80px;
    --table-col-width-medium: 120px;
    --table-col-width-large: 180px;
    --table-col-width-extra-large: 100px;
}

/* Main Container */
.layout-main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content Area */
.layout-content-area {
    flex: 1;
    margin-bottom: var(--spacing-xl);
}

/* Responsive Breakpoints */
/* Mobile: max-width: 576px */
@media (width <= 576px) {
    .layout-main-container {
        padding: var(--spacing-md);
    }
}

/* Tablet/iPad: 600px-768px */
@media (width >= 600px) and (width <= 768px) {
    .layout-main-container {
        padding: var(--spacing-lg);
    }
}

/* Kleiner Desktop/13-Zoll: 1024px-1366px */
@media (width >= 1024px) and (width <= 1366px) {
    .layout-main-container {
        max-width: 1200px;
    }
}

/* Großer Desktop/Widescreen: min-width: 1440px */
@media (width >= 1440px) {
    .layout-main-container {
        max-width: 1600px;
    }
}