/*
 * Karte im Stil von e-bikes.de (karte.js): Kacheln von OpenStreetMap gedämpft in Graustufen, Händler als schräge
 * Schilder mit Nummer wie in der Liste (gewählt grün), eigener Standort als Punkt, Zoom-Knöpfe wie die übrigen Knöpfe.
 */
.eb-karte { position: absolute; inset: 0; overflow: hidden; background: #e9e9e6; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.eb-karte.ist-gezogen { cursor: grabbing; }
.eb-karte:focus-visible { box-shadow: inset 0 0 0 3px #0a7a08; }
/* Kacheln blenden beim Laden weich ein; beim Zoomen bleibt die vorige Stufe skaliert dahinter, bis die neue da ist. */
.eb-karte__kacheln { position: absolute; inset: 0; transform-origin: 0 0; filter: grayscale(1) sepia(.06) contrast(.9) brightness(1.07); }
.eb-karte__kachel { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; opacity: 0; pointer-events: none; transition: opacity .25s ease; -webkit-user-drag: none; }
.eb-karte__kachel.ist-da { opacity: 1; }
.eb-karte__marken { position: absolute; inset: 0; pointer-events: none; }

/* Händler: Schild über dem Punkt, darunter eine Spitze, die genau auf den Standort zeigt */
/* (min-height: 0 gegen die 44-px-Regel für Knöpfe auf dem Handy in eb.css; die Tippfläche gibt ::before am Schild) */
.eb-karte__marke { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.eb-karte__schild {
	position: absolute; left: 0; bottom: 8px; display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px;
	transform: translateX(-50%) skewX(-12deg); background: #141414; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); transition: background-color .12s;
}
.eb-karte__schild::before { content: ''; position: absolute; inset: -6px; }
.eb-karte__ziffer { display: block; transform: skewX(12deg); color: #fff; font: italic 900 16px/1 'Barlow', system-ui, sans-serif; }
.eb-karte__marke::after { content: ''; position: absolute; left: -6px; top: -9px; border: 6px solid transparent; border-top: 8px solid #141414; border-bottom: 0; }
.eb-karte__marke:hover .eb-karte__schild { background: #333; }
.eb-karte__marke:focus-visible { outline: none; }
.eb-karte__marke:focus-visible .eb-karte__schild { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0a7a08; }
.eb-karte__marke.ist-gewaehlt { z-index: 2; }
.eb-karte__marke.ist-gewaehlt .eb-karte__schild { min-width: 38px; height: 38px; background: #0ee90b; }
.eb-karte__marke.ist-gewaehlt .eb-karte__ziffer { font-size: 19px; }
.eb-karte__marke.ist-gewaehlt::after { border-top-color: #0ee90b; }

/* Eigener Standort */
.eb-karte__ich { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; background: #141414; box-shadow: 0 0 0 6px rgba(14, 233, 11, .35), 0 2px 6px rgba(0, 0, 0, .3); }

/* Zoom und Quelle */
.eb-karte__zoom { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.eb-karte__knopf {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #e2e2df; border-radius: 6px; background: #fff;
	color: #141414; font: 800 22px/1 'Barlow', system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.eb-karte__knopf:hover { border-color: #141414; }
@media (max-width: 640px) {
	.eb-karte__knopf { width: 44px; height: 44px; }
}
.eb-karte__quelle { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 3px 7px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: #5a5a57; font-size: 12px; text-decoration: none; }
.eb-karte__quelle:hover { color: #141414; }

/* Hinweis, wenn ein Finger die Seite statt der Karte bewegt */
.eb-karte__hinweis {
	position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; background: rgba(20, 20, 20, .5); color: #fff;
	font: italic 800 16px/1.25 'Barlow', system-ui, sans-serif; text-align: center; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.eb-karte__hinweis.ist-sichtbar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.eb-karte__kachel, .eb-karte__hinweis { transition: none; }
}