/* „Frag mich alles“ · schwebendes Widget (site/js/frag-widget.js) und Pitch-Karte (auch in 10-faq), V9-E.
   Farbwelt Rev. 6: Fenster weiß, Nutzer-Blasen grau, Oliv nur als Akzent (Starter, Assistenten-Marke, Fokus), Rot nur der
   Check-Button. Lädt mit media="print" und wird von frag-widget.js auf "all" geschaltet (nicht render-blockierend).
   Ebenen: über der Sticky-CTA (40), unter dem Cookie-Dialog (70). Bewegung 160–240 ms, nur transform/opacity.
   V10-M2: Auswahl der verbundenen Sticky-Leiste (.fw-wahl, sitzt in .sticky-cta, also in deren Ebene 40). */

.fw {
  --fw-rand: 16px;
  --fw-hoch: 0px;
  --fw-olive: var(--nf-olive, #5C685E);
  --fw-linie: var(--nf-grey-100, #E7ECF0);
  --fw-grau: var(--nf-grey-50, #F5F6F7);
  --fw-text: var(--nf-ink, #08080A);
  --fw-text-2: var(--nf-grey-700, #495158);
  color-scheme: light;
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* ---------- Starter ---------- */
.fw__starter {
  position: fixed; right: var(--fw-rand); bottom: calc(max(var(--fw-rand), env(safe-area-inset-bottom)) + var(--fw-hoch));
  z-index: 45;
  display: inline-flex; align-items: center; gap: 0;
  min-width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--fw-olive); color: #fff;
  box-shadow: 0 1px 2px rgb(38 51 42 / 0.12), 0 14px 32px -12px rgb(38 51 42 / 0.45);
  font: 800 0.9375rem/1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translate3d(0, 12px, 0); visibility: hidden;
  transition: transform 220ms var(--ease-out, ease-out), opacity 220ms var(--ease-out, ease-out), visibility 0s linear 220ms, bottom 240ms var(--ease-out, ease-out);
}
.fw.is-bereit:not(.is-wartend):not(.is-offen):not(.is-faq):not(.is-verdeckt) .fw__starter { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.fw__starter:active { transform: scale(0.96); }
.fw__starter:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: 3px; }
.fw__starter-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; }
.fw__starter-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw__starter-text { display: none; }

@media (min-width: 640px) {
  .fw { --fw-rand: 24px; }
  .fw__starter-text {
    display: block; overflow: hidden; max-width: 14rem; padding-right: 22px; margin-left: -6px; white-space: nowrap;
    transition: max-width 240ms var(--ease-out, ease-out), padding 240ms var(--ease-out, ease-out), opacity 160ms var(--ease-out, ease-out);
  }
  .fw.is-klein .fw__starter-text { max-width: 0; padding-right: 0; opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .fw__starter:hover { background: var(--nf-olive-deep, #26332A); }
}

/* ---------- Fenster ---------- */
.fw__fenster {
  position: fixed; right: var(--fw-rand); bottom: calc(max(var(--fw-rand), env(safe-area-inset-bottom)) + var(--fw-hoch));
  z-index: 46;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 2 * var(--fw-rand)));
  height: min(600px, 80vh, calc(100dvh - 96px));
  border: 1px solid var(--fw-linie); border-radius: 20px;
  background: #fff; color: var(--fw-text);
  box-shadow: 0 2px 6px rgb(38 51 42 / 0.06), 0 32px 70px -24px rgb(38 51 42 / 0.32);
  overflow: hidden;
  transform-origin: 100% 100%;
}
.fw__fenster[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fw__fenster { animation: fw-ein 220ms var(--ease-out, ease-out) both; }
  @keyframes fw-ein { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); } }
}

.fw__kopf { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--fw-linie); }
.fw__marke {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fw-olive); color: #fff; font: 800 0.75rem/1 var(--font-sans, sans-serif); letter-spacing: 0.02em;
}
.fw__kopf-text { flex: 1; min-width: 0; }
.fw__titel { margin: 0; font: 800 1.0625rem/1.25 var(--font-sans, sans-serif); color: var(--fw-text); outline: none; }
.fw__unter { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.3; color: var(--fw-text-2); }
.fw__zu {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fw-text); cursor: pointer;
}
.fw__zu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fw__zu:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .fw__zu:hover { background: var(--fw-grau); } }

/* Verlauf */
/* V10-D1 (frag-01): position: relative, damit offsetTop der Antwort zum Verlauf zählt (sonst begann sie 61 px über der Kante) */
.fw__verlauf {
  position: relative;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: #fff;
  scrollbar-width: thin;
}
.fw__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.fw__msg--du { justify-content: flex-end; }
.fw__msg-marke { flex: none; width: 8px; height: 8px; margin-bottom: 14px; border-radius: 50%; background: var(--fw-olive); }
.fw__blase {
  margin: 0; max-width: 86%; padding: 10px 14px;
  font-size: 0.9375rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty;
}
.fw__msg--ki .fw__blase { border: 1px solid var(--fw-linie); border-radius: 16px 16px 16px 4px; background: #fff; color: var(--fw-text); }
.fw__msg--du .fw__blase { border-radius: 16px 16px 4px 16px; background: var(--fw-grau); color: var(--fw-text); }
.fw__msg.is-hinweis .fw__blase { color: var(--fw-text-2); }
.fw__punkte { display: inline-flex; gap: 4px; padding: 6px 0; }
.fw__punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--fw-text-2); opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .fw__punkte i { animation: fw-puls 900ms var(--ease-out, ease-out) infinite alternate; }
  .fw__punkte i:nth-child(2) { animation-delay: 150ms; }
  .fw__punkte i:nth-child(3) { animation-delay: 300ms; }
  @keyframes fw-puls { to { opacity: 1; transform: translate3d(0, -2px, 0); } }
  .fw__msg:not(.is-tippen):last-of-type { animation: fw-msg 200ms var(--ease-out, ease-out) both; }
  @keyframes fw-msg { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
}

.fw__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 16px; }
.fw__chip {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--fw-linie); border-radius: 999px;
  background: #fff; color: var(--fw-text);
  font: 600 0.875rem/1.3 var(--font-sans, sans-serif); text-align: left; cursor: pointer;
  transition: border-color 160ms var(--ease-out, ease-out), transform 140ms var(--ease-out, ease-out);
}
.fw__chip:active { transform: scale(0.97); }
.fw__chip:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .fw__chip:hover { border-color: var(--fw-olive); } }

/* Eingabe */
.fw__form { margin: 0; padding: 12px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--fw-linie); background: #fff; }
.fw__feld { display: flex; align-items: flex-end; gap: 8px; }
.fw__eingabe {
  flex: 1; min-width: 0; min-height: 52px; max-height: 132px; padding: 14px 16px;
  border: 1px solid var(--fw-linie); border-radius: 14px;
  background: var(--fw-grau); color: var(--fw-text);
  font: 400 1rem/1.4 var(--font-sans, sans-serif);   /* 16 px: iOS zoomt beim Fokus nicht */
  resize: none;
}
.fw__eingabe::placeholder { color: var(--fw-text-2); opacity: 1; }
/* V10-D1 (mob-5-03, mob-3-02, frag-08): Platzhalter „Deine Frage zum Mentoring“ (201 px) bleibt bei 320 px einzeilig, mit Luft */
@media (max-width: 359px) { .fw__eingabe { padding-inline: 14px 12px; } }
.fw__eingabe:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: 1px; border-color: transparent; background: #fff; }
.fw__senden {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 14px; background: var(--fw-olive); color: #fff; cursor: pointer;
  transition: transform 140ms var(--ease-out, ease-out);
}
.fw__senden svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fw__senden:active { transform: scale(0.96); }
.fw__senden:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: 2px; }
.fw__senden[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.fw__hinweis { margin: 8px 2px 0; font-size: 0.75rem; line-height: 1.4; color: var(--fw-text-2); }
.fw__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Pitch auf den Check schon in der Begrüßung (V10-M2), ruhige Zeile unter den Frage-Chips */
.fw__vorab { margin: 0; padding-left: 16px; font-size: 0.875rem; line-height: 1.45; color: var(--fw-text-2); }
.fw__vorab a {
  display: inline-block; padding: 6px 0;
  color: var(--fw-text); font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.fw__vorab a:focus-visible { outline: 2px solid var(--fw-olive); outline-offset: 2px; border-radius: 4px; }

/* ---------- Pitch-Karte (Widget und FAQ-Karte) ---------- */
.frag-pitch {
  display: grid; gap: 10px; justify-items: start;
  padding: 14px 16px;
  border: 1px solid var(--nf-grey-100, #E7ECF0); border-radius: 16px;
  background: var(--nf-grey-50, #F5F6F7);
}
.frag-pitch__text { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--nf-ink, #08080A); font-weight: 600; }
.frag-pitch__knopf { max-width: 100%; }
.frag-pitch.is-stark { border-color: var(--nf-olive, #5C685E); background: #fff; box-shadow: 0 1px 2px rgb(38 51 42 / 0.05), 0 12px 32px -14px rgb(38 51 42 / 0.2); }
.fw .frag-pitch { margin-left: 16px; }
.fw .frag-pitch__knopf { width: 100%; justify-content: space-between; }

/* ---------- Mobil: Blatt von unten mit neutralem Abdunkler ---------- */
.fw__dimmer { position: fixed; inset: 0; z-index: 44; background: rgb(8 8 10 / 0.4); }
.fw__dimmer[hidden] { display: none; }
@media (max-width: 639.98px) {
  .fw__fenster {
    left: 0; right: 0; bottom: 0; width: auto;
    height: min(85dvh, 640px); max-height: 85vh;
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
    transform-origin: 50% 100%;
  }
  @supports (height: 1dvh) { .fw__fenster { max-height: 85dvh; } }
  .fw__blase { max-width: 88%; }
}
@media (max-width: 639.98px) and (prefers-reduced-motion: no-preference) {
  .fw__fenster { animation: fw-blatt 240ms var(--ease-spring, ease-out) both; }
  @keyframes fw-blatt { from { transform: translate3d(0, 24px, 0); opacity: 0; } }
}
html.fw-sperre, html.fw-sperre body { overflow: hidden; }

/* Nie neben einem offenen Dialog (Funnel, Lupe, Film, Galerie) oder dem mobilen Menü: frag-widget.js setzt .is-verdeckt,
   Starter und Fenster sind dann sofort ganz weg, nicht nur hinter dem Abdunkler (V9-FX1; die frühere html:has(dialog[open])-
   Regel war mit (0,5,2) schwächer als die Sichtbar-Regel (0,6,0) und griff nie) */
.fw.is-verdeckt .fw__starter, .fw.is-verdeckt .fw__fenster, .fw.is-verdeckt .fw__dimmer { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }

/* ---------- Verbundener Einstieg mobil (V10-M2) ----------
   Unter 1024 px ist die Sticky-Leiste der einzige Einstieg: der Starter fehlt, solange frag-widget.js die Leiste
   übernommen hat (.is-verbunden; ohne Signal von core.js bleibt er). Die Auswahl wächst aus der Leiste: weiße Karte mit
   Haarlinie, zwei gleich breite Wahlknöpfe untereinander (grau, Icon-Scheibe rot für den Check, Oliv für die Frage). */
@media (max-width: 1023.98px) {
  .fw.is-verbunden .fw__starter { display: none; }
}
/* Solange das Frage-Fenster offen ist, tritt die Leiste ab (kein Übereinander, auch 640–1023 px) */
.sticky-cta.is-visible.is-fw-weg {
  transform: translate3d(0, calc(100% + 32px), 0); visibility: hidden;
  transition: transform 200ms var(--ease-out, ease-out), visibility 0s linear 200ms;
}
.fw-wahl__dimmer { position: fixed; inset: 0; z-index: -1; background: rgb(8 8 10 / 0.4); -webkit-tap-highlight-color: transparent; }
.fw-wahl {
  --fw-olive: var(--nf-olive, #5C685E);
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--nf-grey-100, #E7ECF0); border-radius: var(--radius-md, 20px);
  background: #fff; color: var(--nf-ink, #08080A);
  box-shadow: 0 2px 6px rgb(8 8 10 / 0.06), 0 28px 64px -24px rgb(8 8 10 / 0.38);
  font-family: var(--font-sans, system-ui, sans-serif);
  transform-origin: 50% 100%;
  color-scheme: light;
}
.fw-wahl__titel { margin: 0; padding: 10px 12px 8px; font: 800 0.9375rem/1.3 var(--font-sans, sans-serif); color: var(--nf-ink, #08080A); }
.fw-wahl__knopf {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; margin: 0; padding: 12px 12px 12px 12px;
  border: 0; border-radius: calc(var(--radius-md, 20px) - 6px);
  background: var(--nf-grey-50, #F5F6F7); color: var(--nf-ink, #08080A);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press, 140ms) var(--ease-out, ease-out), background-color var(--dur-ui, 220ms) var(--ease-out, ease-out);
}
.fw-wahl__knopf + .fw-wahl__knopf { margin-top: 6px; }
.fw-wahl__knopf:active { transform: scale(0.97); }
.fw-wahl__knopf:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-red-light, #B83E3D)); outline-offset: 2px; }
.fw-wahl__knopf--frage:focus-visible { outline-color: var(--fw-olive); }
@media (hover: hover) and (pointer: fine) { .fw-wahl__knopf:hover { background: var(--nf-grey-100, #E7ECF0); } }
.fw-wahl__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.fw-wahl__knopf--check .fw-wahl__icon { background: var(--nf-wine, #AE1D2B) var(--nf-grad-btn, linear-gradient(180deg, #AE1D2B, #480C12)); }   /* Rev. 7: Rot-Verlauf wie der Primärknopf */
.fw-wahl__knopf--frage .fw-wahl__icon { background: var(--fw-olive); }
.fw-wahl__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw-wahl__text { display: grid; gap: 2px; min-width: 0; }
.fw-wahl__name { font: 800 1rem/1.3 var(--font-sans, sans-serif); color: var(--nf-ink, #08080A); }
.fw-wahl__info { font-size: 0.875rem; line-height: 1.4; color: var(--nf-grey-700, #495158); text-wrap: pretty; }
.fw-wahl__pfeil { display: grid; place-items: center; color: var(--nf-grey-700, #495158); }
.fw-wahl__pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* V10-D1: Erklärung kompakter (bei 390 px drei Zeilen, Knopf 106 px): 13 px/1,35, Icon 36 px, und der Pfeil steht oben rechts
   auf Höhe des Namens statt in einer eigenen Spalte, so bekommt die Erklärung die volle Breite (390 px: 250 → 290 px,
   zwei Zeilen). Wortlaut gleich. */
.fw-wahl__knopf { position: relative; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; min-height: 60px; padding: 10px; }
.fw-wahl__icon { width: 36px; height: 36px; }
.fw-wahl__icon svg { width: 20px; height: 20px; }
.fw-wahl__pfeil { position: absolute; top: 11px; right: 10px; }
.fw-wahl__pfeil svg { width: 18px; height: 18px; }
.fw-wahl__text { gap: 1px; }
.fw-wahl__name { padding-right: 26px; line-height: 1.25; }
.fw-wahl__info { font-size: 0.8125rem; line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .fw-wahl:not([hidden]) { animation: fw-wahl-ein 220ms var(--ease-out, ease-out) backwards; }
  .fw-wahl:not([hidden]) .fw-wahl__knopf { animation: fw-wahl-knopf 220ms var(--ease-out, ease-out) backwards; }
  .fw-wahl:not([hidden]) .fw-wahl__knopf--frage { animation-delay: 40ms; }
  .fw-wahl__dimmer:not([hidden]) { animation: fw-wahl-dim 200ms var(--ease-out, ease-out) backwards; }
  @keyframes fw-wahl-ein { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } }
  @keyframes fw-wahl-knopf { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
  @keyframes fw-wahl-dim { from { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .fw__starter, .fw__starter-text, .fw__chip, .fw__senden, .fw-wahl__knopf { transition: none; }
  .sticky-cta.is-visible.is-fw-weg { transition: none; }
  .fw__starter { transform: none; }
}
@media print { .fw { display: none; } }