/* =============================================================================
 * Der Rahmen. Zwei Leisten, eine Navigation, ein Benutzermenü, ein Skip-Link.
 *
 * Nur Rahmen-Regeln. Zeile, Feld und Blatt entstehen in M12.4; was hier
 * hineinwächst, wird dort zweimal gepflegt. Alles, was eine einzelne Ansicht
 * betrifft, gehört weiterhin in den Inline-Block in views.tsx, bis M12.4 ihn
 * leert.
 *
 * Lädt NACH base.css und VOR dem Inline-Block. Die Reihenfolge ist tragend:
 * base.css setzt Vorgaben, diese Datei baut den Rahmen, der Inline-Block
 * überschreibt bei gleicher Spezifität.
 *
 * Farbliterale sind hier rot (Guard A, ADR-0024). Alles kommt aus tokens.css.
 * ========================================================================== */

/* =============================================================================
 * Zwei Regeln, die den ganzen Rahmen tragen.
 *
 * 1. Es gibt EINEN Navigationsbaum, und nur Layout zeichnet ihn: die App-Bar
 *    seine erste Ebene, die linke Zone der View-Bar die zweite des aktuellen
 *    Abschnitts. Die rechte Zone navigiert NIE — alles darin verändert
 *    ausschließlich die aktuelle Ansicht (CLAUDE.md §2, A12, M17).
 * 2. Die aktive Stelle wird aus aria-current hervorgehoben, nicht aus einer
 *    Klasse — "true" für den Abschnitt, "page" für die Seite. Damit können
 *    Optik und Zugänglichkeit nicht auseinanderlaufen: wer die Hervorhebung
 *    sieht, hört sie auch.
 * ========================================================================== */

/* Die Umschaltbreite. Über der Schwelle steht die Navigation in der App-Bar,
   darunter in einer Leiste am unteren Rand. Abgeleitet aus dem Inhalt der
   Leiste, nicht geraten: Marke (~110px) + drei Ziele (~240px) + Suchfeld
   (min. 190px) + Benutzer (36px) + Abstände ≈ 660px. 768px lässt Luft und ist
   die Breite, unterhalb derer ein Fenster ohnehin einspaltig gelesen wird.

   BREITENBASIERT, nicht `pointer: coarse`: ein schmales Desktop-Fenster soll
   genauso umschalten wie ein Telefon, und ein Tablet im Querformat gerade
   nicht. Die Trefferflächen hängen dagegen sehr wohl am Zeiger — das ist
   --density aus base.css, und die beiden Fragen werden hier bewusst getrennt
   beantwortet. */

/* =============================================================================
 * Skip-Link. Erstes fokussierbares Element der Seite.
 *
 * Nicht `display: none` und nicht `visibility: hidden` — beides nimmt ihn aus
 * der Fokusreihenfolge, und ein Skip-Link, den man nicht fokussieren kann, ist
 * kein Skip-Link. Er steht im Layout und wird aus dem Bild geschoben.
 * ========================================================================== */

.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  margin: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-13);
  text-decoration: none;
  translate: 0 -200%;
}

.skip:focus {
  translate: 0 0;
}

/* Für Beschriftungen, die eine Vorlesehilfe braucht und das Auge nicht. Nicht
   `display: none`: das nähme sie auch der Vorlesehilfe. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
 * Leiste 1 — App-Bar. Wer bin ich, wo bin ich, wonach suche ich.
 * ========================================================================== */

/* =============================================================================
 * Die eine Kante.
 *
 * Fläche und Haarlinie der beiden Leisten gehen über die volle Fensterbreite —
 * sonst schwebt der Rahmen. Ihr *Inhalt* sitzt in derselben Spalte wie
 * `main`: gleiche Maximalbreite, gleiche Polsterung, also dieselbe linke und
 * rechte Kante von der Marke bis zur letzten Zeile.
 *
 * Als Innenpolsterung statt als zweiter Container im Markup. `100%` ist hier
 * die Breite des umschließenden Blocks — des Fensters —, also wächst die
 * Polsterung genau um das, was rechts und links über die Spalte hinausragt, und
 * fällt unterhalb der Grenze auf die 16px zurück, die `main` ohnehin hat.
 *
 * **Die Leisten folgen `body.wide` NICHT**, und das ist gemessen: mit der
 * schmalen Lesespalte (34rem) schrumpft das Suchfeld von 352px auf 100px und
 * die View-Bar wird dreizeilig (141px statt 41px), und die Navigation spränge
 * bei jedem Wechsel zwischen Board und Item-Seite um rund 290px. Eine breite
 * Leiste über einer schmaleren Lesespalte ist gewöhnlich; eine wandernde
 * Navigation ist es nicht.
 * ========================================================================== */

:root {
  --shell-max: 70rem;
  /* Was rechts und links neben der Spalte übrig bleibt, plus die Polsterung von
     `main`. Auch die beiden Popovers hängen daran — sie stehen im Top-Layer und
     rechnen gegen dasselbe Fenster. */
  --shell-inset: calc(max(0px, (100% - var(--shell-max)) / 2) + var(--space-16));
}

.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: calc(var(--space-48) * var(--density));
  padding-inline: var(--shell-inset);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

/* Die Marke ist bewusst KEIN Link. Sie führte auf dasselbe Ziel wie der erste
   Navigationseintrag und wäre ein zusätzlicher Tabstopp ohne eigenes Ziel —
   die Reihenfolge in CLAUDE.md/M12.2 nennt sie nicht, und das ist der Grund. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
  padding-right: var(--space-4);
}

.brand-mark {
  display: block;
  width: 22px;
  height: 22px;
}

.brand-word {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 36px fein, 48,6px am groben Zeiger — über den geforderten 44px, ohne die
     48px-Leiste zu sprengen. */
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  padding: 0 var(--space-12);
  border-radius: var(--radius-6);
  color: var(--fg-muted);
  font-size: var(--text-13);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--fg-default);
}

/* Die Hervorhebung hängt am Attribut, nicht an einer Klasse. */
.nav a[aria-current] {
  color: var(--fg-default);
  background: var(--brand-accent-weak);
  font-weight: 500;
}

/* Das Suchfeld. Ein GET-Formular auf / mit genau einem Feld — kein
   JavaScript, kein htmx-Attribut, keine Übernahme des Ansichtszustands.
   M12.6 rüstet genau dieses Feld zur Befehlspalette auf. */
.search {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
}

.search input {
  width: 100%;
  max-width: 22rem;
  min-width: 0;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  padding: 0 var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--bg-page);
  color: var(--fg-default);
  font: inherit;
  font-size: var(--text-13);
}

/* =============================================================================
 * Kontext-Umschalter (M12.3, ADR-0025).
 *
 * Er navigiert, also gehört er nach A12 in die App-Bar und nicht in die
 * Ansichtsleiste — und er filtert nicht die Liste, er wechselt die Welt
 * (`design/brain-shell-preview.html`, Abschnitt „Struktur"). Seit M17b ein
 * GET-Formular mit Kästchen (ADR-0035): mehrere Kontexte in einer Übermittlung
 * kann ein Link nicht ausdrücken. Den Rest der Anfrage trägt das Formular als
 * versteckte Felder, deshalb wirft es das Datum auf `/day` nicht mehr weg.
 *
 * Dieselbe Zwei-Anordnungen-Machinerie wie das Benutzermenü: die Grundfassung
 * ist eine gewöhnliche Leiste, weil ein nicht beachtetes `popover`-Attribut das
 * Panel sonst dauerhaft offen stehen ließe, und erst
 * `@supports selector(:popover-open)` macht ein schwebendes Menü daraus.
 * ========================================================================== */

.ctx-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  min-width: 0;
}

.ctx-trigger {
  display: none;
}

/* Das Formular ist nur Klammer: Auslöser und Panel bleiben Kinder der App-Bar,
   wie vor M17b. */
.ctx-form {
  display: contents;
}

.ctx-set {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Gegen den Inline-Block in views.tsx, dessen `label` fett und als Block mit
   Außenabstand gesetzt ist und dessen `input` volle Breite hat — dieselbe
   Rücknahme, die `.board-filter input[type=checkbox]` dort braucht. */
label.ctx-item {
  margin: 0;
  font-weight: inherit;
  gap: var(--space-8);
  cursor: pointer;
}

.ctx-item input[type="checkbox"] {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-accent);
}

.ctx-apply {
  margin: 0;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  padding: 0 var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--bg-page);
  color: var(--fg-default);
  font: inherit;
  font-size: var(--text-13);
}

.ctx-item {
  display: flex;
  align-items: center;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  margin: 0;
  padding: 0 var(--space-8);
  border-radius: var(--radius-6);
  color: var(--fg-muted);
  font-size: var(--text-13);
  text-decoration: none;
  white-space: nowrap;
}

.ctx-item:hover {
  color: var(--fg-default);
}

/* Der wirksame Kontext, auch wenn er aus einem stillen Rückfall stammt — das
   ist die Stelle, an der ein Rückfall sichtbar wird (ADR-0025). */
.ctx-item[aria-current] {
  color: var(--fg-default);
  font-weight: 500;
}

@supports selector(:popover-open) {
  /* Die Pille aus dem Entwurf: Rahmen, 13px, Name in 500, Chevron. */
  .ctx-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
    min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
    max-width: 11rem;
    margin: 0;
    padding: 0 var(--space-8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-6);
    background: var(--bg-page);
    color: var(--fg-muted);
    font: inherit;
    font-size: var(--text-13);
    cursor: pointer;
  }

  .ctx-trigger:hover {
    color: var(--fg-default);
  }

  .ctx-trigger b {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ctx-trigger svg {
    flex: none;
  }

  .ctx-menu {
    display: block;
    position: fixed;
    /* Wie beim Benutzermenü fest verankert statt über Anchor Positioning: das
       Panel hängt in der rechten oberen Ecke. Der Abstand ist der des
       Benutzermenüs plus dessen Auslöser plus die Lücke der Leiste — der
       Umschalter steht links davon. */
    top: calc(var(--space-48) * var(--density) + var(--space-4));
    right: calc(
      var(--shell-inset) + (var(--space-32) + var(--space-4)) * var(--density) +
        var(--space-8)
    );
    left: auto;
    bottom: auto;
    width: 13rem;
    max-width: calc(100vw - var(--space-24));
    /* Das Panel darf nie unter den Bildschirmrand reichen (M17b). Mit Links
       schnitt ein Überlauf nur die letzten Kontexte ab; seit die Absendetaste
       unten steht, schnitte er den einzigen Weg ab, die Auswahl zu übernehmen.
       Gemessen bei 375px und grobem Zeiger: ohne diese Grenze passen „Alle
       Kontexte" und elf Kontexte, beim zwölften ist die Taste unerreichbar. */
    max-height: calc(
      100dvh - var(--space-48) * var(--density) - var(--space-4) - var(--space-8)
    );
    overflow-y: auto;
    padding: var(--space-4) 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-10);
    background: var(--bg-surface);
    box-shadow: var(--shadow);
  }

  /* Die UA-Regel `[popover]:not(:popover-open) { display: none }` verliert
     gegen das `display: block` darüber und muss wiederholt werden. */
  .ctx-menu:not(:popover-open) {
    display: none;
  }

  .ctx-item {
    width: 100%;
    min-height: calc((var(--space-32) + var(--space-8)) * var(--density));
    padding: 0 var(--space-12);
    border-radius: 0;
    justify-content: flex-start;
  }

  .ctx-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding: var(--space-8) var(--space-12) var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }
}

/* =============================================================================
 * Benutzermenü.
 *
 * `popover` mit `popovertarget`: Light-Dismiss, Escape, Top-Layer, Einordnung
 * in die Fokusreihenfolge und die Fokusrückgabe an den Auslöser kommen ohne
 * eine Zeile Skript (ADR-0024). `script-src 'self'` bleibt unangetastet.
 *
 * DER VORGABEZWEIG IST DER OHNE POPOVER-UNTERSTÜTZUNG, und das ist Absicht.
 * Ein unbekanntes `popover`-Attribut wird ignoriert, das Feld bliebe dann
 * DAUERHAFT SICHTBAR — kaputtes Layout, keine Degradation. Also gilt ohne
 * Unterstützung: das Feld ist ein gewöhnlicher Streifen in der Leiste, der
 * Auslöser wird nicht gezeigt. Kein Ziel wird unerreichbar, und es gibt kein
 * zweites Markup — dieselben Elemente, anders angeordnet.
 * ========================================================================== */

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.user-trigger,
.user-head {
  display: none;
}

.user-item {
  display: flex;
  align-items: center;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  /* Explicit, not inherited: the inline block's `button { margin-top: 1rem }`
     applies to the Logout button otherwise, and a class beats an element
     selector whatever the load order. */
  margin: 0;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-6);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-13);
  text-decoration: none;
  cursor: pointer;
}

.user-item:hover {
  color: var(--fg-default);
}

.user-menu form {
  margin: 0;
}

/* Der Einstellungs-Link (M17). In dieser Grundfassung ein gewöhnlicher Eintrag
   mit Stift und Wort; erst mit Popover-Unterstützung rückt er als Stift in die
   Ecke des Kopfes. Er steht bewusst NICHT in .user-head: der Kopf wird in
   dieser Fassung gar nicht gezeichnet, und die Einstellungen gingen mit ihm
   verloren. */
.user-settings {
  gap: var(--space-4);
}

.user-settings-icon {
  flex: none;
}

@supports selector(:popover-open) {
  .user-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc((var(--space-32) + var(--space-4)) * var(--density));
    height: calc((var(--space-32) + var(--space-4)) * var(--density));
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-page);
    color: var(--fg-muted);
    cursor: pointer;
  }

  .user-trigger:hover {
    color: var(--fg-default);
  }

  .user-menu {
    display: block;
    position: fixed;
    /* Ein sichtbares Popover liegt im Top-Layer; sein umschließender Block ist
       das Viewport, nicht der Knopf daneben. `position: absolute; top: 100%`
       greift dort ins Leere. Anchor Positioning wäre der allgemeine Weg und
       kostet Unterstützung (84 % gegen 91,5 %) — dieses Menü hängt aber fest
       in der rechten oberen Ecke, also genügt eine feste Position. */
    top: calc(var(--space-48) * var(--density) + var(--space-4));
    right: var(--shell-inset);
    left: auto;
    bottom: auto;
    width: 15rem;
    max-width: calc(100vw - var(--space-24));
    padding: var(--space-4) 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-10);
    background: var(--bg-surface);
    box-shadow: var(--shadow);
  }

  /* Die UA-Regel `[popover]:not(:popover-open) { display: none }` verliert
     gegen das `display: block` darüber. Sie muss deshalb hier ausdrücklich
     wiederholt werden — sonst steht das Menü offen. */
  .user-menu:not(:popover-open) {
    display: none;
  }

  .user-head {
    display: block;
    margin: 0;
    padding: var(--space-8) var(--space-12) var(--space-12);
    border-bottom: 1px solid var(--border-subtle);
  }

  .user-item {
    min-height: calc((var(--space-32) + var(--space-8)) * var(--density));
    width: 100%;
    padding: 0 var(--space-12);
    border-radius: 0;
    justify-content: flex-start;
  }

  .user-item:hover {
    background: var(--brand-accent-weak);
    color: var(--fg-default);
  }

  /* Der Stift in der Ecke des Kopfes. Absolut zum Menü, das `position: fixed`
     ist; die Trefferfläche nimmt die Dichte mit wie jeder Auslöser der Leiste
     (36px fein, 48,6px am groben Zeiger). Der Kopf rückt rechts so weit ein,
     dass das Token nicht unter den Stift läuft. */
  .user-head {
    padding-right: calc(
      (var(--space-32) + var(--space-4)) * var(--density) + var(--space-8)
    );
  }

  .user-settings {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: calc((var(--space-32) + var(--space-4)) * var(--density));
    min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
    padding: 0;
    border-radius: var(--radius-6);
    justify-content: center;
  }

  /* Das Wort bleibt für die Vorlesehilfe stehen und verschwindet nur aus dem
     Bild. Nicht `.visually-hidden`: das gälte in beiden Fassungen, und ohne
     Popover ist das Wort der ganze Eintrag. */
  .user-settings-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Was das Credential über die angemeldete Person hergibt, ist genau eines: das
   Klartext-Präfix des Tokens, hinter dem diese Sitzung läuft. Kein Name, keine
   Adresse — die stehen in `users` und erreichen das Credential nicht. Also
   steht hier, was wahr ist, und es steht in Mono, weil es ein Maschinenwert
   ist (ADR-0024: „Mono für alles Maschinelle"). */
.user-label {
  display: block;
  color: var(--fg-muted);
  font-size: var(--text-13);
}

.user-token {
  display: block;
  font-family: var(--font-code);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

/* =============================================================================
 * Leiste 2 — View-Bar. Wo bin ich im Abschnitt, wie gefiltert, was tue ich.
 *
 * Zwei Zonen (M17, ADR-0024). Links die des Rahmens: Abschnittsname und, wenn
 * der Abschnitt eine hat, seine zweite Ebene — aus dem Baum, nie von einer
 * Seite. Rechts die der Seite: ihre Bedienelemente, und die führen nirgendwohin
 * (A12). Ohne zweite Ebene und ohne Bedienelemente wird die Leiste gar nicht
 * gezeichnet; der Titel steht dann oben in <main> (.page-title).
 * ========================================================================== */

.viewbar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-8);
  padding-inline: var(--shell-inset);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.view-title {
  margin: 0;
  min-width: 0;
  font-size: var(--text-17);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Die linke Zone: Titel und zweite Ebene nebeneinander, bei Platzmangel
   untereinander. Die Einträge haben die Maße der ersten Ebene — dieselbe
   Trefferfläche an derselben Dichte, dieselbe Hervorhebung am Attribut. Bei
   375px misst die Zone mit „Tasks“ und zwei Einträgen 204,5 von 327px
   (BUILD-PLAN.md, M17); ohne Bedienelemente bricht nichts um. */
.view-sections {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  min-width: 0;
}

.view-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.view-nav a {
  display: flex;
  align-items: center;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  padding: 0 var(--space-12);
  border-radius: var(--radius-6);
  color: var(--fg-muted);
  font-size: var(--text-13);
  text-decoration: none;
  white-space: nowrap;
}

.view-nav a:hover {
  color: var(--fg-default);
}

.view-nav a[aria-current="page"] {
  color: var(--fg-default);
  background: var(--brand-accent-weak);
  font-weight: 500;
}

/* Der Titel einer Seite ohne View-Bar. Dieselbe Schrift wie in der Leiste, damit
   der Wechsel zwischen Seiten mit und ohne Leiste den Ort der Überschrift ändert,
   nicht ihre Gestalt. */
.page-title {
  margin: 0 0 var(--space-16);
  font-size: var(--text-17);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Alles nach dem Titel wird nach rechts geschoben, damit die Hauptaktion dort
   sitzt, wo sie erwartet wird. */
.view-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Der Rahmen bestimmt die ANORDNUNG dessen, was er beherbergt — das Aussehen
   der Bedienelemente gehört weiterhin der Ansicht (und ab M12.4 der
   Feld-Komponente). Ohne diese drei Regeln zieht die globale Vorgabe
   `input, select { width: 100% }` aus dem Inline-Block jedes Filterfeld auf
   die volle Breite und die Leiste wird ein Stapel. */
.view-controls form {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin: 0;
}

.view-controls input,
.view-controls select {
  width: auto;
  max-width: 9rem;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
  padding: 0 var(--space-8);
}

.view-controls button {
  margin: 0;
  min-height: calc((var(--space-32) + var(--space-4)) * var(--density));
}

/* =============================================================================
 * Der Inhalt.
 *
 * Der Rahmen spannt über die volle Breite, die Lesespalte sitzt in <main> —
 * bis M12.2 hing sie am <body>, was die Leisten mit eingezogen hätte.
 * ========================================================================== */

main {
  display: block;
  max-width: 34rem;
  margin: var(--space-32) auto;
  padding: 0 var(--space-16);
}

body.wide main {
  max-width: var(--shell-max);
}

/* Der Skip-Link zielt hierher; ohne tabindex nähme das Ziel keinen Fokus an
   und die Vorlesehilfe spränge nicht mit. -1 heißt: fokussierbar per Skript
   und per Fragment, nicht per Tabulator. */
main:focus {
  outline: none;
}

/* =============================================================================
 * Schmale Breite — die Navigation wandert nach unten.
 *
 * Rein über CSS. Die Navigation steht EINMAL im Markup und wird hier anders
 * positioniert; zweimal gerendert wäre sie zwei Wahrheiten über dasselbe.
 * ========================================================================== */

.tabbar-spacer {
  display: none;
}

@media (max-width: 47.99rem) {
  .nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .nav ul {
    gap: 0;
  }

  .nav li {
    flex: 1 1 0;
  }

  .nav a {
    min-height: calc(var(--space-48) * var(--density));
    border-radius: 0;
    padding: 0 var(--space-4);
  }

  .nav a[aria-current] {
    background: none;
    color: var(--brand-accent);
  }

  /* Der Platz, den die feste Leiste unten sonst dem letzten Absatz nähme — für jede
     Seite mit Sitzung an einer Stelle, weil `Layout` den Platzhalter hinter `main`
     setzt. So hoch wie die Leiste: ihre Links (`.nav a`, oben) plus deren
     Oberkante von 1px. Ohne das Pixel lag das letzte Element 1px unter ihr (M21
     Schnitt A2: die Leiste in A1 bei 375px gemessen 66px hoch, der Platzhalter
     48 × 1,35 = 64,8px gerechnet). */
  .tabbar-spacer {
    display: block;
    height: calc(var(--space-48) * var(--density) + 1px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  main {
    margin: var(--space-24) auto;
  }
}