/* ===========================================================================
   SEITE: PREDIGTEN — Fassung ENTWURF D (PO 2026-07-31; Quelle
   docs/konzept/OP_predigten_V6/prototyp/css/entwurf-vergleich.css, §7-Verteilung:
   Navileiste · Suchknopf · Suchtafel · knapper Kopf sind SEITENSPEZIFISCH; die
   geteilten Bausteine [Mehrfachwahl · Hörring · Merk-Stern · Zeilen-Punkte]
   wohnen im komponenten-OP-Block «Predigten Entwurf D»).
   Die E3-Filterspalten-Regeln (predigten__spalten · filter-Familie ·
   filter-schalter · filter-huelle · anwenden-Sticky) sind mit Entwurf D
   ABGELÖST — nur diese Seite lud sie (§7-Regel; gemessen: keine andere).
   ⚠ KEIN Stern-Slash-Muster in Kommentaren (GF49-Falle — der Erstlauf dieser
   Datei legte den kompletten @layer-Block damit still).
   =========================================================================== */

@layer seite {

  /* Knapper Kopf (§1): NUR der Titel — Krümelpfad + Einleitung entfallen. */
  .predigten__kopf--knapp {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-2) var(--raum-5);
    padding-block: var(--raum-5) 0;
  }
  .predigten__kopf--knapp h1 { font-size: var(--txt-t3); }
  @media (max-width: 34rem) {
    .predigten__kopf--knapp { justify-content: flex-start; }
  }

  /* Navileiste (§2): fünf Format-Wege links, Werkzeuge rechts. */
  .navileiste {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--raum-3) var(--raum-4);
    margin-block-start: var(--raum-5);
    padding-block: var(--raum-3);
    border-block: var(--linie-breit) solid var(--linie);
  }
  .navileiste__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--raum-2); }
  .navileiste__wege .chip { white-space: nowrap; }
  .navileiste__rechts {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3);
    margin-inline-start: auto;
  }
  .werkzeug__sortierung { display: flex; align-items: center; gap: var(--raum-2); }
  .werkzeug__sortierung select { inline-size: auto; }
  /* Der Sortier-Sende-Knopf ist das No-JS-Fundament des Mini-Formulars (§2);
     mit JS submittet `change` und der Knopf verschwindet. */
  .hat-js .sortier-senden { display: none; }

  /* Ansicht-Umschalter (Raster/Liste) auf Suchknopf-Höhe (PO 2026-08-07): die
     Komponente misst 54 px (44er-Knöpfe + Hüllen-Padding + Rand) und stand höher als
     die 44er-Pille «Suchen & filtern» daneben. Hier schrumpft NUR die Knopf-OPTIK
     (34 px = 44 − 2×(4px Padding + 1px Rand)); die 44er-TASTFLÄCHE liefert das
     unsichtbare ::before (Chip-Muster) — vertikal ins Leere der Navileiste, kein
     Nachbar verliert eine Kante. ⚠ .segment selbst ist Abgabe-Bestand (Byte-Identität)
     mit weiteren Nutzern — deshalb der Navileisten-Scope, kein Komponenten-Touch. */
  .navileiste .segment__wahl {
    position: relative;
    min-block-size: 2.125rem;
  }
  .navileiste .segment__wahl::before {
    content: "";
    position: absolute;
    inset-block: calc((2.125rem - var(--tastfeld)) / 2);
    inset-inline: 0;
  }

  /* Der Auslöser trägt Text: ein Lupensymbol allein würde die Filter dahinter
     nicht ankündigen (§2). */
  .suchknopf {
    display: flex; align-items: center; gap: var(--raum-2);
    appearance: none; border: 0;
    block-size: var(--tastfeld); padding-inline: var(--raum-4);
    border-radius: var(--radius-voll);
    background: var(--flaeche-3); color: var(--text);
    font: inherit; font-size: var(--txt-klein); font-weight: var(--gewicht-fett);
    cursor: pointer;
  }
  .suchknopf:hover { background: var(--flaeche-4); }
  .suchknopf[aria-expanded="true"] { background: var(--flaeche-4); }
  .suchknopf svg { fill: none; stroke: currentColor; stroke-width: 1.75; }
  .suchknopf__pfeil {
    display: inline-flex;
    color: var(--text-3);
    transition: transform 0.24s ease;
  }
  .suchknopf[aria-expanded="true"] .suchknopf__pfeil { transform: rotate(90deg); color: var(--text); }

  /* Suchtafel (§3): liegt IN der Seite und schiebt die Ergebnisse nach unten —
     kein Überblendfenster. Die Animations-Pixelwerte setzt op-ui und räumt sie
     wieder weg (die Tafel darf frei wachsen); grid-template-rows 0fr→1fr wurde
     im Entwurf probiert und VERWORFEN (kollabierte im Zielbrowser nicht). */
  .suchtafel-huelle { display: block; }
  .suchtafel-huelle__inhalt {
    overflow: hidden;
    transition: max-block-size 0.32s ease;
    /* Clip-Luft fuer den Fokus-Ring (PO 2026-08-07): das overflow:hidden schnitt den
       :focus-within-Ring der Suchleiste (3px + 2px Offset = 5px Ueberstand) links und
       rechts ab — op-ui fokussiert das Feld genau beim Aufklappen, der Ring stand also
       JEDES Mal beschnitten da. padding erweitert die Clip-Box (geclippt wird an der
       Padding-Box), die negative margin kompensiert die Geometrie: die Tafel selbst
       steht pixel-identisch, nur der Ring hat jetzt Raum. NICHT auf padding-block
       ausweiten — das ginge in scrollHeight ein (op-ui-Animationsmass). */
    padding-inline: 8px;
    margin-inline: -8px;
  }
  /* ⚠ Der Ausgangs-Zustand kommt aus der KASKADE, nicht aus dem Skript (Mess-Fund
     2026-07-31): ohne JS ist die Tafel offen (Fundament-Regel — kein hat-js, keine Regel);
     MIT JS ist sie zu, sobald `hat-js` am Wurzelelement steht. Klappte das Skript sie erst
     nach dem Rendern zu, blitzte die ~900-px-Tafel auf, die Seite sprang — und die
     Scroll-Wiederherstellung der pjax-Schicht griff ins Leere (der e-back-scroll-Check
     lief in den Timeout). `data-auf` setzt das Skript nur noch fürs ÖFFNEN. */
  .hat-js .suchtafel-huelle:not([data-auf]) .suchtafel-huelle__inhalt { max-block-size: 0; }
  .suchtafel {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5);
    padding-block: var(--raum-5);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  /* Suchleiste schmaler (PO 2026-08-07): die vollbreite Pille (~1230px @1280) wirkte
     ueberdimensioniert. Deckel == Startseiten-Hero-Suchleiste (.held__suche,
     seiten/startseite.css) — EIN Mass fuer dieselbe Komponente app-weit. */
  .suchtafel .suche { max-inline-size: min(42rem, 100%); }
  .suchtafel__spalten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--raum-5);
    align-items: start;
  }
  /* Format und Sprache teilen eine Spalte (§3): kurze Listen füllen zusammen
     die Höhe der offenen Mehrfachwahl daneben. */
  .suchtafel__stapel { display: grid; gap: var(--raum-5); align-content: start; }
  .suchtafel__fuss {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4);
    padding-block-start: var(--raum-4);
    border-block-start: var(--linie-breit) solid var(--linie);
  }
  .suchtafel__fuss .knopf--marke { margin-inline-start: auto; }
  .suchtafel__hinweis { color: var(--text-3); font-size: var(--txt-etikett); }
  .predigten__filter-zurueck { font-size: var(--txt-etikett); }

  /* «Im Wortlaut» (P7, PO 2026-09-14): seit dem Umbau eine gleichrangige Klapp-Gruppe im Spalten-Stapel 4
     (Bibelstelle · Zeitraum · Im Wortlaut) — keine eigenen Regeln mehr; die frühere abgesetzte Block-Optik
     (.suchtafel__gesprochen, P5 vom 13.09.) ist mit dem PO-Entscheid entfallen. */

  /* Mobil-Klapp (PO 2026-08-11): die offene Tafel war @360 1.843 px hoch, der Suchen-Knopf
     stand 2,4 Bildschirmhöhen unterm Feld (gemessen). Unter 48rem gilt deshalb:
     (1) Reihenfolge Feld → Fuss (Suchen-Knopf) → Filtergruppen — REIN optisch per order,
         die DOM-/Tab-Folge bleibt Feld→Filter→Knopf (bewusster, dokumentierter Kompromiss);
     (2) alle sechs Gruppen starten als zugeklappte Stand-Zeilen (open entfernt op-ui beim
         Laden, solange die Tafel unsichtbar ist — kein Sprung; ohne JS bleibt alles offen);
     (3) die legend-Zeilen weichen den summaries (nur-vorlese-Muster, nicht display:none —
         der Gruppenname bleibt fuer Screenreader am fieldset).
     Desktop: die vier Zusatz-summaries sind UNSICHTBAR und ihre details IMMER offen
     (op-ui ruehrt open nur unter 48rem an) — die Tafel bleibt dort pixel-identisch. */
  .mehrfachwahl--klapp > summary { display: none; }
  @media (max-width: 48rem) {
    .mehrfachwahl--klapp > summary { display: flex; }
    .suchtafel .suche { order: -2; }
    .suchtafel__fuss { order: -1; border-block-start: 0; padding-block-start: 0; }
    .suchtafel__hinweis { display: none; } /* die Handy-Tastatur traegt die Such-Taste (enterkeyhint) */
    .suchtafel { gap: var(--raum-4); }
    .suchtafel__spalten { gap: var(--raum-3); }
    .suchtafel .filter__legende {
      position: absolute; inline-size: 1px; block-size: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    /* aufgeklappte Klapp-Gruppe: Luft zwischen Stand-Zeile und Inhalt (nur mobil —
       auf Desktop folgt der Inhalt der sichtbaren legend wie bisher) */
    .mehrfachwahl--klapp > .filter__wahlen,
    .mehrfachwahl--klapp > .filter__paar { margin-block-start: var(--raum-3); }
  }

  .predigten__stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    margin-block: var(--raum-5);
  }
  .predigten__treffer { font-size: var(--txt-klein); color: var(--text-2); }
  .predigten__treffer strong { color: var(--text); }

  @media (max-width: 60rem) {
    .navileiste__rechts { margin-inline-start: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .suchtafel-huelle__inhalt, .suchknopf__pfeil { transition: none; }
  }
}

/* ==== OP-ERGÄNZUNGEN (E3/E8-Bestand, der Entwurf D überlebt) =========================== */
@layer seite {
  /* R1-Admin-Sicht (rote hidden-Markierung): seit der Ausrollung PO 2026-08-12 wohnt die
     Regel in komponenten.css (OP-Block «ROTE ADMIN-SICHT» — zweiter Nutzer Startseite). */

  /* hidden-Zwillinge (LESSONS-Reflex GF29): .kachel-gitter/.werkliste setzen display selbst
     (grid) und schlügen sonst das UA-[hidden] — der Ansicht-Umschalter wäre wirkungslos. */
  .kachel-gitter[hidden], .werkliste[hidden] { display: none; }

  /* Tipp-Suchfeld der Sprecher-Mehrfachwahl (P13-Muster, op-ui «filterliste»):
     hidden bis JS + hidden-Zwillinge (GF29-Reflex). */
  .filter__suchfeld { inline-size: 100%; }
  .filter__suchfeld[hidden] { display: none; }
  .filter__wahl[hidden] { display: none; }

  /* Merken-Umschalter der Listen-Zeile: runder Symbol-Knopf, aktiv in Markenfarbe.
     Masse seit PO 2026-08-07 ~15 % kleiner (30→26 px) — dafür bekommt der Knopf
     ERSTMALS die unsichtbare 44-px-Tastfläche (§7; der Bestand hatte nackte 30 px).
     Die Nachbarn sind unklickbar (Hörring role=img · Datum Text) — die Zone stiehlt
     niemandem eine Kante (elementFromPoint-Gegenprobe in der Abnahme-Messung). */
  .merk-form--zeile { display: inline-flex; }
  .merk-knopf-zeile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    background: var(--flaeche);
    color: var(--text-3);
    cursor: pointer;
  }
  .merk-knopf-zeile::before {
    content: "";
    position: absolute;
    inset: calc((1.625rem - var(--tastfeld)) / 2);
    border-radius: 50%;
  }
  .merk-knopf-zeile:hover { color: var(--text); border-color: var(--text-3); }
  /* ⚠ BUGFIX (PO-Fund 2026-07-30): hier stand var(--link) — das Token lebt seit der
     v5-Destillation NUR im Admin-Anthrazit-Satz (tokens.css, Kontroll-Ausnahme); im
     öffentlichen Kontext war var() ungültig ⇒ color fiel auf die geerbte Textfarbe
     zurück ⇒ der Klick änderte sichtbar NICHTS. Aktiv = Markenfarbe + GEFÜLLTER Stern. */
  .merk-knopf-zeile.merk-knopf--aktiv { color: var(--marke); border-color: var(--marke); }
  .merk-knopf-zeile svg { fill: none; stroke: currentColor; }
  .merk-knopf-zeile.merk-knopf--aktiv svg { fill: currentColor; }

  /* ── Symbol-Legende (PO 2026-08-06): Inline-Zeile unter der Navileiste ─────────────── */
  .symbol-legende {
    display: flex;
    flex-wrap: wrap;
    /* PO 2026-08-07: am LISTEN-ENDE vor den Blätter-Nummern, RECHTSBÜNDIG
       (Korrektur am selben Tag — die mittige Erstfassung ist überholt). */
    justify-content: flex-end;
    gap: var(--raum-2) var(--raum-4);
    margin-block: var(--raum-6) 0;
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }
  .symbol-legende__paar { display: inline-flex; align-items: center; gap: var(--raum-1); }
  .symbol-legende__paar svg { flex: none; }
  /* Der Beispiel-Ring des EINEN Bausteins, auf Legende-Grösse gebracht (kein dritter Ring). */
  .symbol-legende .hoerring { inline-size: 1rem; block-size: 1rem; }
}

@layer seite {
  /* ── Block «Im Wortlaut» (Untertitel-Fundstellen; bis P7 «Im gesprochenen Wort») ──────────────────────────────
     ⚠ UMGEZOGEN 2026-09-12 aus seiten/suche.css. Der Block wanderte mit der /suche-Ablösung
     (2026-07-31) auf /predigten, sein Stylesheet blieb zurück — und seiten/suche.css wird seither
     von KEINER Seite mehr geladen (`seiten_css => 'suche'`: 0 Treffer im ganzen Repo). Sechs Wochen
     lang rendert der Block deshalb ungestylt; gefunden hat es messung-design-gegenproben g5b, der
     seit dem 2026-07-29 nicht mehr gelaufen war.
     Dieselbe Klasse wie SP13: «Trägerseite abgelöst ⇒ etwas stirbt still» — hier in CSS.
     Mitgezogen wurde NUR, was templates/predigten.php wirklich rendert; .treffer, .treffer__gruppe,
     .suche__*, .bereiche und .tipps* gehörten der abgelösten Seite und sind mit ihr entfallen. */
  .treffer__zeile {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    padding-block: var(--raum-4);
    border-block-start: var(--linie-breit) solid var(--linie);
  }
  .treffer__titel { font-size: var(--txt-gross); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .treffer__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .treffer__titel a:hover { text-decoration: underline; }
  .treffer__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);
  }
  .treffer__stelle {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--raum-3);
    align-items: baseline;
    padding: var(--raum-2) var(--raum-3);
    background: var(--flaeche-3);
    border-radius: var(--radius-s);
    color: var(--text-2);
    font-size: var(--txt-klein);
    text-decoration: none;
  }
  .treffer__stelle:hover { background: var(--flaeche-4); color: var(--text); }
  .treffer__marke { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .treffer__stellen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); margin-block-start: var(--raum-1); }
  @media (max-width: 40rem) {
    .treffer__stelle { grid-template-columns: 1fr; gap: var(--raum-1); }
  }
}

/* Suchfeld-Hinweis (PO 2026-09-13): Schrift/Farbe kommen aus der Komponenten-Klasse
   .hinweis-leise — hier NUR der Abstand zum Feld, damit die Regel nicht dupliziert wird. */
@layer seite {
  .suche__tipp { margin-block-start: var(--raum-1); margin-block-end: 0; }
}