/* Lokale Webfonts */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* Design-Variablen */
:root{
  --brand: #437651;
  --brand-2: #365e42;
  --accent: #e89f3c;

  --bg: #0b1510;
  --bg-2:#0f1d15;
  --text:#eaf2ec;
  --text-muted:#b9c7bd;
  --card: rgba(255,255,255,0.08);
  --card-strong: rgba(255,255,255,0.12);
  --stroke: rgba(255,255,255,0.18);
  --shadow: 0 12px 32px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --radius: 18px;
  --radius-sm:12px;

  --head: "Source Sans 3","Atkinson Hyperlegible",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --body: "Atkinson Hyperlegible","Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --bp-desktop: 900px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6faf7;
    --bg-2:#edf4ef;
    --text:#0f1a14;
    --text-muted:#435449;
    --card: rgba(255,255,255,0.8);
    --card-strong: rgba(255,255,255,0.9);
    --stroke: rgba(16,24,20,0.12);
    --shadow: 0 12px 32px rgba(16,24,20,.12), 0 2px 6px rgba(16,24,20,.06);
  }
}

/* Base */
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg);
  font: 400 1rem/1.7 var(--body);
  text-rendering: optimizeLegibility;
}
.container{ width:min(100% - 2rem, 72rem); margin-inline:auto; }

/* Hintergrund */
.bg-wrap{
  position: fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1000px 500px at 10% -10%, color-mix(in oklab, var(--brand) 50%, transparent), transparent 70%),
    radial-gradient(900px 400px at 120% 5%, color-mix(in oklab, var(--accent) 45%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.grid{
  position: fixed; inset:0; z-index:-1; opacity:.55;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(1000px 700px at 50% 10%, #000 45%, transparent 85%);
}

/* Skip-Link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:1000;
  background:var(--brand); color:#fff; padding:.5rem .75rem; border-radius:8px;
}

/* Header – Mobile First */
header{
  position: sticky; top:0; z-index:60;
  backdrop-filter: blur(10px) saturate(140%);
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  border-bottom:1px solid var(--stroke);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.brand{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.brand .logo{ display:block; line-height:0; width:min(48vw, 200px); }
.brand .logo img{ width:100%; height:auto; display:block; }
.brand h1{ position:absolute; left:-9999px; }

/* Hamburger */
.menu-toggle{
  appearance:none; border:1px solid var(--stroke); background:var(--card);
  border-radius:10px; padding:.55rem .6rem; display:inline-flex; gap:.45rem; align-items:center;
  color:var(--text); box-shadow: var(--shadow);
}
.menu-toggle:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.menu-toggle .bars{ display:inline-block; width:22px; height:2px; background:currentColor; position:relative; border-radius:2px; }
.menu-toggle .bars::before, .menu-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px;
}
.menu-toggle .bars::before{ top:-6px; }
.menu-toggle .bars::after{ top:6px; }

/* Desktop-Nav (hidden by default) */
nav.primary{ display:none; }

/* Off-Canvas Mobile Nav */
.backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.4); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:59;
}
.mobile-nav{
  position: fixed; inset:0 auto 0 0; width:min(90vw, 320px); background: var(--bg-2);
  border-right:1px solid var(--stroke); box-shadow: var(--shadow);
  transform: translateX(-100%); transition: transform .3s ease; z-index:60;
  display:flex; flex-direction:column; padding:1rem;
}
.mobile-nav header{ border:none; background:transparent; position:static; }
.mobile-nav .close{
  align-self:flex-end; appearance:none; border:1px solid var(--stroke); background:var(--card);
  border-radius:10px; padding:.5rem .6rem; color:var(--text);
}
.mobile-nav nav ul{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.mobile-nav nav a{
  display:block; padding:.8rem .9rem; text-decoration:none; color:var(--text);
  border-radius:12px; border:1px solid transparent;
}
.mobile-nav nav a:hover{ background:var(--card); border-color:var(--stroke); }

/* State: geöffnet */
.nav-open .backdrop{ opacity:1; pointer-events:auto; }
.nav-open .mobile-nav{ transform:none; }
.nav-open{ overflow:hidden; }

/* Desktop ab 900px */
@media (min-width: 900px){
  .menu-toggle{ display:none; }
  nav.primary{ display:block; }
  nav.primary ul{ display:flex; gap:.5rem; list-style:none; margin:0; padding:0; }
  nav.primary a{ text-decoration:none; color:var(--text); padding:.5rem .75rem; border-radius:10px; }
  nav.primary a:hover{ background:var(--card); border:1px solid var(--stroke); }
}

/* Hero */
.hero{ position:relative; padding: clamp(2rem, 8vw, 6rem) 0; isolation:isolate; }
.halo{
  position:absolute; left:50%; top:6%; translate:-50% 0;
  width:min(1100px, 92vw); height:300px;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%);
  filter: blur(24px); z-index:-1; will-change: transform;
}
.pill{ display:inline-block; padding:.35rem .6rem; border-radius:999px; background:var(--card-strong); border:1px solid var(--stroke); font-weight:700; }
.hero-title{ font:800 clamp(1.8rem,4.5vw,3.2rem)/1.1 var(--head); margin:.6rem 0 .4rem; }
.lead{ color:var(--text-muted); max-width:70ch; font-size:clamp(1.05rem,2.2vw,1.25rem); }
.cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:12px; background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--brand-2) 50%, #0000);
}
.btn.secondary{ background:var(--card-strong); color:var(--text); border:1px solid var(--stroke); }
.btn:hover{ background:var(--brand-2); }

/* Sections & Cards */
section{ padding: clamp(2rem, 6vw, 4rem) 0; }
.section-title{ font:800 clamp(1.3rem,3vw,1.8rem)/1.2 var(--head); margin:0 0 .8rem; }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.card{
  background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1rem, 2.5vw, 1.4rem);
}
.card h4{ margin:.1rem 0 .45rem; font:800 1.15rem/1.25 var(--head); }
.muted{ color:var(--text-muted); }

/* Legal Grid */
.legal-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width: 900px){ .legal-grid{ grid-template-columns: 1.2fr .8fr; } }
.legal-list{ margin:0; padding-left:1.1rem; }

/* Reveal-Effekte */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .halo{ filter:none }
}

/* Footer inkl. Sponsor */
.footer{ border-top:1px solid var(--stroke); padding:1.2rem 0; color:var(--text-muted); font-size:.95rem; }
.footer-grid{ display:grid; gap:1rem; align-items:center; }
@media (min-width: 900px){
  .footer-grid{ grid-template-columns: 1fr auto; }
}
.sponsor{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.sponsor-title{ margin:0; font-weight:700; }
.sponsor img{ width:min(60vw, 260px); height:auto; display:block; }

/* Fokus sichtbar */
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* Print */
@media print{
  header, .cta, nav, .halo, .backdrop, .mobile-nav{ display:none !important; }
  body{ background:#fff; color:#000 }
  .card{ background:#fff; box-shadow:none; }
  a::after{ content:" (" attr(href) ")"; font-size:.9em; }
}