/* ================================================================
   Verzeichnis — Regionales Anbieter-Verzeichnis
   Helles Theme (markenangeglichen) — Restyling nach Design-System.
   Gold primär / Grün sekundär, gedämpfte Kategorie-Akzente auf Cream.
   Render-/Filterlogik in verzeichnis.js bleibt unverändert.
   ================================================================ */

/* --- Local tokens (light, brand-aligned) --- */
:root {
  /* Paper + ink */
  --vz-page:          #f5ebd7;  /* warm cream page */
  --vz-surface:       #fffdf8;  /* cards / panels */
  --vz-surface-alt:   #faf3e3;  /* inputs / sunken fills */
  --vz-surface-sunken:#f0e6d0;

  --vz-ink:        #1f3a32;     /* strong text — green-ink */
  --vz-ink-soft:   #42554c;     /* body */
  --vz-ink-mute:   #6f7d73;     /* meta */
  --vz-ink-faint:  #98a39a;     /* placeholder */

  /* Brand accents — GOLD primary, GREEN secondary */
  --vz-gold:        #b8801f;    /* deep gold — links / focus / primary text */
  --vz-gold-strong: #97681300;  /* (reserved) */
  --vz-gold-700:    #8f6516;    /* gold hover */
  --vz-gold-bright: #e8b871;    /* bright gold — button bg / highlight */
  --vz-green:       #0A8C5C;    /* brand green — secondary, success */
  --vz-green-soft:  #e4f1ea;

  /* Navbar chrome — navy + teal (wie im Design) */
  --vz-navy:        #122237;
  --vz-navy-deep:   #0d1826;
  --vz-teal:        #3fbf8e;
  --vz-teal-bright: #5fd4a4;
  --vz-teal-deep:   #2f9d73;
  --vz-header-fg:   #eaf1f5;
  --vz-header-muted:#9fb0c0;

  /* Borders / dividers (warm) */
  --vz-border:        #e6dcc6;
  --vz-border-strong: #d6c7a8;
  --vz-divider:       #ece2cf;

  --vz-notdienst:      #c1493e; /* emergency red */
  --vz-notdienst-soft: #f8e9e7;
  --vz-web:            #b04a2a; /* clay-red — Website-Links auf Karten */
  --vz-web-hover:      #8f3c20;

  /* Radii (design system) */
  --vz-r-pill: 999px;
  --vz-r-ctrl: 14px;
  --vz-r-card: 18px;
  --vz-r-sm:   10px;

  /* Warm-tinted shadows (brown base) */
  --vz-shadow-sm: 0 1px 3px rgba(74,52,33,.07), 0 1px 2px rgba(74,52,33,.05);
  --vz-shadow-md: 0 4px 12px rgba(74,52,33,.08), 0 2px 4px rgba(74,52,33,.05);
  --vz-shadow-lg: 0 12px 28px rgba(74,52,33,.10), 0 4px 10px rgba(74,52,33,.06);

  /* Gold focus ring */
  --vz-focus: 0 0 0 3px rgba(184,128,31,.28);

  /* Compatibility aliases (some rules reference these names) */
  --vz-text-on-cream: var(--vz-ink);
}

/* --- Category accent scope (muted design palette → site keys) ---
   Set data-cat="…" on a card/chip; descendants read --c-solid/-ink/-soft/-border. */
[data-cat="hufschmied"]      { --c-solid:#9a6a2f; --c-ink:#6f4a1c; --c-soft:#f4ead7; --c-border:#e3d0ac; }
[data-cat="osteopath"]       { --c-solid:#2e7c8c; --c-ink:#205662; --c-soft:#e3f0f2; --c-border:#c1dde1; }
[data-cat="physiotherapeut"] { --c-solid:#4e8b57; --c-ink:#356040; --c-soft:#e7f1e8; --c-border:#c8e0cb; }
[data-cat="chiropraktiker"]  { --c-solid:#8e5a7d; --c-ink:#653f59; --c-soft:#f1e7ee; --c-border:#ddc7d6; }
[data-cat="tierarzt"]        { --c-solid:#356a9c; --c-ink:#244a6e; --c-soft:#e6eef5; --c-border:#c2d6e6; }
[data-cat="tierklinik"]      { --c-solid:#5b5fa6; --c-ink:#41447a; --c-soft:#ecedf7; --c-border:#d2d3ea; }

/* ================================================================
   Page surface — flip global dark theme to warm cream for this page
   ================================================================ */
body {
  background: var(--vz-page) !important;
  color: var(--vz-ink-soft);
}

/* ================================================================
   Sub-page nav (kept dark sage-green — brand-consistent chrome)
   ================================================================ */
.vz-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 24, 38, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vz-navy);
  box-shadow: 0 2px 0 0 var(--vz-teal), 0 6px 18px rgba(13, 24, 38, 0.18);
}
.vz-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.vz-nav__brand {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--vz-header-fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variation-settings: "SOFT" 40, "opsz" 40;
  white-space: nowrap;
}
.vz-nav__brand em {
  font-style: italic;
  font-weight: 500;
  color: var(--vz-teal);
}
.vz-nav__right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.vz-nav__link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vz-header-muted);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.vz-nav__link:hover { color: var(--vz-teal); }
.vz-nav__link--active { color: var(--vz-teal); }
.vz-nav__cta {
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 700;
  color: var(--vz-navy-deep);
  background: var(--vz-teal);
  border: none;
  border-radius: var(--vz-r-ctrl);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, transform 0.12s;
}
.vz-nav__cta:hover { background: var(--vz-teal-bright); }
.vz-nav__cta:active { transform: translateY(1px); }
.vz-nav__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63,191,142,0.45); }
@media (max-width: 560px) {
  /* Mobile-Nav muss in die Viewport-Breite passen → sonst Horizontal-Wobble.
     Nur Marke + CTA behalten; Marke kleiner, CTA kompakter, weniger Padding. */
  .vz-nav__inner { padding: 12px 16px; gap: 12px; }
  .vz-nav__brand { font-size: 16px; }
  .vz-nav__right { gap: 14px; }
  .vz-nav__link { display: none; } /* auch der aktive „Verzeichnis"-Link = aktuelle Seite, redundant zur Marke */
  .vz-nav__cta { padding: 8px 13px; font-size: 12.5px; }
}
/* Sehr schmale Handys (iPhone SE 1. Gen 320px u. ä.): Marke + CTA noch etwas kompakter */
@media (max-width: 380px) {
  .vz-nav__inner { padding: 12px 13px; gap: 10px; }
  .vz-nav__brand { font-size: 14px; }
  .vz-nav__cta { padding: 8px 10px; font-size: 12px; }
}

/* ================================================================
   Layout
   ================================================================ */
.vz {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px var(--pad-x, clamp(20px, 5vw, 80px)) 96px;
}

/* --- Header --- */
.vz__header {
  text-align: center;
  margin-bottom: 44px;
}
.vz__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--vz-gold);
  margin-bottom: 16px;
}
.vz__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--vz-ink);
  margin: 0 0 20px;
}
.vz__title em {
  font-style: italic;
  color: var(--vz-gold);
}
.vz__lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--vz-ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* Beta hint */
.beta-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 620px;
  margin: 22px auto 0;
  padding: 12px 16px;
  background: var(--vz-surface);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-ctrl);
  box-shadow: var(--vz-shadow-sm);
  text-align: left;
}
.beta-hint__badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--vz-gold);
  padding: 3px 9px;
  border-radius: var(--vz-r-pill);
}
.beta-hint__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vz-ink-mute);
  margin: 0;
}
.beta-hint__text a { color: var(--vz-gold); text-decoration: underline; text-decoration-style: dotted; }

/* Self-entry button */
.vz__self-entry-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 11px 22px;
  font: inherit;
  font-family: var(--font-text, var(--font-body));
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--vz-r-ctrl);
  background: var(--vz-gold-bright);
  color: #4a2f0c;
  cursor: pointer;
  box-shadow: var(--vz-shadow-sm);
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
}
.vz__self-entry-btn:hover { background: #dca85c; box-shadow: var(--vz-shadow-md); }
.vz__self-entry-btn:active { transform: translateY(1px); }
.vz__self-entry-btn:focus-visible { outline: none; box-shadow: var(--vz-focus); }

/* ================================================================
   Search Bar
   ================================================================ */
.vz-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  padding: 18px 20px;
  background: var(--vz-surface);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-card);
  box-shadow: var(--vz-shadow-sm);
}
.vz-search__plz {
  flex: 0 0 150px;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 11px 14px;
  background: var(--vz-surface-alt);
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-ctrl);
  color: var(--vz-ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vz-search__plz::placeholder { color: var(--vz-ink-faint); }
.vz-search__plz:hover { border-color: var(--vz-ink-faint); }
.vz-search__plz:focus {
  border-color: var(--vz-gold);
  box-shadow: var(--vz-focus);
}
.vz-search__geo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  background: var(--vz-surface);
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-ctrl);
  color: var(--vz-ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.vz-search__geo:hover { border-color: var(--vz-ink-faint); background: var(--vz-surface-sunken); }
.vz-search__geo:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-search__geo:disabled { opacity: 0.5; cursor: wait; }
.vz-search__geo svg { width: 16px; height: 16px; color: var(--vz-gold); }
.vz-search__radius-wrap {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vz-search__radius {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--vz-border-strong);
  border-radius: 3px;
  outline: none;
}
.vz-search__radius:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-search__radius::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vz-gold);
  cursor: pointer;
  border: 2px solid var(--vz-surface);
  box-shadow: var(--vz-shadow-sm);
}
.vz-search__radius::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--vz-gold); cursor: pointer; border: 2px solid var(--vz-surface);
}
.vz-search__radius-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vz-ink-mute);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* ================================================================
   Category Filter Chips
   ================================================================ */
.vz-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.vz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 15px;
  border-radius: var(--vz-r-pill);
  border: 1px solid var(--vz-border);
  background: var(--vz-surface);
  color: var(--vz-ink-mute);
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  user-select: none;
}
.vz-chip__icon {
  width: 15px; height: 15px;
  flex: none;
  stroke: var(--c-solid, currentColor); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vz-chip:hover { border-color: var(--vz-border-strong); color: var(--vz-ink); }
.vz-chip--active .vz-chip__icon { stroke: var(--c-solid); }
.vz-chip:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-chip--active {
  background: var(--c-soft, var(--vz-surface-sunken));
  border-color: var(--c-border, var(--vz-border-strong));
  color: var(--c-ink, var(--vz-ink));
  font-weight: 600;
}
.vz-chip--notdienst {
  border-color: var(--vz-notdienst);
  color: var(--vz-notdienst);
}
.vz-chip--notdienst.vz-chip--active {
  background: var(--vz-notdienst);
  border-color: var(--vz-notdienst);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(193,73,62,0.18);
}

/* ================================================================
   Result Info
   ================================================================ */
.vz-results-info {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vz-ink-mute);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.vz-results-info::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vz-divider);
}

/* ================================================================
   View Toggle (Mobile)
   ================================================================ */
.vz-view-toggle {
  display: none;
  gap: 8px;
  margin-bottom: 20px;
}
.vz-view-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--vz-r-ctrl);
  border: 1px solid var(--vz-border);
  background: var(--vz-surface);
  color: var(--vz-ink-mute);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.vz-view-btn svg { width: 16px; height: 16px; }
.vz-view-btn:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-view-btn--active {
  background: var(--vz-ink);
  border-color: var(--vz-ink);
  color: #fff;
  font-weight: 600;
}

/* ================================================================
   Content: Map + List Layout
   ================================================================ */
.vz-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.vz-content__list { min-height: 200px; }
.vz-content__map {
  position: sticky;
  top: 80px;
}
.vz-map {
  width: 100%;
  height: 520px;
  border-radius: var(--vz-r-card);
  border: 1px solid var(--vz-border);
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--vz-shadow-sm);
}

/* ================================================================
   Map Legend
   ================================================================ */
.vz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 0 4px;
}
.vz-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--vz-ink-mute);
  text-transform: uppercase;
}
.vz-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================================
   Provider List
   ================================================================ */
.vz-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 18px;
  align-items: stretch;
}

/* ================================================================
   Provider Card  (design anatomy, light surface, top category accent)
   ================================================================ */
.vz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vz-surface);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-card);
  box-shadow: var(--vz-shadow-sm);
  overflow: hidden;
  outline: none;
  transition: transform 0.2s cubic-bezier(0.2,0,0.1,1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}
.vz-card:hover,
.vz-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--vz-border-strong);
  box-shadow: var(--vz-shadow-lg);
}
.vz-card:focus-visible { box-shadow: var(--vz-focus), var(--vz-shadow-lg); }

/* Top category accent hairline */
.vz-card__accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--c-solid, var(--vz-gold));
}

.vz-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

/* Head: avatar + title group */
.vz-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vz-card__avatar {
  width: 108px;
  height: 108px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--c-soft, var(--vz-surface-sunken));
  border: 1px solid var(--c-border, var(--vz-border));
  color: var(--c-solid, var(--vz-ink-mute));
  overflow: hidden;
}
.vz-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vz-card__avatar svg { width: 51px; height: 51px; }
.vz-card__titlegroup {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vz-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vz-ink);
  margin: 0;
}
.vz-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Category badge (pill with icon, category-tinted) */
.vz-card__cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-text, var(--font-body));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 4px 11px 4px 9px;
  border-radius: var(--vz-r-pill);
  background: var(--c-soft, var(--vz-surface-sunken));
  color: var(--c-ink, var(--vz-ink));
  border: 1px solid var(--c-border, var(--vz-border));
  line-height: 1.2;
}
.vz-card__cat-badge svg {
  width: 14px; height: 14px;
  stroke: var(--c-solid, var(--vz-ink-mute));
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Notdienst / distance badges */
.vz-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--vz-r-pill);
  white-space: nowrap;
  font-weight: 600;
}
.vz-card__badge svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vz-card__badge--notdienst {
  background: var(--vz-notdienst-soft);
  border: 1px solid #eccac6;
  color: var(--vz-notdienst);
}
.vz-card__badge--distanz {
  background: var(--vz-surface-sunken);
  border: 1px solid var(--vz-border);
  color: var(--vz-ink-mute);
}

/* Verifiziert-Badge (Vertrauenssignal, Design-Stil) */
.vz-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-text, var(--font-body));
  font-size: 12px;
  font-weight: 600;
  color: var(--vz-green);
}
.vz-card__verified svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Kontaktzeilen (Telefon / Website / Adresse) — Design ContactRow */
.vz-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vz-card__contact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--vz-ink-soft);
  text-decoration: none;
}
.vz-card__contact svg {
  width: 16px; height: 16px;
  flex: none; margin-top: 1px;
  stroke: var(--vz-ink-mute); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vz-card__contact span { word-break: break-word; }
.vz-card__contact-val { font-family: var(--font-mono); }
a.vz-card__contact { color: var(--vz-ink); }
a.vz-card__contact:hover { color: var(--vz-gold-700); }
a.vz-card__contact:hover svg { stroke: var(--vz-gold-700); }
a.vz-card__contact:focus-visible { outline: none; box-shadow: var(--vz-focus); border-radius: 4px; }
/* Website-Link in Clay-Rot (wie im Design) */
a.vz-card__contact--web { color: var(--vz-web); }
a.vz-card__contact--web svg { stroke: var(--vz-web); }
a.vz-card__contact--web:hover { color: var(--vz-web-hover); }
a.vz-card__contact--web:hover svg { stroke: var(--vz-web-hover); }

/* Footer: Distanz (links) + Route-Button (rechts) */
.vz-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--vz-divider);
}
.vz-card__distance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vz-ink-mute);
}
.vz-card__distance svg { width: 13px; height: 13px; fill: var(--vz-ink-mute); stroke: none; }
.vz-card__distance--hint { color: var(--vz-ink-faint); font-style: italic; letter-spacing: 0; }
.vz-card__distance--hint svg { display: none; }
.vz-card__route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--vz-web);
  background: #faf0e9;
  border: 1px solid #efdccf;
  border-radius: var(--vz-r-sm);
  padding: 7px 14px;
  transition: background 0.16s, border-color 0.16s;
}
.vz-card__route:hover { background: #f4e3d7; border-color: #e6cab8; }
.vz-card__route:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-card__route svg { width: 14px; height: 14px; fill: var(--vz-web); stroke: none; }

/* Footer-Aktionen (Teilen + Route, rechts) */
.vz-card__footer-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vz-card__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--vz-ink);
  background: var(--vz-surface);
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-sm);
  padding: 7px 13px;
  transition: background 0.16s, border-color 0.16s;
}
.vz-card__share:hover { background: var(--vz-surface-sunken); border-color: var(--vz-ink-faint); }
.vz-card__share:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-card__share svg { width: 14px; height: 14px; stroke: var(--vz-ink-mute); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hervorhebung beim Öffnen via geteiltem Link (?id=) */
.vz-card--shared {
  border-color: var(--vz-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,128,31,0.35), var(--vz-shadow-lg) !important;
}

/* Address row */
.vz-card__address {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--vz-ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vz-card__address svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  stroke: var(--vz-ink-mute);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  margin-top: 1px;
}

/* Spec / leistungen tags */
.vz-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vz-card__tag {
  font-family: var(--font-text, var(--font-body));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 11px;
  border-radius: var(--vz-r-pill);
  background: var(--c-soft, var(--vz-surface-alt));
  border: 1px solid var(--c-border, var(--vz-border));
  color: var(--c-ink, var(--vz-ink-soft));
}

/* Action buttons (Anrufen / Website / Route) */
.vz-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--vz-divider);
}
.vz-card__action {
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--vz-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--vz-r-sm);
  border: 1px solid var(--vz-border-strong);
  background: var(--vz-surface);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.vz-card__action:hover { background: var(--vz-surface-sunken); border-color: var(--vz-ink-faint); }
.vz-card__action:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-card__action svg {
  width: 14px; height: 14px;
  stroke: var(--vz-gold); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================
   Card: Meta links (Verifizieren + Entfernen) — subtle admin row
   ================================================================ */
.vz-card__meta-links {
  display: flex;
  gap: 6px 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.vz-card__meta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-family: var(--font-text, var(--font-body));
  font-size: 12px;
  font-weight: 500;
  color: var(--vz-ink-mute);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--vz-r-sm);
  transition: color 0.18s, background 0.18s;
}
.vz-card__meta-link:hover { color: var(--vz-gold-700); background: var(--vz-surface-sunken); }
.vz-card__meta-link:last-child:hover { color: var(--vz-notdienst); background: var(--vz-notdienst-soft); }
.vz-card__meta-link:focus-visible { outline: none; box-shadow: var(--vz-focus); }
.vz-card__meta-link svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
/* Verifiziert-Status (echt redaktionell geprüft) — Anzeige, kein Klick, grün */
.vz-card__meta-link--verified,
.vz-card__meta-link--verified:hover {
  color: var(--vz-green);
  background: transparent;
  cursor: default;
  font-weight: 600;
}
.vz-card__meta-link--verified svg { stroke: var(--vz-green); }

/* Card highlight on map hover */
.vz-card--highlight {
  border-color: var(--vz-gold) !important;
  box-shadow: 0 0 0 2px rgba(184,128,31,0.30), var(--vz-shadow-md) !important;
}

/* ================================================================
   Empty State
   ================================================================ */
.vz-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--vz-ink-mute);
}
.vz-empty__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  color: var(--vz-border-strong);
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.vz-empty__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--vz-ink);
  margin: 0 0 8px;
}
.vz-empty__text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--vz-ink-mute);
  max-width: 400px;
  margin: 0 auto;
}

/* ================================================================
   Loading Skeleton
   ================================================================ */
.vz-skeleton {
  background: var(--vz-surface);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-card);
  box-shadow: var(--vz-shadow-sm);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vz-skeleton__line {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--vz-surface-sunken) 25%, var(--vz-surface-alt) 50%, var(--vz-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: vz-shimmer 1.5s ease-in-out infinite;
}
.vz-skeleton__line--title { width: 65%; height: 22px; }
.vz-skeleton__line--badges { width: 40%; height: 16px; }
.vz-skeleton__line--addr { width: 80%; height: 14px; }
.vz-skeleton__line--actions { width: 55%; height: 30px; margin-top: 4px; }
@keyframes vz-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
   Toast / Feedback
   ================================================================ */
.vz-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: var(--font-text, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 12px 22px;
  border-radius: var(--vz-r-ctrl);
  box-shadow: var(--vz-shadow-lg);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  max-width: 480px;
  text-align: center;
}
.vz-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.vz-toast--warn { background: var(--vz-notdienst); color: #fff; }
.vz-toast--ok   { background: var(--vz-green); color: #fff; }
.vz-toast--info { background: var(--vz-ink); color: #f6efe0; }

/* ================================================================
   Generic Modal (Selbsteintrag, Beanspruchen) + Removal Modal
   ================================================================ */
.vz-modal-overlay,
.vz-removal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  background: rgba(31, 24, 12, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: vzFadeIn 0.2s ease;
}
.vz-modal-overlay { align-items: flex-start; padding: 24px 16px; overflow-y: auto; }
.vz-removal-overlay { align-items: center; padding: 16px; }
@keyframes vzFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vzSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.vz-modal,
.vz-removal-modal {
  position: relative;
  background: var(--vz-surface);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-card);
  width: 100%;
  box-shadow: var(--vz-shadow-lg);
  animation: vzSlideUp 0.25s ease;
}
.vz-modal { max-width: 560px; padding: 32px 28px 24px; margin: 32px 0; }
.vz-removal-modal { max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 32px 28px 24px; }
.vz-modal__close,
.vz-removal-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--vz-ink-mute);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--vz-r-sm);
}
.vz-modal__close:hover,
.vz-removal-modal__close:hover { color: var(--vz-ink); background: var(--vz-surface-sunken); }
.vz-modal__title,
.vz-removal-modal__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--vz-ink);
}
.vz-modal__info,
.vz-removal-modal__info {
  font-size: 0.86rem;
  color: var(--vz-ink-mute);
  margin: 0 0 8px;
}
.vz-modal__provider,
.vz-removal-modal__provider {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vz-ink);
  background: var(--vz-surface-sunken);
  padding: 8px 12px;
  border-radius: var(--vz-r-sm);
  margin-bottom: 20px;
}

/* ================================================================
   Forms (shared: Selbsteintrag, Beanspruchen, Entfernen)
   ================================================================ */
.vz-form__honeypot,
.vz-removal-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vz-form__fieldset {
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-r-ctrl);
  padding: 16px 16px 12px;
  margin: 0 0 18px;
}
.vz-form__fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vz-ink);
  padding: 0 6px;
}
.vz-form__field,
.vz-removal-form__field { margin-bottom: 14px; }
.vz-form__field label,
.vz-removal-form__field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vz-ink);
  margin-bottom: 5px;
}
.vz-form__req,
.vz-removal-form__req { color: var(--vz-notdienst); }
.vz-form__opt,
.vz-removal-form__opt { color: var(--vz-ink-mute); font-weight: 400; }
.vz-form__field input[type="text"],
.vz-form__field input[type="email"],
.vz-form__field input[type="tel"],
.vz-form__field input[type="url"],
.vz-form__field select,
.vz-form__field textarea,
.vz-removal-form__field input,
.vz-removal-form__field select,
.vz-removal-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-sm);
  background: var(--vz-surface);
  color: var(--vz-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.vz-form__field input:focus,
.vz-form__field select:focus,
.vz-form__field textarea:focus,
.vz-removal-form__field input:focus,
.vz-removal-form__field select:focus,
.vz-removal-form__field textarea:focus {
  outline: none;
  border-color: var(--vz-gold);
  box-shadow: var(--vz-focus);
}
.vz-form__field textarea,
.vz-removal-form__field textarea { resize: vertical; min-height: 64px; }
.vz-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.vz-form__field--grow { flex: 1; min-width: 140px; }
.vz-form__field--plz { width: 90px; flex: 0 0 90px; }
.vz-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--vz-ink-soft);
  cursor: pointer;
  line-height: 1.4;
}
.vz-form__checkbox-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--vz-gold); }
.vz-form__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-form__chip-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--vz-ink-soft);
  cursor: pointer;
  padding: 6px 13px;
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-pill);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vz-form__chip-label:has(input:checked) {
  border-color: var(--vz-gold);
  background: rgba(232,184,113,0.16);
  color: var(--vz-ink);
}
.vz-form__chip-label input { display: none; }
.vz-form__file-input { font: inherit; font-size: 0.85rem; color: var(--vz-ink-soft); }
.vz-form__file-hint { font-size: 0.76rem; color: var(--vz-ink-mute); margin: 4px 0 0; }
.vz-form__logo-preview { margin-top: 8px; }
.vz-form__logo-preview img {
  max-width: 80px;
  max-height: 80px;
  border-radius: var(--vz-r-sm);
  border: 1px solid var(--vz-border);
}
.vz-form__hint,
.vz-removal-form__hint {
  font-size: 0.78rem;
  color: var(--vz-ink-mute);
  margin: 12px 0 16px;
  line-height: 1.45;
}
.vz-form__actions,
.vz-removal-form__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.vz-form__cancel,
.vz-removal-form__cancel {
  padding: 10px 18px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--vz-border-strong);
  border-radius: var(--vz-r-ctrl);
  background: transparent;
  color: var(--vz-ink-mute);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vz-form__cancel:hover,
.vz-removal-form__cancel:hover { background: var(--vz-surface-sunken); color: var(--vz-ink); }
.vz-form__submit,
.vz-removal-form__submit {
  padding: 10px 22px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-radius: var(--vz-r-ctrl);
  background: var(--vz-gold-bright);
  color: #4a2f0c;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.vz-form__submit:hover,
.vz-removal-form__submit:hover { background: #dca85c; }
.vz-form__submit:active,
.vz-removal-form__submit:active { transform: translateY(1px); }
.vz-form__submit:disabled,
.vz-removal-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.vz-form__status,
.vz-removal-form__status {
  margin-top: 12px;
  font-size: 0.82rem;
  text-align: center;
  min-height: 1.2em;
}
.vz-form__status--error,
.vz-removal-form__status--error { color: var(--vz-notdienst); }
.vz-form__status--success,
.vz-removal-form__status--success { color: var(--vz-green); }

/* ================================================================
   Footer
   ================================================================ */
.vz-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px var(--pad-x, clamp(20px, 5vw, 80px)) 48px;
  text-align: center;
  border-top: 1px solid var(--vz-divider);
}
.vz-footer p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--vz-ink-mute);
  max-width: 600px;
  margin: 0 auto 14px;
}
.vz-footer__privacy {
  font-size: 12px !important;
  line-height: 1.55;
  max-width: 640px !important;
}
.vz-footer__privacy a,
.vz-footer a {
  color: var(--vz-gold);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.vz-footer__links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
}
.vz-footer__links a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vz-ink-mute);
  text-decoration: none;
  transition: color 0.15s;
}
.vz-footer__links a:hover { color: var(--vz-gold); }

/* ================================================================
   Leaflet Popup Override (already light — keep, align radii/shadow)
   ================================================================ */
.vz-popup { font-family: var(--font-body); line-height: 1.45; }
.vz-popup__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--vz-ink);
  margin: 0 0 4px;
}
.vz-popup__kat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vz-ink-mute);
  margin-bottom: 6px;
}
.vz-popup__addr { font-size: 13px; color: var(--vz-ink-soft); margin-bottom: 4px; }
.vz-popup__notdienst {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vz-notdienst);
  font-weight: 600;
  margin-bottom: 2px;
}
.vz-popup__dist { font-family: var(--font-mono); font-size: 10px; color: var(--vz-ink-mute); margin-bottom: 2px; }
.vz-popup__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vz-popup__action {
  font-family: var(--font-text, var(--font-body));
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: var(--vz-ink);
  padding: 5px 10px;
  border-radius: var(--vz-r-sm);
  border: 1px solid var(--vz-border-strong);
  transition: background 0.15s;
}
.vz-popup__action:hover { background: var(--vz-surface-sunken); }
.leaflet-popup-content-wrapper {
  border-radius: var(--vz-r-ctrl) !important;
  box-shadow: var(--vz-shadow-lg) !important;
}
.leaflet-popup-content { margin: 14px 16px !important; min-width: 180px; }

/* Remove default Leaflet icon box-shadow from custom markers */
.vz-marker { background: none !important; border: none !important; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 640px) {
  .vz-search { flex-direction: column; align-items: stretch; }
  .vz-search__plz { flex: 1 1 100%; }
  .vz-search__radius-wrap { flex: 1 1 100%; }
  .vz-card__name { font-size: 17px; }
  .vz-card__actions { gap: 6px; }
  .vz-card__action { font-size: 12px; padding: 6px 11px; }
}

@media (max-width: 860px) {
  .vz-view-toggle { display: flex; }
  .vz-content { grid-template-columns: 1fr; }
  .vz-content__map { position: relative; top: 0; }
  .vz-map { height: 400px; }
  .vz-content[data-view="list"] .vz-content__map { display: none; }
  .vz-content[data-view="map"] .vz-content__list { display: none; }
  .vz-legend { justify-content: center; }
}