@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   locations.css v1.0 · Theme-Adapter für das Plugin "convi Locations"
   --------------------------------------------------------------------------
   Zweck    : Das Plugin liefert neutrale Struktur (.cnv-*). Diese Datei
              bindet sie an das Kahraman-Designsystem an. Es wird KEINE
              Plugin-Komponente nachgebaut — nur Tokens überschrieben und
              gezielt nachjustiert.
   Quelle   : global.css (Abschnitt 01 Design Tokens) ist verbindlich.
              Keine neuen Farb-, Abstands- oder Radienwerte, keine Schrift,
              kein @import, kein externes Asset, kein !important.
   Technik  : Jeder Selektor beginnt mit "body", weil das Plugin seine
              Custom Properties auf .cnv-finder (0,1,0) definiert. "body"
              hebt die Spezifität um ein Element an und macht den Adapter
              damit unabhängig von der Ladereihenfolge der Stylesheets —
              die Alternative wäre !important gewesen.
   Präfix   : es wird ausschließlich .cnv-* gestylt, nie ein Elementor-Wrapper.
   --------------------------------------------------------------------------
   01. TOKEN-BRÜCKE cnv → kh      06. KARTEN
   02. FINDER-RAHMEN              07. STATUS
   03. SUCHFORMULAR               08. AKTIONEN
   04. RADIUS & FILTER            09. QUELLENNENNUNG
   05. SUMMARY & MELDUNGEN        10. RESPONSIVE
   ========================================================================== */


/* ==========================================================
   01. TOKEN-BRÜCKE cnv → kh
   ========================================================== */

/* Das Plugin setzt alle Werte als Custom Properties. Damit genügt eine
   einzige Zuordnung, um Farben, Radien, Abstände und Touch-Maße des
   Designsystems in die gesamte Komponente zu tragen. */

body .cnv-finder {
  --cnv-color-text: var(--kh-color-ink-700);
  --cnv-color-muted: var(--kh-color-ink-500);
  --cnv-color-border: var(--kh-color-line-200);
  --cnv-color-surface: var(--kh-color-surface-000);
  --cnv-color-subtle: var(--kh-color-surface-050);
  --cnv-color-primary: var(--kh-color-primary-500);
  --cnv-color-on-primary: var(--kh-color-primary-contrast);
  --cnv-color-focus: var(--kh-color-focus);
  --cnv-color-success: var(--kh-color-success);
  --cnv-color-warning: var(--kh-color-warning);
  --cnv-radius: var(--kh-radius-sm);
  --cnv-space: var(--kh-space-md);
  --cnv-space-sm: var(--kh-space-xs);
  --cnv-space-lg: var(--kh-space-lg);
  --cnv-tap-min: var(--kh-tap-min);

  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
}


/* ==========================================================
   02. FINDER-RAHMEN
   ========================================================== */

/* Der Finder steht als Bestandteil der Seite, nicht als Plugin-Kasten:
   keine eigene Außenfläche, nur Rhythmus nach dem Sektionsraster. */

body .cnv-finder {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-lg);
}

body .cnv-finder__results {
  min-width: 0;
}

/* Der Meldungsbereich ist im Normalfall leer und würde als Flex-Kind
   sonst eine zweite Lücke erzeugen. */
body .cnv-finder__message:empty {
  display: none;
}


/* ==========================================================
   03. SUCHFORMULAR
   ========================================================== */

/* Der Suchbereich ist die einzige Fläche des Finders. Sie trägt eine
   ruhige helle Füllung, einen dezenten Rahmen und den großen Radius. */

body .cnv-finder__form {
  align-items: flex-end;
  gap: var(--kh-space-md);
  margin-bottom: 0;
  padding: var(--kh-space-lg);
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
}

body .cnv-finder__label,
body .cnv-finder__legend {
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  color: var(--kh-color-ink-700);
}

body .cnv-finder__search,
body .cnv-finder__radius {
  gap: var(--kh-space-2xs);
}

body .cnv-finder__input,
body .cnv-finder__select {
  min-height: var(--kh-field-height);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  color: var(--kh-color-ink-900);
  /* Verbindlich 16px: kleinere Werte lösen in iOS Safari Auto-Zoom aus. */
  font-size: var(--kh-text-field);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard);
}

body .cnv-finder__input::placeholder {
  color: var(--kh-color-ink-400);
  opacity: 1;
}

body .cnv-finder__input:hover,
body .cnv-finder__select:hover {
  border-color: var(--kh-color-ink-400);
}

body .cnv-finder__input:focus,
body .cnv-finder__select:focus {
  border-color: var(--kh-color-focus);
  box-shadow: 0 0 0 3px var(--kh-color-focus-ring);
}

/* Absenden — optisch identisch mit .kh-button--primary aus global.css. */

body .cnv-finder__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kh-control-height);
  padding-inline: var(--kh-button-padding-x);
  border: 2px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  transition:
      var(--kh-transition-colors),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

body .cnv-finder__submit:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
}

body .cnv-finder__submit:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
  transform: translateY(1px);
}

/* Während einer laufenden Suche sperrt das Plugin den Knopf. */
body .cnv-finder__submit[disabled] {
  background-color: var(--kh-color-line-200);
  border-color: var(--kh-color-line-200);
  color: var(--kh-color-ink-500);
  transform: none;
}

/* Fokus: der Ring des Designsystems ersetzt die Plugin-Outline
   gleichwertig — sichtbar, mit Abstand, in der Fokusfarbe. */

body .cnv-finder .cnv-finder__submit:focus-visible,
body .cnv-finder .cnv-choice__input:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  box-shadow: var(--kh-shadow-focus);
}

body .cnv-finder .cnv-finder__input:focus-visible,
body .cnv-finder .cnv-finder__select:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 1px;
}


/* ==========================================================
   04. RADIUS & FILTER
   ========================================================== */

/* Das Select bekommt den Chevron des Designsystems. Er entsteht aus zwei
   Farbverläufen — kein Icon-Font, keine Grafikdatei, kein Data-URI. */

body .cnv-finder__select {
  padding-right: var(--kh-space-2xl);
  cursor: pointer;
  background-color: var(--kh-color-surface-000);
  background-image:
      linear-gradient(45deg, transparent 50%, var(--kh-color-ink-500) 50%),
      linear-gradient(135deg, var(--kh-color-ink-500) 50%, transparent 50%);
  background-position:
      calc(100% - 22px) calc(50% + 1px),
      calc(100% - 16px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

body .cnv-finder__filters {
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
}

body .cnv-finder__legend {
  padding-inline: var(--kh-space-2xs);
}

body .cnv-finder .cnv-choice__label {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-700);
}

body .cnv-finder .cnv-choice__input {
  accent-color: var(--kh-color-primary-500);
}


/* ==========================================================
   05. SUMMARY & MELDUNGEN
   ========================================================== */

body .cnv-finder__status {
  margin: 0;
}

body .cnv-finder__summary {
  font-size: var(--kh-text-sm);
  line-height: 1.45;
  /* Sekundär, aber nicht blass: ink-500 bleibt auf Weiß kontraststark. */
  color: var(--kh-color-ink-500);
}

body .cnv-finder__loading {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* Hinweise sind ruhige Flächen mit farbiger Kante, keine Alarmkästen. */

body .cnv-finder .cnv-notice {
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-left-width: 3px;
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-700);
}

body .cnv-finder .cnv-notice--warning {
  border-left-color: var(--kh-color-warning);
  background-color: var(--kh-color-warning-bg);
}

body .cnv-finder .cnv-notice--neutral {
  border-left-color: var(--kh-color-line-300);
  background-color: var(--kh-color-surface-050);
}


/* ==========================================================
   06. KARTEN
   ========================================================== */

/* Raster: breitere Mindestspalte als im Plugin, damit Adressen nicht
   umbrechen und auf 1200px drei ruhige Spalten stehen. */

body .cnv-finder .cnv-location-list {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--kh-grid-gap-tight);
}

/* Fläche und Verhalten wie .kh-card: im Ruhezustand ohne Schatten,
   damit ein Raster aus vielen Karten ruhig bleibt. */

body .cnv-finder .cnv-location-card {
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-shadow-none);
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-base) var(--kh-ease-standard);
}

body .cnv-finder .cnv-location-card:hover,
body .cnv-finder .cnv-location-card:focus-within {
  border-color: var(--kh-color-line-300);
  box-shadow: var(--kh-shadow-md);
}

@media (hover: hover) and (pointer: fine) {
  body .cnv-finder .cnv-location-card:hover { transform: translateY(-2px); }
}

body .cnv-finder .cnv-location-card__body {
  gap: var(--kh-space-sm);
  padding: var(--kh-card-padding);
}

/* Bild nur, wenn das Plugin eines ausgibt — kein Platzhalter im Theme. */

body .cnv-finder .cnv-location-card__media {
  background-color: var(--kh-color-surface-100);
}

body .cnv-finder .cnv-location-card__image {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* Typografie: Name führt, Entfernung ist gut sichtbar, Adresse sekundär. */

body .cnv-finder .cnv-location-card__title {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--kh-color-ink-900);
}

body .cnv-finder .cnv-location-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--kh-transition-base) var(--kh-ease-standard);
}

body .cnv-finder .cnv-location-card__link:hover {
  color: var(--kh-color-primary-text);
}

body .cnv-finder .cnv-location-card__link:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  border-radius: var(--kh-radius-xs);
}

body .cnv-finder .cnv-location-card__meta {
  align-items: center;
  gap: var(--kh-space-xs) var(--kh-space-sm);
  font-size: var(--kh-text-sm);
  line-height: 1.4;
}

body .cnv-finder .cnv-location-card__distance {
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-700);
}

body .cnv-finder .cnv-location-card__address {
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

body .cnv-finder .cnv-location-card__hours {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

body .cnv-finder .cnv-location-card__hours-label {
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-700);
}

body .cnv-finder .cnv-location-card__tag {
  padding: var(--kh-space-3xs) var(--kh-space-xs);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-pill);
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-xs);
  color: var(--kh-color-ink-500);
}


/* ==========================================================
   07. STATUS
   ========================================================== */

/* Nicht die ganze Zeile einfärben: ein kleiner Punkt trägt die Semantik,
   der Text bleibt lesbar. Gilt auch außerhalb des Finders, damit das
   Opening-Status-Widget dieselbe Sprache spricht. */

body .cnv-status {
  display: inline-flex;
  align-items: center;
  /* Label und Zeitangabe dürfen auf schmalen Geräten umbrechen. */
  flex-wrap: wrap;
  gap: var(--kh-space-2xs);
  column-gap: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.4;
  color: var(--kh-color-ink-700);
}

body .cnv-status::before {
  content: "";
  flex: none;
  width: var(--kh-space-xs);
  height: var(--kh-space-xs);
  border-radius: var(--kh-radius-circle);
  background-color: currentColor;
}

/* Das Plugin färbt den Text über .cnv-finder .cnv-status--*. Diese Regeln
   führen denselben Selektor plus "body", damit die Zuordnung auch innerhalb
   des Finders gilt — und zusätzlich ungescopt für das Status-Widget. */

body .cnv-status--success,
body .cnv-finder .cnv-status--success {
  color: var(--kh-color-ink-700);
}

body .cnv-status--success::before,
body .cnv-finder .cnv-status--success::before {
  background-color: var(--kh-color-success);
}

/* Vorübergehend geschlossen: klar, aber ohne Alarmfläche. */
body .cnv-status--warning,
body .cnv-finder .cnv-status--warning {
  color: var(--kh-color-warning);
}

body .cnv-status--neutral,
body .cnv-finder .cnv-status--neutral {
  color: var(--kh-color-ink-500);
}

body .cnv-status--neutral::before,
body .cnv-finder .cnv-status--neutral::before {
  background-color: var(--kh-color-line-300);
}


/* ==========================================================
   08. AKTIONEN
   ========================================================== */

/* Die Kartenaktionen sitzen unten und fluchten über alle Karten. */

body .cnv-finder .cnv-location-card__actions {
  /* Seit Plugin 0.7.0 ist dies ein Spaltencontainer mit zwei Zeilen
     (Hauptaktionen, darunter die Verweise). "center" stammt aus der Zeit der
     einzeiligen Reihe und hätte beide Zeilen mittig gesetzt — die Aktionen
     sollen mit dem übrigen Kartentext fluchten. */
  align-items: flex-start;
  gap: var(--kh-space-xs) var(--kh-space-md);
  padding-top: var(--kh-space-xs);
}

body .cnv-finder .cnv-action {
  min-height: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

/* Primär: anrufen. Optisch der kleine Primärknopf des Designsystems. */

body .cnv-finder .cnv-action--phone {
  justify-content: center;
  padding-inline: var(--kh-space-md);
  border: 1px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

body .cnv-finder .cnv-action--phone:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

body .cnv-finder .cnv-action--phone:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
}

/* Sekundär: alle weiteren Links in der Sprache von .kh-link. */

body .cnv-finder .cnv-action--details,
body .cnv-finder .cnv-action--route {
  color: var(--kh-color-primary-text);
}

/* DIE KARTE VOR „ROUTE PLANEN" (20.10.2026)
   -------------------------------------------------------------
   Das Zeichen steht im CSS und nicht im Text: „Route planen" ist
   die Beschriftung des Plugins und wird auch von anderen Seiten
   benutzt — ein Emoji gehört nicht in den generischen String.

   Das zweite Paar Anführungszeichen hinter dem Schrägstrich ist
   der Alternativtext des erzeugten Inhalts: damit bleibt das
   Zeichen für Vorlesewerkzeuge stumm und der zugängliche Name
   des Verweises unverändert. Browser ohne Unterstützung dieser
   Schreibweise sprechen es mit — deshalb ein Zeichen, das für
   sich steht und nichts Wichtiges trägt. */
body .cnv-finder .cnv-action--route::before {
  content: "\01F5FA\FE0F\00A0" / "";
}

body .cnv-finder .cnv-action--details:hover,
body .cnv-finder .cnv-action--route:hover {
  color: var(--kh-color-primary-700);
  text-decoration: underline;
  text-underline-offset: .18em;
}

body .cnv-finder .cnv-action:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  border-radius: var(--kh-radius-sm);
}


/* ==========================================================
   09. QUELLENNENNUNG
   ========================================================== */

/* Rechtlich erforderlich: sichtbar, klar sekundär, ausreichend Kontrast.
   Nicht verstecken, nicht ausblenden. */

body .cnv-finder__attribution {
  margin: 0;
  padding-top: var(--kh-space-sm);
  border-top: 1px solid var(--kh-color-line-100);
  font-size: var(--kh-text-xs);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

body .cnv-finder__attribution a {
  color: var(--kh-color-ink-500);
  text-decoration: underline;
  text-underline-offset: .15em;
}

body .cnv-finder__attribution a:hover {
  color: var(--kh-color-ink-700);
}

body .cnv-finder__attribution a:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  border-radius: var(--kh-radius-xs);
}


/* ==========================================================
   10. RESPONSIVE
   ========================================================== */

/* Ab Tablet darf das Suchfeld führen und der Knopf sich anschmiegen. */

@media (min-width: 768px) {
  body .cnv-finder__form { padding: var(--kh-space-xl); }

  /* Das Suchfeld führt; die Zeitfilter brauchen Platz für beide Schalter
     nebeneinander, sonst brechen sie im Kasten um. */
  body .cnv-finder__search { flex: 2 1 16rem; }
  body .cnv-finder__filters { flex: 1 1 20rem; }
  body .cnv-finder__dynamic-filters { flex: 1 1 13rem; }
}

@media (max-width: 767px) {
  /* Mobil steht jedes Bedienelement auf eigener Zeile, volle Breite. */
  body .cnv-finder__form { padding: var(--kh-space-md); }

  body .cnv-finder__search,
  body .cnv-finder__radius,
  body .cnv-finder__dynamic-filters,
  body .cnv-finder__filters,
  body .cnv-finder__actions { flex: 1 1 100%; }

  body .cnv-finder__submit { width: 100%; }
}

@media (max-width: 479px) {
  body .cnv-finder .cnv-location-list { grid-template-columns: 1fr; }


  /* Lange Standortnamen dürfen nicht aus der Karte laufen. */
  body .cnv-finder .cnv-location-card__title { hyphens: auto; }

  /* Anrufen darf die Zeile füllen, aber nicht mehr allein belegen: seit Plugin
     0.7.0 steht die WhatsApp-Schaltfläche daneben. "100%" hätte sie auf eine
     eigene Zeile gedrängt, obwohl selbst bei 320 px genug Platz bleibt. */
  body .cnv-finder .cnv-action--phone { flex: 1 1 auto; }
}


/* ==========================================================
   11. STANDORTSEITE · Single Template „Standort – Global"
   ========================================================== */

/* Ergänzt das Theme-Builder-Template. Fläche, Typografie, Knöpfe und
   Abstände kommen aus global.css (kh-section, kh-container, kh-grid,
   kh-card, kh-button-wrap, kh-stack, kh-cluster). Hier steht nur, was
   sich aus diesen Bausteinen nicht ergibt. */

/* Hero — mobil einspaltig. Ab 1024px steht links der Standort, rechts
   die Infokarte. Die Karte trägt immer Inhalt, deshalb entsteht auch
   ohne Standortbild keine leere zweite Hälfte. */

@media (min-width: 1024px) {
  body .kh-location-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
  }
}

/* Rechte Heroseite: Standortbild über der Kontaktkarte. Fehlt das Bild,
   entfernt Elementor das Bildwidget vollständig aus dem Dokument — dann
   rückt die Karte ohne Lücke nach oben, ohne Sonderregel und ohne
   reservierte Höhe. */

body .kh-location-hero__side {
  align-content: start;
}

body .kh-location-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  box-shadow: var(--kh-shadow-xs);
}

/* Die Infokarte nutzt kh-card + kh-card__body für Fläche und Polster;
   nur der Abstand der Datenpaare ist größer als im Kartenstandard. */

body .kh-location-info {
  gap: var(--kh-space-lg);
  height: auto;
}

/* Die Rufnummer ist zugleich Wählverbindung und erhält ein eigenes
   Touch-Ziel, obwohl daneben der Knopf „Anrufen" steht. */

/* Die Farbe steht am Widget: Elementor erzwingt für Überschriften-Links
   `.elementor-widget-heading .elementor-heading-title > a { color: inherit }`.
   Über den Erbweg gilt die Linkfarbe trotzdem, ohne Elementors Regel mit
   einer noch längeren Selektorkette zu überbieten. */

body .kh-location-info__phone {
  color: var(--kh-color-primary-text);
}

body .kh-location-info__phone a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-tap-min);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

body .kh-location-info__phone:hover {
  color: var(--kh-color-primary-700);
}

body .kh-location-info__phone a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

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

/* Fehlt die Routen-URL, gibt Elementor einen Knopf ohne href aus.
   Ein Knopf, der nichts auslöst, wird nicht gezeigt — kein „#", kein
   javascript:, kein Fake-Link. Der Cluster rückt einfach zusammen,
   es bleibt keine Lücke. */

body .kh-location-actions .elementor-widget-button:has(a.elementor-button:not([href])),
body .kh-location-actions .elementor-widget-button:has(a.elementor-button[href=""]) {
  display: none;
}

/* Redaktionstext: ohne gepflegten Inhalt gibt das Post-Content-Widget
   keinen Inhaltsrahmen aus. Dann entfällt der ganze Abschnitt samt
   Überschrift — kein leerer Block, keine doppelten Abstände. */

/*
 * KORREKTUR 5B.3
 *
 * Diese Regel prüfte bis hierher auf
 *   .elementor-widget-theme-post-content .elementor-widget-container
 * — ein Element, das es in der Ausgabe gar nicht gibt: das
 * Beitragsinhalt-Widget schreibt seine <p> DIREKT in das Widget-Element,
 * ohne den Zwischencontainer, den die meisten anderen Elementor-Widgets
 * haben. Die Bedingung war damit immer wahr und der Abschnitt immer
 * ausgeblendet. Solange alle 14 Standorte ohne Beschreibung waren, war das
 * Ergebnis zufällig richtig; mit Inhalt wäre der Text unsichtbar geblieben.
 *
 * Geprüft wird deshalb jetzt das Widget selbst. Beide Fälle bleiben
 * abgedeckt: ohne Beitragsinhalt rendert Elementor das Widget überhaupt
 * nicht (dann greift der erste Selektor), und ein vorhandenes, aber leeres
 * Widget fängt der zweite ab.
 */
body .kh-location-text:not(:has(.elementor-widget-theme-post-content)),
body .kh-location-text:has(.elementor-widget-theme-post-content:empty) {
  display: none;
}

/* Redaktioneller Fließtext im Standorttext. */

body .kh-location-text .kh-prose {
  max-width: var(--kh-measure);
}

body .kh-location-text .kh-prose p {
  margin: 0 0 var(--kh-space-md);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

body .kh-location-text .kh-prose > :last-child {
  margin-bottom: 0;
}

/* ==========================================================
   12. FILIALSEITE · „Unsere Filialen"
   ========================================================== */

/* VERTIKALER RHYTHMUS
   -------------------------------------------------------------
   Gemessen vor dem Gestaltungsdurchgang: alle vier Abschnitte der
   Seite lagen auf kh-section--tight und damit auf identischen
   48,8px oben wie unten. Bei einem 3150px hohen Finder dazwischen
   wirkt das nicht ruhig, sondern beliebig.

   Der Finder selbst bleibt unberührt: hier wird ausschliesslich
   das Polster der umgebenden Abschnitte gestaffelt. Finder-JS,
   Map-JS, Suche und Kopplung sind nicht Gegenstand dieser Datei. */

/* ÜBERGANG VOM KOPF ZUM FINDER
   -------------------------------------------------------------
   Zwischen roter Markenfläche und Suchbereich stand eine harte
   Kante. Eine sehr flache Aufhellung am oberen Rand der grauen
   Fläche führt den Blick weiter, ohne eine eigene Zäsur zu setzen.
   Reine Darstellung — der Finder darunter bleibt unberührt. */
.kh-locator-finder {
  background-image: linear-gradient(
      180deg,
      rgba(230, 0, 0, .045) 0%,
      rgba(230, 0, 0, 0) 180px);
}


/* Der Kopf ist auf dieser Seite Wegweiser, nicht Bühne: er trägt die
   Marke, bleibt aber deutlich flacher als auf den übrigen Seiten.
   Direkt darunter beginnt die Suche.

   Der Abschnitt trägt zusätzlich kh-section--brand und kh-hero-brand;
   Farbrollen, Pillenform des Eyebrows, Ringgeometrie und Bewegung
   kommen aus global.css, Abschnitt 23. */
.kh-locator-hero {
  padding-block: clamp(40px, 4vw + 16px, 72px) clamp(32px, 3vw + 12px, 56px);

  /* Auch hier ist die rechte Hälfte frei; der Kopf ist aber flacher
     als auf den übrigen Seiten, deshalb ein kleineres Motiv. */
  --kh-ring-cx: 76%;
  --kh-ring-cy: 50%;
  --kh-mark-size: 120px;

  /* KEINE KLARZONE MÖGLICH — WELLEN DURCHGEHEND WEICH
     Gemessen mit p6-klar: bei 1024px rückt der Lead „Geben Sie Ihren
     Ort ein …" auf 30 Prozent des Radarradius heran, also genau auf
     die Kante, ab der die Maske voll öffnet. Bei 1440 und 1920px
     wären 65 bzw. 88 Prozent möglich — maßgeblich ist der engste
     Fall.

     Deshalb wie auf „Über uns": durchgehend schwache Kante, dafür
     Maske offen — Begründung und Rechnung in home.css. */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;

  /* Radius 540px — mit 9 Sekunden lief die Welle hier mit 51,6 px/s
     und damit am schnellsten im ganzen Projekt. 19 Sekunden ergeben
     24,4 px/s. */
  --kh-radar-dauer: 19s;
}
.kh-locator-finder { padding-block: clamp(32px, 3vw + 12px, 56px) clamp(48px, 4vw + 24px, 88px); }
.kh-locator-trust { padding-block: clamp(48px, 4vw + 24px, 88px); }
.kh-locator-cta   { padding-block: clamp(56px, 5vw + 28px, 112px); }

/* Die Überschrift darf tragen, der Lead bleibt lesbar schmal. */
.kh-locator-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 20ch;
  text-wrap: balance;
}

/* Satzbreite am inneren Element: Elementor setzt mit
   .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
   eine Regel der Gewichtung (0,4,0) auf jedes Widget. */
.kh-locator-hero .kh-section-header__lead .elementor-heading-title { max-width: 52ch; }

/* VIER GRÜNDE — OFFENE LISTE STATT VIER KARTEN
   -------------------------------------------------------------
   Vier gleich grosse Karten mit je zwei Zeilen Text sind der
   häufigste Baustein dieser Website. Auf der Filialseite, die
   ohnehin ein Werkzeug ist und darunter eine Karte mit vierzehn
   Markern trägt, lesen sich die vier Gründe als offene Liste
   schneller. Die Karten auf „Über uns" bleiben erhalten — dort
   ist der Abschnitt eigenständig und darf Flächen haben.

   Die Klassen bleiben unverändert: hier wird nur die Darstellung
   der bestehenden kh-card zurückgenommen. */

/* NACHTRAG 21.10.2026 · AUS DER LISTE WIRD EIN BELEGSTREIFEN
   -------------------------------------------------------------
   Die offene Liste war richtig gedacht, aber sie las sich wie
   ein eigener Abschnitt: zwei Spalten, vier Absaetze, 596px bei
   1440px — fast so hoch wie der Abschluss darunter. Auf einer
   Seite, deren Aufgabe das Finden eines Shops ist, soll dieser
   Teil den Finder STUETZEN, nicht mit ihm um Aufmerksamkeit
   konkurrieren.

   Jetzt ein Streifen: die vier Gruende stehen ab Laptop in
   einer Zeile, getrennt durch senkrechte Haarlinien, oben und
   unten von einer Linie gefasst. Kein Wort aendert sich, keine
   Karte kommt zurueck, kein Raster aus Flaechen.

   Der rote Auftaktstrich je Eintrag entfaellt: vier rote
   Striche nebeneinander waeren eine Reihe Symbole, keine
   Hervorhebung. Die Haarlinien trennen; das Rot gehoert auf
   dieser Seite dem Suchknopf und dem Status der Shops. */

.kh-locator-trust .kh-grid {
  gap: 0;
  border-top: 1px solid var(--kh-color-line-200);
  border-bottom: 1px solid var(--kh-color-line-200);
}

.kh-locator-trust .kh-grid > .kh-card {
  position: relative;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding: var(--kh-space-md) 0;
}

/* Mobil trennen waagerechte Haarlinien; die aeussere Fassung
   traegt bereits Anfang und Ende. */
.kh-locator-trust .kh-grid > .kh-card + .kh-card {
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-locator-trust .kh-card .kh-h4 .elementor-heading-title {
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.kh-locator-trust .kh-card .kh-text-sm .elementor-heading-title {
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

@media (min-width: 48em) {

  .kh-locator-trust .kh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Zwei Spalten: die waagerechte Linie gehoert zwischen die
     Reihen, nicht zwischen jedes Paar. Die senkrechte trennt
     die beiden Spalten. */
  .kh-locator-trust .kh-grid > .kh-card + .kh-card { border-block-start: 0; }
  .kh-locator-trust .kh-grid > .kh-card:nth-child(n+3) {
    border-block-start: 1px solid var(--kh-color-line-200);
  }

  .kh-locator-trust .kh-grid > .kh-card {
    padding-inline: clamp(20px, 2.4vw, 36px);
  }

  .kh-locator-trust .kh-grid > .kh-card:nth-child(odd) { padding-inline-start: 0; }
  .kh-locator-trust .kh-grid > .kh-card:nth-child(even) { padding-inline-end: 0; }

  .kh-locator-trust .kh-grid > .kh-card:nth-child(even)::before {
    content: "";
    position: absolute;
    inset-block: var(--kh-space-md);
    inset-inline-start: 0;
    inline-size: 1px;
    background-color: var(--kh-color-line-200);
  }
}

@media (min-width: 62em) {

  .kh-locator-trust .kh-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kh-locator-trust .kh-grid > .kh-card:nth-child(n+3) { border-block-start: 0; }

  .kh-locator-trust .kh-grid > .kh-card:nth-child(odd) {
    padding-inline: clamp(20px, 2.4vw, 36px);
  }

  .kh-locator-trust .kh-grid > .kh-card:first-child { padding-inline-start: 0; }
  .kh-locator-trust .kh-grid > .kh-card:last-child { padding-inline-end: 0; }

  /* Eine Haarlinie VOR jedem Eintrag ausser dem ersten — das
     ergibt drei Trenner fuer vier Spalten. */
  .kh-locator-trust .kh-grid > .kh-card:nth-child(even)::before { content: none; }

  .kh-locator-trust .kh-grid > .kh-card + .kh-card::before {
    content: "";
    position: absolute;
    inset-block: var(--kh-space-md);
    inset-inline-start: 0;
    inline-size: 1px;
    background-color: var(--kh-color-line-200);
  }
}


/* Abschluss mit roter Auftaktlinie statt eines weiteren Eyebrow-Worts. */
/* Die Satzbreite gehört auf Titel und Lead, NICHT auf den
   Kopfbereich: der trägt auch die Schaltflächenreihe. */
.kh-locator-cta .kh-section-header {
  position: relative;
  padding-top: var(--kh-space-md);
}

.kh-locator-cta .kh-section-header__title .elementor-heading-title { max-width: 20ch; }
.kh-locator-cta .kh-section-header__lead .elementor-heading-title  { max-width: 46ch; }

/* ENTFALLEN 21.10.2026 · DER ROTE STRICH IN DER MITTE
   -------------------------------------------------------------
   Er stammt aus der Zeit, als dieser Abschluss ein zentrierter
   heller Block war: eine Auftaktlinie ueber mittig gesetztem
   Satz. Seit global.css 24 steht er als dunkles Panel mit
   linksbuendigem Text und roter Kante an der linken
   Panelkante.

   Die Linie hing dadurch frei in der Flaeche — gemessen bei
   1440px bei x=690, waehrend der Satz bei x=163 beginnt und
   die Schaltflaechen bei x=617 stehen: 48px Rot ueber einer
   Luecke. Dieselbe Korrektur wurde auf der Startseite, auf
   „Ueber uns" und auf „Karriere" vorgenommen; dies war die
   letzte Stelle, an der sie noch stand. Die rote Kante des
   Panels uebernimmt ihre Aufgabe vollstaendig. */
.kh-locator-cta .kh-section-header::before { content: none; }

.kh-locator-cta .kh-section-header { padding-top: 0; }


/* Der Finder steht dort auf der grauen Sektionsfläche. Damit der
   Suchbereich als Eingabefläche erkennbar bleibt, wird er weiß —
   sonst stünde Hellgrau auf Hellgrau. */

/* DER SUCHBEREICH ALS EIGENE FLÄCHE
   -------------------------------------------------------------
   Vorher eine weisse Fläche ohne Kante, die auf dem hellgrauen
   Abschnitt beinahe unterging. Jetzt eine eigenständige Karte mit
   roter Oberkante, mehr Polster und Schatten — sie hebt sich vom
   Grund ab und gehört sichtbar mit der Karte darunter zusammen.

   Ausschliesslich Darstellung: Markup, Felder, Namen, Endpunkt und
   Verhalten des Finders bleiben unberührt. */
body .kh-locator-finder .cnv-finder__form {
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-top: 3px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-lg);
  padding: clamp(20px, 2.6vw, 36px);
  box-shadow: var(--kh-shadow-md);
}

/* Karte und Ergebnisse rücken näher an die Suche heran, damit die
   drei Teile als ein Werkzeug gelesen werden. */
body .kh-locator-finder .kh-locator-map { margin-block: var(--kh-space-md); }

/* Überschrift und Suchbereich gehören sichtbar zusammen. */

body .kh-locator-finder__title {
  margin-bottom: var(--kh-space-2xs);
}

/* Zentrale Filialseite: mehr Fläche als im Rail der Startseite,
   deshalb ein großzügigeres Kartenraster. */

@media (min-width: 1024px) {
  body .kh-locator-finder .cnv-location-list {
    /* 18rem hält von 1024px an durchgehend drei Spalten — auf dem Tablet
       quer ebenso wie am Desktop. */
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--kh-grid-gap);
  }
}


/* ==========================================================
   12a. SHOPKARTEN OHNE BILD — DIE DATEN SIND DIE GESTALTUNG
   ==========================================================
   WAS SICH GEAENDERT HAT UND WARUM (21.10.2026)

   Alle 14 Karten zeigten dasselbe Foto: vodafone-aez.webp, der
   Eingang des Hamburger AEZ-Shops, 1360x1020, vierzehnmal auf
   einer Seite. Es war kein Bild des jeweiligen Shops, sondern
   ein Symbolbild — und als solches war es nicht nur wertlos,
   sondern irrefuehrend: wer Lahr sucht, sah Hamburg.

   Entschieden wurde: bis es echte Einzelaufnahmen gibt, stehen
   die Karten OHNE Bild. Nicht mit Platzhalter, nicht mit
   Verlauf, nicht mit Logo-Kachel — ohne. Ein leerer Rahmen
   waere dieselbe Luege in grau.

   Abgeschaltet wird das Bild dort, wo es herkommt: der
   Finder-Widget von convi Locations hat dafuer den Schalter
   show_image. Er steht auf dieser Seite jetzt aus. Das Plugin
   bleibt unveraendert — es gibt hier keinen generischen Defekt,
   sondern eine Kahraman-Gestaltungsentscheidung.

   Damit die Karte danach nicht wie eine Karte ohne Bild
   aussieht, wird der Rumpf neu geordnet. Drei Zonen statt einer
   Reihe gleich gewichteter Absaetze:

     1. Name und Status — die Karte beginnt mit der Aussage,
        nicht mit einer Flaeche.
     2. Adresse und heutige Zeiten — Angaben, durch eine
        Haarlinie als Block abgesetzt.
     3. Aktionen — unten angedockt, auf leicht abgesetzter
        Flaeche ueber die volle Kartenbreite.

   Die dritte Zone ist das eigentliche Mittel: sie gibt der
   Karte einen Fuss und damit eine Form, die das Bild vorher
   als Kopf gegeben hat. Kein Dekor, nur Struktur.

   Alles hier haengt an .kh-locator-finder. Der Finder im Rail
   der Startseite traegt diese Klasse nicht und bleibt
   unberuehrt.
   ========================================================== */

/* Der Rumpf fuellt die Karte, damit der Aktionsfuss ueber alle
   Karten einer Zeile auf derselben Hoehe sitzt. */
body .kh-locator-finder .cnv-location-card__body {
  flex: 1 1 auto;
  gap: var(--kh-space-2xs);
  padding-block-end: 0;
}

/* ZONE 1 · Name und Status
   Der Name traegt die Karte jetzt allein und steht deshalb eine
   Stufe groesser. Der Status bleibt die einzige Farbstelle. */
body .kh-locator-finder .cnv-location-card__title {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}

body .kh-locator-finder .cnv-location-card__meta {
  margin-block-start: var(--kh-space-3xs);
}

/* ZONE 2 · Angaben
   Adresse und heutige Zeiten gehoeren zusammen; die Haarlinie
   trennt sie vom Namen, nicht voneinander. */
body .kh-locator-finder .cnv-location-card__address {
  margin-block-start: var(--kh-space-sm);
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-100);
}

body .kh-locator-finder .cnv-location-card__hours {
  margin-block-start: var(--kh-space-3xs);
}

/* ZONE 3 · Der Aktionsfuss
   Er laeuft ueber die volle Kartenbreite — deshalb die negativen
   Seitenraender in Hoehe des Rumpfpolsters und das fehlende
   Polster unten am Rumpf (oben gesetzt). margin-block-start:auto
   drueckt ihn an die Unterkante, auch wenn eine Nachbarkarte
   eine Zeile mehr Adresse hat. */
body .kh-locator-finder .cnv-location-card__actions {
  margin-block-start: auto;
  margin-inline: calc(var(--kh-card-padding) * -1);
  padding: var(--kh-space-sm) var(--kh-card-padding) var(--kh-space-2xs);
  background-color: var(--kh-color-surface-050);
  border-block-start: 1px solid var(--kh-color-line-100);
  gap: var(--kh-space-3xs);
}

/* Die beiden Zeichenschaltflaechen standen ohne Kante neben
   einem gefuellten roten Knopf und sahen dadurch aus wie zwei
   lose Symbole. Mit derselben Hoehe, Rundung und einer
   Haarlinie werden die drei zu EINER Bedienleiste. */
body .kh-locator-finder .cnv-action--whatsapp,
body .kh-locator-finder .cnv-action--email {
  min-inline-size: var(--kh-tap-min);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-700);
}

body .kh-locator-finder .cnv-action--whatsapp:hover,
body .kh-locator-finder .cnv-action--email:hover {
  border-color: var(--kh-color-line-300);
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-900);
}

/* Route und Details sind Navigation, keine Bedienung: sie
   stehen als Verweiszeile unter der Bedienleiste, getrennt
   durch eine kurze Haarlinie.

   GEMESSEN UND GEFUNDEN · ZWEI ZU KLEINE ZIELE JE KARTE
   Nachgemessen waren „Route planen" und „Details zum Shop"
   105x21 und 147x21 Pixel. Das ist nicht neu und kam nicht aus
   diesem Umbau: convi Locations setzt selbst

       .cnv-finder .cnv-location-card__actions-secondary
       .cnv-action { min-height: 0 }

   mit drei Klassen (0,3,0) und schlaegt damit die Theme-Regel
   `body .cnv-finder .cnv-action` (0,2,1), die 44px vorgibt.
   Die beiden Verweise waren also seit jeher 21px hoch — unter
   den 44px, die fuer jede Aktion dieser Seite gelten, und
   unter den 24px der Mindestanforderung. Bei vierzehn Karten
   sind das 28 zu kleine Ziele.

   Korrigiert wird im Theme, nicht im Plugin: eine Klasse mehr
   stellt die Reihenfolge wieder her. Der Finder im Rail der
   Startseite traegt .kh-locator-finder nicht und bleibt
   unveraendert — dort gilt derselbe Mangel weiter und gehoert
   in einen eigenen Durchgang.

   Kompakt bleibt die Zeile ueber das Polster des Fusses: unten
   traegt der Verweis seine Hoehe selbst, der Fuss braucht dort
   kein zweites Polster. */
body .kh-locator-finder .cnv-location-card__actions-secondary {
  gap: var(--kh-space-sm);
  align-items: center;
  font-size: var(--kh-text-sm);
}

body .kh-locator-finder .cnv-location-card__actions-secondary .cnv-action {
  min-height: var(--kh-tap-min);
  font-weight: var(--kh-font-weight-semibold);
}

body .kh-locator-finder .cnv-location-card__actions-secondary .cnv-action + .cnv-action {
  position: relative;
  padding-inline-start: var(--kh-space-sm);
}

body .kh-locator-finder .cnv-location-card__actions-secondary .cnv-action + .cnv-action::after {
  content: "";
  position: absolute;
  inset-block: 15%;
  inset-inline-start: 0;
  inline-size: 1px;
  background-color: var(--kh-color-line-200);
}

/* Der Fuss darf nicht aus der Rundung laufen. */
body .kh-locator-finder .cnv-location-card {
  overflow: hidden;
}


/* ==========================================================
   12b. STANDORTSEITE — KOPF ALS MARKENFLÄCHE
   ==========================================================
   Template 251 ist funktional unverändert: Standortdaten, Öffnungs-
   status, Buchung und Kontaktkarte kommen weiterhin aus den Plugins.
   Geändert wird ausschliesslich die Darstellung des umgebenden
   Abschnitts.

   Der Kopf trägt zusätzlich kh-section--brand und kh-hero-brand;
   Farbrollen, Pillen-Eyebrow, Ringgeometrie und Bewegung kommen aus
   global.css, Abschnitt 23. Ein Umbau hier verbessert alle 14
   Standortseiten gleichzeitig.
   ========================================================== */

.kh-location-hero {
  padding-block: clamp(48px, 4vw + 24px, 96px);

  /* MITTELPUNKT DES MARKENMOTIVS — LINKS NEBEN DEM TEXT
     Wie auf Startseite und „Über uns". Vorher saß das Zeichen bei
     62 Prozent und 88px über der Unterkante, also unten rechts halb
     unter der Kontaktkarte.

     WARUM HIER KEIN PROZENTWERT WIE AUF DEN ANDEREN SEITEN
     Dort bestimmt der Textblock die Höhe des Kopfes, ein Prozentwert
     trifft seine Mitte deshalb auf jeder Breite. Hier ist es
     umgekehrt: die Höhe kommt aus der RECHTEN Spalte (Standortbild
     plus Kontaktkarte), der Text steht links und ist viel kürzer.
     Gemessen über drei echte Standorte:

         Breite   Kopfhöhe   Mitte des linken Textblocks
         1024      768/792     265px  = 34,4 / 33,4 Prozent
         1280      862/886     279px  = 32,3 / 31,4
         1440      877/901     286px  = 32,6 / 31,7
         1920      901/925     300px  = 33,2 / 32,4

     Die absolute Lage ist auf allen Breiten und allen drei Standorten
     IDENTISCH, der Prozentwert schwankt um drei Punkte — allein weil
     Hamburg-AEZ einen 24px höheren Kopf hat. Ein Prozentwert würde
     das Zeichen dort um 14px verschieben, ohne dass sich am Text
     etwas geändert hätte.

     Die Lage wächst linear mit der Breite (Abstände des Abschnitts
     skalieren mit vw): 225px + 3,9vw trifft alle vier Messpunkte auf
     5px genau. Von der OBERKANTE gerechnet, nicht von unten. */
  --kh-ring-cx: 20%;
  --kh-ring-cy: calc(225px + 3.9vw);

  /* Dasselbe Maß wie auf Startseite und „Über uns". Der Radius muss
     unter dem Abstand zur Oberkante bleiben (265 bis 300px) — clamp
     ergibt 210 bis 270px. */
  --kh-radar-size: clamp(420px, 36vw, 540px);
  --kh-mark-size: clamp(40px, calc((100vw - 1200px) / 2 - 24px), 72px);

  /* KLARZONE DER WELLEN
     Gemessen mit p6-klar über drei echte Standorte. Der engste Fall
     ist Lahr/Bamberg bei 1024px: der Lead „Ihr Vodafone Shop in …"
     liegt bei 38,8 Prozent des Radarradius. Hamburg-AEZ hat durch
     den höheren Kopf 94,4 Prozent, bindet also nicht.

     KORREKTUR: die früheren 35 Prozent Klarzone bei voller Kante
     waren falsch. Die Maske fällt nach der Klarzone erst über zehn
     Punkte ab, steht bei 38,8 Prozent also noch bei 0,70 — mal 30
     Prozent Weiss ergibt das 0,21 und damit 4,1:1 unter dem Lead.
     Aufgefallen ist es nicht, weil mein Kontrasttest nur bei 1440px
     lief; dort steht derselbe Lead bei 49 Prozent. Der Test prüft
     jetzt 1024, 1280, 1440 und 1920.

     Bei nur 38,8 Prozent Abstand bleibt für eine scharfe Kante kein
     Raum. Diese Seiten laufen deshalb wie Startseite und „Über uns":
     Maske offen, Kante schwach. */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;

  /* Der Radius ist jetzt derselbe wie auf der Startseite (210 bis
     270px), also gilt auch dieselbe Dauer: 9 Sekunden ergeben rund
     25 px/s. Vorher 15s bei Radius 432. */
  --kh-radar-dauer: 9s;
}

/* DAS ZEICHEN BRAUCHT ZWISCHENRAUM — SIEHE home.css
   Der Text beginnt hier beim Containerrand plus 52px, der
   Zwischenraum ist also 62px bei 1024, 92 bei 1280, 172 bei 1440 und
   412 bei 1920. Erst ab rund 1376px passt ein lesbares Zeichen
   hinein; darunter entfällt es und nur das Wellenfeld bleibt. */
@media (min-width: 86em) {

  .kh-location-hero {
    --kh-ring-cx: calc(clamp(60px, (100vw - 1200px) / 4, 120px) + var(--kh-mark-size) / 2);
  }
}

@media (max-width: 85.99em) {

  .kh-location-hero::before { display: none; }
}

.kh-location-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(1.875rem, 1.1rem + 3vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-wrap: balance;
}

/* ÖFFNUNGSSTATUS AUF ROTEM GRUND
   Ausschliesslich Farbe. Markup, Klassen, Zustände und Logik des
   Plugin-Widgets bleiben unberührt — der Zustandsname cnv-status--*
   wird nur gelesen, nicht verändert. */
.kh-section--brand .kh-location-hero__status .cnv-status__label {
  color: var(--kh-color-ink-inverse);
}

.kh-section--brand .kh-location-hero__status .cnv-status__hours {
  color: rgba(255, 255, 255, .82);
}

/* Der Zustandspunkt ist im Plugin grün (rgb(0,112,60)). Auf Rot ist
   diese Paarung unruhig und der Punkt kaum zu erkennen. Auf der
   Markenfläche wird er weiss — die Information steckt ohnehin im
   Text daneben („Jetzt geöffnet"), nicht allein in der Farbe. Der
   Zustandsname cnv-status--* wird dabei nur gelesen. */
.kh-section--brand .kh-location-hero__status .cnv-status::before {
  background-color: var(--kh-color-ink-inverse);
}

/* Das Standortbild steht auf der roten Fläche und braucht eine eigene
   Kante — dieselbe Behandlung wie im Kopf der Startseite. */
.kh-section--brand .kh-location-hero__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  box-shadow:
      0 0 0 1px rgba(255, 255, 255, .22),
      0 26px 60px -24px rgba(0, 0, 0, .55);
}

.kh-section--brand .kh-location-hero__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* Die Kontaktkarte bleibt weiss und hebt sich dadurch klar vom Rot ab. */
.kh-section--brand .kh-location-hero__side .kh-card {
  box-shadow: 0 22px 52px -26px rgba(0, 0, 0, .5);
}

@media (min-width: 62em) {

  /* 55/45 zugunsten des Textes; die rechte Spalte trägt Bild und
     Kontaktkarte. */
  .kh-location-hero .kh-location-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
}


/* ==========================================================
   12c. STANDORTSEITE — BUCHUNG UND ABSCHLUSS
   ==========================================================
   Das Buchungswidget selbst wird nicht angefasst. Verändert wird nur
   der Abschnitt darum: Kopfzeile als Editorial-Split statt als
   schmale Säule mit leerer rechter Hälfte, und eine ruhige helle
   Fläche mit Markenzeichen als Hintergrund.
   ========================================================== */

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

@media (min-width: 62em) {

  .kh-location-booking .kh-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: var(--kh-space-xs);
    align-items: end;
    max-width: none;
  }

  .kh-location-booking .kh-section-header__eyebrow,
  .kh-location-booking .kh-section-header__title { grid-column: 1; }

  .kh-location-booking .kh-section-header__lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: .35em;
  }
}

/* Der Abschlussbereich stand mittig; jetzt als Split mit roter
   Auftaktlinie — dieselbe Sprache wie auf den übrigen Seiten. */
.kh-location-cta { padding-block: clamp(48px, 4vw + 24px, 96px); }

@media (min-width: 62em) {

  .kh-location-cta .kh-section-header {
    position: relative;
    margin-inline: 0;
    text-align: left;
    align-items: flex-start;
    padding-top: var(--kh-space-md);
    max-width: 46ch;
  }

  .kh-location-cta .kh-section-header::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 48px;
    block-size: 3px;
    background-color: var(--kh-color-primary-500);
  }
}


/* ==========================================================
   13. ABSCHLUSS DER STANDORTSEITE
   ========================================================== */

/* Abschluss: Text links, Verweis rechts; mobil untereinander. */

body .kh-location-more__row {
  gap: var(--kh-space-lg);
}

@media (max-width: 767px) {
  body .kh-location-more__row { align-items: flex-start; }
}

/* Elementor-Container sind von Haus aus 100 Prozent breit. In einem
   Cluster mit space-between nimmt der Textblock damit die ganze Zeile
   und die Schaltfläche rutscht darunter nach links — gemessen 174px
   Zeilenhöhe statt einer Zeile. Der Textblock darf deshalb schrumpfen. */
@media (min-width: 48em) {

  body .kh-location-more__row > .kh-location-more__text {
    inline-size: auto;
    flex: 1 1 380px;
  }
}


/* ==========================================================================
   TEIL C · STANDORTSEITE, ZWEITE AUSBAUSTUFE
   ==========================================================================
   Drei Eingriffe, alle nur auf der Einzelansicht eines Standorts:

       14. Kopf     kompakter, Bild und Kontaktkarte überlagert
       15. Aktionen Anrufen · WhatsApp · Route als eine Reihe
       16. Vorteile dunkle Fläche mit Bewegung statt drei weisser Karten
       17. Nachbarn drei nächstgelegene Shops als Karten

   Das Buchungswidget, die Karte, der Finder und die Öffnungsstatus-
   Anzeige bleiben unberührt. Wo Plugin-Klassen vorkommen (cnv-*),
   werden sie ausschliesslich gelesen.
   ========================================================================== */


/* ==========================================================
   14. KOPF · KOMPAKTER UND ÜBERLAGERT
   ==========================================================
   VORHER standen Bild und Kontaktkarte in der rechten Spalte
   untereinander. Gemessen ergab das bei 1440px eine Kopfhöhe von
   877px — fast ein ganzes Fenster, bevor der erste Inhalt kommt.
   Der Grund war reine Addition: Bild 4:3 plus Karte plus Abstand.

   JETZT liegen beide in derselben Rasterzelle. Das Bild sitzt
   oben rechts, die Karte unten links davor. Die Höhe der Spalte
   ist damit die Höhe des Bildes allein, nicht mehr die Summe.

   WARUM RASTER UND NICHT position: absolute
   Absolut positioniert fiele die Karte aus dem Fluss, die Spalte
   bräche auf die Bildhöhe zusammen und die Karte liefe unten aus
   dem Abschnitt heraus. Ein Raster mit einer einzigen Zelle, in
   der beide liegen (grid-area: 1/1), hält die Höhe korrekt: die
   Zeile ist so hoch wie das höhere der beiden Elemente.
   ========================================================== */

.kh-location-hero { padding-block: clamp(36px, 3vw + 16px, 72px); }

@media (min-width: 62em) {

  /* Die Textspalte wird breiter: sie trägt jetzt zusätzlich einen
     Einleitungssatz, das Bild braucht dafür weniger Platz. */
  .kh-location-hero .kh-location-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
  }

  .kh-location-hero__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
  }

  /* GEMESSEN UND ZWEIMAL KORRIGIERT
     Der erste Versuch schob das Bild 16 Prozent nach rechts und gab
     der Karte 74 Prozent Breite. Nachgemessen bei 1440px: Bild
     411px breit, Karte 362px — vom Bild blieben 127px sichtbar.
     Das war keine Überlagerung mehr, sondern eine Verdeckung.

     Der zweite Versuch setzte die Karte mit 62 Prozent unten LINKS
     an. Damit lag sie unter der Bildmitte und teilte das Bild in
     zwei Reste: links verdeckt, rechts ein Streifen. Das Bild war
     Hintergrund, nicht Motiv.

     JETZT sitzt die Karte in der unteren rechten Ecke und nimmt 54
     Prozent (275px bei einem 509px breiten Bild). Zusammenhängend
     sichtbar bleiben die linken 234px über die ganze Höhe und die
     oberen 227px der Bildhöhe — das Bild führt, die Karte liegt
     davor. Sie hängt zusätzlich 6 Prozent unter die Bildkante und
     trägt den grossen Schatten: beides sagt „davor", nicht „darin".

     Die Karte enthält nur noch Bezeichnung und Adresse. 54 Prozent
     tragen „Musterstrasse 12, 12345 Musterstadt" in zwei Zeilen;
     min-inline-size hält sie bei 1024px über der Bruchgrenze. */
  /* DRITTE KORREKTUR · ÜBERSTAND NACH RECHTS
     Die Karte sass zwar unten rechts, ragte aber ausschliesslich
     nach unten hinaus. Gemessen bei 1440px: Überstand rechts 0px,
     unten 29px, 100 Prozent der Karte lagen auf dem Bild. Das war
     eine Karte IM Bild, nicht eine Karte AM Bild.

     WARUM DAS BILD DAFÜR SCHMALER WIRD
     Zwischen der rechten Bildkante und dem Rand des Containers
     lagen nur 20px. Ein Überstand von 60 Prozent einer 264px
     breiten Karte braucht aber rund 160px. Die konnten nur aus der
     Bildbreite kommen — der Container darf nach Vorgabe nicht
     verlassen werden, und ein Verschieben des Bildes nach links
     wäre bei 1024px in den Text gelaufen (dort bleiben rechts vom
     Text nur 10px frei, nachgemessen).

     Das Bild bekommt deshalb einen rechten Rand und endet früher.

     VIERTE KORREKTUR · DAS BILD FÜHRT WIEDER
     Der rechte Rand stand zuerst bei 22 bis 24 Prozent. Das gab der
     Karte 60 Prozent Überstand, kostete das Bild aber ein Viertel
     seiner Breite: 372px bei 1440, wo die Spalte 489px hergibt.
     Zusammen mit der Karte davor wirkte der rechte Bereich leer.

     Jetzt sind es 4 Prozent. Das Bild wächst damit um rund ein
     Viertel zurück und füllt die Spalte fast ganz; die Karte ragt
     nur noch leicht über die rechte Kante. Gemessen bei 1440px:
     Bild 469×352, Karte 264×175 — das Bild hat die dreifache
     Fläche und führt eindeutig.

     Das Seitenverhältnis bleibt bei 4:3 (aus Abschnitt 12b): das
     Bild wächst in beide Richtungen, es wird nicht gedehnt. */
  .kh-section--brand .kh-location-hero__side .kh-location-hero__image {
    grid-area: 1 / 1;
    align-self: start;
    margin-inline-end: 4%;
  }

  .kh-section--brand .kh-location-hero__side .kh-card {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: end;
    inline-size: 54%;
    min-inline-size: 240px;

    /* Bis an die Inhaltskante der Seite. Zehn Pixel sind das
       Innenpolster, das Elementor auf die rechte Spalte legt,
       zehn weitere der Abstand von dort bis zur Rasterkante —
       nachgemessen an allen vier Breiten, dort überall gleich.
       Damit endet die Karte bündig mit allem anderen Inhalt der
       Seite und nicht zehn Pixel davor. */
    margin-inline-end: -20px;
    margin-block-end: -6%;
    box-shadow: var(--kh-shadow-lg);
    z-index: 2;
  }

  /* Der Überhang der Karte braucht Platz nach unten, sonst läuft
     sie in den nächsten Abschnitt. 6 Prozent von 509px sind 31px. */
  .kh-location-hero__side { padding-block-end: 34px; }
}

/* AB 80em IST MEHR ÜBERSTAND MÖGLICH
   Ab 1280px hat der Container seine Höchstbreite erreicht und steht
   mittig mit 40px Luft links und rechts. Die Rasterspalte endet bei
   1188, der Container erst bei 1240. Die Karte darf diese 42px
   nutzen und bleibt trotzdem innerhalb des Containers.

   Gemessen ergibt das 60 Prozent Überstand bei 1280, 1440 und 1920 —
   genau der gewünschte Bereich.

   Unter 80em geht das NICHT: bei 1024px liegt die Containerkante
   nur 10px vom Fensterrand entfernt. Die Karte stünde dort näher
   am Bildschirmrand als jeder andere Inhalt der Seite und sähe
   nach Fehler aus, nicht nach Absicht.

   Bei 1024px bleibt es deshalb bei 34 Prozent Überstand. Mehr wäre
   nur zu haben, indem das Bild auf 276px schrumpft — dann wäre es
   schmaler als die 240px breite Karte, und die Vorgabe „Bild bleibt
   die Hauptfläche" wäre verletzt. Der kleinere Überstand ist hier
   die bewusste Wahl. */
@media (min-width: 80em) {

  .kh-section--brand .kh-location-hero__side .kh-card {
    margin-inline-end: calc(-1 * (var(--kh-container-pad) + 10px));
  }
}

/* Unter 62em gibt es keine Überlagerung: bei 390px Breite hätte
   eine Karte vor einem Bild beides unlesbar gemacht. Dort stehen
   sie wie bisher untereinander. */

/* SANFTE BEWEGUNG IM BILD
   Zwanzig Sekunden für vier Prozent Massstab. Das ist so langsam,
   dass es beim Hinsehen nicht auffällt und beim Wegsehen trotzdem
   wirkt — das Bild „lebt", ohne zu zappeln. */
@media (prefers-reduced-motion: no-preference) {

  .kh-section--brand .kh-location-hero__image img {
    animation: kh-shop-drift 26s var(--kh-ease-in-out, ease-in-out) infinite alternate;
  }
}

@keyframes kh-shop-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* Der Einleitungssatz unter dem Ortsnamen. */
.kh-location-hero__intro .elementor-heading-title {
  max-width: 44ch;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-inverse);
}


/* ==========================================================
   15. AKTIONSREIHE · ANRUFEN · WHATSAPP · E-MAIL · ROUTE
   ==========================================================
   Erzeugt von [kh_shop_actions] (functions.php, Abschnitt 20).
   Jede Schaltfläche steht nur dort, wo das Feld gepflegt ist.

   DREI STUFEN, ZWEI ZEILEN

       [ Anrufen ]  [ WhatsApp ]  [ E-Mail ]
       Route planen

   primär    Anrufen — gefüllte Fläche, Wortlaut, trägt die Zeile
   sekundär  WhatsApp und E-Mail — Kontur, quadratisch, nur Zeichen
   tertiär   Route planen — Textverweis in der Zeile darunter

   Vorher standen alle drei gleich gross und gleich gewichtet
   nebeneinander. Bei drei gleichwertigen Flächen entscheidet die
   Leserichtung statt der Wichtigkeit — jetzt ist der erste Weg
   auch ohne Lesen erkennbar.

   FARBROLLEN AUF ROT
   Weiss gefüllt für den wichtigsten Weg, Kontur für die beiden
   anderen. Auf #E60000 erreicht weisser Text 4,81:1; roter Text
   auf weisser Fläche liegt weit darüber. Beide Rollen bestehen AA.

   WHATSAPP UND E-MAIL LIEFERT DAS PLUGIN
   Die beiden Zeichenschaltflächen tragen .cnv-action--whatsapp und
   .cnv-action--email: sie kommen aus convi Locations, damit Adresse,
   Markenzeichen und aria-label nicht ein zweites Mal im Theme
   stehen. Das Plugin gestaltet dort bewusst nur, was zur Bedienung
   gehört, und lässt Farbe, Rahmen und Radius über --cnv-* offen.
   Genau diese Eigenschaften werden hier unten gesetzt — deshalb
   braucht es für Fläche und Grösse keine Gegenregel.

   ENTFALLEN: DIE CSS-SPRECHBLASE
   Für WhatsApp stand hier eine mit border-radius gezeichnete
   Sprechblase. Sie war als lizenzfreier Platzhalter gedacht, wurde
   aber als allgemeines Chat-Zeichen gelesen: man sah nicht, welcher
   Dienst sich öffnet. An ihrer Stelle steht jetzt die Wortbildmarke
   aus dem Plugin, als einzelner Pfad, ohne Zeichensatz und ohne
   zusätzliche Datei — es kommt keine Anfrage hinzu.
   ========================================================== */

.kh-shop-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kh-space-sm);

  /* Die Schnittstelle zum Plugin. convi Locations liest diese
     Eigenschaften mit Ersatzwerten; hier bekommen sie die Rolle
     „helle Kontur auf roter Fläche". Die Höhe ist dieselbe wie bei
     „Anrufen", sonst stehen 52px neben 44px in einer Zeile. */
  --cnv-tap-min: var(--kh-control-height-lg);
  --cnv-radius: var(--kh-radius-sm);
  --cnv-border: 2px solid currentColor;
  --cnv-color-text: var(--kh-color-ink-inverse);
  --cnv-color-primary: var(--kh-color-ink-inverse);
  --cnv-color-focus: var(--kh-color-ink-inverse);
}

.kh-shop-actions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm);
  margin: 0;
}

.kh-shop-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-xs);
  min-block-size: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-lg);
  border: 2px solid var(--kh-color-ink-inverse);
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition:
      var(--kh-transition-colors),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-shop-action__icon { flex: none; }

/* DIE RUFNUMMER ALS BESCHRIFTUNG
   Sie darf nicht umbrechen: „07221" über „8028222" wäre keine
   Nummer mehr, sondern zwei Zahlen. Tabellenziffern geben allen
   Stellen dieselbe Breite — dadurch ist die Schaltfläche auf allen
   vierzehn Standorten gleich breit, statt je nach Ziffernfolge um
   ein paar Pixel zu schwanken. */
.kh-shop-action--call .kh-shop-action__label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ELEMENTOR-FALLE · nein, GLOBAL-FALLE
   global.css setzt für jeden Kopf mit kh-hero-brand

       .kh-hero-brand a:not(.elementor-button) { color: weiss }

   mit der Gewichtung (0,2,0). Meine erste Fassung stand mit
   (0,1,0) dagegen — Ergebnis: weisse Schrift auf weisser Fläche,
   die Schaltfläche „Anrufen" war im Kopf leer. Gemessen:
   color rgb(255,255,255) auf background rgb(255,255,255).

   ZWEITER ANLAUF, UND WARUM DER ERSTE NICHT REICHTE
   Ich hatte die Klasse verdoppelt und damit (0,2,0) erreicht —
   gemessen war die Schaltfläche danach immer noch weiss auf weiss.
   Der Fehler lag in meiner Zählung: :not() nimmt die Gewichtung
   seines Arguments an. .kh-hero-brand a:not(.elementor-button)
   sind also zwei Klassen UND ein Elementname, zusammen (0,2,1) —
   eine Stufe über meinem Versuch.

   Der Elternselektor plus Element bringt die Regeln hier auf
   (0,3,1). Das gewinnt eindeutig und hängt nicht davon ab, in
   welcher Reihenfolge die Stilvorlagen geladen werden. */
.kh-shop-actions a.kh-shop-action--call {
  background-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-primary-text);
}

.kh-shop-actions a.kh-shop-action--call:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-700);
}

/* SEKUNDÄR · WHATSAPP UND E-MAIL
   Fläche, Grösse und Rahmen kommen über --cnv-* von oben. Zu setzen
   bleibt nur der Wechsel beim Überfahren: gefüllt weiss mit rotem
   Zeichen, dieselbe Umkehr wie bei „Anrufen", damit die Reihe eine
   Sprache spricht. Dieselbe Gewichtungsfalle wie oben — deshalb
   Elternselektor plus Element, zusammen (0,3,1). */
.kh-location-hero .kh-shop-actions a.cnv-action--whatsapp,
.kh-location-hero .kh-shop-actions a.cnv-action--email {
  background-color: transparent;
  transition:
      var(--kh-transition-colors),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-location-hero .kh-shop-actions a.cnv-action--whatsapp:hover,
.kh-location-hero .kh-shop-actions a.cnv-action--email:hover {
  background-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-primary-text);
}

.kh-location-hero .kh-shop-actions a.cnv-action--whatsapp:active,
.kh-location-hero .kh-shop-actions a.cnv-action--email:active {
  transform: translateY(1px);
}

/* TERTIÄR · ROUTE PLANEN
   Kein Rahmen, keine Fläche — der Verweis soll die Zeile darüber
   nicht wiederholen. Die Trefffläche bleibt trotzdem 44px hoch:
   ein Textverweis mit Zeilenhöhe wäre auf dem Telefon der
   schmalste Treffer der ganzen Seite. */
.kh-location-hero .kh-shop-actions a.kh-shop-action--route {
  min-block-size: var(--kh-tap-min);
  padding-inline: 0;
  border: 0;
  background-color: transparent;
  color: var(--kh-color-ink-inverse);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.kh-location-hero .kh-shop-actions a.kh-shop-action--route:hover {
  background-color: transparent;
  color: var(--kh-color-ink-inverse);
  text-decoration-thickness: 2px;
}

.kh-shop-action:active { transform: translateY(1px); }

.kh-shop-action:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Die drei gezeichneten Zeichen sind entfallen. „Anrufen" trägt
   jetzt einen Hörer als Pfad (functions.php), WhatsApp und E-Mail
   bringen ihre Zeichen aus dem Plugin mit, und „Route planen" ist
   ein Textverweis ohne Fläche und braucht keines. */

/* SCHMALE GERÄTE
   Vorher stand unter 480px jede Schaltfläche in eigener Zeile. Mit
   vier Zielen wären das vier Zeilen — der Kopf liefe aus dem Bild,
   bevor das Bild beginnt.

   NEU GERECHNET, SEIT DIE NUMMER DIE BESCHRIFTUNG IST
   „Anrufen" waren sieben Zeichen. Die längste gepflegte Rufnummer
   hat dreizehn („0781 12287360"), also fast das Doppelte. Bei
   320px bleiben vom Innenrand 288px; davon nehmen die beiden
   Quadrate 2×52px und die beiden Abstände 2×8px, für die Nummer
   bleiben 168px.

   NACHGEMESSEN — UND DIE RECHNUNG OBEN WAR ZU GROSSZÜGIG
   Die Textspalte des Kopfes ist bei 320px nicht 288px breit,
   sondern 228px: Elementor legt um den Stapel noch einmal 10px
   je Seite, und der Abschnitt selbst polstert ebenfalls. Gemessen
   blieben für die Rufnummer 108px, gebraucht werden 159px
   (2×2 Rand, 2×8 Polster, 20 Zeichen, 8 Abstand, 111 Nummer).

   Die Folge war sichtbar falsch: die Nummer lief über den Rand der
   Schaltfläche hinaus und wurde vom Kopf beschnitten. Nicht die
   Seite hatte Overflow — die Schaltfläche hatte ihn.

   DIE LÖSUNG IST UMBRUCH, NICHT SCHRUMPFEN
   min-inline-size: max-content sorgt dafür, dass die Schaltfläche
   nie schmaler wird als ihr Inhalt. Passt sie neben die beiden
   Quadrate, bleibt es eine Zeile; passt sie nicht, rückt sie in
   eine eigene. Das entscheidet die Flexbox an jeder Breite selbst
   und braucht keinen geratenen Haltepunkt.

   Gemessen mit der längsten Nummer („0781 12287360", 111px):
       320px   108px frei  → eigene Zeile
       375px   163px frei  → eine Zeile
       390px   167px frei  → eine Zeile
       430px   167px frei  → eine Zeile

   Die Schrift bleibt bei 16px. Eine Rufnummer, die man ablesen
   und abtippen soll, ist der falsche Ort zum Sparen. */
.kh-shop-actions__row--primary .kh-shop-action--call {
  flex: 1 1 auto;
  min-inline-size: max-content;
}

@media (max-width: 29.99em) {

  .kh-shop-actions,
  .kh-shop-actions__row { inline-size: 100%; }

  /* Umbruch ausdrücklich erlaubt — siehe oben. */
  .kh-shop-actions__row--primary {
    flex-wrap: wrap;
    gap: var(--kh-space-xs);
  }

  /* Schmaleres Polster verschafft der Nummer ab 375px die Zeile,
     die sie sonst erst ab 390px hätte. */
  .kh-shop-actions__row--primary .kh-shop-action--call {
    padding-inline: var(--kh-space-xs);
  }
}

/* DIE ENGSTE STUFE · unter 360px
   Alle drei nebeneinander brauchen 271px (159 Nummer + 8 + 52 + 8
   + 52). Bei 320px stehen 228px zur Verfügung — es passt eines der
   beiden Quadrate daneben, das zweite rutschte allein in die
   zweite Zeile. Gemessen und angesehen: das sah nach Versehen aus,
   nicht nach Entscheidung.

   Hier nimmt die Nummer deshalb die ganze Zeile, die beiden
   Quadrate stehen gemeinsam darunter. Zwei Zeilen, beide gefüllt.

   Der Haltepunkt ist gerechnet, nicht geraten: ab 283px Zeilenbreite
   (das entspricht 375px Fensterbreite) passen alle drei nebeneinander,
   darunter nicht. 22.5em liegt dazwischen. */
@media (max-width: 22.5em) {

  .kh-shop-actions__row--primary .kh-shop-action--call {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-shop-action { transition: none; }
}


/* ==========================================================
   16. VORTEILE · DUNKLE FLÄCHE MIT BEWEGUNG
   ==========================================================
   VORHER: drei weisse Karten auf grauer Fläche, Überschrift
   darüber. Inhaltlich richtig, optisch die schwächste Stelle der
   Seite — nichts hielt den Blick.

   JETZT: dunkle Fläche als einziger dunkler Block der Seite, drei
   Argumente mit grossen Ziffern, dazu ein sehr langsam wanderndes
   Ringmotiv im Hintergrund. Die Ringe sind Konturen mit 6 bis 10
   Prozent Deckkraft auf #1A1A1A und stören keinen Text: weisser
   Text auf #1A1A1A liegt bei 16,1:1, selbst mit aufgehelltem Grund
   bleibt er weit über AA.
   ========================================================== */

.kh-location-benefits {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 4vw + 24px, 96px);
}

.kh-location-benefits > * { position: relative; z-index: 1; }

/* Das Hintergrundmotiv sitzt auf dem Abschnitt selbst. Elementor
   benutzt ::before für eigene Overlays — hier ist der Abschnitt
   aber ein reiner Flächenträger ohne Elementor-Hintergrund, die
   Falle greift also nicht. */
.kh-location-benefits::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  inline-size: clamp(340px, 42vw, 620px);
  block-size: clamp(340px, 42vw, 620px);
  translate: 0 -50%;
  border-radius: var(--kh-radius-circle, 50%);
  background:
      radial-gradient(circle closest-side at center,
        transparent 0 38%,
        rgba(255, 255, 255, .10) 38.6%,
        transparent 39.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 58%,
        rgba(255, 255, 255, .07) 58.6%,
        transparent 59.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 78%,
        rgba(255, 255, 255, .05) 78.6%,
        transparent 79.4%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  .kh-location-benefits::before {
    animation: kh-benefit-drift 34s linear infinite;
  }
}

/* Eine volle Umdrehung in 34 Sekunden, dazu ein kaum messbarer
   Atemzug im Massstab. Bei konzentrischen Kreisen ist die Drehung
   für sich unsichtbar — erst zusammen mit der Skalierung entsteht
   die langsame Bewegung, die man eher spürt als sieht. */
@keyframes kh-benefit-drift {
  from { rotate: 0deg;   scale: 1; }
  50%  { rotate: 180deg; scale: 1.06; }
  to   { rotate: 360deg; scale: 1; }
}

/* DIE DREI ARGUMENTE
   Die Elementor-Struktur bleibt, wie sie war: drei Container mit
   je einer Überschrift und einem Absatz. Getauscht wurde nur die
   Klasse — aus kh-card kh-card__body wurde kh-location-benefit.

   Das ist Absicht. Die Alternative wäre gewesen, die drei
   Container durch ein einziges HTML-Widget zu ersetzen; dann
   hätte die Redaktion die Texte nur noch im Quelltext ändern
   können. So bleiben sie normale Elementor-Widgets.

   Die Farbrollen für Überschrift und Kleintext auf dunklem Grund
   liefert global.css über .kh-section--dark. Hier steht nur die
   Kante und der Abstand. */
.kh-location-benefit {
  padding-block-start: var(--kh-space-md);
  border-block-start: 2px solid var(--kh-color-primary-on-dark);
  background: none;
  border-inline: 0;
  border-block-end: 0;
  border-radius: 0;
  box-shadow: none;
}

/* kh-card brachte ein Innenpolster mit. Das ist hier weg, sonst
   stünde der Text 24px von seiner eigenen Kante entfernt. */
.kh-location-benefits .kh-location-benefit { padding-inline: 0; padding-block-end: 0; }

.kh-location-benefits .kh-grid {
  margin-block-start: clamp(24px, 2vw + 12px, 40px);
  gap: clamp(24px, 3vw, 48px);
}

/* Der Abschnittskopf steht auf dunkler Fläche; global.css kippt
   Eyebrow und Titel dort bereits. Die Satzbreite kommt hierher,
   weil sie nur auf dieser Seite gilt. */
.kh-location-benefits .kh-section-header__title { max-width: 20ch; }


/* ==========================================================
   17. NACHBARSHOPS
   ==========================================================
   Erzeugt von [kh_related_shops] (functions.php, Abschnitt 20).
   Drei Karten mit Bild, Entfernung, Ort und zwei Wegen.

   EINE EINSCHRÄNKUNG, DIE MAN SEHEN WIRD
   Alle vierzehn Standorte verweisen in convi Locations auf
   dasselbe Galeriebild. Die drei Karten zeigen deshalb dasselbe
   Motiv. Das ist eine Datenlage, kein Gestaltungsfehler — sobald
   je Standort ein eigenes Foto gepflegt ist, greift es hier ohne
   Änderung am Code.
   ========================================================== */

.kh-shop-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  margin: clamp(24px, 2vw + 12px, 40px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) { .kh-shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .kh-shop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kh-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-shop-card:hover {
  border-color: var(--kh-color-line-300);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .42);
  transform: translateY(-2px);
}

.kh-shop-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--kh-color-surface-100);
  aspect-ratio: 16 / 10;
}

.kh-shop-card__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--kh-transition-slow, 480ms) var(--kh-ease-standard);
}

.kh-shop-card:hover .kh-shop-card__img { transform: scale(1.05); }

.kh-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
  padding: var(--kh-space-lg);
}

/* Die Entfernung steht über dem Namen und ist der Grund, warum
   gerade dieser Shop hier auftaucht. */
.kh-shop-card__meta {
  margin: 0;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-primary-text);
}

.kh-shop-card__title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);
}

.kh-shop-card__link { color: inherit; text-decoration: none; }

/* Der Titel-Link deckt die ganze Karte ab. Dadurch ist das Ziel
   so gross wie die Karte, und im Markup steht trotzdem genau ein
   Link auf den Shop — kein doppelter Eintrag für Hilfsmittel. */
.kh-shop-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kh-shop-card__link:focus-visible { outline: none; }
.kh-shop-card:has(.kh-shop-card__link:focus-visible) { box-shadow: var(--kh-shadow-focus); }

.kh-shop-card__place {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

.kh-shop-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-md);
  margin-block-start: var(--kh-space-sm);
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-shop-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

.kh-shop-card__more::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-shop-card:hover .kh-shop-card__more::after { transform: rotate(45deg) translate(2px, -2px); }

/* Anrufen liegt ÜBER der abdeckenden Fläche des Titel-Links,
   sonst wäre es nicht erreichbar. */
.kh-shop-card__call {
  position: relative;
  z-index: 2;
  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-semibold);
  color: var(--kh-color-ink-700);
  text-decoration: none;
  border-block-end: 1px solid var(--kh-color-line-300);
}

.kh-shop-card__call:hover {
  color: var(--kh-color-primary-text);
  border-block-end-color: currentColor;
}

.kh-shop-card__call:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
  border-radius: var(--kh-radius-xs);
}

/* „Details ansehen" ist die Beschriftung des Kartenlinks und für
   Hilfsmittel ausgeblendet — der Linktext selbst ist der
   Shopname und damit aussagekräftiger. Die Mindesthöhe steht
   trotzdem, damit die Zeile mit „Anrufen" auf einer Linie liegt. */
.kh-shop-card__more { min-block-size: var(--kh-tap-min); }

@media (prefers-reduced-motion: reduce) {

  .kh-shop-card,
  .kh-shop-card__img,
  .kh-shop-card__more::after { transition: none; }
}

/* Der Öffnungsstatus kommt aus API::get_status() und steht
   zwischen Adresse und Aktionszeile: er beantwortet die Frage,
   die man bei einem Nachbarshop zuerst hat. Der Punkt davor
   folgt demselben Muster wie im Finder (Abschnitt 6). */
.kh-shop-card__status {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin: 0;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-700);
}

.kh-shop-card__status::before {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--kh-radius-circle, 50%);
  background-color: currentColor;
}

.kh-shop-card__status--success { color: var(--kh-color-success); }
.kh-shop-card__status--warning { color: var(--kh-color-warning); }
.kh-shop-card__status--neutral { color: var(--kh-color-ink-500); }

/* Kopf und Abschluss der Nachbarschaftssektion.
   VORHER stand „Alle Filialen ansehen" rechts neben der
   Überschrift und war damit optisch der Hauptweg der Sektion —
   noch bevor die drei Karten überhaupt gelesen waren. JETZT
   steht der Kopf für sich und der Verweis unter den Karten:
   erst die Auswahl, dann der Ausweg. */
.kh-location-more__head { display: grid; gap: var(--kh-space-2xs); }

/* ZWEIMAL DANEBEN, BEVOR ES SASS
   justify-content: center blieb wirkungslos — Elementor-Container
   stehen auf flex-direction: column, die waagerechte Achse liegt
   also auf align-items. align-items: center blieb es ebenfalls:
   Elementor gibt jedem Widget im Container

       width: var(--container-widget-width, 100%)

   Das Kind ist damit so breit wie der Container, und eine
   Ausrichtung auf der Querachse hat nichts mehr zu verteilen.

   Die Schaltfläche selbst ist inline-flex. text-align auf dem
   Container zentriert sie deshalb zuverlässig, unabhängig davon,
   welche Breite Elementor dem Widget dazwischen gibt. */
.kh-location-more__all {
  margin-block-start: clamp(24px, 2vw + 12px, 40px);
  text-align: center;
}


/* ==========================================================
   18. BERATUNG · BÜHNE UND EDITORIALE ARGUMENTE
   ==========================================================
   VORHER: Überschrift, darunter drei Textspalten mit Haarlinie,
   rechts daneben nichts. Inhaltlich vollständig, als Komposition
   eine leere Fläche mit Text darauf — die schwächste Sektion der
   Seite, gemessen 544px Höhe für drei Sätze.

   JETZT: zwei Spalten. Links eine Bildbühne über die volle
   Spaltenhöhe, rechts Eyebrow, Titel, ein Einleitungssatz und
   die drei Argumente als gestaffelte Liste mit grossen Ziffern.
   Das Verhältnis ist 55 zu 45 — die Bühne führt, ohne den Text
   in eine Spalte zu quetschen.

   DIE ZIFFERN STEHEN IM CSS, NICHT IM INHALT
   01, 02, 03 kommen aus counter-increment. Die Redaktion kann
   Argumente umsortieren, ergänzen oder streichen, ohne Ziffern
   nachzuziehen — und im Text steht keine Zahl, die eine
   Vorlesehilfe als Inhalt mitlesen müsste.
   ========================================================== */

.kh-location-consult {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 5vw + 24px, 112px);
}

.kh-location-consult > * { position: relative; z-index: 1; }

/* DER RADAR ALS AKZENT LINKS NEBEN DEM BILD · STATISCH
   -------------------------------------------------------------
   DRITTE FASSUNG, UND WARUM DIE ZWEITE WEG MUSSTE
   Zuerst lag das Ringmotiv links am Rand und drehte sich — grösstenteils
   von der Bühne verdeckt, und was sichtbar blieb, wanderte.
   Dann stand es ruhend in der Mitte der Sektion: geometrisch
   sauber, aber mit 860px Durchmesser lief es über die ganze
   Breite und lag als grosser Kreis hinter dem Text. Aus einem
   Akzent war eine Fläche geworden.

   JETZT ist es ein gesetzter Akzent neben dem Bild: klein,
   ruhend, senkrecht mittig zum Bild, waagerecht links davor.

   WARUM ES AN DER BÜHNE HÄNGT UND NICHT AN DER SEKTION
   „Senkrecht mittig zum Bild" ist an der Sektion nicht zu haben:
   deren Mitte ist die Mitte aller Zeilen, nicht die des Bildes.
   Am Element .kh-stage ist inset-block-start: 50% dagegen per
   Definition die Bildmitte — die Ausrichtung stimmt damit auch,
   wenn die Textspalte wächst oder schrumpft.

   DIE WAAGERECHTE, GERECHNET
   translate: -60% schiebt den Kreis um 60 Prozent seiner eigenen
   Breite nach links über die linke Bildkante hinaus. Sichtbar
   bleibt der linke Rand des Bildes zugewandte Teil, 40 Prozent
   liegen hinter dem Bild — und zwar wirklich dahinter: der Rahmen
   hat eine deckende Fläche und steht im Dokument nach dem
   Pseudoelement, deckt es also ab. Der Mittelpunkt und damit das
   Signet liegt immer knapp links der Bildkante:

       1024px  Bild bei  52 · Mittelpunkt  31
       1440px  Bild bei 162 · Mittelpunkt 133
       1920px  Bild bei 402 · Mittelpunkt 368

   DIE SICHTBARKEITSGRENZE IST NICHT DIE LAYOUTGRENZE
   Zwei Spalten gibt es ab 64em (1024px), den Akzent erst ab 80em
   (1280px). Das ist Absicht und nachgemessen: bei 1024px ist der
   Rand links vom Bild nur 42px breit, der Mittelpunkt läge bei
   x = 30 und das Signet würde von 6 bis 54 laufen — am
   Fensterrand angeschnitten. Ein angeschnittenes Markenzeichen
   sieht nicht nach Absicht aus, sondern nach Versehen.

   Ab 1280px trägt der Rand den Akzent vollständig. Darunter
   entfällt er ersatzlos: keine Ersatzgrafik, kein reservierter
   Platz, kein Abstand — ein Pseudoelement ohne content belegt
   keinen Raum, die Sektion ist unter und über der Grenze gleich
   hoch.

   KEINE BEWEGUNG. */
@media (min-width: 80em) {

  .kh-stage::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: clamp(220px, 20vw, 340px);
    aspect-ratio: 1;
    translate: -60% -50%;
    border-radius: var(--kh-radius-circle, 50%);
    background:
        radial-gradient(circle closest-side at center,
          transparent 0 31%,
          rgba(255, 255, 255, .085) 31.5%,
          transparent 32.4%),
        radial-gradient(circle closest-side at center,
          transparent 0 52%,
          rgba(255, 255, 255, .06) 52.5%,
          transparent 53.4%),
        radial-gradient(circle closest-side at center,
          transparent 0 73%,
          rgba(255, 255, 255, .045) 73.5%,
          transparent 74.4%),
        radial-gradient(circle closest-side at center,
          transparent 0 94%,
          rgba(255, 255, 255, .03) 94.5%,
          transparent 95.4%);
    pointer-events: none;
  }
}

/* DAS SIGNET IM MITTELPUNKT
   -------------------------------------------------------------
   Dasselbe Asset, das global.css im roten Kopf verwendet: der
   offizielle Speechmark, unverändert — nicht umgefärbt, nicht
   maskiert, nicht gefiltert, nicht verzerrt. Es kommt aus der
   Mediathek, nicht aus einer Icon-Bibliothek; es wird keine
   zusätzliche Datei geladen, die die Seite nicht ohnehin kennt.

   EIGENE EBENE, WEIL EIGENE DECKKRAFT
   Hintergrundebenen lassen sich nicht einzeln abdunkeln. Läge das
   Zeichen im selben Stapel wie die Ringe, hätte es deren Deckkraft
   oder gar keine. Es steht deshalb auf ::after, geometrisch exakt
   deckungsgleich mit ::before — gleiche Kantenlängen, gleicher
   Mittelpunkt, gleiche Verschiebung. Damit sitzt es zwangsläufig
   im Zentrum der Ringe.

   Der Kreis ist jetzt klein, also muss das Zeichen anteilig
   grösser werden, damit es überhaupt noch als Zeichen lesbar ist:
   22 Prozent eines 340er-Kreises sind 75px — in derselben
   Grössenordnung wie zuvor 14 Prozent von 860. Die Deckkraft
   steigt entsprechend leicht auf .085, weil ein kleineres Zeichen
   bei gleicher Deckkraft schwächer wirkt. Sie bleibt damit in der
   Tonlage der inneren Ringlinie.

   Es liegt nicht mehr hinter Fliesstext, sondern im Rand neben
   dem Bild — die Warnung aus global.css, das Zeichen nicht hinter
   Text zu legen, ist damit gegenstandslos geworden.

   Der Pfad führt vom Stilverzeichnis in die Mediathek:
   assets/css/ -> assets/ -> convi/ -> themes/ -> wp-content/ */
@media (min-width: 80em) {

  .kh-stage::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: clamp(220px, 20vw, 340px);
    aspect-ratio: 1;
    translate: -60% -50%;
    background-image: url("../../../../uploads/2026/09/favicon.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22% 22%;
    opacity: .085;
    pointer-events: none;
  }
}

/* EIN FLACHES RASTER STATT ZWEIER SPALTENCONTAINER
   Die Bühne, der Abschnittskopf, der Einleitungssatz und die
   Argumentliste sind Geschwister im selben Container. Die Bühne
   belegt links eine Zelle über alle Zeilen, alles Übrige steht
   rechts untereinander.

   Der Umweg über zwei Spaltencontainer wäre die naheliegende
   Lösung gewesen — er hätte im Elementor-Datensatz aber zwei
   zusätzliche Verschachtelungsebenen bedeutet, die nur die
   Darstellung betreffen. Flach bleibt der Datensatz lesbar, und
   unter 1024px fällt alles ohne Sonderregel in eine Spalte. */
.kh-consult__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}

/* GEMESSEN UND KORRIGIERT · EIN FLEX-CONTAINER, DER SCHRUMPFT
   Elementor gibt jedem Container display:flex mit Spaltenrichtung.
   Das Shortcode-Widget darin ist ein Flex-Element mit
   flex-shrink: 1. Unter 1024px stand die Bühne als erstes
   Rasterelement in einer Zeile, deren Höhe der Browser aus dem
   geschrumpften Widget ableitete — gemessen: Widget 0px hoch,
   Zelle 20px, Rahmen 199px. Das Bild lief also über Eyebrow und
   Überschrift hinweg, beides war auf dem Telefon unleserlich.

   Als Blockcontainer gibt es kein Flex-Element mehr, das
   schrumpfen könnte: der Wrapper muss sein Kind umschliessen.
   Ab 1024px trat der Fehler nicht auf, weil die Bühne dort über
   alle Zeilen gespannt ist und ihre Höhe von dort bekommt. */
.kh-consult__stage { display: block; }

@media (max-width: 63.99em) {

  .kh-consult__stage { margin-block-end: clamp(8px, 1.4vw, 16px); }
}

/* Erst ab 1024px zwei Spalten. Darunter stünde die Bühne neben
   dem Text als Briefmarke — sie soll eine Bühne sein. */
@media (min-width: 64em) {

  /* GEMESSEN UND KORRIGIERT
     Erst standen die Zeilen auf auto. Die Bühne überspannt alle
     drei, ist aber höher als Kopf, Einleitung und Liste zusammen
     — den Überschuss hat der Browser fast vollständig der ersten
     Zeile gegeben. Gemessen bei 1440px: 765px Zeilenhöhe für
     einen 121px hohen Abschnittskopf, also ein leeres Feld von
     644px zwischen Überschrift und Einleitungssatz.

     Jetzt sind die ersten beiden Zeilen inhaltsgross und die
     letzte nimmt den Rest. Bleibt Platz übrig, steht er unter
     der Liste, wo er als Luft gelesen wird und nicht als Loch. */
  .kh-consult__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }

  .kh-consult__grid > .kh-consult__stage {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }

  .kh-consult__grid > :not(.kh-consult__stage) {
    grid-column: 2;
    align-self: start;
  }
}


/* DIE BÜHNE
   Ein anderer Schnitt desselben Fotos: hochkant 4:5, der Blick
   auf das obere Viertel, herangezogen. Darüber eine rote Lasur
   und das Ringmotiv. So entsteht eine gestaltete Fläche statt
   eines zweiten identischen Bildes — siehe den Kommentar an
   [kh_location_stage] in functions.php. */
.kh-stage { position: relative; }

.kh-stage__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--kh-radius-lg);
  background-color: #141414;
}

/* Hochkant ab 1024px — mit Deckel. Ohne ihn ergäben 573px Breite
   eine Bühne von 716px Höhe und eine Sektion von fast 1500px:
   mehr als ein Fenster für drei Argumente. Der Deckel nimmt der
   Bühne etwas Hochformat, nicht ihre Wirkung. */
@media (min-width: 64em) {

  .kh-stage__frame {
    aspect-ratio: 4 / 5;
    max-block-size: min(64vh, 620px);
  }
}

/* GEMESSEN UND KORRIGIERT · ELEMENTOR-FALLE
   Elementor setzt für jedes Bild im Inhalt

       .elementor img { height: auto }

   mit der Gewichtung (0,1,1). Meine erste Fassung stand mit
   (0,1,0) dagegen — position, inset und object-fit galten, die
   Höhe nicht. Gemessen: Rahmen 461 × 576, Bild 461 × 346. Das
   Foto füllte also nur das obere Drittel der Bühne, darunter
   stand die Lasur auf schwarzem Grund.

   Der Elternselektor bringt die Regel auf (0,2,1) und gewinnt.
   Aus demselben Grund steht die Höhe in einer eigenen Regel: so
   ist beim Lesen klar, welche Zeile den Konflikt austrägt. */
.kh-stage__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  /* Zurückgenommen von saturate(.5): bei der Hälfte der Sättigung
     wirkte das Foto grau und die Lasur klebte darüber. .68 nimmt
     dem Bild die Buntheit, ohne es zu entfärben; die leichte
     Abdunkelung bringt es auf die Helligkeit der Fläche. */
  filter: saturate(.68) contrast(1.03) brightness(.95);
  scale: 1.16;
}

.kh-stage__frame .kh-stage__img { block-size: 100%; }

/* DIE LASUR · ZWEI EBENEN STATT EINER
   -------------------------------------------------------------
   VORHER lag ein einziger Verlauf über dem Foto, der oben mit 60
   Prozent Rot begann. Das war keine Tönung mehr, sondern eine
   Einfärbung: das Motiv verschwand hinter der Farbe.

   JETZT trennen sich die beiden Aufgaben, die der Verlauf hatte:

   unten  eine senkrechte Abdunkelung. Sie trägt das Ortsschild
          und gibt dem Bild einen Fuss, statt es gleichmässig
          aufzuhellen.
   oben   ein diagonaler Markenton mit höchstens 30 Prozent. Genug,
          damit das Foto zur roten Welt gehört; wenig genug, dass
          man Regale, Licht und Raum noch als Fotografie liest.

   Kein Blendmodus — das Ergebnis wäre auf einem dunklen
   Innenraumfoto nicht vorhersagbar. */
.kh-stage__wash {
  position: absolute;
  inset: 0;
  background:
      linear-gradient(180deg,
        rgba(8, 8, 8, 0) 0%,
        rgba(8, 8, 8, .10) 46%,
        rgba(8, 8, 8, .40) 78%,
        rgba(8, 8, 8, .72) 100%),
      linear-gradient(212deg,
        rgba(230, 0, 0, .22) 0%,
        rgba(230, 0, 0, .08) 46%,
        rgba(230, 0, 0, 0) 78%);
  pointer-events: none;
}

/* Eine Haarlinie innen statt eines Rahmens aussen: sie fasst das
   Bild, ohne eine zweite Kante neben der Rundung zu erzeugen. */
.kh-stage__frame {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

/* Das Ortsschild verankert den abstrahierten Ausschnitt: ohne es
   wäre die Fläche ein beliebiges rotes Bild. */
.kh-stage__place {
  position: absolute;
  inset-block-end: clamp(12px, 1.4vw, 20px);
  inset-inline-start: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--kh-radius-pill);
  background-color: rgba(0, 0, 0, .34);
  color: var(--kh-color-ink-inverse);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
}


/* DIE TEXTSEITE
   Drei Satzbreiten, absteigend: Titel 18 Zeichen, Einleitung 42,
   Argumenttexte laufen in ihrer Spalte. Die Treppe nach unten
   gibt der Spalte eine Silhouette, ohne dass ein Element
   eingerückt werden müsste. */
.kh-location-consult .kh-section-header__title {
  max-width: 18ch;
  letter-spacing: -.015em;
}

/* EINE SENKRECHTE FÜR DIE GANZE SPALTE
   Elementor gibt seinen Containern 10px Innenabstand. Gemessen
   begann der Einleitungssatz dadurch bei x = 803, Titel und
   Ziffern aber bei 813 — zehn Pixel, die man nicht benennen kann
   und trotzdem sieht. Mit Null auf beiden Seiten starten Eyebrow,
   Titel, Einleitung und Ziffern auf derselben Linie, und die
   Haarlinien laufen über die volle Spaltenbreite statt zwanzig
   Pixel davor zu enden. */
.kh-location-consult .kh-section-header,
.kh-consult__list { padding-inline: 0; }

.kh-location-consult .kh-section-header { gap: var(--kh-space-2xs); }

.kh-consult__intro .elementor-heading-title {
  max-width: 42ch;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: rgba(255, 255, 255, .82);
}

/* Die Argumenttexte etwas ruhiger als der Einleitungssatz: die
   Überschrift führt, der Text erklärt. */
.kh-consult__item .kh-text-sm .elementor-heading-title {
  max-width: 38ch;
  line-height: var(--kh-leading-relaxed);
  color: rgba(255, 255, 255, .72);
}


/* DIE DREI ARGUMENTE
   Weiterhin drei normale Elementor-Container mit Überschrift und
   Absatz — die Redaktion soll die Texte im Editor ändern können
   und nicht im Quelltext. Getauscht ist nur die Klasse. */
/* Elementor gibt seinen Containern einen Standardabstand von
   20px. Gemessen standen die drei Einträge dadurch 20px
   auseinander: über jeder Überschrift lagen 30px Innenabstand
   plus 20px Lücke, darunter nur 30px. Die Zeilen sassen also
   nicht in ihrem eigenen Feld, sondern schwammen darin.

   Mit gap: 0 teilen sich benachbarte Einträge ihre Haarlinie, und
   der Abstand über und unter jeder Zeile ist derselbe. Erst
   dadurch wird aus drei Blöcken eine Tabelle. */
.kh-consult__list {
  counter-reset: kh-consult;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* EINE SPALTENBREITE, EIN ABSTAND, EIN RHYTHMUS
   -------------------------------------------------------------
   Die Ziffernspalte ist in ch bemessen, nicht in rem: „01" ist
   zwei Ziffern breit, und mit font-variant-numeric: tabular-nums
   hat jede Ziffer dieselbe Breite. 2ch plus Innenabstand trifft
   die Spalte damit exakt, statt sie zu schätzen — und sie bleibt
   richtig, wenn die Schriftgrösse über clamp() wandert.

   Beide Spalten und alle Abstände sind für alle drei Einträge
   identisch. Ziffern und Texte stehen dadurch auf je einer
   senkrechten Linie, und die Trennlinien haben überall denselben
   Abstand nach oben und unten. */
.kh-consult__item {
  position: relative;
  counter-increment: kh-consult;
  display: grid;
  grid-template-columns: calc(2ch + .6em) minmax(0, 1fr);
  column-gap: clamp(18px, 1.6vw, 28px);
  row-gap: var(--kh-space-2xs);
  padding-block: clamp(20px, 1.8vw, 30px);
  padding-inline: 0;
  border: 0;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: border-color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-consult__item:last-child {
  border-block-end: 1px solid rgba(255, 255, 255, .14);
}

/* Die Ziffer steht in Spalte 1 über beide Zeilen, der Inhalt in
   Spalte 2. Beides ausdrücklich zugewiesen: mit automatischer
   Platzierung würde die erste Überschrift unter die Ziffer
   rutschen, sobald ein Argument nur ein Element enthält. */
/* Die Ziffer sitzt in Spalte 1 über beide Zeilen, der Inhalt in
   Spalte 2 — beides ausdrücklich zugewiesen, weil automatische
   Platzierung die erste Überschrift unter die Ziffer schieben
   würde, sobald ein Eintrag nur ein Element enthält.

   Die Grundlinie: line-height 1 setzt die Oberkante der Ziffer
   auf die Oberkante ihrer Zeile, die Überschrift daneben sitzt
   mit 1.25 etwas tiefer. Ein Viertel ex hebt die Ziffer auf die
   Versalhöhe der Überschrift — sonst stünde sie sichtbar zu hoch. */
.kh-consult__item::before {
  content: counter(kh-consult, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-block-start: .25ex;
  font-family: var(--kh-font-heading);
  font-size: clamp(1.5rem, 1.1rem + .8vw, 2rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--kh-color-primary-on-dark);
}

.kh-consult__item > * { grid-column: 2; }

/* DIE STAFFELUNG IST ENTFALLEN
   Sie war als editorialer Versatz gedacht: jede Zeile etwas
   weiter rechts, die Haarlinien als Treppe. Gemessen standen die
   Ziffern dadurch bei x = 813 / 836 / 859 — drei senkrechte
   Linien statt einer. Was als Rhythmus gemeint war, las sich als
   Ungenauigkeit. Ruhe entsteht hier durch Kante, nicht durch
   Versatz.

   Aus demselben Grund gibt es beim Überfahren keine Verschiebung
   mehr, sondern nur noch die Linie in Markenfarbe: eine Zeile,
   die unter dem Zeiger wegrutscht, nimmt der Spalte genau die
   Präzision, die sie tragen soll. */
@media (hover: hover) {

  .kh-consult__item:hover { border-block-start-color: rgba(230, 0, 0, .55); }
  .kh-consult__item:last-child:hover { border-block-end-color: rgba(230, 0, 0, .55); }
}

/* REVEAL OHNE JAVASCRIPT
   Scroll-getriebene Animation, wo der Browser sie kennt. Wo
   nicht — Safari, Firefox — passiert nichts, und die Sektion
   steht sofort vollständig da. Kein Skript, keine Bibliothek,
   kein Zustand, der hängen bleiben kann. */
@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: no-preference) and (min-width: 48em) {

    .kh-consult__item {
      animation: kh-consult-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}

/* Nur noch eine Aufblendung. Das frühere Mitwandern um 14px war
   die einzige Bewegung, die die senkrechten Linien der Spalte
   kurzzeitig gebrochen hat. Ohne Versatz bleibt die Ausrichtung
   in jedem Moment des Aufbaus intakt. */
@keyframes kh-consult-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

  .kh-consult__item { transition: none; }
}


/* ==========================================================
   19. CTA · STATEMENT LINKS, HANDLUNGSKARTE RECHTS
   ==========================================================
   VORHER: Eyebrow, Titel, Satz und zwei Schaltflächen, alles
   zentriert auf einer dunklen Fläche von 448px Höhe. Die rechte
   Hälfte war leer.

   JETZT: links das Statement, rechts eine helle Handlungskarte.
   Sie wiederholt den Kopf nicht, sondern ergänzt ihn: der Termin
   steht zuerst, die Rufnummer ist lesbar, WhatsApp und E-Mail
   sind Textverweise statt Symbolflächen.

   DIE GEWICHTUNGSFALLE, ZUM DRITTEN MAL
   global.css setzt für diese Fläche

       .kh-cta-panel a:not(.elementor-button) { color: weiss }

   mit (0,2,1) — auf einer weissen Karte wäre jeder Verweis
   unsichtbar. Die Regeln hier stehen deshalb mit Sektionsklasse
   plus Kartenklasse plus Element auf (0,3,1) und gewinnen
   unabhängig von der Ladereihenfolge.
   ========================================================== */

/* KEIN ZWEITES RASTER
   Der erste Versuch legte ein eigenes zweispaltiges Raster über
   den Abschnittskopf. Gemessen bei 1440px: der Titel landete
   unter der Karte, „Kontakt aufnehmen" stand rechts. Der Grund
   stand längst in global.css —

       .kh-cta-panel > .kh-container > .kh-section-header
         > .kh-section-header__actions { grid-column: 2; grid-row: 1/4 }

   mit (0,4,0). Die Teilung nach links und rechts gibt es auf
   dieser Fläche also bereits; mein Raster hat sie nur gestört.

   JETZT steht die Handlungskarte dort, wo die Teilung sie ohnehin
   hinstellt: in der Aktionsspalte, mit dem Verweis auf die
   Kontaktseite darunter. Zu tun bleibt, aus der Zeile eine Spalte
   zu machen — mehr nicht. */
.kh-cta-actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--kh-space-sm);
  inline-size: 100%;
}

.kh-location-cta .kh-cta-actions .kh-button-wrap { align-self: start; }


/* DIE HANDLUNGSKARTE */
.kh-cta-card {
  display: grid;
  gap: var(--kh-space-sm);
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-shadow-lg);
}

.kh-cta-card__label {
  margin: 0;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
}

.kh-cta-card__status {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin: 0;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-700);
}

.kh-cta-card__status::before {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--kh-radius-circle, 50%);
  background-color: currentColor;
}

.kh-cta-card__status--success { color: var(--kh-color-success); }
.kh-cta-card__status--warning { color: var(--kh-color-warning); }
.kh-cta-card__status--neutral { color: var(--kh-color-ink-500); }

/* DER TERMIN STEHT NUR DA, WO ES IHN GIBT
   Nicht jeder Standort hat einen Kalender; booking.css verbirgt
   den Buchungsabschnitt dann selbst. Die Schaltfläche ist
   deshalb ausgeblendet und erscheint nur, wenn auf der Seite
   tatsächlich ein Buchungswidget steht.

   Die Richtung ist Absicht: verborgen als Grundzustand, sichtbar
   als Ausnahme. Kennt ein Browser :has() nicht, bleibt die
   Schaltfläche weg — und nicht ein Verweis auf einen Anker, an
   dem nichts steht. */
.kh-cta-card__appointment { display: none; }

body:has(.cnv-booking) .kh-location-cta .kh-cta-card__appointment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-lg);
  border-radius: var(--kh-radius-sm);
  /* FARBSTUFE KORRIGIERT — derselbe Fehler wie in career.css.
     500 ist die Basis (#E60000), 600 der Hover (#BD0000), 700 der
     Active-Zustand (#820000). Hier stand 600 als Ruhezustand. */
  background-color: var(--kh-color-primary-500, #E60000);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-location-cta .kh-cta-card a.kh-cta-card__appointment { color: var(--kh-color-ink-inverse); }

.kh-location-cta .kh-cta-card a.kh-cta-card__appointment:hover {
  background-color: var(--kh-color-primary-600);
  color: var(--kh-color-ink-inverse);
}

.kh-location-cta .kh-cta-card a.kh-cta-card__appointment:active {
  background-color: var(--kh-color-primary-700);
  color: var(--kh-color-ink-inverse);
}

/* ANRUFEN MIT ZAHL
   Im Kopf steht nur das Wort — hier die Nummer, und zwar gross
   genug, um sie abzulesen und in ein anderes Gerät zu tippen.
   Das ist der inhaltliche Unterschied zur Kopfleiste. */
.kh-location-cta .kh-cta-card a.kh-cta-card__call {
  display: grid;
  gap: 2px;
  min-block-size: var(--kh-control-height-lg);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 2px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  color: var(--kh-color-ink-900);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-location-cta .kh-cta-card a.kh-cta-card__call:hover {
  border-color: var(--kh-color-primary-text);
  color: var(--kh-color-primary-text);
}

.kh-cta-card__call-label {
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-location-cta .kh-cta-card a.kh-cta-card__call:hover .kh-cta-card__call-label {
  color: inherit;
}

.kh-cta-card__call-number {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.kh-cta-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs) var(--kh-space-lg);
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-location-cta .kh-cta-card a.kh-cta-card__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-semibold);
  color: var(--kh-color-ink-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.kh-location-cta .kh-cta-card a.kh-cta-card__link:hover {
  color: var(--kh-color-primary-text);
  text-decoration-thickness: 2px;
}

.kh-cta-card__appointment:focus-visible,
.kh-cta-card__call:focus-visible,
.kh-cta-card__link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {

  .kh-cta-card__appointment,
  .kh-cta-card__call,
  .kh-cta-card__link { transition: none; }
}


/* ==========================================================
   ÖFFNUNGSZEITEN DER WOCHE  ·  .kh-location-hours
   ----------------------------------------------------------
   Eine Liste, keine Karte und keine Tabelle. Sieben Zeilen
   sind kürzer als jeder Aufklappmechanismus, deshalb steht
   die Woche immer offen da.

   KEIN KARTENRAHMEN
   Der Abschnitt ist eine Fläche im Lesefluss. Ein zusätzliches
   Kärtchen mit Schatten würde die Seite in Richtung
   Kartenraster schieben — genau das soll sie nicht.
   ========================================================== */

/*
 * KEINE ÜBERSCHRIFT OHNE INHALT
 *
 * Die Überschrift gehört der Elementor-Vorlage, der Inhalt dem Kurzbefehl.
 * Liefert der Kurzbefehl nichts — kein Standort, keine gespeicherten Zeiten,
 * keine Koordinaten —, verschwindet der ganze Abschnitt. Gelöst wie beim
 * Buchungsabschnitt und bei „Über diesen Shop": am tatsächlich gerenderten
 * Ergebnis, nicht an einer zweiten Zuständigkeitsprüfung.
 */
.kh-location-opening:not(:has(.kh-location-hours)),
.kh-location-map:not(:has(.kh-about-map)),
.kh-location-rating-wrap:not(:has(.kh-location-rating)) {
  display: none;
}


/* ==========================================================
   DAS GLOBALE BEWERTUNGSWIDGET AUF STANDORTSEITEN
   ----------------------------------------------------------
   Reviews zeigt unten rechts ein schwebendes Widget mit der
   UNTERNEHMENSWEITEN Google-Bewertung. Auf einer Shop-Seite
   steht daneben seit 4F die Bewertung DIESES Shops — zwei
   verschiedene Google-Zahlen auf einer Seite, und die
   schwebende ist die auffälligere. Für einen Besucher ist das
   nicht auflösbar.

   WARUM NUR HIER UND WARUM IM THEME
   Das Widget bleibt überall sonst unverändert: auf der
   Startseite, bei den Leistungen, im Kontakt vertritt es das
   Unternehmen und ist dort richtig. Die Einstellung des
   Plugins wird NICHT angefasst — das wäre eine globale
   Entscheidung für eine örtliche Dopplung. Welche Bewertung
   eine Seite zeigt, ist eine Frage der Seite, also des Themes.

   body.single-convi_location ist die Kernklasse von
   WordPress für die Einzelansicht des Beitragstyps - nicht
   postid-* (je Beitrag) und nicht elementor-page-251 (gilt nur,
   solange genau diese Vorlage zuständig ist).

   ZWEI ELEMENTE, NICHT EINES
   Zum Widget gehört ein zweiter schwebender Teil: .cmgr-mini,
   der runde Knopf, der nach dem Schliessen übrig bleibt
   („Google Bewertungswidget wieder einblenden"). Ohne ihn
   mitzunehmen bliebe ein Knopf stehen, der nichts Sichtbares
   mehr öffnet. .cmgr-widget deckt beide Spielarten free und
   pro ab, weil die Basisklasse in beiden Fällen gesetzt wird.

   Rein darstellend: das Markup bleibt, es wird nichts
   abgeschaltet, nichts umkonfiguriert und kein Datensatz
   verändert. display:none nimmt den Teil auch aus dem
   Accessibility-Baum - Vorlesesoftware hört die zweite
   Bewertung also ebenfalls nicht.
   ========================================================== */

body.single-convi_location .cmgr-widget[data-cmgr-widget],
body.single-convi_location .cmgr-mini {
  display: none;
}


/* ==========================================================
   GOOGLE-BEWERTUNG DIESES STANDORTS  ·  .kh-location-rating
   ----------------------------------------------------------
   Ein schmaler Vertrauensstreifen, kein Bewertungskärtchen.
   Keine Fläche, kein Schatten, kein Rahmen um das Ganze: der
   Streifen sitzt direkt unter dem Hero und soll die Seite
   nicht in Richtung Kartenraster schieben.

   ROT NUR AM VERWEIS
   Die Sterne bleiben in ihrem eigenen Gelbton (eine Bewertung
   ist kein Markenelement), die Fläche bleibt neutral. Die
   Markenfarbe berührt nur den Textverweis.
   ========================================================== */

.kh-location-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kh-space-xs) var(--kh-space-md);
  padding-block: var(--kh-space-sm);
  border-block: 1px solid var(--kh-color-line-200);
}

/*
 * Die Sterne: zwei übereinanderliegende Textzeilen, die obere auf
 * die Bewertung beschnitten. Kein Bild, kein SVG-Sprite, kein
 * JavaScript — und dadurch auch kein halber Stern, der bei 4,5
 * falsch aufgerundet wäre.
 */
.kh-location-rating__stars {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.kh-location-rating__stars-track { color: var(--kh-color-line-200); }

.kh-location-rating__stars-fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: #f5a623;
}

.kh-location-rating__value {
  font-weight: var(--kh-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-900);
}

.kh-location-rating__count {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.kh-location-rating__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-semibold);
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.kh-location-rating__link:hover { text-decoration-thickness: 2px; }

.kh-location-rating__link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Quellennennung ist Pflicht, aber keine Schlagzeile. */
.kh-location-rating__attribution {
  margin-inline-start: auto;
  font-size: var(--kh-text-xs, 0.75rem);
  color: var(--kh-color-ink-500);
}

.kh-location-rating__attribution .cmgr-gm-attr { color: inherit; }

/*
 * Mobil: Sterne und Zahl bleiben zusammen in der ersten Zeile,
 * Anzahl und Verweis dürfen darunter umbrechen. Die Nennung
 * verliert ihren rechten Anschlag, sonst stünde sie allein in
 * einer eigenen Zeile am Rand.
 */
@media (max-width: 600px) {

  .kh-location-rating { gap: var(--kh-space-xs) var(--kh-space-sm); }

  .kh-location-rating__attribution { margin-inline-start: 0; }
}

.kh-location-hours__list {
  margin: 0;
  display: grid;
  gap: 0;
}

.kh-location-hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kh-space-xs) var(--kh-space-md);
  padding-block: var(--kh-space-sm);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-location-hours__row:last-child { border-block-end: 0; }

.kh-location-hours__day {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kh-space-xs);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-900);
}

.kh-location-hours__value {
  margin: 0;
  display: grid;
  gap: 2px;
  justify-items: end;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-700);
}

.kh-location-hours__closed { color: var(--kh-color-ink-500); }

/*
 * DER HEUTIGE TAG
 *
 * Er wird auf drei Wegen kenntlich gemacht: durch die sichtbare
 * Beschriftung „Heute", durch aria-current="date" und durch
 * Schriftschnitt. Farbe allein wäre für rund jeden zwölften
 * Mann nicht unterscheidbar — und für Vorlesesoftware gar nicht.
 */
.kh-location-hours__row--today .kh-location-hours__value {
  color: var(--kh-color-ink-900);
  font-weight: var(--kh-font-weight-semibold);
}

.kh-location-hours__today {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--kh-space-xs);
  padding-block: 2px;
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-700);
  font-size: var(--kh-text-xs, 0.75rem);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kh-location-hours__note {
  margin: var(--kh-space-sm) 0 0;
  max-width: var(--kh-measure);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* Unter 360px bekommen Tag und Zeit je eine eigene Zeile: nebeneinander
   würde „Donnerstag" umbrechen und die Zeit vom Tag abreissen. */
@media (max-width: 359px) {

  .kh-location-hours__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .kh-location-hours__value { justify-items: start; }
}


/* ==========================================================
   ANFAHRT · EINZELSTANDORT  ·  .kh-location-map
   ----------------------------------------------------------
   Nur die Masse. Marker, Popup, Bedienelemente, Attribution,
   der Sperr- und der Fehlerzustand kommen unverändert aus
   locations-map.css — hier wird nichts davon nachgebaut.

   WARUM FLACHER ALS SONST
   Auf „Über uns" und in der Filialübersicht ist die Karte
   Arbeitsmittel und darf hoch sein. Auf einer Shop-Seite ist
   sie eine Ortsangabe: ein Marker, kein Suchraum. Sie soll die
   folgende Handlungsaufforderung nicht aus dem Bild schieben.
   ========================================================== */

.kh-location-map .kh-about-map__canvas { height: 320px; }

@media (min-width: 768px) {

  .kh-location-map .kh-about-map__canvas { height: 420px; }
}

@media (min-width: 1024px) {

  .kh-location-map .kh-about-map__canvas { height: 420px; }
}

/*
 * Der gesperrte Zustand soll wie ein Abschnitt aussehen und nicht wie ein
 * defektes Bauteil. Er bekommt deshalb dieselbe Mindesthöhe wie die Karte,
 * eine ruhige Fläche und eine Linie — die Seite springt beim Einwilligen
 * nicht, und ohne Einwilligung steht dort trotzdem etwas Ganzes.
 */
.kh-location-map .kh-about-map__blocked {
  min-block-size: 320px;
  border-radius: var(--kh-radius-md);
  border: 1px solid var(--kh-color-line-200);
  background-color: var(--kh-color-surface-050);
}

@media (min-width: 768px) {

  .kh-location-map .kh-about-map__blocked { min-block-size: 420px; }
}

/* Keine waagerechte Bildlaufleiste: Leaflet rechnet mit der Breite des
   Elternelements, die Kacheln dürfen darüber nicht hinausragen. */
.kh-location-map .kh-about-map {
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--kh-radius-md);
}


/* ==========================================================
   SHOP-SEITE · KOMPOSITION (Phase 6A)
   ----------------------------------------------------------
   Hier steht ausschliesslich ANORDNUNG. Jede Flaeche, jedes
   Raster und jedes Tiefenmuster kommt aus dem bestehenden
   System (kh-section--*, kh-card--*, kh-media-slot,
   kh-proof-strip, kh-grid--*). Es entsteht keine zweite
   Komponentenfamilie.

   Die Abschnittsklassen der Vorlage bleiben unveraendert —
   kh-location-rating-wrap, -opening, -text, -map, -booking —,
   weil die selbstverbergenden Regeln weiter oben genau an
   ihnen haengen. Ein Shop ohne Bewertung, ohne Zeiten, ohne
   Koordinaten oder ohne Kalender verliert dadurch weiterhin
   genau seinen Abschnitt und nicht die Komposition.
   ========================================================== */

/* --- Belegstreifen an der Kante des Kopfbereichs ----------- */

/*
 * Der Streifen schiebt sich ueber die Unterkante des roten
 * Kopfbereichs. Das ist der Grund, warum er ueberhaupt als
 * Flaeche wahrnehmbar ist: eine weisse Karte auf weissem Grund
 * waere nur eine Haarlinie. Halb auf Rot, halb auf Weiss hat sie
 * Kontrast und bindet Kopfbereich und Inhalt zusammen.
 *
 * Deshalb faellt das obere Polster des Abschnitts weg — sonst
 * frisst es die Verschiebung auf, statt sie nach oben zu tragen.
 */
.kh-location-rating-wrap { padding-block-start: 0; }

.kh-location-rating-wrap .kh-proof-strip {
  margin-block-start: calc(var(--kh-space-xl) * -1);
}

@media (min-width: 64em) {

  .kh-location-rating-wrap .kh-proof-strip {
    margin-block-start: calc(var(--kh-space-3xl) * -1);
  }
}


/* --- Über diesen Shop: Editorial statt Fliesstext ---------- */

.kh-location-story {
  display: grid;
  gap: var(--kh-space-xl);
  align-items: start;
}

@media (min-width: 64em) {

  /* Asymmetrisch zugunsten des Textes. Die Shopbeschreibungen
     sind kurz (45-80 Woerter); bekaeme das Bild die groessere
     Spalte, stuende eine grosse leere Flaeche neben drei Zeilen
     Text. Das Verhaeltnis folgt dem Inhalt, nicht dem Schema. */
  .kh-location-story {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kh-space-3xl);
  }

  .kh-location-story--media-start > :first-child { order: 2; }
}

/* Querformat statt hochkant: eine ruhige, breite Flaeche wirkt
   als vorgesehener Bildplatz, eine hohe leere Flaeche wirkt wie
   ein Fehler. */
.kh-location-story__media { aspect-ratio: 16 / 10; }

@media (min-width: 64em) {

  .kh-location-story__media { aspect-ratio: 4 / 3; }
}


/* --- Öffnungszeiten: erhabene Flaeche mit Beikarte --------- */

.kh-location-hours-layer {
  display: grid;
  gap: var(--kh-space-lg);
  align-items: start;
}

@media (min-width: 64em) {

  /* stretch statt start: die Bildflaeche soll auf derselben
     Unterkante enden wie die Zeitentafel. Sonst steht unter ihr
     ein toter Rest, der wie ein Fehler aussieht. */
  .kh-location-hours-layer {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--kh-space-2xl);
    align-items: stretch;
  }
}

/* Der Abschnittskopf steht naeher am Inhalt, zu dem er gehoert.
   Das grosse Polster des Abschnitts trennt bereits nach aussen —
   innen noch einmal denselben Abstand zu setzen, reisst die
   Ueberschrift von ihrer Tafel los. */
.kh-location-opening .kh-stack--lg,
.kh-location-map .kh-stack--lg { gap: var(--kh-space-xl); }

/* Die Zeitentafel bekommt endlich eine Flaeche statt nackt auf
   Weiss zu stehen. */
.kh-location-hours-card {
  padding: var(--kh-card-padding);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-sm);
}

@media (min-width: 64em) {

  .kh-location-hours-card { padding: var(--kh-space-2xl); }
}

/* Die Beikarte schiebt sich ueber die Kante der Zeitentafel.
   Erst ab 64em, darunter stehen beide schlicht untereinander —
   eine Ueberlappung auf schmalen Geraeten waere nur Unruhe. */
@media (min-width: 64em) {

  .kh-location-hours-aside { margin-inline-start: calc(var(--kh-space-2xl) * -1); }
}


/* --- Anfahrt: gerahmte Karte ------------------------------ */

/* Rahmen um die Karte: dieselbe Kante wie bei allen Flaechen,
   damit die Leaflet-Kacheln nicht roh im Abschnitt stehen. */
.kh-location-route__frame {
  padding: var(--kh-space-xs);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-sm);
  overflow: hidden;
}

.kh-location-route__frame .kh-about-map { border-radius: var(--kh-radius-md); }


/* --- Buchung als Anwendungsflaeche ------------------------ */

/*
 * Die Anwendungsflaeche IST das Widget — kein Kasten darum.
 *
 * Erster Versuch in 6A war ein eigener weisser Rahmen mit
 * Polster um das Widget. Das Rendering hat gezeigt, warum das
 * falsch war: das Widget bringt Flaeche, Kante und Radius selbst
 * mit, und seine Fusszeile schliesst bündig mit SEINEN Kanten
 * ab. Ein zweiter weisser Kasten daneben laesst die Fusszeile
 * wie eine eingerueckte Box im Kasten aussehen, statt wie den
 * Abschluss der Anwendung.
 *
 * Bleibt also nur die Erhebung. drop-shadow statt box-shadow,
 * weil der Schatten damit der tatsaechlichen Rundung des Widgets
 * folgt — und die ist im Backend einstellbar, hier also nicht
 * bekannt. Am Plugin aendert sich nichts.
 */
.kh-location-booking .elementor-widget-convi_booking {
  filter:
      drop-shadow(0 4px 8px rgba(0, 0, 0, .05))
      drop-shadow(0 16px 40px rgba(0, 0, 0, .10));
}

/* Die Bildflaeche begleitet die Zeitentafel, sie ueberragt sie
   nicht. Auf breiten Geraeten nimmt sie deren Hoehe an. */
.kh-location-hours-aside .kh-media-slot { aspect-ratio: 16 / 10; }

@media (min-width: 64em) {

  .kh-location-hours-aside { block-size: 100%; }

  .kh-location-hours-aside .kh-media-slot {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 320px;
  }
}