/* ==========================================================================
   AKM · Basis-Stylesheet (Agent 1)
   Reset · Self-hosted Fonts · Typo-Skala · geteilte Komponenten (CONTRACT §2)
   · Canvas/Page-Layer (§3) · Reveal-Zustände (§4) · Nav-Verhalten (§5).
   Nutzt ausschließlich Tokens aus tokens.css. Kein externer Request.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, DSGVO-freundlich (kein CDN). Inter & Space Grotesk
   liegen als Variable-Font-woff2 vor; ein File deckt alle Gewichte ab, daher
   font-weight als Range. latin deckt Deutsch (Umlaute, „ "), latin-ext ergänzt.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Reset / Normalisierung
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;               /* Anker-Offset unter fixer Nav */
  scrollbar-color:var(--hairline-strong) transparent;
  scrollbar-width:thin;
}
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;                      /* kein horizontales Scrollen */
}
body.nav-lock{ overflow:hidden; }         /* gesetzt von ui.js bei offenem Mobil-Menü */

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:where(h1,h2,h3,h4,h5,h6,p,figure){ margin:0; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:-.015em;
  color:var(--text);
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:700; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ text-wrap:pretty; }
strong,b{ font-weight:600; color:var(--text); }
small{ font-size:.85em; }

::selection{ background:var(--accent-glow); color:var(--bg); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--bg-elev-2); border-radius:var(--r-pill); border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-deep); }

/* Sichtbarer Tastatur-Fokus (CONTRACT §2) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }

/* --------------------------------------------------------------------------
   Layout-Container (CONTRACT §2)
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(var(--sp-4), 5vw, var(--sp-12));
}
.container--narrow{ max-width:var(--maxw-narrow); }

/* --------------------------------------------------------------------------
   Eyebrow — kleine Grotesk-Caps mit vorangestelltem Netz-Knoten (Identität)
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons (CONTRACT §2)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:.85em 1.6em;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color .3s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease),
             transform .3s var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  color:var(--accent-bright);
  border-color:var(--accent-deep);
  background:var(--accent-faint);
}
.btn--primary:hover{
  color:var(--accent-bright);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-glow), 0 10px 34px -8px var(--accent-glow);
  transform:translateY(-1px);
}

.btn--ghost{
  color:var(--text);
  border-color:var(--hairline-strong);
}
.btn--ghost:hover{
  border-color:var(--accent-deep);
  background:var(--bg-elev);
  box-shadow:0 0 26px -10px var(--accent-glow);
  transform:translateY(-1px);
}

/* --------------------------------------------------------------------------
   Chip (CONTRACT §2)
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:.42em .85em;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline);
  background:var(--bg-elev);
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
}

/* --------------------------------------------------------------------------
   Textlink mit animiertem Akzent-Unterstrich (CONTRACT §2)
   -------------------------------------------------------------------------- */
.link{
  color:var(--text);
  text-decoration:none;
  background-image:linear-gradient(var(--accent), var(--accent));
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .35s var(--ease), color .3s var(--ease);
}
.link:hover,
.link:focus-visible{
  color:var(--accent-bright);
  background-size:100% 1px;
}

/* --------------------------------------------------------------------------
   Kopfnavigation (CONTRACT §5) — Markup liefert Agent 2/3, Burger fügt ui.js ein
   -------------------------------------------------------------------------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  padding:var(--sp-4) clamp(var(--sp-4), 4vw, var(--sp-12));
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-nav.is-scrolled{
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-3);
  background:rgba(5,7,10,.72);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom-color:var(--hairline);
}

.site-nav__brand{
  display:inline-flex;
  align-items:center;
  margin-right:auto;                 /* schiebt Links + Toggle nach rechts */
  color:var(--text);
  text-decoration:none;
  transition:filter .3s var(--ease);
}
.site-nav__brand:hover{ filter:drop-shadow(0 0 10px var(--accent-glow)); }
.site-nav__brand svg,
.site-nav__brand img{ height:30px; width:auto; }

/* Marken-Schriftzug im Header — Display-Font, konsistent zu .footer__wordmark.
   (Fix: war zuvor undefiniert → rendered in Body-Font Inter statt Space Grotesk.) */
.site-nav__wordmark{
  margin-left:var(--sp-2);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
}

.site-nav__links{
  display:flex;
  align-items:center;
  gap:clamp(var(--sp-4), 2vw, var(--sp-8));
}
.site-nav__links a{
  position:relative;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  padding:var(--sp-2) 0;
  transition:color .3s var(--ease);
}
.site-nav__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-nav__links a:hover{ color:var(--text); }
.site-nav__links a.is-active{ color:var(--accent); }
.site-nav__links a.is-active::after{ transform:scaleX(1); box-shadow:0 0 8px var(--accent-glow); }

/* Kontakt-Pille im Nav — .btn--ghost, aber kompakter für die Kopfzeile.
   Neutralisiert das Unterstrich-Reveal der übrigen Nav-Links (kommt aus dem Rand). */
.nav-cta.btn{
  padding:.5em 1.1em;
  font-size:.88rem;
}
.nav-cta::after{ display:none; }

.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.4em;
  padding:.5em .85em;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline-strong);
  background:transparent;
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.lang-toggle:hover{
  color:var(--accent-bright);
  border-color:var(--accent-deep);
  background:var(--accent-faint);
}

/* Burger — von ui.js als letztes Nav-Kind eingefügt, nur mobil sichtbar */
.site-nav__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  background:transparent;
  cursor:pointer;
  transition:border-color .3s var(--ease);
}
.site-nav__burger:hover{ border-color:var(--accent-deep); }
.site-nav__burger span{
  display:block;
  width:20px; height:2px;
  margin:0 auto;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.site-nav.is-open .site-nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__burger span:nth-child(2){ opacity:0; }
.site-nav.is-open .site-nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:820px){
  .site-nav__burger{ display:flex; }
  .site-nav__links{
    position:fixed;
    top:0; right:0;
    height:100dvh;
    width:min(82vw, 340px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:var(--sp-6);
    padding:var(--sp-24) var(--sp-8);
    background:rgba(8,11,17,.97);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-left:1px solid var(--hairline);
    transform:translateX(100%);
    visibility:hidden;                    /* A11y-Fix: geschlossenes Menü NICHT tabbar */
    /* visibility schaltet erst NACH dem Rausgleiten hart auf hidden (0s Dauer, .45s Delay);
       beim Öffnen sofort sichtbar (Override unten). */
    transition:transform .45s var(--ease), visibility 0s var(--ease) .45s;
  }
  .site-nav.is-open .site-nav__links{
    transform:translateX(0); visibility:visible;
    transition:transform .45s var(--ease), visibility 0s var(--ease) 0s;
  }
  .site-nav__links a{ font-size:1.35rem; color:var(--text); }
}

/* --------------------------------------------------------------------------
   Netz-Canvas + Seiten-Layer (CONTRACT §3)
   -------------------------------------------------------------------------- */
#akm-net{
  position:fixed;
  inset:0;
  width:100%; height:100%;
  z-index:var(--z-net);
  pointer-events:none;                 /* Netz fängt keine Klicks */
  display:block;
}
.page{
  position:relative;
  z-index:var(--z-content);
}

/* --------------------------------------------------------------------------
   Scroll-Reveal-Zustände (CONTRACT §4) — Logik in reveal.js
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].is-revealed{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   prefers-reduced-motion — alles sofort sichtbar, keine Transitionen/Transforms
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}