/* ==========================================================================
   Anfahrtsskizze: Marker und Kartenhinweis
   --------------------------------------------------------------------------
   Von BEIDEN Fassungen der Website genutzt (moderne Fassung und bisheriges
   Erscheinungsbild). Deshalb eine eigene Datei statt zweier Kopien.

   Beide Elemente liegen als Overlay über dem Kartenbild und sind in Prozent
   positioniert – so folgen sie dem Bild in jeder Größe, auch in der
   vergrößerten Ansicht.

   Die Farben kommen aus --karte-akzent, damit die Datei nicht von den
   Variablennamen einer der beiden Fassungen abhängt.
   ========================================================================== */

:root {
    --karte-akzent: #0f9bbc;
    --karte-akzent-dunkel: #0b7f9b;
    --karte-text: #0f172a;
}

.map-marker {
    position: absolute;
    /* Ritter-Apotheke samt dem Parkplatzsymbol daneben. Diese zwei Werte
       anpassen, falls der Kartenausschnitt jemals ersetzt wird. */
    left: var(--marker-x, 74.4%);
    top: var(--marker-y, 44.5%);
    width: var(--marker-size, 8%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid var(--karte-akzent);
    background-color: rgba(15, 155, 188, 0.10);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Pulsierender Ring als Pseudoelement, damit der Marker selbst scharf bleibt. */
.map-marker::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--karte-akzent);
    animation: mapPulse 2.2s ease-out infinite;
}

@keyframes mapPulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt einen ruhigen Ring. */
@media (prefers-reduced-motion: reduce) {
    .map-marker::before { animation: none; opacity: 0.5; }
}

/* Milchglas-Attribution. Der Link auf die OSM-Copyright-Seite ist nach der
   ODbL Pflicht – nicht in reinen Text umwandeln. */
.map-credit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--karte-text);
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px) saturate(170%);
    -webkit-backdrop-filter: blur(6px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.map-credit a {
    color: inherit !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 !important;
    font-weight: 600;
    background-color: transparent !important;
    box-shadow: none !important;
}

.map-credit a:hover {
    color: var(--karte-akzent) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Der Hinweis "Zum Vergrößern klicken" unten rechts auf der Karte. */
.map-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--karte-text);
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.map-zoom-hint svg {
    width: 13px;
    height: 13px;
}

/* Auf kleinen Karten würde die feste Schriftgröße die Fläche dominieren. */
@media (max-width: 992px) {
    .map-credit {
        left: 6px;
        bottom: 6px;
        font-size: 0.62rem !important;
        padding: 3px 8px;
    }
    .map-credit a { font-size: inherit !important; }
    .map-marker {
        --marker-size: 11%;
        border-width: 2px;
    }
}