/* ===========================================================================
   Standortkarte — Platzhalter vor der Einwilligung

   Frueher lag hier ein roter Verlauf mit der Ueberschrift "Google Maps nur
   nach Einwilligung laden". Das las sich wie eine Warnung und passte farblich
   nicht zum Rest. Jetzt: weisse Flaeche, Adresse als Ueberschrift, der
   Rechtshinweis klein darunter — und rechts ein angedeuteter Stadtplan aus
   reinem CSS, der nichts nachlaedt.
   =========================================================================== */

.map-consent {
  width: 100%;
  min-height: clamp(300px, 46vh, 440px);
  background: var(--color-surface);
}

.map-consent__placeholder {
  min-height: inherit;
  display: grid;
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem) 0;
}

.map-consent__placeholder-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.map-consent__copy {
  display: grid;
  gap: var(--space-m);
  max-width: 46ch;
}

.map-consent__title {
  max-width: none;
  /* Vorher stand hier white-space: nowrap mit einer Schriftgroesse ab
     0,9 rem — ein Notbehelf, damit die lange Ueberschrift in eine Zeile
     passte. Die Adresse darf umbrechen, also faellt beides weg. */
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.map-consent__text {
  max-width: 52ch;
  font-size: var(--fs-small);
  color: rgba(0, 0, 0, 0.62);
}

.map-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.4rem;
  margin-top: var(--space-xs);
}

.map-consent__button {
  justify-self: start;
}

.map-consent__settings,
.map-consent__external-link,
.footer-cookie-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  /* Gewicht und Größe wie die Links daneben — der Knopf steht in derselben
     Liste und soll sich nicht als einziger Eintrag hervortun. */
  font-weight: inherit;
  font-size: var(--fs-small);
  text-decoration: none;
}

/* Im Karten-Kasten stehen die beiden als eigenständige Aktionen neben der
   Schaltfläche „Karte laden“ (42 px hoch) — dort ist die Mindesthöhe richtig,
   sie hält alle drei auf einer Linie. */
.map-consent__settings,
.map-consent__external-link {
  min-height: 44px;
}

/* In der Fußzeile dagegen ist das der sechste Eintrag in einer Liste aus fünf
   Textlinks. Die Mindesthöhe machte ausgerechnet diese eine Zeile 44 statt
   25,6 px hoch — sichtbar als Lücke über „Cookie-Einstellungen“, während
   zwischen allen anderen Einträgen nur die 4,8 px Abstand der Liste stehen.
   Die Zeilenhöhe der Liste erfüllt mit 25,6 px die 24 px aus WCAG 2.2 AA
   (2.5.8 Zielgröße Minimum); die 44 px stammen aus 2.5.5 und damit aus
   Stufe AAA, auf die sich die Seite nicht festlegt. */
.footer-cookie-trigger {
  align-items: baseline;
  line-height: inherit;
}

.map-consent__settings:hover,
.map-consent__settings:focus-visible,
.map-consent__external-link:hover,
.map-consent__external-link:focus-visible,
.footer-cookie-trigger:hover,
.footer-cookie-trigger:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- angedeuteter Stadtplan, rein dekorativ ------------------------------- */

.map-consent__plan {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-m);
  background-color: rgba(0, 0, 0, 0.022);
  /* Zwei Rasterweiten uebereinander ergeben ein Strassennetz aus
     Hauptachsen und Nebenwegen. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: center;
  overflow: hidden;
}

.map-consent__plan::before {
  /* Eine schraege Hauptstrasse, damit das Raster nicht wie Millimeterpapier
     wirkt. */
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg, transparent 47.4%, rgba(0, 0, 0, 0.07) 47.4%, rgba(0, 0, 0, 0.07) 52.6%, transparent 52.6%);
}

.map-consent__marker {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(212, 0, 0, 0.14);
}

.map-consent[data-map-state="enabled"] .map-consent__placeholder {
  display: none;
}

.cookie-banner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1400;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cookie-banner[hidden] {
  display: none;
}

/* Sanfte vertikale Einblendung statt abruptem Erscheinen */
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner:not([hidden]) .cookie-banner__panel {
    animation: cookie-banner-rise 0.32s ease both;
  }
}

@keyframes cookie-banner-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-banner__panel {
  width: min(760px, 100%);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.985);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 26px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.14);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  display: grid;
  gap: 0.75rem;
  pointer-events: auto;
}

.cookie-banner__main {
  display: grid;
  gap: 1rem 1.35rem;
}

.cookie-banner__content,
.cookie-banner__controls {
  display: grid;
  gap: 0.85rem;
}

.cookie-banner__eyebrow {
  margin: 0;
}

.cookie-banner__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.7rem, 2vw, 2.3rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cookie-banner__text {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(0.98rem, 0.96rem + 0.15vw, 1.06rem);
  line-height: 1.5;
}

.cookie-banner__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.cookie-banner__list li {
  /* Neutral statt rosa hinterlegt — Rot bleibt der Handlung vorbehalten,
     nicht der Aufzaehlung. */
  padding: 0.52rem 0.78rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.cookie-banner__actions {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.cookie-banner__actions .btn {
  width: 100%;
  justify-self: stretch;
  justify-content: center;
  min-height: 46px;
  padding-inline: 1rem;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--color-ink);
}

.cookie-banner__actions .btn:hover,
.cookie-banner__actions .btn:focus-visible,
.cookie-banner__actions .btn:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.cookie-banner__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  align-items: center;
  font-size: 0.95rem;
}

.cookie-banner__links a {
  text-decoration-thickness: 1.7px;
  text-underline-offset: 3px;
}

.cookie-banner__owner {
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
}

.cookie-banner__status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.92rem;
}

.cookie-banner__status:empty {
  display: none;
}

@media (min-width: 560px) and (max-width: 839px) {
  .cookie-banner__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 840px) {
  .cookie-banner__main {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
    align-items: end;
  }

  .cookie-banner__title {
    max-width: none;
    font-size: clamp(1.55rem, 1.8vw, 2rem);
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  .map-consent__placeholder-inner {
    /* Auf schmalen Schirmen zaehlt die Adresse, der Plan ist Beiwerk. */
    grid-template-columns: minmax(0, 1fr);
  }

  .map-consent__plan {
    aspect-ratio: 16 / 9;
    order: -1;
  }
}

@media (max-width: 640px) {
  .map-consent__placeholder {
    padding: 2.1rem 0;
  }

  .map-consent__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cookie-banner {
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
  }

  .cookie-banner__panel {
    width: 100%;
    border-radius: 22px;
    padding: 0.95rem;
  }

  .cookie-banner__title {
    max-width: none;
    font-size: clamp(1.55rem, 8vw, 1.95rem);
  }

  .cookie-banner__text {
    max-width: none;
  }

  .cookie-banner__list {
    flex-direction: column;
    align-items: stretch;
  }
}