/* Nutzerführung für Laien (WP6): Einfach-Modus, Aufgaben-Einstieg, Kontext-Hilfe, Fachbegriff-Tooltips.
   Eigene Datei, damit editor.css/style.css (WP1) unberührt bleiben. Es werden ausschließlich die
   vorhandenen Farbvariablen (--fg, --mut, --pri, --line …) benutzt – die Kontrastprüfung
   (tests/browser/contrast.py) gilt damit unverändert weiter. */

/* ---------- Einfach-Modus: Seitenleiste ---------- */
.bk-simplebar { padding: var(--s2) var(--s3) .6rem; border-bottom: 1px solid var(--line); }
#bk-simple-switch, .bk-simple-switch { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
#bk-simple-switch:hover, .bk-simple-switch:hover { border-color: var(--pri-line); }
#bk-simple-switch:focus-visible, .bk-simple-switch:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.bk-switch-track { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .15s; }
.bk-switch-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: left .15s; }
#bk-simple-switch[aria-checked="true"] .bk-switch-track { background: var(--pri); }
#bk-simple-switch[aria-checked="true"] .bk-switch-dot { left: 16px; }
.bk-switch-label { flex: 1 1 auto; }
.bk-switch-state { color: var(--mut); font-weight: 500; font-size: .82rem; }
.bk-simplehint { margin: .4rem 0 0; font-size: .78rem; line-height: 1.35; color: var(--mut); }
.bk-simplehint a { color: var(--link); }
/* Verborgen, nicht gelöscht: jederzeit über den Schalter wieder sichtbar. */
.bk-nav-hidden, .bk-navgroup-empty { display: none !important; }

/* ---------- Einfach-Modus: Inhalt ---------- */
/* Bis hierher blendete der Einfach-Modus nur Menüpunkte aus – der Seiteninhalt blieb gleich
   (body.bk-simple hatte in keiner CSS-Datei eine Regel). Jetzt entscheidet der Quelltext am
   Element, was zweitrangig ist: data-bk-secondary. Ein Attribut entfernen = der Block bleibt
   im Einfach-Modus sichtbar. Die Liste steht damit dort, wo der Block gebaut wird – nicht hier. */
body.bk-simple [data-bk-secondary] { display: none; }

/* ---------- „Was möchten Sie tun?“ ---------- */
.bk-lead { margin-bottom: var(--s4); }
.bk-taskbox h2 { margin-bottom: .3rem; }
.bk-taskgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; list-style: none; margin: .6rem 0 0; padding: 0; }
.bk-taskgrid.lg { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bk-taskgrid > li { display: flex; }
.bk-tile { display: flex; flex-direction: column; gap: .3rem; width: 100%; min-height: 44px; padding: .85rem .9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s; }
.bk-tile:hover { text-decoration: none; border-color: var(--pri-line); transform: translateY(-2px); }
.bk-tile:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.bk-tile .ic { color: var(--link); }
.bk-tile b { font-size: .98rem; }
.bk-tile small { color: var(--mut); font-weight: 400; }
.bk-steps { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: .2rem; }
.bk-steps i { font-style: normal; font-size: .72rem; color: var(--mut); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: .1rem .45rem; }
.bk-tasksearch { width: 100%; }
.bk-taskcount { color: var(--mut); font-size: .84rem; margin: .4rem 0 .2rem; }
.bk-taskcount:empty { display: none; }
.bk-taskempty { grid-column: 1 / -1; color: var(--mut); }
.bk-more { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .8rem 0 0; font-size: .88rem; color: var(--mut); }
button.linkbtn.bk-linklike { color: var(--link); }

/* ---------- Erster Start: Angebot ---------- */
.bk-offer { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem var(--s4); margin-bottom: var(--s4); border: 1px solid var(--pri-line); border-radius: var(--r); background: var(--pri-soft); }
.bk-offer .ic { color: var(--link); flex: 0 0 auto; }
.bk-offer-txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: .15rem; }
.bk-offer-txt small { color: var(--mut); }
.bk-offer-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Nächster Schritt ---------- */
.bk-nextstep { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .65rem .9rem; margin-bottom: var(--s4); border: 1px solid var(--line); border-left: 4px solid var(--pri); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.bk-nextstep .sp { flex: 1; }

/* ---------- Kontext-Hilfe ---------- */
/* Rechts ausrichten: ohne .acts schiebt der automatische Außenabstand den Knopf nach rechts,
   mit .acts (Seitenaktionen) steht er direkt daneben. Ausschließlich CSS – kein style-Attribut (CSP). */
.bk-pagehelp { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.pagehead:has(> .acts) > .bk-pagehelp { margin-left: var(--s1); }
.bk-helpbtn { white-space: nowrap; }
dialog.bk-helpdlg { max-width: min(760px, calc(100vw - 2rem)); width: 100%; overflow: hidden; }
.bk-helpin { display: flex; flex-direction: column; max-height: min(86vh, 900px); }
.bk-helphead { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.bk-helphead .ic { color: var(--link); }
.bk-helphead h2 { margin: 0; font-size: 1.1rem; }
.bk-helphead .sp { flex: 1; }
.bk-helpbody { flex: 1 1 auto; overflow: auto; padding: var(--s4) 1.2rem; }
.bk-helpbody h3 { font-size: .95rem; margin: var(--s4) 0 .35rem; }
.bk-helpbody h3:first-child { margin-top: 0; }
.bk-helpfoot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: .8rem 1.2rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.bk-helpfoot .sp { flex: 1; }
.bk-helplist { margin: .2rem 0 .6rem; padding-left: 1.3rem; display: grid; gap: .3rem; }
.bk-helpnext { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: .8rem 0; }
.bk-terms { margin: .3rem 0 0; }
.bk-terms dt { font-weight: 600; margin-top: .55rem; }
.bk-terms dd { margin: .1rem 0 0; color: var(--mut); }

/* ---------- Fachbegriff-Tooltips ---------- */
.bk-term { all: unset; cursor: help; color: inherit; font: inherit; border-bottom: 1px dotted currentColor; }
.bk-term:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
.bk-tip { position: absolute; z-index: 130; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); font-size: .9rem; line-height: 1.4; }
.bk-tip b { display: block; margin-bottom: .2rem; }
.bk-tip span { color: var(--mut); }

/* ---------- Handybreite ---------- */
@media (max-width: 560px) {
  .bk-taskgrid, .bk-taskgrid.lg { grid-template-columns: 1fr; }
  .bk-offer { flex-direction: column; align-items: stretch; }
  .bk-offer-acts { flex-direction: column; }
  .bk-offer-acts button { width: 100%; }
  .bk-nextstep { flex-direction: column; align-items: stretch; }
  .bk-nextstep .btn { text-align: center; }
  .bk-pagehelp { margin-left: 0; }
  .bk-helpbtn span { display: none; }         /* am Handy nur das Symbol */
  .bk-helpin { max-height: 92vh; }
  .bk-helpfoot { flex-direction: column; align-items: stretch; }
  .bk-helpfoot .sp { display: none; }
}
@media (pointer: coarse) {
  .bk-term { padding: .1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-tile, .bk-switch-track, .bk-switch-dot { transition: none; }
  .bk-tile:hover { transform: none; }
}
@media (forced-colors: active) {
  .bk-tile, #bk-simple-switch, .bk-simple-switch, .bk-term, .bk-tip { border: 1px solid CanvasText; }
}
/* ---------- Vom Angebot zum Geld ---------- */
.bk-money { margin: 0 0 1rem; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.bk-money h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.bk-money-steps { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.bk-money-steps li { flex: 1 0 5.5rem; display: flex; flex-direction: column; gap: .15rem; min-width: 5.5rem; }
.bk-money-dot { width: 100%; height: .45rem; border-radius: 999px; background: var(--line); }
.bk-money-steps .is-done .bk-money-dot { background: var(--pri); }
.bk-money-steps .is-now .bk-money-dot { background: var(--pri); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 28%, transparent); }
.bk-money-steps .is-skipped .bk-money-dot { background: var(--line); opacity: .7; }
.bk-money-steps b { font-size: .82rem; }
.bk-money-steps small { color: var(--mut); font-size: .72rem; min-height: 1em; }
.bk-money-steps .is-now b { color: var(--pri); }
.bk-money-note { margin: .75rem 0 0; color: var(--mut); }
.bk-money-go { margin-top: .85rem; min-height: 44px; padding: .7rem 1.2rem; font-size: 1.05rem; }
.bk-money-side { font-size: .9rem; }

/* ---------- Neues Angebot ---------- */
.bk-quoteways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.bk-quoteway { display: flex; flex-direction: column; gap: .35rem; min-height: 44px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); text-decoration: none; }
.bk-quoteway:hover { text-decoration: none; border-color: var(--pri); }
.bk-quoteway.is-rec { border-color: var(--pri); }
.bk-quoteway .ic { color: var(--pri); }
.bk-quoteway-badge { align-self: flex-start; padding: .1rem .45rem; border-radius: 999px; background: var(--pri); color: #fff; font-size: .72rem; font-weight: 650; }
.bk-quoteway small { color: var(--mut); }

@media (max-width: 720px) {
  .bk-money-go { width: 100%; }
  .bk-quoteways { grid-template-columns: 1fr; }
}
@media print {
  .bk-simplebar, .bk-offer, .bk-pagehelp, .bk-nextstep, .bk-tip, .bk-taskbox, .bk-money-go { display: none !important; }
}