/* =========================================================
   Seite „Kontakt“ (/kontakt/) – nur Klassen mit Präfix .kontakt-,
   Farben, Schriftgrößen, Radien und Schatten ausschließlich über die Tokens aus theme.css.
   Mobile-first, Breakpoints 600 / 900 / 1100.
   ========================================================= */

/* ---------- 2. Formular und Kontaktdaten ---------- */
.kontakt-raster { display: grid; grid-template-columns: 1fr; gap: 48px; }
.kontakt-raster > * { min-width: 0; }

/* Rechte Spalte: hellgraue Fläche, darauf die weiße Karte mit den Kontaktdaten und die Öffnungszeiten */
.kontakt-seite { background: var(--hellgrau); border-radius: var(--radius); padding: 20px; }
.kontakt-seite .karte { box-shadow: none; padding: 24px; margin-bottom: 24px; }
.kontakt-seite .karte > :last-child { margin-bottom: 0; }
.kontakt-daten-titel { font-size: var(--schrift-zwischen); margin-bottom: 16px; }
.kontakt-adresse { font-style: normal; line-height: 1.6; margin-bottom: 16px; }
.kontakt-daten-telefon, .kontakt-daten-email { margin: 0; }
.kontakt-telefon { font-size: var(--schrift-zwischen); }
.kontakt-telefon .icon { width: 26px; height: 26px; }
.kontakt-email { overflow-wrap: anywhere; }
.kontakt-hinweise { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--grau-linie); }
.kontakt-hinweise li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; color: var(--grau-text); font-size: var(--schrift-klein); }
.kontakt-hinweise li:last-child { margin-bottom: 0; }
.kontakt-hinweise .icon { width: 20px; height: 20px; margin-top: 0.15em; color: var(--orange); }

/* Öffnungszeiten (Baustein der Verwaltung) in der Seitenspalte: H2 in Zwischengröße, Tabelle volle Breite */
.kontakt-zeiten { padding: 4px 4px 0; scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.kontakt-zeiten .zeiten-titel { font-size: var(--schrift-zwischen); margin-bottom: 12px; }
.kontakt-zeiten .zeiten { max-width: none; font-size: var(--schrift-fliess); }
.kontakt-zeiten .zeiten-hinweis { max-width: none; }

@media (min-width: 600px) {
	.kontakt-seite { padding: 24px; }
	.kontakt-seite .karte { padding: 28px; }
}
@media (min-width: 900px) {
	.kontakt-raster { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
}
@media (min-width: 1100px) {
	.kontakt-raster { gap: 72px; }
	.kontakt-seite { padding: 28px; }
}

/* ---------- 3. Anfahrt ---------- */
.kontakt-anfahrt { scroll-margin-top: var(--kopf-hoehe); }
.kontakt-anfahrt-innen { display: grid; grid-template-columns: 1fr; gap: 32px; padding-inline: var(--rand); }
.kontakt-anfahrt-innen > * { min-width: 0; }
.kontakt-anfahrt-text { max-width: 42rem; }
.kontakt-anfahrt-text p:not(.kontakt-anfahrt-aktion) { color: var(--grau-text); }
.kontakt-anfahrt-aktion { margin: 28px 0 0; }
.kontakt-anfahrt-aktion .button .icon { width: 18px; height: 18px; }

/* Zwei-Klick-Karte: hellgraue Fläche mit Hinweis und Schalter, erst nach dem Öffnen die Karte */
.kontakt-maps {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 320px; padding: 32px 24px;
	background: var(--hellgrau); border-radius: var(--radius);
	text-align: center;
}
.kontakt-maps-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--weiss); color: var(--orange-tief); }
.kontakt-maps-icon .icon { width: 28px; height: 28px; }
.kontakt-maps-hinweis { max-width: 30rem; margin: 0 0 20px; color: var(--grau-text); font-size: var(--schrift-klein); }
.kontakt-maps-hinweis a { color: var(--orange-dunkel); } /* 6,0:1 auf Hellgrau */
.kontakt-maps--leer .kontakt-maps-hinweis { margin: 0; color: var(--anthrazit); font-size: var(--schrift-fliess); }
.kontakt-maps-details { width: 100%; } /* bewusst Blocklayout: display:flex ließe Chromes ::details-content auf Inhaltsbreite schrumpfen */
.kontakt-maps-details > summary { list-style: none; }
.kontakt-maps-details > summary::-webkit-details-marker { display: none; }
.kontakt-maps-details > summary::marker { content: ''; }
.kontakt-maps-details > summary { background: var(--weiss); } /* leiser Button bleibt weiß, auch auf Hellgrau */
.kontakt-maps-details > summary:hover { background: var(--anthrazit); }
.kontakt-maps-schliessen { display: none; }
.kontakt-maps-details[open] > summary .kontakt-maps-laden { display: none; }
.kontakt-maps-details[open] > summary .kontakt-maps-schliessen { display: inline; }
.kontakt-maps-rahmen { width: 100%; margin-top: 24px; }
.kontakt-maps-iframe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 480px; border: 0; border-radius: var(--radius); background: var(--weiss); }
/* Ohne src (kein JS, oder theme.js überführt data-src noch nicht) bleibt das leere iframe unsichtbar */
.kontakt-maps-iframe:not([src]) { display: none; }
.kontakt-maps-ersatz { margin: 12px 0 0; font-size: var(--schrift-klein); }
.kontakt-maps-ersatz a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ziel); color: var(--anthrazit); font-family: var(--schrift-titel); font-weight: 600; text-decoration: none; }
.kontakt-maps-ersatz a:hover { color: var(--orange-dunkel); text-decoration: underline; }
.kontakt-maps-ersatz .icon { width: 20px; height: 20px; color: var(--orange); }
.kontakt-maps-ersatz .icon-extern { width: 16px; height: 16px; color: var(--grau-text); }
/* Karte geladen (iframe hat src): Hinweis kompakt, Icon weg, Karte bekommt den Platz */
.kontakt-maps:has(.kontakt-maps-iframe[src]) { justify-content: flex-start; padding: 20px; }
.kontakt-maps:has(.kontakt-maps-iframe[src]) .kontakt-maps-icon { display: none; }
.kontakt-maps:has(.kontakt-maps-iframe[src]) .kontakt-maps-hinweis { margin-bottom: 12px; }

@media (min-width: 600px) {
	.kontakt-maps { min-height: 380px; padding: 40px 32px; }
}
@media (min-width: 900px) {
	/*
	 * Vier Spalten: Rand | Text | Karte | Rand. Die Randspalten sind so breit wie der Abstand des Containers
	 * zum Viewport (mindestens der Seitenrand), Text und Karte teilen sich die Containerbreite –
	 * die Karte läuft zusätzlich über die rechte Randspalte bis an die Bildschirmkante (verlässt den Container).
	 */
	.kontakt-anfahrt-innen {
		padding-inline: 0; column-gap: 0;
		grid-template-columns:
			minmax(var(--rand), calc((100% - var(--container)) / 2))
			minmax(0, 1fr)
			minmax(0, 1fr)
			minmax(var(--rand), calc((100% - var(--container)) / 2));
		align-items: stretch;
	}
	.kontakt-anfahrt-text { grid-column: 2; padding-right: 48px; align-self: start; padding-top: 8px; }
	.kontakt-maps { grid-column: 3 / 5; min-height: 440px; border-radius: var(--radius) 0 0 var(--radius); }
	.kontakt-maps-iframe { max-height: 520px; }
}
@media (min-width: 1100px) {
	.kontakt-anfahrt-innen { grid-template-columns:
		minmax(var(--rand), calc((100% - var(--container)) / 2))
		minmax(0, 5fr)
		minmax(0, 7fr)
		minmax(var(--rand), calc((100% - var(--container)) / 2)); }
	.kontakt-anfahrt-text { padding-right: 64px; }
	.kontakt-maps { min-height: 440px; }
}

/* ---------- 4. Ihr erster Besuch: Schritt-Komponente aus theme.css (.schritte/.schritt), wie auf /rehasport/ ---------- */
.kontakt-tipp { display: flex; align-items: flex-start; gap: 12px; max-width: 42rem; margin: 40px 0 0; padding: 16px 20px; background: var(--weiss); border-radius: var(--radius-button); }
.kontakt-tipp .icon { width: 22px; height: 22px; flex: none; margin-top: 0.15em; color: var(--orange); }
.kontakt-tipp strong { font-family: var(--schrift-titel); font-weight: 600; }
@media (min-width: 900px) {
	.kontakt-tipp { margin-top: 56px; }
}

/* ---------- 5. Kontaktzeile ---------- */
.kontakt-zeile { border-top: 1px solid var(--grau-linie); }
.kontakt-zeile-innen { display: grid; grid-template-columns: 1fr; gap: 24px; }
.kontakt-zeile-punkt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* Beschriftung ohne Versalien – Versalien bleiben den Kickern vorbehalten */
.kontakt-zeile-label { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); color: var(--grau-text); }
.kontakt-zeile-link { font-size: var(--schrift-sektion); font-weight: 700; line-height: var(--zeile-titel); letter-spacing: -0.01em; gap: 14px; max-width: 100%; overflow-wrap: anywhere; }
.kontakt-zeile-link .icon { width: 0.9em; height: 0.9em; }
.kontakt-zeile-link:hover { text-decoration-thickness: 3px; }
/* „info@viva-ma.de“ passt in 40 px weder in 280 px (unter 360 px) noch in die 900–1099-px-Spalte – dort eine Stufe kleiner */
@media (max-width: 359.98px), (min-width: 900px) and (max-width: 1099.98px) {
	.kontakt-zeile-link { font-size: var(--schrift-zwischen); }
}

@media (min-width: 900px) {
	.kontakt-zeile-innen { grid-template-columns: 1fr 1fr; gap: 48px; }
	.kontakt-zeile-punkt:last-child { padding-left: 48px; border-left: 1px solid var(--grau-linie); }
}

/* ---------- Druck ---------- */
@media print {
	.kontakt-seite { background: #fff; padding: 0; }
	.kontakt-maps { display: none; }
	.kontakt-anfahrt-innen { display: block; max-width: calc(var(--container) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
	.schritte { display: block; }
	.schritt { margin-bottom: 12px; }
}