/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: KONTAKT S28 (Design-v5, E6)
   Rest-Strecke ohne Abgabe-Prototyp — Randspalten-Grid der E5-Familie.
   Formular-Marker (7 Kategorien, honigtopf, email-schutz) sind Messverträge
   (verify-meldung M01, verify-emailschutz) — Klassen hier nur Optik.
   =========================================================================== */
@layer seite {
  /* Mittig ausrichten (PO 2026-08-05): Kopf, Meldung und die zwei Spalten laufen als
     zentrierter Block statt über die volle Behälter-Breite. Die Selektoren gelten
     seitenlokal — dieses CSS lädt NUR auf /kontakt. */
  .seiten-kopf, .meldung, .kontakt-raster {
    max-inline-size: min(64rem, 100%);
    margin-inline: auto;
  }
  .kontakt-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-8);
  }
  /* Rechenfrage-Captcha: kurzes Zahlenfeld (PO 2026-08-05) */
  .kontakt-form__rechen { max-inline-size: 8rem; }
  /* Senden-Pille mittig (PO 2026-08-05) */
  .kontakt-form__senden { display: flex; justify-content: center; margin-block-start: var(--raum-3); }
  .kontakt-form { display: grid; gap: var(--raum-2); }
  .kontakt-form label { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); margin-block-start: var(--raum-2); }
  .kontakt-form textarea { resize: vertical; }
  .hinweis-leise { color: var(--text-3); font-size: var(--txt-etikett); }
  .hinweis-leise a { color: var(--marke); }
  .seitenspalte { display: grid; gap: var(--raum-4); }
  .spalten-karte { display: grid; gap: var(--raum-2); font-size: var(--txt-klein); color: var(--text-2); }
  .spalten-karte h2 { color: var(--text); }
  .spalten-karte--tint { background: var(--flaeche-4); }
  @media (max-width: 60rem) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } }
}