Zum Inhalt
← Typo-Techniken

Eine Familie, wenige Gewichte (Hierarchie über Größe)

Startseite eines Innsbrucker Architekturbüros in einer Familie: Hierarchie entsteht über Größe, Betonung über Kursiv, eine Gegenprobe zeigt dieselbe Seite mit fünf Gewichten.

Eine Schriftfamilie in wenigen Gewichten, oft nur einem oder zwei (etwa Regular und Medium). Die Hierarchie entsteht über Größe, Laufweite und Abstand, nicht über Fett. Betont wird mit Kursiv.

Ohne Gewichtssprünge wirkt die Seite ruhig und zusammenhängend. Große, leichte Überschriften tragen genug, kleine Texte bleiben gleichmäßig grau. Weniger Schnitte bedeuten außerdem weniger Schriftdateien.

Wann einsetzen

Architektur, Studios, Kultur, Editorial, Produktseiten mit viel Weißraum: überall, wo Inhalt und Bilder führen sollen.

Wann nicht

Bei dichten Datenansichten oder Formularen mit vielen gleich großen Elementen, wo Gewicht als Unterscheidung gebraucht wird. Auch nicht bei lauten Kampagnen.

Varianten

  • Ein Schnitt plus Kursiv (KAAN: Suisse Intl Book 450 + Italic)
  • Zwei Schnitte, leicht und normal (Rejouice: 300 und 400)
  • Drei Schnitte, 700 nur für kurze Auszeichnungen (Antinomy: 400, 500, 700)

Umsetzung

Eine variable Schriftdatei je Stil laden. Gewichte als Token festlegen (z. B. --w-display: 300, --w-text: 400) und eine feste Größenskala mit clamp() bauen, etwa Faktor 1,25. Mit der Größe nimmt die negative Laufweite zu. Hervorhebungen mit <em> in Kursiv statt <strong>.

Robust umsetzen

Telefon. Die Größenskala schrumpft über clamp(), die Spanne wird kleiner. Gewichte bleiben gleich.

Ohne Bewegung. Nicht relevant, die Technik hat keine Bewegung.

Barrierefrei. Leichte Schnitte nur in großen Größen einsetzen, Fließtext mindestens 400 und mit ausreichendem Kontrast. Überschriften semantisch auszeichnen, weil die Hierarchie optisch subtiler ist. Kursiv nur für kurze Betonungen.

Code

<!DOCTYPE html>
<!--
  Eine Familie, wenige Gewichte (Hierarchie über Größe)
  Fundus · Typo-Techniken · https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/
  Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eine Familie, wenige Gewichte (Hierarchie über Größe) · Fundus-Demo</title>
<script>document.documentElement.classList.add('js');if(matchMedia('(prefers-reduced-motion: reduce)').matches)document.documentElement.classList.add('reduziert')</script>
<style>
@font-face { font-family: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

:root {
  /* Rezept „Architektur: ruhiges Raster“: achromatisch, warmes Fast-Schwarz, ein Interaktionston */
  --grund: #ffffff; --flaeche: #e1e3e3; --tinte: #231f20; --tinte-2: #76767a; --tinte-3: #c5c7c7;
  --dunkel: #1f2323; --hell: #f4f5f5; --hell-leise: rgba(244, 245, 245, .58); --hell-linie: rgba(244, 245, 245, .16);
  --blau: #0022ff;                         /* Fokus, Links, hier auch die Maßangaben der Demo-Ebene */
  --kurve: cubic-bezier(0.1, 0.6, 0.4, 1); /* Default-Kurve (Chipperfield, KAAN) */
  --ui: 250ms var(--kurve);
  --wechsel: 500ms var(--kurve);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--tinte); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
.mono { font: 450 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

/* ——— Demo-Leiste (dunkel, außerhalb der Seite) ——— */
.leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 14px clamp(16px, 4vw, 56px); background: var(--dunkel); color: var(--hell-leise); }
.umschalter { display: flex; gap: 3px; border: 1px solid var(--hell-linie); border-radius: 999px; padding: 3px; }
.umschalter button { font: inherit; letter-spacing: .1em; text-transform: inherit; color: var(--hell-leise); background: none; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: color var(--ui), background-color var(--ui); }
.umschalter button:hover { color: var(--hell); }
.umschalter button[aria-pressed="true"] { background: var(--hell); color: var(--dunkel); }
.umschalter button.gegen[aria-pressed="true"] { background: var(--flaeche); }
.umschalter button:focus-visible { outline-color: var(--hell); }
.befund { display: flex; flex-wrap: wrap; gap: 6px 22px; font-variant-numeric: tabular-nums; }
.befund b { font-weight: 500; color: var(--hell); }

/* ——— Die Seite: Sill Architekten, Innsbruck ——— */
.seite {
  container: seite / inline-size;
  flex: 1; position: relative;
  /* Größenstufen mit Faktor 1,25 (1 · 1.25 · 1.563 · 1.953 · 2.441 · 3.052 · 3.815 · 4.768 rem) */
  --s-meta: .8rem;
  --s-text: 1.0625rem;
  --s-lead: clamp(1.25rem, 1.1rem + .4cqi, 1.563rem);
  --s-h3: clamp(1.25rem, 1.05rem + .5cqi, 1.563rem);
  --s-h2: clamp(1.953rem, 1.4rem + 1.4cqi, 2.441rem);
  --s-zahl: clamp(1.953rem, 1.3rem + 2cqi, 3.052rem);
  --s-h1: clamp(2.441rem, 1.3rem + 3.6cqi, 4.768rem);
  /* Standard: ein Schnitt (450) plus Kursiv, wie bei KAAN */
  --w-h1: 450; --w-h2: 450; --w-zahl: 450; --w-h3: 450; --w-lead: 450; --w-text: 450; --w-meta: 450; --w-marke: 450;
  --l-h1: -.03em; --l-h2: -.02em; --l-zahl: -.025em; --l-lead: -.012em; --l-text: -.012em;
  --zh-h1: 1.02;
  --meta-versal: none; --l-meta: 0;
}
.innen { padding: clamp(18px, 4cqi, 56px); max-width: 1360px; margin-inline: auto; }

/* Alles, was zwischen den Varianten wechselt, bekommt denselben Übergang (nur Demo-Ebene) */
.seite :is(h1, h2, h3, p, a, span, li, dt, dd, em, text) {
  transition: font-size var(--wechsel), font-weight var(--wechsel), letter-spacing var(--wechsel), line-height var(--wechsel);
}
.seite a { color: inherit; text-decoration: none; }
.seite em { font-style: italic; }

.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; }
.marke { font-size: var(--s-text); font-weight: var(--w-marke); letter-spacing: var(--l-text); text-transform: var(--meta-versal); }
.marke span { color: var(--tinte-2); }
.nav { display: flex; gap: 1.6em; list-style: none; padding: 0; }
.nav a { font-size: var(--s-text); font-weight: var(--w-text); letter-spacing: var(--l-text); text-underline-offset: .35ex; text-decoration-thickness: 8%; }
.nav a[aria-current] { text-decoration: underline; }
.nav a:hover { text-decoration: underline; }

/* Maßangaben der Demo-Ebene: wie eine Maßkette über dem Text */
.mass { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 450 11px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .02em; color: var(--blau); white-space: nowrap; font-variant-numeric: tabular-nums; text-transform: none; }
.mass::before { content: ""; width: 14px; height: 7px; border-inline: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; flex: none; }
.mass b { font-weight: 450; color: var(--tinte); }

.held { padding-top: clamp(32px, 5cqi, 80px); }
.ueber { font-size: var(--s-meta); font-weight: var(--w-meta); letter-spacing: var(--l-meta); text-transform: var(--meta-versal); color: var(--tinte-2); margin-bottom: clamp(14px, 2cqi, 24px); }
h1 { font-size: var(--s-h1); font-weight: var(--w-h1); line-height: var(--zh-h1); letter-spacing: var(--l-h1); max-width: 21ch; text-wrap: balance; }
.held-unten { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6cqi, 96px); align-items: end; margin-top: clamp(32px, 5cqi, 72px); }
.lead { font-size: var(--s-lead); font-weight: var(--w-lead); line-height: 1.4; letter-spacing: var(--l-lead); max-width: 30ch; text-wrap: pretty; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(18px, 2.4cqi, 28px); }
.links a { font-size: var(--s-text); font-weight: var(--w-text); letter-spacing: var(--l-text); text-decoration: underline; text-underline-offset: .35ex; text-decoration-thickness: 8%; text-decoration-color: var(--tinte-3); transition: text-decoration-color var(--ui); }
.links a:hover { text-decoration-color: currentColor; }

.zeichnung { margin: 0; }
.zeichnung .bildflaeche { border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte-3); overflow: hidden; }
.zeichnung svg { display: block; width: 100%; height: auto; }
.zeichnung .projekt { fill: url(#schraffur); stroke: var(--tinte); stroke-width: 1.2; }
.zeichnung text.fluss { font-style: italic; font-size: 14px; fill: var(--tinte-2); }
.zeichnung figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: var(--s-meta); font-weight: var(--w-meta); color: var(--tinte-2); letter-spacing: var(--l-meta); text-transform: var(--meta-versal); }
.zeichnung text { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 12px; font-weight: var(--w-meta); fill: var(--tinte); }
.zeichnung text.leise { fill: var(--tinte-2); }

.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4cqi, 32px); margin-top: clamp(56px, 8cqi, 120px); }
.zahlen > div { padding-top: 14px; border-top: 1px solid var(--tinte); }
.zahlen dt { font-size: var(--s-zahl); font-weight: var(--w-zahl); letter-spacing: var(--l-zahl); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zahlen dd { margin-top: 10px; font-size: var(--s-text); font-weight: var(--w-text); letter-spacing: var(--l-text); line-height: 1.45; color: var(--tinte-2); max-width: 24ch; }

.projekte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 5cqi, 80px); margin-top: clamp(64px, 9cqi, 140px); }
h2 { font-size: var(--s-h2); font-weight: var(--w-h2); letter-spacing: var(--l-h2); line-height: 1.1; }
.projekte .hinweis { margin-top: 12px; font-size: var(--s-meta); font-weight: var(--w-meta); color: var(--tinte-2); letter-spacing: var(--l-meta); text-transform: var(--meta-versal); }
.liste { list-style: none; padding: 0; border-top: 1px solid var(--tinte); }
.liste li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 9em) 4.5em; align-items: baseline; gap: 16px; padding: 14px 0 16px; border-bottom: 1px solid var(--flaeche); }
.liste .nr, .liste .ort, .liste .jahr { font-size: var(--s-meta); font-weight: var(--w-meta); letter-spacing: var(--l-meta); text-transform: var(--meta-versal); color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.liste .jahr { text-align: right; }
h3 { font-size: var(--s-h3); font-weight: var(--w-h3); letter-spacing: var(--l-lead); line-height: 1.2; }
h3 span { display: block; margin-top: 4px; font-size: var(--s-text); font-weight: var(--w-text); letter-spacing: var(--l-text); color: var(--tinte-2); }

.karte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(16px, 2.4cqi, 32px); margin-top: clamp(56px, 8cqi, 120px); padding-top: 14px; border-top: 1px solid var(--flaeche); }
.karte p { font-size: var(--s-meta); font-weight: var(--w-meta); line-height: 1.5; letter-spacing: var(--l-meta); text-transform: var(--meta-versal); color: var(--tinte-2); }
.karte p:first-child { color: var(--tinte); }

/* ——— Varianten ——— */
/* 300 / 400: Rejouice (SuisseIntl 300/400, Größen 1.4–6.2rem) */
.seite[data-variante="zwei"] { --w-h1: 300; --w-h2: 300; --w-zahl: 300; --w-h3: 400; --w-lead: 400; --w-text: 400; --w-meta: 400; --w-marke: 400; --l-h1: -.035em; --l-zahl: -.03em; }
/* 400 / 500 / 700: Antinomy (ABC Diatype 400/500/700); 700 nur für kurze Auszeichnungen */
.seite[data-variante="drei"] { --w-h1: 500; --w-h2: 500; --w-zahl: 500; --w-h3: 500; --w-lead: 400; --w-text: 400; --w-meta: 700; --w-marke: 700; --l-h1: -.04em; --l-h2: -.025em; --l-zahl: -.03em; --meta-versal: uppercase; --l-meta: .04em; }
/* Gegenprobe: Hierarchie über Gewicht, kleine Größenspanne, fünf Schnitte */
.seite[data-variante="gegen"] {
  --s-lead: 1.125rem; --s-h3: 1.0625rem; --s-h2: 1.375rem; --s-zahl: 1.5rem; --s-h1: 1.875rem; --s-text: 1rem;
  --w-h1: 800; --w-h2: 700; --w-zahl: 800; --w-h3: 700; --w-lead: 600; --w-text: 400; --w-meta: 600; --w-marke: 800;
  --l-h1: -.01em; --l-h2: 0; --l-zahl: -.01em; --l-lead: 0; --l-text: 0; --zh-h1: 1.15;
  --meta-versal: uppercase; --l-meta: .06em;
}

/* Zustandsmarke für die Galerie-Vorschau */
.zustand { display: none; }

/* ——— Werte unter der Seite ——— */
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 36px; padding: 20px clamp(16px, 4vw, 56px) 24px; background: var(--dunkel); color: var(--hell-leise); font: 400 11.5px/1.6 'Geist Mono', ui-monospace, monospace; }
.werte div { display: flex; gap: 12px; min-width: 0; }
.werte dt { color: var(--hell); flex: none; min-width: 8.5em; }
.werte dd { overflow-wrap: anywhere; }

/* ——— Vorschau: nur die Seite ——— */
.vorschau body { overflow: hidden; height: 100svh; }
.vorschau .leiste, .vorschau .werte { display: none; }
.vorschau .zustand {
  display: flex; align-items: center; gap: 10px; position: fixed; left: 50%; top: 14px; translate: -50% 0; z-index: 3; white-space: nowrap;
  padding: 9px 13px; border-radius: 999px; background: var(--dunkel); color: var(--hell);
}
.vorschau .zustand i { width: 7px; height: 7px; border-radius: 50%; background: var(--hell); }
.vorschau .zustand.gegen i { background: var(--blau); box-shadow: 0 0 0 2px var(--hell); }

:root.reduziert *, :root.reduziert *::before, :root.reduziert *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

@media (hover: none) {
  .umschalter button { padding-block: 10px; }
  .nav a:hover { text-decoration: none; }
  .nav a[aria-current] { text-decoration: underline; }
}
@container seite (max-width: 960px) {
  .nav li:nth-child(n+3):not(:last-child) { display: none; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .projekte { grid-template-columns: 1fr; }
  .karte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container seite (max-width: 680px) {
  .nav { gap: 1.1em; }
  .nav li:not(:last-child) { display: none; }
  .held-unten { grid-template-columns: 1fr; }
  .zeichnung { order: -1; }
  .liste li { grid-template-columns: 2em minmax(0, 1fr) 3.4em; }
  .liste .ort { display: none; }
  .zeichnung figcaption span:last-child { display: none; }
  .karte { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .leiste { padding-inline: 16px; }
  .umschalter { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 14px; }
  .umschalter button { border-radius: 11px; padding: 9px 6px; letter-spacing: .06em; }
  .befund { width: 100%; justify-content: space-between; gap: 12px; }
  .werte { grid-template-columns: 1fr; padding-inline: 16px; }
  .werte dt { min-width: 7em; }
}
</style>
</head>
<body>
<div class="leiste mono">
  <div class="umschalter" role="group" aria-label="Variante">
    <button type="button" data-variante="einer" aria-pressed="true">450 + Kursiv</button>
    <button type="button" data-variante="zwei" aria-pressed="false">300 · 400</button>
    <button type="button" data-variante="drei" aria-pressed="false">400 · 500 · 700</button>
    <button type="button" data-variante="gegen" class="gegen" aria-pressed="false">Gegenprobe</button>
  </div>
  <div class="befund" aria-live="polite">
    <span>Schnitte <b data-schnitte>450</b></span>
    <span>Spanne <b data-spanne>6,0 : 1</b></span>
  </div>
</div>

<main class="seite" data-seite data-variante="einer">
  <div class="innen">
    <header class="kopf">
      <a class="marke" href="#" aria-label="Sill Architekten, Startseite">Sill Architekten <span>Innsbruck</span></a>
      <ul class="nav" aria-label="Beispielnavigation">
        <li><a href="#">Büro</a></li>
        <li><a href="#" aria-current="page">Projekte</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Aktuelles</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </header>

    <section class="held">
      <p class="mass" data-mass="meta" aria-hidden="true"></p>
      <p class="ueber">Architektur und Umbau in Tirol · seit 1998</p>
      <p class="mass" data-mass="h1" aria-hidden="true"></p>
      <h1>Wir bauen <em>weiter</em>, was der Ort schon angelegt hat.</h1>

      <div class="held-unten">
        <div>
          <p class="mass" data-mass="lead" aria-hidden="true"></p>
          <p class="lead">Wohnhäuser, Schulen und Umbauten zwischen Inntal und Wipptal. Wir arbeiten mit dem Bestand, mit Holz aus der Region und mit <em>wenigen, genauen</em> Details.</p>
          <p class="links"><a href="#">Alle Projekte</a><a href="#">Das Büro</a></p>
        </div>

        <figure class="zeichnung">
          <div class="bildflaeche">
          <svg viewBox="0 0 560 340" role="img" aria-label="Schwarzplan Innsbruck Ost: der Inn quer durchs Bild, nördlich die kleinteiligen Häuser von Mühlau, südlich die Blockränder von Pradl und die Zeilen der Reichenau. Die Wohnanlage Reichenau Süd ist schraffiert hervorgehoben.">
            <defs>
              <clipPath id="sued"><path d="M0 93.4 L20 98.1 L40 102.6 L60 106.8 L80 110.7 L100 114.1 L120 117 L140 119.3 L160 121 L180 122.2 L200 122.7 L220 122.6 L240 122.1 L260 121 L280 119.6 L300 117.9 L320 115.9 L340 113.8 L360 111.6 L380 109.4 L400 107.3 L420 105.4 L440 103.6 L460 102.1 L480 100.8 L500 99.8 L520 99.1 L540 98.6 L560 98.3 L560 340 L0 340Z" transform="translate(0 10)"/></clipPath>
              <pattern id="schraffur" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><path d="M0 0v4" stroke="#231f20" stroke-width="1.2"/></pattern>
            </defs>
            <path d="M0 63.4 L20 66.8 L40 70 L60 73.1 L80 76 L100 78.7 L120 81.2 L140 83.3 L160 85.2 L180 86.7 L200 87.9 L220 88.8 L240 89.3 L260 89.5 L280 89.4 L300 89 L320 88.3 L340 87.3 L360 86.1 L380 84.7 L400 83.1 L420 81.4 L440 79.5 L460 77.6 L480 75.7 L500 73.8 L520 72 L540 70.3 L560 68.7 L560 98.3 L540 98.6 L520 99.1 L500 99.8 L480 100.8 L460 102.1 L440 103.6 L420 105.4 L400 107.3 L380 109.4 L360 111.6 L340 113.8 L320 115.9 L300 117.9 L280 119.6 L260 121 L240 122.1 L220 122.6 L200 122.7 L180 122.2 L160 121 L140 119.3 L120 117 L100 114.1 L80 110.7 L60 106.8 L40 102.6 L20 98.1 L0 93.4Z" fill="#e1e3e3"/>
            <path d="M0 63.4 L20 66.8 L40 70 L60 73.1 L80 76 L100 78.7 L120 81.2 L140 83.3 L160 85.2 L180 86.7 L200 87.9 L220 88.8 L240 89.3 L260 89.5 L280 89.4 L300 89 L320 88.3 L340 87.3 L360 86.1 L380 84.7 L400 83.1 L420 81.4 L440 79.5 L460 77.6 L480 75.7 L500 73.8 L520 72 L540 70.3 L560 68.7" fill="none" stroke="#231f20" stroke-width=".8" stroke-opacity=".5"/>
            <path d="M0 93.4 L20 98.1 L40 102.6 L60 106.8 L80 110.7 L100 114.1 L120 117 L140 119.3 L160 121 L180 122.2 L200 122.7 L220 122.6 L240 122.1 L260 121 L280 119.6 L300 117.9 L320 115.9 L340 113.8 L360 111.6 L380 109.4 L400 107.3 L420 105.4 L440 103.6 L460 102.1 L480 100.8 L500 99.8 L520 99.1 L540 98.6 L560 98.3" fill="none" stroke="#231f20" stroke-width=".8" stroke-opacity=".5"/>
            <g fill="#231f20"><path transform="rotate(1.8 184.2 15)" d="M179.5 12.4h9.3v5.3h-9.3z"/><path transform="rotate(-3.3 206.9 8.3)" d="M202.7 5.7h8.5v5.1h-8.5z"/><path transform="rotate(-18.8 46 9.2)" d="M41.9 5h8.1v8.3h-8.1z"/><path transform="rotate(-5.2 129.4 46.8)" d="M124.1 43.1h10.7v7.3h-10.7z"/><path transform="rotate(-17.8 539.1 6.6)" d="M533.9 3.5h10.3v6.2h-10.3z"/><path transform="rotate(4.1 72.1 22.8)" d="M67 19.9h10.1v5.7h-10.1z"/><path transform="rotate(-22 355.6 31)" d="M351.2 28.3h8.7v5.3h-8.7z"/><path transform="rotate(-12.8 254.5 26.6)" d="M249.5 22.7h10v7.8h-10z"/><path transform="rotate(-10.6 320.5 43)" d="M315.3 39.1h10.4v7.9h-10.4z"/><path transform="rotate(3.7 274 7)" d="M269.3 2.9h9.3v8.1h-9.3z"/><path transform="rotate(4 484.3 23.2)" d="M479.5 19.5h9.5v7.4h-9.5z"/><path transform="rotate(8.2 256.2 67.4)" d="M250.8 64h10.7v6.9h-10.7z"/><path transform="rotate(16.1 41 43.4)" d="M36.4 38.9h9.2v9h-9.2z"/><path transform="rotate(-1.9 162.8 31.5)" d="M158.1 29h9.3v5.1h-9.3z"/><path transform="rotate(-18.5 99.4 11.6)" d="M96.3 7.5h6.3v8.1h-6.3z"/><path transform="rotate(-2.5 142.7 31.2)" d="M137.5 28.5h10.4v5.3h-10.4z"/><path transform="rotate(-11.1 306.9 70.1)" d="M301.8 65.8h10.1v8.5h-10.1z"/><path transform="rotate(-17.5 233.9 31)" d="M228.7 26.6h10.4v8.8h-10.4z"/><path transform="rotate(3.3 150.9 4.3)" d="M146.9 1h8.1v6.5h-8.1z"/><path transform="rotate(8.8 526.5 43.7)" d="M522.2 39.9h8.6v7.5h-8.6z"/><path transform="rotate(-23.7 8.1 11.7)" d="M4.9 8.5h6.5v6.5h-6.5z"/><path transform="rotate(-7.6 483.6 41.7)" d="M480.3 38.7h6.7v6h-6.7z"/><path transform="rotate(1.4 458.9 14.3)" d="M455.8 9.9h6.1v8.8h-6.1z"/><path transform="rotate(23.9 87.8 38.3)" d="M84.7 34.7h6.1v7.1h-6.1z"/><path transform="rotate(-13.8 427.9 39.5)" d="M423 36.3h9.9v6.3h-9.9z"/><path transform="rotate(15.9 449.5 67.7)" d="M444.3 63.6h10.3v8.2h-10.3z"/><path transform="rotate(-23.6 410.5 19.5)" d="M406.2 16.3h8.6v6.4h-8.6z"/><path transform="rotate(22.8 23.2 18.9)" d="M19.5 15h7.3v7.8h-7.3z"/><path transform="rotate(6.2 127.9 19.4)" d="M124.4 16.5h7v5.8h-7z"/><path transform="rotate(15 497.8 54.5)" d="M493.6 50.7h8.4v7.6h-8.4z"/><path transform="rotate(11.2 536.6 26.4)" d="M532.6 22h8v8.8h-8z"/><path transform="rotate(-7.5 87.5 56.1)" d="M82.1 52.3h10.9v7.6h-10.9z"/><path transform="rotate(7.5 306.5 13.8)" d="M303.4 9.4h6.1v8.9h-6.1z"/><path transform="rotate(20.9 257.2 48.1)" d="M252 44.7h10.5v6.7h-10.5z"/><path transform="rotate(-3 280.9 44.1)" d="M276.6 41.6h8.6v5.1h-8.6z"/><path transform="rotate(2.8 402.5 42.3)" d="M398.7 38.8h7.6v7.1h-7.6z"/><path transform="rotate(-11.2 434.6 11)" d="M430.2 8h8.8v6h-8.8z"/><path transform="rotate(0.8 546.5 50.4)" d="M543.1 47h6.8v6.7h-6.8z"/></g>
            <g fill="#231f20" clip-path="url(#sued)"><g transform="rotate(-9 160 220)"><path d="M-23.5 116h17.2v9.2h-17.2z"/><path d="M-5.3 116h6.4v8.9h-6.4z"/><path d="M-23.5 160h31.4v8.6h-31.4z"/><path d="M8.9 160h20.5v11.3h-20.5z"/><path d="M30.4 160h17.1v9.3h-17.1z"/><path d="M-24 126.5h9.4v33h-9.4z"/><path d="M38 126.5h9.8v16.6h-9.8z"/><path d="M38 144.1h9.3v15.4h-9.3z"/><path d="M78.5 116h55v11.4h-55z"/><path d="M62.5 160h33.9v11h-33.9z"/><path d="M97.4 160h18.9v10h-18.9z"/><path d="M117.3 160h16.2v9.7h-16.2z"/><path d="M62 126.5h9.1v10.2h-9.1z"/><path d="M62 137.7h10.7v0.9h-10.7z"/><path d="M62 139.6h11.5v19.9h-11.5z"/><path d="M124 126.5h8.5v33h-8.5z"/><path d="M148.5 116h32v10.5h-32z"/><path d="M181.5 116h38v10h-38z"/><path d="M148.5 160h39.3v8.6h-39.3z"/><path d="M188.8 160h30.7v9.3h-30.7z"/><path d="M148 126.5h11.4v33h-11.4z"/><path d="M210 126.5h9.2v6.5h-9.2z"/><path d="M210 134h9.5v4.9h-9.5z"/><path d="M210 139.9h9.3v19.6h-9.3z"/><path d="M234.5 116h71v8.5h-71z"/><path d="M234.5 160h48.7v10.3h-48.7z"/><path d="M284.2 160h21.3v9.4h-21.3z"/><path d="M234 126.5h10.8v10.5h-10.8z"/><path d="M234 138h10.6v6.2h-10.6z"/><path d="M234 145.2h9.7v14.3h-9.7z"/><path d="M296 126.5h9.4v20.5h-9.4z"/><path d="M296 148h8.9v11.5h-8.9z"/><path d="M-17.5 184h40.5v10.9h-40.5z"/><path d="M24 184h10.4v10.1h-10.4z"/><path d="M35.4 184h18.1v11h-18.1z"/><path d="M-17.5 228h71v10.3h-71z"/><path d="M-18 194.5h8.6v19.7h-8.6z"/><path d="M-18 215.2h9.6v-0.8h-9.6z"/><path d="M-18 215.4h11v12.1h-11z"/><path d="M44 194.5h9.2v6.2h-9.2z"/><path d="M44 201.7h9.9v-0.3h-9.9z"/><path d="M44 202.3h11.3v25.2h-11.3z"/><path d="M68.5 184h71v8.7h-71z"/><path d="M68.5 228h33.9v9.2h-33.9z"/><path d="M103.4 228h13.5v9.2h-13.5z"/><path d="M117.9 228h21.6v9.9h-21.6z"/><path d="M68 194.5h9.4v7.4h-9.4z"/><path d="M68 202.9h10.4v24.6h-10.4z"/><path d="M130 194.5h8.9v33h-8.9z"/><path d="M154.5 184h40.2v9.9h-40.2z"/><path d="M195.7 184h2.1v11.4h-2.1z"/><path d="M198.8 184h26.7v9.2h-26.7z"/><path d="M154.5 228h26v9.9h-26z"/><path d="M181.5 228h44v8.9h-44z"/><path d="M154 194.5h8.6v9.9h-8.6z"/><path d="M154 205.4h11v14.9h-11z"/><path d="M154 221.3h9.8v6.2h-9.8z"/><path d="M216 194.5h11.3v13.7h-11.3z"/><path d="M216 209.2h8.8v18.3h-8.8z"/><path d="M240.5 184h54.6v11h-54.6z"/><path d="M296.1 184h15.4v11.2h-15.4z"/><path d="M240.5 228h29.2v9.7h-29.2z"/><path d="M270.7 228h4.7v11.3h-4.7z"/><path d="M276.4 228h35.1v9.7h-35.1z"/><path d="M240 194.5h11v8.7h-11z"/><path d="M240 208.3h11v19.2h-11z"/><path d="M302 194.5h9.1v33h-9.1z"/><path d="M265.2 204.5h21.6v13h-21.6z"/><path d="M-23.5 252h25.9v11.5h-25.9z"/><path d="M3.4 252h2.6v9.6h-2.6z"/><path d="M7 252h40.5v9.3h-40.5z"/><path d="M-23.5 296h71v8.7h-71z"/><path d="M-24 262.5h9.3v11.6h-9.3z"/><path d="M-24 275.1h9.1v12.3h-9.1z"/><path d="M-24 288.4h11.4v7.1h-11.4z"/><path d="M38 262.5h10.4v33h-10.4z"/><path d="M62.5 252h37.1v10.7h-37.1z"/><path d="M100.6 252h6.4v10.8h-6.4z"/><path d="M108 252h25.5v9.4h-25.5z"/><path d="M62.5 296h71v10.2h-71z"/><path d="M62 262.5h9.5v33h-9.5z"/><path d="M124 262.5h10.5v11h-10.5z"/><path d="M124 274.5h9.2v21h-9.2z"/><path d="M148.5 252h20.6v9.1h-20.6z"/><path d="M170.1 252h8.8v10h-8.8z"/><path d="M179.9 252h39.6v11.2h-39.6z"/><path d="M148.5 296h31.9v9.2h-31.9z"/><path d="M181.4 296h38.1v10.2h-38.1z"/><path d="M148 262.5h10.2v10.7h-10.2z"/><path d="M148 274.2h10.7v21.3h-10.7z"/><path d="M210 262.5h9.1v13.6h-9.1z"/><path d="M210 277.1h10.8v18.4h-10.8z"/><path d="M234.5 252h18.8v10.4h-18.8z"/><path d="M254.3 252h35.4v9.1h-35.4z"/><path d="M290.7 252h14.8v9.2h-14.8z"/><path d="M234.5 296h41.3v9.4h-41.3z"/><path d="M276.8 296h28.7v11.4h-28.7z"/><path d="M296 262.5h10v21.4h-10z"/><path d="M296 284.9h11.3v-0.2h-11.3z"/><path d="M296 285.7h10.1v9.8h-10.1z"/><path d="M-17.5 320h24.1v9h-24.1z"/><path d="M7.6 320h45.9v10.5h-45.9z"/><path d="M-17.5 364h43.7v8.8h-43.7z"/><path d="M27.2 364h5.3v8.5h-5.3z"/><path d="M33.5 364h20v10.2h-20z"/><path d="M-18 330.5h9.4v33h-9.4z"/><path d="M44 330.5h10.1v33h-10.1z"/><path d="M68.5 320h71v9.4h-71z"/><path d="M68.5 364h21.7v8.5h-21.7z"/><path d="M91.2 364h2v11.5h-2z"/><path d="M94.2 364h45.3v9.4h-45.3z"/><path d="M68 330.5h9.2v33h-9.2z"/><path d="M154.5 320h14.3v10.5h-14.3z"/><path d="M169.8 320h11.3v9.3h-11.3z"/><path d="M182.2 320h43.3v11.3h-43.3z"/><path d="M154.5 364h71v10.6h-71z"/><path d="M154 330.5h10.9v14.4h-10.9z"/><path d="M154 345.9h10v4.3h-10z"/><path d="M154 351.2h11.4v12.3h-11.4z"/><path d="M216 330.5h9.9v21.4h-9.9z"/><path d="M216 352.9h11.2v10.6h-11.2z"/><path d="M179.2 340.5h21.6v13h-21.6z"/><path d="M240.5 320h21.5v9.8h-21.5z"/><path d="M263 320h12.3v11.3h-12.3z"/><path d="M276.3 320h35.2v9.7h-35.2z"/><path d="M240 330.5h9.7v6.9h-9.7z"/><path d="M240 338.4h11.2v0.8h-11.2z"/><path d="M240 340.2h11.5v23.3h-11.5z"/><path d="M302 330.5h9.1v33h-9.1z"/><path d="M-23.5 388h26.9v11h-26.9z"/><path d="M4.4 388h5.7v9.8h-5.7z"/><path d="M11.1 388h36.4v8.7h-36.4z"/><path d="M-23.5 432h71v11.4h-71z"/><path d="M-24 398.5h10.8v33h-10.8z"/><path d="M38 398.5h11v13.1h-11z"/><path d="M38 412.6h8.6v18.9h-8.6z"/><path d="M62.5 388h36.8v9.5h-36.8z"/><path d="M100.3 388h33.2v9.9h-33.2z"/><path d="M62.5 432h31.1v8.6h-31.1z"/><path d="M112 432h21.5v11.3h-21.5z"/><path d="M62 398.5h10.3v9.8h-10.3z"/><path d="M62 409.3h9.5v22.2h-9.5z"/><path d="M124 398.5h11.3v6.7h-11.3z"/><path d="M124 406.2h10.7v13.3h-10.7z"/><path d="M124 420.5h10.9v11h-10.9z"/><path d="M148.5 432h71v10.6h-71z"/><path d="M148 398.5h9.3v25.3h-9.3z"/><path d="M148 424.8h10v6.7h-10z"/><path d="M210 398.5h10.7v9.5h-10.7z"/><path d="M210 409h10.8v22.5h-10.8z"/><path d="M234.5 388h50.6v10.9h-50.6z"/><path d="M286.1 388h19.4v10h-19.4z"/><path d="M234.5 432h45.9v8.7h-45.9z"/><path d="M234 398.5h8.8v9.1h-8.8z"/><path d="M234 408.6h10.4v6.8h-10.4z"/><path d="M234 416.4h9.8v15.1h-9.8z"/><path d="M296 398.5h9.9v9.3h-9.9z"/><path d="M296 408.8h9.2v15.3h-9.2z"/><path d="M296 425.1h10.8v6.4h-10.8z"/></g><g transform="rotate(-4 440 230)"><path d="M318 128h9v52h-9z"/><path d="M322 200h9v52h-9z"/><path d="M318 272h9v52h-9z"/><path d="M345 128h9v48h-9z"/><path d="M349 200h9v48h-9z"/><path d="M345 272h9v48h-9z"/><path d="M372 128h9v56h-9z"/><path d="M376 200h9v48h-9z"/><path d="M372 272h9v48h-9z"/><path d="M399 128h9v44h-9z"/><path d="M426 128h9v48h-9z"/><path d="M426 272h9v44h-9z"/><path d="M453 128h9v48h-9z"/><path d="M457 200h9v48h-9z"/><path d="M453 272h9v48h-9z"/><path d="M480 128h9v52h-9z"/><path d="M484 200h9v48h-9z"/><path d="M480 272h9v52h-9z"/><path d="M507 128h9v44h-9z"/><path d="M511 200h9v52h-9z"/><path d="M507 272h9v52h-9z"/><path d="M534 128h9v44h-9z"/><path d="M534 272h9v48h-9z"/><path class="projekt" d="M403 200h9v44h-9z"/><path class="projekt" d="M430 200h9v52h-9z"/><path class="projekt" d="M401 260h40v9h-40z"/></g></g>
            <text x="150" y="107" class="fluss">Inn</text>
            <!-- Nordpfeil und Maßstab -->
            <g stroke="#231f20" stroke-width="1" fill="none"><path d="M536 12v26"/><path d="M531 22l5-10 5 10" fill="#231f20" stroke="none"/></g>
            <rect x="527" y="40" width="18" height="16" fill="#ffffff"/><text x="536" y="52" text-anchor="middle">N</text>
            <rect x="10" y="304" width="122" height="28" fill="#ffffff"/>
            <path d="M16 316h100" stroke="#231f20" stroke-width="1"/><path d="M16 316h50" stroke="#231f20" stroke-width="3"/>
            <path d="M16 311v10M66 311v10M116 311v10" stroke="#231f20" stroke-width="1"/>
            <text x="16" y="331" class="leise">0</text><text x="116" y="331" class="leise" text-anchor="end">100 m</text>
            <!-- Ortsteile -->
            <rect x="12" y="6" width="56" height="18" fill="#ffffff"/><text x="16" y="19" class="leise">Mühlau</text>
            <rect x="226" y="304" width="46" height="18" fill="#ffffff"/><text x="230" y="317" class="leise">Pradl</text>
            <rect x="472" y="314" width="78" height="18" fill="#ffffff"/><text x="476" y="327" class="leise">Reichenau</text>
            <!-- Projekt -->
            <path d="M438 210 L490 182 H552" stroke="#231f20" stroke-width="1" fill="none"/>
            <circle cx="438" cy="210" r="2.2" fill="#231f20"/>
            <rect x="462" y="160" width="94" height="38" fill="#ffffff"/>
            <text x="552" y="176" text-anchor="end">Reichenau Süd</text>
            <text x="552" y="194" text-anchor="end" class="leise">im Bau, 62 WE</text>
          </svg>
          </div>
          <figcaption><span>Wohnanlage Reichenau Süd • Innsbruck • im Bau</span><span>Schwarzplan Innsbruck Ost</span></figcaption>
        </figure>
      </div>

      <dl class="zahlen">
        <div><dt>1998</dt><dd>gegründet in einer Werkstatt in Wilten</dd></div>
        <div><dt>23</dt><dd>Menschen in Entwurf, Ausführung und Modellbau</dd></div>
        <div><dt>11</dt><dd>gewonnene Wettbewerbe seit 2010</dd></div>
        <div><dt>4</dt><dd>Bauten derzeit auf der Baustelle</dd></div>
      </dl>
    </section>

    <section class="projekte">
      <div>
        <p class="mass" data-mass="h2" aria-hidden="true"></p>
        <h2>Ausgewählte Projekte</h2>
        <p class="hinweis">Liste · Raster</p>
      </div>
      <ol class="liste">
        <li><span class="nr">01</span><h3>Wohnhaus am Mühlauer Hang<span>Neubau, Holzbau auf Betonsockel</span></h3><span class="ort">Innsbruck</span><span class="jahr">2025</span></li>
        <li><span class="nr">02</span><h3>Volksschule Igls<span>Erweiterung um vier Klassen und eine Halle</span></h3><span class="ort">Igls</span><span class="jahr">2024</span></li>
        <li><span class="nr">03</span><h3>Hofstelle in Ranggen<span>Umbau eines Stadels zu drei Wohnungen</span></h3><span class="ort">Ranggen</span><span class="jahr">2023</span></li>
        <li><span class="nr">04</span><h3>Wohnanlage Reichenau Süd<span>62 Wohnungen, Wettbewerb 1. Preis</span></h3><span class="ort">Innsbruck</span><span class="jahr"><em>im Bau</em></span></li>
      </ol>
    </section>

    <footer class="karte">
      <p>Sill Architekten ZT GmbH</p>
      <p>Anichstraße 31<br>6020 Innsbruck</p>
      <p>+43 512 58 22 40<br>buero@sill-architekten.at</p>
      <p>Mitglied der Ziviltechnikerkammer für Tirol und Vorarlberg</p>
    </footer>
  </div>
  <p class="zustand mono" data-zustand aria-hidden="true"><i></i><span data-zustand-text>1 Familie · 450 + Kursiv · Größe trägt</span></p>
</main>

<dl class="werte" data-werte></dl>

<script>
(() => {
  const html = document.documentElement;
  const reduziert = () => html.classList.contains('reduziert');
  const seite = document.querySelector('[data-seite]');
  const knoepfe = [...document.querySelectorAll('[data-variante]')].filter(k => k.tagName === 'BUTTON');
  const werteListe = document.querySelector('[data-werte]');
  const schnitteText = document.querySelector('[data-schnitte]');
  const spanneText = document.querySelector('[data-spanne]');
  const zustand = document.querySelector('[data-zustand]');
  const zustandText = document.querySelector('[data-zustand-text]');

  const SKALA = 'Faktor 1,25: Meta 0.8 · Text 1.0625 · Lead/H3 bis 1.563 · H2 bis 2.441 · Zahl bis 3.052 · H1 bis 4.768 rem';
  const GEMEINSAM = [
    ['familie', 'Hanken Grotesk, variabel (wght 100–900) + Italic, zwei Dateien'],
    ['zeilenhöhe', 'H1 1.02 · H2 1.1 · H3 1.2 · Lead 1.4 · Text 1.45'],
    ['übergang', 'nur Demo: 500ms cubic-bezier(0.1, 0.6, 0.4, 1)'],
  ];
  const VARIANTEN = {
    einer: {
      zustand: '1 Familie · 450 + Kursiv · Größe trägt',
      werte: [
        ['gewichte', 'nur 450 (Book); Betonung über Kursiv, nie über Fett'],
        ['skala', SKALA],
        ['laufweite', 'H1 -0.03em · Zahl -0.025em · H2 -0.02em · Lead und Text -0.012em'],
        ['vorbild', 'KAAN Architecten: Suisse Intl Book 450 + Italic'],
      ]
    },
    zwei: {
      zustand: '1 Familie · 300 / 400 · Größe trägt',
      werte: [
        ['gewichte', '300 große Stufen (H1, H2, Zahl) · 400 alles andere'],
        ['skala', SKALA],
        ['laufweite', 'H1 -0.035em · Zahl -0.03em · H2 -0.02em · Lead und Text -0.012em'],
        ['vorbild', 'Rejouice: SuisseIntl 300/400, Größen 1.4–6.2rem'],
      ]
    },
    drei: {
      zustand: '1 Familie · 400 / 500 / 700 · Größe trägt',
      werte: [
        ['gewichte', '500 Überschriften und Zahlen · 400 Text, Lead · 700 nur Meta und Marke'],
        ['skala', SKALA],
        ['meta', '0.8rem, 700, versal, Laufweite 0.04em'],
        ['vorbild', 'Antinomy Studio: ABC Diatype 400/500/700'],
      ]
    },
    gegen: {
      zustand: 'Gegenprobe · 5 Schnitte · Gewicht trägt',
      werte: [
        ['gewichte', '800 H1, Zahl, Marke · 700 H2, H3 · 600 Lead, Meta · 400 Text'],
        ['skala', 'Meta 0.8 · Text 1 · H3 1.0625 · Lead 1.125 · H2 1.375 · Zahl 1.5 · H1 1.875 rem'],
        ['laufweite', 'H1 -0.01em · Meta 0.06em versal'],
        ['befund', 'gleiche Familie, Hierarchie nur über Gewicht: dichter, lauter, flacher'],
      ]
    },
  };

  let variante = 'einer';
  const rem = el => parseFloat(getComputedStyle(el).fontSize) / parseFloat(getComputedStyle(html).fontSize);
  const zahl = (n, s = 3) => String(+n.toFixed(s));

  function eigenerText(el) {
    for (const n of el.childNodes) if (n.nodeType === 3 && n.textContent.trim()) return true;
    return false;
  }

  function messen() {
    // Maßketten über den Textstufen
    document.querySelectorAll('[data-mass]').forEach(m => {
      const ziel = m.nextElementSibling;
      const cs = getComputedStyle(ziel);
      m.innerHTML = `${m.dataset.mass.toUpperCase()} · <b>${zahl(rem(ziel))}rem</b> · ${Math.round(parseFloat(cs.fontWeight))}`;
    });
    // Befund: welche Schnitte und welche Größenspanne stehen wirklich auf der Seite?
    const schnitte = new Map(); let klein = Infinity, gross = 0;
    seite.querySelectorAll('.innen *').forEach(el => {
      if (el.closest('svg, .mass') || !eigenerText(el) || !el.offsetParent) return;
      const cs = getComputedStyle(el);
      const w = Math.round(parseFloat(cs.fontWeight));
      const key = w * 10 + (cs.fontStyle === 'italic' ? 1 : 0);
      schnitte.set(key, cs.fontStyle === 'italic' ? `${w} kursiv` : String(w));
      const r = parseFloat(cs.fontSize);
      klein = Math.min(klein, r); gross = Math.max(gross, r);
    });
    schnitteText.textContent = [...schnitte.entries()].sort((a, b) => a[0] - b[0]).map(e => e[1]).join(' · ');
    spanneText.textContent = (gross / klein).toFixed(1).replace('.', ',') + ' : 1';
  }

  let messUhr = null;
  function spaeterMessen() {
    clearTimeout(messUhr);
    messen();
    messUhr = setTimeout(messen, reduziert() ? 30 : 560);
  }

  function zeigeWerte() {
    werteListe.innerHTML = [...VARIANTEN[variante].werte, ...GEMEINSAM]
      .map(([a, b]) => `<div><dt>${a}</dt><dd>${b}</dd></div>`).join('');
  }

  function waehle(v) {
    variante = v;
    seite.dataset.variante = v;
    knoepfe.forEach(k => k.setAttribute('aria-pressed', k.dataset.variante === v));
    zustandText.textContent = VARIANTEN[v].zustand;
    zustand.classList.toggle('gegen', v === 'gegen');
    zeigeWerte();
    spaeterMessen();
  }

  knoepfe.forEach(k => k.addEventListener('click', () => { stopp(); waehle(k.dataset.variante); }));
  addEventListener('resize', () => { clearTimeout(messUhr); messUhr = setTimeout(messen, 120); });
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(messen);

  // Vorführung: Größe trägt ↔ Gewicht trägt, dazwischen die drei Varianten
  const FOLGE = ['einer', 'gegen', 'zwei', 'gegen', 'drei', 'gegen'];
  const TAKT = 2600;
  let schleife = null, schritt = 0, vorf = false;

  function neustart() { stopp(); schritt = 0; waehle('einer'); }
  function lauf() {
    waehle(FOLGE[schritt % FOLGE.length]);
    schritt++;
    schleife = setTimeout(lauf, FOLGE[(schritt - 1) % FOLGE.length] === 'gegen' ? TAKT - 400 : TAKT);
  }
  function vorfuehren() {
    pause();
    vorf = true;
    html.classList.add('vorfuehrung');
    schritt = 0;
    lauf();
  }
  function pause() { clearTimeout(schleife); schleife = null; html.classList.remove('vorfuehrung'); }
  function stopp() { vorf = false; pause(); }
  function weiter() { if (schleife || !vorf) return; html.classList.add('vorfuehrung'); lauf(); }

  waehle('einer');

})();
</script>
</body>
</html>