/* ================================================================== *
 * germany-map.css – Bundesweites Partnernetz (animierte Deutschlandkarte)
 * Genutzt von der Startseite und der Partnerseite.
 * ================================================================== */

.gmap-panel {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .gmap-panel {
    grid-template-columns: 1fr 1fr;
  }
}
.gmap svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 32rem;
  margin-inline: auto;
}
.gmap__land {
  fill: #fff;
  stroke: var(--color-primary-200);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.gmap__route {
  fill: none;
  stroke: var(--color-primary-300);
  stroke-width: 1;
  opacity: 0.55;
}
.gmap__route-flow {
  fill: none;
  stroke: var(--color-accent-500);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 0.22 0.78;
  stroke-dashoffset: 0.22;
  visibility: hidden;
}
.gmap__customer {
  fill: var(--color-accent-600);
}
.gmap__hub {
  fill: var(--color-primary-600);
  stroke: #fff;
  stroke-width: 2;
}
.gmap__ring {
  fill: none;
  stroke: var(--color-primary-500);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.gmap__label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  fill: var(--color-neutral-700);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.gmap__label--end {
  text-anchor: end;
}
@media (prefers-reduced-motion: no-preference) {
  .gmap:not(.is-paused) .gmap__route-flow {
    visibility: visible;
    animation: gmap-flow var(--dur, 3s) linear infinite;
    animation-delay: var(--d, 0s);
  }
  .gmap:not(.is-paused) .gmap__ring {
    animation: gmap-pulse 3.4s ease-out infinite;
    animation-delay: var(--d, 0s);
  }
}
@keyframes gmap-flow {
  from {
    stroke-dashoffset: 1.22;
  }
  to {
    stroke-dashoffset: 0.22;
  }
}
@keyframes gmap-pulse {
  0% {
    transform: scale(0.3);
    opacity: 0.85;
  }
  75%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
/* ---- Variante auf dunklem Grund (Hero der Startseite) ------------- */
/* Höhengesteuert statt breitengesteuert: das Hochformat der Karte darf den
   Hero nicht in die Länge ziehen. */
.gmap--hero svg {
  width: auto;
  max-width: 100%;
  height: clamp(14rem, 8rem + 24vw, 28rem);
  filter: drop-shadow(0 0.35rem 1.5rem oklch(0.238 0.05 244.5 / 0.55));
}
.gmap--hero .gmap__land {
  fill: color-mix(in oklch, #fff 14%, transparent);
  stroke: color-mix(in oklch, #fff 62%, transparent);
  stroke-width: 1.75;
}
.gmap--hero .gmap__route {
  stroke: color-mix(in oklch, #fff 38%, transparent);
  opacity: 1;
}
.gmap--hero .gmap__route-flow {
  stroke: var(--color-accent-400);
  stroke-width: 2.75;
}
.gmap--hero .gmap__customer {
  fill: color-mix(in oklch, var(--color-accent-400) 85%, #fff);
}
.gmap--hero .gmap__hub {
  fill: #fff;
  stroke: var(--color-accent-500);
}
.gmap--hero .gmap__ring {
  stroke: var(--color-accent-400);
}

.gmap-legend {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.gmap-legend li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  color: var(--color-neutral-700);
}
.gmap-legend__dot {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
}
.gmap-legend__dot--hub {
  background: var(--color-primary-600);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 25%, transparent);
}
.gmap-legend__dot--customer {
  width: 0.65rem;
  height: 0.65rem;
  margin-inline: 0.125rem;
  background: var(--color-accent-600);
}
.gmap-legend__line {
  flex: none;
  width: 1.6rem;
  height: 0;
  border-top: 2.5px solid var(--color-accent-500);
  border-radius: 999px;
}
.gmap-note {
  font-size: var(--step--1);
  color: var(--color-neutral-500);
  margin-bottom: 0;
}