/* Area 'onboarding' (docs/AREAS.md) – setup wizard, dashboard "Erste Schritte", help center, print view. Tokens only (theme.css). */

/* ---------- shared ---------- */
.ob-mt { margin-top: 12px; } .ob-mb { margin-bottom: 14px; } .ob-row { gap: 8px; margin: 6px 0 10px; } .ob-skel { height: 140px; }
.ob-progress { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: 5px; background: var(--surface-3); overflow: hidden; display: block; }
.ob-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 5px; }
.ob-progress::-webkit-progress-value { background: var(--primary); border-radius: 5px; transition: width .3s; }
.ob-progress::-moz-progress-bar { background: var(--primary); border-radius: 5px; }
.ob-fig { margin: 0; } .ob-fig img, .hc-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.ob-big { width: 100%; justify-content: center; min-height: 52px; font-size: var(--fs-md); }

/* ---------- wizard ---------- */
.ob-wz .su-step-h h2 { display: flex; align-items: center; gap: 8px; outline: none; }
.ob-h-txt { min-width: 0; flex: 1; }
.ob-q { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-2); flex: none; }
.ob-q:hover, .ob-q:focus-visible { background: var(--primary-soft); color: var(--primary); } .ob-q .icon { stroke: currentColor; }
.ob-foot-r { gap: 8px; }
.ob-choices { display: grid; gap: 10px; }
.ob-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ob-choice:hover, .ob-choice:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ob-choice.primary { border-color: var(--primary); background: var(--primary-soft); }
.ob-choice > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ob-choice b { font-size: var(--fs-md); } .ob-choice small { color: var(--text-2); font-size: var(--fs-sm); }
.ob-choice > .icon { stroke: var(--text-3); flex: none; }
.ob-choice-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); flex: none; } .ob-choice-ic .icon { stroke: var(--primary); }
.ob-dots { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .ob-dots i { width: 26px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.ob-dots i.done { background: var(--success); } .ob-dots i.on { background: var(--primary); } .ob-dots .xs { margin-left: 6px; }
.ob-guide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ob-guide-txt { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-md); line-height: 1.6; } .ob-guide-txt p { margin: 0; }
.ob-details { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); }
.ob-details summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); } .ob-details ol { padding-left: 20px; margin: 6px 0 0; display: grid; gap: 4px; } .ob-details p { margin: 8px 0 0; }
.ob-success { text-align: center; padding: 30px 22px 22px; } .ob-success h2, .ob-success h3 { font-size: var(--fs-xl); margin: 10px 0 6px; outline: none; }
.ob-pop { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); animation: ob-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ob-pop .icon { width: 36px; height: 36px; stroke: var(--success); stroke-width: 2.4; }
@keyframes ob-pop { from { transform: scale(.3); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ob-pop { animation: none; } }
.ob-next { list-style: none; margin: 18px auto; padding: 0; max-width: 440px; display: grid; gap: 10px; text-align: left; }
.ob-next li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); } .ob-next .icon { stroke: var(--primary); flex: none; margin-top: 1px; }
.ob-load { max-width: 440px; margin: 0 auto; text-align: left; display: grid; gap: 6px; }
.ob-helper { display: grid; gap: 16px; }
.ob-steps { list-style: none; counter-reset: ob; margin: 0; padding: 0; display: grid; gap: 12px; }
.ob-steps li { counter-increment: ob; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.ob-steps li::before { content: counter(ob); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.ob-steps li b { color: var(--text); font-size: var(--fs); }
.ob-gallery { display: grid; gap: 10px; margin-bottom: 16px; }
.ob-gal-txt { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.55; } .ob-gal-txt p { margin: 0; }
.ob-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #1f2933; font-weight: 800; font-size: var(--fs-sm); }
.ob-gal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; } .ob-gal-nav .btn { min-width: 44px; height: 40px; }
.ob-uber-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ob-drop { min-height: 150px; }
.ob-tg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qr open" "qr wait" "more more"; gap: 14px 24px; align-items: start; }
.ob-tg-open { grid-area: open; display: grid; gap: 6px; } .ob-tg-open p { margin: 0; text-align: center; }
.ob-tg-qr { grid-area: qr; display: grid; gap: 10px; justify-items: center; max-width: 300px; } .ob-tg-qr .im-steps { margin: 0; justify-self: stretch; }
.ob-qr { width: 260px; height: 260px; max-width: 100%; background: #fff; padding: 8px; border-radius: var(--radius); border: 1px solid var(--border); }
.ob-wait { grid-area: wait; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--info-bg); font-size: var(--fs-sm); }
.ob-tg-more { grid-area: more; border-top: 1px solid var(--border); padding-top: 14px; } .ob-tg-more h3 { font-size: var(--fs); margin: 10px 0 8px; }
.ob-bubble { max-width: 420px; }
.ob-opts { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } .ob-opts legend { margin-bottom: 8px; padding: 0; }
.ob-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; min-height: 56px; }
.ob-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .ob-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-soft); }
.ob-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.ob-opt span { display: flex; flex-direction: column; gap: 2px; } .ob-opt small { color: var(--text-2); font-size: var(--fs-xs); }
.ob-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ob-h3 { font-size: var(--fs-md); margin: 28px 0 12px; }
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; text-align: left; }
.ob-cards a { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); text-decoration: none; }
.ob-cards a:hover, .ob-cards a:focus-visible { border-color: var(--primary); } .ob-cards .icon { stroke: var(--primary); margin-bottom: 4px; } .ob-cards small { color: var(--text-2); font-size: var(--fs-xs); }
/* Bolt form additions (accounts.js boltForm): paste + reveal buttons in one input group */
.pl-bolt .input-group .btn:not(:last-child) { border-radius: 0; }
.pl-paste { gap: 6px; white-space: nowrap; } .pl-mock { margin-bottom: 12px; } .pl-err-detail { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .ob-guide { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ob-tg { grid-template-columns: 1fr; grid-template-areas: "open" "wait" "qr" "more"; }
  .ob-tg-qr { max-width: none; } .ob-qr { width: 220px; height: 220px; }
  .su-foot .ob-foot-r { width: 100%; justify-content: flex-end; }
  .pl-paste span { display: none; }
}
@media (min-width: 641px) { .ob-tg-open .ob-big { width: auto; justify-self: start; } .ob-tg-open p { text-align: left; } }

/* ---------- dashboard "Erste Schritte" ---------- */
.ob-card { padding: 16px 18px; margin-bottom: var(--gap); display: grid; gap: 12px; }
.ob-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ob-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; } .ob-title h2 { font-size: var(--fs-lg); margin: 0; }
.ob-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-50); flex: none; } .ob-ic .icon { stroke: var(--accent-600); }
.ob-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ob-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); min-height: 54px; }
.ob-item.next { border-color: var(--primary); background: var(--primary-soft); }
.ob-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.ob-item.done .ob-check { background: var(--success); border-color: var(--success); } .ob-item.done .ob-check .icon { stroke: var(--surface); stroke-width: 3; width: 14px; height: 14px; }
.ob-item.done .ob-txt b { color: var(--text-2); font-weight: 550; }
.ob-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); }
.ob-go { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; padding: 6px 2px; } .ob-go .icon { stroke: currentColor; }

/* ---------- help center ---------- */
.hc-search .input { height: 52px; }
.hc-results .card-head h2 { font-size: var(--fs-md); }
.hc-hits { list-style: none; margin: 0; padding: 0; } .hc-hits li + li { border-top: 1px solid var(--border); }
.hc-hits a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; color: var(--text); } .hc-hits a:hover, .hc-hits a:focus-visible { background: var(--surface-2); }
.hc-hits .icon { stroke: var(--primary); flex: none; margin-top: 2px; } .hc-hits span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-hits small { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; } .hc-hits mark { background: var(--accent-50); color: var(--text); border-radius: 3px; padding: 0 2px; }
.hc-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); }
.hc-hero-txt { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 320px; } .hc-hero h2 { font-size: var(--fs-lg); margin: 0 0 4px; } .hc-hero p { margin: 0; }
.hc-hero-ic, .hc-topic-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); flex: none; } .hc-hero-ic .icon, .hc-topic-ic .icon { stroke: var(--primary); }
.hc-hero-btns { gap: 8px; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hc-topic { display: flex; gap: 12px; align-items: flex-start; padding: 14px; color: var(--text); transition: border-color .15s; text-decoration: none; }
.hc-topic:hover, .hc-topic:focus-visible { border-color: var(--primary); } .hc-topic span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hc-topic small { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; }
.hc-crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; color: var(--text-2); flex-wrap: wrap; }
.hc-article { padding: 26px 30px 30px; line-height: 1.65; min-width: 0; }
.hc-art-head { display: flex; gap: 14px; align-items: flex-start; } .hc-art-head h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: 0 0 6px; } .hc-art-head .lead { margin: 0; color: var(--text-2); font-size: var(--fs-md); }
.hc-toc { margin: 18px 0 6px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.hc-toc h2 { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; } .hc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .hc-toc .pl-link { text-align: left; padding: 3px 0; }
.hc-sec { margin-top: 26px; scroll-margin-top: 80px; } .hc-sec h2 { font-size: var(--fs-lg); margin: 0 0 8px; outline: none; }
.hc-sec p { margin: 0 0 10px; } .hc-sec ul, .hc-sec ol { margin: 6px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.hc-sec a, .hc-tip a { text-decoration: underline; }
.hc-steps li::marker { font-weight: 700; color: var(--primary); }
.hc-fig { margin: 8px 0 14px; } .hc-fig figcaption { font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
.hc-tip { margin: 10px 0 12px; padding: 10px 14px; border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.hc-tip.warn { border-left-color: var(--warning); background: var(--warning-bg); }
.hc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 6px 0 12px; } .hc-table th, .hc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hc-table th { color: var(--text-2); font-weight: 650; background: var(--surface-2); }
.hc-related { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); } .hc-related h2 { font-size: var(--fs-md); margin: 0 0 10px; }
.hc-rel { display: flex; flex-wrap: wrap; gap: 8px; } .hc-rel a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; }
.hc-rel .icon { stroke: var(--primary); }
.hc-actions { display: grid; gap: 8px; } .hc-mini-search { display: flex; gap: 6px; margin-top: 4px; } .hc-mini-search .input { flex: 1; min-width: 0; }
.hc-contact .xs { margin: 0; }
.hc-print-head, .hc-print-foot { display: none; }
/* print view (#/help/<topic>?print=1): no app shell on screen either */
.shell:has(.hc-print) .sidebar, .shell:has(.hc-print) .topbar, .shell:has(.hc-print) .env-banner, .shell:has(.hc-print) .demo-banner { display: none; }
.shell:has(.hc-print) { grid-template-columns: 1fr; }
.hc-print { max-width: 820px; margin: 0 auto; } .hc-print .hc-print-head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px; }
.hc-print .hc-print-head small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--text-2); } .hc-print .hc-print-foot { display: block; margin-top: 24px; }
.hc-print-bar { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
@media (max-width: 640px) { .hc-article { padding: 18px 16px 22px; } .hc-art-head h1 { font-size: var(--fs-xl); } .hc-art-head .hc-topic-ic { display: none; } .hc-table { font-size: var(--fs-xs); } }
@media print {
  .shell:has(.hc-article) .sidebar, .shell:has(.hc-article) .topbar, .shell:has(.hc-article) .env-banner, .shell:has(.hc-article) .demo-banner, .shell:has(.hc-article) .support-banner,
  .hc-layout > aside, .hc-crumbs, .no-print, .toasts { display: none !important; }
  .shell:has(.hc-article) { display: block; } .shell:has(.hc-article) .content { padding: 0; max-width: none; }
  .hc-layout { display: block; } .hc-article { border: 0; box-shadow: none; padding: 0; } .hc-print-head, .hc-print-foot { display: flex; }
  .hc-sec, .hc-fig { break-inside: avoid; } .hc-toc .pl-link { color: inherit; }
  [data-mode="dark"] .hc-article { color: #000; background: #fff; }
}
/* contrast (axe): time stamp in the sample bubble, hints on the highlighted checklist item */
.ob-wz .su-bubble [data-bt] { opacity: 1; color: #3d4e5f; } [data-mode="dark"] .ob-wz .su-bubble [data-bt] { color: #c9d4de; }
.ob-txt .muted { color: var(--text-2); }