/* ============================================================
   Schreinerei Baumgartner - Entwurf C "Titelblatt", zweite Fassung
   (12.09.2026): DAS VERZEICHNIS.

   Kein Bild, wie von Carlo am 07.09.2026 entschieden. Die erste
   Fassung hatte eine Kopfleiste mit Menue und darunter Abschnitte
   untereinander. Jetzt: ein Titelblatt mit dem Namen ueber die ganze
   Breite und fuenf Kennzahlen als Zeile, dann ein Register, das links
   stehen bleibt, waehrend rechts die vier Abschnitte durchlaufen.
   Sehr viel Luft, Haarlinien, eine einzige Farbe fuer alles, was man
   anfassen kann. Schriften wie zuvor: Inter Tight fuer Namen und
   Ueberschriften, IBM Plex Mono fuer alles Gezaehlte.
   Kein Javascript, kein position: fixed (das Register ist sticky).
   ============================================================ */

:root {
  --papier:  #FBFBF9;
  --papier-2:#F3F2EE;
  --tinte:   #111214;
  --tinte-2: #5F6167;
  --linie:   #D9D8D2;
  --rot:     #C8351F;

  --schrift: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --bahn:    80rem;
  --rand:    clamp(1rem, 4vw, 2.5rem);
  --seite:   max(var(--rand), calc((100% - var(--bahn)) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--schrift);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p, ol, dl, dd, address { margin: 0; font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

.hinweis {
  margin: 0; padding: .5rem var(--seite); border-bottom: 1px solid var(--linie);
  font-family: var(--mono); font-size: .72rem; line-height: 1.5; color: var(--tinte-2);
}
.hinweis b { color: var(--tinte); font-weight: 600; }

.zumregister {
  position: absolute; left: .75rem; top: -5rem; z-index: 10;
  padding: .6rem 1rem; background: var(--tinte); color: #fff; font-weight: 600; text-decoration: none;
}
.zumregister:focus { top: 3rem; }

/* Alles Gezaehlte in der Mono. */
.titelblatt__oben, .kennzahlen dt, .abschnitt__nr, .register span, .register__ruf,
.werke__nr, .werke__holz, .werke__jahr, .stufen__wann, .kolophon__zeiten, .kolumne { font-family: var(--mono); }


/* ---------- Titelblatt ---------- */

.titelblatt { padding: clamp(2rem, 5vw, 4rem) var(--seite) 0; }
.titelblatt__oben {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--linie);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2);
}
/* Der Name fuellt die Breite: 15,5 vw sind auf jedem Bildschirm etwa
   die Breite von "Baumgartner" in Inter Tight 600 mit -.05em. */
.titelblatt__name {
  margin-top: clamp(1rem, 3vw, 2.2rem);
  font-size: clamp(3.2rem, 15.4vw, 15.6rem); line-height: .92; letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.titelblatt__zeile { max-width: 30rem; margin-top: clamp(1.2rem, 3vw, 2.2rem); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; }

.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.kennzahlen > div { padding: 1.1rem 1.2rem 1.1rem 0; border-left: 1px solid var(--linie); padding-left: 1.2rem; }
.kennzahlen > div:first-child { border-left: 0; padding-left: 0; }
.kennzahlen dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.kennzahlen dd { margin-top: .3rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.kennzahlen small { font-size: .55em; font-weight: 400; letter-spacing: 0; color: var(--tinte-2); }
.kennzahlen a { text-decoration: none; color: var(--rot); font-size: .85em; }


/* ---------- Register und Seiten ---------- */

.buch { display: grid; padding: 0 var(--seite); }
@media (min-width: 60em) {
  .buch { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .register { position: sticky; top: 0; align-self: start; padding-top: clamp(2.5rem, 6vw, 5rem); }
}
.register { padding-top: 2rem; }
.register ol { list-style: none; margin: 0; padding: 0; }
.register li { border-top: 1px solid var(--linie); }
.register a {
  display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0;
  text-decoration: none; font-size: .95rem; font-weight: 500;
}
.register span { font-size: .7rem; color: var(--tinte-2); }
.register a:hover, .register a:focus-visible { color: var(--rot); }
.register__ruf { display: block; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .9rem; text-decoration: none; color: var(--rot); }

.seiten { min-width: 0; }
.abschnitt { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--linie); }
@media (min-width: 60em) { .abschnitt:first-child { border-top: 0; } }
.abschnitt__nr { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.abschnitt h2 { margin-top: .8rem; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; max-width: 20ch; }
.abschnitt__vor { max-width: 34rem; margin-top: 1.1rem; color: var(--tinte-2); }


/* ---------- 01 Werke: Punktreihe wie im Register ---------- */

.werke { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.werke li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .85rem 0; border-top: 1px solid var(--linie); font-size: 1.05rem;
}
.werke li:last-child { border-bottom: 1px solid var(--linie); }
.werke__nr { font-size: .74rem; color: var(--tinte-2); min-width: 1.6rem; }
.werke__name { font-weight: 500; }
.werke__punkte { flex: 1; border-bottom: 1px dotted var(--tinte-2); min-width: 2rem; transform: translateY(-.35em); }
.werke__holz { font-size: .78rem; color: var(--tinte-2); }
.werke__jahr { font-size: .78rem; min-width: 2.8rem; text-align: right; }
.werke li:hover .werke__name { color: var(--rot); }
@media (max-width: 40em) {
  .werke li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; column-gap: .6rem; }
  .werke__punkte { display: none; }
  .werke__nr { grid-row: 1 / span 2; }
  .werke__holz { grid-column: 2; margin-top: .15rem; }
  .werke__jahr { grid-column: 3; grid-row: 1; }
}


/* ---------- 02 Sachen ---------- */

.sachen { display: grid; gap: 0 3rem; margin-top: 2.2rem; }
@media (min-width: 46em) { .sachen { grid-template-columns: 1fr 1fr; } }
.sachen > div { padding: 1.2rem 0; border-top: 1px solid var(--linie); }
.sachen dt { display: flex; gap: 1rem; align-items: baseline; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.sachen dt span { font-family: var(--mono); font-size: .74rem; color: var(--rot); }
.sachen dd { margin-top: .5rem; color: var(--tinte-2); }


/* ---------- 03 Stufen ---------- */

.stufen { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.stufen li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--linie); }
.stufen__nr { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--linie); }
.stufen h3 { font-size: 1.25rem; }
.stufen__wann { margin-top: .2rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.stufen p:not(.stufen__wann) { margin-top: .5rem; max-width: 34rem; color: var(--tinte-2); }


/* ---------- 04 Kolophon ---------- */

.kolophon { display: grid; gap: 2rem; margin-top: 2.2rem; }
@media (min-width: 46em) { .kolophon { grid-template-columns: 1fr 1fr; align-items: start; } }
.kolophon__nummer { display: inline-block; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--rot); text-decoration: none; }
.kolophon address { margin-top: 1.4rem; line-height: 1.6; }
.kolophon__zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--linie); font-size: .86rem; }
.kolophon__zeiten div:last-child { border-bottom: 1px solid var(--linie); }
.kolophon__zeiten dt { color: var(--tinte-2); }


/* ---------- Kolumne ---------- */

.kolumne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding: 1.2rem var(--seite) 1.6rem; border-top: 1px solid var(--linie); font-size: .72rem; color: var(--tinte-2); }
.kolumne__tot { color: #A5A6AB; }


/* ---------- Beim Scrollen: die Zeilen des Verzeichnisses kommen nacheinander ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .werke li, .sachen > div, .stufen li { animation: eintragen linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes eintragen { from { opacity: 0; translate: 0 .6rem; } to { opacity: 1; translate: 0 0; } }

@media print {
  .register { position: static; }
  .zumregister { display: none; }
}