/* =====================================================================
   Quire · Basis
   Zurücksetzen, Grundtypografie, Seitengerüst, Tab-Leiste.
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--lage);
}

body {
  margin: 0;
  background: var(--lage);
  color: var(--tinte);
  font: var(--gr-brot)/var(--zl-brot) var(--brot);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* ---------- Überschriften: hier lebt die New York ---------- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--auszeichnung);
  font-weight: 600;
  color: var(--tinte);
}
h1 { font-size: var(--gr-titel);  line-height: var(--zl-titel);  letter-spacing: var(--sp-titel) }
h2 { font-size: var(--gr-kopf);   line-height: var(--zl-kopf);   letter-spacing: var(--sp-kopf) }
h3 { font-size: var(--gr-abschn); line-height: var(--zl-abschn); letter-spacing: var(--sp-abschn) }

p { margin: 0 }

/* ---------- Textrollen ---------- */

.neben  { font-size: var(--gr-neben); line-height: var(--zl-neben); color: var(--satz) }
.klein  { font-size: var(--gr-klein); line-height: var(--zl-klein); color: var(--satz) }
.leise  { color: var(--satz) }
.leiser { color: var(--satz-2) }

/* Ziffern stehen immer in der Monospace und immer tabellarisch —
   damit ein Zähler beim Hochlaufen nicht wackelt. */
.zahl {
  font-family: var(--ziffer);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}

/* Beschriftung über einem Abschnitt. Versal, weit, klein — die einzige
   Stelle, an der wir Versalien verwenden. */
.rubrik {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--satz-2);
}

/* ---------- Bedienelemente zurücksetzen ---------- */

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { cursor: pointer; background: none; border: 0; padding: 0 }

/* Sichtbarer Tastaturfokus. Nie entfernen — für alle, die ohne Maus
   arbeiten, ist das die einzige Ortsangabe. */
:focus-visible {
  outline: 2px solid var(--leinen);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none }

::selection { background: var(--leinen-2); color: var(--tinte) }

/* ---------- Seitengerüst ---------- */

.blatt {
  max-width: 44rem;
  margin: 0 auto;
  padding-left:  max(var(--rand), env(safe-area-inset-left));
  padding-right: max(var(--rand), env(safe-area-inset-right));
}

.seite {
  padding-bottom: calc(var(--tableiste) + var(--m8));
  min-height: 100dvh;
}

/* Großer Seitentitel, der beim Scrollen der klebenden Kopfzeile weicht.
   Das Umschalten übernimmt ein IntersectionObserver in app/ui.js; hier
   stehen nur die beiden Zustände. */

.titelfeld { padding-top: var(--m8); padding-bottom: var(--m5) }
.titelfeld .beisatz { margin-top: var(--m1) }

/* Drei Spalten: links zurück, Mitte Titel, rechts Aktion. Der Titel steht
   mittig, auch wenn links oder rechts nichts sitzt. */
.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  height: var(--kopfleiste);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--m3);
  background: color-mix(in srgb, var(--lage) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--zeit) var(--kurve);
}
.kopfleiste .mitschrift {
  grid-column: 2;
  font-family: var(--auszeichnung);
  font-size: var(--gr-brot); font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve);
}
.kopfleiste > .knopf:first-child { grid-column: 1; justify-self: start }
.kopfleiste > .knopf:last-child:not(:first-child) { grid-column: 3; justify-self: end }
.kopfleiste.abgesetzt { border-bottom-color: var(--falz) }
.kopfleiste.abgesetzt .mitschrift { opacity: 1; transform: none }

/* ---------- Tab-Leiste ---------- */

.tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--tableiste);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--bogen) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--falz);
}
.tableiste button {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  font-size: 10.5px; letter-spacing: .01em;
  color: var(--satz-2);
  min-height: 44px;
  transition: color var(--zeit) var(--kurve);
}
.tableiste button svg { width: 24px; height: 24px; display: block }
.tableiste button[aria-current="page"] { color: var(--leinen); font-weight: 600 }

/* ---------- Bewegung nur, wenn erwünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Nur für Vorleseprogramme ---------- */

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