/*
  EkkoNordLabs — zentrales Design-System.
  Enthaelt Design-Tokens (Farben, Radien, Schatten) sowie die auf allen Seiten
  identische Grundstruktur (Body-Hintergrund, Shell, Header/Footer, Nav, Brand,
  Eyebrow, Ueberschriften-Basis, Button-Grundform). Seitenspezifisches Layout
  (Grids, Formulare, Karten-Feinheiten) bleibt im lokalen <style>-Block der
  jeweiligen Seite und referenziert diese Variablen.

  Farbwelt: Navy/Gold stammt aus dem FlagFootballHero-Produktlogo, Anthrazit
  (--slate/--slate-strong) aus der neutralen EkkoNordLabs-Wortmarke. Beide
  Logos werden dadurch im Seitendesign zusammengefuehrt.
*/

:root {
  --bg: #e9f0ff;
  --surface: rgba(255, 255, 255, 0.93);
  --ink: #0e2a62;
  --muted: #2d4f84;
  --slate: #404040;
  --slate-strong: #1a1a1a;
  --line: rgba(14, 42, 98, 0.14);
  --accent: #f5c518;
  --accent-dark: #9b6f00;
  --accent-soft: rgba(245, 197, 24, 0.2);
  --navy: #0d1b4b;
  --shadow: 0 18px 50px rgba(13, 27, 75, 0.14);
  --error: #d32f2f;
  --success: #388e3c;
  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(245, 197, 24, 0.18), transparent 25%),
    radial-gradient(circle at 87% 14%, rgba(13, 27, 75, 0.17), transparent 28%),
    linear-gradient(180deg, #f4f8ff 0%, var(--bg) 100%);
}

a { color: inherit; }

.shell { margin: 0 auto; }

header, footer { padding: 22px 0; }

header .shell,
footer .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--slate-strong);
  font-weight: 700;
}

.brand img {
  width: min(220px, 56vw);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

nav { display: flex; flex-wrap: wrap; gap: 16px; }

nav a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.96rem;
}

nav a:hover { color: var(--accent-dark); }

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { color: var(--navy); }
h2, h3 { color: var(--slate-strong); }

p { color: var(--muted); line-height: 1.75; }

.button,
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.button:hover:not(:disabled):not([disabled]),
.button-primary:hover,
.button-secondary:hover {
  transform: translateY(-1px);
}

.button:disabled,
.button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

footer .shell {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

footer nav a { color: var(--muted); }
footer nav a:hover { color: var(--accent-dark); }

@media (max-width: 640px) {
  header .shell,
  footer .shell {
    flex-direction: column;
    align-items: flex-start;
  }
}