/* -------------------------------------------------------------------------------------------------
   SCHRIFTMUSTER (specimen.py)
   Mobile first, Klassen nach BEM. Breakpoints wie mandl.design: 521px, 900px, 1024px; Obergrenzen
   auf .98px, mit Zoom gibt es Breiten wie 520,8px.
   Selektoren möglichst aus einer Klasse, dann entscheidet die Reihenfolge der Abschnitte.
   Eigenschaften in dieser Folge: Lage, Anzeige und Raster, Maße, Abstände, Rahmen, Grund und Bild,
   Schrift, Bewegung, Bedienung.
   Die Schrift selbst bindet die Seite ein (@font-face, --font-display und die Maße der Schrift im Kopf
   der HTML-Datei). Hell ist Standard, dunkel nur auf Wunsch über den Schalter.
------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------------------------------------- */

:root {
  /* Palette: warmes Papier, Tinte, Bleistift; die Hilfslinie der Vorlage; Ultramarin und Rosa für
     die Muster im Einsatz */
  --papier:     #F4F1EA;
  --karton:     #FBF9F4;
  --tinte:      #141414;
  --bleistift:  #5F5B53;  /* auf Papier 6 : 1 */
  --linie:      #DAD5CA;
  --hilfslinie: #A9C8DF;
  --ultramarin: #2B3FD6;  /* auf Papier und Papier darauf 6,7 : 1 */
  --rosa:       #EFD2C6;  /* Tinte darauf 13 : 1 */

  /* Farben nach Rolle. Paare aus Grund und Schrift mindestens 4,5 : 1, jedes neue Paar prüfen. */
  --color-bg:        var(--papier);
  --color-surface:   var(--karton);
  --color-text:      var(--tinte);
  --color-muted:     var(--bleistift);
  --color-rule:      var(--linie);
  --color-guide:     var(--hilfslinie);
  --color-accent:    var(--ultramarin);
  --color-on-accent: var(--papier);
  color-scheme: light;

  /* Schrift. Ohne fremde Server: Text in Avenir Next, die auf jedem Mac liegt, sonst in der
     Systemschrift. Die gezeigte Schrift und ihre Maße in em setzt die Seite. */
  --font-display: cursive;
  --ascent:  0.95;
  --descent: 0.35;
  --cap:     0.7;
  --font-text: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-s:  0.875rem;
  --text-m:  1.0625rem;
  --text-l:  1.375rem;
  --text-xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --text-statement: clamp(1.375rem, 0.95rem + 1.6vw, 2.25rem);

  /* Abstände: Stufe × 4px */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Maße */
  --page:   90rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --radius: 3px;

  /* Bewegung */
  --duration-s: 0.15s;
}

/* Dunkel nur, wenn jemand es über den Schalter wählt */
:root[data-theme="dark"] {
  --color-bg:        #141414;
  --color-surface:   #1C1C1C;
  --color-text:      #EEEAE2;
  --color-muted:     #A39E95;
  --color-rule:      #2F2D29;
  --color-guide:     #2C4A63;
  --color-accent:    #9AA6FF;
  --color-on-accent: #141414;
  color-scheme: dark;
}


/* -------------------------------------------------------------------------------------------------
   GRUNDLAGEN
------------------------------------------------------------------------------------------------- */

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

/* hidden gilt auch dort, wo eine Klasse display setzt (die Schalter des Testers ohne Skript) */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--color-bg);
  font: 400 var(--text-m)/1.55 var(--font-text);
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

code {
  font: 0.9em var(--font-mono);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Erscheint erst mit der Tastatur */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Satzspiegel; die Seitenabstände halten auch eine Systemleiste am Handyrand frei */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Die Hilfslinien der Vorlage, Versal- und Grundlinie in jeder Zeile. Wo sie liegen, folgt aus dem
   Zeilenabstand --leading und den Maßen der Schrift. Eine Kachel je Zeile, die am Inhalt beginnt:
   so stimmen die Linien auch in einem Kasten mit Innenabstand. */
.lined {
  --leading: 1.3;
  --baseline: calc((var(--leading) + var(--ascent) - var(--descent)) * 0.5em);
  --capline: calc(var(--baseline) - var(--cap) * 1em);
  background-image: linear-gradient(to bottom,
    transparent var(--capline), var(--color-guide) 0 calc(var(--capline) + 1.5px),
    transparent 0 var(--baseline), var(--color-guide) 0 calc(var(--baseline) + 1.5px),
    transparent 0);
  background-size: 100% calc(var(--leading) * 1em);
  background-origin: content-box;
  line-height: var(--leading);
}

.lined--off {
  background-image: none;
}

/* Große Schrift füllt die Breite ihres Kastens (container-type: inline-size) und wird nie
   abgeschnitten. --fit ist ihre breiteste Zeile in em, --overhang, was ein Schwung links übersteht,
   beides beim Bauen gemessen. --fit-max begrenzt die Größe, --fit-room ist der Platz, wenn die Zeile
   nicht die ganze Breite des Kastens bekommt. */
.fit {
  padding-left: calc(var(--overhang) * 1em);
  font-size: min(var(--fit-max, 6rem), var(--fit-room, 100cqi) / (var(--fit) + var(--overhang)));
}


/* -------------------------------------------------------------------------------------------------
   KOPF
------------------------------------------------------------------------------------------------- */

/* Der Streifen über dem Kopf, unter der Statusleiste */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: env(safe-area-inset-top, 0px);
  background: var(--color-bg);
}

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-4);
}

.site-header__name {
  font: 400 1.375rem/1 var(--font-display);
  text-decoration: none;
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  order: 3;
  width: 100%;
  font-size: var(--text-s);
}

.site-header__link {
  text-decoration: none;
  color: var(--color-muted);
}

.site-header__link:focus-visible {
  color: var(--color-text);
}

/* Ein halb gefüllter Kreis; was er schaltet, sagt das aria-label */
.theme-switch {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-text) 50%, transparent 50%);
  cursor: pointer;
}


/* -------------------------------------------------------------------------------------------------
   AUFTAKT
------------------------------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-12) var(--space-16);
}

.hero__inner {
  container-type: inline-size;
}

.hero__title {
  --fit-max: 22rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}

.hero__body {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.hero__statement {
  max-width: 30em;
  margin: 0;
  font-size: var(--text-statement);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.hero__link {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

.facts {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-s);
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------------------------------
   ABSCHNITTE
------------------------------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-16) 0;
}

.section__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.section__title {
  margin: 0;
  font: 500 var(--text-xl)/1.1 var(--font-text);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--color-muted);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------------------------------------
   TYPE-TESTER
   Ohne Skript bleibt der Probetext editierbar, nur die Schalter fehlen (hidden bis zum Skript).
------------------------------------------------------------------------------------------------- */

.tester {
  display: grid;
  gap: var(--space-6);
}

.tester__controls {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-rule);
}

.tester__size {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-s);
}

.tester__range {
  width: 12rem;
  accent-color: var(--color-text);
}

.tester__value {
  min-width: 4.5ch;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.tester__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.tester__sample {
  min-height: 2.6em;
  font-family: var(--font-display);
  font-size: 2.5rem;
  overflow-wrap: anywhere;
}

.tester__sample:focus-visible {
  outline-offset: 6px;
}

/* Schalter: echte Checkboxen, sichtbar ist die Beschriftung */
.toggle {
  position: relative;
}

.toggle__input {
  position: absolute;
  opacity: 0;
}

.toggle__label {
  display: inline-flex;
  padding: 0.4em 0.85em;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: var(--text-s);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.toggle__input:checked + .toggle__label {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.toggle__input:focus-visible + .toggle__label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* -------------------------------------------------------------------------------------------------
   VARIANTEN
------------------------------------------------------------------------------------------------- */

/* Alle Formen als ein Text; ohne Ligatur, sonst würden zwei T zu einem TT */
.alphabet {
  margin: 0;
  font: 400 clamp(2.25rem, 1.25rem + 4.5vw, 5.5rem)/1.2 var(--font-display);
  font-feature-settings: "liga" 0;
  overflow-wrap: anywhere;
}

.compare {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.compare__item {
  container-type: inline-size;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
}

/* Auf einer Zeile, so groß, wie sie in die Spalte passt: ein Zeilenanfang finge wieder mit der ersten
   Form an */
.compare__text {
  --fit-max: 4.5rem;
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.25;
  white-space: nowrap;
}

.compare__text--plain {
  font-feature-settings: "calt" 0, "liga" 0;
}

.compare__caption {
  font-size: var(--text-s);
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------------------------------
   IM EINSATZ
   Jedes Muster ist ein Gegenstand mit Bildunterschrift. Wie groß sein Titel höchstens wird und wo er
   steht, stellt die Sorte über Variablen ein; so bleiben die Selektoren aus einer Klasse.
------------------------------------------------------------------------------------------------- */

.uses {
  display: grid;
  gap: var(--space-12);
}

.use {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  max-width: 34rem;
  margin: 0;
}

.use__object {
  --fit-max: 6rem;
  --title-margin: auto;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius);
}

/* Plakat: der Titel oben über die ganze Breite, das Kleingedruckte unten */
.use__object--poster {
  --fit-max: 12rem;
  --title-margin: 0 auto;
  background: var(--ultramarin);
  color: var(--papier);
}

.use__object--menu {
  --fit-max: 5rem;
  --title-margin: 0;
  --note-margin: auto;
  border: 1px solid var(--linie);
  background: var(--karton);
  color: var(--tinte);
}

.use__object--card {
  --fit-max: 7rem;
  justify-content: center;
  background: var(--rosa);
  color: var(--tinte);
}

.use__title {
  margin-block: var(--title-margin);
  font-family: var(--font-display);
  line-height: 1.1;
  white-space: nowrap;
  font-feature-settings: var(--feature, normal);
}

/* Schleifen-D: der Schwung reicht weit nach oben */
.use__title--swash {
  line-height: 1.7;
}

.use__note {
  max-width: 30ch;
  margin: var(--note-margin, 0) 0 0;
  font-size: var(--text-s);
  line-height: 1.45;
}

.use__caption {
  font-size: var(--text-s);
  line-height: 1.45;
  color: var(--color-muted);
}

.use__caption-lead {
  font-weight: 500;
  color: var(--color-text);
}

.menu {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-4);
}

.menu__dish {
  font: 400 clamp(1.25rem, 6cqi, 1.75rem)/1.2 var(--font-display);
}

.menu__desc {
  grid-column: 1;
  font-size: var(--text-s);
  color: var(--bleistift);
}

.menu__price {
  grid-row: 1;
  grid-column: 2;
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------------------------------
   STILSÄTZE
   Jedes Muster auf einer Zeile: Browser setzen jeden Zeilenanfang ohne den Text davor, dort würden
   wechselnde Formen immer mit der ersten beginnen. Grau ohne, schwarz mit Stilsatz.
------------------------------------------------------------------------------------------------- */

.stylesets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-12) var(--space-8);
}

.styleset {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.styleset__name {
  margin: 0;
  font: 500 var(--text-m)/1.3 var(--font-text);
}

.styleset__tag {
  margin-left: var(--space-1);
  font: 400 var(--text-xs) var(--font-mono);
  color: var(--color-muted);
}

.styleset__compare {
  display: grid;
  margin: 0;
}

.styleset__sample {
  --fit-max: 3rem;
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.3;
  white-space: nowrap;
  font-feature-settings: var(--feature, normal);
}

.styleset__sample--before {
  color: var(--color-muted);
}

/* Schleifen-D: der Schwung reicht weit nach oben */
.styleset__sample--swash {
  line-height: 1.9;
}


/* -------------------------------------------------------------------------------------------------
   GRÖSSEN
------------------------------------------------------------------------------------------------- */

.waterfall {
  display: grid;
  gap: var(--space-2);
}

.waterfall__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
}

.waterfall__size {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.waterfall__text {
  overflow: hidden;
  margin: 0;
  font: 400 var(--size)/1.25 var(--font-display);
  white-space: nowrap;
}


/* -------------------------------------------------------------------------------------------------
   ZEICHENSATZ
------------------------------------------------------------------------------------------------- */

.charset {
  display: grid;
  gap: var(--space-12);
}

.charset__title {
  margin: 0 0 var(--space-3);
  font: 500 var(--text-s)/1.4 var(--font-text);
  color: var(--color-muted);
}

.glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font: 400 2.5rem/1 var(--font-display);
}


/* -------------------------------------------------------------------------------------------------
   DOWNLOAD
------------------------------------------------------------------------------------------------- */

.get {
  display: grid;
  gap: var(--space-12);
}

.files {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.file__link {
  font: 500 var(--text-l)/1.2 var(--font-text);
}

.file__what {
  grid-column: 1;
  font-size: var(--text-s);
  color: var(--color-muted);
}

.file__size {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.code {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.code__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-s);
  color: var(--color-muted);
}

.code__copy {
  padding: 0.35em 0.9em;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: transparent;
  font: 500 var(--text-s)/1.2 var(--font-text);
  color: var(--color-text);
  cursor: pointer;
}

.code__pre {
  overflow-x: auto;
  margin: 0;
  padding: var(--space-4);
  font: 400 0.8125rem/1.7 var(--font-mono);
}

.code__body {
  font: inherit;
}

.notes {
  display: grid;
  gap: var(--space-1);
  max-width: 70ch;
  margin: var(--space-6) 0 0;
  padding-left: 1.1em;
  font-size: var(--text-s);
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------------------------------
   FUSS
------------------------------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-24);
  padding-block: var(--space-6) var(--space-12);
  border-top: 1px solid var(--color-rule);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  font-size: var(--text-s);
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------------------------------
   AB 521PX
------------------------------------------------------------------------------------------------- */

@media (min-width: 521px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tester__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-8);
  }

  .waterfall__row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
}


/* -------------------------------------------------------------------------------------------------
   AB 900PX
------------------------------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .site-header__nav {
    gap: var(--space-1) var(--space-6);
    order: 0;
    width: auto;
    margin-left: auto;
  }

  .theme-switch {
    margin-left: 0;
  }

  .hero {
    padding-block: var(--space-16) var(--space-24);
  }

  /* Aussage links über acht Spalten, Eckdaten rechts */
  .hero__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    margin-top: var(--space-16);
  }

  .hero__statement {
    grid-column: 1 / span 8;
  }

  .facts {
    grid-column: 10 / span 3;
    padding-top: 0.5em;
  }

  .section {
    padding-block: var(--space-32) 0;
  }

  /* Titel und Einleitung nebeneinander: Titel über vier Spalten, Einleitung ab der fünften */
  .section__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: baseline;
    margin-bottom: var(--space-16);
  }

  .section__title {
    grid-column: 1 / span 4;
  }

  .section__lead {
    grid-column: 5 / span 6;
  }

  .tester__sample {
    font-size: 6rem;
  }

  /* Drei gleich große Gegenstände nebeneinander, wie in einer Ausstellung */
  .uses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .use {
    max-width: none;
  }

  .get {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}


/* -------------------------------------------------------------------------------------------------
   MAUS, KONTRASTMODUS, BEWEGUNG, DRUCK
------------------------------------------------------------------------------------------------- */

/* Hover nur, wo es eine Maus gibt: auf dem Handy bliebe der Zustand nach dem Tippen hängen */
@media (hover: hover) {
  .site-header__link,
  .glyph {
    transition: color var(--duration-s);
  }

  .site-header__link:hover,
  .file__link:hover,
  .glyph:hover {
    color: var(--color-accent);
  }

  .toggle__label:hover {
    border-color: var(--color-text);
  }
}

/* Windows-Kontrastmodus: Flächenfarben fallen weg, der gewählte Schalter braucht eine andere Spur */
@media (forced-colors: active) {
  .toggle__input:checked + .toggle__label {
    border: 3px solid Highlight;
  }

  .theme-switch {
    background: ButtonText;
  }

  .use__object {
    border: 1px solid CanvasText;
  }

  .lined {
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__link,
  .glyph {
    transition: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .tester__controls,
  .code__copy {
    display: none;
  }

  .section {
    break-inside: avoid;
  }
}