/* ===========================================================================
   SEITE: THEMEN (S05) — Design-v5-Fassung (E3, NACHTRAG-EIN-KATALOG §9).
   Destilliert aus uebergabe-claude-design-4/EXTRAS/prototyp/css/seite-themen.css
   (Abgabe-Stand 2026-07-28, Quell-md5 672e4650ba3453168495afb3965e8f53) — unveraendert uebernommen;
   OP-Ergaenzungen stehen, falls noetig, in einem markierten Block am Ende.
   =========================================================================== */
/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: THEMEN
   =========================================================================== */

@layer seite {

  .themen__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); padding-block: var(--raum-6) var(--raum-5); }
  .themen__pfad { color: var(--text-3); font-size: var(--txt-etikett); }
  .themen__pfad a { color: inherit; }
  /* 90ch statt 56ch (PO 2026-08-04, gleiche Breite wie /neu): die Einleitung soll den Behälter
     füllen statt einspaltig zu wirken — admin-editierbar (Länge unbekannt) ⇒ gedeckelt, nie frei. */
  .themen__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(90ch, 100%); }

  .themen__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--raum-4);
    padding-block-end: var(--raum-6);
  }

  .themenkarte {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: var(--raum-2);
    padding: var(--raum-5);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
  }
  .themenkarte:hover { border-color: var(--marke); background: var(--flaeche-3); color: var(--text); }

  .themenkarte__zahl {
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    color: var(--text-3);
  }
  .themenkarte__titel { font-size: var(--txt-t4); }
  .themenkarte__text { color: var(--text-3); font-size: var(--txt-klein); }
  .themenkarte__formate { margin-block-start: var(--raum-3); }

  .themen__band {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    padding-block: var(--raum-4) var(--raum-6);
  }
}