/* =========================================================================
   Bona Vita® Portal · bv-help-intro.css
   Onboarding-Hinweis "Frag Vita" beim ersten Portal-Besuch
   ========================================================================= */

dialog.bv-help-intro{
  border:none;
  padding:0;
  background:transparent;
  max-width:520px;
  width:min(92vw, 520px);
  color:#0f1d3f;
  /* Zentrierung: über inset + margin:auto (robust gegen fremdes dialog-CSS) */
  position:fixed;
  inset:0;
  margin:auto;
  height:max-content;
  max-height:calc(100vh - 32px);
}
dialog.bv-help-intro::backdrop{
  background:rgba(15,29,63,.55);
  backdrop-filter:blur(3px);
}

.bv-help-intro__card{
  position:relative;
  background:#ffffff;
  border-radius:16px;
  padding:32px 30px 26px 30px;
  box-shadow:
    0 24px 56px rgba(15,29,63,.28),
    0 4px 14px rgba(15,29,63,.12);
  border:1px solid rgba(184,148,90,.25);
  text-align:left;
}

.bv-help-intro__close{
  position:absolute;
  top:10px; right:12px;
  background:transparent;
  border:none;
  font-size:26px;
  line-height:1;
  color:rgba(15,29,63,.45);
  cursor:pointer;
  padding:6px 10px;
  border-radius:8px;
  transition:background .15s, color .15s;
}
.bv-help-intro__close:hover{
  background:rgba(15,29,63,.06);
  color:rgba(15,29,63,.85);
}

.bv-help-intro__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px; height:96px;
  margin-bottom:14px;
  border-radius:50%;
  overflow:hidden;
  box-shadow: 0 12px 32px rgba(15,29,63,.18), 0 0 0 1px rgba(184,148,90,.25);
}
.bv-help-intro__mark img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
}

.bv-help-intro__title{
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-weight:500;
  font-size:28px;
  line-height:1.15;
  letter-spacing:.2px;
  margin:0 0 4px 0;
  color:#0f1d3f;
}
.bv-help-intro__lead{
  margin:0 0 14px 0;
  font-size:15px;
  color:rgba(15,29,63,.72);
}
.bv-help-intro__body{
  margin:0 0 12px 0;
  font-size:15px;
  line-height:1.55;
  color:rgba(15,29,63,.88);
}
.bv-help-intro__body strong{
  color:#0f1d3f;
  font-weight:600;
}
.bv-help-intro__hint{
  margin:14px 0 20px 0;
  padding:12px 14px;
  background:rgba(184,148,90,.08);
  border-left:3px solid #b8945a;
  border-radius:4px;
  font-size:14px;
  color:rgba(15,29,63,.78);
  font-style:italic;
}

.bv-help-intro__foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
  flex-wrap:wrap;
}
.bv-help-intro__btn{
  appearance:none;
  border:1px solid transparent;
  padding:10px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
  font-family:inherit;
}
.bv-help-intro__btn--ghost{
  background:#fff;
  color:rgba(15,29,63,.78);
  border-color:rgba(15,29,63,.18);
}
.bv-help-intro__btn--ghost:hover{
  background:rgba(15,29,63,.04);
  border-color:rgba(15,29,63,.3);
}
.bv-help-intro__btn--gold{
  background:#b8945a;
  color:#fff;
  border-color:#b8945a;
  box-shadow:0 2px 8px rgba(184,148,90,.25);
}
.bv-help-intro__btn--gold:hover{
  background:#a6834d;
  border-color:#a6834d;
  transform:translateY(-1px);
}

.bv-help-intro__kiSignal{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(15,29,63,.12);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(15,29,63,.45);
  text-align:center;
}

/* Inline-kbd im Fliesstext */
.bv-help-intro__body kbd{
  display:inline-block;
  padding:1px 6px;
  margin:0 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  background:rgba(15,29,63,.06);
  border:1px solid rgba(15,29,63,.18);
  border-radius:4px;
  color:rgba(15,29,63,.88);
}

/* Puls-Highlight für Ask-FAB (Käufer) UND Vita-Bar (Owner/Team) */
.ask-fab.bv-help-intro__pulse,
#bv-vita-bar.bv-help-intro__pulse{
  animation: bv-help-intro-pulse 1.1s ease-out 4;
  z-index: 100;
  position: relative;
}
@keyframes bv-help-intro-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,148,90,.55), 0 6px 18px rgba(15,29,63,.28); }
  60%  { box-shadow: 0 0 0 18px rgba(184,148,90,0),  0 6px 18px rgba(15,29,63,.28); }
  100% { box-shadow: 0 0 0 0 rgba(184,148,90,0),    0 6px 18px rgba(15,29,63,.28); }
}

/* Mobile */
@media (max-width: 520px){
  .bv-help-intro__card{ padding:26px 20px 22px 20px; }
  .bv-help-intro__title{ font-size:24px; }
  .bv-help-intro__foot{ flex-direction:column-reverse; }
  .bv-help-intro__btn{ width:100%; }
}

/* --- Tour-Button im Help-Intro-Dialog (iPhone-Einstieg zur Vita-Tour) --- */
.bv-help-intro__tour {
  width: 100%;
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #c9a558 0%, #a7832f 100%);
  color: #1a1a1a;
  border: 1px solid rgba(167, 131, 47, 0.55);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 14px rgba(167, 131, 47, 0.25);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bv-help-intro__tour:hover { filter: brightness(1.05); transform: translateY(-1px); }
.bv-help-intro__tour:active { transform: translateY(0); filter: brightness(0.97); }
.bv-help-intro__tour-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #1a1a1a;
  font-size: 14px;
}
.bv-help-intro__tour-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bv-help-intro__tour-main { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.bv-help-intro__tour-sub { font-size: 12px; opacity: 0.75; letter-spacing: 0.03em; }
@media (max-width: 520px){
  .bv-help-intro__tour { padding: 14px 14px; }
  .bv-help-intro__tour-main { font-size: 14.5px; }
  .bv-help-intro__tour-sub { font-size: 11.5px; }
}