/* ============================================================
   base.css — Reset, Fonts, Typo, gemeinsame Komponenten
   Gilt site-weit. Sektionen bringen eigene CSS-Dateien mit.
   ============================================================ */

/* ---------- Fonts (self-hosted) ----------
   Anton = logonahe Blockschrift (single weight), Barlow = Text/Labels */
@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }

body {
  font-family: var(--font-body);
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--fg-2);
  background: var(--bg-1);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ---------- Typo ---------- */
/* Anton hat genau ein Gewicht — fette Wirkung kommt aus der Schrift selbst */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--display-letter-spacing);
  line-height: var(--display-line-height);
  color: var(--fg-1);
  text-wrap: balance;
}
h1 {
  font-size: var(--t-hero);
  letter-spacing: var(--hero-letter-spacing);
  line-height: var(--hero-line-height);
  text-transform: uppercase;
}
h2 {
  font-size: var(--t-xxxl);
  text-transform: uppercase;
}
h3 { font-size: var(--t-xl); }
p  { max-width: 62ch; }
a  { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Labels/Zahlen: Barlow-Beschriftung statt Code-Mono */
.mono, .eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--mono-letter-spacing);
  font-weight: 600;
}
.eyebrow {
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
/* Gelb auf Weiß ist als Text unlesbar: Akzent-Eyebrows sind schwarz,
   das Gelb kommt über ein Logo-Quadrat davor */
.eyebrow--accent { color: var(--fg-1); }
.eyebrow--accent::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  background: var(--accent);
  flex: none;
}
/* Eyebrow-Zeilen bleiben einzeilig, sonst rutscht das Quadrat weg */
.eyebrow > span { display: inline-block; }
.accent { color: var(--accent); }

/* Marker-Highlight — wie mit dem Abklebeband gezogen */
.mark {
  background: linear-gradient(104deg,
    transparent 0.4%, var(--accent-bright) 1.8%,
    var(--accent-bright) 98%, transparent 99.4%);
  padding-inline: 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--fg-1);
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--max-w));
  margin-inline: auto;
}
.section { padding-block: var(--space-xl); position: relative; }

/* ---------- Anchor: Der Kellenstrich ---------- */
/* Nutzung: <svg class="strich" aria-hidden="true"><use href="#kellenstrich"/></svg> */
.strich {
  width: 5.5rem;
  height: auto;
  aspect-ratio: 240 / 44; /* <use> ohne eigene viewBox fällt sonst auf 150px Default-Höhe */
  color: var(--fg-1);     /* Gelb auf Weiß wäre unsichtbar — Strich ist schwarz */
  fill: currentColor;
}
/* Auf dunklen Bildflächen trägt der Strich das Markengelb */
.zeitraffer .strich { color: var(--accent); }
.strich--s { width: 2.25rem; }
.strich--l { width: clamp(8rem, 14vw, 14rem); }

/* ---------- Buttons ---------- */
/* Buttons wie auf der Original-Site: gelbe Fläche, schwarzer Text.
   Hover: Kellenstrich-Wipe in Schwarz, Text wird gelb. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--mono-letter-spacing);
  text-transform: uppercase;
  padding: 1.05em 1.9em;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost   { box-shadow: inset 0 0 0 2px var(--fg-1); color: var(--fg-1); }
/* Kellenstrich-Wipe beim Hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg-1);
  clip-path: polygon(-15% 115%, -2% 100%, 0 100%, 0 100%, 0 100%, -15% 130%);
  transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.btn:hover::after, .btn:focus-visible::after {
  clip-path: polygon(-15% -30%, 115% -30%, 130% 0%, 115% 130%, -2% 115%, -15% 130%);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover, .btn:focus-visible { color: var(--accent-bright); }

/* ---------- A11y ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--gutter);
  z-index: calc(var(--z-preloader) + 1);
  background: var(--fg-1);
  color: var(--bg-1);
  padding: 0.75em 1.25em;
  border-radius: var(--r-s);
  transition: top 0.2s;
}
.skip-link:focus { top: var(--space-s); }
:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Reveal-Grundzustände (JS entfernt sie) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}