/* ===== Kontextuelle Ersteinführung (nur Talent-Portal) ================================
   Beim ersten Öffnen eines Bereichs erscheint eine kurze, überspringbare Karte mit
   Beispiel/Animation. Pro Bereich einmal (localStorage). Bewusst KEIN langes Anfangs-Intro.
   Design monochrom auf die TrueTalent-Marke (Schwarz #111827 / Weiß).
   V216: „Kompakt"-Layout — Icon + Titel + Schritt in EINER Kopfzeile (spart die eigene
   Icon- und Badge-Zeile), engere Abstände, kein verschenkter Platz. */

.tt-ob-overlay{
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(17, 24, 39, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity .2s ease;
}
.tt-ob-overlay.tt-ob-open{ opacity: 1; }

.tt-ob-card{
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 14px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .22);
  overflow: hidden;
  transform: translateY(8px) scale(.985);
  transition: transform .22s ease;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.tt-ob-overlay.tt-ob-open .tt-ob-card{ transform: translateY(0) scale(1); }

.tt-ob-progress{ height: 2px; background: #eceef1; }
.tt-ob-progress > span{ display: block; height: 100%; background: #111827; transition: width .3s ease; }

.tt-ob-body{ padding: 15px 17px 16px; }

/* Kopfzeile: Icon + Titel + Schritt in EINER Zeile */
.tt-ob-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tt-ob-icon{
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: #111827; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.tt-ob-title{ margin: 0; flex: 1 1 auto; font-size: 15.5px; font-weight: 600; color: #111827; letter-spacing: -.01em; }
.tt-ob-step{ flex: 0 0 auto; font-size: 11.5px; color: #9ca3af; font-variant-numeric: tabular-nums; }

.tt-ob-text{ margin: 0 0 11px; font-size: 13px; line-height: 1.45; color: #4b5563; }

/* Beispiel-/Demobox */
.tt-ob-demo{
  background: #fafafa; border: 1px solid #eeeeee; border-radius: 10px;
  padding: 11px; margin-bottom: 13px;
}
.tt-ob-demo-label{ font-size: 11px; color: #9ca3af; margin-bottom: 6px; }
.tt-ob-field{
  display: flex; align-items: center; gap: 8px; min-height: 20px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 9px 11px;
}
.tt-ob-typed{ font-size: 14px; color: #111827; }
.tt-ob-caret{ width: 1.5px; height: 16px; background: #111827; animation: ttObBlink .9s steps(1) infinite; }
@keyframes ttObBlink{ 0%,50%{ opacity: 1; } 51%,100%{ opacity: 0; } }
.tt-ob-sugg{
  opacity: 0; transform: translateY(4px); transition: all .35s ease;
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 8px; padding: 8px 10px;
}
.tt-ob-sugg.tt-ob-sugg-show{ opacity: 1; transform: translateY(0); }
.tt-ob-sugg-txt{ font-size: 13px; color: #27272a; flex: 1; }
.tt-ob-sugg-txt strong{ color: #111827; font-weight: 640; }
.tt-ob-sugg-btn{ font-size: 11px; font-weight: 650; color: #fff; background: #111827; padding: 3px 9px; border-radius: 6px; }

/* Punkte-Liste (Icons = Inline-SVG, stroke=currentColor) */
.tt-ob-list{ margin: 0 0 13px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.tt-ob-list li{ display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #374151; line-height: 1.4; }
.tt-ob-list li svg{ color: #111827; margin-top: 1px; flex: 0 0 auto; }

.tt-ob-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-ob-skip{ border: none; background: none; color: #9ca3af; font-size: 12.5px; padding: 4px 2px; cursor: pointer; }
.tt-ob-skip:hover{ color: #6b7280; }
.tt-ob-next{
  border: none; background: #111827; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease;
}
.tt-ob-next:hover{ background: #1f2937; }

/* "Portal-Rundgang neu starten"-Zeile im Profil */
.tt-ob-reset-row{ font-size: 12.5px; color: #6b7280; }
.tt-ob-reset-row button{ border: none; background: none; color: #111827; font-weight: 600; cursor: pointer; padding: 0; font-size: 12.5px; text-decoration: underline; }

/* ============================================================
   V228 — Erzwungenes Intro (animierter „Cursor klickt"-Rundgang)
   Monochrome Marke #111827. z-index über allem.
   ============================================================ */
.tt-intro-overlay {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(17, 24, 39, .55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.tt-intro-overlay.tt-intro-open { opacity: 1; }
.tt-intro-card {
  display: flex; width: min(920px, 100%); max-height: calc(100vh - 40px);
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
  transform: translateY(10px) scale(.985); transition: transform .24s ease;
}
.tt-intro-open .tt-intro-card { transform: none; }

/* Linke Seite: Miniatur-Portal mit Cursor */
.tt-intro-mock {
  position: relative; flex: 0 0 46%; background: #f3f4f6; border-right: 1px solid #e5e7eb;
  display: flex; flex-direction: column; min-width: 0;
}
.tt-intro-mock-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: #111827; color: #fff;
}
.tt-intro-logo { font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.tt-intro-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #374151; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600;
  transition: box-shadow .2s, transform .2s;
}
.tt-intro-mock-body { display: flex; flex: 1 1 auto; min-height: 300px; }
.tt-intro-nav { flex: 0 0 42%; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; background: #fff; border-right: 1px solid #eef0f3; }
.tt-intro-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  font-size: 11.5px; color: #4b5563; transition: background .2s, color .2s, box-shadow .2s;
}
.tt-intro-nav-item svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tt-intro-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-intro-nav-item.active { background: #111827; color: #fff; }
.tt-intro-nav-item.tt-intro-tap, .tt-intro-avatar.tt-intro-tap { box-shadow: 0 0 0 4px rgba(17, 24, 39, .18); transform: scale(1.04); }
.tt-intro-canvas { flex: 1 1 auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

/* Fake-Cursor */
.tt-intro-cursor {
  position: absolute; left: 50%; top: 60%; width: 26px; height: 26px; pointer-events: none; z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  transition: left .55s cubic-bezier(.34, 1.2, .3, 1), top .55s cubic-bezier(.34, 1.2, .3, 1), transform .16s ease;
}
.tt-intro-cursor--tap { transform: scale(.78); }

/* Fake-Screen-Bausteine */
.tt-intro-skel { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #e5e7eb 25%, #eef1f4 37%, #e5e7eb 63%); background-size: 400% 100%; animation: tt-intro-shimmer 1.4s ease infinite; }
.tt-intro-skel + .tt-intro-skel { margin-top: 6px; }
@keyframes tt-intro-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.tt-intro-fakecard { background: #fff; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px; }
.tt-intro-fakecard svg { width: 18px; height: 18px; color: #111827; margin-bottom: 6px; }
.tt-intro-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tt-intro-kpis .tt-intro-fakecard { padding: 8px; }
.tt-intro-kpis b { display: block; margin-top: 5px; }
.tt-intro-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 10.5px; color: #6b7280; }
.tt-intro-row:first-child { margin-top: 0; }
.tt-intro-row-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.tt-intro-row.tt-muted { color: #9ca3af; }
.tt-intro-pill { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef0f4; color: #4b5563; white-space: nowrap; }
.tt-intro-pill.warn { background: #fef3c7; color: #92400e; }
.tt-intro-pill.ok { background: #dcfce7; color: #166534; }
.tt-intro-fakebtn { font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid #d1d5db; color: #374151; }
.tt-intro-fakebtn.dark { background: #111827; color: #fff; border-color: #111827; }
.tt-intro-chat { display: flex; flex-direction: column; gap: 7px; }
.tt-intro-bubble { max-width: 78%; padding: 8px 10px; border-radius: 12px; }
.tt-intro-bubble.them { align-self: flex-start; background: #fff; border: 1px solid #eef0f3; border-bottom-left-radius: 4px; }
.tt-intro-bubble.me { align-self: flex-end; background: #111827; border-bottom-right-radius: 4px; }
.tt-intro-bubble.me .tt-intro-skel { background: rgba(255,255,255,.5); }
.tt-intro-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }

/* Rechte Seite: Text-Panel */
.tt-intro-panel { flex: 1 1 auto; padding: 26px 28px; display: flex; flex-direction: column; min-width: 0; }
.tt-intro-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.tt-intro-dot { width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; cursor: pointer; transition: background .2s, width .2s; }
.tt-intro-dot.active { background: #111827; width: 20px; border-radius: 4px; }
.tt-intro-icon { width: 40px; height: 40px; border-radius: 11px; background: #f3f4f6; color: #111827; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tt-intro-icon svg { width: 22px; height: 22px; }
.tt-intro-panel h2 { font-size: 20px; font-weight: 650; color: #111827; margin: 0 0 8px; }
.tt-intro-panel p { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0; }
.tt-intro-actions { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-intro-actions .btn-primary { background: #111827; border-color: #111827; color: #fff; min-width: 120px; }

@media (max-width: 720px) {
  .tt-intro-card { flex-direction: column; max-height: calc(100vh - 32px); overflow-y: auto; }
  .tt-intro-mock { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .tt-intro-mock-body { min-height: 210px; }
  .tt-intro-panel { padding: 20px; }
}