/* ====================================================================== *
 * Partnerkarte im Kopfbereich der Startseite
 * Gilt ausschließlich für die Karte mit der Klasse partner-map--showcase
 * (render_partner_map mit Option „showcase"). Die geteilten Regeln der
 * Karte in components.css bleiben unverändert; hier stehen allein die
 * Kopfzeile, die Legende, das auslaufende Punktraster, der pulsierende
 * Ring an den Landeshauptstädten und die Fläche vor dem Hintergrundbild.
 * Auf Handy und Tablet liegt die Karte rahmenlos auf dem hellen Grund unter
 * dem Text; ab 900 px steht sie rechts vor dem Bild auf einer hellen,
 * halbdurchsichtigen Fläche, damit Beschriftung und Legende lesbar bleiben.
 * ====================================================================== */

.partner-map--showcase {
  position: relative;
  isolation: isolate;
}

/* Feines Punktraster hinter der Karte, zur Mitte hin sichtbar und zu allen
   Rändern hin vollständig ausgeblendet (closest-side), damit keine Kante
   entsteht und die Karte nahtlos in den Kopfbereich übergeht. */
.partner-map--showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    color-mix(in oklch, var(--color-primary-400) 38%, transparent) 1px,
    transparent 1.4px
  );
  background-size: 20px 20px;
  background-position: 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  pointer-events: none;
}

/* ---------- Fläche vor dem Hintergrundbild ------------------------------ */
@media (min-width: 900px) {
  .hero--home .partner-map--showcase {
    align-self: start;
    padding: clamp(1.1rem, 0.4rem + 1.1vw, 1.75rem);
    border: 1px solid color-mix(in oklch, #fff 65%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in oklch, #fff 82%, transparent);
    box-shadow: var(--shadow-lift);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
  }

  /* Das Punktraster bleibt innerhalb der Fläche. */
  .hero--home .partner-map--showcase::before {
    inset: clamp(1.1rem, 0.4rem + 1.1vw, 1.75rem);
  }
}

/* Auf der Fläche passen die fünf Legendeneinträge schon ab 33rem in drei
   Spalten; die Karte bleibt dadurch niedrig genug, dass die Geräte im Bild
   darunter sichtbar sind. */
@container (width > 33rem) {
  .hero--home .partner-map--more-products .partner-map__legend {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 1.5rem;
  }
}

/* ---------- Kopfzeile: Status links, Hinweis rechts --------------------- */
.partner-map--showcase .partner-map__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
}

.partner-map--showcase .partner-map__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary-800);
  white-space: nowrap;
}

/* Das Lebenszeichen der Karte: ein Punkt in der Akzentfarbe, dessen Hof
   ruhig atmet. */
.partner-map--showcase .partner-map__status::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent-700);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent-700) 45%, transparent);
  animation: hero-map-beacon 2.6s ease-out infinite;
}

.partner-map--showcase .partner-map__head-note {
  font-size: var(--text-fluid-xs);
  line-height: 1.35;
  color: var(--color-ink-500);
  text-align: right;
}

/* ---------- Karte -------------------------------------------------------- */
.partner-map--showcase .partner-map__states {
  fill: color-mix(in oklch, var(--color-primary-100) 88%, #fff);
  stroke-width: 1.8;
}

.partner-map--showcase .partner-map__border {
  stroke-width: 1.9;
}

.partner-map--showcase .partner-map__label {
  font-weight: 700;
  letter-spacing: 0.012em;
  stroke-width: 3.6px;
}

.partner-map--showcase .partner-map__radius-ring {
  stroke: color-mix(in oklch, var(--color-primary-600) 40%, transparent);
}

.partner-map--showcase .partner-map__unit-disc {
  stroke: color-mix(in oklch, var(--color-primary-600) 52%, transparent);
  stroke-width: 1.3;
}

/* Ring, der sich aus jedem Standort einer Landeshauptstadt heraus weitet und
   dabei verblasst – neun Standorte, zeitlich versetzt. */
.partner-map--showcase .partner-map__site-pulse {
  fill: none;
  stroke: var(--color-primary-600);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hero-map-pulse 3.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.partner-map--showcase .partner-map__pin:nth-child(2) .partner-map__site-pulse { animation-delay: 0.4s; }
.partner-map--showcase .partner-map__pin:nth-child(3) .partner-map__site-pulse { animation-delay: 0.8s; }
.partner-map--showcase .partner-map__pin:nth-child(4) .partner-map__site-pulse { animation-delay: 1.2s; }
.partner-map--showcase .partner-map__pin:nth-child(5) .partner-map__site-pulse { animation-delay: 1.6s; }
.partner-map--showcase .partner-map__pin:nth-child(6) .partner-map__site-pulse { animation-delay: 2s; }
.partner-map--showcase .partner-map__pin:nth-child(7) .partner-map__site-pulse { animation-delay: 2.4s; }
.partner-map--showcase .partner-map__pin:nth-child(8) .partner-map__site-pulse { animation-delay: 2.8s; }
.partner-map--showcase .partner-map__pin:nth-child(9) .partner-map__site-pulse { animation-delay: 3.2s; }

/* ---------- Legende unter der Karte -------------------------------------- */
.partner-map--showcase .partner-map__legend {
  margin-top: 0.75rem;
  gap: 0.6rem 1.5rem;
  color: var(--color-ink-800);
  font-weight: 600;
}

.partner-map--showcase .partner-map__legend-mark {
  width: 2rem;
  height: 2rem;
  background: color-mix(in oklch, var(--color-primary-100) 70%, #fff);
  border-color: color-mix(in oklch, var(--color-primary-600) 20%, transparent);
  color: var(--color-primary-800);
}

/* ---------- Legende mit fünftem Eintrag „Weitere Produkte" -------------- */
/* Nur die Karte mit der Option more_products (Klasse partner-map--more-
   products). Fünf Einträge passen erst ab rund 48rem in eine Zeile; darunter
   stehen sie als Dreierraster (drei und zwei) statt als Zeile mit einem
   einzelnen Nachzügler. Die Zweier- und Einer-Raster der schmalen Fassung
   weiter unten gelten unverändert. */
@container (width > 36rem) {
  .partner-map--more-products .partner-map__legend {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 1.75rem;
  }
}

@container (width >= 48rem) {
  .partner-map--more-products .partner-map__legend {
    display: flex;
  }
}

/* ---------- Bewegung ------------------------------------------------------ */
@keyframes hero-map-pulse {
  0% {
    opacity: 0.6;
    transform: scale(0.55);
  }
  70% {
    opacity: 0;
    transform: scale(2.3);
  }
  100% {
    opacity: 0;
    transform: scale(2.3);
  }
}

@keyframes hero-map-beacon {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent-700) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-accent-700) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent-700) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-map--showcase .partner-map__site-pulse {
    animation: none;
    opacity: 0.35;
    transform: scale(1.35);
  }

  .partner-map--showcase .partner-map__status::before {
    animation: none;
  }
}

/* ---------- Schmale Fassung -------------------------------------------- */
/* Sobald die vier Bereiche nicht mehr in eine Zeile passen, stehen sie als
   Zweierraster statt mit einem einzelnen Nachzügler in der zweiten Zeile. */
@container (max-width: 36rem) {
  .partner-map--showcase .partner-map__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.9rem;
  }
}

@container (max-width: 30rem) {
  .partner-map--showcase .partner-map__head-note {
    display: none;
  }
}

/* Auf sehr schmalen Displays passen zwei Bereiche nicht mehr nebeneinander –
   dann stehen die vier untereinander. */
@container (max-width: 20rem) {
  .partner-map--showcase .partner-map__legend {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }
}