/* ════════════════════════════════════════════════════════════════
   FISCHER WORKS — base.css
   Design-Tokens, Reset, Typografie, Utilities, Reveal-Zustaende.
   Keine Komponenten (die liegen in site.css).
   ════════════════════════════════════════════════════════════════ */

/* ── Display-Schrift: Barlow Condensed, selbst gehostet (OFL) ──
   Bahnschrift gibt es nur auf Windows; Barlow Condensed sieht auf
   Mac, iOS und Android gleich aus. Drei Schnitte, je ~20 KB. */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/barlow-condensed-300-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/barlow-condensed-600-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2")}

:root{
  /* Farbwelt: schwarzes Papier, weisse Tinte */
  --papier:#050505;
  --papier-tief:#0E0D0B;     /* abgesetzte Sektionen */
  --feld:#14120F;            /* Kacheln, Flaechen ueber papier-tief */
  --tinte:#FAF9F6;
  --tinte-weich:#D9D5CD;
  --grau:#8F897F;
  --grau-hell:#6B655C;
  --linie:#26241F;
  --linie-dunkel:#26241F;
  --weiss:#FFFFFF;

  /* Akzent: Messing, einziger Farbakzent (Hover, Fokus, aktive Kachel) */
  --messing:#B8892E;
  --messing-hell:#D9A94A;
  --messing-tief:#7A5A1E;

  /* Schrift: Systemschnitte, keine Webfonts */
  --fd:"Barlow Condensed","Bahnschrift","DIN Alternate","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;
  --fb:"Segoe UI Variable Text","Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --fm:"Consolas","Cascadia Mono",ui-monospace,"SF Mono",monospace;

  /* Typo-Skala: Schrift als Layoutelement */
  --t-hero:clamp(72px,13.8vw,238px);
  --t-h1:clamp(48px,8.4vw,140px);
  --t-h2:clamp(36px,5.4vw,80px);
  --t-h3:clamp(23px,2.8vw,33px);
  --t-lead:clamp(19px,2.2vw,27px);
  --t-body:17px;
  --t-small:14.5px;
  --t-kick:11px;

  /* Raum */
  --rand:clamp(20px,5vw,72px);       /* Seitenrand */
  --sektion:clamp(90px,14vh,170px);  /* vertikaler Sektionsabstand */
  --wrap:1440px;
  --mass:68ch;                       /* Lesebreite */

  /* Bewegung */
  --kurve:cubic-bezier(.2,.7,.2,1);
  --dauer:.7s;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* Die Seite ist durchgehend schwarz — .dunkel bleibt als Anker
   fuer Buehnen-Logik bestehen, aendert aber nichts mehr am Bild */
.dunkel{
  background:var(--papier);
  color:var(--tinte);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--grau-hell) var(--papier);
  scroll-padding-top:90px;accent-color:var(--messing)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--papier);color:var(--tinte);
  font-family:var(--fb);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
img:not([src$=".svg"]){background:var(--feld)}
video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul[class],ol[class]{list-style:none;padding:0}
::marker{color:var(--grau)}
::selection{background:var(--messing);color:var(--papier)}

:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
input,textarea,select{caret-color:var(--messing)}

/* ── Typografie ── */
.display,h1,h2{
  font-family:var(--fd);font-stretch:75%;font-weight:700;
  text-transform:uppercase;line-height:.9;letter-spacing:-.015em;
  overflow-wrap:break-word;text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-family:var(--fd);font-stretch:84%;font-weight:700;
  text-transform:uppercase;font-size:var(--t-h3);line-height:1.1}
.lead{font-size:var(--t-lead);line-height:1.42;max-width:var(--mass);text-wrap:pretty}
p{max-width:var(--mass);text-wrap:pretty}
li{text-wrap:pretty}
/* Abstand zwischen Ueberschrift und folgendem Text, wo keine Inline-
   Margin der Seite ihn schon setzt (die ueberschreibt hier weiterhin). */
h1 + .lead,h2 + .lead{margin-top:22px}
h2 + p:not(.lead){margin-top:16px}
.klein{font-size:var(--t-small);color:var(--grau)}

/* Mono-Etikett: Kicker, Labels, Zaehler */
.kick{
  font-family:var(--fm);font-size:var(--t-kick);letter-spacing:.22em;
  text-transform:uppercase;color:var(--grau);display:block;
}
.kick::before{content:"/ ";color:var(--grau-hell)}
p.held-scroll::before,.engine-etikett .kick::before{content:none}
.kick b{color:var(--tinte);font-weight:400}

/* Grosse Ziffern-Nummerierung (01, 02 …) */
.num{
  font-family:var(--fm);font-size:var(--t-kick);letter-spacing:.18em;
  color:var(--grau-hell);
}
.num,.fakten,.ablauf .dauer{font-variant-numeric:tabular-nums}

/* ── Layout-Utilities ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.sektion{padding-top:var(--sektion);padding-bottom:var(--sektion)}
.linie-oben{border-top:1px solid var(--linie)}
.zwei{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:900px){.zwei{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.zwei.gleich{grid-template-columns:1fr}
@media(min-width:900px){.zwei.gleich{grid-template-columns:1fr 1fr}}

/* ── Reveal-Zustaende ──
   Nur wirksam, wenn JS geladen ist (html.js) UND Bewegung erlaubt.
   Ohne JS oder mit reduced-motion ist alles sofort sichtbar. */
.rv{--rv-y:26px}
html.js .rv{opacity:0;transform:translateY(var(--rv-y))}
html.js .rv.in{
  opacity:1;transform:none;
  transition:opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve);
}
html.js .rv[data-rv-delay="1"].in{transition-delay:.08s}
html.js .rv[data-rv-delay="2"].in{transition-delay:.16s}
html.js .rv[data-rv-delay="3"].in{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}

/* Wort-Maske: Zeilen schieben sich aus einem Schlitz hoch.
   Padding/Negativ-Margin verhindern, dass Umlaute beschnitten werden. */
.wz{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.26em 0 .1em;margin:-.26em 0 -.1em}
.wz>span{display:inline-block}
html.js .wz>span{transform:translateY(130%)}
html.js .in .wz>span,html.js .wz.in>span{
  transform:none;
  transition:transform .8s var(--kurve);
}
html.js .in .wz:nth-child(2)>span{transition-delay:.07s}
html.js .in .wz:nth-child(3)>span{transition-delay:.14s}
html.js .in .wz:nth-child(4)>span{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  html.js .wz>span{transform:none;transition:none}
}

/* ── Zugaenglichkeit ── */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip{
  position:fixed;top:10px;left:10px;z-index:200;background:var(--tinte);
  color:var(--papier);padding:10px 16px;font-family:var(--fm);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-64px);transition:transform .2s;text-decoration:none;
}
.skip:focus-visible{transform:none}