/* ============================================================
   ET StromFluss GmbH — Core Design Tokens (Phase 4)
   Single source of truth for color, type, spacing, radius, shadow.
   Loaded by every page (homepage + all sub-pages).
   ============================================================ */

:root {
    --pri: #1a5cf0;
    --pri-dark: #0f3dc0;
    --pri-light: #eef3ff;
    --pri-glow: rgba(26, 92, 240, 0.1);
    --dark: #0c1424;
    --txt: #1b2436;
    --txt2: #4f5b6e;
    --txt3: #8793a6;
    --white: #ffffff;
    --bg: #f5f6f9;
    --bg2: #fafbfc;
    --border: #e2e6ed;
    --border2: #eef0f5;
    --ok: #0d5a26;
    --err: #e53e3e;
    --sh-xs: 0 1px 2px rgba(12, 20, 36, 0.03);
    --sh-sm: 0 2px 10px rgba(12, 20, 36, 0.04), 0 1px 3px rgba(12, 20, 36, 0.03);
    --sh-md: 0 8px 26px rgba(12, 20, 36, 0.06), 0 3px 8px rgba(12, 20, 36, 0.03);
    --sh-lg: 0 16px 44px rgba(12, 20, 36, 0.08), 0 6px 14px rgba(12, 20, 36, 0.04);
    --sh-xl: 0 24px 56px rgba(12, 20, 36, 0.10), 0 10px 22px rgba(12, 20, 36, 0.04);
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-full: 9999px;
    --tf: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ts: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --fs: system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif;
    --mw: 1200px;
    --hh: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    margin: 0; overflow-x: hidden;
    font-family: var(--fs);
    color: var(--txt);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--dark); }
.container { max-width: var(--mw); margin: 0 auto; padding: 0 20px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--pri); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; top: 12px; }

@media (max-width: 768px) {
    :root { --hh: 56px; }
}