:root {
    --wa-color-primary: #007bff;
    --wa-color-secondary: #6c757d;
    --wa-font-family: 'Inter', sans-serif;
    --wa-color-background: #ffffff;
    --wa-color-surface: #f8f9fa;
    --wa-color-on-background: #212529;
    --wa-color-on-surface: #212529;
    --wa-color-border: #dee2e6;
    --wa-hero-bg: linear-gradient(135deg, var(--wa-color-primary), #0056b3);
}
wa-page.wa-theme-dark {
    --wa-color-background: #121212 !important;
    --wa-color-surface: #1e1e1e !important;
    --wa-color-on-background: #ffffff !important;
    --wa-color-on-surface: #ffffff !important;
    --wa-color-border: #343a40 !important;
    --wa-hero-bg: linear-gradient(135deg, #0056b3, var(--wa-color-primary));
}
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--wa-font-family); background: var(--wa-color-background); color: var(--wa-color-on-background); transition: background 0.3s ease, color 0.3s ease; }
wa-page { min-height: 100vh; background: var(--wa-color-background) !important; position: relative; }
main, main * { background: var(--wa-color-background) !important; color: var(--wa-color-on-background) !important; border-color: var(--wa-color-border) !important; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
/* DESKTOP: Fixed Nav sichtbar */
nav[slot="navigation"] { 
    position: fixed !important; top: 0; left: 0; height: 100vh; width: 250px; 
    background: var(--wa-color-surface) !important; 
    padding: 100px 1rem 1rem 1rem; 
    border-right: 1px solid var(--wa-color-border); 
    color: var(--wa-color-on-background); overflow-y: auto; z-index: 1000; 
    display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
main { margin-left: 250px; transition: margin-left 0.3s ease; }
/* MOBILE: Nav als versteckter Drawer */
wa-page[view='mobile'] nav[slot="navigation"] { 
    width: 280px; transform: translateX(-100%) !important; transition: transform 0.3s ease; padding: 100px 1rem 1rem 1rem;
}
wa-page[view='mobile'][data-nav-open] nav[slot="navigation"] { transform: translateX(0) !important; }
wa-page[view='mobile'] main { margin-left: 0 !important; }
wa-page[view='desktop'] [data-toggle-nav] { display: none !important; }
section { padding: 4rem 0; min-height: 60vh; }
.home { text-align: center; background: var(--wa-hero-bg) !important; color: white; transition: background 0.3s ease; }
.features { padding: 3rem 0; background: var(--wa-color-background) !important; }
.features h2 { color: var(--wa-color-on-background); }
.impressum, .kontakt { max-width: 800px; margin: 0 auto; padding: 2rem; background: var(--wa-color-surface) !important; border: 1px solid var(--wa-color-border); border-radius: 8px; transition: background 0.3s ease, border-color 0.3s ease; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; margin-left: auto; padding: 0.5rem; border-radius: 50%; transition: background 0.3s ease, color 0.3s ease; color: var(--wa-color-on-surface); }
.theme-toggle:hover { background: rgba(255,255,255,0.1); }
nav[slot="navigation"] a { color: var(--wa-color-on-background); text-decoration: none; padding: 0.5rem 1rem; display: block; transition: color 0.3s ease, background 0.3s ease; }
nav[slot="navigation"] a:hover { color: var(--wa-color-primary); background: rgba(0,123,255,0.1); border-radius: 4px; }
nav[slot="navigation"] a.active { color: var(--wa-color-primary); background: rgba(0,123,255,0.2); border-radius: 4px; font-weight: bold; }
wa-card, wa-hero { background: var(--wa-color-surface) !important; color: var(--wa-color-on-surface) !important; border-color: var(--wa-color-border) !important; }
wa-page[view='mobile'][data-nav-open]::after {
    content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999;
}