@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

:root{
  /* Farbe: CI schwarz + ein Orange, warmes Off-White */
  --c-bg:#0a0908;
  --c-bg-2:#12100e;
  --c-bg-3:#1a1714;
  --c-line:#2a2521;
  --c-line-2:#3a332d;
  --c-ink:#f3ece3;
  --c-ink-2:#b9afa4;
  --c-ink-3:#7d746b;
  --c-or:#f47a20;
  --c-or-2:#ff9a4a;
  --c-or-deep:#b9520c;
  --c-or-ink:#140a02;

  /* Fonts */
  --f-display:"Anton","Oswald",Impact,"Arial Narrow",sans-serif;
  --f-cond:"Oswald","Arial Narrow",sans-serif;
  --f-body:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Typo-Skala */
  --t-xs:.75rem; --t-s:.875rem; --t-m:1rem; --t-l:1.125rem; --t-xl:1.375rem;
  --t-h3:clamp(1.6rem,3.2vw,2.4rem);
  --t-h2:clamp(2.6rem,7vw,5.5rem);
  --t-h1:clamp(4rem,15vw,13rem);

  /* Raum */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:7rem;
  --gutter:clamp(1rem,4vw,2.5rem);
  --w-max:1240px;
  --nav-h:64px;

  /* Kanten */
  --r-0:0; --r-1:2px; --r-2:4px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--t-m);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-or);outline-offset:3px}
.wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Gemeinsame Bausteine */
.eyebrow{font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink-2)}
.mono{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;font-family:var(--f-cond);font-weight:600;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r-0);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn--primary{background:var(--c-or);color:var(--c-or-ink)}
.btn--primary:hover{background:var(--c-or-2)}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line-2)}
.btn--ghost:hover{border-color:var(--c-ink)}
.btn:active{transform:translateY(1px)}
.offen{display:inline-block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;color:#e8c55a;border:1px dashed rgba(232,197,90,.45);padding:.15em .5em;border-radius:var(--r-1);vertical-align:middle}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}