/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: BIBEL (Register und Leseansicht)
   Beide Bibel-Seiten teilen diese Schicht: sie sind ein Bereich, und die
   Bausteine (Buchkachel, Verszeile, Kapitelwahl) kommen auf beiden vor.
   =========================================================================== */

@layer seite {

  .bibel__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .bibel__pfad a { color: inherit; }

  /* «minmax(0, 1fr)» ist zwingend: die Kinder tragen ch- und rem-Deckel, deren
     max-content-Breite die implizite Spalte sonst über den Kasten hinaus
     aufzieht — bei 360 px löste sie auf 404 px auf (59 px Überlauf). Gleiche
     Ursache wie bei .held__innen auf der Startseite. */
  .bibel__kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-4);
    padding-block: var(--raum-4) var(--raum-6);
  }
  /* 90ch statt 58ch (PO 2026-08-04, gleiche Breite wie /neu, /themen, /sprecher):
     admin-editierbar (Länge unbekannt) ⇒ gedeckelt, nie frei. */
  .bibel__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(90ch, 100%); }

  /* Kurzvermerk am SEITENENDE (PO 2026-08-06): mittig + deutlicher Abstand zum Inhalt
     darüber — er klebte mit 0 px an Zeittafel/Kapitel-Chips/Lese-Spalte (gemessen).
     Der Selektor trifft NUR das Behälter-Ende der drei Bibel-Seiten; der Vermerk im
     Wortsuche-Trefferblock (section) und der Stellen-Aufklapper auf Beitragsseiten
     behalten bewusst ihren kompakten Komponenten-Stand. */
  .behaelter > .bibel-vermerk {
    text-align: center;
    margin-block-start: var(--raum-8);
  }

  /* --- Die EINE Suchleiste (PO 2026-08-06: Modus-Wahl + Feld) ----------- */
  .stellenfeld { max-inline-size: min(34rem, 100%); margin-block-start: var(--raum-4); }
  /* Modus-Wahl über dem Feld: Radios unsichtbar über der GANZEN Beschriftung (Tastfläche),
     aktiv = stille Unterlinie (Kopf-Nav-Muster — PO: «nicht als Pille»). Fokusring am
     Label via :has, weil der Browser ihn am opacity-0-Input nicht sichtbar zeichnet. */
  .suchmodus { display: flex; gap: var(--raum-5); border: 0; padding: 0; margin: 0 0 var(--raum-2); }
  .suchmodus__wahl {
    position: relative;
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    color: var(--text-2);
    cursor: pointer;
    padding-block-end: var(--raum-1);
  }
  .suchmodus__wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .suchmodus__wahl:has(input:checked) { color: var(--text); box-shadow: inset 0 -2px 0 var(--marke); }
  .suchmodus__wahl:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: var(--radius-s); }
  /* Der Umschalter ragte um 4 px hinaus — er darf umbrechen. */
  .bibel__kopf .segment, .fragen__werkzeug .segment { flex-wrap: wrap; }

  .stellenfeld__beispiele {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-3);
    margin-block-start: var(--raum-3);
  }
  .stellenfeld__beispiele code {
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    color: var(--marke);
  }

  /* --- Stelle der Woche ------------------------------------------------- */
  .wochenstelle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    gap: var(--raum-6);
    align-items: center;
  }
  .wochenstelle__vers {
    font-size: var(--txt-t3);
    line-height: 1.35;
    letter-spacing: var(--sperrung-titel);
    max-inline-size: 30ch;
  }
  .wochenstelle__quelle { color: var(--text-3); font-size: var(--txt-klein); margin-block-start: var(--raum-3); }
  .wochenstelle__seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }

  /* --- Buchraster ------------------------------------------------------- */
  .testament { margin-block-start: var(--raum-8); }
  .testament__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-4);
  }
  .testament__kopf h2 { font-size: var(--txt-t4); letter-spacing: -0.01em; }

  .buchraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--raum-3);
  }

  .buch {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
    color: var(--text);
    text-decoration: none;
  }
  .buch:hover { border-color: var(--marke); background: var(--flaeche-3); color: var(--text); }
  /* AT/NT farblich abgehoben (PO 2026-08-06): die AT-Karten tragen einen zarten Marken-Hauch
     (color-mix aus THEME-Tokens — kippt mit hell/dunkel mit, kein neues Farbliteral; die
     8 % senken den Text-Kontrast nur marginal, in beiden Themes gemessen), das NT bleibt
     neutral-hell. Auch die LEEREN Bücher folgen ihrem Bereich (PO-Nachzug derselben Runde):
     Basis ist dort der SEITENGRUND --flaeche, damit sie flacher bleiben als volle Karten —
     Strichelung + gedämpfte Schrift bleiben die «leer»-Kennung. */
  .testament--at .buch:not(.buch--leer) {
    background: color-mix(in oklab, var(--flaeche-2) 92%, var(--marke) 8%);
  }
  .testament--at .buch:not(.buch--leer):hover {
    background: color-mix(in oklab, var(--flaeche-3) 92%, var(--marke) 8%);
  }
  .testament--at .buch--leer {
    background: color-mix(in oklab, var(--flaeche) 92%, var(--marke) 8%);
  }
  .buch__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-3); }
  .buch__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .buch__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .buch__unter { color: var(--text-3); font-size: var(--txt-etikett); }

  .buch__deckung {
    display: block;
    block-size: 3px;
    border-radius: var(--radius-voll);
    background: var(--linie);
    overflow: hidden;
  }
  .buch__deckung span { display: block; inline-size: var(--wert, 0%); block-size: 100%; background: var(--marke); border-radius: var(--radius-voll); }

  .buch--leer { background: none; border-style: dashed; }
  .buch--leer .buch__name { color: var(--text-3); font-weight: var(--gewicht-mittel); }
  .buch--leer .buch__deckung { display: none; }

  /* --- Meistbehandelte Stellen ------------------------------------------ */
  .stellenliste { border-block-start: var(--linie-breit) solid var(--linie); }
  /* Die ganze Zeile ist das Ziel, nicht nur die Stellenangabe — sonst wären
     es 17 px in einer 50 px hohen Zeile. */
  .stellenzeile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-4);
    min-block-size: var(--tastfeld);
    padding: var(--raum-2) var(--raum-3);
    margin-inline: calc(var(--raum-3) * -1);
    border-block-end: var(--linie-breit) solid var(--linie);
    color: var(--text);
    text-decoration: none;
  }
  .stellenzeile:hover { background: var(--flaeche-3); color: var(--text); }
  .stellenzeile:hover .stellenzeile__marke { text-decoration: underline; }
  .stellenzeile__marke {
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    color: var(--marke);
    inline-size: 7rem;
  }
  .stellenzeile__text { color: var(--text-2); font-size: var(--txt-klein); }
  .stellenzeile__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* --- Zeittafel --------------------------------------------------------- */
  /* Umbrechendes Raster statt horizontaler Scroll-Reihe (PO 2026-08-06 — die Spalten-Reihe
     scrollte auf JEDER Breite: 280/792/1184 px Überhang @1280/768/360 gemessen); die
     Kacheln tragen den Standard-Kartenrahmen — der 3-px-Marken-Balken oben ist weg. */
  .zeittafel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--raum-2);
    padding-block-end: var(--raum-3);
  }
  .epoche {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    align-content: start;
    padding: var(--raum-3);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
    color: var(--text);
    text-decoration: none;
  }
  .epoche:hover { background: var(--flaeche-3); color: var(--text); }
  .epoche__zeit { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .epoche__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .epoche__buecher { color: var(--text-3); font-size: var(--txt-etikett); }

  /* =====================================================================
     LESEANSICHT
     ===================================================================== */

  .kapitel__leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    padding-block: var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .kapitel__blaettern { display: flex; align-items: center; gap: var(--raum-1); }
  .kapitel__blaettern a {
    display: grid;
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border-radius: var(--radius-voll);
    color: var(--text-2);
  }
  .kapitel__blaettern a:hover { background: var(--flaeche-3); color: var(--text); }
  .kapitel__blaettern svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .kapitel__wahl { display: flex; align-items: center; gap: var(--raum-2); }
  .kapitel__wahl select { inline-size: auto; }
  .kapitel__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); margin-inline-start: auto; }

  .kapitel__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block: var(--raum-5) var(--raum-6);
  }

  .lesetext { max-inline-size: var(--lese-max); }
  .lesetext h1 { font-size: var(--txt-t2); margin-block-end: var(--raum-5); }
  .lesetext h2 {
    font-size: var(--txt-gross);
    color: var(--text-2);
    margin-block: var(--raum-5) var(--raum-3);
  }

  .vers {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--raum-3);
    align-items: baseline;
    padding: var(--raum-2) var(--raum-3);
    margin-inline-start: calc(var(--raum-3) * -1);
    border-radius: var(--radius-s);
    scroll-margin-block-start: 7rem;
  }
  .vers:target { background: var(--flaeche-4); }
  .vers__nr {
    justify-self: end;
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    text-decoration: none;
  }
  .vers__nr:hover { color: var(--marke); }
  .vers__text { color: var(--text); }

  /* Verse mit zugeordneten Beiträgen bekommen eine Marke am Zeilenende */
  .vers__beitraege {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-1);
    min-block-size: 1.75rem;
    margin-inline-start: var(--raum-2);
    padding-inline: var(--raum-2);
    border-radius: var(--radius-voll);
    background: var(--flaeche-4);
    color: var(--marke);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
    vertical-align: 0.1em;
  }
  .vers__beitraege:hover { background: var(--marke); color: var(--marke-auf); }
  .vers__beitraege svg { inline-size: 0.9em; block-size: 0.9em; fill: none; stroke: currentColor; stroke-width: 2; }

  .lesetext__quelle {
    margin-block-start: var(--raum-6);
    padding-block-start: var(--raum-4);
    border-block-start: var(--linie-breit) solid var(--linie);
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }

  /* Seitenspalte der Leseansicht — klebt; seit §8 (c) mit HÖHEN-DECKEL + eigenem Scroll: eine
     sticky Spalte ohne Deckel wird unbedienbar, sobald ihr Inhalt (Beiträge + Zitat-Kacheln +
     150 Psalm-Chips) den Viewport übersteigt (LESSONS «sticky ohne Höhen-Deckel», 2026-08-08). */
  .kapitel__rand {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4);
    position: sticky; inset-block-start: 6rem;
    max-block-size: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
    padding-inline-end: var(--raum-1);
  }

  /* §8 Zeitmarke (084): Zeit-Zusatz an der Stellen-Zeile + Play-Symbol im Titel-Link */
  .stellenbeitrag__zeit { color: var(--text-3); font-weight: var(--gewicht-normal); }
  .stellenbeitrag__titel a svg { flex: none; inline-size: 0.85em; block-size: 0.85em; margin-inline-end: var(--raum-1); fill: currentColor; stroke: none; }
  .vers__beitraege--sprung svg { fill: currentColor; stroke: none; }

  /* §8 (c) Zitate-Karte in der Randspalte: EINE Kachel-Spalte (18–22rem), kompaktere Titel */
  .rand-karte--zitate .werkkachel__titel { font-size: var(--txt-klein); }
  .rand-karte__mehr { color: var(--text-3); font-size: var(--txt-etikett); }

  .stellenbeitrag {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    padding-block: var(--raum-3);
    border-block-start: var(--linie-breit) solid var(--linie);
  }
  .stellenbeitrag:first-of-type { border-block-start: 0; padding-block-start: 0; }
  .stellenbeitrag__stelle { color: var(--marke); font-family: var(--schrift-mono); font-size: var(--txt-etikett); font-weight: var(--gewicht-halb); }
  .stellenbeitrag__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .stellenbeitrag__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .stellenbeitrag__titel a:hover { text-decoration: underline; }
  .stellenbeitrag__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-1) var(--raum-3);
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }

  @media (max-width: 60rem) {
    .wochenstelle { grid-template-columns: 1fr; gap: var(--raum-4); }
    .kapitel__spalten { grid-template-columns: 1fr; gap: var(--raum-6); }
    /* einspaltig klebt nichts mehr — Deckel, eigener Scroll und overscroll-contain GEHEN MIT ZURÜCK, sonst
       wird die Spalte im Seitenfluss zum Scroll-Kasten (Audit §8 M1: Scroll-Trap auf iPadOS/Android) */
    .kapitel__rand { position: static; max-block-size: none; overflow: visible; overscroll-behavior: auto; }
  }

  @media (max-width: 34rem) {
    .buchraster { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    .wochenstelle__vers { font-size: var(--txt-t4); }
    .stellenzeile { grid-template-columns: minmax(0, 1fr) auto; }
    .stellenzeile__text { grid-column: 1 / -1; }
    .vers { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--raum-2); }
  }
}

/* ── Bestands-Nachtrag E5 (Überlauf-Messung @360): die Buch-/Kapitel-Wahl darf umbrechen
   und das Buch-Select muss unter Schmalbreite schrumpfen dürfen (lange Buchnamen). */
@layer seite {
  .kapitel__wahl { flex-wrap: wrap; }
  .kapitel__wahl select { max-inline-size: min(14rem, 60vw); }
}