/* Rundgang (onboarding.js): flach, ruhig, Hell/Dunkel über die Variablen der App, weiche Übergänge, reduced-motion beachtet. */
.onb-block { position: fixed; inset: 0; z-index: 2147483000; background: transparent; cursor: default; }
.onb-spot {
  position: fixed; z-index: 2147483001; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 16, 22, .58), 0 0 0 2px #2b86b0 inset;
  opacity: 0; transition: top .38s cubic-bezier(.2, .7, .2, 1), left .38s cubic-bezier(.2, .7, .2, 1), width .38s cubic-bezier(.2, .7, .2, 1), height .38s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
html.onb-an .onb-spot { opacity: 1; }
.onb-spot.onb-leer { border-radius: 0; box-shadow: 0 0 0 9999px rgba(8, 16, 22, .58); }
.onb-card {
  position: fixed; z-index: 2147483002; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 16px 18px 16px; border-radius: 14px; border: 1px solid var(--bs-border-color, #d9dde1);
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #1d2428);
  box-shadow: 0 10px 34px rgba(8, 16, 22, .28); font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, top .38s cubic-bezier(.2, .7, .2, 1), left .38s cubic-bezier(.2, .7, .2, 1);
}
html.onb-an .onb-card { opacity: 1; transform: none; }
.onb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.onb-zaehler { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--bs-secondary-color, #6b7280); }
.onb-x { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; width: 40px; height: 40px; margin: -8px -10px -8px 0; border-radius: 10px; cursor: pointer; }
.onb-x:hover { background: rgba(127, 127, 127, .15); }
.onb-bar { height: 3px; border-radius: 3px; background: rgba(127, 127, 127, .25); margin: 4px 0 12px; overflow: hidden; }
.onb-bar i { display: block; height: 100%; background: #175676; border-radius: 3px; transition: width .38s ease; }
[data-bs-theme="dark"] .onb-bar i { background: #5fb0d6; }
.onb-titel { font-size: 17px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.01em; color: inherit; }
.onb-text { margin: 0; color: inherit; }
.onb-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.onb-fuss .btn { min-height: 40px; min-width: 84px; }
.onb-card.onb-wechsel .onb-titel, .onb-card.onb-wechsel .onb-text { animation: onb-ein .3s ease both; }
@keyframes onb-ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.onb-card button:focus-visible { outline: 2px solid #2b86b0; outline-offset: 2px; }
/* Handy: Karte als Blatt unten */
.onb-card.onb-sheet {
  top: auto !important; left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 52vh;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom) * 0);
}
/* Handy, Ziel fest unten (Rundgang-Knopf im letzten Schritt): Blatt oben, damit Knopf und Markierung sichtbar bleiben. */
.onb-card.onb-sheet.onb-oben { top: calc(8px + env(safe-area-inset-top)) !important; bottom: auto; }
html.onb-an body { overscroll-behavior: contain; }
/* Aufgaben (Rundgang zum Mitmachen seit 1.11.2026): Aufgabenzeile in der Karte, Haken nach Erledigung. */
.onb-aufgabe { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(36, 94, 197, .08); border: 1px solid rgba(36, 94, 197, .28); font-weight: 600; }
.onb-aufgabe-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #245ec5; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.onb-aufgabe.ist-erledigt { background: rgba(25, 135, 84, .1); border-color: rgba(25, 135, 84, .35); }
.onb-aufgabe.ist-erledigt .onb-aufgabe-icon { background: #198754; }
[data-bs-theme="dark"] .onb-aufgabe { background: rgba(166, 198, 255, .12); border-color: rgba(166, 198, 255, .32); }
[data-bs-theme="dark"] .onb-aufgabe-icon { background: #a6c6ff; color: #13243e; }
/* Während einer Aufgabe gehört die Seite dem Benutzer: Sperrfläche weg, Markierung bleibt (sie fängt keine Maus). */
.onb-block.onb-frei { display: none; }
/* Ziel gerade nicht sichtbar (Benutzer ist woanders): nichts abdunkeln, die Karte wartet in der Ecke. */
.onb-spot.onb-ohne { opacity: 0 !important; }
/* Bootstrap-Modal offen (liegt unter dem Rundgang, z. B. Pepsi „Akte ansehen“): Markierung und Karte ausblenden, bis es zu ist. */
.onb-spot.onb-pause, .onb-card.onb-pause { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .onb-spot, .onb-card, .onb-bar i { transition: none !important; }
  .onb-card.onb-wechsel .onb-titel, .onb-card.onb-wechsel .onb-text { animation: none !important; }
  .onb-card { transform: none; }
}

/* Eigenständiger Rundgang-Einstieg, unabhängig von den CRM-Aktionen. */
.onb-launcher {
  position: fixed; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); z-index: 1030;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid #245ec5; background: #245ec5; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
  box-shadow: 0 3px 12px #0002; transition: background-color .15s ease;
  transform: translateY(var(--onb-dy, 0px)); /* Ausweichen nach oben (onboarding.js ausweichen) */
}
/* Liegt auch 112 px höher noch eine Aktion darunter: ausblenden, bis die Stelle frei ist (D4, SM-R3). */
.onb-launcher.onb-weg { visibility: hidden; }
/* Desktop mit offener Seitenleiste (onboarding.js parke): unten in der Leiste statt über den Inhalten; über der Leiste (z-index 1032). */
.onb-launcher.onb-in-leiste { left: 20px; right: auto; z-index: 1033; }
.onb-launcher:hover { background: #194ba3; }
.onb-launcher:focus-visible { outline: 3px solid #78a9ff; outline-offset: 3px; }
[data-bs-theme="dark"] .onb-launcher { background: #a6c6ff; color: #13243e; border-color: #a6c6ff; }
html.onb-an .onb-launcher { pointer-events: none; }
/* Offene Dialoge: echte <dialog> und Bootstrap-Modale (.modal.show, z. B. Pepsi „Akte ansehen“, F7-06). */
body:has(dialog[open]) .onb-launcher, body.modal-open .onb-launcher, body:has(.modal.show) .onb-launcher { visibility: hidden; }
@media (max-width: 600px) {
  .onb-launcher { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  main { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .onb-launcher { transition: none; } }

/* Willkommens-Pop-up beim ersten Login in der Produktion (onboarding.js willkommen). */
.onb-willkommen { width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid var(--bs-border-color, #d9dde1); border-radius: 16px;
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #1d2428); box-shadow: 0 18px 48px rgba(8, 16, 22, .32); }
.onb-willkommen::backdrop { background: rgba(8, 16, 22, .55); }
.onb-willkommen h2 { font-size: 20px; font-weight: 650; margin: 0 0 10px; letter-spacing: -.01em; }
.onb-willkommen p { margin: 0 0 10px; line-height: 1.55; }
.onb-willkommen .onb-willkommen-hinweis { font-size: 13px; color: var(--bs-secondary-color, #6b7280); }
.onb-willkommen-fuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.onb-willkommen-fuss .btn { min-height: 44px; min-width: 120px; }
@media (max-width: 600px) { .onb-willkommen-fuss { flex-direction: column-reverse; } .onb-willkommen-fuss .btn { width: 100%; } }