/* =============================================================================
   HDM Standort
   ============================================================================= */
.hdm-so {
	--so-s-akzent:  #0A55F0;
	--so-s-akzent2: #2EA7FF;
	--so-s-ink:     #06162F;
	--so-s-ink2:    rgba(6, 22, 47, 0.66);
	--so-s-grund:   #F4F8FD;
	--so-s-karte:   #ffffff;
	--so-s-rand:    rgba(6, 22, 47, 0.08);
	--so-s-map:     #E7F0FB;
	--so-s-linie:   rgba(10, 85, 240, 0.35);
	--_akzent:  var(--so-akzent, var(--so-s-akzent));
	--_akzent2: var(--so-s-akzent2);
	--_ink:     var(--so-ink, var(--so-s-ink));
	--_ink2:    var(--so-s-ink2);
	--_grund:   var(--so-grund, var(--so-s-grund));
	--_pad:     var(--so-pad-y, 88px);
	position: relative;
	background: var(--_grund);
	color: var(--_ink);
	padding: var(--_pad) 0;
	overflow: hidden;
}
.hdm-so--dunkel {
	--so-s-ink:   #ffffff;
	--so-s-ink2:  rgba(255, 255, 255, 0.7);
	--so-s-grund: #0B1F3F;
	--so-s-karte: rgba(255, 255, 255, 0.06);
	--so-s-rand:  rgba(255, 255, 255, 0.12);
	--so-s-map:   rgba(255, 255, 255, 0.05);
	--so-s-linie: rgba(127, 178, 255, 0.5);
	--so-s-akzent:#7FB2FF;
}
.hdm-so__wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.hdm-so__kopf { max-width: 720px; margin: 0 0 40px; }
.hdm-so__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--_akzent); }
.hdm-so__eyebrow span { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--_akzent), var(--_akzent2)); }
.hdm-so .hdm-so__titel.hdm-so__titel { margin: 0 0 14px; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; text-transform: none; color: var(--_ink); }
.hdm-so__titel em { font-style: normal; background: linear-gradient(92deg, var(--_akzent), var(--_akzent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hdm-so__lead { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--_ink2); }

.hdm-so__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: stretch; }
.hdm-so--karte-rechts .hdm-so__karte { order: 2; }

/* Karte */
.hdm-so__karte {
	position: relative;
	min-height: 420px;
	border-radius: 28px;
	overflow: hidden;
	border: 1px solid var(--so-s-rand);
	background: var(--so-s-map);
	box-shadow: 0 30px 70px rgba(6, 22, 47, 0.1);
}
.hdm-so__karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hdm-so__map {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(46, 167, 255, 0.16), transparent 55%),
		repeating-linear-gradient(0deg, transparent 0 39px, rgba(6, 22, 47, 0.05) 39px 40px),
		repeating-linear-gradient(90deg, transparent 0 39px, rgba(6, 22, 47, 0.05) 39px 40px);
}
.hdm-so--dunkel .hdm-so__map { background: radial-gradient(circle at 50% 50%, rgba(127, 178, 255, 0.16), transparent 55%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px); }
.hdm-so__strassen { position: absolute; inset: 0; width: 100%; height: 100%; }
.hdm-so__strassen path { fill: none; stroke-linecap: round; }
.hdm-so__a6 { stroke: var(--so-s-linie); stroke-width: 2.2; stroke-dasharray: 300; stroke-dashoffset: 300; animation: so-zeichnen 2.4s ease-out forwards; }
.hdm-so__b  { stroke: var(--so-s-linie); stroke-width: 1.2; opacity: 0.7; stroke-dasharray: 300; stroke-dashoffset: 300; animation: so-zeichnen 2.4s 0.4s ease-out forwards; }
.hdm-so__c  { stroke: var(--so-s-linie); stroke-width: 0.8; opacity: 0.5; stroke-dasharray: 300; stroke-dashoffset: 300; animation: so-zeichnen 2.4s 0.8s ease-out forwards; }
@keyframes so-zeichnen { to { stroke-dashoffset: 0; } }
.hdm-so__ort {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.78rem; font-weight: 600; color: var(--_ink2);
	white-space: nowrap;
}
.hdm-so__ort i { width: 7px; height: 7px; border-radius: 50%; background: var(--_ink2); opacity: 0.6; }
.hdm-so__pin {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: grid; place-items: center;
}
.hdm-so__pin b {
	position: relative; z-index: 2;
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: linear-gradient(135deg, var(--_akzent), var(--_akzent2));
	color: #fff;
	box-shadow: 0 12px 28px rgba(10, 85, 240, 0.35);
	animation: so-schweben 3s ease-in-out infinite;
}
.hdm-so__pin b svg { width: 26px; height: 26px; }
.hdm-so__pin em {
	position: absolute; top: 100%; margin-top: 10px;
	padding: 6px 12px; border-radius: 999px;
	font-style: normal; font-size: 0.82rem; font-weight: 700;
	background: var(--so-s-karte); color: var(--_ink);
	border: 1px solid var(--so-s-rand);
	box-shadow: 0 8px 20px rgba(6, 22, 47, 0.12);
	white-space: nowrap;
}
.hdm-so__ring {
	position: absolute; width: 52px; height: 52px; border-radius: 50%;
	border: 2px solid var(--_akzent2);
	animation: so-ring 2.6s ease-out infinite;
}
.hdm-so__ring--2 { animation-delay: 1.3s; }
@keyframes so-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes so-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Karten */
.hdm-so__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.hdm-so__k {
	position: relative;
	padding: 24px;
	border-radius: 22px;
	background: var(--so-s-karte);
	border: 1px solid var(--so-s-rand);
	box-shadow: 0 14px 34px rgba(6, 22, 47, 0.06);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
.hdm-so__k:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(10, 85, 240, 0.12); }
.hdm-so__k--breit { grid-column: 1 / -1; }
.hdm-so__k-i {
	display: grid; place-items: center;
	width: 44px; height: 44px; margin: 0 0 14px;
	border-radius: 13px;
	background: rgba(10, 85, 240, 0.08);
	color: var(--_akzent);
}
.hdm-so--dunkel .hdm-so__k-i { background: rgba(255, 255, 255, 0.08); }
.hdm-so__k-i svg { width: 22px; height: 22px; }
.hdm-so__k h3 { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--_ink2); }
.hdm-so__k p { margin: 0; line-height: 1.55; color: var(--_ink); }
.hdm-so__k ul { margin: 0; padding: 0; list-style: none; }
.hdm-so__k li { padding: 2px 0; font-weight: 600; }
.hdm-so__k-sub { margin-top: 8px !important; font-size: 0.86rem; color: var(--_ink2) !important; }
.hdm-so__k-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px !important; }
.hdm-so__k-links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--_akzent); text-decoration: none; }
.hdm-so__k-links a:hover { text-decoration: underline; }
.hdm-so__k-links svg { width: 16px; height: 16px; }
.hdm-so__haken li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; padding: 4px 0; }
.hdm-so__haken svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #16A34A; }
.hdm-so__knopf {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 16px;
	padding: 13px 22px; border-radius: 999px;
	background: linear-gradient(135deg, var(--_akzent), var(--_akzent2));
	color: #fff; font-weight: 700; text-decoration: none;
	box-shadow: 0 12px 26px rgba(10, 85, 240, 0.25);
	transition: transform 0.25s, box-shadow 0.25s;
}
.hdm-so__knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(10, 85, 240, 0.35); color: #fff; }
.hdm-so__knopf svg { width: 18px; height: 18px; }

/* Einblenden (gemeinsam mit dem Karten-Raster) */
.hdm-kr__el { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--kr-d, 0ms); }
.is-in .hdm-kr__el { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hdm-so__ring, .hdm-so__pin b, .hdm-so__strassen path { animation: none; stroke-dashoffset: 0; }
	.hdm-kr__el { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
	.hdm-so__raster { grid-template-columns: 1fr; }
	.hdm-so--karte-rechts .hdm-so__karte { order: 0; }
	.hdm-so__karte { min-height: 320px; }
}
@media (max-width: 767px) {
	.hdm-so { --_pad: var(--so-pad-y, 56px); }
	.hdm-so__wrap { padding: 0 20px; }
	.hdm-so__karten { grid-template-columns: 1fr; }
	.hdm-so__karte { min-height: 280px; }
	.hdm-so__k { padding: 20px; }
}

/* 3.9.0: Karte führt zur Routenplanung, Bewegung bewusst ruhig (nur transform und opacity) */
.hdm-so a.hdm-so__karte--link { display: block; position: relative; text-decoration: none !important; color: inherit; cursor: pointer; }
.hdm-so__karte--link .hdm-so__map, .hdm-so__karte--link img { transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); transform-origin: 50% 50%; will-change: transform; }
.hdm-so__karte--link:hover .hdm-so__map, .hdm-so__karte--link:hover img, .hdm-so__karte--link:focus-visible .hdm-so__map { transform: scale(1.04); }
.hdm-so__route { position: absolute; left: 50%; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: #0A55F0; color: #fff; font-weight: 700; font-size: 0.95rem; white-space: nowrap; box-shadow: 0 14px 30px -16px rgba(10, 85, 240, 0.7); opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hdm-so__route svg { width: 17px; height: 17px; }
.hdm-so__karte--link:hover .hdm-so__route, .hdm-so__karte--link:focus-visible .hdm-so__route { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .hdm-so__route { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .hdm-so__karte--link .hdm-so__map, .hdm-so__karte--link img, .hdm-so__route { transition: none; } }

/* Kartenfilm „Anflug“ statt gezeichneter Karte (4.6.0, AP 22). Füllt die Kachel wie das Bild; Rundung und Rahmen bleiben. */
.hdm-so__karte .hdm-so__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hdm-so__karte:has(.hdm-so__film) { position: relative; overflow: hidden; }
.hdm-so__karte .hdm-so__film { object-position: 50% 100%; } /* unten rechts steht „© OpenStreetMap-Mitwirkende“: nie abschneiden */
@media (max-width: 900px) { .hdm-so__karte:has(.hdm-so__film) { min-height: 0; aspect-ratio: 1200 / 1320; } }