/**
 * Vögi 2 — Launcher, Sidebar, Wunschfeld.
 *
 * Eingebunden aus inc/apis/voegi-assistant.php, wenn der Schalter aktiv ist.
 * Farben aus voegele_v2/src/styles/_variables.scss: $voe--green rgb(0,96,82),
 * $voe--contrast #B1D54F, $voe--green-light #e3ebe7, Text #1d1d1d.
 *
 * Desktop: rechte Schublade, Breite --voegi-width (420 px, per Griff bis
 * 50 vw). Ab 1200 px bekommt der Body rechts Platz, die Seite bleibt lesbar.
 * Mobile (< 760 px): Bottom-Sheet mit Höhe --voegi-height (40/70/95 vh).
 */

:root {
  --voegi-green: rgb(0, 96, 82);
  --voegi-green-dark: rgb(0, 72, 62);
  --voegi-contrast: #b1d54f;
  --voegi-green-light: #e3ebe7;
  --voegi-text: #1d1d1d;
  --voegi-muted: #5f6f6a;
  --voegi-border: #d9e2de;
  --voegi-font: "EuclidCircularB", Aller, ui-sans-serif, system-ui, sans-serif;
  --voegi-width: 420px;
  --voegi-height: 85vh;
  --voegi-z: 1045;
}
/* svh = kleiner Viewport (Adressleiste sichtbar). Die Höhe bleibt damit
   konstant, wenn die Leiste beim Scrollen ein- und ausfährt — mit dvh sprang
   das Sheet bei jedem Wisch, mit vh ragte es unter die Leiste. Die Bridge
   speichert Rasthöhen (55/85/97) ebenfalls in svh. */
@supports (height: 1svh) {
  :root {
    --voegi-height: 85svh;
  }
}

/* Der SleekAI-Knopf weicht, sobald Vögi 2 da ist. */
body.has-voegi-assistant .sleek-ai-chatbot-button,
body.has-voegi-assistant [data-sleek-ai-chatbot-index] {
  display: none !important;
}

/* ─── Launcher ─────────────────────────────────────────────────────────── */

.voegi-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--voegi-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--voegi-green);
  color: #fff;
  font: 700 15px/1 var(--voegi-font);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.voegi-launcher:hover,
.voegi-launcher:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  outline: none;
}
.voegi-launcher:focus-visible {
  box-shadow: 0 0 0 3px var(--voegi-contrast), 0 10px 26px rgba(0, 0, 0, 0.28);
}
.voegi-launcher__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
/* Ansprache aus der Seite heraus: Karte über dem Launcher, eine Frage zur
   Seite und zwei Chips. Erscheint nach einigen Sekunden, einmal je Sitzung. */
.voegi-ansprache {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: var(--voegi-z);
  width: min(340px, calc(100vw - 40px));
  padding: 14px 16px 14px;
  border-radius: 14px 14px 4px 14px;
  background: #fff;
  color: var(--voegi-text);
  font-family: var(--voegi-font);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.voegi-ansprache.is-da {
  opacity: 1;
  transform: none;
}
.voegi-ansprache__text {
  display: block;
  width: 100%;
  padding: 0 24px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.voegi-ansprache__text b {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--voegi-green-dark);
}
.voegi-ansprache__text span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--voegi-muted, #6b7773);
}
.voegi-ansprache__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.voegi-ansprache__chip {
  padding: 7px 12px;
  border: 1px solid var(--voegi-green);
  border-radius: 999px;
  background: #fff;
  color: var(--voegi-green);
  font: 700 13px/1.2 var(--voegi-font);
  cursor: pointer;
}
.voegi-ansprache__chip:hover,
.voegi-ansprache__chip:focus-visible {
  background: var(--voegi-green);
  color: #fff;
  outline: none;
}
.voegi-ansprache__weg {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--voegi-muted, #6b7773);
  font: 400 20px/1 var(--voegi-font);
  cursor: pointer;
}
.voegi-ansprache__weg:hover,
.voegi-ansprache__weg:focus-visible {
  background: var(--voegi-border);
  color: var(--voegi-text);
  outline: none;
}
body.voegi-open .voegi-ansprache,
body.voegi-framed .voegi-ansprache {
  display: none;
}
/* Ist Vögi offen (Sidebar oder Rahmen der Hülle), sind die „Vögi fragen"-
   Knöpfe auf der Seite überflüssig: Suchleiste, Filterspalte. Der Launcher
   hat seine eigene Regel. Das Wunschfeld bleibt, Enter schickt weiter. */
body.voegi-open .js-voegi-open:not(.voegi-launcher),
body.voegi-framed .js-voegi-open:not(.voegi-launcher),
body.voegi-open .voegi-wish__button,
body.voegi-framed .voegi-wish__button {
  display: none !important;
}
/* Reiseseite auf dem Handy: die feste Buchungsleiste (.trip-b-mobile, 60 px)
   liegt unten — Launcher und Ansprache rücken darüber (Klasse setzt die Bridge). */
@media only screen and (max-width: 760px) {
  body.voegi-hat-buchungsleiste .voegi-launcher {
    bottom: 74px;
  }
  body.voegi-hat-buchungsleiste .voegi-ansprache {
    bottom: 140px;
  }
}
body.voegi-open .voegi-launcher {
  opacity: 0;
  pointer-events: none;
}

/* ─── Sidebar ──────────────────────────────────────────────────────────── */

.voegi-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--voegi-z);
  width: var(--voegi-width);
  min-width: 320px;
  max-width: 50vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--voegi-text);
  font-family: var(--voegi-font);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  border-left: 1px solid var(--voegi-border);
  animation: voegi-slide-in 0.25s ease both;
}
.voegi-sidebar[hidden] {
  display: none;
}
.voegi-sidebar.is-dragging {
  user-select: none;
  transition: none;
}
.voegi-sidebar.is-dragging assistant-widget {
  pointer-events: none;
}

@keyframes voegi-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Griff: links auf dem Desktop … */
.voegi-sidebar__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  cursor: ew-resize;
  z-index: 2;
}
.voegi-sidebar__handle span {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 48px;
  margin-top: -24px;
  border-radius: 2px;
  background: var(--voegi-border);
}
.voegi-sidebar__handle:hover span {
  background: var(--voegi-green);
}

/* Kopf: gleich hoch wie der Website-Header (66 px in der Hülle). */
.voegi-sidebar__header {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 66px;
  padding: 0 16px;
  background: var(--voegi-green);
  color: #fff;
  flex: 0 0 auto;
}
.voegi-sidebar__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  flex: 0 0 auto;
}
.voegi-sidebar__heading {
  flex: 1 1 auto;
  min-width: 0;
}
.voegi-sidebar__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
.voegi-dossier {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--voegi-contrast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voegi-dossier.has-dossier {
  color: #fff;
}

/* Fünf Stufen der Beratung als eigene Zeile unter dem Kopf: erledigt hell,
   aktuell in Kontrastfarbe, kommende gedämpft. */
.voegi-stages {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 7px 16px 8px;
  list-style: none;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--voegi-green) 88%, #000);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
}
.voegi-stages[hidden] {
  display: none;
}
.voegi-stages li {
  position: relative;
  flex: 0 0 auto;
  padding-left: 12px;
}
.voegi-stages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
}
.voegi-stages li.is-done {
  color: rgba(255, 255, 255, 0.85);
}
.voegi-stages li.is-current {
  color: var(--voegi-contrast);
  font-weight: 700;
}
/* Seitenzeile: welche Seite der Gast gerade vor sich hat. */
.voegi-seite {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 16px 8px;
  border-bottom: 1px solid var(--voegi-border);
  background: #f4f6f5;
  color: var(--voegi-green-dark);
  font: 400 13px/1.3 var(--voegi-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voegi-seite[hidden] {
  display: none;
}
.voegi-seite .mdi {
  color: var(--voegi-green);
  margin-right: 2px;
}
.voegi-seite b {
  font-weight: 700;
}
.voegi-sidebar__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.voegi-sidebar__reset .mdi {
  display: block;
  line-height: 1;
}
.voegi-sidebar__reset:hover,
.voegi-sidebar__reset:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}
.voegi-sidebar__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.voegi-sidebar__close span {
  display: block;
  line-height: 1;
  margin-top: -3px; /* das × sitzt in der Schrift etwas tief */
}
.voegi-sidebar__close:hover,
.voegi-sidebar__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}
.voegi-sidebar__close:focus-visible {
  box-shadow: 0 0 0 3px var(--voegi-contrast);
}

.voegi-sidebar__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
/* Begrüssung + Schnellstart, nur bei leerem Verlauf (Bridge blendet ein/aus). */
.voegi-intro {
  flex: 0 0 auto;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--voegi-border);
  background: var(--voegi-green-light);
}
.voegi-intro[hidden] {
  display: none;
}
.voegi-intro__greeting {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--voegi-text);
}
.voegi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.voegi-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--voegi-green);
  border-radius: 999px;
  background: #fff;
  color: var(--voegi-green);
  font: 700 14px/1.2 var(--voegi-font);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.voegi-chip:hover {
  background: var(--voegi-green);
  color: #fff;
}
.voegi-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--voegi-contrast);
}

/* Der Wrapper nimmt den Platz unter dem Schnellstart und gibt dem Widget
   die definite Höhe (siehe unten). */
.voegi-sidebar__widget {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.voegi-sidebar__body assistant-widget {
  /* Das Widget legt sich selbst als Flex-Spalte an (Verlauf scrollt, Eingabe
     unten). Ein `display: block` von aussen hebt das auf: der Verlauf bekommt
     keine Hoehe, die Eingabe steht oben, nichts scrollt. Deshalb keine
     display-Regel — und eine DEFINITE Hoehe ueber absolute Ausdehnung im
     (position: relative) Wrapper statt `height: 100%` auf einem Flex-Kind. */
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;

  /* Theme-Variablen des Widgets */
  --as-accent: var(--voegi-green);
  --as-bg: #fff;
  --as-fg: var(--voegi-text);
  --as-muted: var(--voegi-muted);
  --as-border: var(--voegi-border);
  --as-radius: 3px;
  --as-font: var(--voegi-font);
}
.voegi-sidebar__loading,
.voegi-sidebar__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--voegi-muted);
  background: rgba(255, 255, 255, 0.92);
  font-size: 15px;
}
.voegi-sidebar__loading[hidden],
.voegi-sidebar__error[hidden] {
  display: none;
}
.voegi-sidebar__error-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 3px;
  background: var(--voegi-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.voegi-sidebar__error-phone:hover,
.voegi-sidebar__error-phone:focus-visible {
  background: var(--voegi-green-dark);
  color: #fff;
  outline: none;
}
.voegi-sidebar__loading .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--voegi-green-light);
  border-top-color: var(--voegi-green);
  border-radius: 50%;
  animation: voegi-spin 0.9s linear infinite;
}
@keyframes voegi-spin {
  to { transform: rotate(360deg); }
}

.voegi-sidebar__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--voegi-border);
  background: var(--voegi-green-light);
  font-size: 14px;
}
.voegi-sidebar__footer a {
  color: var(--voegi-green);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.voegi-sidebar__footer a:hover,
.voegi-sidebar__footer a:focus-visible {
  text-decoration: underline;
}
.voegi-sidebar__callback {
  padding: 6px 12px;
  border: 1px solid var(--voegi-green);
  border-radius: 3px;
}

/* Die Seite rückt beiseite, wenn Platz ist. */
@media (min-width: 1200px) {
  html:not(.voegi-shell) body.voegi-open {
    padding-right: var(--voegi-width);
    transition: padding-right 0.25s ease;
  }
}

/* ─── Die Hülle (Desktop ab 1200 px) ───────────────────────────────────────
   Assistent links, Website rechts in einem Rahmen gleicher Herkunft. Die
   Seite darunter bleibt geladen, aber eingefroren (unsichtbar, kein Scroll);
   die Hülle liegt fest darüber. Der Rahmen ist schmaler als das Fenster —
   so greifen die Tablet-Breakpoints der Website von selbst. */

html.voegi-shell {
  --voegi-width: 520px;
}
html.voegi-shell,
html.voegi-shell body {
  overflow: hidden !important;
  height: 100%;
}
html.voegi-shell body > *:not(#voegi-shell) {
  visibility: hidden;
}
.voegi-shell {
  position: fixed;
  inset: 0;
  z-index: var(--voegi-z);
  display: flex;
  background: #fff;
}
.voegi-shell .voegi-sidebar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  height: 100%;
  width: var(--voegi-width);
  max-width: 50vw;
  flex: 0 0 auto;
  border-left: 0;
  border-right: 1px solid var(--voegi-border);
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
  z-index: 2; /* über dem Rahmen, sonst deckt der iframe den Schatten ab */
  animation: none;
}
/* Test: die Website im Rahmen ganz ohne Kopfleiste (Logo, Menü, Telefon).
   Der Assistent links ist das primäre Werkzeug, der Rahmen zeigt nur Inhalt.
   Zum Zurücknehmen diese Regel löschen, die Kompakt-Regeln darunter greifen dann. */
body.voegi-framed .top-container {
  display: none !important;
}
/* Website im Rahmen: kompakter Kopf ohne Logo. Das Vögi-Logo links genügt;
   Öffnungszeiten und Telefonzeile fallen weg, das Menü bleibt in einer Zeile
   von 66 px, gleich hoch wie der Kopf der Sidebar. Unter 850 px zeigt die
   Website ohnehin Burger und Icons, dort fällt nur das kleine Logo weg. */
body.voegi-framed #main-navbar .navbar-brand,
body.voegi-framed #main-navbar .navbar-promise {
  display: none !important;
}
body.voegi-framed #main-navbar {
  min-height: 66px;
}
@media (min-width: 850px) {
  body.voegi-framed #main-navbar .navbar-header {
    display: none;
  }
  body.voegi-framed #main-navbar .navbar-nav > li > a,
  body.voegi-framed #main-navbar .navbar-nav > li > span {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  body.voegi-framed #main-navbar .navbar-right {
    margin-top: 0 !important;
  }
}
/* Griff in der Hülle: an der rechten Kante der Sidebar. */
.voegi-shell .voegi-sidebar__handle {
  left: auto;
  right: -6px;
}
.voegi-shell__frame {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100vw - var(--voegi-width));
  height: 100%;
  border: 0;
  background: #fff;
}
/* Die Seite IM Rahmen: kein Launcher, keine eigene Sidebar — der Assistent
   steht in der Hülle. */
body.voegi-framed .voegi-launcher,
body.voegi-framed #voegi-sidebar,
body.voegi-framed .voegi-toast {
  display: none !important;
}

/* ─── Mobile: Bottom-Sheet ─────────────────────────────────────────────── */

@media only screen and (max-width: 760px) {
  .voegi-sidebar {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--voegi-height);
    /* svh: nie höher als der kleine Viewport, sonst liegt der Kopf des
       Sheets hinter der Adressleiste. vh als Rückfall für ältere Browser. */
    max-height: 97vh;
    max-height: 97svh;
    border-left: 0;
    border-top: 1px solid var(--voegi-border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
    animation-name: voegi-slide-up;
  }
  @keyframes voegi-slide-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .voegi-sidebar__handle {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 22px;
    cursor: ns-resize;
    background: var(--voegi-green);
    border-radius: 16px 16px 0 0;
  }
  .voegi-sidebar__handle span {
    top: 8px;
    left: 50%;
    width: 44px;
    height: 5px;
    margin: 0 0 0 -22px;
    background: rgba(255, 255, 255, 0.8);
  }
  .voegi-sidebar__header {
    height: auto;
    padding: 22px 12px 10px 14px;
    border-radius: 16px 16px 0 0;
  }
  .voegi-sidebar__avatar {
    width: 34px;
    height: 34px;
  }
  .voegi-sidebar__title {
    font-size: 16px;
  }
  .voegi-stages {
    padding: 5px 14px 6px;
    font-size: 10px;
    gap: 10px;
  }

  /* Schnellstart als eine Zeile zum Wischen — im 40-vh-Sheet bleibt sonst
     dem Verlauf kaum Platz. */
  .voegi-intro {
    padding: 10px 14px 10px;
  }
  .voegi-intro__greeting {
    margin-bottom: 8px;
    font-size: 14px;
  }
  .voegi-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 2px;
  }
  .voegi-chips::-webkit-scrollbar {
    display: none;
  }
  .voegi-chip {
    white-space: nowrap;
  }

  /* Fusszeile: eine Zeile, kompakt, über der Home-Leiste (Safe-Area). Der
     Body (und damit die Eingabe des Widgets) endet über dieser Zeile — die
     Eingabe kann nie hinter dem Fuss oder der Home-Leiste liegen. */
  .voegi-sidebar__footer {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    line-height: 1.2;
  }
  .voegi-sidebar__footer a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .voegi-sidebar__phone {
    flex: 1 1 auto;
    min-width: 0;
  }
  .voegi-sidebar__callback {
    flex: 0 0 auto;
    padding: 0 10px;
  }
  body.voegi-open .voegi-launcher {
    display: none;
  }
}

/* ─── Wunschfeld ───────────────────────────────────────────────────────── */

.voegi-wish-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 12px 16px;
  font-family: var(--voegi-font);
}
.voegi-wish {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--voegi-border);
  border-radius: 3px;
  background: #fff;
  color: var(--voegi-text);
  font: inherit;
  /* 16 px: darunter zoomt iOS Safari beim Fokus in das Feld hinein. */
  font-size: 16px;
}
.voegi-wish:focus {
  outline: none;
  border-color: var(--voegi-green);
  box-shadow: 0 0 0 3px rgba(0, 96, 82, 0.18);
}
.voegi-wish__button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background: var(--voegi-green);
  color: #fff;
  font: 700 14px/1 var(--voegi-font);
  cursor: pointer;
  white-space: nowrap;
}
.voegi-wish__button:hover,
.voegi-wish__button:focus-visible {
  background: var(--voegi-green-dark);
  outline: none;
}
/* Erkannte Chips unter dem Feld: Art klein, Wert fett, × zum Entfernen. */
.voegi-wish__chips {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
}
.voegi-wish__chips[hidden] {
  display: none;
}
.voegi-wish__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--voegi-border);
  border-radius: 999px;
  background: #fff;
  color: var(--voegi-text);
  font: 400 13px/1.2 var(--voegi-font);
  animation: voegi-chip-auf 0.18s ease;
}
.voegi-wish__chip b {
  font-weight: 700;
}
.voegi-wish__chip-art {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--voegi-muted, #6b7773);
}
.voegi-wish__chip-weg {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--voegi-muted, #6b7773);
  font: 400 16px/1 var(--voegi-font);
  cursor: pointer;
}
.voegi-wish__chip-weg:hover,
.voegi-wish__chip-weg:focus-visible {
  background: var(--voegi-green);
  color: #fff;
  outline: none;
}
@keyframes voegi-chip-auf {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
/* Im Hero der Startseite: unter der Schnellsuche, gleiche Breite, eine Zeile Einleitung. */
.voegi-wish-form--hero {
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.voegi-wish__lead {
  flex: 1 1 100%;
  margin: 0 0 2px;
  color: #fff;
  font: 400 15px/1.3 var(--voegi-font);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.voegi-wish-form--hero .voegi-wish {
  height: 50px;
  font-size: 17px;
  border-color: transparent;
}
.voegi-wish-form--hero .voegi-wish__button {
  height: 50px;
  padding: 0 20px;
  background: var(--voegi-contrast);
  color: var(--voegi-green-dark);
  font-size: 15px;
}
.voegi-wish-form--hero .voegi-wish__button:hover,
.voegi-wish-form--hero .voegi-wish__button:focus-visible {
  background: #fff;
}
.voegi-wish-form--hero .voegi-wish__chip {
  border-color: transparent;
}
/* In der dunklen Suchleiste: heller Knopf, damit er sich absetzt. */
.search-bar .voegi-wish-form {
  margin: 8px 15px;
}
.search-bar .voegi-wish__button {
  background: var(--voegi-contrast);
  color: var(--voegi-green-dark);
}
/* Auf der Suchseite oberhalb der Treffer. */
.search__main > .voegi-wish-form {
  margin: 16px 16px 4px;
}
@media only screen and (max-width: 760px) {
  .voegi-wish-form {
    flex-wrap: wrap;
  }
  .voegi-wish__button {
    flex: 1 1 100%;
  }
}

/* ─── Hervorhebung nach navigate/openEntity/setHostFilter ──────────────── */

/* Markierter Block: Leuchten im Akzent (#b1d54f), das dreimal pulsiert und
   dann ruhig weiterleuchtet — eine feine Umrandung allein wurde übersehen. */
.voegi-highlight {
  position: relative;
  outline: 3px solid #b1d54f;
  outline-offset: 6px;
  border-radius: 4px;
  box-shadow: 0 0 0 10px rgba(177, 213, 79, 0.28), 0 0 42px 12px rgba(177, 213, 79, 0.55);
  animation: voegi-glow 1.1s ease-in-out 3;
  transition: box-shadow 0.4s ease, outline-color 0.4s ease;
  /* Der Block landet unter dem festen Kopf, nicht dahinter. */
  scroll-margin-top: 96px;
}
@keyframes voegi-glow {
  0%, 100% { box-shadow: 0 0 0 10px rgba(177, 213, 79, 0.28), 0 0 42px 12px rgba(177, 213, 79, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(177, 213, 79, 0.45), 0 0 64px 20px rgba(177, 213, 79, 0.85); }
}
/* Bleibt bis zur naechsten Frage: ruhige Umrandung statt Signalfarbe, damit
   der Gast den Block beim Lesen der Antwort wiederfindet. */
.voegi-highlight--fest {
  outline: 2px solid #b1d54f;
  outline-offset: 6px;
  box-shadow: 0 0 0 8px rgba(177, 213, 79, 0.22), 0 0 28px 8px rgba(177, 213, 79, 0.35);
  animation: none;
}
@media only screen and (max-width: 760px) {
  .voegi-highlight { scroll-margin-top: 72px; }
}

/* Kurzer Hinweis, wenn setHostFilter im Blatt gegriffen hat (2,5 s). Auf dem
   Desktop mittig über der Seite (neben der Schublade), mobil über dem Sheet. */
.voegi-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: calc(var(--voegi-z) + 1);
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--voegi-green-dark);
  color: #fff;
  font: 700 14px/1.3 var(--voegi-font);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.voegi-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1200px) {
  body.voegi-open .voegi-toast {
    left: calc((100vw - var(--voegi-width)) / 2);
  }
}
@media only screen and (max-width: 760px) {
  .voegi-toast {
    bottom: calc(var(--voegi-height) + 12px);
  }
}

/* ─── Bewegung reduzieren ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .voegi-sidebar,
  .voegi-launcher,
  body.voegi-open,
  .voegi-highlight {
    animation: none !important;
    transition: none !important;
  }
  .voegi-sidebar__loading .spinner {
    animation-duration: 2s;
  }
}