/* Hilfe-Center /hilfe (Entwurf 09.10.2026): Suche, Themen, Fragen mit Bildanleitung.
   Farben nur über Tokens aus tokens.css. Einzige feste Farbe: die Markierung in den Screenshots
   (die Screenshots sind immer hell, deshalb bleibt sie auch im Dunkelmodus gleich). */
.help {
  --help-mark: #e0532f;          /* Rahmen der eingezeichneten Bereiche, 3,4:1 auf Weiß */
  --help-mark-strong: #c2412a;   /* Nummernkreis, weiße Ziffer 5:1 */
  display: grid;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 0 24px;
  color: var(--text);
}
.help [hidden] { display: none !important; }
.help h1, .help h2, .help h3 { color: var(--ink); }
.help :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Kopf mit Suche */
.help-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(24px, 4.5vw, 52px); border: 1px solid var(--tint-line); border-radius: var(--radius-xl); background: var(--tint-bg); overflow: hidden; }
.help-hero__copy { display: grid; gap: 16px; min-width: 0; }
.help-hero .eyebrow { margin: 0; color: var(--primary-text); }
.help-hero h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; letter-spacing: -.035em; }
.help-hero__lead { margin: 0; max-width: 58ch; font-size: 1.08rem; line-height: 1.6; }
.help-search { display: flex; align-items: center; gap: 12px; max-width: 680px; min-height: 60px; padding: 0 10px 0 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--muted); box-shadow: var(--shadow); }
.help-search:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.help-search input { flex: 1 1 auto; min-width: 0; min-height: 56px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.08rem; outline: none; box-shadow: none; }
/* The wrapper retains the visible keyboard focus indicator. */
:is(body.public-ui, body.workspace-ui) .help .help-search input:focus-visible { outline: none; box-shadow: none; }
.help-search input::placeholder { color: var(--muted); }
.help-results { margin: -6px 0 0; color: var(--muted); font-size: .92rem; }
.help-results:empty { margin-top: -16px; }
.help-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.help-popular > span { margin-right: 4px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.help a.help-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .95rem; font-weight: 600; text-decoration: none; }
.help a.help-chip:hover { border-color: var(--primary-line); color: var(--primary-text); }
.help-hero__art { position: relative; width: 200px; height: 200px; margin-right: 8px; }
.help-hero__blob { position: absolute; inset: 0; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; background: var(--surface); box-shadow: 0 24px 50px rgba(24, 35, 63, .10); }
.help-hero__art svg { position: absolute; inset: 0; margin: auto; color: var(--primary); }

/* Themen-Kacheln */
.help-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.help a.help-topic { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px 12px; height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; }
.help a.help-topic:hover { border-color: var(--primary-line); box-shadow: var(--shadow); }
.help-topic__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-text); }
.help-topic strong { color: var(--ink); font-size: 1rem; line-height: 1.3; }
.help-topic small { color: var(--muted); font-size: .86rem; line-height: 1.4; }

/* Zweispaltig: Fragen + Seitenleiste */
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.help-main { display: grid; gap: 36px; min-width: 0; }
.help-aside { position: sticky; top: 92px; display: grid; gap: 14px; }

.help-section { display: grid; gap: 14px; scroll-margin-top: 96px; }
.help-section__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: center; }
.help-section__head .help-topic__icon { width: 40px; height: 40px; grid-row: span 2; }
.help-section__head h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.02em; }
.help-section__head p { margin: 0; color: var(--muted); }

/* Fragen */
.help-list { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.help-q { scroll-margin-top: 96px; }
.help-q + .help-q { border-top: 1px solid var(--line-soft); }
.help-q > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 12px 18px 12px 20px; color: var(--ink); font-size: 1.05rem; font-weight: 650; line-height: 1.35; list-style: none; cursor: pointer; }
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary:hover { background: var(--surface-sunken); }
.help-q[open] > summary { background: var(--surface-sunken); }
.help-q__title { flex: 1 1 auto; min-width: 0; }
.help-q__badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--tint-bg); color: var(--primary-text); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.help-q__chev { flex: 0 0 auto; display: inline-flex; color: var(--muted); transition: transform .2s ease; }
.help-q[open] .help-q__chev { transform: rotate(180deg); }
.help-q__body { display: grid; gap: 16px; padding: 18px 20px 24px; }
.help-q__body > p, .help-q__body li { line-height: 1.65; }
.help-q__body > p { margin: 0; max-width: 70ch; }
.help-q__lead { font-size: 1.06rem; color: var(--ink); }
.help-q__body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Screenshot mit eingezeichneten Bereichen */
.help-shot { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.help-shot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.help-shot__bar strong { color: var(--ink); font-weight: 650; }
.help-shot__bar a { margin-left: auto; font-weight: 650; }
.help-shot__zoom { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.help-shot__frame { position: relative; background: #f5f7fb; }
.help-shot__frame img { display: block; width: 100%; height: auto; }
.help-shot--hoch .help-shot__frame { max-width: 380px; margin: 16px auto; border-radius: 12px; overflow: hidden; background: transparent; }  /* Handy-Fotos, z. B. WhatsApp-Chat */
.help-mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box; border: 3px solid var(--help-mark); border-radius: 12px; box-shadow: 0 0 0 4px rgba(224, 83, 47, .16); pointer-events: none; }
.help-mark > b, .help-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--help-mark-strong); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; }
.help-mark > b { position: absolute; left: -16px; top: -16px; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(24, 35, 63, .25); }
/* Lage der Ziffer: tl (Standard) links oben, tr rechts oben, bl links unten, ol links außerhalb (neben Häkchen und Knöpfen) */
.help-mark--tr > b { left: auto; right: -16px; }
.help-mark--bl > b { top: auto; bottom: -16px; }
.help-mark--ol > b { left: -42px; top: calc(50% - 14px); }
@media (max-width: 640px) {
  .help-shot__zoom { display: none !important; }
  .help-mark { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: var(--mw, var(--w)); height: var(--mh, var(--h)); border-width: 2px; border-radius: 8px; }
  .help-mark > b { width: 24px; height: 24px; left: -12px; top: -12px; bottom: auto; right: auto; font-size: 12px; }
  .help-mark--tr > b, .help-mark--ol > b { left: auto; right: -12px; }
  .help-mark--desk { display: none; }
}
@media (min-width: 641px) { .help-mark--mobil { display: none; } }

.help-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.help-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.help-steps > li > div { padding-top: 2px; }
.help-steps strong { color: var(--ink); }
.help-steps--plain .help-num { background: var(--primary-soft); color: var(--primary-text); }

/* Hinweise, Farblegende, Ablauf */
.help-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--tint-line); border-radius: 14px; background: var(--tint-bg); }
.help-note svg { margin-top: 3px; color: var(--primary-text); }
.help-note p { margin: 0; }
.help-note--warn { border-color: var(--warning-tint-line); background: var(--warning-tint); }
.help-note--warn svg { color: var(--warning-text); }

.help-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-legend > li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.help-tone { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 12px; border: 1px solid; border-radius: 999px; font-size: .88rem; font-weight: 700; }
.help-tone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.help-tone--ok { background: var(--ok-tint); border-color: var(--ok-tint-line); color: var(--ok-text); }
.help-tone--info { background: var(--tint-bg); border-color: var(--tint-line); color: var(--primary-text); }
.help-tone--warning { background: var(--warning-tint); border-color: var(--warning-tint-line); color: var(--warning-text); }
.help-tone--danger { background: var(--danger-tint); border-color: var(--danger-tint-line); color: var(--danger-text); }
.help-tone--pause { background: var(--pause-tint); border-color: var(--pause-tint-line); color: var(--muted); }

.help-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.help-timeline > li { position: relative; display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); gap: 0 12px; padding-bottom: 16px; }
.help-timeline > li::before { content: ""; position: absolute; left: 85px; top: 22px; bottom: -2px; width: 2px; background: var(--line); }
.help-timeline > li:last-child { padding-bottom: 0; }
.help-timeline > li:last-child::before { display: none; }
.help-timeline time { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 1px; }
.help-timeline__dot { width: 14px; height: 14px; margin: 5px 0 0 1px; border: 3px solid var(--primary); border-radius: 50%; background: var(--surface); box-sizing: border-box; position: relative; z-index: 1; }
.help-timeline__dot--ok { border-color: var(--ok-dot); background: var(--ok-dot); }
.help-timeline strong { color: var(--ink); display: block; }
.help-timeline span:not(.help-timeline__dot) { color: var(--text); }

.help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.help-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .92rem; }
.help-vote .lz-btn { min-height: 36px; padding-inline: 14px; }
.help-thanks { padding: 12px 16px; border: 1px solid var(--ok-tint-line); border-radius: 14px; background: var(--ok-tint); color: var(--ok-text-strong); font-weight: 600; }

/* Seitenleiste */
.help-card { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.help-card h2 { margin: 0; font-size: 1.05rem; }
.help-card p { margin: 0; font-size: .95rem; line-height: 1.55; }
.help-card small { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.help-toc { display: grid; gap: 2px; }
.help-toc h2 { margin: 0 0 6px; }
.help .help-toc a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--text); font-weight: 600; text-decoration: none; }
.help .help-toc a span { margin-left: auto; color: var(--muted); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.help .help-toc a:hover { background: var(--surface-sunken); color: var(--ink); }
.help .help-toc a[aria-current="true"] { background: var(--primary-soft); color: var(--primary-text); }
.help a.help-statuslink { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.help-statuslink svg { flex: 0 0 auto; color: var(--primary); }
.help a.help-statuslink:hover { border-color: var(--primary-line); }
.help-card--notruf { border-color: transparent; background: var(--brand-bg); color: #c9d1e4; }
.help-card--notruf strong { color: #fff; font-size: 1rem; }

/* Bild vergrößern */
.help-zoom { width: min(1200px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.help-zoom::backdrop { background: rgba(13, 19, 34, .72); }
.help-zoom__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.help-zoom__head strong { color: var(--ink); }
.help-zoom__head form { margin-left: auto; }
.help-zoom__body { overflow: auto; }

@media (max-width: 1080px) {
  .help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-aside .help-toc { display: none; }
}
@media (max-width: 760px) {
  .help { gap: 22px; padding-top: 12px; }
  .help-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .help-hero__art { display: none; }
  .help-search { min-height: 54px; padding-left: 14px; }
  .help-search input { min-height: 52px; font-size: 1rem; }
  .help-popular > span { width: 100%; }
  .help-topics { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .help-topics > li + li { border-top: 1px solid var(--line-soft); }
  .help a.help-topic { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; min-height: 54px; padding: 8px 14px; gap: 12px; border: 0; border-radius: 0; }
  .help-topic__icon { grid-row: auto; width: 32px; height: 32px; border-radius: 9px; }
  .help-topic small { display: none; }
  .help-topic strong { font-size: 1rem; }
  .help-topic::after { content: attr(data-count); color: var(--muted); font-size: .86rem; font-weight: 600; }
  .help-shot__pre { display: none; }
  .help-aside { grid-template-columns: minmax(0, 1fr); }
  .help-q > summary { padding: 12px 14px 12px 16px; font-size: 1rem; }
  .help-q__badge span { display: none; }
  .help-q__body { padding: 14px 14px 20px; }
  .help-legend > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .help-shot { margin-inline: -4px; }
}
.help-hero__art .lz-icon { width: 84px; height: 84px; stroke-width: 1.6; }

.help-updated { color:var(--muted); font-size:.76rem; margin:16px 0 0; }
.help-vote { scroll-margin-top:100px; }
.help-vote button[aria-pressed=true] { background:var(--primary); border-color:var(--primary); color:white!important; }
.help-vote [data-vote-yes], .help-vote [data-vote-no] { font-variant-numeric:tabular-nums; min-width:1ch; }
.help-vote [data-vote-status] { flex-basis:100%; min-height:1.2em; color:var(--muted); font-size:.78rem; }
@media(max-width:600px) { .help-vote > span { flex-basis:100%; } }

/* Authentic desktop/mobile captures share annotations, but use their own crops. */
.help-shot__responsive-crop { position:relative; aspect-ratio:var(--crop-ratio); overflow:clip; }
.help-shot__responsive-crop > picture { position:absolute; top:0; left:0; display:block; width:var(--crop-width); transform:translate(var(--crop-x),var(--crop-y)); }
@media(max-width:640px) {
  .help-shot__responsive-crop { aspect-ratio:var(--crop-mobile-ratio); }
  .help-shot__responsive-crop > picture { width:var(--crop-mobile-width); transform:translate(var(--crop-mobile-x),var(--crop-mobile-y)); }
}