/* ==========================================================================
   Anfahrtskarte (Google Maps) -- Startseite, Kontakt, Probetraining
   ==========================================================================
   Gebaut aus den vorhandenen Bausteinen: .sk-band --sk-band--panel liefert
   Flaeche, Innenabstand und die Goldkante, .sk-eyebrow die Ueberzeile,
   .sk-btn --lg --block den primaeren Goldknopf (derselbe Verlauf wie
   "Termin buchen" im Kopf). Hier stehen nur die Regeln fuer die Box des
   Platzhalters/iframes, die Illustration darin und die Hinweiskarte.

   Alle Farben, Abstaende und Schriften kommen aus den Tokens in main.css.
   Keine eigenen Hex-Werte. Eigene Pixel nur fuer Markierung und KI-Marke
   (sie gehoeren zum Bild und skalieren nicht mit der Schrift) und fuer die
   Mindesthoehe der Box.
   ========================================================================== */

.sk-karte__adresse {
	font-family: var(--sk-font-heading);
	font-weight: 600;
	font-size: var(--sk-fs-base);
	color: var(--sk-color-heading);
}

/* Seitenverhaeltnis-Box: verhindert Layoutverschiebung unabhaengig davon, ob
   gerade der Platzhalter oder das iframe darin steckt. Keine festen
   600x450-Pixel -- die Breite ist immer 100 %, die Hoehe ergibt sich aus dem
   Verhaeltnis (ab 900 px 16:10, siehe unten). Unter 900 px gilt stattdessen
   eine Mindesthoehe aus Bildstreifen plus Hinweiskarte (siehe unten). */
.sk-karte__box {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 260px;
	overflow: hidden;
	background-color: var(--sk-color-panel);
	background-image:
		repeating-linear-gradient(
			-59deg,
			rgba(var(--sk-color-warm-rgb), 0.055) 0 1px,
			rgba(255, 255, 255, 0) 1px 13px
		),
		var(--sk-gradient-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

.sk-karte__box iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sk-karte__platzhalter {
	position: absolute;
	inset: 0;
}

/* --- Illustration ---------------------------------------------------------
   --sk-pin-x / --sk-pin-y (Lage der Schule in Prozent des Bildes, ohne
   Einheit, damit sie auch als Faktor taugen) setzt das Template am
   Platzhalter, zusammen mit dem Dateinamen -- siehe
   shouraki_karte_illustration(). */
.sk-karte__illu {
	position: relative;
	overflow: hidden;
	min-height: 0;
	container-type: size;
}

/* Bildebene: immer 16:9 und so gross, dass sie die Flaeche deckt (wie
   object-fit: cover). Sie wird so verschoben, dass der Punkt bei x % / y %
   des Bildes genau bei x % / y % der Flaeche liegt (wie object-position).
   Die Markierung liegt IN der Ebene und nutzt damit dieselben
   Bildkoordinaten -- sie bleibt bei jedem Zuschnitt auf der Schule. */
.sk-karte__ebene {
	--sk-ebene-b: max(100cqw, 100cqh * 16 / 9);
	--sk-ebene-h: max(100cqh, 100cqw * 9 / 16);
	position: absolute;
	left: calc((100cqw - var(--sk-ebene-b)) * var(--sk-pin-x) / 100);
	top: calc((100cqh - var(--sk-ebene-h)) * var(--sk-pin-y) / 100);
	width: var(--sk-ebene-b);
	height: var(--sk-ebene-h);
}

.sk-karte__bild {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Markierung: Goldpunkt mit Pulsring */
.sk-karte__pin {
	position: absolute;
	left: calc(var(--sk-pin-x) * 1%);
	top: calc(var(--sk-pin-y) * 1%);
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--sk-color-gold);
	box-shadow:
		0 0 0 3px rgba(var(--sk-color-dark-rgb), 0.9),
		0 0 18px 3px rgba(var(--sk-color-gold-rgb), 0.45);
}

.sk-karte__pin::before {
	content: "";
	position: absolute;
	inset: -3px;
	border: 2px solid rgba(var(--sk-color-gold-rgb), 0.75);
	border-radius: 50%;
	animation: sk-karte-puls 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes sk-karte-puls {
	0% {
		transform: scale(0.8);
		opacity: 0.9;
	}
	100% {
		transform: scale(3);
		opacity: 0;
	}
}

/* Schild rechts neben der Markierung: die Goldachse verlaeuft nordwestlich
   der Schule, darueber laege das goldene Schild auf der goldenen Linie. */
.sk-karte__pin-name {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	padding: 0.125rem 0.625rem;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-small);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sk-color-ink);
	background: var(--sk-color-gold);
	border-radius: var(--sk-radius);
	box-shadow: 0 4px 14px rgba(var(--sk-color-dark-rgb), 0.6);
}

.sk-karte__pin-name::after {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-right-color: var(--sk-color-gold);
}

/* Ortsnamen (derzeit nur Variante M): HTML-Text in der Bildebene, Lage aus
   --sk-ort-x / --sk-ort-y (Prozent des Bildes, setzt das Template je Ort,
   siehe shouraki_karte_illustration()). Gedaempfte Schrift mit dunklem Hof:
   auf den Linien lesbar, aber nie lauter als das goldene Schild der Schule.
   Die Namen liegen im DOM vor der Markierung, das Schild steht also oben. */
.sk-karte__ort {
	position: absolute;
	left: calc(var(--sk-ort-x) * 1%);
	top: calc(var(--sk-ort-y) * 1%);
	transform: translate(-50%, -50%);
	font-family: var(--sk-font-heading);
	font-size: clamp(0.6875rem, 0.55rem + 0.4cqw, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sk-color-text-muted);
	text-shadow:
		0 0 2px var(--sk-color-dark),
		0 0 6px var(--sk-color-dark),
		0 0 12px var(--sk-color-dark);
	pointer-events: none;
}

/* Stadtteil: steht frei in der Flaeche, etwas groesser und weiter gesperrt. */
.sk-karte__ort--flaeche {
	font-size: clamp(0.75rem, 0.6rem + 0.5cqw, 0.9375rem);
	letter-spacing: 0.24em;
}

/* Name eines Platzes: haengt knapp unter seinem Punkt im Bild. */
.sk-karte__ort--unter {
	transform: translate(-50%, 0.625rem);
}

/* Strassenschild: dunkles Feld mit feinem Rahmen statt Hof. */
.sk-karte__ort--schild {
	padding: 0.0625rem 0.4375rem;
	letter-spacing: 0.04em;
	color: var(--sk-color-text);
	background: var(--sk-color-dark);
	border: 1px solid var(--sk-color-text-dim);
	border-radius: var(--sk-radius);
	text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.sk-karte__pin::before {
		animation: none;
		transform: scale(1.8);
		opacity: 0.5;
	}
}

/* Kleinste Breite (Bildstreifen um 16rem, Handys um 260 px): Schild
   kleiner, damit es rechts neben der Markierung noch ins Bild passt. */
@container (max-width: 16rem) {
	.sk-karte__pin-name {
		left: calc(100% + 9px);
		padding: 0.0625rem 0.4375rem;
		font-size: 0.75rem;
	}
}

/* Flacher Bildstreifen: das Strassenschild ein Stueck tiefer, sonst rueckt
   es an das Schild der Schule heran. */
@container (max-height: 17.5rem) {
	.sk-karte__ort--schild {
		transform: translate(-50%, 0.3125rem);
	}
}

/* Schmaler Streifen: der Zuschnitt nimmt links viel vom Bild weg. Der
   Stadtteil rueckt dann hoechstens so weit nach links, dass er ganz sichtbar
   bleibt -- 3.25rem ist die halbe Breite des Namens, der Rest ist der
   linke Zuschnitt der Ebene (dieselbe Rechnung wie bei .sk-karte__ebene). */
@container (max-width: 24rem) {
	.sk-karte__ort--flaeche {
		left: max(var(--sk-ort-x) * 1%, (var(--sk-ebene-b) - 100cqw) * var(--sk-pin-x) / 100 + 3.25rem);
		letter-spacing: 0.16em;
	}
}

/* Noch schmaler: fuer das Strassenschild bleibt neben dem Schild der Schule
   kein Platz mehr, es entfaellt. */
@container (max-width: 19rem) {
	.sk-karte__ort--schild {
		display: none;
	}
}

/* KI-Kennzeichnung (Hausregel der Agentur, docs/ki-kennzeichnung/): oben
   rechts im Bildrahmen, ohne Hover lesbar, bleibt beim Zuschnitt stehen,
   weil sie an der Illustration haengt und nicht an der Bildebene. */
.sk-karte__ki {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem;
	border-radius: 999px;
	background: rgba(var(--sk-color-dark-rgb), 0.82);
	color: var(--sk-color-text);
	font-family: var(--sk-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.sk-karte__ki img {
	display: block;
	width: 20px;
	height: 20px;
}

/* Schmaler Bildstreifen (Handys unter etwa 340 px): oben rechts rueckte die
   Marke bis auf wenige Pixel an das Schild der Schule heran. Unten rechts
   liegt in beiden Varianten nur Strassennetz. */
@container (max-width: 18.99rem) {
	.sk-karte__ki {
		top: auto;
		bottom: 0.75rem;
	}
}

/* --- Hinweiskarte ---------------------------------------------------------
   Oben die Aufforderung, darunter der Pflichthinweis in Fliesstextgroesse,
   darunter der Knopf. "Sieh dir die interaktive Karte an" statt "Route und
   Umgebung ansehen": die Zeile beschreibt genau, was der Klick tut, und
   verwechselt sich nicht mit dem Link "Route in Google Maps oeffnen" unter
   der Box. */
.sk-karte__hinweiskarte {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-sm);
	padding: var(--sk-space-md);
	text-align: left;
}

.sk-karte__aufforderung {
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-h4);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--sk-color-heading);
}

.sk-karte__hinweis {
	margin: 0;
	font-size: var(--sk-fs-base);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text);
}

.sk-karte__hinweis a {
	color: var(--sk-color-gold);
}

/* Mindesthoehe 3.25rem (52 px) auch dort, wo die Schrift von --lg am
   kleinsten ist. Der Knopf ist ohnehin so breit wie die Karte, der seitliche
   Innenabstand von --lg (2.4em) wuerde nur den Text bei 260 px umbrechen.
   Hover und Fokus kommen unveraendert aus .sk-btn (hellerer Verlauf) und
   der globalen :focus-visible-Regel (Goldring). */
.sk-karte__knopf {
	min-height: 3.25rem;
	margin-top: var(--sk-space-2xs);
	padding-inline: 1em;
	white-space: normal;
}

.sk-karte__icon {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

.sk-karte__route {
	font-size: var(--sk-fs-small);
}

/* Handy und Tablet: Bildstreifen oben, Hinweiskarte darunter, als Grid im
   Fluss. Die Box braucht trotzdem eine feste Mindesthoehe: nach dem Klick
   leert karte-anfahrt.js die Box und haengt das iframe ein -- die Hoehe darf
   dabei nicht springen. Die Formel deckt Hinweiskarte plus Bildstreifen
   (mindestens halb so hoch wie die Box breit) plus 1rem Reserve, gemessen am
   2026-09-24 in 10-px-Schritten von 300 bis 899 px (Unterlagen in
   tmp-content/karte/illustration/bau/). Braucht die Karte doch mehr, etwa
   bei vergroesserter Schrift, waechst die Box mit, statt den Knopf
   abzuschneiden; der Bildstreifen nimmt immer den Rest. */
@media (max-width: 899.98px) {
	.sk-karte__box {
		display: grid;
		aspect-ratio: auto;
		min-height: max(calc(50vw + 17.25rem), 30.5rem);
	}

	.sk-karte__platzhalter {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(8rem, 1fr) auto;
	}

	.sk-karte__hinweiskarte {
		border-top: 1px solid var(--sk-color-border);
	}
}

@media (max-width: 29.99rem) {
	.sk-karte__hinweiskarte {
		padding: var(--sk-space-md) var(--sk-space-sm);
	}
}

/* Unter 300 px bricht der Hinweis in so viele Zeilen um, dass die Formel
   oben nicht mehr reicht (bei 260 px ist die Karte 375 px hoch). */
@media (max-width: 299.98px) {
	.sk-karte__box {
		min-height: 33rem;
	}
}

/* Desktop: Box 16:10 statt 16:9, damit unter der groesseren Hinweiskarte noch
   Bild bleibt (bei 900 px laege der Stadtteilname von Variante M sonst unter
   der Karte). Das Bild fuellt die Box, Hinweiskarte oben links. Ihre Breite
   endet immer 3rem vor der Markierung (die Ebene ist so verschoben, dass die
   Markierung bei jedem Zuschnitt bei x % der Box steht), hoechstens 28rem --
   so verdeckt sie weder Markierung noch Schild, bei keiner Breite. Die Hoehe
   ist gedeckelt: bei stark vergroesserter Schrift rollt die Karte, statt den
   Knopf abzuschneiden. */
@media (min-width: 900px) {
	.sk-karte__box {
		aspect-ratio: 16 / 10;
	}

	.sk-karte__illu {
		position: absolute;
		inset: 0;
	}

	.sk-karte__hinweiskarte {
		position: absolute;
		top: var(--sk-space-md);
		left: var(--sk-space-md);
		width: min(28rem, calc(var(--sk-pin-x) * 1% - var(--sk-space-md) - 3rem));
		max-height: calc(100% - 2 * var(--sk-space-md));
		overflow-y: auto;
		background: rgba(var(--sk-color-dark-rgb), 0.94);
		border: 1px solid var(--sk-color-border);
		border-left: 2px solid var(--sk-color-gold);
		border-radius: var(--sk-radius);
		box-shadow: 0 12px 32px rgba(var(--sk-color-dark-rgb), 0.55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}