/* =========================================================================
   seite-kontakt.css  --  Anordnung von /kontakt (Umbau R4, E9; kein eigener
   Entwurf): links Telefon, E-Mail, Adresse, Einzugsgebiet und Erreichbarkeit
   als Karte, rechts die Nachricht in einer Formular-Karte. Komponenten aus
   styles.css, nur Tokens aus theme.css.
   ========================================================================= */
/* einspaltig bis 64rem ohne Ueberbreite (styles.css .spalten setzt die Spalten erst ab 64rem) */
.kontakt__page { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .kontakt__page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kontakt__liste { gap: 1rem; margin-top: 1rem; }
.kontakt__liste li { align-items: center; color: var(--marine); }
.kontakt__liste .icon-kreis { width: 3rem; height: 3rem; }
.kontakt__label { display: block; color: var(--text-2); font-size: var(--fs-klein); }
.kontakt__telefon a { font: 800 var(--fs-h3)/1.3 var(--font-titel); }
.kontakt__offerte { margin-top: 1.5rem; }
.kontakt__zeiten { margin-top: 2rem; }
.kontakt__status { color: var(--text-2); font-size: var(--fs-klein); }
.kontakt__status--offen { color: var(--gruen); font-weight: 600; }
.kontakt__tabelle { width: 100%; margin-top: 0.75rem; border-collapse: collapse; font-size: var(--fs-klein); }
.kontakt__tabelle th, .kontakt__tabelle td { padding: 0.5rem 0; border-top: 1px solid var(--linie); font-weight: 400; text-align: left; }
.kontakt__tabelle td { color: var(--marine); text-align: right; }
.kontakt__tabelle .is-today th, .kontakt__tabelle .is-today td { color: var(--marine); font-weight: 700; }
.kontakt__tabelle .is-closed td { color: var(--text-2); }
.kontakt__heute { margin-left: 0.375rem; padding: 0.125rem 0.5rem; border-radius: var(--r-rund); background: var(--mint); color: var(--gruen-dunkel); font-size: var(--fs-mini); font-weight: 700; }
.kontakt__pflicht { margin: 0.375rem 0 1.25rem; }
.kontakt__karte .form-alert { margin-bottom: 1rem; }
.kontakt__versprechen { margin: 1.25rem 0 0.75rem; color: var(--text); font-size: var(--fs-klein); }
/* Pille «Steven Landolt, Ihr Ansprechpartner» am Handy einzeilig (Abnahme-Check 2026-11-01: bei 390 zweizeilig): engere
   Laufweite und Innenabstand, Schrift bis 11 px bei 360; DE 269 px, EN 280 px Text bei 360 (Platz 288) */
@media (max-width: 29.99rem) {
  .kopf .kicker--pille { padding-inline: 0.875rem; letter-spacing: 0.08em; font-size: min(var(--fs-kicker), 3.05vw); }
}

/* --- Kopf mit Foto (R6, Rida 2026-10-27 «die heros in desktop ansich mit passenden bildern»; page-head
       fotoNeben ohne side): am Handy unter dem Lead bis an die Kanten, ab 64rem rechts neben dem Text --- */
.kopf--foto-neben .kopf__foto { height: clamp(11rem, 48vw, 20rem); margin: 0 calc(-1 * var(--gutter)); }
.kopf--foto-neben + .kontakt { padding-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 64rem) {
  .kopf--foto-neben { padding-bottom: clamp(2rem, 4.5vw, 4rem); }
  .kopf--foto-neben + .kontakt { padding-top: 0; }
  .kopf--foto-neben .kopf__foto { height: auto; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: var(--r-gross); }
  .kopf--foto-neben .kopf__foto::after { content: none; }
  .kopf--foto-neben .kopf__foto img { position: absolute; inset: 0; }
}