/* leomore v2 · Basis: Schriften, Reset, Typografie, Layout, Reveal, Kapitel */

@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 600; size-adjust: 92%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "General Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 99%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100svh;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
ol, ul { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--c-yellow); color: var(--c-ink); }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.chapter--night :focus-visible, .site-footer :focus-visible { outline-color: var(--c-yellow); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: 100;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-paper); font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
.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; }

/* Typografie-Stufen */
.t-display { font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; }
.t-h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
.t-lead { font-size: var(--t-lead); line-height: 1.45; color: var(--c-ink-2); max-width: 34ch; }
.t-small { font-size: var(--t-small); line-height: 1.45; letter-spacing: .005em; }
.t-micro { font-family: var(--f-text); font-size: var(--t-micro); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--c-ink-3); }
.t-body { max-width: var(--measure); hyphens: auto; }
@media (min-width: 900px) { .t-h2 { max-width: 18ch; } }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight-top { padding-top: calc(var(--section) * .5); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

/* Dunkles Kapitel */
.chapter--night { background: var(--c-night); color: var(--c-on-night); }
.chapter--night .t-lead, .chapter--night .t-body, .chapter--night p { color: var(--c-on-night-2); }
.chapter--night .t-micro { color: var(--c-on-night-2); }

/* Reveal: Endzustand ist Default; versteckt nur mit JS + Bewegung erlaubt */
.motion-ok .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.motion-fade .reveal { opacity: 0; transition: opacity 200ms var(--ease-out); }
.motion-ok .reveal.is-in, .motion-fade .reveal.is-in { opacity: 1; transform: none; }