:root {
  --paper: #fff;
  --ink: #000;
  --pad: 32px;
  --big: max(14.4px, 1.8vw);   /* Header + Overlays – skaliert mit dem Fenster (10 % kleiner als Mockup) */
  --small: 14.3px;   /* Zeilen: Name, Schnitte, Download */
  /* Markierungsfarben (Jahresfarben kommen aus fonts/<jahr>/farbe.txt und werden per JS gesetzt) */
  --c-all: #d2d2d2;
  --c-about: #000000;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overscroll-behavior: none; }   /* kein Gummiband-Bounce oben/unten */
body {
  background: var(--paper); color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--small); letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--pad) 60px;
  text-transform: lowercase;   /* alle Arial-Texte klein */
}
.specimen .ink, .specimen .probe, .tester .sample { text-transform: none; }
button, input, output, select, textarea { text-transform: inherit; }   /* Schriftmuster bleiben wie sie sind */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:hover { text-decoration: none; }
.hidden { display: none !important; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 0 14px;
  font-size: var(--big); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ink);
}
header .brand { justify-self: start; }
header .brand:hover { text-decoration: none; }
/* Jahrgänge in der Mitte, gleicher Stil wie About */
header .filter { display: flex; gap: 6px; }
header .filter button { display: inline-block; padding: 2px 16px; background: none; }
/* Info + Filter explizit #000000 (auch in Safari, wo Buttons eigene Farben haben) */
header .filter button, header nav a, header .brand {
  color: #000000; -webkit-text-fill-color: #000000; -webkit-appearance: none; appearance: none;
}
header .filter button[data-year="all"] { --c: var(--c-all); }
header .filter button:hover, header .filter button.active { text-decoration: none; background: var(--c); }   /* ausgewähltes Jahr: in seiner Farbe hinterlegt, Text schwarz */
header nav { justify-self: end; margin-right: -16px; }   /* Text bündig mit dem Rand */
/* Info im gleichen Stil wie die Jahrgänge */
header nav a { display: inline-block; padding: 2px 16px; }
header nav a:hover, header nav a.active { text-decoration: none; background: var(--c-about); color: #fff; -webkit-text-fill-color: #fff; }

/* ---------- Zeilen (Übersicht) ---------- */
.font-row { border-bottom: 1px solid var(--ink); position: relative; }
#tester .font-row { border-bottom: 0; }   /* Type Tester: keine Linie unten */
.meta {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  padding-top: 8px;
}
.meta .who { justify-self: start; order: 1; }          /* Name links */
#list .meta .actions { visibility: hidden; }   /* Übersicht ohne Download (bleibt im Type Tester) */
.meta .cuts { display: flex; gap: 26px; }
/* Jahrgangsfarbe: --c wird pro Zeile bzw. im Tester per JS gesetzt */
/* Schnitte + Download: Hover und ausgewählter Schnitt in der Jahrgangsfarbe */
.meta .cuts button, .meta .actions a { transition: color .15s; position: relative; z-index: 2; }   /* liegen über dem (verschobenen) Schriftmuster, damit der Klick den Schnitt wechselt */
.meta .cuts button:hover, .meta .cuts button.active, .meta .actions a:hover { color: var(--c); }
.meta .actions { justify-self: end; order: 3; display: flex; gap: 44px; }   /* Specimen + Download rechts */
.meta .cuts { order: 2; }

.specimen { position: relative; cursor: pointer; transition: color .15s; }
/* Hover: Schriftzug in der Farbe seines Jahrgangs */
.font-row .specimen:hover { color: var(--c); }
.specimen.sliding { overflow: hidden; }
.specimen .ink { display: block; text-align: center; white-space: nowrap; line-height: 1; }
.specimen .ink.slide { transition: transform .55s cubic-bezier(.65,0,.15,1); }
.specimen .ink.out { position: absolute; left: 0; width: 100%; pointer-events: none; }
.specimen .probe { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.specimen .probe i { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- Type Tester ---------- */
.t-foot { position: fixed; left: var(--pad); right: var(--pad); bottom: 18px; z-index: 20;
  display: flex; justify-content: space-between; pointer-events: none;
  font-size: var(--big); letter-spacing: 0.06em; }
.t-foot .pill { pointer-events: auto; display: inline-block; padding: 2px 16px; background: var(--paper); color: #000; }
.t-foot .pill:first-child { margin-left: -16px; }   /* Text bündig mit dem Rand, wie about */
.t-foot .pill:last-child { margin-right: -16px; }
#t-specimen:hover,
body:has(#spec-box:not(.hidden)) #t-specimen { background: var(--c); color: #000; -webkit-text-fill-color: #000; }   /* offen = bleibt farbig, wie das gewählte Jahr */
#t-download:hover,
body:has(#dl-box:not(.hidden)) #t-download { background: #000; color: #fff; -webkit-text-fill-color: #fff; }   /* download: schwarz */   /* wie die Jahrgänge: Farbe des Jahrgangs der Schrift */
.tester .sample {
  padding: 30px 0 60px;
  font-size: 150px; line-height: 1.05;
  outline: none; min-height: 1em; word-wrap: break-word;
}

/* ---------- Overlays (About + Download) ---------- */
.overlay {
  position: fixed; z-index: 40;
  top: 76px; left: 50%; transform: translateX(-50%);   /* top wird per JS knapp unter die Kopfzeile gesetzt */
  width: 56.5vw;                                        /* Proportionen wie im Mockup */
  max-height: calc(100vh - 110px); overflow: auto;
  background: var(--paper); color: var(--ink);
  padding: 2.6vw;
  font-size: var(--big); line-height: 1.18; letter-spacing: 0.08em;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  hyphens: auto;
}
/* Klick auf den Hintergrund schliesst das Overlay (und löst sonst nichts aus) */
#backdrop { position: fixed; inset: 0; z-index: 39; background: transparent; cursor: pointer; }
.overlay p { margin: 0 0 1.15em; }
.overlay p:last-child { margin-bottom: 0; }
.overlay a { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.07em; }
#dl-box .go { display: block; width: max-content; margin: 2.4em auto 0.6em; text-decoration: none; }
#dl-box .go:hover { text-decoration: underline; }

/* ---------- Specimen-Viewer (PDF als Doppelseiten) ---------- */
/* Specimen im Mockup (Spiralheft-Scan aus FREE_FONTS/Specimen): Seiten liegen unter dem Scan,
   der Scan wird multipliziert -> weisse Seiten zeigen das PDF, Spirale und Kanten bleiben darüber */
#spec-box { padding: 0; overflow: visible; background: none; box-shadow: none; max-height: none;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.18)); }   /* gleicher Schatten wie about, folgt der Form des Hefts */
#spec-box .stage { position: absolute; left: 0; top: 0; width: 2000px; height: 1384px; transform-origin: 0 0; }
#spec-box .stage .pg { position: absolute; left: 0; top: 0; width: 1000px; height: 1414px; transform-origin: 0 0; object-fit: fill; }
#spec-box .stage .pl { transform: matrix3d(0.95409423,-0.0059380278,0,2.1369738e-06,0.006626393,0.92945089,0,-1.1730073e-05,0,0,1,0,28,35,0,1); }
#spec-box .stage .pr { transform: matrix3d(0.93261626,0.0099819209,0,-6.9534888e-07,-0.018125263,0.93872504,0,-4.5209302e-06,0,0,1,0,1056,16,0,1); }
#spec-box .stage .mock { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
#spec-box .nav { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
#spec-box .nav.prev { left: 0; cursor: w-resize; }
#spec-box .nav.next { right: 0; cursor: e-resize; }

/* Size + Tracking im Type Tester: oben in der Zeile, schlichte Slider mit durchgehender Linie */
.meta .center { display: flex; align-items: center; gap: 40px; order: 2; }
.meta .center .cuts:empty { display: none; }
.tslider { -webkit-appearance: none; appearance: none; width: 150px; height: 13px; margin: 0; background: none; cursor: pointer; }
.tslider:focus { outline: none; }
.tslider::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.tslider::-moz-range-track { height: 1px; background: var(--ink); }
.tslider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); box-sizing: border-box; }
.tslider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); box-sizing: border-box; }
/* viereckiger Griff = zugleich Button: Klick färbt die Schrift in der Jahresfarbe bzw. wieder schwarz */
.tslider.sq::-webkit-slider-thumb { border-radius: 0; width: 11px; height: 11px; margin-top: -5px; border: 0; background: var(--thumb, var(--ink)); }
.tslider.sq::-moz-range-thumb { border-radius: 0; width: 11px; height: 11px; border: 0; background: var(--thumb, var(--ink)); }
.tester.colored .tslider { --thumb: var(--c); }
.tester.colored .sample { color: var(--c); }

@media (max-width: 800px) {
  :root { --pad: 12px; --small: 11px; }
  header .filter { gap: 4px; }
  header .filter button { padding: 2px 6px 0; }
  header nav a { padding: 2px 8px; }
  header nav { margin-right: -8px; }
  .meta { grid-template-columns: 1fr 1fr; }
  .meta .cuts { grid-row: 2; grid-column: 1 / -1; justify-content: center; padding-top: 4px; }
  .tester .sample { font-size: 64px; }
  #info { width: calc(100vw - 24px); top: 60px; padding: 18px; }   /* Schriftgrösse = Navigation (--big) */
}

/* ---------- Loading-Animation (PNGs aus loading/) ---------- */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
#loader img { max-width: 40vw; max-height: 40vh; object-fit: contain; }
#loader.done { opacity: 0; pointer-events: none; }