/* 
 * Base CSS für alle Screens
 * Diese Datei enthält grundlegende CSS-Regeln für alle Screens
 * Briefing für diese Datei: /briefing/design.md
 */

/* Basis-Reset und grundlegende Styles - Nur für body erlaubt nach Regel 032 */
body {
    box-sizing: border-box;
}

/* Grundlegende Layout-Klassen */
.layout-main-container {
    font-family: var(--font-family-primary);

    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.layout-content-area {
    font-family: var(--font-family-primary);

    flex: 1;
    padding: 20px;
}

/* Responsive Breakpoints */
@media (max-width: 576px) {
    .layout-content-area {
    font-family: var(--font-family-primary);

        padding: 10px;
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .layout-content-area {
    font-family: var(--font-family-primary);

        padding: 15px;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .layout-content-area {
    font-family: var(--font-family-primary);

        padding: 20px;
    }
}

@media (min-width: 1440px) {
    .layout-content-area {
    font-family: var(--font-family-primary);

        padding: 25px;
    }
}