/* ============================================================
   BayTM Relief-Karte — Frontend
   Marke: Royalblau #001F47 · Himmelblau #008ECF · Lichtblau #21B5EA · Eisblau #D3DDF2
   Schriften: MuseoSans / MuseoSlab (kommen aus dem Theme)
   ============================================================ */

.baytm-relief-karte {
	/* Relief-Farben: „Vereint“-Modus des Designs, heller Hintergrund */
	--rk-royalblue: #001F47;
	--rk-himmelblau: #008ECF;
	--rk-lichtblau: #21B5EA;
	--rk-face: #D3DDF2;              /* Deckflaeche (Eisblau) */
	--rk-side: #747A85;              /* Seitenwand: Eisblau, 45 % abgedunkelt */
	--rk-side-selected: #3A3D43;     /* dieselbe Wand bei Auswahl (= brightness .5) */
	--rk-hover: #A5B3CC;             /* Hover: Eisblau, 22 % Richtung Royalblau */
	--rk-active: #001F47;            /* Auswahl */
	--rk-shadow: rgba(0, 31, 71, 0.22);
	--rk-lift: -12px;                /* Hebung der gewaehlten Region */
	--rk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	margin: 40px 0;
	color: var(--rk-royalblue);
	font-family: MuseoSans, sans-serif;
	font-weight: 300;
}

@media (min-width: 1024px) {
	.baytm-relief-karte {
		margin-top: 128px;
		margin-bottom: 128px;
	}
}

.baytm-relief-karte *,
.baytm-relief-karte *::before,
.baytm-relief-karte *::after {
	box-sizing: border-box;
}

/* ── Container: entspricht den Theme-Breakpoints ────────────────── */
.rk-inner {
	max-width: 100%;
	margin: 0 auto;
	padding-inline: 1.5rem;
}

@media (min-width: 640px) {
	.rk-inner { max-width: 640px; padding-inline: 2rem; }
}
@media (min-width: 768px) {
	.rk-inner { max-width: 768px; padding-inline: 3rem; }
}
@media (min-width: 1024px) {
	.rk-inner { max-width: 1024px; padding-inline: 3rem; }
}
@media (min-width: 1280px) {
	.rk-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
	.rk-inner { max-width: 1511px; padding-inline: 0; }
}

/* ── Spaltenraster wie die Theme-Bloecke ────────────────────────────
   Das Theme kennt zwei Contentbreiten im `container > grid grid-cols-12 gap-6`:

   Standard  col-span-12 lg:col-start-3 lg:col-span-8
             (A02 WYSIWYG, A16 Akkordeon, T07 …) — 611 / 781 / 999 px

   Breit     col-span-12 lg:col-span-full xl:col-start-2 xl:col-span-10
             2xl:col-start-3 2xl:col-span-8
             (M09 Kataloge, C06 Karriere-Eintraege) — 928 / 983 / 999 px

   Hier ist die breite Variante gesetzt: Karte und Infospalte brauchen den
   Platz, ab 2xl laufen beide Breiten ohnehin zusammen. */
.rk-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Modulheadline: IMMER die Standard-Contentspalte — genau wie
   template-parts/blockIntro.php es fuer jeden Theme-Block tut, auch fuer
   Bloecke deren eigentlicher Inhalt (M09, C06 …) auf der breiten Spalte
   steht. Headline und Modul duerfen unterschiedlich breit sein. */
.rk-col-header {
	grid-column: span 12 / span 12;
	min-width: 0;
}

@media (min-width: 1024px) {
	.rk-col-header {
		grid-column: 3 / span 8;
	}
}

.rk-col-module {
	grid-column: span 12 / span 12;
	min-width: 0;
	/* Das Modul richtet sich nach seiner eigenen Breite, nicht nach dem
	   Viewport — es steht je nach Breakpoint auf 12 oder auf 8 Spalten. */
	container-type: inline-size;
}

/* < 1280px: volle zwoelf Spalten (col-span-12 / lg:col-span-full) */
@media (min-width: 1280px) {
	.rk-col-module {
		grid-column: 2 / span 10;
	}
}

@media (min-width: 1536px) {
	.rk-col-module {
		grid-column: 3 / span 8;
	}
}

/* ── Modulkopf ──────────────────────────────────────────────────────
   Abstand zum Modul wie in blockIntro.php: mb-6 lg:mb-20 (24px / 80px). */
.rk-header-grid {
	margin-bottom: 24px;
}

@media (min-width: 1024px) {
	.rk-header-grid { margin-bottom: 80px; }
}

.rk-intro p:last-child {
	margin-bottom: 0;
}

/* ── Modulrahmen ────────────────────────────────────────────────────
   Basis ist einspaltig (Karte oben, Infospalte darunter); die zweispaltige
   Ansicht schaltet sich per Container-Query zu, sobald das Modul selbst
   breit genug ist. */
.rk-module {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	background: transparent;
}

/* ── Kartenspalte ───────────────────────────────────────────────── */
.rk-map-col {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
}

.rk-hint {
	/* Im Fluss ueber der Karte statt absolut darueber: dadurch buendig mit der
	   Modulkante (und mit der Infobox rechts) und mit definiertem Abstand zur
	   Karte, statt knapp darueber zu kleben. */
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: MuseoSans, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--rk-royalblue);
}

/* Info-Icon aus dem Glossar-Feature (baytm-glossary-tooltip): weisser Kreis
   mit Kontur und „i" in currentColor. Dort skaliert es relativ zur Schrift
   (0.92em) — hier genauso, damit es zur Hinweiszeile passt. */
.rk-hint-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	color: var(--rk-royalblue);
}

.rk-stage {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 20px 8px;
}

.rk-svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 482 / 450;
	overflow: visible;
}

/* ── Relief ─────────────────────────────────────────────────────── */
.rk-shadow {
	fill: var(--rk-shadow);
}

.rk-wall {
	fill: var(--rk-side);
	transition: transform 0.28s var(--rk-ease), filter 0.22s ease;
}

.rk-region {
	cursor: pointer;
	transition: transform 0.28s var(--rk-ease);
}

.rk-face {
	fill: var(--rk-face);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity 0.28s ease;
}

.rk-face-hover,
.rk-face-accent {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.rk-face-hover { fill: var(--rk-hover); }
.rk-face-accent { fill: var(--rk-active); }

.rk-region.is-hover .rk-face-hover { opacity: 1; }
.rk-region.is-selected .rk-face-accent { opacity: 1; }

.rk-region.is-selected,
.rk-wall.is-selected {
	transform: translateY(var(--rk-lift));
}

.rk-wall.is-hover { filter: brightness(0.82); }
.rk-wall.is-selected { filter: brightness(0.5) saturate(1.1); }

/* ── Vordergrund-Kopie der gewaehlten Region ────────────────────────
   Deckungsgleich mit Wand + Deckflaeche, liegt dauerhaft am Ende der Szene
   (also ueber allen Nachbarflaechen) und wird nur ein-/ausgeblendet. Damit
   ist die angehobene Wand auch an schraegen Grenzen sichtbar, ohne dass zur
   Laufzeit im DOM umsortiert werden muss — ein Umbau wuerde die Transition
   der Hebung verwerfen und sie hart springen lassen. Siehe includes/relief.php. */
.rk-front {
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.28s var(--rk-ease);
}

.rk-front.is-selected {
	visibility: visible;
	transform: translateY(var(--rk-lift));
}

.rk-front-wall { fill: var(--rk-side-selected); }

.rk-front-face {
	fill: var(--rk-active);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Vortritt der Flaeche an den Nahtstellen: die Regionen beruehren sich an
   ihren Grenzen minimal, "erst alle Waende, dann alle Flaechen" (im
   Ruhezustand richtig — keine Nachbarwand verdeckt eine Nachbarflaeche)
   laesst dort sonst Nachbarflaechen in die angehobene Wand hineinragen. Die
   Flaeche ist Hover-/Pointer-Ziel, deshalb per z-index vor alle Geschwister
   (bewusst ohne DOM-Umsortierung — appendChild() auf das gerade gehoverte
   Element laesst Browser das nachfolgende mouseleave/pointerleave
   verschlucken). Die Wand ist dagegen kein Hover-Ziel und wird deshalb in
   assets/relief-karte-*.js per DOM-Umsortierung promotet — z-index hat sich
   dafuer nicht als zuverlaessig erwiesen. */
.rk-region.is-hover { z-index: 5; }
.rk-region.is-selected { z-index: 10; }

/* Tastaturfokus: sichtbare Kontur auf der Deckflaeche */
.rk-region:focus { outline: none; }
.rk-region:focus-visible .rk-face {
	stroke: var(--rk-active);
	stroke-width: 3;
}

/* ── Regionslabels ──────────────────────────────────────────────── */
.rk-labels {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.rk-label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.rk-label.is-placed { opacity: 1; }

.rk-label-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background-color: #fff;
	border: 1px solid rgba(0, 31, 71, 0.10);
	padding: 4px 10px;
	border-radius: 50px;
	font-family: MuseoSans, sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.005em;
	color: var(--rk-royalblue);
	box-shadow: 0 4px 16px rgba(0, 31, 71, 0.14);
	transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.rk-label.is-hover .rk-label-pill {
	background-color: var(--rk-royalblue);
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 31, 71, 0.22);
}

.rk-label.is-selected .rk-label-pill {
	background-color: #fff;
	color: var(--rk-royalblue);
	border-color: var(--rk-royalblue);
	border-width: 2px;
	box-shadow: 0 10px 26px rgba(0, 31, 71, 0.34);
}

/* ── Infospalte ─────────────────────────────────────────────────── */
/* Info-Box wie eine Teaser-Kachel: die Karten im Theme (teaserPost.php,
   loopPost.php) tragen ihre "Kachel"-Wirkung ueber die helle Eisblau-Flaeche
   bg-ice-20, nicht ueber einen staendigen Schatten — dort erscheint ein
   Schatten (.shadow-lg) nur beim Hover einer klickbaren Karte. Ein reiner
   Ruhezustand-Schatten ohne Farbflaeche wirkt deshalb wie ein Versehen, kein
   gestalterisches Mittel. Die Kartenspalte links bleibt bewusst rahmenlos. */
.rk-info {
	display: flex;
	flex-direction: column;
	background: rgb(246, 248, 252); /* bg-ice-20 */
	min-width: 0;
}

.rk-media {
	position: relative;
	flex: none;
	height: 200px;
	overflow: hidden;
	background: var(--rk-face);
}

/* Wrapper wird umgeschaltet (Bild + Bildnachweis gemeinsam) */
.rk-media-item {
	position: absolute;
	inset: 0;
	display: none;
}

.rk-media-item.is-active { display: block; }

.rk-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bildnachweis — Position/Farben wie im Theme (vgl. .right-4 .bottom-4
   .text-xs .text-white .p-2 .bg-royalblue-30 in assets/dist/css/main.css) */
.rk-media-caption {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-block;
	margin: 0;
	padding: 0.5rem;
	font-family: MuseoSans, sans-serif;
	font-size: 0.75rem;
	line-height: 1rem;
	color: #fff;
	background-color: rgba(0, 31, 71, 0.3);
}

/* Ohne Bild keine leere Flaeche */
.rk-media.is-empty { display: none; }

.rk-panels {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.rk-panel {
	display: none;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 24px 28px;
}

.rk-panel.is-active {
	display: flex;
	animation: rk-fade-in 0.35s ease both;
}

@keyframes rk-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.rk-panel-title {
	margin: 0;
	font-family: MuseoSlab, Georgia, serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: var(--rk-royalblue);
	/* Kein hyphens:auto — in der schmalen Infospalte trennt es sonst
	   „Bayern entde-cken“. Lange Regionsnamen brechen am Schraegstrich. */
	overflow-wrap: break-word;
}

.rk-panel-empty {
	margin: 16px 0 0;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--rk-royalblue);
	font-weight: 300;
}

.rk-panel-text {
	margin-top: 16px;
	max-width: 68ch;
	font-family: MuseoSans, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: var(--rk-royalblue);
}

.rk-panel-text > :first-child { margin-top: 0; }
.rk-panel-text > :last-child { margin-bottom: 0; }
.rk-panel-text p { margin: 0 0 0.75em; }

.rk-panel-text ul,
.rk-panel-text ol {
	margin: 0 0 0.75em;
	padding-left: 1.25em;
}

.rk-panel-text ul { list-style: disc; }
.rk-panel-text ol { list-style: decimal; }
.rk-panel-text li { margin-bottom: 0.35em; }
.rk-panel-text li:last-child { margin-bottom: 0; }
.rk-panel-text strong,
.rk-panel-text b { font-weight: 700; }
.rk-panel-text em,
.rk-panel-text i { font-style: italic; }

.rk-panel-text a {
	color: var(--rk-himmelblau);
	text-decoration: underline;
}

.rk-panel-text a:hover { color: var(--rk-royalblue); }

/* ── Buttons: Theme-Klassen .btn.primary / .btn.stroke.primary ───── */
.rk-panel-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: auto;
	padding-top: 26px;
}

.rk-cta { align-self: flex-start; max-width: 100%; }

/* .btn.stroke.primary ist im Theme fuer Fotohintergruende gedacht (Hero-
   Slider): der Hover hellt dort nur die Flaeche leicht auf, der Rand bleibt
   Lichtblau. Auf unserem weissen Kasten wirkt das kraftlos. Hier deshalb ein
   Hover wie bei .btn.primary/.primary-royal: komplettes Verdunkeln zu
   Royalblau statt nur der Flaeche. */
.baytm-relief-karte .btn.stroke.primary:hover {
	background-color: var(--rk-royalblue);
	border-color: var(--rk-royalblue);
	color: #fff;
}

/* ── Schriftgroessen: gleiche Stufen wie die uebrigen BayTM-Module ───
   Breakpoints und Sprungweiten analog baytm-flip-cards / Theme-Utilities. */
@media (min-width: 768px) {
	.rk-panel-title { font-size: 26px; }
}

@media (min-width: 1024px) {
	.rk-hint { font-size: 15px; }
	.rk-panel-title { font-size: 28px; }
	.rk-panel-text,
	.rk-panel-empty { font-size: 16px; }
}

@media (min-width: 1280px) {
	.rk-panel-title { font-size: 31px; }
	.rk-panel-text,
	.rk-panel-empty { font-size: 18px; }
}

/* ── Zweispaltig, sobald das Modul selbst breit genug ist ───────────
   Container-Query statt Media-Query: das Modul steht je nach Breakpoint auf
   12 oder auf 8 Theme-Spalten, seine Breite folgt also nicht dem Viewport.
   Ohne Container-Query-Support bleibt die gestapelte Basisansicht stehen. */
@container (min-width: 740px) {
	.rk-module {
		/* Etwas mehr Raum fuer die Infospalte als in der schmalen Variante —
		   die Modulueberschrift soll bei 31px nicht zweizeilig umbrechen. */
		grid-template-columns: minmax(0, 1fr) clamp(330px, 36%, 400px);
		/* Beide Spalten oben ausrichten statt auf gleiche Hoehe zu strecken:
		   die Karte behaelt so bei jedem Regionswechsel exakt dieselbe Groesse
		   und Position, nur die Infobox waechst mit ihrem Inhalt nach unten
		   (Kundenwunsch 2026-08-26: „Karte fixieren, nur die Laenge der
		   Informationskacheln nach unten flexibel"). */
		align-items: start;
	}

	.rk-stage {
		padding: 0 30px 8px;
	}

	.rk-media { height: 212px; }

	.rk-panel { padding: 32px 34px 34px; }

	/* In der schmalen Infospalte begrenzt die Spalte selbst die Zeilenlaenge. */
	.rk-panel-text,
	.rk-panel-empty { max-width: 40ch; }

	.rk-label-pill { font-size: 12.5px; padding: 5px 12px; }
}

/* ── Reduzierte Bewegung ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.baytm-relief-karte * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}