/* ============================================================
   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; }

/* Die ganze Seite rechnet in `rem`. Oberhalb von 1920 px war deshalb
   Schluss: Schrift, Abstände, Kartenbreiten und der Deckel `--maxw`
   standen alle auf ihrem Höchstwert, und ein 27- oder 34-Zoll-Schirm
   bekam nur immer breitere leere Ränder — 1920 px Inhalt mit 17 px
   Text, verloren in 3440 px Fenster.

   Statt zwei Dutzend Höchstwerte einzeln hochzusetzen, wächst hier die
   Bezugsgröße selbst: von 16 px bei 1920 px Fenster auf 20 px bei
   3440 px. Alles in `rem` zieht damit im gleichen Verhältnis nach, das
   Layout bleibt exakt dasselbe — es wird nur größer, passend zum
   größeren Betrachtungsabstand.

   Darunter greift der untere Anschlag, Laptops und Handys bleiben also
   unverändert bei 16 px. Media Queries rechnen ohnehin immer mit 16 px
   und verschieben sich dadurch nicht. */
html {
  font-size: clamp(16px, 10.95px + 0.263vw, 20px);
  -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%; }

/* Vektorgrafiken ohne eigene Füllung übernehmen die Schriftfarbe statt
   des Browser-Standards Reinschwarz — so bleibt es bei einem Schwarz. */
svg { fill: currentColor; }

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 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 eckigen Klammern um die Mono-Labels sind am 14. Oktober 2026 auf
   Wunsch von Fabio entfallen — sie liessen die Seite unfertig wirken.
   Damit stehen jetzt alle drei Ebenen ohne Klammern: Knöpfe und Footer
   waren es schon länger (siehe `components.css`), die Labels ziehen nach.

   Die Klasse `.label--bracket` bleibt im Markup stehen. Sie macht nichts
   mehr, hält aber die Stellen auffindbar, an denen die Klammern sassen.
   Wollt ihr sie zurück, diese zwei Zeilen einkommentieren:
   .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-flaeche-dunkel);
  color: var(--c-ink-invert);
}

/* Zweite helle Fläche. Setzt einen Abschnitt eine Stufe vom Weiß ab,
   ohne ihn als eigenen Kasten zu markieren — gedacht für Abschnitte
   zwischen zwei dunklen, damit die Folge nicht Weiß/Schwarz/Weiß
   bleibt.

   Seit 19. Oktober 2026 wieder reines Weiß. Die fünf Abschnitte mit
   dieser Klasse tragen zugleich `.shell` und sind damit auf 120rem
   begrenzt: Ab dieser Breite (oder herausgezoomt) stand die graue
   Fläche als Kasten zwischen weißen Rändern. Fabio will durchgehend
   Weiß. Die Klasse bleibt, falls die Stufe später vollflächig
   zurückkommen soll — dann gehört die Farbe auf ein äußeres Element
   ohne `.shell`, nicht hierher. */
.section--sanft {
  background: var(--c-paper);
}

/* 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;
  }
}