/* Base CSS für alle Screens - Professional Dark Mode Design */
/* Hochwertiges, professionelles Dark Mode Design */
/* Diese Datei enthält grundlegende CSS-Regeln für alle Screens */

/* Grundlegende Reset-Regeln - nur spezifische Klassen erlaubt laut ui-css.mdc Regel 032 */

/* VERPFLICHTEND laut ui-css.mdc Regel 034: Dark Mode Überschreibung für Entwickler-Testing */
/* Diese Regel ist eine Ausnahme zu Regel 033 und erlaubt explizit CSS-Definitionen für html und body */
html {
    background-color: var(--color-background);
    color-scheme: light;
}

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    color-scheme: light;
}

/* Body-Styling ist in fonts.css definiert */

/* Container für Hauptinhalt - Dark Mode */
.layout-main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    position: relative;
    overflow-x: hidden;
}

/* Statischer Ambient-Hintergrund (wie arzt: keine Animation, kein Wackeln) */
.layout-main-container::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 20% 50%, rgba(243, 147, 36, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(34, 197, 94, 0.06) 0%, transparent 50%);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.layout-content-area {
    flex: 1;
    padding: 20px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    position: relative;
    z-index: 1;
}

/* Responsive Design - 4 Breakpoints laut ui-css.mdc Regel 022 */
/* Mobile: max-width 576px */
@media (max-width: 576px) {
    .layout-content-area {
        padding: 15px;
        font-size: var(--font-size-sm);
    }
}

/* Tablet/iPad: 600px-768px */
@media (min-width: 600px) and (max-width: 768px) {
    .layout-content-area {
        padding: 18px;
        font-size: var(--font-size-base);
    }
}

/* Kleiner Desktop/13-Zoll: 1024px-1366px */
@media (min-width: 1024px) and (max-width: 1366px) {
    .layout-content-area {
        padding: 20px;
        font-size: var(--font-size-base);
    }
}

/* Großer Desktop/Widescreen: min-width 1440px */
@media (min-width: 1440px) {
    .layout-content-area {
        padding: 25px;
        font-size: var(--font-size-lg);
    }
}