/* BrandZaps Design Tokens — Farben, Typografie, Spacing, Effekte, Motion, Basis-Styles */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Marke */
  --bz-ink:#0F0F0F;
  --bz-signal:#00E05C;
  --bz-signal-bright:#00FF66;
  --bz-green-text:#0E7A3E;
  --bz-green-deep:#0A5C2F;
  --bz-green-tint:#E3F9EC;

  /* Neutrale Töne (warmes Grau mit Grünstich) */
  --bz-white:#FFFFFF;
  --bz-paper:#FAFAF8;
  --bz-mist:#F2F3F0;
  --bz-line:#E3E5E2;
  --bz-line-strong:#C9CCC6;
  --bz-grey-500:#8A8D84;
  --bz-grey-600:#6E7168;
  --bz-grey-700:#55584F;
  --bz-grey-800:#3B3E36;

  /* Status */
  --bz-warning-accent:#F5A623;
  --bz-warning-text:#9A5B00;
  --bz-error-accent:#C0362C;

  /* Semantische Aliase */
  --surface-page:var(--bz-paper);
  --surface-card:var(--bz-white);
  --surface-sunken:var(--bz-mist);
  --surface-inverse:var(--bz-ink);
  --text-strong:var(--bz-ink);
  --text-body:var(--bz-grey-800);
  --text-muted:var(--bz-grey-700);
  --text-faint:var(--bz-grey-500);
  --text-on-signal:#062B14;
  --text-on-ink:#FFFFFF;
  --border-default:var(--bz-line);
  --border-strong:var(--bz-line-strong);
  --accent-text:var(--bz-green-text);

  /* Typografie — Original nutzte 'Archivo' fuer Headlines, hier durch Geist (Black/ExtraBold) ersetzt */
  --font-display:'Geist', system-ui, sans-serif;
  --font-ui:'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:'Geist Mono', 'SF Mono', monospace;

  --leading-tight:1.08;
  --leading-heading:1.2;
  --leading-body:1.55;
  --tracking-display:-0.015em;
  --tracking-label:0.12em;

  /* Spacing (4px-Skala) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  --radius-xs:3px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-pill:999px;
  --container-content:1180px;

  /* Schatten */
  --shadow-card:0 1px 2px rgba(15,15,15,.04);
  --shadow-raised:0 2px 8px rgba(15,15,15,.06),0 1px 2px rgba(15,15,15,.05);
  --shadow-overlay:0 8px 32px rgba(15,15,15,.14),0 2px 8px rgba(15,15,15,.08);

  /* Motion */
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:13.5px;
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4{
  margin:0;
  font-family:var(--font-display);
  color:var(--text-strong);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-heading);
}

p{ margin:0; }

a{ color:var(--accent-text); text-decoration:none; }
a:hover{ color:var(--bz-green-deep); text-decoration:underline; }

img{ max-width:100%; height:auto; display:block; }

button{ font-family:inherit; }

.mono{ font-family:var(--font-mono); }

.label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-faint);
}

::selection{ background:var(--bz-signal); color:var(--text-on-signal); }

.container{ max-width:var(--container-content); margin:0 auto; padding-left:clamp(20px,4vw,64px); padding-right:clamp(20px,4vw,64px); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bz-ink); color:#fff; padding:12px 20px; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }