/* ==========================================================================
   BKL-Tonstudio – main.css
   Design-Tokens, Schriften, Basis, Layout-System.
   Komponenten: components.css · Seitenabschnitte: pages.css · Bewegung: animations.css
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, SIL Open Font License) ---------- */
@font-face {
  font-family: "League Spartan";
  src: url("../fonts/league-spartan-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschriften mit angepassten Metriken gegen Layout-Sprünge beim Laden */
@font-face {
  font-family: "Spartan Fallback";
  src: local("Arial Black"), local("Arial Bold"), local("Arial");
  size-adjust: 92%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
}

/* ---------- Tokens ---------- */
:root {
  /* Farbe: „Cinematic Minimalism“. Nahezu Schwarz, Anthrazit und warme Grautöne tragen die Seite,
     Off-White die Schrift. Das Lila-Pink aus dem BKL-Regler-Icon ist nur noch das letzte Detail:
     aktive Navigation, Hover, einzelne Markierungen. Nie als Fläche. */
  --black: #0e0d0c;
  --charcoal: #171614;
  --grey: #1f1d1a;
  --raised: #282622;
  --paper: #e9e8e5;
  --paper-2: #d9d5cd;
  --stone: #8f8a81;
  --line: rgba(233, 232, 229, 0.14);
  --line-strong: rgba(233, 232, 229, 0.32);
  --accent: #d729f2;      /* Lila-Pink aus dem Regler-Icon – sparsam */
  --accent-2: #e46af6;    /* hellere Variante für Text auf Schwarz */

  --ink: var(--black);
  --ink-on-dark: var(--paper);
  --muted-on-light: #4d4b47;
  --muted-on-dark: #b5b0a7;
  --danger: #ff8a80;

  /* Typografie */
  --font-display: "League Spartan", "Spartan Fallback", "Arial Black", sans-serif;
  --font-text: "Figtree", "Figtree Fallback", Arial, sans-serif;

  /* Fünf Größen */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.08rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.35rem + 3.3vw, 4.5rem);
  --step-display: clamp(3.25rem, 1rem + 7.4vw, 7.75rem);

  /* Raum – großzügiger als zuvor */
  --m: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --section-y: clamp(5rem, 3rem + 5.5vw, 7.5rem);
  --block-y: clamp(4rem, 2rem + 6vw, 9rem);
  --measure: 60ch;

  /* Bewegung (Emil Kowalski): kurz, präzise, ease-out */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 240ms;
  --t-reveal: 700ms;

  --header-h: 5.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink-on-dark);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], .nav-list, .feature-list, .tiles, .rows, .footer-links ul { list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
strong { font-weight: 600; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--m);
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--black);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------- Typo-Stufen als Klassen ---------- */
.t-display { font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.045em; }
.t-display-s { font-size: var(--step-head); line-height: 0.9; }
.t-head { font-size: var(--step-head); line-height: 0.9; }
.t-lead { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.02em; }
.t-small { font-size: var(--step-small); }

/* ---------- Kapitel ---------- */
.chapter {
  position: relative;
  padding: var(--section-y) var(--m);
  color: var(--ink-on-dark);
}
.chapter-black { background: var(--black); }
.chapter-charcoal { background: var(--charcoal); }
.chapter-grey { background: var(--grey); }
.muted { color: var(--muted-on-dark); }

/* 12-Spalten-Raster – überall dieselben Ränder */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.grid > * { grid-column: 1 / -1; }

@media (min-width: 64em) {
  .chapter-tall { min-height: 90svh; }
}