/* ============================================================
   Olevon Studio — Schriften, Reset, Grundtypografie, Raster
   ============================================================ */

/* --- Schriften (selbst gehostet, keine externen Requests) ----- */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-var-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 Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-var-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: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/switzer-400.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/switzer-500.woff2") format("woff2");
}

@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fragment-mono-400-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: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fragment-mono-400-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 ---------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* iOS legt beim Antippen sonst eine eigene graue Fläche über Links, Buttons
   und Formularlabels. Ihre Form richtet sich nach Safaris internem Klickfeld
   und nicht zuverlässig nach unserer sichtbaren Kapsel. Die Website zeichnet
   Zustände selbst; deshalb wird dieser fremde Layer zentral abgeschaltet. */
a,
button,
summary,
label,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

img,
video,
svg { display: block; max-width: 100%; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* --- Lenis (Smooth Scroll) ------------------------------------
   Greift nur, wenn JS die Klasse setzt. Ohne JS scrollt die Seite
   ganz normal weiter.                                            */

html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Grundtypografie ------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.t-hero {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
}

.t-display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.t-body { max-width: var(--maxw-text); color: var(--c-grey-90); }

.t-muted { color: var(--c-grey-60); }

/* Das Mono-Label ist das Erkennungszeichen der Seite.
   Immer in eckigen Klammern, immer Versalien, immer klein. */
.label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: 1;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-grey-60);
}

.label--ink { color: var(--c-ink); }
.label--invert { color: var(--c-ink-invert); }
.label--accent { color: var(--c-accent); }

/* Die Klammern werden gesetzt, nicht getippt — so bleiben sie
   aus dem Text heraus und lassen sich einheitlich abstimmen. */
.label--bracket::before { content: "[ "; }
.label--bracket::after  { content: " ]"; }

/* --- Layout ---------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section--flush { padding-block: 0; }

.section--dark {
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

/* Auf dunklem Grund dreht der Fokusrahmen auf Weiß. */
.section--dark,
.hero,
.cta,
.menu,
.footer,
.intro { --c-focus: var(--c-ink-invert); }

.section--dark .t-body { color: var(--c-grey-invert-60); }
.section--dark .label  { color: var(--c-grey-invert-60); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.rule {
  border: 0;
  border-top: var(--line);
  width: 100%;
}

.section--dark .rule { border-color: var(--c-grey-invert-20); }

/* Kopfzeile einer Sektion: Mono-Label links, Zähler rechts */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-bottom: var(--stack-md);
  border-bottom: var(--line);
  margin-bottom: var(--stack-lg);
}

.section--dark .section-head { border-color: var(--c-grey-invert-20); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-intro);
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-ink-invert);
  transform: translateY(-120%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --- Reveal-Grundzustände -------------------------------------
   Ohne JS bleibt alles sichtbar: die Startwerte werden erst
   gesetzt, wenn <html> die Klasse .js trägt.                     */

.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); }

/* Zeilen-Masken werden erst von JS gebaut. Bis dahin wird die
   Headline versteckt, sonst blitzt sie ungemaskt auf. */
.js [data-reveal-lines] { opacity: 0; }
.js [data-reveal-lines].is-split { opacity: 1; }

.js .reveal-line {
  display: block;
  overflow: hidden;
  padding-top: 0.12em;    /* Umlaute und Akzente nicht abschneiden */
  margin-top: -0.12em;
  /* Inter Tight besitzt bei großen Graden markante Unterlängen. Die Maske
     braucht deshalb deutlich mehr Luft, ohne den Zeilenabstand zu verändern. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.js .reveal-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-line > span { transform: none; }
  .js [data-reveal-lines] { opacity: 1; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}