@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   locations-map.css · Standortkarte (Leaflet)
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css, Abschnitt 01)
   Präfix    : kh-about-map  ·  Schema: kh-block__element--modifier
   --------------------------------------------------------------------------
   Diese Datei enthält KEINE Kopie des Leaflet-Stylesheets. Leaflet bringt seine
   eigene Grundlage mit (Kacheln, Positionierung, Zoom-Verhalten); hier stehen
   ausschliesslich die Anpassungen an das Designsystem.

   Sämtliche Leaflet-Klassen werden unterhalb von .kh-about-map angesprochen —
   es gibt keine ungescopte .leaflet-*-Regel, die andere Karten auf der Website
   beeinflussen könnte.
   ========================================================================== */


/* ==========================================================
   01. RAHMEN
   ========================================================== */

.kh-about-map {
  position: relative;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-100);
  /* Die Kacheln laufen sonst über die abgerundeten Ecken hinaus. */
  overflow: hidden;
}

/* Höhen aus dem Designsystem abgeleitet, nicht aus Viewport-Einheiten: eine
   Karte mit 100vh schiebt auf dem Telefon den gesamten übrigen Inhalt aus dem
   Bild. */
.kh-about-map__canvas {
  height: 420px;
  width: 100%;
  background-color: var(--kh-color-surface-100);
}

@media (min-width: 768px) {
  .kh-about-map__canvas { height: 480px; }
}

@media (min-width: 1024px) {
  .kh-about-map__canvas { height: 560px; }
}

/* Auf der Filialseite ist die Karte Arbeitsmittel, nicht Abbildung — dort darf
   sie etwas mehr Platz haben. Keine Viewport-Einheiten, damit auf dem Telefon
   der Rest der Seite nicht aus dem Bild geschoben wird. */
.kh-about-map--locator .kh-about-map__canvas { height: 440px; }

@media (min-width: 768px) {
  .kh-about-map--locator .kh-about-map__canvas { height: 520px; }
}

@media (min-width: 1024px) {
  .kh-about-map--locator .kh-about-map__canvas { height: 600px; }
}

/* Als eigener Abschnitt darf die Karte etwas mehr Material tragen als
   eingeklemmt im Finder: grösserer Radius und eine sehr flache Tiefe. Nur die
   Locator-Fassung — die Karte auf „Über uns" bleibt, wie sie ist. */
.kh-about-map--locator {
  border-radius: var(--kh-radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 44px -32px rgba(0, 0, 0, .40);
}


/* ==========================================================
   01a. DER ABSCHNITT AUF /standorte/
   ==========================================================
   Hier stand vorher nur ein Aussenabstand:

       .kh-locator-map { margin-block: var(--kh-space-md); }

   Das war der Abstand des <div>, das der Filter
   kh_locations_map_in_finder() um die Karte legte, als sie noch im
   Finder-Markup stand. Den Filter gibt es nicht mehr (siehe
   functions.php), also auch dieses <div> nicht.

   Dieselbe Klasse trägt jetzt den EIGENEN Abschnitt unter dem Finder.
   Er beantwortet die zweite Frage der Seite — nicht „welche Filiale passt
   zu meiner Suche?", sondern „wo sind alle?" — und ist deshalb auch
   visuell ein eigener Block mit Eyebrow, Überschrift und Einordnung.
   ========================================================== */

.kh-locator-map { padding-block: clamp(48px, 4vw + 24px, 96px); }

.kh-locator-map__header { margin-block-end: clamp(28px, 2.4vw + 12px, 52px); }

.kh-locator-map .kh-section-header__title { max-width: 22ch; }

/* Ab Laptop steht die Einordnung neben der Überschrift statt darunter.
   Gemessen brach der Satz sonst bei 1440px nach 555px in drei kurze
   Zeilen um, während rechts daneben 580px leer blieben — dieselbe
   Aufteilung wie auf den übrigen Seiten der Website.

   DIE MAXIMALBREITE MUSS MIT
   Erster Versuch ohne die folgende Zeile: .kh-section-header bringt aus
   global.css eine eigene Satzbreite von rund 590px mit. Das Raster lag
   damit INNERHALB dieser 590px — beide Spalten kamen auf knapp 245px,
   die Überschrift brach dreizeilig um und der Satz daneben siebenzeilig.
   Für einen Abschnittskopf über der vollen Kartenbreite ist die
   Satzbreite die falsche Grenze; sie wird hier aufgehoben und über die
   Spalten selbst wieder gesetzt. */
@media (min-width: 62em) {

  .kh-locator-map .kh-locator-map__header {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: var(--kh-space-xs);
    align-items: start;
  }

  .kh-locator-map .kh-locator-map__header > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .kh-locator-map .kh-locator-map__header > :nth-child(2) { grid-column: 1; grid-row: 2; }

  .kh-locator-map .kh-locator-map__header > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    max-width: 48ch;
  }
}


/* ==========================================================
   02. MARKER
   ========================================================== */

/* Der Marker ist ein eigenes SVG im Markup (siehe kh_locations_map_marker_svg()).
   Leaflets divIcon bringt einen weissen Hintergrund mit, der hier entfällt. */
.kh-about-map .kh-about-map__marker {
  background: transparent;
  border: 0;
}

.kh-about-map .kh-about-map__marker svg {
  display: block;
  width: 28px;
  height: 36px;
  /* Vektor statt Bilddatei: dadurch auf jedem Bildschirm scharf, ohne ein
     zweites Asset in doppelter Auflösung. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}

/* Tastaturfokus auf einem Marker — Leaflet macht Marker fokussierbar, liefert
   aber keine sichtbare Markierung. */
/*
 * Leaflet macht die Kartenfläche selbst mit der Tastatur erreichbar (tabindex 0)
 * — sie ist damit die ERSTE Station in der Karte, zeigt von sich aus aber keine
 * Markierung. Ohne diese Regel weiss man beim Tabben nicht, wo man ist.
 */
.kh-about-map .kh-about-map__canvas:focus-visible {
	outline: none;
	box-shadow: var(--kh-shadow-focus);
}

.kh-about-map .leaflet-marker-icon:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}


/* ==========================================================
   03. POPUP
   ========================================================== */

.kh-about-map .leaflet-popup-content-wrapper {
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-md);
}

.kh-about-map .leaflet-popup-content {
  /* Leaflet setzt hier eigene Ränder; die Abstände kommen aus dem Raster. */
  margin: var(--kh-space-sm) var(--kh-space-md);
  /*
   * Die Breite bestimmt Leaflet selbst aus minWidth/maxWidth (180–260px, siehe
   * locations-map.js). Sie wird hier bewusst NICHT überschrieben: ein
   * width:auto liess den Inhalt auf die schmalstmögliche Breite zusammenfallen —
   * „Vodafone Shop Hamburg Schanze" stand dann vierzeilig untereinander.
   * Bei 320px greift maxWidth 260 und das Popup passt weiterhin vollständig
   * in die Kartenfläche.
   */
  font-family: var(--kh-font-sans);
}

.kh-about-map__popup {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
}

.kh-about-map__popup-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}

.kh-about-map__popup-address {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.45;
  color: var(--kh-color-ink-500);
}

.kh-about-map__popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-2xs) var(--kh-space-md);
  margin: var(--kh-space-2xs) 0 0;
}

.kh-about-map .kh-about-map__popup-link {
  display: inline-flex;
  align-items: center;
  /* Touch-Minimum auch im Popup. */
  min-height: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
}

.kh-about-map .kh-about-map__popup-link:hover {
  color: var(--kh-color-primary-700);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.kh-about-map .kh-about-map__popup-link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}


/* ==========================================================
   04. BEDIENELEMENTE UND HERKUNFTSANGABE
   ========================================================== */

.kh-about-map .leaflet-bar a {
  /* Leaflets Vorgabe sind 26px — unterhalb des Touch-Minimums. */
  width: var(--kh-tap-min);
  height: var(--kh-tap-min);
  line-height: var(--kh-tap-min);
  /* Ausdrücklich weiss, statt sich auf Leaflets Vorgabe zu verlassen — auf
     einer sehr hellen Basemap muss sich die Schaltfläche trotzdem absetzen. */
  background-color: #FFFFFF;
  color: var(--kh-color-ink-900);
  border-bottom-color: var(--kh-color-line-200);
  font-size: 1.125rem;
}

.kh-about-map .leaflet-bar {
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-sm);
  overflow: hidden;
}

.kh-about-map .leaflet-bar a:hover {
  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-primary-text);
}

.kh-about-map .leaflet-bar a:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  /* Der Ring muss über den Nachbarn liegen, sonst schneidet ihn die Leiste ab. */
  position: relative;
  z-index: 1;
}

/* DIE QUELLENNENNUNG DER ORTSSUCHE
   -------------------------------------------------------------
   Eine Zeile am unteren Rand des Kartenrahmens, innerhalb der
   Umrandung. Sie nennt die Herkunft der GEOKODIERUNG und ist
   damit etwas anderes als die Nennung in der Karte selbst, die
   sich auf die KACHELN bezieht (Leaflet · OpenStreetMap · CARTO).
   Beide stehen nebeneinander, weil sie verschiedene Daten
   betreffen; das Vorwort „Ortssuche:" sagt, welche.

   Sie ist bewusst klein und ruhig, aber keine versteckte Zeile:
   11px sind dieselbe Grösse wie die Nennung der Kacheln darüber,
   und die Farbe ist der reguläre Sekundärton des Designsystems.

   Sie steht ausserhalb der Kartenfläche und bleibt deshalb auch
   sichtbar, solange die Karte auf die Einwilligung wartet — der
   Finder darüber arbeitet ja unabhängig von der Karte weiter. */
.kh-about-map__sources {
  margin: 0;
  padding: var(--kh-space-2xs) var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
  background-color: var(--kh-color-surface-000);
  font-size: 11px;
  line-height: 1.6;
  color: var(--kh-color-ink-500);
}

.kh-about-map__sources-label { margin-inline-end: var(--kh-space-3xs); }

.kh-about-map__sources a {
  color: var(--kh-color-ink-700);
  text-decoration: underline;
}

.kh-about-map__sources a:hover { color: var(--kh-color-primary-text); }

.kh-about-map__sources a:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Herkunftsangabe bleibt lesbar. Sie wird ruhiger gesetzt, aber weder
   entfernt noch versteckt — sie ist Bedingung der Kartendaten. */
.kh-about-map .leaflet-control-attribution {
  background-color: rgba(255, 255, 255, .88);
  font-size: 11px;
  color: var(--kh-color-ink-500);
  padding: 2px var(--kh-space-2xs);
  /* Die Ecke zur Karte hin gerundet — an der Kartenecke bleibt sie eckig,
     damit kein weisser Spalt entsteht. */
  border-top-left-radius: var(--kh-radius-xs);
}

.kh-about-map .leaflet-control-attribution a {
  color: var(--kh-color-ink-700);
  text-decoration: underline;
}


/* ==========================================================
   05. ERSATZDARSTELLUNG
   ========================================================== */

/* Sichtbar, wenn die Kartenbibliothek oder die Kacheln nicht geladen werden
   konnten. Ohne technische Angaben — der Weg zur Filialübersicht steht als
   Schaltfläche ohnehin unter der Karte. */
.kh-about-map__note {
  margin: 0;
  padding: var(--kh-space-xl) var(--kh-space-lg);
  text-align: center;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/*
 * Die Kartenfläche bleibt von Anfang an sichtbar — und zwar mit Absicht.
 *
 * Zwei Fassungen zuvor war sie bis zum Fertigwerden ausgeblendet. Das hatte
 * zwei Fehler: Leaflet misst beim Start die Größe seines Containers, und ein
 * Element mit display:none ist null Pixel groß — die Karte wäre unbrauchbar
 * aufgebaut worden. Und die zweite Regel („Hinweis anzeigen, solange nicht
 * fertig") hätte das hidden-Attribut überstimmt, sodass die Fehlermeldung bei
 * JEDEM Seitenaufruf kurz zu sehen gewesen wäre.
 *
 * Ohne JavaScript bleibt daher eine neutrale graue Fläche stehen, darunter der
 * noscript-Hinweis und die Schaltfläche zur Filialübersicht. Das ist ehrlicher
 * als eine Fläche, die erscheint und wieder verschwindet.
 */
.kh-about-map.is-unavailable .kh-about-map__canvas {
  display: none;
}

.kh-about-map.is-blocked .kh-about-map__canvas {
  display: none;
}


/* ==========================================================
   06. WARTEN AUF DIE EINWILLIGUNG
   ==========================================================
   Der haeufigste Grund fuer eine leere Karte ist keine Stoerung,
   sondern eine Entscheidung: die Kacheln kommen von einem
   externen Dienst, und die Einwilligungsloesung haelt den
   Datenblock der Karte zurueck, bis die passende Kategorie
   erlaubt ist.

   Vorher stand dort eine graue Flaeche und nach fuenf Sekunden
   der Satz „Die Karte konnte derzeit nicht geladen werden." Das
   war fuer diesen Fall schlicht falsch und liess den Besucher
   ohne Ausweg zurueck.

   Jetzt steht hier eine ruhige Flaeche in Kartenhoehe mit dem
   Grund und zwei Wegen. Keine Nachbildung einer Karte, kein
   Rasterbild, keine Attrappe — die Flaeche gibt nicht vor,
   etwas zu zeigen, das sie nicht zeigt.
   ========================================================== */

/* GEMESSEN UND KORRIGIERT · [hidden] GEGEN display
   Der Platzhalter traegt im Markup hidden und war trotzdem von der
   ersten Sekunde an sichtbar — gemessen bei 768px war der
   Kartenbereich 960px hoch statt 480: Zeichenflaeche plus
   Platzhalter untereinander.

   Der Grund ist die Herkunft der Regeln. [hidden]{display:none} ist
   eine Regel des BROWSERS; jede Autorenregel mit derselben
   Spezifitaet schlaegt sie. display:grid hat genau diese
   Spezifitaet (0,1,0). Die Regel hier wiegt (0,2,0) und stellt die
   Reihenfolge wieder her. */
.kh-about-map__blocked[hidden] { display: none; }

.kh-about-map__blocked {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--kh-space-xs);
  min-block-size: 420px;
  padding: var(--kh-space-xl) var(--kh-space-lg);
  text-align: center;
  background-color: var(--kh-color-surface-100);
}

@media (min-width: 768px) { .kh-about-map__blocked { min-block-size: 480px; } }
@media (min-width: 1024px) { .kh-about-map__blocked { min-block-size: 560px; } }

.kh-about-map__blocked-title {
  margin: 0;
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-tight);
  color: var(--kh-color-ink-900);
}

.kh-about-map__blocked-text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}

.kh-about-map__blocked-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-sm) var(--kh-space-md);
  margin-block-start: var(--kh-space-xs);
}

/* Die Schaltflaeche traegt cmplz-manage-consent — damit oeffnet
   Complianz sein eigenes Fenster. Es wird nichts nachgebaut und
   nichts an der Einwilligung vorbei entschieden. */
.kh-about-map .kh-about-map__consent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--kh-control-height);
  padding-inline: var(--kh-space-md);
  font-family: inherit;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
  border: 0;
  border-radius: var(--kh-radius-sm);
  cursor: pointer;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-about-map .kh-about-map__consent:hover {
  background-color: var(--kh-color-primary-600);
}

.kh-about-map .kh-about-map__consent:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-about-map__blocked-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
}

/* ==========================================================
   06b. DER WARTEZUSTAND AUF DER SHOPSEITE
   ==========================================================
   NUR .kh-about-map--locator, also die grosse Karte auf
   „Unsere Shops". Die Einzelstandortseiten (Vorlage 251)
   behalten die Fassung oben unveraendert — dort steht die
   Karte in einem anderen Zusammenhang und ist freigegeben.

   WAS DARAN FALSCH WAR
   Vor der Einwilligung stand hier ein grauer Block von 560px
   Hoehe mit mittig gesetztem Text. Rechtlich richtig, aber
   gestalterisch ein Loch: die groesste Flaeche der Seite war
   die eine, die nichts zeigt — groesser als jede Shopkarte,
   groesser als der Belegstreifen darunter.

   WAS SICH AENDERT — UND WAS NICHT
   Geaendert wird ausschliesslich das Aussehen: Hoehe, Rahmen,
   Satz, Ausrichtung und ein sehr schwaches Gittermotiv im
   Hintergrund. Die Logik bleibt unberuehrt — kein Kachel-
   Abruf vor der Einwilligung, kein Leaflet, keine Nachbildung
   einer Karte, derselbe Text, dieselbe Complianz-Schaltflaeche,
   derselbe Weg zur Shopliste.

   Das Gittermotiv ist ausdruecklich KEINE Landkarte: zwei
   gleichmaessige Linienscharen in 4 Prozent Deckkraft, nach
   unten ausgeblendet. Es gibt keine Strassen, keine Formen und
   keine Marker vor — es markiert eine Flaeche, die noch nicht
   gefuellt ist. */

.kh-about-map--locator .kh-about-map__blocked {
  position: relative;
  isolation: isolate;
  justify-items: start;
  gap: var(--kh-space-2xs);
  min-block-size: 0;
  padding: clamp(28px, 3vw + 12px, 48px);
  text-align: start;
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
}

@media (min-width: 768px) { .kh-about-map--locator .kh-about-map__blocked { min-block-size: 0; } }
@media (min-width: 1024px) { .kh-about-map--locator .kh-about-map__blocked { min-block-size: 0; } }

.kh-about-map--locator .kh-about-map__blocked::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
      repeating-linear-gradient(90deg, rgba(26, 26, 26, .04) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(0deg, rgba(26, 26, 26, .04) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

.kh-about-map--locator .kh-about-map__blocked > * { position: relative; }

.kh-about-map--locator .kh-about-map__blocked-text {
  max-width: 56ch;
}

.kh-about-map--locator .kh-about-map__blocked-actions {
  justify-content: flex-start;
  margin-block-start: var(--kh-space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .kh-about-map .kh-about-map__consent { transition: none; }
}

@media (forced-colors: active) {
  .kh-about-map__blocked { border: 1px solid CanvasText; }
  .kh-about-map .kh-about-map__consent { border: 1px solid CanvasText; }
}