/* StrikeZone Landing – Produktion
   Fonts self-hosted (siehe fonts/README.md) => kein Google-CDN, kein Consent-Banner nötig. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-mono-400.woff2") format("woff2"); }

:root {
    --sz-bg: #25262E; --sz-bg-alt: #2C2D36; --sz-surface: #32333D; --sz-surface-2: #3B3C46;
    --sz-bg-blur: rgba(37,38,46,.86);
    --sz-text: #F4F4F6; --sz-text-2: #BDBDC4; --sz-text-3: #9A9AA4; --sz-text-4: #8E8E99; --sz-text-5: #6E6E7A; --sz-text-6: #63636E;
    --sz-accent: #8E85F0; --sz-accent-hover: #A79FF5; --sz-accent-2: #B4AEF2; --sz-on-accent: #1A1633;
    --sz-line-soft: rgba(255,255,255,.07); --sz-line: rgba(255,255,255,.10); --sz-line-strong: rgba(255,255,255,.14); --sz-line-hover: rgba(255,255,255,.30);
    --sz-fill: rgba(255,255,255,.05);
    --sz-chip-violet-text: #C3BCFA; --sz-chip-blue-text: #C9DEF6; --sz-chip-amber-text: #FFE0B2;
  }
  html[data-sz-theme="light"] {
    --sz-bg: #F5F5F8; --sz-bg-alt: #FFFFFF; --sz-surface: #FFFFFF; --sz-surface-2: #F2F2F7;
    --sz-bg-blur: rgba(245,245,248,.88);
    --sz-text: #1B1B21; --sz-text-2: #40404A; --sz-text-3: #5C5C68; --sz-text-4: #6E6E7A; --sz-text-5: #8A8A94; --sz-text-6: #A2A2AC;
    --sz-accent: #594AE2; --sz-accent-hover: #4638C8; --sz-accent-2: #4638C8; --sz-on-accent: #FFFFFF;
    --sz-line-soft: rgba(26,26,32,.08); --sz-line: rgba(26,26,32,.12); --sz-line-strong: rgba(26,26,32,.18); --sz-line-hover: rgba(89,74,226,.45);
    --sz-fill: rgba(26,26,32,.045);
    --sz-chip-violet-text: #4034A8; --sz-chip-blue-text: #235C96; --sz-chip-amber-text: #8A5300;
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--sz-bg); color: var(--sz-text); font-family: Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; }
  * { box-sizing: border-box; }
  a { color: var(--sz-accent); text-decoration: none; }
  a:hover { color: var(--sz-accent-2); }
  @media (max-width: 860px) { [data-sz-nav="links"] { display: none !important; } }
  @media (max-width: 520px) { [data-sz-cta] { width: 100%; text-align: center; justify-content: center; } }
  @keyframes sz-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes sz-drift { 0% { transform: translateY(0); } 100% { transform: translateY(-14px); } }
  @keyframes sz-ring { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } }

/* interaction states */
.szx1:hover { color: var(--sz-text); }
.szx2:hover { border-color: var(--sz-line-hover); }
.szx3:hover { color: var(--sz-text); border-color: var(--sz-line-hover); }
.szx4:hover { background: var(--sz-accent-hover); color: var(--sz-on-accent); }
.szx5:hover { background: var(--sz-accent-hover); }
.szx6:hover { border-color: rgba(255,255,255,.34); color: var(--sz-text); }
.szx7:hover { border-color: rgba(142,133,240,.35); }
.szx8:hover { border-color: rgba(255,255,255,.36); color: var(--sz-text); }
.szx9:focus { border-color: var(--sz-accent); }
.szx10:hover { border-color: #3FB950; }