/* Kopie aus 01_bestand/website-astro/src/site/navigation/ui/hilfe.css (Stand 07.10.2026). */
/* Kontakt-Widget unten rechts (Hilfe.tsx, M-W nach mercedes-benz.de). Nur
   Tokens --bm-*; lokal ergänzt (reine Bausteinmaße, in design-check.mjs
   als Baustein-Variablen geführt):
   --bm-hilfe-z             Ebene: über Anker-Leiste (40), unter Kopf (50),
                            damit das Mega-Panel darüberfällt; Mobil-Menü
                            (9999) und Anmerkungstool (10000+) liegen ohnehin
                            darüber.
   --bm-hilfe-breite        Kartenbreite ab 640 px (Vorbild ≈ 600 px Bild,
                            bei uns 440 px: Karte neben dem Lesetext).
   --bm-hilfe-knopf-hoehe   Höhe der Pill „Frag KI"; der runde Avatar darin
                            und der Schließen-Kreis leiten sich davon ab.
                            Mobil kleiner, nie unter 44 px Tippfläche.
   --bm-hilfe-abstand       Abstand zum Fensterrand: --bm-raster-luecke, nicht
                            --bm-rand (der Inhalt reicht bis an --bm-rand).
   --bm-hilfe-zusatz-abstand  Laufzeitwert (Hilfe.tsx): Höhe der Footer-
                            Kachel „Nach oben", solange sie im Bild ist.
   Breakpoint 639/640 laut Liste in tokens.css. */
.bm-hilfe {
  --bm-hilfe-z: calc(var(--bm-z-kopf) - 5);
  --bm-hilfe-breite: 440px;
  --bm-hilfe-knopf-hoehe: 52px;
  --bm-hilfe-abstand: var(--bm-raster-luecke);
  --bm-hilfe-zusatz-abstand: 0px;
  font-family: var(--bm-font);
  color: var(--bm-text);
}

/* Mobil-Menü, KI-Chat oder Suche offen → Widget tritt zurück. */
body:has(.bm-mobilmenue:not([hidden])) .bm-hilfe,
body:has(.bm-chat--offen) .bm-hilfe,
body:has(.bm-suche[role='dialog']) .bm-hilfe { display: none; }

/* ── Eingeklappt: dunkle Pill „Frag KI" mit Avatar ────────────────────── */
.bm-hilfe__knopf {
  position: fixed;
  right: var(--bm-hilfe-abstand);
  /* Feste Grundlage; das Ausweichen vor der Footer-Kachel läuft über translate
     (kein Layoutsprung, CLS), nicht über bottom. */
  bottom: calc(var(--bm-hilfe-abstand) + env(safe-area-inset-bottom, 0px));
  translate: 0 calc(-1 * var(--bm-hilfe-zusatz-abstand));
  z-index: var(--bm-hilfe-z);
  display: flex;
  align-items: center;
  gap: calc(var(--bm-raster-luecke) / 2);
  height: var(--bm-hilfe-knopf-hoehe);
  padding: 0 calc(var(--bm-hilfe-knopf-hoehe) / 2 - var(--bm-hilfe-knopf-hoehe) * 0.35) 0 var(--bm-raster-luecke);
  border: 2px solid var(--bm-signal-kontur);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-flaeche-dunkel);
  color: var(--bm-text-invers);
  font: inherit;
  box-shadow: var(--bm-schatten-karte);
  cursor: pointer;
  transition:
    opacity var(--bm-dauer) var(--bm-ease),
    translate var(--bm-dauer) var(--bm-ease),
    border-color var(--bm-dauer-kurz) var(--bm-ease),
    box-shadow var(--bm-dauer-kurz) var(--bm-ease),
    visibility 0s linear 0s;
}
.bm-hilfe__knopf:is(:hover, :focus-visible) {
  border-color: var(--bm-text-invers);
  box-shadow: var(--bm-schatten-schwebend);
  translate: 0 calc(-1 * var(--bm-hilfe-zusatz-abstand) - 2px);
}
/* KI-Zeichen: beim Überfahren der Signalverlauf wie am Chat-Auslöser
   (Ebenen .bm-chat-symbol__*, chat.css). */
.bm-hilfe__knopf:is(:hover, :focus-visible) .bm-chat-symbol__akzent { opacity: 1; }
.bm-hilfe__knopf:is(:hover, :focus-visible) .bm-chat-symbol__ruhe { opacity: 0; }

.bm-hilfe__ki {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bm-raster-luecke) / 3);
}
.bm-hilfe__ki-text {
  font-size: var(--bm-t-fest);
  font-weight: var(--bm-g-fett);
  line-height: var(--bm-zh-kompakt);
  white-space: nowrap;
}
.bm-hilfe__trenner {
  align-self: stretch;
  width: 1px;
  margin-block: calc(var(--bm-hilfe-knopf-hoehe) * 0.2);
  background: var(--bm-linie-invers);
}
.bm-hilfe__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bm-radius-pille);
}
.bm-hilfe__bild--knopf {
  flex: none;
  width: calc(var(--bm-hilfe-knopf-hoehe) * 0.7);
  height: calc(var(--bm-hilfe-knopf-hoehe) * 0.7);
  background: var(--bm-kachel);
}

/* Beim Verdecken eines kleinen Bedienelements (ausweichen.ts) tritt die Pill
   zurück; mit Tastaturfokus bleibt sie. Kein Zurücktreten beim Scrollen –
   wie im Vorbild bleibt sie stehen. Sie fährt ganz aus dem Bild (daher ohne
   pointer-events: none – dort liegt nichts, das sie abfangen könnte) und
   bleibt mit der Tastatur erreichbar. */
.bm-hilfe--weicht .bm-hilfe__knopf:not(:focus-visible),
/* Tastaturfokus im Fuß: die fixierte Pill darf das fokussierte Element nicht verdecken (2.4.11) */
body:has(.bm-fuss :focus-visible) .bm-hilfe:not(.bm-hilfe--offen) .bm-hilfe__knopf:not(:focus-visible) {
  opacity: 0;
  translate: 0 calc(var(--bm-hilfe-abstand) + 100% + env(safe-area-inset-bottom, 0px));
}
.bm-hilfe--offen .bm-hilfe__knopf {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--bm-dauer-kurz) var(--bm-ease),
    visibility 0s linear var(--bm-dauer-kurz);
}

/* ── Aufgeklappt: Karte ───────────────────────────────────────────────── */
.bm-hilfe__karte {
  position: fixed;
  right: var(--bm-hilfe-abstand);
  bottom: calc(var(--bm-hilfe-abstand) + var(--bm-hilfe-zusatz-abstand) + env(safe-area-inset-bottom, 0px));
  z-index: var(--bm-hilfe-z);
  width: min(var(--bm-hilfe-breite), calc(100vw - 2 * var(--bm-hilfe-abstand)));
  /* nie über den festen Kopf */
  max-height: calc(100dvh - var(--bm-kopf-h) - 2 * var(--bm-hilfe-abstand));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(1.5 * var(--bm-raster-luecke)) calc(2 * var(--bm-raster-luecke)) var(--bm-raster-luecke);
  background: var(--bm-bg-weiss); /* reines Weiß wie das Vorbild (M-N1) */
  border-radius: var(--bm-radius-klein);
  box-shadow: var(--bm-schatten-schwebend);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(var(--bm-raster-luecke)) scale(0.96);
  visibility: hidden;
  transition:
    opacity var(--bm-dauer) var(--bm-ease),
    transform var(--bm-dauer) var(--bm-ease),
    visibility 0s linear var(--bm-dauer);
}
.bm-hilfe--offen .bm-hilfe__karte {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--bm-dauer) var(--bm-ease),
    transform var(--bm-dauer) var(--bm-ease),
    visibility 0s linear 0s;
}
.bm-hilfe__karte:focus { outline: none; }

/* Runder Schließen-Knopf oben rechts, Chevron nach unten (Vorbild). */
.bm-hilfe__zu {
  position: absolute;
  top: var(--bm-raster-luecke);
  right: var(--bm-raster-luecke);
  display: grid;
  place-items: center;
  width: var(--bm-knopf-punkt);
  height: var(--bm-knopf-punkt);
  padding: 0;
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-bg-weiss);
  color: var(--bm-text);
  cursor: pointer;
}
.bm-hilfe__zu:is(:hover, :focus-visible) { background: var(--bm-kachel); border-color: var(--bm-kachel); }

/* Titel beginnt unter dem Schließen-Kreis (Vorbild), rechts frei für ihn. */
.bm-hilfe__kopf {
  margin-inline: calc(-2 * var(--bm-raster-luecke));
  padding: calc(var(--bm-knopf-punkt) + var(--bm-raster-luecke) / 2) calc(2 * var(--bm-raster-luecke)) calc(1.5 * var(--bm-raster-luecke));
  border-bottom: 1px solid var(--bm-linie-zart);
}
.bm-hilfe__titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h2);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bm-text);
}
.bm-hilfe__einleitung {
  margin: calc(var(--bm-raster-luecke) / 2) 0 0;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}

.bm-hilfe__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm-hilfe__liste > li { border-bottom: 1px solid var(--bm-linie-zart); }

.bm-hilfe__zeile {
  display: flex;
  align-items: center;
  gap: var(--bm-raster-luecke);
  width: 100%;
  padding: var(--bm-raster-luecke) 0 var(--bm-raster-luecke) calc(var(--bm-raster-luecke) / 2);
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  color: var(--bm-text);
  text-decoration: none;
  cursor: pointer;
}
.bm-hilfe__symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--bm-knopf-punkt) * 1.25);
  height: calc(var(--bm-knopf-punkt) * 1.25);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-bg-alt);
  color: var(--bm-text);
  overflow: hidden;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease), color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-hilfe__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-hilfe__zeilentitel {
  font-size: var(--bm-t-kartentitel);
  font-weight: var(--bm-g-fett);
  line-height: var(--bm-zh-kompakt);
}
.bm-hilfe__unterzeile {
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
  overflow-wrap: anywhere;
}
.bm-hilfe__pfeil {
  flex: none;
  display: grid;
  padding-right: calc(var(--bm-raster-luecke) / 2);
  color: var(--bm-text);
}
.bm-hilfe__zeile:is(:hover, :focus-visible) .bm-hilfe__symbol { background: var(--bm-kachel); }

/* Fokusrahmen (P3-A): Die Karte ist hell (--bm-bg-weiss). Die Pill ist dunkel und
   schwebt über wechselnden Flächen: Rahmen innen in der Farbe für Dunkel. */
.bm-hilfe__karte { --bm-fokus: var(--bm-fokus-auf-hell); --bm-fokus-gegen: var(--bm-fokus-auf-dunkel); }
.bm-hilfe__knopf { --bm-fokus: var(--bm-fokus-auf-dunkel); --bm-fokus-gegen: var(--bm-fokus-auf-hell); }
.bm-hilfe :is(.bm-hilfe__knopf, .bm-hilfe__zu, .bm-hilfe__zeile):focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 3px);
}
.bm-hilfe .bm-hilfe__knopf:focus-visible { outline-offset: -5px; }
.bm-hilfe .bm-hilfe__zeile:focus-visible { outline-offset: var(--bm-fokus-versatz-innen); }

/* ── Mobil: kompakte Pill; Karte als Blatt von unten ──────────────────── */
@media (max-width: 639px) {
  /* Randabstand 12 px: die Pill bleibt unter dem Bereichs-Umschalter der
     Startbühne (start.css). */
  .bm-hilfe { --bm-hilfe-knopf-hoehe: 44px; --bm-hilfe-abstand: calc(var(--bm-raster-luecke) / 2); }
  .bm-hilfe__knopf { gap: calc(var(--bm-raster-luecke) / 3); padding-left: calc(var(--bm-raster-luecke) * 0.6); }
  .bm-hilfe__ki-text { font-size: var(--bm-t-klein); }
  .bm-hilfe__karte {
    left: var(--bm-hilfe-abstand);
    width: auto;
    /* über der Leiste des Anmerkungstools (unten links, ≈ 42 px hoch) */
    bottom: calc(5 * var(--bm-hilfe-abstand) + var(--bm-hilfe-zusatz-abstand) + env(safe-area-inset-bottom, 0px));
    padding: var(--bm-raster-luecke) var(--bm-raster-luecke) calc(var(--bm-raster-luecke) / 2);
    transform: translateY(calc(2 * var(--bm-raster-luecke)));
    transform-origin: bottom center;
  }
  .bm-hilfe__zu { top: calc(var(--bm-raster-luecke) / 2); right: calc(var(--bm-raster-luecke) / 2); }
  .bm-hilfe__kopf {
    margin-inline: calc(-1 * var(--bm-raster-luecke));
    padding: calc(var(--bm-knopf-punkt) / 2) calc(var(--bm-knopf-punkt) + var(--bm-raster-luecke)) var(--bm-raster-luecke) var(--bm-raster-luecke);
  }
  .bm-hilfe__titel { font-size: var(--bm-t-h2); }
  .bm-hilfe__einleitung { font-size: var(--bm-t-fest); }
  .bm-hilfe__zeile { padding-block: calc(var(--bm-raster-luecke) * 0.6); padding-left: 0; }
  .bm-hilfe__symbol { width: var(--bm-knopf-punkt); height: var(--bm-knopf-punkt); }
  .bm-hilfe__zeilentitel { font-size: var(--bm-t-fest); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-hilfe__knopf,
  .bm-hilfe--offen .bm-hilfe__knopf,
  .bm-hilfe__karte,
  .bm-hilfe--offen .bm-hilfe__karte,
  .bm-hilfe__symbol { transition: none; }
  .bm-hilfe__knopf:is(:hover, :focus-visible) { translate: 0 calc(-1 * var(--bm-hilfe-zusatz-abstand)); }
}

@media print { .bm-hilfe { display: none; } }

/* Live-Video-Chat: Gesprächsansicht (TavusGespraech) in der Karte, etwas breiter. */
.bm-hilfe--video { --bm-hilfe-breite: 540px; }
.bm-hilfe__video { padding-top: calc(var(--bm-knopf-punkt) + var(--bm-raster-luecke) / 2); padding-bottom: var(--bm-raster-luecke); }

/* Abstandswechsel vor der Footer-Kachel (hilfe.js): ohne Übergang, damit „Nach oben“ sofort frei liegt. */
.bm-hilfe--sofort .bm-hilfe__knopf { transition: none; }