/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: VISION
   Kachel-Layout (PO 2026-08-05, Screenshot-Vorlage — löst die E5-Lesespalte
   ab): Zweispalter-Raster aus Kacheln mit Icon-Chip, Versalien-Überzeile,
   Titel und Kurztext; darüber das Leitwort, darunter die getönte
   Spenden-Karte. Die Kachel-Klassen kommen aus dem admin-editierbaren
   Textkörper (rechtstext 'vision' — Seed in module/rechtstext.php); wer hier
   eine Klasse umbenennt, ändert einen REDAKTIONS-Vertrag, kein Template.
   =========================================================================== */

@layer seite {

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

  /* Breite Spalte fürs Zweispalter-Raster (die E5-Lesespalte war 46 rem —
     zwei Kacheln nebeneinander brauchen Luft, Abnahme-Punkt 1280). */
  .vision__spalte {
    max-inline-size: min(64rem, 100%);
    margin-inline: auto;
    padding-block: var(--raum-5) var(--raum-8);
  }

  .vision__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  /* Einleitung (Seitentexte-Registry, PO 2026-08-04) — 90ch-Deckel wie /neu, /themen,
     /sprecher, /bibel: admin-editierbar (Länge unbekannt) ⇒ gedeckelt, nie frei. */
  .vision__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(90ch, 100%); }

  /* Leitwort: strukturierter Seitentexte-Block (PO 2026-08-05 — kein Body-Inhalt
     mehr); bleibt bewusst auf Lesespalten-Breite, das Raster darunter läuft voll. */
  .leitwort {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-4);
    margin-block: var(--raum-6) var(--raum-7);
    padding-inline-start: var(--raum-5);
    border-inline-start: 3px solid var(--marke);
    max-inline-size: min(46rem, 100%);
  }
  .leitwort__text {
    font-size: var(--txt-t3);
    line-height: 1.4;
    letter-spacing: var(--sperrung-titel);
    text-wrap: pretty;
  }
  .leitwort__quelle {
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
  }
  .leitwort__quelle a { color: var(--marke); }

  /* Einführungs-Absatz unter dem Leitwort (PO 2026-08-05): freier, formatierbarer
     Redaktions-Text als ERSTER Block des HTML-Körpers — bewusst OHNE Breiten-Deckel,
     er läuft über die volle Breite der beiden Kachel-Spalten (PO-Vorgabe). */
  .vision-einfuehrung {
    font-size: var(--txt-gross);
    color: var(--text-2);
    text-wrap: pretty;
  }

  /* --- Kachel-Raster (Klassen = Redaktions-Vertrag, s. Kopf-Kommentar) ---- */
  .vision-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--raum-6) var(--raum-7);
    margin-block-start: var(--raum-7);
  }
  .vision-kachel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--raum-4);
    align-items: start;
  }
  .vision-kachel__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }
  .vision-kachel__ueber {
    color: var(--text-3);
    font-size: var(--txt-etikett);
    letter-spacing: var(--sperrung-etikett);
    text-transform: uppercase;
  }
  .vision-kachel h2 { font-size: var(--txt-gross); letter-spacing: -0.005em; }
  .vision-kachel p { color: var(--text-2); text-wrap: pretty; }
  .vision-kachel a { color: var(--marke); }

  /* Icon-Chip: seit PO 2026-08-05 KOMPONENTE (.ikon-chip, komponenten.css OP-Block —
     zweiter Nutzer sind die Kontakt-Seitenkarten); die .vision-chip-Klassen laufen dort
     als Gruppen-Selektor mit (Redaktions-Vertrag im Seed-HTML). Hier KEINE Chip-Regeln. */

  /* --- Spenden-Karte (strukturierter Block, Knopf-Ziele fest) ------------- */
  .vision-spende {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--raum-5);
    margin-block-start: var(--raum-8);
    padding: var(--raum-6);
    border-radius: var(--radius-l);
    background: color-mix(in oklab, var(--marke) 10%, var(--flaeche-2));
  }
  .vision-spende__text { flex: 1 1 24rem; display: grid; gap: var(--raum-2); }
  .vision-spende__text h2 { font-size: var(--txt-t4); }
  .vision-spende__text p { color: var(--text-2); }
  .vision-spende__aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-3); }

  /* Der Kurzvermerk steht IM Textkörper (F6) — hier nur der Abstand nach dem Raster. */
  .vision__spalte .bibel-vermerk { margin-block-start: var(--raum-6); }

  @media (max-width: 48rem) {
    .vision-raster { grid-template-columns: minmax(0, 1fr); gap: var(--raum-6); }
  }
  @media (max-width: 34rem) {
    .leitwort { padding-inline-start: var(--raum-4); }
    .leitwort__text { font-size: var(--txt-t4); }
    .vision-spende { padding: var(--raum-5); }
  }
}